@kerfjs/ui 5.0.0-beta.50 → 5.0.0-beta.52

package/dist/styles/toolbar.css

@@ -1,11 +1,7 @@
 .kui-toolbar {
   display: grid;
   width: 100%;
-  min-height: calc(
-    var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
-      (2 * var(--kui-toolbar-gap, 0.5rem))
-  );
-  padding: var(--kui-toolbar-gap, 0.5rem);
+  /* min-height and padding: see the safe-area rules below. */
   box-sizing: border-box;
   color: var(--kui-color-text);
   background: transparent;
@@ -16,6 +12,78 @@
   font-family: var(--kui-font-sans);
 }
 
+/* Safe areas: a toolbar compensates only for the inline edges its owner hands
+   it through `--kui-edge-inset-inline-*` (a Pane header or footer does), so its
+   box and dividers keep reaching the edge while its zones clear the unsafe
+   area. Unset means none: a toolbar embedded in content never pads for the
+   device. An app bar or bottom bar at a screen edge claims its sides with
+   `safeAreaEdges`; each claimed side pads by the routed edge context, or the
+   full device inset when nothing routes it (the Pane rule), so the top bar of
+   a shell clears the status area. A Pane header or footer clears the context
+   for its children, so a claimed side there never double-insets. Its zones
+   then see a cleared context. */
+.kui-toolbar {
+  --_kui-toolbar-safe-block-start: 0px;
+  --_kui-toolbar-safe-block-end: 0px;
+  --_kui-toolbar-safe-inline-start: var(--kui-edge-inset-inline-start, 0px);
+  --_kui-toolbar-safe-inline-end: var(--kui-edge-inset-inline-end, 0px);
+  /* The minimum height grows by any claimed block inset, so a toolbar a flex
+     column shrinks still keeps a whole control row clear of the unsafe area. */
+  min-height: calc(
+    var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
+      (2 * var(--kui-toolbar-gap, 0.5rem)) +
+      var(--_kui-toolbar-safe-block-start) + var(--_kui-toolbar-safe-block-end)
+  );
+  padding-block: calc(
+      var(--kui-toolbar-gap, 0.5rem) + var(--_kui-toolbar-safe-block-start)
+    )
+    calc(
+      var(--kui-toolbar-gap, 0.5rem) + var(--_kui-toolbar-safe-block-end)
+    );
+  padding-inline: calc(
+      var(--kui-toolbar-gap, 0.5rem) +
+        var(--_kui-toolbar-safe-inline-start)
+    )
+    calc(
+      var(--kui-toolbar-gap, 0.5rem) + var(--_kui-toolbar-safe-inline-end)
+    );
+}
+
+.kui-toolbar[data-safe-area-block-start="true"] {
+  --_kui-toolbar-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+}
+
+.kui-toolbar[data-safe-area-block-end="true"] {
+  --_kui-toolbar-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+}
+
+.kui-toolbar[data-safe-area-inline-start="true"] {
+  --_kui-toolbar-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+}
+
+.kui-toolbar[data-safe-area-inline-end="true"] {
+  --_kui-toolbar-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
+.kui-toolbar > * {
+  --kui-edge-inset-block-start: 0px;
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: 0px;
+  --kui-edge-inset-inline-end: 0px;
+}
+
 .kui-toolbar[data-has-center="false"] {
   grid-template-columns: minmax(0, 1fr) auto;
 }
@@ -97,6 +165,35 @@
 .kui-toolbar__trailing {
   justify-content: flex-end;
   grid-column: -2 / -1;
+  /* Trailing actions never clip (KF-4EYES0): the zone wraps its groups, so its
+     track can shrink only to the widest single group. When one row cannot hold
+     every group, the next group moves to a new trailing-aligned row instead of
+     overflowing the toolbar. */
+  flex-wrap: wrap;
+}
+
+/* Content-driven wrap: one row while every zone fits at its natural width;
+   otherwise the trailing zone moves below the identity, still trailing-aligned,
+   instead of truncating the leading title or clipping an action. For panel,
+   inspector, and dialog headings whose identity must stay whole. */
+.kui-toolbar[data-responsive="wrap"] {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.kui-toolbar[data-responsive="wrap"] > .kui-toolbar__leading {
+  max-width: 100%;
+  flex: 1 1 auto;
+}
+
+.kui-toolbar[data-responsive="wrap"] > .kui-toolbar__center {
+  flex: 1 1 auto;
+}
+
+.kui-toolbar[data-responsive="wrap"] > .kui-toolbar__trailing {
+  max-width: 100%;
+  flex: 0 1 auto;
+  margin-inline-start: auto;
 }
 
 .kui-toolbar[data-has-center="false"] .kui-toolbar__center,
@@ -105,59 +202,54 @@
   display: none;
 }
 
+/* Stacked topology. A container query only matches an ancestor container, so
+   these rules style the zones (whose query container is this toolbar) rather
+   than the toolbar's own grid template, which a self query can never reach.
+   Each zone spans every column track, one zone per row, so no empty track or
+   column gap narrows a stacked zone. Stacked control zones wrap at group
+   granularity (KF-4EYES0: a stacked trailing zone clipped its last action at
+   phone widths), so every group stays whole, reachable, and full size; the
+   leading identity keeps its single-line truncation. */
 @container kui-toolbar (max-width: 52rem) {
-  .kui-toolbar[data-responsive="stack"][data-responsive-at="narrow"] {
-    height: auto;
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-areas: "leading" "center" "trailing";
-    row-gap: var(--kui-toolbar-gap, 0.5rem);
-  }
-
   .kui-toolbar[data-responsive="stack"][data-responsive-at="narrow"]
-    > .kui-toolbar__leading,
-  .kui-toolbar[data-responsive="stack"][data-responsive-at="narrow"]
-    > .kui-toolbar__center,
-  .kui-toolbar[data-responsive="stack"][data-responsive-at="narrow"]
-    > .kui-toolbar__trailing {
+    > :is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing) {
     width: 100%;
-    grid-column: 1;
+    grid-column: 1 / -1;
     justify-content: flex-start;
   }
-}
 
-@container kui-toolbar (max-width: 44rem) {
-  .kui-toolbar[data-responsive="stack"][data-responsive-at="compact"] {
-    height: auto;
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-areas: "leading" "center" "trailing";
-    row-gap: var(--kui-toolbar-gap, 0.5rem);
+  .kui-toolbar[data-responsive="stack"][data-responsive-at="narrow"]
+    > :is(.kui-toolbar__center, .kui-toolbar__trailing) {
+    flex-wrap: wrap;
   }
+}
 
+@container kui-toolbar (max-width: 44rem) {
   .kui-toolbar[data-responsive="stack"][data-responsive-at="compact"]
-    > .kui-toolbar__leading,
-  .kui-toolbar[data-responsive="stack"][data-responsive-at="compact"]
-    > .kui-toolbar__center,
-  .kui-toolbar[data-responsive="stack"][data-responsive-at="compact"]
-    > .kui-toolbar__trailing {
+    > :is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing) {
     width: 100%;
-    grid-column: 1;
+    grid-column: 1 / -1;
     justify-content: flex-start;
   }
-}
 
-@container kui-toolbar (max-width: 42rem) {
-  .kui-toolbar[data-responsive="center-priority"]:has(
-      > .kui-toolbar__center [data-expanded="true"]
-    ) {
-    grid-template-columns: minmax(0, 1fr);
+  .kui-toolbar[data-responsive="stack"][data-responsive-at="compact"]
+    > :is(.kui-toolbar__center, .kui-toolbar__trailing) {
+    flex-wrap: wrap;
   }
+}
 
+/* Center priority. As with the stacked topology, the toolbar cannot query its
+   own width, so these rules style the zones: while the center holds an expanded
+   control, the leading and trailing zones leave and the center spans every
+   column track (including the gaps the vacated tracks still own), taking the
+   whole row. */
+@container kui-toolbar (max-width: 42rem) {
   .kui-toolbar[data-responsive="center-priority"]:has(
       > .kui-toolbar__center [data-expanded="true"]
     )
     > .kui-toolbar__center {
     width: 100%;
-    grid-column: 1;
+    grid-column: 1 / -1;
   }
 
   .kui-toolbar[data-responsive="center-priority"]:has(

package/dist/styles/webawesome.css

@@ -177,8 +177,8 @@
     --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
     /* Field inset: a 1px border with 8px inside it, the same content-item
        geometry the Kerf primitives use (docs/layout.md). WA's defaults are a
-       larger 0.75em/1em pad; this brings every form field onto our 8px rhythm
-       (and a ~40px single-line control height). */
+       larger 0.75em/1em pad; this brings every form field onto our 8px rhythm.
+       The single-line control height is set on the controls below. */
     --wa-form-control-border-width: var(--kui-layout-item-border-width, 1px);
     --wa-form-control-padding-block: var(
       --kui-layout-item-padding,
@@ -193,6 +193,18 @@
     --wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
     --wa-tooltip-arrow-size: 0px;
     --kui-wa-popover-arrow-size: 0px;
+    /* Web Awesome's own `ui-monospace, monospace` renders the generic face
+       (Courier) in Chromium; use Kerf's named code stack for its components. */
+    --wa-font-family-code: var(
+      --kui-font-mono,
+      ui-monospace,
+      SFMono-Regular,
+      "SF Mono",
+      Menlo,
+      Consolas,
+      "Liberation Mono",
+      monospace
+    );
     --kui-wa-carousel-dot-size: 7px;
     --kui-wa-carousel-dot-hit-size: 20px;
     --kui-wa-carousel-control-size: 28px;
@@ -403,6 +415,17 @@
     padding: var(--kui-wa-surface-inset);
   }
 
+  /* A plain-string `label` renders straight into the title part, so it would
+     sit at the bare surface inset while body content (list-inset text, Text)
+     starts one bordered item further in. Inset the default title by that item
+     step so the header label lines up with the body's text and icons. A
+     slotted label element owns its own geometry and is left alone. */
+  wa-dialog:not(:has(> [slot="label"]))::part(title) {
+    padding-inline: calc(
+      var(--kui-layout-item-padding, 0.5rem) + 0.0625rem
+    );
+  }
+
   wa-dialog::part(body) {
     padding: var(--kui-wa-surface-inset);
   }
@@ -457,6 +480,29 @@
     --arrow-size: var(--kui-wa-popover-arrow-size);
   }
 
+  /* Default-size single-line controls share Kerf's 44px control height (the
+     Select field, toolbar groups, and list rows), so a Web Awesome field,
+     button, or button radio sits flush beside a Kerf Select instead of 9px
+     shorter. The height is 2.75em of the control's own font size (44px at the
+     16px default), so size="large" grows proportionally; size="small" stays
+     Web Awesome's deliberately compact secondary control. It is scoped to the
+     controls rather than the root because Web Awesome also derives tag, copy
+     button, and toast geometry from this token. A ToolbarControlGroup still
+     sizes its own nested buttons. */
+  :is(
+    wa-button,
+    wa-color-picker,
+    wa-input,
+    wa-known-date,
+    wa-number-input,
+    wa-radio-group,
+    wa-select,
+    wa-textarea,
+    wa-time-input
+  ):not([size="small"]) {
+    --wa-form-control-height: round(2.75em, 1px);
+  }
+
   /* A form field's top label is inset by the field's own border + inline padding
      (1px + 8px = 9px) so the label text lines up with the value inside the field,
      and it is styled exactly like a ListHeader label: uppercase, xs, quiet. */

package/dist/styles/workbench.css

@@ -6,23 +6,56 @@
   height: 100%;
   overflow: hidden;
   background: var(--kui-color-surface);
+  /* Safe areas: every track paints through the unsafe area it reaches (a rail
+     or drawer grows by that inset), and each region's content compensates only
+     for the edges the region still touches. An expanded inline rail takes its
+     edge away from the center; collapsing it hands the edge back. See pane.css
+     for the `--kui-edge-inset-*` edge context. */
+  --_kui-workbench-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-workbench-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-workbench-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-workbench-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
 }
 
 /* Side rails. Collapsing snaps the flex track to zero (one reflow) while the
    fixed-width content slides out via transform (composited, clipped) — never a
    per-frame width animation. See docs/18 / the KF-7QKJRK catalog sidebar. */
 .kui-workbench__rail {
-  flex: 0 0 var(--kui-workbench-rail-width, 17.5rem);
+  --kui-edge-inset-block-start: var(--_kui-workbench-safe-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-safe-block-end);
+  --_kui-workbench-rail-extent: calc(
+    var(--kui-workbench-rail-width, 17.5rem) +
+      var(--_kui-workbench-rail-safe-inset)
+  );
+  flex: 0 0 var(--_kui-workbench-rail-extent);
   min-width: 0;
   overflow: hidden;
   background: var(--kui-color-surface);
 }
 
 .kui-workbench__rail--left {
+  --_kui-workbench-rail-safe-inset: var(--_kui-workbench-safe-inline-start);
+  --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
+  --kui-edge-inset-inline-end: 0px;
   border-inline-end: 1px solid var(--kui-color-border);
 }
 
 .kui-workbench__rail--right {
+  --_kui-workbench-rail-safe-inset: var(--_kui-workbench-safe-inline-end);
+  --kui-edge-inset-inline-start: 0px;
+  --kui-edge-inset-inline-end: var(--_kui-workbench-safe-inline-end);
   border-inline-start: 1px solid var(--kui-color-border);
 }
 
@@ -37,6 +70,10 @@
 }
 
 .kui-workbench__center {
+  --kui-edge-inset-block-start: var(--_kui-workbench-safe-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-safe-block-end);
+  --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-workbench-safe-inline-end);
   display: flex;
   flex: 1;
   min-width: 0;
@@ -45,16 +82,111 @@
   flex-direction: column;
 }
 
+.kui-workbench:has(
+    > .kui-workbench__rail--left[data-presentation="inline"]:not(
+        [data-collapsed="true"]
+      )
+  )
+  > .kui-workbench__center {
+  --kui-edge-inset-inline-start: 0px;
+}
+
+.kui-workbench:has(
+    > .kui-workbench__rail--right[data-presentation="inline"]:not(
+        [data-collapsed="true"]
+      )
+  )
+  > .kui-workbench__center {
+  --kui-edge-inset-inline-end: 0px;
+}
+
 .kui-workbench__main {
   flex: 1;
   min-height: 0;
   overflow: auto;
 }
 
+.kui-workbench__main:has(
+  ~ .kui-workbench__drawer[data-presentation="inline"]:not(
+      [data-collapsed="true"]
+    )
+) {
+  --kui-edge-inset-block-end: 0px;
+}
+
+/* The main area and each panel's content are the consumers: they pad for the
+   edges their region still touches, the main area inside its scroller so
+   content scrolls under an unsafe edge but can always be scrolled clear. A
+   region whose only child is a Pane or layout lets that child own the insets. */
+.kui-workbench__main:not(
+  :has(
+    > :is(
+        [data-component="pane"],
+        [data-component="nav-stack"],
+        [data-component="split-view"],
+        [data-component="workbench"],
+        [data-component="tab-scaffold"]
+      ):only-child
+  )
+),
+.kui-workbench__panel-content:not(
+  :has(
+    > :is(
+        [data-component="pane"],
+        [data-component="nav-stack"],
+        [data-component="split-view"],
+        [data-component="workbench"],
+        [data-component="tab-scaffold"]
+      ):only-child
+  )
+) {
+  padding-block: var(--kui-edge-inset-block-start)
+    var(--kui-edge-inset-block-end);
+  padding-inline: var(--kui-edge-inset-inline-start)
+    var(--kui-edge-inset-inline-end);
+  scroll-padding-block: var(--kui-edge-inset-block-start)
+    var(--kui-edge-inset-block-end);
+}
+
+.kui-workbench__main:not(
+    :has(
+      > :is(
+          [data-component="pane"],
+          [data-component="nav-stack"],
+          [data-component="split-view"],
+          [data-component="workbench"],
+          [data-component="tab-scaffold"]
+        ):only-child
+    )
+  )
+  > *,
+.kui-workbench__panel-content:not(
+    :has(
+      > :is(
+          [data-component="pane"],
+          [data-component="nav-stack"],
+          [data-component="split-view"],
+          [data-component="workbench"],
+          [data-component="tab-scaffold"]
+        ):only-child
+    )
+  )
+  > * {
+  --kui-edge-inset-block-start: 0px;
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: 0px;
+  --kui-edge-inset-inline-end: 0px;
+}
+
 /* Bottom drawer — the vertical analogue of a rail. */
 .kui-workbench__drawer {
+  --kui-edge-inset-block-start: 0px;
+  --_kui-workbench-drawer-extent: calc(
+    var(--kui-workbench-drawer-height, 13.75rem) +
+      var(--_kui-workbench-safe-block-end)
+  );
   position: relative;
-  flex: 0 0 var(--kui-workbench-drawer-height, 13.75rem);
+  flex: 0 0 var(--_kui-workbench-drawer-extent);
   min-height: 0;
   overflow: hidden;
   border-block-start: 1px solid var(--kui-color-border);
@@ -80,7 +212,7 @@
 /* The fixed-size sliding content. The rail/drawer keeps a definite size on its
    content so the transform reads as a slide, not a squeeze. */
 .kui-workbench__rail .kui-workbench__panel-content {
-  width: var(--kui-workbench-rail-width, 17.5rem);
+  width: var(--_kui-workbench-rail-extent);
   height: 100%;
   transition: transform 200ms ease;
 }
@@ -90,7 +222,7 @@
   inset-inline: 0;
   inset-block-end: 0;
   width: 100%;
-  height: var(--kui-workbench-drawer-height, 13.75rem);
+  height: var(--_kui-workbench-drawer-extent);
   transition: transform 200ms ease;
 }
 

package/dist/text.d.ts

@@ -2,14 +2,14 @@ import * as kerfjs from 'kerfjs';
 import { KerfBaseAttrs } from 'kerfjs/jsx-runtime';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
-type TextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+type TextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
 type TextTone = 'default' | 'quiet' | 'danger';
 type TextSize = 'default' | 'compact';
 type TextFont = 'default' | 'monospace';
 type TextBorder = 'transparent' | 'none';
 type TextContent = KerfUiContent | string | number | readonly TextContent[];
 type TextProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
-    /** Native heading or paragraph element to render. Defaults to `p`. */
+    /** Native heading, paragraph, or inline span element to render. Defaults to `p`. */
     variant?: TextVariant;
     /** Semantic foreground treatment. Defaults to the inherited foreground. */
     tone?: TextTone;
@@ -24,7 +24,8 @@ type TextProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
     className?: string;
 };
 /**
- * Semantic heading or paragraph text with the standard content-item padding.
+ * Semantic heading, paragraph, or inline text. Block variants use the standard
+ * content-item padding; `span` adds no box geometry.
  * All ordinary native heading/paragraph attributes pass through to the element.
  */
 declare function Text({ variant: Variant, tone, size, font, border, children, class: classValue, className, ...attributes }: TextProps): kerfjs.SafeHtml;

package/dist/text.js

@@ -1,3 +1,3 @@
-export { Text } from './chunk-ZNZ2JDBW.js';
+export { Text } from './chunk-7IUSV4XG.js';
 
 //# sourceMappingURL=text.js.map

package/dist/toolbar-text.js

@@ -1,4 +1,4 @@
-export { ToolbarText } from './chunk-DJKWFYAA.js';
+export { ToolbarText } from './chunk-YZV2PTY4.js';
 
 
 

package/dist/toolbar.d.ts

@@ -1,5 +1,6 @@
 import * as kerfjs from 'kerfjs';
 import { D as DividerSides } from './divider-sides-BzB6rphT.js';
+import { PaneSeparatorSide } from './pane.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface ToolbarProps {
@@ -11,14 +12,34 @@ interface ToolbarProps {
     dividerSides?: DividerSides;
     /** Horizontal treatment of the center zone. Defaults to centered content. */
     centerAlign?: 'center' | 'stretch';
-    /** Component-owned responsive layout; applications choose the policy rather than restyling toolbar internals. */
-    responsive?: 'none' | 'stack' | 'center-priority';
+    /**
+     * Component-owned responsive layout; applications choose the policy rather
+     * than restyling toolbar internals. Under every policy the trailing zone
+     * wraps its groups instead of clipping an action.
+     * - `none` keeps one row; the leading identity truncates first.
+     * - `stack` stacks the zones at `responsiveAt`, wrapping stacked control
+     *   groups onto further rows.
+     * - `wrap` keeps one row while every zone fits at its natural width, and
+     *   otherwise moves the trailing zone below a whole leading identity.
+     * - `center-priority` gives an expanded center control the full row.
+     */
+    responsive?: 'none' | 'stack' | 'wrap' | 'center-priority';
     /** Container width at which `responsive="stack"` activates. */
     responsiveAt?: 'compact' | 'narrow';
+    /**
+     * Screen edges this toolbar claims for device safe-area compensation, for an
+     * app bar or bottom bar that sits directly at a screen edge rather than in a
+     * Pane header or footer. Each listed side pads by the inset its surrounding
+     * layout reports through `--kui-edge-inset-*`, or the full device inset when
+     * nothing routes that edge, while the toolbar's box and dividers paint
+     * through. Omitted, the toolbar pads only the inline edges an owner such as
+     * a Pane header hands it, and never a block edge.
+     */
+    safeAreaEdges?: readonly PaneSeparatorSide[];
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-declare function Toolbar({ leading, center, trailing, label, dividerSides, centerAlign, responsive, responsiveAt, className, slot, }: ToolbarProps): kerfjs.SafeHtml;
+declare function Toolbar({ leading, center, trailing, label, dividerSides, centerAlign, responsive, responsiveAt, safeAreaEdges, className, slot, }: ToolbarProps): kerfjs.SafeHtml;
 
 export { DividerSides, Toolbar, type ToolbarProps };

package/dist/toolbar.js

@@ -1,3 +1,3 @@
-export { Toolbar } from './chunk-OQI7RCRP.js';
+export { Toolbar } from './chunk-MTM43SJO.js';
 
 //# sourceMappingURL=toolbar.js.map

package/dist/{types-CzgSrFXP.d.ts → types-CEsieBZi.d.ts}

@@ -40,6 +40,9 @@ interface CatalogBrand {
     /** Logo image URL (rendered decorative). Omit for a text-only brand. */
     logoUrl?: string;
 }
+type CatalogStageRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-catalog-stage'?: never;
+}>;
 interface CatalogProps {
     brand: CatalogBrand;
     sections: readonly CatalogSection[];
@@ -52,6 +55,8 @@ interface CatalogProps {
     sidebarFooter?: KerfUiContent;
     status?: KerfUiContent;
     geometryOverlay?: boolean;
+    /** Consumer-owned data attributes applied to the preview stage. */
+    stageRootAttributes?: CatalogStageRootAttributes;
     selectAction?: string;
     toggleSidebarAction?: string;
     toggleThemeAction?: string;
@@ -61,4 +66,4 @@ interface CatalogProps {
     slot?: string;
 }
 
-export type { CatalogResource as C, CatalogProps as a, CatalogBrand as b, CatalogEntry as c, CatalogRelated as d, CatalogSecondaryGroup as e, CatalogSection as f };
+export type { CatalogResource as C, CatalogProps as a, CatalogBrand as b, CatalogEntry as c, CatalogRelated as d, CatalogSecondaryGroup as e, CatalogSection as f, CatalogStageRootAttributes as g };

package/dist/value-table.js

@@ -1,4 +1,4 @@
-export { ValueTable, ValueTableRow } from './chunk-SIU2AC5W.js';
+export { ValueTable, ValueTableRow } from './chunk-2S7OWAEV.js';
 
 
 

package/dist/wire-resizable-regions.js

@@ -1,4 +1,4 @@
-export { wireResizableRegions } from './chunk-J3EE6XWD.js';
+export { wireResizableRegions } from './chunk-EKYZCRCX.js';
 
 
 //# sourceMappingURL=wire-resizable-regions.js.map

package/dist/wire-sidebar.d.ts

@@ -14,9 +14,18 @@ interface WireSidebarPanel {
     collapsed: Signal<boolean>;
     /** `data-action` value the panel's toggle button(s) carry. */
     toggleAction: string;
-    /** When set, the collapsed state is loaded from and saved to `storage` under
-     *  this key (a persistence hook), so the panel remembers its state. */
+    /** When set, the panel's inline collapsed state is loaded from and saved to
+     *  `storage` under this key (a persistence hook), so the panel remembers the
+     *  user's inline choice. A compact overlay's open/closed state is transient
+     *  and is never persisted. */
     storageKey?: string;
+    /** The panel's inline (non-compact) collapsed state when `storage` holds no
+     *  choice for it; wire-up seeds the signal with it. Defaults to the signal's
+     *  own value. Set it when the app seeds the signal from the device class
+     *  (`signal(device.value.compact)`) so a compact first render already starts
+     *  collapsed while a later crossing to a wide class still restores this
+     *  inline default. */
+    inlineCollapsed?: boolean;
 }
 interface WireSidebarOptions {
     panels: readonly WireSidebarPanel[];
@@ -26,6 +35,12 @@ interface WireSidebarOptions {
      * dismissable backdrop, Escape and backdrop-click collapse it, and focus is
      * trapped within the open panel (the ARIA dialog pattern). Without it the panel
      * is always inline.
+     *
+     * An overlay is transient and user-initiated: whenever the compact overlay
+     * presentation begins (wire-up on a compact device, or a crossing from a wide
+     * class), every panel starts collapsed so nothing blocks the page until the
+     * user opens it. The inline state is remembered and restored when the device
+     * crosses back to a wide class (and on disposal).
      */
     deviceClass?: ReadonlySignal<DeviceClass>;
     /** Compact devices either overlay the panels (default) or hide them in favor
@@ -41,7 +56,7 @@ interface WireSidebarOptions {
  * delegation with focus restore, focus-into on open, an optional compact overlay
  * (backdrop + Escape + focus trap) driven by {@link deviceClass}, and an optional
  * persistence hook. The app owns each `collapsed` signal and the layout; this wire
- * owns the interaction. Returns a disposer. See `docs/24-collapsible-panel.md`.
+ * owns the interaction. Returns a disposer. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.
  */
 declare function wireSidebar(root: HTMLElement, { panels, deviceClass, compactPresentation, exclusiveCompact, storage, }: WireSidebarOptions): () => void;