@pienter/ui 0.14.0 → 0.16.0

package/CHANGELOG.md

@@ -2,6 +2,93 @@
 
 ## Unreleased
 
+## 0.16.0 - 2026-09-15
+
+### Breaking
+
+- `RecordLayout` is retired, one release after it shipped: with the page
+  container providing the main column and the new `PageAside` taking the
+  sidebar's place on the right, nothing of it was left but a gap. `Panel`
+  stays. Migration: drop the `RecordLayout` wrapper and its `sidebar` slot,
+  render the main column's `Tabs` and `Panel`s directly in `RecordForm`'s
+  `fields` slot, and move the sidebar `Panel`'s children into
+  `<PageAside :title="…">` in `RecordForm`'s new `aside` slot (the title
+  comes from the panel; `sidebar-labelledby` and `title-id` go, the aside
+  names itself). The `./components/RecordLayout.vue` export is gone.
+
+### Changed
+
+- The page container no longer stacks the aside below the main row under
+  56em. `PageAside` owns that breakpoint: the column becomes a rail at the
+  right edge and the toggle opens the content as a drawer. The aside track is
+  now `auto` and the component sets its own width, so a consumer-written
+  `<aside class="pui-page__aside">` without the component gets no size; use
+  `PageAside`.
+- `RecordDetails` stacks each label over its value when its own container is
+  narrower than 24rem, so it reads in a `PageAside` or any other narrow
+  column without the consumer overriding its grid.
+
+### Added
+
+- `PageAside`, the right band of a CMS page: filters beside a module index,
+  settings beside a record form. `title` (required; heads the column and
+  names the landmark), `description`, a default slot, `toggle` (default on)
+  with `toggle-label`, and `v-model:open` (default open). Open, it is the
+  sticky, self-scrolling aside column with a flat header and a left rule;
+  closed, a rail one toggle wide in the same column, its content `hidden`
+  but mounted so fields in the band still submit; below 56em the rail stays
+  and the toggle opens a drawer from the right with the Sidebar drawer's
+  mechanics (backdrop, focus trap, Escape, the same toggle closing it). The
+  toggle keeps the `sidebar-right` icon in both states and carries the state
+  in `aria-expanded` and its name, "Hide {title}" / "Show {title}".
+- `Form` has an `aside` slot rendered as a direct child of `<form>`, between
+  the body and the actions row, and `RecordForm` forwards it. A `PageAside`
+  in it becomes the page's aside column through the form's `display:
+  contents` while its fields keep their form owner. The page's `:has()`
+  switch matches that path too.
+
+## 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

@@ -840,10 +840,11 @@ landmark rather than a `<dialog>` (see "Use native APIs where
 applicable" below): focus trap on the panel, ref-counted scroll lock
 on body, capture trigger before mount + restore on dismiss,
 ARIA-promotion (`role="dialog"` + `aria-modal="true"` + `aria-label`)
-while open. Today this duplication exists in exactly one place
-(Sidebar). When **a second non-`<dialog>` overlay** lands with the
-same mechanics — Toast's auto-dismissing mode is a candidate, if it
-ends up needing them — review whether to extract a shared
+while open. PageAside's drawer (`PageAside.vue`, 2026-09-16) is the
+second place: the panel is inside an `<aside>` landmark, so it mirrors
+Sidebar's trap, lock, promotion and Escape rather than using `<dialog>`.
+Two is duplication, reviewed and left as is; when **a third
+non-`<dialog>` overlay** lands with the same mechanics, extract a shared
 `utils/a11y/modal-mode.ts` primitive:
 `enterModalMode(panel, { onEscape, restoreFocusTo, ariaLabel }) → exitModalMode()`.
 One consumer is implementation; two is duplication; three is a pattern.
@@ -1280,12 +1281,12 @@ follow the shape of an existing one.
 | Modal        | [`components/overlay/modal/AUDIT.md`](./components/overlay/modal/AUDIT.md)                 |
 | Navbar       | [`components/navigation/navbar/AUDIT.md`](./components/navigation/navbar/AUDIT.md)         |
 | NumberField  | [`components/form/number-field/AUDIT.md`](./components/form/number-field/AUDIT.md)         |
+| PageAside    | [`components/layout/page-aside/AUDIT.md`](./components/layout/page-aside/AUDIT.md)         |
 | Pagination   | [`components/navigation/pagination/AUDIT.md`](./components/navigation/pagination/AUDIT.md) |
 | Panel        | [`components/layout/record-layout/AUDIT.md`](./components/layout/record-layout/AUDIT.md)   |
 | Popover      | [`components/overlay/popover/AUDIT.md`](./components/overlay/popover/AUDIT.md)             |
 | Progress     | [`components/feedback/progress/AUDIT.md`](./components/feedback/progress/AUDIT.md)         |
 | RadioGroup   | [`components/form/radio-group/AUDIT.md`](./components/form/radio-group/AUDIT.md)           |
-| RecordLayout | [`components/layout/record-layout/AUDIT.md`](./components/layout/record-layout/AUDIT.md)   |
 | Segmented    | [`components/form/select/AUDIT.md`](./components/form/select/AUDIT.md)                     |
 | Select       | [`components/form/select/AUDIT.md`](./components/form/select/AUDIT.md)                     |
 | Separator    | [`components/layout/separator/AUDIT.md`](./components/layout/separator/AUDIT.md)           |
@@ -1431,6 +1432,33 @@ 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 the optional `PageAside` 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.
+
+`PageAside` is the right band (`CONTEXT.md`, Page Aside): a flat column with
+a required `title` naming the `<aside>`, a `description`, a toggle
+(`toggle`, `toggle-label`) and `v-model:open`. Open, it is the page's aside
+column, sticky with its own scroll; closed, a rail one toggle wide in the
+same column with its content `hidden` but mounted; below 56em the rail
+stays and the toggle opens the content as a drawer with the Sidebar's
+mechanics. On an index page it is a direct child of the page after the
+module `Index`; on a record page it goes in `Form`'s `aside` slot (forwarded
+by `RecordForm`) so its fields stay in the `<form>`. Its audit has the
+sizing and the accepted footer overlap.
+
 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 +1477,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.
 
@@ -1475,12 +1505,14 @@ custom sidebar/tab layouts. RecordFields takes the same draft and renders a
 subset, with `--pui-record-fields-columns` as its grid seam. It never renders a
 form element. Callers expose the relevant tab when backend issues arrive.
 
-RecordLayout and Panel give a record page its shape (`CONTEXT.md`): a sidebar
-`aside` named through `sidebar-labelledby` beside a main column that stacks
-below 56em, and one bordered section per field group or tab with its heading
-inside it. Panel honours `hidden`, so a consumer toggles tab panels with the
-attribute, and drops its chrome around a direct `BlockEditor` child. Both set
-`--pui-record-fields-columns` for the RecordFields inside them.
+Panel gives a record page's main column its sections (`CONTEXT.md`): one
+bordered section per field group or tab with its heading inside it. Panel
+honours `hidden`, so a consumer toggles tab panels with the attribute, and
+drops its chrome around a direct `BlockEditor` child. It sets
+`--pui-record-fields-columns` for the RecordFields inside it, as PageAside
+does for the settings fields in the band. `RecordLayout` is retired
+(2026-09-16, CHANGELOG): the page container is the main column and PageAside
+the sidebar.
 
 BlockEditor owns an ordered array of stable `id`/`type` blocks and emits updates
 for edits, addition, removal and reordering. Creation factories and slot content

package/components/display/record-details/record-details.css

@@ -1,5 +1,6 @@
 @layer components {
     .pui-record-details {
+        container-type: inline-size;
         display: grid;
         gap: var(--space-s);
 
@@ -33,5 +34,12 @@
             flex-wrap: wrap;
             gap: var(--space-xs);
         }
+
+        @container (max-width: 24rem) {
+            & .pui-record-details__field {
+                grid-template-columns: minmax(0, 1fr);
+                gap: var(--space-3xs);
+            }
+        }
     }
 }

package/components/form/form/Form.vue

@@ -6,22 +6,32 @@
         :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>
 
+        <slot name="aside" />
+
         <div v-if="!readonly" class="pui-form__actions">
             <slot name="actions">
                 <button

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 > :is(.pui-form__body, .pui-form__actions) {
+        padding-inline: var(--pui-gutter-inline, var(--space-l));
+    }
 }

package/components/form/record-form/RecordForm.vue

@@ -107,6 +107,9 @@ function submit(): void {
             </RecordFields>
         </slot>
         <slot />
+        <template v-if="$slots.aside" #aside>
+            <slot name="aside" />
+        </template>
         <template #actions>
             <slot name="actions" :busy="busy">
                 <Button type="submit" variant="primary" :loading="busy">

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,68 @@
             }
         }
     }
+
+    .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;
+
+        /* `auto`, not the aside token: the aside sets its own width, so its
+           rail state changes nothing here. */
+        &:has(> .pui-page__aside, > .pui-form > .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) auto;
+        }
+    }
+
+    .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);
+    }
+}
+
+/* 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/layout/page-aside/PageAside.vue

@@ -0,0 +1,163 @@
+<template>
+    <aside
+        class="pui-page__aside pui-page-aside"
+        :aria-labelledby="titleId"
+        :data-state="expanded ? 'open' : 'closed'"
+        :data-drawer-state="drawerOpen ? 'open' : 'closed'"
+    >
+        <div
+            class="pui-page-aside__backdrop"
+            aria-hidden="true"
+            @click="drawerOpen = false"
+        />
+        <div ref="panelRef" class="pui-page-aside__panel" v-bind="drawerAria">
+            <header class="pui-page-aside__header">
+                <div class="pui-page-aside__heading">
+                    <h2 :id="titleId" class="pui-page-aside__title">
+                        {{ title }}
+                    </h2>
+                    <p v-if="description" class="pui-page-aside__description">
+                        {{ description }}
+                    </p>
+                </div>
+                <IconButton
+                    v-if="toggle"
+                    ref="toggleRef"
+                    class="pui-page-aside__toggle"
+                    name="sidebar-right"
+                    variant="ghost"
+                    size="sm"
+                    :label="
+                        toggleLabel ?? `${expanded ? 'Hide' : 'Show'} ${title}`
+                    "
+                    :aria-expanded="expanded ? 'true' : 'false'"
+                    :aria-controls="contentId"
+                    @click="onToggle"
+                />
+            </header>
+            <div
+                :id="contentId"
+                class="pui-page-aside__content"
+                :hidden="!expanded"
+            >
+                <slot />
+            </div>
+        </div>
+    </aside>
+</template>
+
+<script setup lang="ts">
+import {
+    computed,
+    nextTick,
+    onBeforeUnmount,
+    onMounted,
+    ref,
+    useId,
+    watch,
+} from 'vue';
+import IconButton from '../../action/button/IconButton.vue';
+import { createFocusTrap, type FocusTrap } from '../../../utils/a11y/focus.js';
+import { lockScroll } from '../../../utils/dom/scroll-lock.js';
+import { useWindowListener } from '../../../composables/useEventListener.js';
+
+withDefaults(
+    defineProps<{
+        /** Heads the column and names the landmark. */
+        title: string;
+        description?: string;
+        /** Render the collapse toggle. Without it the consumer drives `open`; below 56em the toggle is the only way into the drawer. */
+        toggle?: boolean;
+        /** Accessible name for the toggle in both states; defaults to "Hide {title}" / "Show {title}". */
+        toggleLabel?: string;
+    }>(),
+    {
+        description: undefined,
+        toggle: true,
+        toggleLabel: undefined,
+    },
+);
+
+defineSlots<{
+    default?: () => unknown;
+}>();
+
+/** Column open or collapsed to a rail. Above 56em only; the drawer below has its own state. */
+const open = defineModel<boolean>('open', { default: true });
+
+const id = useId();
+const titleId = `${id}-title`;
+const contentId = `${id}-content`;
+
+const panelRef = ref<HTMLElement | null>(null);
+const toggleRef = ref<{ $el: HTMLElement } | null>(null);
+
+const narrow = ref(false);
+const drawerOpen = ref(false);
+const expanded = computed(() => (narrow.value ? drawerOpen.value : open.value));
+
+const drawerAria = computed(() =>
+    drawerOpen.value
+        ? { role: 'dialog', 'aria-modal': true, 'aria-labelledby': titleId }
+        : {},
+);
+
+const media =
+    typeof window === 'undefined'
+        ? null
+        : window.matchMedia('(max-width: 56em)');
+
+function onMediaChange(event: MediaQueryListEvent | MediaQueryList): void {
+    narrow.value = event.matches;
+    if (!event.matches) drawerOpen.value = false;
+}
+
+onMounted(() => {
+    if (!media) return;
+    onMediaChange(media);
+    media.addEventListener('change', onMediaChange);
+});
+
+function onToggle(): void {
+    if (narrow.value) drawerOpen.value = !drawerOpen.value;
+    else open.value = !open.value;
+}
+
+// The trap keeps focus in the panel, so a window listener sees the same keys.
+useWindowListener('keydown', (event) => {
+    if (event.key !== 'Escape' || !drawerOpen.value || event.defaultPrevented)
+        return;
+    event.preventDefault();
+    drawerOpen.value = false;
+});
+
+let trap: FocusTrap | null = null;
+let unlockScroll: (() => void) | null = null;
+
+watch(drawerOpen, async (isOpen) => {
+    if (isOpen) {
+        unlockScroll = lockScroll();
+        await nextTick();
+        if (!panelRef.value) return;
+        trap = createFocusTrap(panelRef.value);
+        toggleRef.value?.$el.focus();
+        return;
+    }
+    trap?.release();
+    trap = null;
+    unlockScroll?.();
+    unlockScroll = null;
+    const toggle = toggleRef.value?.$el;
+    if (toggle && document.contains(toggle)) toggle.focus();
+});
+
+onBeforeUnmount(() => {
+    media?.removeEventListener('change', onMediaChange);
+    trap?.release();
+    unlockScroll?.();
+});
+</script>
+
+<style>
+@import './page-aside.css';
+</style>

package/components/layout/page-aside/page-aside.css

@@ -0,0 +1,129 @@
+@layer components {
+    .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;
+        inline-size: var(--pui-page-aside-inline-size);
+        border-inline-start: var(--stroke-sm) solid var(--border-clr-subtle);
+
+        /* The rail: one toggle with a little air. Also the column under an
+           open drawer. */
+        &:is([data-state='closed'], [data-drawer-state='open']) {
+            inline-size: calc(var(--control-height-sm) + 2 * var(--space-s));
+
+            & .pui-page-aside__header {
+                padding-inline: var(--space-s);
+            }
+        }
+
+        &[data-state='closed'] .pui-page-aside__heading {
+            display: none;
+        }
+    }
+
+    .pui-page-aside__backdrop {
+        display: none;
+    }
+
+    /* The panel sticks, not the column; `block-size: 100%` on the column
+       would defeat sticky. `100%` is the content row, exact on a short page;
+       the viewport term caps a long one at the scrollport. */
+    .pui-page-aside__panel {
+        position: sticky;
+        inset-block-start: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-s);
+        max-block-size: min(100%, calc(100dvh - var(--space-2xl)));
+    }
+
+    .pui-page-aside__header {
+        display: flex;
+        align-items: start;
+        gap: var(--space-xs);
+        padding-inline: var(--pui-gutter-inline, var(--space-l));
+    }
+
+    .pui-page-aside__heading {
+        display: grid;
+        gap: var(--space-3xs);
+        align-content: center;
+        flex: 1;
+        min-inline-size: 0;
+        min-block-size: var(--control-height-sm);
+    }
+
+    .pui-page-aside__title {
+        margin: 0;
+        font-size: var(--step-0);
+        font-weight: var(--fw-semibold);
+    }
+
+    .pui-page-aside__description {
+        margin: 0;
+        font-size: var(--step--1);
+        color: var(--text-clr-muted);
+    }
+
+    .pui-page-aside__toggle {
+        flex-shrink: 0;
+    }
+
+    .pui-page-aside__content {
+        --pui-record-fields-columns: minmax(0, 1fr);
+
+        display: grid;
+        align-content: start;
+        gap: var(--space-s);
+        min-block-size: 0;
+        padding-inline: var(--pui-gutter-inline, var(--space-l));
+        padding-block-end: var(--space-s);
+        overflow-y: auto;
+        overscroll-behavior: contain;
+
+        &[hidden] {
+            display: none;
+        }
+    }
+
+    @media (max-width: 56em) {
+        .pui-page__aside[data-drawer-state='open'] {
+            & .pui-page-aside__backdrop {
+                display: block;
+                position: fixed;
+                inset: 0;
+                z-index: var(--layer-4);
+                background: var(--bg-clr-backdrop);
+            }
+
+            & .pui-page-aside__panel {
+                position: fixed;
+                inset-block: 0;
+                inset-inline-end: 0;
+                z-index: var(--layer-5);
+                inline-size: min(var(--pui-page-aside-inline-size), 100vw);
+                max-block-size: none;
+                padding-block-start: var(--space-s);
+                background: var(--bg-clr-surface);
+                border-inline-start: var(--stroke-sm) solid
+                    var(--border-clr-base);
+                box-shadow: var(--shadow-spark-lg);
+                animation: pui-page-aside-slide-in var(--duration-base)
+                    var(--ease-out);
+            }
+        }
+    }
+
+    @keyframes pui-page-aside-slide-in {
+        from {
+            transform: translateX(100%);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .pui-page-aside__panel {
+            animation: none;
+        }
+    }
+}

package/components/layout/record-layout/record-layout.css

@@ -1,44 +1,4 @@
 @layer components {
-    .pui-record-layout {
-        display: grid;
-        grid-template-columns:
-            minmax(0, var(--space-sidebar-width))
-            minmax(0, 1fr);
-        gap: var(--space-m);
-        align-items: start;
-        min-inline-size: 0;
-
-        @media (max-width: 56em) {
-            grid-template-columns: minmax(0, 1fr);
-        }
-    }
-
-    .pui-record-layout__sidebar {
-        min-inline-size: 0;
-
-        & .pui-panel {
-            --pui-record-fields-columns: minmax(0, 1fr);
-        }
-
-        /* Same layer as record-details.css, so this has to outrank its field rule. */
-        & .pui-record-details .pui-record-details__field {
-            grid-template-columns: minmax(0, 1fr);
-            gap: var(--space-3xs);
-        }
-
-        @media (min-width: 24em) and (max-width: 56em) {
-            & .pui-panel {
-                --pui-record-fields-columns: repeat(2, minmax(0, 1fr));
-            }
-        }
-    }
-
-    .pui-record-layout__main {
-        display: grid;
-        gap: var(--space-s);
-        min-inline-size: 0;
-    }
-
     .pui-panel {
         --pui-record-fields-columns: minmax(0, 1fr);
 

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.16.0",
   "description": "Shared Pienter UI components, styles, icons, and browser utilities.",
   "type": "module",
   "license": "MIT",
@@ -63,9 +63,9 @@
     "./components/Card.vue": "./components/layout/card/Card.vue",
     "./components/Collapsible.vue": "./components/layout/collapsible/Collapsible.vue",
     "./components/AppLayout.vue": "./components/layout/app-layout/AppLayout.vue",
+    "./components/PageAside.vue": "./components/layout/page-aside/PageAside.vue",
     "./components/PageHeader.vue": "./components/layout/page-header/PageHeader.vue",
     "./components/Panel.vue": "./components/layout/record-layout/Panel.vue",
-    "./components/RecordLayout.vue": "./components/layout/record-layout/RecordLayout.vue",
     "./components/Separator.vue": "./components/layout/separator/Separator.vue",
     "./components/Table.vue": "./components/layout/table/Table.vue",
     "./components/TableRow.vue": "./components/layout/table/TableRow.vue",

package/components/layout/record-layout/RecordLayout.vue

@@ -1,35 +0,0 @@
-<template>
-    <div class="pui-record-layout">
-        <aside
-            v-if="$slots.sidebar"
-            class="pui-record-layout__sidebar"
-            :aria-labelledby="sidebarLabelledby"
-        >
-            <slot name="sidebar" />
-        </aside>
-        <div class="pui-record-layout__main">
-            <slot />
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-withDefaults(
-    defineProps<{
-        /** `id` of the sidebar's heading; names the `<aside>` landmark through `aria-labelledby`. */
-        sidebarLabelledby?: string;
-    }>(),
-    {
-        sidebarLabelledby: undefined,
-    },
-);
-
-defineSlots<{
-    sidebar?: () => unknown;
-    default?: () => unknown;
-}>();
-</script>
-
-<style>
-@import './record-layout.css';
-</style>