@pienter/ui 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 ## Unreleased
 
+## 0.15.0 - 2026-09-15
+
+### Changed
+
+- `AppLayout`'s main region no longer has padding. A page's rows carry their
+  own gutter (see the page container under Added), so a sticky band sits
+  flush against the region's edges without negative margins. Consumer-visible:
+  a page that has not adopted `.pui-page` loses its inset. The seams stay,
+  defaulting to `0`; one line restores the previous behaviour:
+  `.pui-app-layout__main { --pui-app-layout-main-padding: var(--space-m) var(--space-l) var(--space-xl); --pui-app-layout-main-padding-mobile: var(--space-s); }`.
+- `Form` wraps everything that is not the actions row — the error summary,
+  the default slot, the status message — in a new `<div class="pui-form__body">`.
+  This changes the DOM for every consumer, page-placed or not; selectors and
+  tests that assumed the fields were direct children of the `<form>` need the
+  extra level. The body inherits the form's `gap`, so a `.pui-form` override
+  still spaces the fields.
+
+### Added
+
+- `.pui-page`, the page container for `AppLayout`'s default slot: one grid of
+  four full-width rows placed by named area — `pui-page__band` (the breadcrumb
+  strip), `__header`, `__main` (takes the leftover height) and `__footer`
+  (sticky at the region's bottom) — plus an optional `__aside` beside the main
+  row: a stretched, size-contained column whose child sticks to the top of the
+  scrollport with its own scroll, stacking below the content under 56em. The
+  bands span the whole region without knowing the aside exists. A row has one
+  occupant: two elements in the same named area overlap.
+- `.pui-gutter`, the one inline padding every page row takes, in the
+  `utilities` layer so it replaces a bar's own padding without a specificity
+  fight. It reads `--pui-gutter-inline`, `--space-l` on the shell and
+  `--space-s` below the 48rem breakpoint.
+- A module `Index` or a `Form` (so a `RecordForm`) that is a direct child of
+  `.pui-page` supplies the page's rows itself: its header, body and pagination
+  footer, or its body and its actions row as the sticky footer band. Inferred
+  from the position through `display: contents`, no prop; a related index and
+  any form inside `pui-page__main` are unaffected.
+
+### Fixed
+
+- A long record title in a `Breadcrumb` wraps inside its item instead of
+  widening the trail.
+
 ## 0.14.0 - 2026-09-15
 
 ### Changed

package/CONVENTIONS.md

@@ -1431,6 +1431,23 @@ 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.
 
+The main region has no padding. A page is a `.pui-page` grid of four
+full-width rows placed by named area — band (`pui-page__band`, the
+breadcrumb strip), header (`__header`), main (`__main`, the row that takes
+the leftover height) and footer (`__footer`, sticky at the region's bottom) —
+plus an optional `__aside` beside the main row. Every row takes its inline
+padding from the `.pui-gutter` utility, so the trail, the heading, the table
+and the pagination summary share one edge and a band is full width because it
+is a full-width row, not because it escaped an inset. No negative margins, no
+bleed properties, no component computes a distance. A consumer-written row
+carries the row class plus `pui-gutter`; a module `Index` or a `Form` that is
+a direct child of the page supplies its own rows through `display: contents`
+and needs no prop for it. **A row has one occupant.** Two elements in one
+named area overlap, silently; a module `Index` already supplies the footer
+row, so a page with one does not add its own. Anything that is not a row goes
+inside `pui-page__main`. The AppLayout audit holds the
+details, the aside included.
+
 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
@@ -1449,7 +1466,9 @@ DataTable's own border, and the pagination footer as a band below. `related` is
 a list inside another record's detail page: one bordered region holding the
 `h2` header, toolbar, table and pagination footer, divided by the subtle border
 token. The heading level follows the placement; there is no heading-level prop.
-An index definition — one collection's columns, query options, copy and cell
+A module index that is a direct child of `.pui-page` supplies the page's
+header, main and footer rows itself; a related index never does. An index
+definition — one collection's columns, query options, copy and cell
 slots — is a consumer component composing `Index` and taking `placement` and a
 parent id as props. The library ships no definition type or helper.
 

package/components/form/form/Form.vue

@@ -6,20 +6,28 @@
         :aria-busy="busy ? 'true' : undefined"
         @submit.prevent="handleSubmit"
     >
-        <Alert
-            v-if="topErrors.length > 0"
-            tone="danger"
-            title="There was a problem"
-        >
-            <ul class="pui-form__errors">
-                <li v-for="error in topErrors" :key="error">{{ error }}</li>
-            </ul>
-        </Alert>
-
-        <slot />
-
-        <div v-if="statusMessage" class="pui-form__status" aria-live="polite">
-            {{ statusMessage }}
+        <div class="pui-form__body">
+            <Alert
+                v-if="topErrors.length > 0"
+                tone="danger"
+                title="There was a problem"
+            >
+                <ul class="pui-form__errors">
+                    <li v-for="error in topErrors" :key="error">
+                        {{ error }}
+                    </li>
+                </ul>
+            </Alert>
+
+            <slot />
+
+            <div
+                v-if="statusMessage"
+                class="pui-form__status"
+                aria-live="polite"
+            >
+                {{ statusMessage }}
+            </div>
         </div>
 
         <div v-if="!readonly" class="pui-form__actions">

package/components/form/form/form.css

@@ -5,6 +5,14 @@
         gap: var(--space-m);
     }
 
+    .pui-form__body {
+        display: flex;
+        flex-direction: column;
+        /* The body takes the form's gap, so a consumer's `.pui-form` override keeps working. */
+        gap: inherit;
+        min-inline-size: 0;
+    }
+
     .pui-form__errors {
         margin: 0;
         padding-inline-start: var(--space-s);
@@ -23,4 +31,32 @@
         gap: var(--space-s);
         align-items: center;
     }
+
+    /* A form that is a direct child of a page supplies its main and footer
+       rows. The `<form>` stays in the DOM, so every control keeps its owner. */
+    .pui-page > .pui-form {
+        display: contents;
+
+        & > .pui-form__body {
+            grid-area: pui-page-main;
+        }
+
+        & > .pui-form__actions {
+            grid-area: pui-page-footer;
+            position: sticky;
+            inset-block-end: 0;
+            z-index: var(--layer-2);
+            flex-wrap: wrap;
+            justify-content: end;
+            padding-block: var(--space-xs);
+            background: var(--bg-clr-surface);
+            border-block-start: var(--stroke-sm) solid var(--border-clr-subtle);
+        }
+    }
+}
+
+@layer utilities {
+    .pui-page > .pui-form > * {
+        padding-inline: var(--pui-gutter-inline, var(--space-l));
+    }
 }

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

@@ -1,5 +1,7 @@
 @layer components {
     .pui-app-layout {
+        --pui-gutter-inline: var(--space-l);
+
         display: grid;
         grid-template-rows: auto minmax(0, 1fr);
         block-size: 100dvh;
@@ -73,10 +75,7 @@
             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)
-            );
+            padding: var(--pui-app-layout-main-padding, 0);
 
             &:focus:not(:focus-visible) {
                 outline: none;
@@ -94,15 +93,14 @@
         }
 
         @media (max-width: 47.999em) {
+            --pui-gutter-inline: var(--space-s);
+
             & .pui-app-layout__drawer-toggle {
                 display: inline-flex;
             }
 
             & .pui-app-layout__main {
-                padding: var(
-                    --pui-app-layout-main-padding-mobile,
-                    var(--space-s)
-                );
+                padding: var(--pui-app-layout-main-padding-mobile, 0);
             }
         }
 
@@ -114,4 +112,113 @@
             }
         }
     }
+
+    .pui-page {
+        --pui-page-aside-inline-size: calc(
+            var(--space-sidebar-width) + 2 *
+                var(--pui-gutter-inline, var(--space-l))
+        );
+
+        display: grid;
+        grid-template-areas:
+            'pui-page-band'
+            'pui-page-header'
+            'pui-page-main'
+            'pui-page-footer';
+        /* 1fr, not minmax(0, 1fr): the auto minimum carries the main row's
+           content, so a long page grows past the region instead of capping. */
+        grid-template-rows: auto auto 1fr auto;
+        grid-template-columns: minmax(0, 1fr);
+        gap: var(--space-s) 0;
+        min-inline-size: 0;
+
+        &:has(> .pui-page__aside) {
+            grid-template-areas:
+                'pui-page-band   pui-page-band'
+                'pui-page-header pui-page-header'
+                'pui-page-main   pui-page-aside'
+                'pui-page-footer pui-page-footer';
+            grid-template-columns:
+                minmax(0, 1fr)
+                var(--pui-page-aside-inline-size);
+        }
+
+        @media (max-width: 56em) {
+            &:has(> .pui-page__aside) {
+                grid-template-areas:
+                    'pui-page-band'
+                    'pui-page-header'
+                    'pui-page-main'
+                    'pui-page-aside'
+                    'pui-page-footer';
+                grid-template-rows: auto auto 1fr auto auto;
+                grid-template-columns: minmax(0, 1fr);
+            }
+        }
+    }
+
+    .pui-page__band {
+        grid-area: pui-page-band;
+        padding-block: var(--space-xs);
+        background: var(--bg-clr-surface);
+        border-block-end: var(--stroke-sm) solid var(--border-clr-subtle);
+    }
+
+    .pui-page__header {
+        grid-area: pui-page-header;
+    }
+
+    .pui-page__main {
+        grid-area: pui-page-main;
+    }
+
+    .pui-page__footer {
+        grid-area: pui-page-footer;
+        position: sticky;
+        inset-block-end: 0;
+        z-index: var(--layer-2);
+        padding-block: var(--space-xs);
+        background: var(--bg-clr-surface);
+        border-block-start: var(--stroke-sm) solid var(--border-clr-subtle);
+    }
+
+    .pui-page__aside {
+        grid-area: pui-page-aside;
+        /* Size containment: the column is as tall as the content row and never
+           the other way round, so a long aside cannot make a short page scroll. */
+        contain: size;
+        border-inline-start: var(--stroke-sm) solid var(--border-clr-subtle);
+
+        /* The child sticks, not the column; `block-size: 100%` here would
+           defeat sticky. `100%` is the content row, which is exact on a short
+           page; the viewport term caps a long one at the scrollport. */
+        & > * {
+            position: sticky;
+            inset-block-start: 0;
+            max-block-size: min(100%, calc(100dvh - var(--space-2xl)));
+            overflow-y: auto;
+            overscroll-behavior: contain;
+        }
+
+        @media (max-width: 56em) {
+            contain: none;
+            border-inline-start: 0;
+            border-block-start: var(--stroke-sm) solid var(--border-clr-subtle);
+            padding-block-start: var(--space-s);
+
+            & > * {
+                position: static;
+                max-block-size: none;
+                overflow: visible;
+            }
+        }
+    }
+}
+
+/* A utility outranks a component's own padding, so a bar that ships its own
+   `padding-inline` lines up when it becomes a page row. */
+@layer utilities {
+    .pui-gutter {
+        padding-inline: var(--pui-gutter-inline, var(--space-l));
+    }
 }

package/components/layout/index/index.css

@@ -118,4 +118,35 @@
             border-end-end-radius: inherit;
         }
     }
+
+    /* A module index that is a direct child of a page supplies three of its
+       rows: `display: contents` dissolves the root so the regions are the
+       page's grid items. A related index never does. */
+    .pui-page > .pui-index[data-placement='module'] {
+        display: contents;
+
+        & > .pui-page-header {
+            grid-area: pui-page-header;
+        }
+
+        & > .pui-index__body {
+            grid-area: pui-page-main;
+        }
+
+        & > .pui-index__footer {
+            grid-area: pui-page-footer;
+            position: sticky;
+            inset-block-end: 0;
+            z-index: var(--layer-2);
+            border-block-start-color: var(--border-clr-subtle);
+        }
+    }
+}
+
+/* Utilities layer, so the gutter replaces PaginationFooter's own inline
+   padding without a specificity fight. */
+@layer utilities {
+    .pui-page > .pui-index[data-placement='module'] > * {
+        padding-inline: var(--pui-gutter-inline, var(--space-l));
+    }
 }

package/components/navigation/breadcrumb/breadcrumb.css

@@ -30,6 +30,9 @@
         display: inline-flex;
         align-items: center;
         gap: var(--space-2xs);
+        min-inline-size: 0;
+        /* `anywhere` shrinks min-content too, so a long record title wraps instead of widening the trail. */
+        overflow-wrap: anywhere;
     }
 
     .pui-breadcrumb__link {

package/package.json

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