@pienter/ui 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -2,6 +2,42 @@
 
 ## Unreleased
 
+## 0.14.0 - 2026-09-15
+
+### 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.
+
+
 ## 0.13.0 - 2026-09-15
 
 ### Added

package/CONVENTIONS.md

@@ -1424,6 +1424,13 @@ Pinned upstream SHAs used across the table:
 `Index`, `RecordForm`, and `RecordDetails` compose existing primitives. Consumers
 register routes and supply endpoint-specific data functions, rendering and actions.
 
+They render inside `AppLayout`, whose main region is the scrollport: the shell
+is `100dvh` tall, `<main>` scrolls, the document does not. Page-level bands
+(`position: sticky`) and leftover-height rows (`1fr`) inside a page therefore
+resolve against a definite height. Scroll-to-top on navigation,
+`scroll-padding` for sticky bands and scroll restoration target that region,
+not the window; the AppLayout audit lists what a consumer wires.
+
 Index accepts `load(query, { signal })`, `columns` and `queryOptions`. It owns
 query state, rows, metadata, loading, failures and retry. Search is debounced;
 search/filter/sort/page-size changes reset page to 1. New requests and unmount

package/components/layout/app-layout/app-layout.css

@@ -2,7 +2,7 @@
     .pui-app-layout {
         display: grid;
         grid-template-rows: auto minmax(0, 1fr);
-        min-block-size: 100vh;
+        block-size: 100dvh;
 
         & .pui-app-layout__skip-link {
             position: fixed;
@@ -33,9 +33,6 @@
         }
 
         & .pui-app-layout__header {
-            position: sticky;
-            inset-block-start: 0;
-            z-index: var(--layer-4);
             display: flex;
             align-items: center;
             gap: var(--space-s);
@@ -60,6 +57,7 @@
         & .pui-app-layout__body {
             display: grid;
             grid-template-columns: auto minmax(0, 1fr);
+            grid-template-rows: minmax(0, 1fr);
             min-block-size: 0;
         }
 
@@ -69,8 +67,12 @@
 
         & .pui-app-layout__main {
             display: grid;
-            grid-template-rows: minmax(0, 1fr);
+            /* minmax(auto, 1fr): a page fills the region and grows past it. */
+            grid-template-rows: 1fr;
             min-inline-size: 0;
+            min-block-size: 0;
+            overflow: auto;
+            overscroll-behavior-block: contain;
             padding: var(
                 --pui-app-layout-main-padding,
                 var(--space-m) var(--space-l) var(--space-xl)
@@ -91,14 +93,6 @@
             flex-shrink: 0;
         }
 
-        @media (min-width: 48em) {
-            & .pui-app-layout__navigation {
-                position: sticky;
-                inset-block-start: var(--space-2xl);
-                block-size: calc(100vh - var(--space-2xl));
-            }
-        }
-
         @media (max-width: 47.999em) {
             & .pui-app-layout__drawer-toggle {
                 display: inline-flex;
@@ -111,5 +105,13 @@
                 );
             }
         }
+
+        @media print {
+            block-size: auto;
+
+            & .pui-app-layout__main {
+                overflow: visible;
+            }
+        }
     }
 }

package/icons/index.ts

@@ -41,6 +41,8 @@ import send from './send.js';
 import settings from './settings.js';
 import tool from './tool.js';
 import trash from './trash.js';
+import sidebarLeft from './sidebar-left.js';
+import sidebarRight from './sidebar-right.js';
 
 export const icons = {
     info: info,
@@ -86,6 +88,8 @@ export const icons = {
     settings: settings,
     tool: tool,
     trash: trash,
+    'sidebar-left': sidebarLeft,
+    'sidebar-right': sidebarRight,
 } as const;
 
 export type IconName = keyof typeof icons;

package/icons/sidebar-left.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M9 3v18"/></svg>';

package/icons/sidebar-right.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M15 3v18"/></svg>';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pienter/ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Shared Pienter UI components, styles, icons, and browser utilities.",
   "type": "module",
   "license": "MIT",