@kerfjs/ui 5.0.0-beta.94 → 5.0.0-beta.96

package/dist/styles/toolbar.css

@@ -34,18 +34,13 @@
   /* 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-inset, var(--kui-toolbar-gap, 0.5rem))) +
+    var(--_kui-toolbar-band) + (2 * var(--_kui-toolbar-block-inset)) +
       var(--_kui-toolbar-safe-block-start) + var(--_kui-toolbar-safe-block-end)
   );
   padding-block: calc(
-      var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
-        var(--_kui-toolbar-safe-block-start)
+      var(--_kui-toolbar-block-inset) + var(--_kui-toolbar-safe-block-start)
     )
-    calc(
-      var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
-        var(--_kui-toolbar-safe-block-end)
-    );
+    calc(var(--_kui-toolbar-block-inset) + var(--_kui-toolbar-safe-block-end));
   padding-inline: calc(
       var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
         var(--_kui-toolbar-safe-inline-start)
@@ -157,6 +152,18 @@
    `--_kui-toolbar-band` is context those components use for that placement. */
 .kui-toolbar {
   --_kui-toolbar-band: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  --_kui-toolbar-block-inset: var(
+    --kui-toolbar-inset,
+    var(--kui-toolbar-gap, 0.5rem)
+  );
+}
+
+/* Compact density: a 34px band (the compact ToolbarControlGroup's size) with
+   3px block insets makes a 40px header for an embedded panel or card. The
+   inline insets and zone gap keep the standard 8px. */
+.kui-toolbar[data-density="compact"] {
+  --_kui-toolbar-band: 2.125rem;
+  --_kui-toolbar-block-inset: var(--kui-toolbar-inset, 0.1875rem);
 }
 
 .kui-toolbar__leading,
@@ -230,7 +237,7 @@
   flex-wrap: wrap;
 }
 
-.kui-toolbar__trailing > wa-button {
+.kui-toolbar__trailing > wa-button:not(:where(.kui-icon-button)) {
   margin-block-start: max(
     0px,
     calc((var(--_kui-toolbar-band) - var(--wa-form-control-height)) / 2)

package/dist/styles/value-table.css

@@ -105,3 +105,79 @@
   font-weight: var(--kui-font-weight-semibold);
   text-align: end;
 }
+
+/* `labelWidth`: a minimum label column; the value takes the rest of the row
+   (never wider than the row, so a narrow table still fits). */
+.kui-value-table[data-label-width] .kui-value-table__row {
+  grid-template-columns: var(
+    --kui-value-table-row-columns,
+    minmax(min(var(--_kui-value-table-label-min), 100%), auto) minmax(0, 1fr)
+  );
+}
+
+/* Only a table that stacks below a width becomes a size container. Size
+   containment drops its content-based width, so it fills its container's
+   width (inside its own inline margins) instead; a table without
+   `stackBelow` keeps sizing to content in shrink-to-fit contexts. */
+.kui-value-table[data-stack-below] {
+  box-sizing: border-box;
+  width: calc(100% - 2 * var(--kui-layout-inline-margin, 0.5rem));
+  container: kui-value-table / inline-size;
+}
+
+/* Stacked rows: each value sits under its label and starts at the label's
+   text edge (after a leading icon). */
+.kui-value-table[data-presentation="stacked"] .kui-value-table__row {
+  grid-template-columns: minmax(0, 1fr);
+  row-gap: var(--kui-space-2xs);
+}
+.kui-value-table[data-presentation="stacked"] .kui-value-table__row dd {
+  justify-content: flex-start;
+  text-align: start;
+}
+.kui-value-table[data-presentation="stacked"]
+  .kui-value-table__row[data-has-icon="true"]
+  dd {
+  padding-inline-start: calc(
+    var(--_kui-value-table-separator-start) -
+      var(--_kui-value-table-inline-padding)
+  );
+}
+
+@container kui-value-table (max-width: 36rem) {
+  .kui-value-table[data-stack-below="narrow"] .kui-value-table__row {
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--kui-space-2xs);
+  }
+  .kui-value-table[data-stack-below="narrow"] .kui-value-table__row dd {
+    justify-content: flex-start;
+    text-align: start;
+  }
+  .kui-value-table[data-stack-below="narrow"]
+    .kui-value-table__row[data-has-icon="true"]
+    dd {
+    padding-inline-start: calc(
+      var(--_kui-value-table-separator-start) -
+        var(--_kui-value-table-inline-padding)
+    );
+  }
+}
+
+@container kui-value-table (max-width: 32rem) {
+  .kui-value-table[data-stack-below="compact"] .kui-value-table__row {
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--kui-space-2xs);
+  }
+  .kui-value-table[data-stack-below="compact"] .kui-value-table__row dd {
+    justify-content: flex-start;
+    text-align: start;
+  }
+  .kui-value-table[data-stack-below="compact"]
+    .kui-value-table__row[data-has-icon="true"]
+    dd {
+    padding-inline-start: calc(
+      var(--_kui-value-table-separator-start) -
+        var(--_kui-value-table-inline-padding)
+    );
+  }
+}

package/dist/styles/webawesome.css

@@ -370,9 +370,9 @@
      inside the exported `details` part, while Accordion and Card paint their
      host directly. */
   :is(wa-accordion, wa-card)[appearance="sunken"] {
-    background-color: var(
+    background: var(
       --kui-wa-sunken-background,
-      var(--kui-color-surface-lowered, var(--wa-color-surface-lowered))
+      var(--kui-sunken-surface, var(--wa-color-surface-lowered))
     );
     border-color: transparent;
     border-radius: var(
@@ -383,9 +383,9 @@
   }
 
   wa-details[appearance="sunken"]::part(details) {
-    background-color: var(
+    background: var(
       --kui-wa-sunken-background,
-      var(--kui-color-surface-lowered, var(--wa-color-surface-lowered))
+      var(--kui-sunken-surface, var(--wa-color-surface-lowered))
     );
     border-color: transparent;
     border-radius: var(

package/dist/styles/workbench.css

@@ -135,10 +135,7 @@
    separator handle remains fixed. Paint only that owner. */
 .kui-workbench__main[data-appearance="sunken"],
 :is(.kui-workbench__rail, .kui-workbench__drawer)[data-appearance="sunken"] {
-  background: var(
-    --kui-sunken-panel-background,
-    var(--kui-color-surface-lowered)
-  );
+  background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
 }
 
 :is(
@@ -153,10 +150,7 @@
     .kui-workbench__drawer
   )[data-appearance="sunken"][data-resizable="true"][data-content-overflow="auto"]
   > .kui-workbench__panel-content {
-  background: var(
-    --kui-sunken-panel-background,
-    var(--kui-color-surface-lowered)
-  );
+  background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
 }
 
 .kui-workbench__main[data-drawer-inline-expanded="true"] {

package/dist/summary-row.d.ts

@@ -0,0 +1,56 @@
+import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as SemanticTone } from './semantic-tone-CdW013KF.js';
+
+/** `row` for a list section; `card` for a board column. */
+type SummaryRowPresentation = 'row' | 'card';
+/** A row's place in a rounded list section, so its corners match. */
+type SummaryRowListEdge = 'start' | 'end' | 'only';
+type SummaryRowRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-presentation'?: never;
+    'data-list-edge'?: never;
+    'data-rail'?: never;
+    'data-selected'?: never;
+    'data-dimmed'?: never;
+}>;
+interface SummaryRowProps {
+    /** The identity line: an identifier, inline status glyphs, and the title. */
+    title: KerfUiContent;
+    /** Optional leading glyph, such as a category icon. */
+    leading?: SafeHtml;
+    /** Quiet text at the end of the title line, such as a relative time. */
+    trailingMeta?: string | SafeHtml;
+    /** A wrapping line of badges, chips, and quiet text below the title. */
+    metadata?: KerfUiContent;
+    /** `row` (default) or `card`. */
+    presentation?: SummaryRowPresentation;
+    /** Title lines before clipping; default 2 for a row and 4 for a card. */
+    titleLines?: number;
+    /** A leading state rail in a semantic tone (Up Next, blocked, …). */
+    rail?: SemanticTone;
+    /** Selected state, exposed as `aria-selected`. */
+    selected?: boolean;
+    /** Dim a finished or cut item; hover and selection restore it. */
+    dimmed?: boolean;
+    /** Round the corners that meet a rounded list section's edge. */
+    listEdge?: SummaryRowListEdge;
+    /** Skip rendering while off screen in long lists (`content-visibility`). */
+    deferRendering?: boolean;
+    /** Accessible name when the visible content is not a good one. */
+    ariaLabel?: string;
+    id?: string;
+    className?: string;
+    /** Safe `data-*` identity (an item id or delegated action) on the option. */
+    rootAttributes?: SummaryRowRootAttributes;
+}
+/**
+ * A selectable, keyboard-focusable summary of one item, as a list row or a
+ * board card: an optional leading glyph and state rail, a clamped identity line
+ * with trailing quiet metadata, and a wrapping metadata line. It is a
+ * `role="option"`; place rows in a labeled `role="listbox"` and own selection
+ * and keyboard movement in the application.
+ */
+declare function SummaryRow({ title, leading, trailingMeta, metadata, presentation, titleLines, rail, selected, dimmed, listEdge, deferRendering, ariaLabel, id, className, rootAttributes, }: SummaryRowProps): SafeHtml;
+
+export { SummaryRow, type SummaryRowListEdge, type SummaryRowPresentation, type SummaryRowProps };

package/dist/summary-row.js

@@ -0,0 +1,4 @@
+export { SummaryRow } from './chunk-4UB5Z3ZZ.js';
+
+
+//# sourceMappingURL=summary-row.js.map

package/dist/summary-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"summary-row.js"}

package/dist/sunken-panel.d.ts

@@ -2,6 +2,13 @@ import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import { CssFlexKeyword, CssFlex } from './css-values.js';
 
+/**
+ * Generate the sunken texture once for a document. Sunken surfaces call this
+ * as they render; it is idempotent, and on a server (no document) or without
+ * a 2D canvas it does nothing, leaving the flat lowered surface.
+ */
+declare function ensureSunkenTexture(doc?: Document | undefined): void;
+
 type SunkenPanelShape = 'rounded' | 'square';
 interface SunkenPanelProps {
     children?: KerfUiContent;
@@ -28,4 +35,4 @@ interface SunkenPanelProps {
  */
 declare function SunkenPanel({ children, ariaLabel, shape, flex, fill, tabIndex, outlined, className, slot, }: SunkenPanelProps): kerfjs.SafeHtml;
 
-export { SunkenPanel, type SunkenPanelProps, type SunkenPanelShape };
+export { SunkenPanel, type SunkenPanelProps, type SunkenPanelShape, ensureSunkenTexture };

package/dist/sunken-panel.js

@@ -1,3 +1,4 @@
-export { SunkenPanel } from './chunk-3XPGJUUQ.js';
+export { SunkenPanel } from './chunk-D5RGM3XA.js';
+export { ensureSunkenTexture } from './chunk-IKS72C6P.js';
 
 //# sourceMappingURL=sunken-panel.js.map

package/dist/surface-scaffold-register.js

@@ -18,7 +18,7 @@ function installDialogLabel(prototype) {
       observed.add(this);
       new MutationObserver(() => syncDialogLabel(this)).observe(this, {
         attributes: true,
-        attributeFilter: ["aria-label"]
+        attributeFilter: ["aria-label", "role"]
       });
     }
     syncDialogLabel(this);
@@ -29,6 +29,12 @@ function syncDialogLabel(host) {
   const panel = host.dialog;
   if (!panel) return;
   const previous = ownedNames.get(panel);
+  if (/^(alert)?dialog$/.test(host.getAttribute("role")?.trim() ?? "")) {
+    if (previous && panel.getAttribute(previous.attribute) === previous.value)
+      panel.removeAttribute(previous.attribute);
+    ownedNames.delete(panel);
+    return;
+  }
   const externalName = ["aria-label", "aria-labelledby"].some((attribute2) => {
     const value2 = panel.getAttribute(attribute2);
     return value2 !== null && !(previous?.attribute === attribute2 && previous.value === value2);

package/dist/surface-scaffold-register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/surfaces/surface-scaffold/internal/install-dialog-label.ts","../src/components/surfaces/surface-scaffold/register/surface-scaffold-register.ts"],"names":["attribute","value"],"mappings":"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","file":"surface-scaffold-register.js","sourcesContent":["interface NamedDialog extends HTMLElement {\n  dialog?: HTMLDialogElement;\n  label: string;\n  withoutHeader: boolean;\n  update(changed: unknown): void;\n}\n\nconst installed = new WeakSet<object>();\nconst observed = new WeakSet<HTMLElement>();\nconst ownedNames = new WeakMap<\n  HTMLElement,\n  { attribute: string; value: string }\n>();\n\n/** Repair Web Awesome's missing native dialog name before its first modal open. */\nexport function installDialogLabel(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as NamedDialog;\n  const update = target.update;\n  target.update = function (this: NamedDialog, changed: unknown): void {\n    update.call(this, changed);\n    if (!this.parentElement?.classList.contains('kui-dialog-surface')) return;\n    if (!observed.has(this)) {\n      observed.add(this);\n      new MutationObserver(() => syncDialogLabel(this)).observe(this, {\n        attributes: true,\n        attributeFilter: ['aria-label'],\n      });\n    }\n    syncDialogLabel(this);\n  };\n}\n\nfunction syncDialogLabel(host: NamedDialog): void {\n  if (!host.parentElement?.classList.contains('kui-dialog-surface')) return;\n  const panel = host.dialog;\n  if (!panel) return;\n  const previous = ownedNames.get(panel);\n  const externalName = ['aria-label', 'aria-labelledby'].some((attribute) => {\n    const value = panel.getAttribute(attribute);\n    return (\n      value !== null &&\n      !(previous?.attribute === attribute && previous.value === value)\n    );\n  });\n  if (externalName) {\n    if (previous && panel.getAttribute(previous.attribute) === previous.value)\n      panel.removeAttribute(previous.attribute);\n    ownedNames.delete(panel);\n    return;\n  }\n  const explicit = host.getAttribute('aria-label')?.trim();\n  const title = host.shadowRoot?.getElementById('title');\n  const attribute =\n    !explicit && !host.withoutHeader && title\n      ? 'aria-labelledby'\n      : 'aria-label';\n  const value =\n    attribute === 'aria-labelledby' ? 'title' : explicit || host.label;\n  if (previous && previous.attribute !== attribute)\n    panel.removeAttribute(previous.attribute);\n  if (panel.getAttribute(attribute) !== value)\n    panel.setAttribute(attribute, value);\n  ownedNames.set(panel, { attribute, value });\n}\n","import WaDialog from '@awesome.me/webawesome/dist/components/dialog/dialog.js';\n\nimport { installDialogLabel } from '../internal/install-dialog-label.js';\n\ninstallDialogLabel(WaDialog.prototype);\n\n/** Importing this module registers wa-dialog and repairs wrapped native names. */\nexport const surfaceScaffoldElementsRegistered = true;\n"]}
+{"version":3,"sources":["../src/components/surfaces/surface-scaffold/internal/install-dialog-label.ts","../src/components/surfaces/surface-scaffold/register/surface-scaffold-register.ts"],"names":["attribute","value"],"mappings":"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","file":"surface-scaffold-register.js","sourcesContent":["interface NamedDialog extends HTMLElement {\n  dialog?: HTMLDialogElement;\n  label: string;\n  withoutHeader: boolean;\n  update(changed: unknown): void;\n}\n\nconst installed = new WeakSet<object>();\nconst observed = new WeakSet<HTMLElement>();\nconst ownedNames = new WeakMap<\n  HTMLElement,\n  { attribute: string; value: string }\n>();\n\n/** Repair Web Awesome's missing native dialog name before its first modal open. */\nexport function installDialogLabel(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as NamedDialog;\n  const update = target.update;\n  target.update = function (this: NamedDialog, changed: unknown): void {\n    update.call(this, changed);\n    if (!this.parentElement?.classList.contains('kui-dialog-surface')) return;\n    if (!observed.has(this)) {\n      observed.add(this);\n      new MutationObserver(() => syncDialogLabel(this)).observe(this, {\n        attributes: true,\n        attributeFilter: ['aria-label', 'role'],\n      });\n    }\n    syncDialogLabel(this);\n  };\n}\n\nfunction syncDialogLabel(host: NamedDialog): void {\n  if (!host.parentElement?.classList.contains('kui-dialog-surface')) return;\n  const panel = host.dialog;\n  if (!panel) return;\n  const previous = ownedNames.get(panel);\n  // A host that is itself the named dialog (an explicit role=\"dialog\" plus\n  // its own name) owns that name; naming the panel too would expose two\n  // dialogs with one name.\n  if (/^(alert)?dialog$/.test(host.getAttribute('role')?.trim() ?? '')) {\n    if (previous && panel.getAttribute(previous.attribute) === previous.value)\n      panel.removeAttribute(previous.attribute);\n    ownedNames.delete(panel);\n    return;\n  }\n  const externalName = ['aria-label', 'aria-labelledby'].some((attribute) => {\n    const value = panel.getAttribute(attribute);\n    return (\n      value !== null &&\n      !(previous?.attribute === attribute && previous.value === value)\n    );\n  });\n  if (externalName) {\n    if (previous && panel.getAttribute(previous.attribute) === previous.value)\n      panel.removeAttribute(previous.attribute);\n    ownedNames.delete(panel);\n    return;\n  }\n  const explicit = host.getAttribute('aria-label')?.trim();\n  const title = host.shadowRoot?.getElementById('title');\n  const attribute =\n    !explicit && !host.withoutHeader && title\n      ? 'aria-labelledby'\n      : 'aria-label';\n  const value =\n    attribute === 'aria-labelledby' ? 'title' : explicit || host.label;\n  if (previous && previous.attribute !== attribute)\n    panel.removeAttribute(previous.attribute);\n  if (panel.getAttribute(attribute) !== value)\n    panel.setAttribute(attribute, value);\n  ownedNames.set(panel, { attribute, value });\n}\n","import WaDialog from '@awesome.me/webawesome/dist/components/dialog/dialog.js';\n\nimport { installDialogLabel } from '../internal/install-dialog-label.js';\n\ninstallDialogLabel(WaDialog.prototype);\n\n/** Importing this module registers wa-dialog and repairs wrapped native names. */\nexport const surfaceScaffoldElementsRegistered = true;\n"]}

package/dist/surface-scaffold.d.ts

@@ -6,6 +6,19 @@ type DialogSurfaceSize = 'small' | 'medium' | 'large';
 type DialogSurfacePresentation = 'modal' | 'side-sheet' | 'fullscreen';
 type SurfaceInset = 'none' | 'compact' | 'comfortable';
 type DialogSurfaceMaxHeight = CssLength | 'viewport';
+/** A definite modal height: a length or the full viewport, minus both gutters. */
+type DialogSurfaceHeight = CssLength | 'viewport';
+/**
+ * How the dialog body lays out its children: `flow` (default) scrolls ordinary
+ * content in the body; `fill` gives one child the body's whole height and
+ * lets it own scrolling (a SplitView, a Pane, an editor).
+ */
+type DialogSurfaceBodyLayout = 'flow' | 'fill';
+/**
+ * Application `data-*` identity on the DialogSurface root, such as
+ * `data-key`; the surface's own configuration attributes stay protected.
+ */
+type DialogSurfaceRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
 interface DialogSurfaceProps {
     children: KerfUiContent;
     size?: DialogSurfaceSize;
@@ -18,12 +31,72 @@ interface DialogSurfaceProps {
     viewportGutter?: CssLength;
     /** Modal height cap, bounded by the dynamic viewport minus both gutters. */
     maxHeight?: DialogSurfaceMaxHeight;
+    /**
+     * Modal definite height, bounded the same way, so a filling child has a
+     * height to fill. Takes precedence over `maxHeight`.
+     */
+    height?: DialogSurfaceHeight;
+    /** Body layout (default `flow`); `fill` lets one child own the body. */
+    bodyLayout?: DialogSurfaceBodyLayout;
+    /**
+     * Safe `data-*` identity on the root. Give sibling dialogs distinct
+     * `data-key`s so a re-render morphs each surface into itself instead of
+     * reusing one dialog's element for another (structurally identical roots
+     * are otherwise matched by position).
+     */
+    rootAttributes?: DialogSurfaceRootAttributes;
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
 /** Configure recurring Web Awesome dialog geometry without consumer ::part() CSS. */
-declare function DialogSurface({ children, size, presentation, preferredWidth, bodyInset, footerInset, viewportGutter, maxHeight, className, slot, }: DialogSurfaceProps): kerfjs.SafeHtml;
+declare function DialogSurface({ children, size, presentation, preferredWidth, bodyInset, footerInset, viewportGutter, maxHeight, height, bodyLayout, rootAttributes, className, slot, }: DialogSurfaceProps): kerfjs.SafeHtml;
+/** Where a PopoverDialogSurface appears: the top layer, or in flow. */
+type PopoverDialogSurfacePresentation = 'overlay' | 'embedded';
+/** Application `data-*` metadata on the surface root. */
+type PopoverDialogSurfaceDataAttributes = Readonly<Record<`data-${string}`, string>>;
+type PopoverDialogSurfaceName = {
+    label: string;
+    labelledBy?: never;
+} | {
+    label?: never;
+    labelledBy: string;
+};
+type PopoverDialogSurfaceProps = PopoverDialogSurfaceName & {
+    /** The root id: what an opening control's `popovertarget` names. */
+    id?: string;
+    children: KerfUiContent;
+    /**
+     * `overlay` (default) is a native `popover="auto"` in the top layer:
+     * non-modal, light dismiss (Escape or a press outside), nothing inert.
+     * `embedded` renders the same surface in flow for a catalog or inline use.
+     */
+    presentation?: PopoverDialogSurfacePresentation;
+    /** Preferred width preset: 400px, 560px (default), or 800px. */
+    size?: DialogSurfaceSize;
+    /** Preferred width; takes precedence over `size`, within the viewport cap. */
+    preferredWidth?: CssLength;
+    /** Definite height, bounded by the dynamic viewport minus both gutters. */
+    height?: DialogSurfaceHeight;
+    /** Height cap, bounded the same way, for a surface that sizes to content. */
+    maxHeight?: DialogSurfaceMaxHeight;
+    /** Edge clearance on each side of the viewport (default 16px). */
+    viewportGutter?: CssLength;
+    /** Body layout (default `flow`); `fill` lets one child own the surface. */
+    bodyLayout?: DialogSurfaceBodyLayout;
+    rootAttributes?: PopoverDialogSurfaceDataAttributes;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+};
+/**
+ * A non-modal dialog surface on the native Popover API: Kerf's dialog chrome,
+ * viewport-bounded size, and single-child fill without application CSS.
+ * Open it with a `popovertarget` control or `showPopover()`; it light
+ * dismisses and leaves the page interactive. Use `DialogSurface` with
+ * `wa-dialog` when the task must block the page.
+ */
+declare function PopoverDialogSurface({ id, children, label, labelledBy, presentation, size, preferredWidth, height, maxHeight, viewportGutter, bodyLayout, rootAttributes, className, slot, }: PopoverDialogSurfaceProps): kerfjs.SafeHtml;
 type PopupSurfaceInset = 'standard' | 'compact' | 'list-zero';
 interface PopupSurfaceProps {
     children: KerfUiContent;
@@ -35,4 +108,4 @@ interface PopupSurfaceProps {
 /** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */
 declare function PopupSurface({ children, inset, className, slot, }: PopupSurfaceProps): kerfjs.SafeHtml;
 
-export { DialogSurface, type DialogSurfaceMaxHeight, type DialogSurfacePresentation, type DialogSurfaceProps, type DialogSurfaceSize, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset };
+export { DialogSurface, type DialogSurfaceBodyLayout, type DialogSurfaceHeight, type DialogSurfaceMaxHeight, type DialogSurfacePresentation, type DialogSurfaceProps, type DialogSurfaceRootAttributes, type DialogSurfaceSize, PopoverDialogSurface, type PopoverDialogSurfaceDataAttributes, type PopoverDialogSurfacePresentation, type PopoverDialogSurfaceProps, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset };

package/dist/surface-scaffold.js

@@ -1,3 +1,4 @@
-export { DialogSurface, PopupSurface } from './chunk-A7DYEERU.js';
+export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-JYD7G4RG.js';
+
 
 //# sourceMappingURL=surface-scaffold.js.map

package/dist/tab-navigator.js

@@ -1,4 +1,6 @@
-import { Badge } from './chunk-J3AWE5I4.js';
+import { Badge } from './chunk-U6QYTMDB.js';
+import { ensureSunkenTexture } from './chunk-IKS72C6P.js';
+
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 function TabNavigator({
@@ -11,6 +13,7 @@ function TabNavigator({
   className = "",
   slot
 }) {
+  if (tabs.some((tab) => tab.appearance === "sunken")) ensureSunkenTexture();
   return /* @__PURE__ */ jsxs(
     "section",
     {

package/dist/tab-navigator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/navigation/tab-navigator/tab-navigator.tsx"],"names":[],"mappings":"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","file":"tab-navigator.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport type { PaneAppearance } from '../../layout/pane/pane.js';\n\ninterface TabNavigatorTabBase<Id extends string> {\n  id: Id;\n  label: string;\n  /** Decorative icon shown above the label in the bottom bar. */\n  icon?: SafeHtml;\n  /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */\n  content: KerfUiContent;\n  /** Background of this scene's scrolling work surface. */\n  appearance?: PaneAppearance;\n  /** Add 8px to every side of a plain scene's scrolling content. */\n  deepInset?: boolean;\n  /** Opt into keyboard (`0`) or programmatic (`-1`) focus on this scene. */\n  tabIndex?: 0 | -1;\n  /** Keep the standard focus outline visible while this scene is active. */\n  outlined?: boolean;\n}\n\n/** A tab with an optional count or short-status badge. */\ninterface TabNavigatorTabCountBadge {\n  /**\n   * Optional count or short status shown as a solid danger `Badge` at the\n   * top-trailing corner of the tab icon (the iOS tab-bar badge). Omitted, `''`,\n   * or non-finite numbers render no badge. The visual badge is `aria-hidden`;\n   * its meaning reaches assistive technology through `badgeLabel`.\n   *\n   * Pass `true` instead for the text-free dot (new content without a count).\n   */\n  badge?: string | number;\n  /**\n   * Localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"3 unread\"` → `\"Inbox, 3 unread\"`).\n   * Defaults to the badge text itself. Ignored when no badge renders.\n   */\n  badgeLabel?: string;\n}\n\n/** A tab with the text-free dot badge (new content without a count). */\ninterface TabNavigatorTabDotBadge {\n  /**\n   * `true` shows a solid danger dot `Badge` at the top-trailing corner of the\n   * tab icon — the iOS tab-bar dot for new content without a count.\n   */\n  badge: true;\n  /**\n   * Required localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"New activity\"` →\n   * `\"Feed, New activity\"`). A dot has no text, so this is its only meaning.\n   */\n  badgeLabel: string;\n}\n\n/** One bottom-bar destination: its label, optional icon and badge, and content. */\nexport type TabNavigatorTab<Id extends string = string> =\n  TabNavigatorTabBase<Id> &\n    (TabNavigatorTabCountBadge | TabNavigatorTabDotBadge);\n\nexport interface TabNavigatorProps<Id extends string = string> {\n  id: string;\n  /** Accessible name for the tab bar. */\n  label: string;\n  tabs: readonly TabNavigatorTab<Id>[];\n  /** The controlled active tab id (the app owns selection). */\n  active: NoInfer<Id>;\n  /**\n   * The bar's top separator. `auto` (default) draws it against a sunken active\n   * work surface and otherwise follows `chromeDividers`; `hidden` suppresses\n   * the line, including a scroll divider.\n   */\n  separator?: 'auto' | 'hidden';\n  /**\n   * The line over the tab bar, where it meets the active scene. `scroll`\n   * (default) shows it only while more of the scene's content lies below —\n   * never at the scroll end or when the content fits — once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the scaffold; unwired, it does not show. `always` shows it without the\n   * wiring; `none` suppresses that scroll divider. A sunken active work\n   * surface still draws the separator unless `separator=\"hidden\"`. The line\n   * is the bar's own 1px top border, so no state moves the bar or a tab.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A mobile-first, iOS-like bottom tab navigator: a bottom tab bar that switches\n * between major sections, each tab keeping its own content (usually a `NavStack`)\n * mounted so its stack and scroll survive a switch. Controlled — the app owns\n * `active`; wire selection with `@kerfjs/ui/wire-tab-navigator`'s `wireTabNavigator`.\n * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of\n * a bottom bar. See `docs/23-app-layouts.md` §3.4.\n */\nexport function TabNavigator<Id extends string>({\n  id,\n  label,\n  tabs,\n  active,\n  separator = 'auto',\n  chromeDividers = 'scroll',\n  className = '',\n  slot,\n}: TabNavigatorProps<Id>) {\n  return (\n    <section\n      class={`kui-tab-scaffold ${className}`.trim()}\n      id={id}\n      data-component=\"tab-scaffold\"\n      data-tab-scaffold-id={id}\n      data-separator={separator}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      slot={slot}\n    >\n      <div class=\"kui-tab-scaffold__scenes\">\n        {tabs.map((tab) => (\n          <div\n            class=\"kui-tab-scaffold__scene\"\n            data-tab-scaffold-scene={tab.id}\n            data-active={String(tab.id === active)}\n            data-appearance={tab.appearance === 'sunken' ? 'sunken' : undefined}\n            data-deep-inset={tab.deepInset ? 'true' : undefined}\n            data-outlined={\n              tab.id === active && tab.outlined ? 'true' : undefined\n            }\n            role={tab.tabIndex === undefined ? undefined : 'tabpanel'}\n            aria-label={tab.tabIndex === undefined ? undefined : tab.label}\n            aria-hidden={String(tab.id !== active)}\n            tabindex={\n              tab.id === active\n                ? tab.tabIndex\n                : tab.tabIndex === undefined\n                  ? undefined\n                  : -1\n            }\n          >\n            {tab.content}\n          </div>\n        ))}\n      </div>\n      <nav class=\"kui-tab-scaffold__bar\" role=\"tablist\" aria-label={label}>\n        {tabs.map((tab) => {\n          const dot = tab.badge === true;\n          const badgeText = dot ? undefined : normalizeBadge(tab.badge);\n          const hasBadge = dot || badgeText !== undefined;\n          const badge = hasBadge && (\n            <span\n              class=\"kui-tab-scaffold__tab-badge\"\n              data-badge-kind={dot ? 'dot' : 'text'}\n            >\n              {badgeText === undefined ? (\n                <Badge tone=\"danger\" size=\"dot\" ariaHidden />\n              ) : (\n                <Badge\n                  tone=\"danger\"\n                  appearance=\"solid\"\n                  size=\"compact\"\n                  ariaHidden\n                >\n                  {badgeText}\n                </Badge>\n              )}\n            </span>\n          );\n          // A dot has no text fallback: without a usable badgeLabel (reachable\n          // only from untyped callers) the tab keeps its plain accessible name.\n          const badgeLabel = hasBadge\n            ? tab.badgeLabel?.trim() || badgeText\n            : undefined;\n          return (\n            <button\n              type=\"button\"\n              class=\"kui-tab-scaffold__tab\"\n              role=\"tab\"\n              data-tab-scaffold-tab={tab.id}\n              aria-selected={String(tab.id === active)}\n              tabindex={tab.id === active ? '0' : '-1'}\n              aria-label={\n                badgeLabel === undefined\n                  ? undefined\n                  : `${tab.label}, ${badgeLabel}`\n              }\n              data-has-badge={hasBadge ? 'true' : undefined}\n            >\n              {tab.icon ? (\n                <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">\n                  {tab.icon}\n                  {badge}\n                </span>\n              ) : (\n                badge\n              )}\n              <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n            </button>\n          );\n        })}\n      </nav>\n    </section>\n  );\n}\n\nfunction normalizeBadge(\n  badge: string | number | undefined,\n): string | undefined {\n  if (typeof badge === 'number')\n    return Number.isFinite(badge) ? String(badge) : undefined;\n  if (typeof badge === 'string' && badge.trim()) return badge.trim();\n  return undefined;\n}\n"]}
+{"version":3,"sources":["../src/components/navigation/tab-navigator/tab-navigator.tsx"],"names":[],"mappings":"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","file":"tab-navigator.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { ensureSunkenTexture } from '../../../shared/styles/sunken-texture.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport type { PaneAppearance } from '../../layout/pane/pane.js';\n\ninterface TabNavigatorTabBase<Id extends string> {\n  id: Id;\n  label: string;\n  /** Decorative icon shown above the label in the bottom bar. */\n  icon?: SafeHtml;\n  /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */\n  content: KerfUiContent;\n  /** Background of this scene's scrolling work surface. */\n  appearance?: PaneAppearance;\n  /** Add 8px to every side of a plain scene's scrolling content. */\n  deepInset?: boolean;\n  /** Opt into keyboard (`0`) or programmatic (`-1`) focus on this scene. */\n  tabIndex?: 0 | -1;\n  /** Keep the standard focus outline visible while this scene is active. */\n  outlined?: boolean;\n}\n\n/** A tab with an optional count or short-status badge. */\ninterface TabNavigatorTabCountBadge {\n  /**\n   * Optional count or short status shown as a solid danger `Badge` at the\n   * top-trailing corner of the tab icon (the iOS tab-bar badge). Omitted, `''`,\n   * or non-finite numbers render no badge. The visual badge is `aria-hidden`;\n   * its meaning reaches assistive technology through `badgeLabel`.\n   *\n   * Pass `true` instead for the text-free dot (new content without a count).\n   */\n  badge?: string | number;\n  /**\n   * Localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"3 unread\"` → `\"Inbox, 3 unread\"`).\n   * Defaults to the badge text itself. Ignored when no badge renders.\n   */\n  badgeLabel?: string;\n}\n\n/** A tab with the text-free dot badge (new content without a count). */\ninterface TabNavigatorTabDotBadge {\n  /**\n   * `true` shows a solid danger dot `Badge` at the top-trailing corner of the\n   * tab icon — the iOS tab-bar dot for new content without a count.\n   */\n  badge: true;\n  /**\n   * Required localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"New activity\"` →\n   * `\"Feed, New activity\"`). A dot has no text, so this is its only meaning.\n   */\n  badgeLabel: string;\n}\n\n/** One bottom-bar destination: its label, optional icon and badge, and content. */\nexport type TabNavigatorTab<Id extends string = string> =\n  TabNavigatorTabBase<Id> &\n    (TabNavigatorTabCountBadge | TabNavigatorTabDotBadge);\n\nexport interface TabNavigatorProps<Id extends string = string> {\n  id: string;\n  /** Accessible name for the tab bar. */\n  label: string;\n  tabs: readonly TabNavigatorTab<Id>[];\n  /** The controlled active tab id (the app owns selection). */\n  active: NoInfer<Id>;\n  /**\n   * The bar's top separator. `auto` (default) draws it against a sunken active\n   * work surface and otherwise follows `chromeDividers`; `hidden` suppresses\n   * the line, including a scroll divider.\n   */\n  separator?: 'auto' | 'hidden';\n  /**\n   * The line over the tab bar, where it meets the active scene. `scroll`\n   * (default) shows it only while more of the scene's content lies below —\n   * never at the scroll end or when the content fits — once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the scaffold; unwired, it does not show. `always` shows it without the\n   * wiring; `none` suppresses that scroll divider. A sunken active work\n   * surface still draws the separator unless `separator=\"hidden\"`. The line\n   * is the bar's own 1px top border, so no state moves the bar or a tab.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A mobile-first, iOS-like bottom tab navigator: a bottom tab bar that switches\n * between major sections, each tab keeping its own content (usually a `NavStack`)\n * mounted so its stack and scroll survive a switch. Controlled — the app owns\n * `active`; wire selection with `@kerfjs/ui/wire-tab-navigator`'s `wireTabNavigator`.\n * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of\n * a bottom bar. See `docs/23-app-layouts.md` §3.4.\n */\nexport function TabNavigator<Id extends string>({\n  id,\n  label,\n  tabs,\n  active,\n  separator = 'auto',\n  chromeDividers = 'scroll',\n  className = '',\n  slot,\n}: TabNavigatorProps<Id>) {\n  if (tabs.some((tab) => tab.appearance === 'sunken')) ensureSunkenTexture();\n  return (\n    <section\n      class={`kui-tab-scaffold ${className}`.trim()}\n      id={id}\n      data-component=\"tab-scaffold\"\n      data-tab-scaffold-id={id}\n      data-separator={separator}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      slot={slot}\n    >\n      <div class=\"kui-tab-scaffold__scenes\">\n        {tabs.map((tab) => (\n          <div\n            class=\"kui-tab-scaffold__scene\"\n            data-tab-scaffold-scene={tab.id}\n            data-active={String(tab.id === active)}\n            data-appearance={tab.appearance === 'sunken' ? 'sunken' : undefined}\n            data-deep-inset={tab.deepInset ? 'true' : undefined}\n            data-outlined={\n              tab.id === active && tab.outlined ? 'true' : undefined\n            }\n            role={tab.tabIndex === undefined ? undefined : 'tabpanel'}\n            aria-label={tab.tabIndex === undefined ? undefined : tab.label}\n            aria-hidden={String(tab.id !== active)}\n            tabindex={\n              tab.id === active\n                ? tab.tabIndex\n                : tab.tabIndex === undefined\n                  ? undefined\n                  : -1\n            }\n          >\n            {tab.content}\n          </div>\n        ))}\n      </div>\n      <nav class=\"kui-tab-scaffold__bar\" role=\"tablist\" aria-label={label}>\n        {tabs.map((tab) => {\n          const dot = tab.badge === true;\n          const badgeText = dot ? undefined : normalizeBadge(tab.badge);\n          const hasBadge = dot || badgeText !== undefined;\n          const badge = hasBadge && (\n            <span\n              class=\"kui-tab-scaffold__tab-badge\"\n              data-badge-kind={dot ? 'dot' : 'text'}\n            >\n              {badgeText === undefined ? (\n                <Badge tone=\"danger\" size=\"dot\" ariaHidden />\n              ) : (\n                <Badge\n                  tone=\"danger\"\n                  appearance=\"solid\"\n                  size=\"compact\"\n                  ariaHidden\n                >\n                  {badgeText}\n                </Badge>\n              )}\n            </span>\n          );\n          // A dot has no text fallback: without a usable badgeLabel (reachable\n          // only from untyped callers) the tab keeps its plain accessible name.\n          const badgeLabel = hasBadge\n            ? tab.badgeLabel?.trim() || badgeText\n            : undefined;\n          return (\n            <button\n              type=\"button\"\n              class=\"kui-tab-scaffold__tab\"\n              role=\"tab\"\n              data-tab-scaffold-tab={tab.id}\n              aria-selected={String(tab.id === active)}\n              tabindex={tab.id === active ? '0' : '-1'}\n              aria-label={\n                badgeLabel === undefined\n                  ? undefined\n                  : `${tab.label}, ${badgeLabel}`\n              }\n              data-has-badge={hasBadge ? 'true' : undefined}\n            >\n              {tab.icon ? (\n                <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">\n                  {tab.icon}\n                  {badge}\n                </span>\n              ) : (\n                badge\n              )}\n              <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n            </button>\n          );\n        })}\n      </nav>\n    </section>\n  );\n}\n\nfunction normalizeBadge(\n  badge: string | number | undefined,\n): string | undefined {\n  if (typeof badge === 'number')\n    return Number.isFinite(badge) ? String(badge) : undefined;\n  if (typeof badge === 'string' && badge.trim()) return badge.trim();\n  return undefined;\n}\n"]}

package/dist/text.d.ts

@@ -19,6 +19,19 @@ type TextFont = 'default' | 'monospace';
 type TextBorder = 'transparent' | 'none';
 type TextLineHeight = 'default' | 'tight';
 type TextWrap = 'normal' | 'anywhere' | 'nowrap' | 'truncate';
+/** Inline alignment of the text's lines, in logical (writing-direction) terms. */
+type TextAlign = 'start' | 'center' | 'end';
+/**
+ * Where `wrap="truncate"` places its ellipsis: `end` (default) keeps the
+ * start, `start` keeps the tail (branch names, the end of an identifier), and
+ * `middle` keeps both the start and a suffix (file paths).
+ */
+type TextTruncate = 'end' | 'middle' | 'start';
+/**
+ * The suffix `truncate="middle"` always keeps: a number of trailing
+ * characters, or `segment` for the last path segment with its separator.
+ */
+type TextTruncateKeep = number | 'segment';
 type TextContent = KerfUiContent | string | number | readonly TextContent[];
 type TextCommonProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
     /** Native heading, paragraph, or inline span element to render. Defaults to `p`. */
@@ -39,6 +52,8 @@ type TextCommonProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> &
     flush?: boolean;
     /** Use compact leading for short dialog or metadata copy. */
     lineHeight?: TextLineHeight;
+    /** Inline alignment of the lines (default `start`), for centered status copy. */
+    align?: TextAlign;
     children: TextContent;
     class?: string;
     className?: string;
@@ -48,16 +63,36 @@ type TextProps = TextCommonProps & ({
     wrap?: 'normal' | 'anywhere';
     /** Cap wrapped text to this positive number of lines. */
     maxLines?: number;
+    truncate?: never;
+    truncateKeep?: never;
+} | {
+    /** Keep one line without an ellipsis. */
+    wrap: 'nowrap';
+    maxLines?: never;
+    truncate?: never;
+    truncateKeep?: never;
 } | {
-    /** Keep one line, with or without an ellipsis. */
-    wrap: 'nowrap' | 'truncate';
+    /** Keep one line with an ellipsis. */
+    wrap: 'truncate';
     maxLines?: never;
+    /**
+     * Where the ellipsis goes (default `end`). `start` and `middle` are
+     * for left-to-right identifiers and paths, and `middle` requires
+     * string or number children so it can split them.
+     */
+    truncate?: TextTruncate;
+    /**
+     * The suffix `truncate="middle"` keeps (default `segment`: the last
+     * path segment, or the last 10 characters when there is no `/` or
+     * `\\` separator).
+     */
+    truncateKeep?: TextTruncateKeep;
 });
 /**
  * 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, color, size, font, border, flush, controlMargins, lineHeight, wrap, maxLines, children, class: classValue, className, style, ...attributes }: TextProps): kerfjs.SafeHtml;
+declare function Text({ variant: Variant, tone, color, size, font, border, flush, controlMargins, lineHeight, align, wrap, maxLines, truncate, truncateKeep, children, class: classValue, className, style, ...attributes }: TextProps): kerfjs.SafeHtml;
 
-export { FieldLabel, type FieldLabelProps, Sides, Text, type TextBorder, type TextContent, type TextFont, type TextLineHeight, type TextProps, type TextSize, type TextTone, type TextVariant, type TextWrap };
+export { FieldLabel, type FieldLabelProps, Sides, Text, type TextAlign, type TextBorder, type TextContent, type TextFont, type TextLineHeight, type TextProps, type TextSize, type TextTone, type TextTruncate, type TextTruncateKeep, type TextVariant, type TextWrap };

package/dist/text.js

@@ -1,3 +1,3 @@
-export { FieldLabel, Text } from './chunk-4Y4L5YEI.js';
+export { FieldLabel, Text } from './chunk-LL45C7BB.js';
 
 //# sourceMappingURL=text.js.map

package/dist/toolbar-control-group.d.ts

@@ -12,7 +12,7 @@ type ToolbarControlGroupSize = 'default' | 'compact';
 type ToolbarControlGroupDensity = 'comfortable' | 'tight';
 type ToolbarControlGroupContent = 'icon' | 'text' | 'mixed' | 'avatar' | 'search';
 type ToolbarControlGroupFocusRing = 'control' | 'outline' | 'halo';
-type ToolbarControlGroupSelectedChrome = 'raised' | 'filled' | 'outline';
+type ToolbarControlGroupSelectedChrome = 'raised' | 'filled' | 'outline' | 'none';
 type ToolbarControlGroupSelectedTone = 'brand' | 'neutral' | 'pop';
 type ToolbarControlGroupOverflow = 'visible' | 'scroll' | 'wrap';
 type ToolbarControlGroupExpandedOverflow = 'clip' | 'visible';
@@ -54,6 +54,13 @@ interface ToolbarControlGroupProps {
     content?: ToolbarControlGroupContent;
     /** Whether controls paint focus individually or the group paints an outline/halo on focus-within. */
     focusRing?: ToolbarControlGroupFocusRing;
+    /**
+     * Chrome a pressed (`aria-pressed="true"`) control paints. `none` keeps a
+     * pressed control looking like its neighbors, for an icon-state toggle whose
+     * glyph already shows the state (an empty or filled star); hover and the
+     * focus ring are unchanged. One control can opt out alone with
+     * `data-selected-chrome="none"` on its own button.
+     */
     selectedChrome?: ToolbarControlGroupSelectedChrome;
     selectedTone?: ToolbarControlGroupSelectedTone;
     /** Size a nested Web Awesome dropdown trigger as part of this group. */

package/dist/toolbar-control-group.js

@@ -1,4 +1,4 @@
-export { ToolbarActionLink, ToolbarControlGroup } from './chunk-MTCTX25G.js';
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-YXOMI7ES.js';