pienter/ui
Watch
1
0
Fork
You've already forked ui
 0
Code Issues 5 Pull requests Projects Releases 40 Packages Wiki Activity Actions
40 releases 41 tags
  • v0.14.0 e80ffebb5b

    v0.14.0 Stable

    pienter-release-bot released this 2026-09-15 22:18:12 +00:00 | 144 commits to main since this release

    Changed

    • AppLayout's main region is now the scrollport. The shell is one viewport
      tall (100dvh), .pui-app-layout__main takes the height left under the
      header and scrolls with overflow: auto, and the document never scrolls.
      The header and navigation rail lose their position: sticky; they simply
      stay put. This gives a page a definite height to work against: a sticky
      pagination or action band pins to the region's bottom edge, a 1fr row
      takes the real leftover space, and a short page no longer grows a scrollbar
      to fit a sticky aside. overscroll-behavior-block: contain on the region
      keeps an iOS rubber-band from dragging the whole shell, and a print rule
      (block-size: auto, overflow: visible) prints the whole page rather than
      one screenful.

      Consumer-visible: anything that scrolled the window must now scroll the
      region. Vue Router's scrollBehavior only scrolls the window, so return
      false from it and set main.scrollTop yourself on route change (and on
      back, if you restore); move a scroll-padding-block-end for sticky bands
      from html to <main>, and drop any scroll-padding-block-start for the
      header, which is now outside the scrollport. A sticky band pins at the
      region's content edge, inside its padding, so a page that ends in one
      sets --pui-app-layout-main-padding with a 0 block-end instead of
      pulling the band down with a negative margin. Fragment links to targets
      inside the region keep working natively. Escape hatch, one line:
      .pui-app-layout { block-size: auto; min-block-size: 100dvh } makes the
      document the scrollport again (pin the header yourself if you want it
      fixed).

    Added

    • sidebar-left and sidebar-right icons: a panel outline with the divider on
      the left or the right, for toggling a side column. sidebar-left is
      Feather's sidebar; sidebar-right is its mirror on the same 24px grid.
    Downloads