@pienter/ui 0.15.0 → 0.17.0

package/CHANGELOG.md

@@ -2,6 +2,65 @@
 
 ## Unreleased
 
+## 0.17.0 - 2026-09-15
+
+### Added
+
+- `splitFilterValues` and `joinFilterValues` in `@pienter/ui/utils/cms`, for
+  the multi-value filter convention the backend contract now documents: a
+  filter such as `filter[type]=1,2` carries its values as one comma-separated
+  string of identifiers or enum tokens, and a numeric range is two ordinary
+  allowlisted filters, `<name>_min` and `<name>_max`. Both stay one string per
+  `filter[name]`, so `decodeListQuery`, `encodeListQuery`, the URL sync and
+  the allowlist are unchanged. `splitFilterValues('')` is `[]` and
+  `joinFilterValues([])` is `undefined`, so clearing deletes the parameter
+  rather than sending an empty string. See ADR 0009.
+
+## 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

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)           |
@@ -1435,7 +1436,7 @@ 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
+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
@@ -1445,8 +1446,18 @@ 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.
+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;
@@ -1494,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

@@ -30,6 +30,8 @@
             </div>
         </div>
 
+        <slot name="aside" />
+
         <div v-if="!readonly" class="pui-form__actions">
             <slot name="actions">
                 <button

package/components/form/form/form.css

@@ -56,7 +56,7 @@
 }
 
 @layer utilities {
-    .pui-page > .pui-form > * {
+    .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

@@ -132,28 +132,15 @@
         gap: var(--space-s) 0;
         min-inline-size: 0;
 
-        &:has(> .pui-page__aside) {
+        /* `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)
-                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);
-            }
+            grid-template-columns: minmax(0, 1fr) auto;
         }
     }
 
@@ -181,38 +168,6 @@
         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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pienter/ui",
-  "version": "0.15.0",
+  "version": "0.17.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/utils/cms/index.ts

@@ -205,6 +205,19 @@ export function encodeListQuery(query: ListQuery): URLSearchParams {
     return params;
 }
 
+/** Values of a multi-value filter, from its comma-separated wire string. */
+export function splitFilterValues(value: string | undefined): string[] {
+    return value ? value.split(',').filter(Boolean) : [];
+}
+
+/** The wire string of a multi-value filter; `undefined` clears the parameter. */
+export function joinFilterValues(
+    values: readonly string[],
+): string | undefined {
+    const joined = values.filter(Boolean).join(',');
+    return joined || undefined;
+}
+
 export function cloneRecord<T>(record: T): T {
     return JSON.parse(JSON.stringify(record)) as T;
 }

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>