@kerfjs/ui 5.0.0-beta.24 → 5.0.0-beta.26

package/dist/workbench.js

@@ -24,11 +24,25 @@ function Workbench({
             class: "kui-workbench__rail kui-workbench__rail--left",
             "data-workbench-rail": "left",
             "data-collapsed": String(leftRail.collapsed ?? false),
+            "data-separator": leftRail.separator ?? "auto",
+            "data-collapse-motion": leftRail.collapseMotion ?? "slide",
+            "data-content-overflow": leftRail.contentOverflow ?? "clip",
+            "data-presentation": leftRail.presentation ?? "inline",
             "aria-label": leftRail.label || void 0,
+            "aria-hidden": leftRail.presentation === "hidden" ? "true" : void 0,
             style: leftRail.size ? `--kui-workbench-rail-width: ${leftRail.size}px` : void 0,
             children: /* @__PURE__ */ jsx("div", { class: "kui-workbench__panel-content", children: leftRail.content })
           }
         ),
+        leftRail?.collapsed && leftRail.restoreControl && leftRail.presentation !== "hidden" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-workbench__restore",
+            "data-panel": "left",
+            "data-position": leftRail.restorePosition ?? "bottom-start",
+            children: leftRail.restoreControl
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { class: "kui-workbench__center", children: [
           /* @__PURE__ */ jsx("div", { class: "kui-workbench__main", "data-workbench-main": true, children: main }),
           bottomDrawer && /* @__PURE__ */ jsx(
@@ -37,10 +51,24 @@ function Workbench({
               class: "kui-workbench__drawer",
               "data-workbench-drawer": true,
               "data-collapsed": String(bottomDrawer.collapsed ?? false),
+              "data-separator": bottomDrawer.separator ?? "auto",
+              "data-collapse-motion": bottomDrawer.collapseMotion ?? "slide",
+              "data-content-overflow": bottomDrawer.contentOverflow ?? "clip",
+              "data-presentation": bottomDrawer.presentation ?? "inline",
               "aria-label": bottomDrawer.label || void 0,
+              "aria-hidden": bottomDrawer.presentation === "hidden" ? "true" : void 0,
               style: bottomDrawer.size ? `--kui-workbench-drawer-height: ${bottomDrawer.size}px` : void 0,
               children: /* @__PURE__ */ jsx("div", { class: "kui-workbench__panel-content", children: bottomDrawer.content })
             }
+          ),
+          bottomDrawer?.collapsed && bottomDrawer.restoreControl && bottomDrawer.presentation !== "hidden" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              class: "kui-workbench__restore",
+              "data-panel": "bottom",
+              "data-position": bottomDrawer.restorePosition ?? "bottom-end",
+              children: bottomDrawer.restoreControl
+            }
           )
         ] }),
         rightRail && /* @__PURE__ */ jsx(
@@ -49,10 +77,24 @@ function Workbench({
             class: "kui-workbench__rail kui-workbench__rail--right",
             "data-workbench-rail": "right",
             "data-collapsed": String(rightRail.collapsed ?? false),
+            "data-separator": rightRail.separator ?? "auto",
+            "data-collapse-motion": rightRail.collapseMotion ?? "slide",
+            "data-content-overflow": rightRail.contentOverflow ?? "clip",
+            "data-presentation": rightRail.presentation ?? "inline",
             "aria-label": rightRail.label || void 0,
+            "aria-hidden": rightRail.presentation === "hidden" ? "true" : void 0,
             style: rightRail.size ? `--kui-workbench-rail-width: ${rightRail.size}px` : void 0,
             children: /* @__PURE__ */ jsx("div", { class: "kui-workbench__panel-content", children: rightRail.content })
           }
+        ),
+        rightRail?.collapsed && rightRail.restoreControl && rightRail.presentation !== "hidden" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-workbench__restore",
+            "data-panel": "right",
+            "data-position": rightRail.restorePosition ?? "bottom-end",
+            children: rightRail.restoreControl
+          }
         )
       ]
     }

package/dist/workbench.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/workbench.tsx"],"names":[],"mappings":";;;AAgCO,SAAS,SAAA,CAAU;AAAA,EACxB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAmB;AACjB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,cAAA,EAAiB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACzC,EAAA;AAAA,MACA,gBAAA,EAAe,WAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MAEX,QAAA,EAAA;AAAA,QAAA,QAAA,oBACC,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,+CAAA;AAAA,YACN,qBAAA,EAAoB,MAAA;AAAA,YACpB,gBAAA,EAAgB,MAAA,CAAO,QAAA,CAAS,SAAA,IAAa,KAAK,CAAA;AAAA,YAClD,YAAA,EAAY,SAAS,KAAA,IAAS,MAAA;AAAA,YAC9B,OACE,QAAA,CAAS,IAAA,GACL,CAAA,4BAAA,EAA+B,QAAA,CAAS,IAAI,CAAA,EAAA,CAAA,GAC5C,MAAA;AAAA,YAGN,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,8BAAA,EAAgC,mBAAS,OAAA,EAAQ;AAAA;AAAA,SAC9D;AAAA,wBAEF,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EACT,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,qBAAA,EAAsB,qBAAA,EAAmB,MACjD,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,UACC,YAAA,oBACC,GAAA;AAAA,YAAC,SAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,uBAAA;AAAA,cACN,uBAAA,EAAqB,IAAA;AAAA,cACrB,gBAAA,EAAgB,MAAA,CAAO,YAAA,CAAa,SAAA,IAAa,KAAK,CAAA;AAAA,cACtD,YAAA,EAAY,aAAa,KAAA,IAAS,MAAA;AAAA,cAClC,OACE,YAAA,CAAa,IAAA,GACT,CAAA,+BAAA,EAAkC,YAAA,CAAa,IAAI,CAAA,EAAA,CAAA,GACnD,MAAA;AAAA,cAGN,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,8BAAA,EACR,uBAAa,OAAA,EAChB;AAAA;AAAA;AACF,SAAA,EAEJ,CAAA;AAAA,QACC,SAAA,oBACC,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,gDAAA;AAAA,YACN,qBAAA,EAAoB,OAAA;AAAA,YACpB,gBAAA,EAAgB,MAAA,CAAO,SAAA,CAAU,SAAA,IAAa,KAAK,CAAA;AAAA,YACnD,YAAA,EAAY,UAAU,KAAA,IAAS,MAAA;AAAA,YAC/B,OACE,SAAA,CAAU,IAAA,GACN,CAAA,4BAAA,EAA+B,SAAA,CAAU,IAAI,CAAA,EAAA,CAAA,GAC7C,MAAA;AAAA,YAGN,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,8BAAA,EAAgC,oBAAU,OAAA,EAAQ;AAAA;AAAA;AAC/D;AAAA;AAAA,GAEJ;AAEJ","file":"workbench.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\n/** A collapsible Workbench panel — a side rail or the bottom drawer. */\nexport interface WorkbenchPanel {\n  content: SafeHtml;\n  /** Whether the panel is currently collapsed (the app owns this). */\n  collapsed?: boolean;\n  /** Rail width, or drawer height, in px. Overrides the CSS default. */\n  size?: number;\n  /** Accessible name for the panel region. */\n  label?: string;\n}\n\nexport interface WorkbenchProps {\n  id: string;\n  label: string;\n  /** The central work area. */\n  main: SafeHtml;\n  leftRail?: WorkbenchPanel;\n  rightRail?: WorkbenchPanel;\n  bottomDrawer?: WorkbenchPanel;\n  className?: string;\n}\n\n/**\n * The Xcode-like multi-panel workspace: a collapsible left rail, right rail, and\n * bottom drawer around a central work area (any absent). Collapsing snaps the\n * panel's track to zero in one reflow while its fixed-size content slides out via\n * a composited transform — the instant-width / sliding-content technique, so the\n * work area relayouts once, not per frame. The app owns each `collapsed` flag;\n * the collapse is pure CSS (no wire). See `docs/23-app-layouts.md` §3.3.\n */\nexport function Workbench({\n  id,\n  label,\n  main,\n  leftRail,\n  rightRail,\n  bottomDrawer,\n  className = '',\n}: WorkbenchProps) {\n  return (\n    <section\n      class={`kui-workbench ${className}`.trim()}\n      id={id}\n      data-component=\"workbench\"\n      aria-label={label}\n    >\n      {leftRail && (\n        <aside\n          class=\"kui-workbench__rail kui-workbench__rail--left\"\n          data-workbench-rail=\"left\"\n          data-collapsed={String(leftRail.collapsed ?? false)}\n          aria-label={leftRail.label || undefined}\n          style={\n            leftRail.size\n              ? `--kui-workbench-rail-width: ${leftRail.size}px`\n              : undefined\n          }\n        >\n          <div class=\"kui-workbench__panel-content\">{leftRail.content}</div>\n        </aside>\n      )}\n      <div class=\"kui-workbench__center\">\n        <div class=\"kui-workbench__main\" data-workbench-main>\n          {main}\n        </div>\n        {bottomDrawer && (\n          <section\n            class=\"kui-workbench__drawer\"\n            data-workbench-drawer\n            data-collapsed={String(bottomDrawer.collapsed ?? false)}\n            aria-label={bottomDrawer.label || undefined}\n            style={\n              bottomDrawer.size\n                ? `--kui-workbench-drawer-height: ${bottomDrawer.size}px`\n                : undefined\n            }\n          >\n            <div class=\"kui-workbench__panel-content\">\n              {bottomDrawer.content}\n            </div>\n          </section>\n        )}\n      </div>\n      {rightRail && (\n        <aside\n          class=\"kui-workbench__rail kui-workbench__rail--right\"\n          data-workbench-rail=\"right\"\n          data-collapsed={String(rightRail.collapsed ?? false)}\n          aria-label={rightRail.label || undefined}\n          style={\n            rightRail.size\n              ? `--kui-workbench-rail-width: ${rightRail.size}px`\n              : undefined\n          }\n        >\n          <div class=\"kui-workbench__panel-content\">{rightRail.content}</div>\n        </aside>\n      )}\n    </section>\n  );\n}\n"]}
+{"version":3,"sources":["../src/workbench.tsx"],"names":[],"mappings":"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","file":"workbench.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type {\n  ResizableRegionCollapseMotion,\n  ResizableRegionContentOverflow,\n  ResizableRegionPresentation,\n  ResizableRegionRestorePosition,\n  ResizableRegionSeparator,\n} from './resizable-region.js';\n\n/** A collapsible Workbench panel — a side rail or the bottom drawer. */\nexport interface WorkbenchPanel {\n  content: SafeHtml;\n  /** Whether the panel is currently collapsed (the app owns this). */\n  collapsed?: boolean;\n  /** Rail width, or drawer height, in px. Overrides the CSS default. */\n  size?: number;\n  /** Accessible name for the panel region. */\n  label?: string;\n  separator?: ResizableRegionSeparator;\n  collapseMotion?: ResizableRegionCollapseMotion;\n  contentOverflow?: ResizableRegionContentOverflow;\n  presentation?: ResizableRegionPresentation;\n  /** Control shown in a safe-area-aware viewport corner while collapsed. */\n  restoreControl?: SafeHtml;\n  restorePosition?: ResizableRegionRestorePosition;\n}\n\nexport interface WorkbenchProps {\n  id: string;\n  label: string;\n  /** The central work area. */\n  main: SafeHtml;\n  leftRail?: WorkbenchPanel;\n  rightRail?: WorkbenchPanel;\n  bottomDrawer?: WorkbenchPanel;\n  className?: string;\n}\n\n/**\n * The Xcode-like multi-panel workspace: a collapsible left rail, right rail, and\n * bottom drawer around a central work area (any absent). Collapsing snaps the\n * panel's track to zero in one reflow while its fixed-size content slides out via\n * a composited transform — the instant-width / sliding-content technique, so the\n * work area relayouts once, not per frame. The app owns each `collapsed` flag;\n * the collapse is pure CSS (no wire). See `docs/23-app-layouts.md` §3.3.\n */\nexport function Workbench({\n  id,\n  label,\n  main,\n  leftRail,\n  rightRail,\n  bottomDrawer,\n  className = '',\n}: WorkbenchProps) {\n  return (\n    <section\n      class={`kui-workbench ${className}`.trim()}\n      id={id}\n      data-component=\"workbench\"\n      aria-label={label}\n    >\n      {leftRail && (\n        <aside\n          class=\"kui-workbench__rail kui-workbench__rail--left\"\n          data-workbench-rail=\"left\"\n          data-collapsed={String(leftRail.collapsed ?? false)}\n          data-separator={leftRail.separator ?? 'auto'}\n          data-collapse-motion={leftRail.collapseMotion ?? 'slide'}\n          data-content-overflow={leftRail.contentOverflow ?? 'clip'}\n          data-presentation={leftRail.presentation ?? 'inline'}\n          aria-label={leftRail.label || undefined}\n          aria-hidden={leftRail.presentation === 'hidden' ? 'true' : undefined}\n          style={\n            leftRail.size\n              ? `--kui-workbench-rail-width: ${leftRail.size}px`\n              : undefined\n          }\n        >\n          <div class=\"kui-workbench__panel-content\">{leftRail.content}</div>\n        </aside>\n      )}\n      {leftRail?.collapsed &&\n        leftRail.restoreControl &&\n        leftRail.presentation !== 'hidden' && (\n          <div\n            class=\"kui-workbench__restore\"\n            data-panel=\"left\"\n            data-position={leftRail.restorePosition ?? 'bottom-start'}\n          >\n            {leftRail.restoreControl}\n          </div>\n        )}\n      <div class=\"kui-workbench__center\">\n        <div class=\"kui-workbench__main\" data-workbench-main>\n          {main}\n        </div>\n        {bottomDrawer && (\n          <section\n            class=\"kui-workbench__drawer\"\n            data-workbench-drawer\n            data-collapsed={String(bottomDrawer.collapsed ?? false)}\n            data-separator={bottomDrawer.separator ?? 'auto'}\n            data-collapse-motion={bottomDrawer.collapseMotion ?? 'slide'}\n            data-content-overflow={bottomDrawer.contentOverflow ?? 'clip'}\n            data-presentation={bottomDrawer.presentation ?? 'inline'}\n            aria-label={bottomDrawer.label || undefined}\n            aria-hidden={\n              bottomDrawer.presentation === 'hidden' ? 'true' : undefined\n            }\n            style={\n              bottomDrawer.size\n                ? `--kui-workbench-drawer-height: ${bottomDrawer.size}px`\n                : undefined\n            }\n          >\n            <div class=\"kui-workbench__panel-content\">\n              {bottomDrawer.content}\n            </div>\n          </section>\n        )}\n        {bottomDrawer?.collapsed &&\n          bottomDrawer.restoreControl &&\n          bottomDrawer.presentation !== 'hidden' && (\n            <div\n              class=\"kui-workbench__restore\"\n              data-panel=\"bottom\"\n              data-position={bottomDrawer.restorePosition ?? 'bottom-end'}\n            >\n              {bottomDrawer.restoreControl}\n            </div>\n          )}\n      </div>\n      {rightRail && (\n        <aside\n          class=\"kui-workbench__rail kui-workbench__rail--right\"\n          data-workbench-rail=\"right\"\n          data-collapsed={String(rightRail.collapsed ?? false)}\n          data-separator={rightRail.separator ?? 'auto'}\n          data-collapse-motion={rightRail.collapseMotion ?? 'slide'}\n          data-content-overflow={rightRail.contentOverflow ?? 'clip'}\n          data-presentation={rightRail.presentation ?? 'inline'}\n          aria-label={rightRail.label || undefined}\n          aria-hidden={rightRail.presentation === 'hidden' ? 'true' : undefined}\n          style={\n            rightRail.size\n              ? `--kui-workbench-rail-width: ${rightRail.size}px`\n              : undefined\n          }\n        >\n          <div class=\"kui-workbench__panel-content\">{rightRail.content}</div>\n        </aside>\n      )}\n      {rightRail?.collapsed &&\n        rightRail.restoreControl &&\n        rightRail.presentation !== 'hidden' && (\n          <div\n            class=\"kui-workbench__restore\"\n            data-panel=\"right\"\n            data-position={rightRail.restorePosition ?? 'bottom-end'}\n          >\n            {rightRail.restoreControl}\n          </div>\n        )}\n    </section>\n  );\n}\n"]}

package/docs/accessibility.md

@@ -17,6 +17,37 @@ These are normative contracts for package components and consuming applications.
 - `DisclosureArrow` is an 18px root-scaled decorative visual by default, not an interaction target. Its owning native control supplies a stable accessible name, pointer and keyboard interaction, and `aria-expanded`; multiple arrows keep independently controlled state. Consumers may override `--kui-disclosure-arrow-size` without changing that ownership. Configured directions animate over the shortest path; a 180-degree closed-to-open tie uses counterclockwise rotation.
 - `List` is layout-only and adds no `list` role. Children own their native or ARIA semantics. Give a scrollable List a bounded block size, avoid nested scroll owners, and keep focused children visible while scrolling.
 
+## Select
+
+Supply a visible `label`, or `ariaLabel` when the surrounding interface already
+provides visual context. A nonempty `label` takes precedence when both are
+supplied. Kerf forwards that name through Web Awesome's internal label contract;
+an `aria-label` on the custom-element host alone cannot name its shadow
+combobox. With `ariaLabel` alone, Kerf visually hides the internal label without
+adding height or spacing. This also applies to `renderSelected`: selected content
+stays separate from the control's stable accessible name. Applications do not
+need shadow-DOM patches or extra label styling.
+
+Use `presentation="toolbar-borderless"` with `size="compact"` inside a
+`ToolbarControlGroup`; set `focusRingOwner="group"` when that parent paints the
+composed focus ring. `selectedPresentation="icon-only"` hides only the visible
+selected label—the required `label` or `ariaLabel` still names the combobox.
+Navigation selects can use intrinsic `presentation="navigation"` plus
+`labelMaxWidth` for component-owned ellipsis. These props own the control's
+appearance; its parent continues to own outer placement.
+
+Use `hint` for persistent supporting text below the control; use
+`placeholderText` only for the empty value shown inside the closed control.
+Kerf passes hint text through Web Awesome's form-control contract, which renders
+the hint part and connects the shadow combobox to it with `aria-describedby`.
+Loading placeholders keep the same visible hint while replacing the interactive
+control with inert chrome.
+
+`tests/unit/components.test.tsx` covers name projection and visible/hidden label
+variants. `tests/browser/select-accessibility.spec.ts` verifies actual accessible
+names, unchanged unlabeled geometry, keyboard selection, controlled rerenders,
+native hint wiring, and wide/narrow presentation in Chromium, Firefox, and WebKit.
+
 ## ListActionRow
 
 `ListActionRow` renders a noninteractive visual root containing primary and
@@ -45,21 +76,21 @@ The handle exposes separator role, orientation, name, minimum, maximum, and curr
 
 The application owns persistence and collapsed/expanded policy. Keep the last expanded size outside the component and restore it when reopening. An optional `handleIcon` replaces only decorative dormant content; it must not contain controls or interactive roles because the separator remains the sole focus and interaction owner.
 
-## PanelHeader
+## Toolbar headings
 
-`PanelHeader` is a plain `Toolbar` heading. Its leading zone holds an optional
-icon (a normal bordered `ToolbarControlGroup`) and the title as extra-large
-`ToolbarText`, and the app's trailing controls go straight into the trailing
-zone. By default the title carries no native heading role, so for a **dialog or
-panel** the application connects `titleId` and an optional `summaryId` to the
-owning host through `aria-labelledby` and `aria-describedby`. For a **page or
-view** title, pass `headingLevel` (usually `1`): the title then exposes
+Compose panel, dialog, and page headings as a plain `Toolbar`. Its leading zone
+holds an optional icon `ToolbarControlGroup` and a direct extra-large
+`ToolbarText`; controls belong in a trailing `ToolbarControlGroup`. By default
+the title carries no native heading role, so for a **dialog or panel** the
+application connects the title id and optional supporting-copy id to the owning
+host through `aria-labelledby` and `aria-describedby`. For a **page or view**
+title, pass `headingLevel` (usually `1`) to `ToolbarText`: it then exposes
 `role="heading"` with a matching `aria-level`, giving the view a heading landmark
 so screen-reader heading navigation and "main heading" semantics work — the same
-role/level pair `ToolbarText` exposes when it is given `headingLevel` directly.
-Keep the levels meaningful and non-skipping within a view. Pass the trailing
+role/level pair used throughout Kerf UI. Keep the levels meaningful and
+non-skipping within a view. Pass trailing
 controls as a labeled `ToolbarControlGroup` when that group needs an accessible
-name.
+name. Keep supporting copy as app-owned content below the toolbar.
 
 ## FloatingToolbar
 
@@ -75,6 +106,13 @@ and — via `position` and `--kui-floating-toolbar-inset` — where it sits.
 
 `AppTab` renders one controlled tab. `TabBar` supplies the containing tab list,
 fixed leading/trailing regions, and a horizontally scrollable strip.
+Use `TabBar.presentation` for rail, segmented, or inspector chrome,
+`allocation="fill"` when peers should divide the strip, and
+`trailingPlacement="adjacent"` when an action belongs beside the final tab.
+`AppTab` provides compact 32px, segmented, truncating-label, and icon-only
+presentations. Icon-only tabs keep the required `name` as the tab button's
+accessible name while visually hiding the duplicate label. These props own
+component appearance only; the application still owns the bar's outer placement.
 `AppTab.rootAttributes` accepts application `data-*` metadata only; runtime
 filtering rejects roles plus case variants of component- or wiring-owned
 action, identity, selection, drag, drop, and component attributes. An optional
@@ -126,7 +164,12 @@ and `placeTokenSearchCaret()` to restore a text caret without landing inside a
 chip. Call `wireTokenSearchFields()` once at a stable root so Enter submits
 without inserting a contenteditable line break and keyboard chip deletion
 restores focus plus the text-relative caret after controlled rendering replaces
-the editor; the editor still wraps text visually at its inline edge. Editable text is DOM-owned between token changes; a clear handler empties
+the editor. Restoration finishes after synchronous input listeners and before
+another keystroke; it does not wait for an animation frame that could overwrite
+a later selection. Select All + Backspace/Delete shares that replacement path
+and keeps the adopted expanded signal open while managed focus is enabled.
+Real outside focus, empty Escape, disposal, and removed fields retain their usual
+behavior. The editor still wraps text visually at its inline edge. Editable text is DOM-owned between token changes; a clear handler empties
 the editor's `textContent` before updating application state. Leading and
 trailing controls share the first text line's fixed vertical center and remain
 there as the editor wraps. In `collapsible` mode, the closed state is one named

package/docs/collapsible-panel.md

@@ -20,6 +20,9 @@ Import the panel CSS (`@kerfjs/ui/collapsible-panel.css`) alongside `foundation.
   the fixed-size content slides out via `transform` (composited, clipped) — never
   a per-frame width/height animation. The app owns the `collapsed` signal; `size`
   overrides the CSS default width/height.
+  Reusable shell policies are typed props: `separator`, `collapseMotion`,
+  `contentOverflow`, and `presentation`. A collapsed panel may also receive a
+  `restoreControl`, which Kerf places at the safe-area-aware `restorePosition`.
 - **`CollapsiblePanelToggle({ side, collapsed, action, panelId?, label? })`** and
   **`collapsiblePanelToggleIcon(side, collapsed)`** — the standard toggle
   affordance and its icon convention, so every sidebar reads the same: `PanelLeft*`
@@ -38,6 +41,10 @@ Import the panel CSS (`@kerfjs/ui/collapsible-panel.css`) alongside `foundation.
     `deviceClass()` signal): the open panel floats over the content with a
     dismissable backdrop, Escape and backdrop-click collapse it, and Tab is trapped
     within the panel (the ARIA dialog pattern);
+  - accepts `compactPresentation: "hidden"` when a compact application replaces
+    the panel with different navigation instead of overlaying it;
+  - keeps compact overlays exclusive by default, collapsing another open panel
+    when a new one opens (`exclusiveCompact: false` opts out);
   - **persists** the collapsed state to `storage` (default `localStorage`) under
     `storageKey`, seeding the signal on wire-up.
 

package/docs/component-contract.md

@@ -263,14 +263,11 @@ into the section label. Do not add padding to pane shells,
 double child-owned geometry with wrapper insets, or create competing scroll
 owners. The [layout contract](./layout.md) lists the public roles and tokens.
 
-`PanelHeader` is a plain top `Toolbar` used as a panel, dialog, or page heading;
-it overrides no Toolbar styles. The leading zone holds an optional icon (a normal
-bordered `ToolbarControlGroup` given a brand fill with a matching border) and the
-title as extra-large `ToolbarText`, and the app's `actions` go straight into the
-trailing zone (typically as a `ToolbarControlGroup`). The icon group is omitted
-when no icon is passed. The optional summary is a separate row aligned below the
-title, so it cannot pull the icon group out of vertical alignment with the
-title and action row.
+Panel, dialog, and page headings are direct `Toolbar` compositions. The leading
+zone holds an optional icon `ToolbarControlGroup` and a direct extra-large
+`ToolbarText`; app actions belong in a trailing `ToolbarControlGroup`. Omit the
+icon group when it has no content. Supporting copy is app-owned content below
+the toolbar so it cannot pull the icon or actions out of alignment.
 
 `ValueTable` composes typed `ValueTableRow` entries. A row owns its `dt`/`dd`
 semantics and may receive a leading `SafeHtml` icon. Every row keeps 8px of