@kerfjs/ui 5.0.0-beta.62 → 5.0.0-beta.63

package/dist/popup-menu.d.ts

@@ -18,9 +18,9 @@ interface PopupMenuItem {
     value?: string;
     /** Leading icon, typically a `LucideIcon`; it is placed in the item's icon slot. */
     icon?: SafeHtml;
-    /** A checked menu choice, including nested choices. */
+    /** A checkbox choice, including nested choices; omit for a plain command. */
     checked?: boolean;
-    /** Trailing safe content, such as a selected-choice tick. */
+    /** Trailing safe content, such as secondary status. */
     details?: SafeHtml;
     /** Destructive command styling. */
     tone?: 'default' | 'danger';

package/dist/popup-menu.js

@@ -1,3 +1,3 @@
-export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-VCBTX62E.js';
+export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-ZRWXFDDS.js';
 
 //# sourceMappingURL=popup-menu.js.map

package/dist/select.js

@@ -1,4 +1,4 @@
-export { Select } from './chunk-4MG3KXJM.js';
+export { Select } from './chunk-F7OCOBTG.js';
 
 
 

package/dist/split-view.js

@@ -1,4 +1,4 @@
-import { NavStack } from './chunk-KYDDCJXU.js';
+import { NavStack } from './chunk-HXCMWANP.js';
 import { ResizableRegion } from './chunk-KLJKU6ZL.js';
 
 
@@ -6,6 +6,7 @@ import { ResizableRegion } from './chunk-KLJKU6ZL.js';
 
 
 
+
 import { jsx, jsxs } from 'kerfjs/jsx-runtime';
 
 function SplitView({

package/dist/split-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/split-view.tsx"],"names":[],"mappings":"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","file":"split-view.js","sourcesContent":["import {\n  NavStack,\n  type NavStackProps,\n  type NavStackView,\n} from './nav-stack.js';\nimport {\n  ResizableRegion,\n  type ResizableRegionProps,\n} from './resizable-region.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\n/**\n * The roomy list pane's `ResizableRegion`: its committed `size` and `min` /\n * `max` limits, plus the region configuration that forwards unchanged\n * (`separator`, `handleIcon`, `contentOverflow`, and collapse:\n * `collapsed`, `transitioning`, `collapseMotion`, `restoreControl`,\n * `restorePosition`). Omitted options keep the region's defaults.\n */\nexport interface SplitViewResizable extends Pick<\n  ResizableRegionProps,\n  | 'separator'\n  | 'handleIcon'\n  | 'contentOverflow'\n  | 'collapsed'\n  | 'transitioning'\n  | 'collapseMotion'\n  | 'restoreControl'\n  | 'restorePosition'\n> {\n  size: number;\n  min: number;\n  max: number;\n}\n\n/** One compact view's top- and bottom-toolbar content (see `NavStackView`). */\nexport type SplitViewCompactViewToolbars = Pick<\n  NavStackView,\n  'leading' | 'center' | 'toolbar' | 'bottomToolbar'\n>;\n\n/**\n * The compact `NavStack`'s configuration: its toolbar configuration, back\n * control, persistent bottom toolbar, and chrome dividers forward to the\n * stack, and `list` / `detail` give each view its own toolbar groups.\n */\nexport interface SplitViewCompactStack extends Pick<\n  NavStackProps,\n  | 'toolbarConfig'\n  | 'backIcon'\n  | 'backText'\n  | 'hideToolbar'\n  | 'bottomToolbar'\n  | 'chromeDividers'\n> {\n  /** Toolbar content for the list (root) view. */\n  list?: SplitViewCompactViewToolbars;\n  /** Toolbar content for the pushed detail view. */\n  detail?: SplitViewCompactViewToolbars;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: KerfUiContent;\n  /** The detail (secondary) pane. */\n  detail: KerfUiContent;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** Compact NavStack configuration and per-view toolbars. */\n  compactStack?: SplitViewCompactStack;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({\n  id,\n  label,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  listTitle = '',\n  detailTitle = '',\n  backLabel = 'Back',\n  compactStack = {},\n  resizable,\n  className = '',\n  slot,\n}: SplitViewProps) {\n  if (compact) {\n    const listView: NavStackView = {\n      ...compactStack.list,\n      key: 'list',\n      title: listTitle,\n      content: list,\n    };\n    const views: NavStackView[] = detailActive\n      ? [\n          listView,\n          {\n            ...compactStack.detail,\n            key: 'detail',\n            title: detailTitle,\n            content: detail,\n          },\n        ]\n      : [listView];\n    return (\n      <div\n        class={`kui-split-view kui-split-view--compact ${className}`.trim()}\n        id={id}\n        data-component=\"split-view\"\n        data-split-mode=\"compact\"\n        slot={slot}\n      >\n        <NavStack\n          id={`${id}-stack`}\n          label={label}\n          views={views}\n          backLabel={backLabel}\n          backIcon={compactStack.backIcon}\n          backText={compactStack.backText}\n          toolbarConfig={compactStack.toolbarConfig}\n          hideToolbar={compactStack.hideToolbar}\n          bottomToolbar={compactStack.bottomToolbar}\n          chromeDividers={compactStack.chromeDividers}\n        />\n      </div>\n    );\n  }\n  const listPane = resizable ? (\n    <ResizableRegion\n      id={`${id}-list`}\n      label={listTitle || 'List'}\n      size={resizable.size}\n      min={resizable.min}\n      max={resizable.max}\n      separator={resizable.separator}\n      handleIcon={resizable.handleIcon}\n      contentOverflow={resizable.contentOverflow}\n      collapsed={resizable.collapsed}\n      transitioning={resizable.transitioning}\n      collapseMotion={resizable.collapseMotion}\n      restoreControl={resizable.restoreControl}\n      restorePosition={resizable.restorePosition}\n    >\n      <div\n        class=\"kui-split-view__list kui-pane\"\n        data-split-list\n        data-resizable=\"true\"\n      >\n        {list}\n      </div>\n    </ResizableRegion>\n  ) : (\n    <div\n      class=\"kui-split-view__list kui-pane\"\n      data-split-list\n      data-resizable=\"false\"\n    >\n      {list}\n    </div>\n  );\n  return (\n    <div\n      class={`kui-split-view ${className}`.trim()}\n      id={id}\n      data-component=\"split-view\"\n      data-split-mode=\"split\"\n      aria-label={label}\n      slot={slot}\n    >\n      {listPane}\n      <div\n        class=\"kui-split-view__detail kui-pane\"\n        data-split-detail\n        aria-label={detailTitle || undefined}\n      >\n        {detail}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/split-view.tsx"],"names":[],"mappings":"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","file":"split-view.js","sourcesContent":["import {\n  NavStack,\n  type NavStackProps,\n  type NavStackView,\n} from './nav-stack.js';\nimport {\n  ResizableRegion,\n  type ResizableRegionProps,\n} from './resizable-region.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\n/**\n * The roomy list pane's `ResizableRegion`: its committed `size` and `min` /\n * `max` limits, plus the region configuration that forwards unchanged\n * (`separator`, `handleIcon`, `contentOverflow`, and collapse:\n * `collapsed`, `transitioning`, `collapseMotion`, `restoreControl`,\n * `restorePosition`). Omitted options keep the region's defaults.\n */\nexport interface SplitViewResizable extends Pick<\n  ResizableRegionProps,\n  | 'separator'\n  | 'handleIcon'\n  | 'contentOverflow'\n  | 'collapsed'\n  | 'transitioning'\n  | 'collapseMotion'\n  | 'restoreControl'\n  | 'restorePosition'\n> {\n  size: number;\n  min: number;\n  max: number;\n}\n\n/** One compact view's top- and bottom-toolbar content (see `NavStackView`). */\nexport type SplitViewCompactViewToolbars = Pick<\n  NavStackView,\n  'leading' | 'center' | 'toolbar' | 'bottomToolbar'\n>;\n\n/**\n * The compact `NavStack`'s configuration: its toolbar configuration, back\n * control, persistent bottom toolbar, and chrome dividers forward to the\n * stack, and `list` / `detail` give each view its own toolbar groups.\n */\nexport interface SplitViewCompactStack extends Pick<\n  NavStackProps,\n  | 'toolbarConfig'\n  | 'backIcon'\n  | 'backText'\n  | 'hideToolbar'\n  | 'bottomToolbar'\n  | 'chromeDividers'\n> {\n  /** Toolbar content for the list (root) view. */\n  list?: SplitViewCompactViewToolbars;\n  /** Toolbar content for the pushed detail view. */\n  detail?: SplitViewCompactViewToolbars;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: KerfUiContent;\n  /** The detail (secondary) pane. */\n  detail: KerfUiContent;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** Compact NavStack configuration and per-view toolbars. */\n  compactStack?: SplitViewCompactStack;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({\n  id,\n  label,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  listTitle = '',\n  detailTitle = '',\n  backLabel = 'Back',\n  compactStack = {},\n  resizable,\n  className = '',\n  slot,\n}: SplitViewProps) {\n  if (compact) {\n    const listView: NavStackView = {\n      ...compactStack.list,\n      key: 'list',\n      title: listTitle,\n      content: list,\n    };\n    const views: NavStackView[] = detailActive\n      ? [\n          listView,\n          {\n            ...compactStack.detail,\n            key: 'detail',\n            title: detailTitle,\n            content: detail,\n          },\n        ]\n      : [listView];\n    return (\n      <div\n        class={`kui-split-view kui-split-view--compact ${className}`.trim()}\n        id={id}\n        data-component=\"split-view\"\n        data-split-mode=\"compact\"\n        slot={slot}\n      >\n        <NavStack\n          id={`${id}-stack`}\n          label={label}\n          views={views}\n          backLabel={backLabel}\n          backIcon={compactStack.backIcon}\n          backText={compactStack.backText}\n          toolbarConfig={compactStack.toolbarConfig}\n          hideToolbar={compactStack.hideToolbar}\n          bottomToolbar={compactStack.bottomToolbar}\n          chromeDividers={compactStack.chromeDividers}\n        />\n      </div>\n    );\n  }\n  const listPane = resizable ? (\n    <ResizableRegion\n      id={`${id}-list`}\n      label={listTitle || 'List'}\n      size={resizable.size}\n      min={resizable.min}\n      max={resizable.max}\n      separator={resizable.separator}\n      handleIcon={resizable.handleIcon}\n      contentOverflow={resizable.contentOverflow}\n      collapsed={resizable.collapsed}\n      transitioning={resizable.transitioning}\n      collapseMotion={resizable.collapseMotion}\n      restoreControl={resizable.restoreControl}\n      restorePosition={resizable.restorePosition}\n    >\n      <div\n        class=\"kui-split-view__list kui-pane\"\n        data-split-list\n        data-resizable=\"true\"\n      >\n        {list}\n      </div>\n    </ResizableRegion>\n  ) : (\n    <div\n      class=\"kui-split-view__list kui-pane\"\n      data-split-list\n      data-resizable=\"false\"\n    >\n      {list}\n    </div>\n  );\n  return (\n    <div\n      class={`kui-split-view ${className}`.trim()}\n      id={id}\n      data-component=\"split-view\"\n      data-split-mode=\"split\"\n      aria-label={label}\n      slot={slot}\n    >\n      {listPane}\n      <div\n        class=\"kui-split-view__detail kui-pane\"\n        data-split-detail\n        aria-label={detailTitle || undefined}\n      >\n        {detail}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/styles/chip.css

@@ -82,6 +82,20 @@
   pointer-events: none;
 }
 
+.kui-chip[data-truncate] {
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.kui-chip__icon {
+  display: inline-grid;
+  width: 1em;
+  height: 1em;
+  color: inherit;
+  place-items: center;
+  flex: none;
+}
+
 .kui-chip__label {
   min-width: 0;
   overflow: hidden;

package/dist/styles/content-item.css

@@ -28,3 +28,39 @@
 .kui-content-item--framed {
   --kui-content-item-border: var(--kui-color-neutral-border-normal);
 }
+
+.kui-content-item[data-interactive="true"] {
+  color: var(--kui-color-neutral-on-normal);
+  cursor: pointer;
+}
+
+.kui-content-item[data-interactive="true"]:hover:not(
+    [data-disabled="true"],
+    [data-selected="true"]
+  ),
+.kui-content-item[data-interactive="true"][data-kui-pressed="true"]:not(
+    [data-selected="true"]
+  ) {
+  --kui-content-item-border: var(--kui-color-neutral-border-normal);
+  --kui-content-item-background: var(--kui-color-neutral-fill-quiet);
+}
+
+.kui-content-item[data-interactive="true"]:active:not([data-disabled="true"]) {
+  --kui-content-item-background: var(--kui-color-neutral-fill-normal);
+}
+
+.kui-content-item[data-interactive="true"][data-selected="true"] {
+  --kui-content-item-border: var(--kui-color-brand-border-quiet);
+  --kui-content-item-background: var(--kui-color-brand-fill-normal);
+}
+
+.kui-content-item[data-interactive="true"]:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-content-item[data-interactive="true"][data-disabled="true"] {
+  color: var(--kui-color-neutral-on-quiet);
+  opacity: 0.58;
+  cursor: not-allowed;
+}

package/dist/styles/list-action-row.css

@@ -1,5 +1,4 @@
 .kui-list-action-row {
-  --kui-list-group-divider-color: var(--kui-color-neutral-border-quiet);
   --kui-list-action-row-color: var(--kui-color-neutral-on-normal);
   --kui-list-action-row-border: transparent;
   --kui-list-action-row-background: transparent;
@@ -33,14 +32,16 @@
 
 .kui-list-action-row[data-divider="before"],
 .kui-list-action-row[data-divider="both"] {
-  border-block-start: 1px solid var(--kui-list-group-divider-color);
+  border-block-start: 1px solid
+    var(--kui-list-group-divider-color, var(--kui-color-neutral-border-quiet));
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
 
 .kui-list-action-row[data-divider="after"],
 .kui-list-action-row[data-divider="both"] {
-  border-block-end: 1px solid var(--kui-list-group-divider-color);
+  border-block-end: 1px solid
+    var(--kui-list-group-divider-color, var(--kui-color-neutral-border-quiet));
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }

package/dist/styles/list-header.css

@@ -1,5 +1,4 @@
 .kui-list-header {
-  --kui-list-group-divider-color: var(--kui-color-neutral-border-quiet);
   --kui-list-header-color: var(--kui-color-neutral-on-quiet);
   --kui-list-header-hover-background: var(--kui-color-neutral-border-quiet);
   --_kui-list-header-action-icon-size: var(
@@ -32,12 +31,14 @@
 
 .kui-list-header[data-divider="before"],
 .kui-list-header[data-divider="both"] {
-  border-block-start: 1px solid var(--kui-list-group-divider-color);
+  border-block-start: 1px solid
+    var(--kui-list-group-divider-color, var(--kui-color-neutral-border-quiet));
 }
 
 .kui-list-header[data-divider="after"],
 .kui-list-header[data-divider="both"] {
-  border-block-end: 1px solid var(--kui-list-group-divider-color);
+  border-block-end: 1px solid
+    var(--kui-list-group-divider-color, var(--kui-color-neutral-border-quiet));
 }
 
 .kui-list-header[data-inline="true"] {

package/dist/styles/list-item.css

@@ -1,9 +1,4 @@
 .kui-list-item {
-  --kui-list-group-divider-color: var(--kui-color-neutral-border-quiet);
-  --kui-list-item-color: var(--kui-color-neutral-on-normal);
-  --kui-list-item-hover-background: var(--kui-color-neutral-fill-quiet);
-  --kui-list-item-selected-color: var(--kui-color-neutral-on-normal);
-  --kui-list-item-selected-background: var(--kui-color-brand-fill-normal);
   display: grid;
   width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
   min-height: var(--kui-list-item-min-height, 2.75rem);
@@ -24,7 +19,7 @@
     --kui-list-item-radius,
     var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
   );
-  color: var(--kui-list-item-color);
+  color: var(--kui-list-item-color, var(--kui-color-neutral-on-normal));
   background: var(--kui-list-item-background, transparent);
   cursor: pointer;
   grid-template-columns: var(--kui-list-item-columns, minmax(0, 1fr) auto);
@@ -55,14 +50,20 @@
 
 .kui-list-item[data-divider="before"],
 .kui-list-item[data-divider="both"] {
-  border-block-start-color: var(--kui-list-group-divider-color);
+  border-block-start-color: var(
+    --kui-list-group-divider-color,
+    var(--kui-color-neutral-border-quiet)
+  );
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
 
 .kui-list-item[data-divider="after"],
 .kui-list-item[data-divider="both"] {
-  border-block-end-color: var(--kui-list-group-divider-color);
+  border-block-end-color: var(
+    --kui-list-group-divider-color,
+    var(--kui-color-neutral-border-quiet)
+  );
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
@@ -99,7 +100,10 @@
     --kui-list-item-hover-border,
     var(--kui-color-neutral-border-normal)
   );
-  background: var(--kui-list-item-hover-background);
+  background: var(
+    --kui-list-item-hover-background,
+    var(--kui-color-neutral-fill-quiet)
+  );
 }
 
 /* A placeholder is disabled to stay inert, but it is loading, not unavailable:
@@ -124,8 +128,14 @@
     --kui-list-item-selected-border,
     var(--kui-color-brand-border-quiet)
   );
-  color: var(--kui-list-item-selected-color);
-  background: var(--kui-list-item-selected-background);
+  color: var(
+    --kui-list-item-selected-color,
+    var(--kui-color-neutral-on-normal)
+  );
+  background: var(
+    --kui-list-item-selected-background,
+    var(--kui-color-brand-fill-normal)
+  );
   font-weight: 650;
 }
 

package/dist/styles/lucide-icon.css

@@ -4,3 +4,8 @@
   height: 1em;
   flex: none;
 }
+
+[data-lucide][data-size] {
+  width: var(--_kui-lucide-size);
+  height: var(--_kui-lucide-size);
+}

package/dist/styles/pane.css

@@ -176,9 +176,10 @@
 
 /* Chrome dividers: one line under the header and one over the footer, where
    the pinned chrome meets the scrolling content, whatever the chrome holds.
-   `chromeDividers="scroll"` (the default, no attribute) draws each only while
+   `chromeDividers="scroll"` (the plain-pane default, no attribute) draws each only while
    `wireScrollDividers` reports content scrolled away beneath it through
-   `data-scroll-divider` on the slot; `always` draws both; `none` neither. The
+   `data-scroll-divider` on the slot; a sunken pane defaults to `always`, which
+   draws both; `none` draws neither. The
    line is an inset shadow inside the slot, so showing or hiding it never
    moves the chrome or the content. */
 .kui-pane > :is(.kui-pane__header, .kui-pane__toolbar, .kui-pane__footer) {

package/dist/styles/popup-menu.css

@@ -11,10 +11,9 @@
   clip-path: inset(50%);
 }
 
-/* A PopupMenu draws exactly the Select's popup: the same caret motion, surface
-   inset, row geometry, reserved check column, current-row fill, and group
-   titles, all read from the private popup-choice contract in foundation.css
-   (select.css reads the same values). */
+/* PopupMenu shares the Select's caret motion, surface inset, row rhythm,
+   current-row fill, and group titles from the popup-choice contract in
+   foundation.css. Only checkbox items reserve a check column. */
 
 /* The trigger caret turns to face the open menu, like the Select's. */
 .kui-popup-menu > wa-button::part(caret) {
@@ -34,14 +33,20 @@
 }
 
 .kui-popup-menu wa-dropdown-item {
-  /* Leading inset plus the Select's check column, so item icons and labels
-     start where a Select option's do. */
+  /* A plain command starts at the checkbox glyph's leading edge. The glyph
+     sits half a smaller-font em beyond the row's base inset; its label starts
+     after the full check column below. */
   padding: var(--_kui-popup-row-padding-block)
     var(--_kui-popup-row-padding-inline-end) var(--_kui-popup-row-padding-block)
-    calc(
-      var(--_kui-popup-row-padding-inline-start) +
-        var(--_kui-popup-row-check-width)
-    );
+    calc(var(--_kui-popup-row-padding-inline-start) + 0.4375em);
+}
+.kui-popup-menu wa-dropdown-item[type="checkbox"] {
+  /* Web Awesome marks every sibling checkbox-adjacent; reserve this column
+     only on items whose checked state was explicitly supplied. */
+  padding-inline-start: calc(
+    var(--_kui-popup-row-padding-inline-start) +
+      var(--_kui-popup-row-check-width)
+  );
 }
 .kui-popup-menu wa-dropdown-item::part(label) {
   padding-block: var(--_kui-popup-row-label-padding-block);

package/dist/styles/select.css

@@ -222,6 +222,17 @@
   min-width: 0;
   flex: 1 1 auto;
 }
+/* A label can use the free start-slot width to truncate, but a caret-free
+   icon must keep its intrinsic width so the combobox can center the glyph. */
+.kui-select--custom-selected[data-selected-presentation="icon-only"][data-caret="false"]::part(
+    start
+  ) {
+  flex: 0 0 auto;
+}
+.kui-select--custom-selected[data-selected-presentation="icon-only"][data-caret="false"]
+  .kui-select__custom-selected {
+  margin-inline-end: 0 !important;
+}
 .kui-select--custom-selected::part(display-input) {
   position: absolute;
   width: 1px;

package/dist/styles/sunken-panel.css

@@ -1,9 +1,12 @@
 .kui-sunken-panel {
+  /* Reset the private value on each panel so nested panels do not inherit it. */
+  --_kui-sunken-panel-flex: 0 1 auto;
   display: flex;
   min-width: 0;
   min-height: 0;
   padding: var(--kui-sunken-panel-padding, 0.5rem);
   box-sizing: border-box;
+  flex: var(--_kui-sunken-panel-flex, initial);
   border-radius: var(
     --kui-sunken-panel-radius,
     var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
@@ -17,6 +20,10 @@
   gap: var(--kui-sunken-panel-gap, 0.5rem);
 }
 
+.kui-sunken-panel[data-fill="true"] {
+  height: 100%;
+}
+
 .kui-sunken-panel[data-shape="square"] {
   border-radius: 0;
 }

package/dist/styles/text.css

@@ -3,6 +3,35 @@
   box-sizing: border-box;
   border: 1px solid transparent;
   margin: 0;
+  white-space: normal;
+  overflow-wrap: normal;
+}
+
+.kui-text[data-wrap="anywhere"] {
+  overflow-wrap: anywhere;
+}
+
+.kui-text[data-wrap="nowrap"] {
+  white-space: nowrap;
+}
+
+.kui-text[data-wrap="truncate"] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+span.kui-text[data-wrap="truncate"] {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.kui-text__clamp {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--_kui-text-max-lines);
 }
 
 .kui-text[data-tone="quiet"] {

package/dist/styles/token-search-field.css

@@ -6,6 +6,7 @@
   --kui-token-search-line-size: 2.125rem;
 
   display: grid;
+  position: relative;
   width: 100%;
   min-width: 0;
   min-height: 2.75rem;
@@ -139,6 +140,7 @@
 
 .kui-token-search__clear {
   grid-column: 3;
+  border-radius: var(--kui-radius-pill);
 }
 
 .kui-token-search__trailing {
@@ -147,13 +149,24 @@
 
 .kui-token-search__suggestions {
   display: grid;
-  grid-column: 2 / -1;
-  min-width: 0;
-  padding: 0.25rem;
-  border: 1px solid var(--kui-token-search-border);
+  position: absolute;
+  z-index: 20;
+  inset-block-start: calc(100% + 0.25rem);
+  inset-inline-start: 0;
+  width: min(max(100%, 15rem), calc(100vw - 1rem));
+  max-height: 15rem;
+  padding: var(--_kui-popup-inset);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-color-neutral-border-normal);
   border-radius: var(--kui-radius-pill);
-  background: var(--kui-token-search-background);
-  gap: 0.125rem;
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-m);
+  gap: var(--_kui-popup-row-gap);
+  overflow-y: auto;
+}
+
+.kui-token-search__suggestions:has(> :nth-child(2)) {
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
 }
 
 .kui-token-search__suggestion {
@@ -200,6 +213,12 @@
     border-color 0.2s ease;
 }
 
+.kui-token-search[data-collapsible="true"][data-expanded="true"]:has(
+    .kui-token-search__suggestions
+  ) {
+  overflow: visible;
+}
+
 .kui-token-search[data-collapsible="true"][data-expanded="false"] {
   width: 2.75rem;
   min-width: 2.75rem;
@@ -256,6 +275,10 @@
   box-shadow: none;
 }
 
+.kui-token-search[data-presentation="toolbar-group"] .kui-token-search__clear {
+  border-radius: var(--kui-control-highlight-radius);
+}
+
 .kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"]:focus-within {
   border-color: var(--kui-color-focus);
   background: var(--kui-token-search-background);

package/dist/styles/toolbar-control-group.css

@@ -33,6 +33,7 @@
   --_kui-toolbar-control-group-slot-overlap: 0px;
   --_kui-toolbar-control-group-slot-radius: var(--kui-toolbar-item-radius);
   display: inline-flex;
+  position: relative;
   height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   min-width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   padding: 1px;
@@ -46,6 +47,34 @@
   gap: 0;
 }
 
+.kui-toolbar-control-group[data-busy="true"] > svg,
+.kui-toolbar-control-group[data-busy="true"]
+  > :not(.kui-toolbar-control-group__busy-spinner)
+  svg {
+  visibility: hidden;
+}
+
+.kui-toolbar-control-group__busy-spinner {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  display: grid;
+  width: 1rem;
+  height: 1rem;
+  transform: translate(-50%, -50%);
+  place-items: center;
+  pointer-events: none;
+}
+
+.kui-toolbar-control-group__busy-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 /* In a Toolbar zone, a group shorter than the toolbar's control band (the
    `--_kui-toolbar-band` the Toolbar provides) takes half the difference as a
    top margin, so it centers in the band by its own size. */
@@ -126,6 +155,12 @@
     background-color 0.2s ease,
     border-color 0.2s ease;
 }
+
+.kui-toolbar-control-group[data-content="search"]:has(
+    .kui-token-search__suggestions
+  ) {
+  overflow: visible;
+}
 .kui-toolbar-control-group[data-content="search"][data-expanded="false"] {
   width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   flex: 0 0 auto;