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

package/dist/index.js

@@ -1,45 +1,45 @@
+export { wireTokenSearchFields } from './chunk-R75GGNWY.js';
 export { wireResizableRegions } from './chunk-UIDKY4UB.js';
 
 export { wireScrollDividers } from './chunk-JCV4GXWB.js';
-export { reorderTabs, wireTabBars } from './chunk-C4OYOKWX.js';
-export { wireTokenSearchFields } from './chunk-A3CKOW2R.js';
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-RRB26JRJ.js';
+export { reorderTabs, wireTabBars } from './chunk-UA6JW52D.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-RTJNJTG3.js';
 export { createTokenSearchModel } from './chunk-4SQK27MR.js';
 export { ValueTable, ValueTableRow } from './chunk-P7D3EMXM.js';
 export { Spacer } from './chunk-MEY33VWB.js';
 export { StateBanner } from './chunk-GLDWRCAM.js';
-export { SunkenPanel } from './chunk-6ZXOQEAN.js';
+export { SunkenPanel } from './chunk-WF75U3V4.js';
 export { DialogSurface, PopupSurface } from './chunk-NN6GYOA2.js';
-export { TabBar } from './chunk-N3GKMPDW.js';
+export { TabBar } from './chunk-RKTTF3L4.js';
 export { SegmentedControl } from './chunk-X5QSICJ3.js';
-export { Select } from './chunk-TEYARRAK.js';
+export { Select } from './chunk-F7OCOBTG.js';
 export { ListInsetControl } from './chunk-5I7QGQVT.js';
 export { EmptyState } from './chunk-E36EVCKG.js';
 export { Grid } from './chunk-UCKKT6KO.js';
-export { ListActionRow } from './chunk-F4QMLOXJ.js';
+export { ListActionRow } from './chunk-IAOAZUOO.js';
 export { AppTab } from './chunk-Q6YU3BT7.js';
-export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-VCBTX62E.js';
+export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-ZRWXFDDS.js';
 export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-KLJKU6ZL.js';
 export { Row } from './chunk-VZOFZPSO.js';
-export { ListHeader } from './chunk-5Q3N6EV7.js';
-export { Text } from './chunk-AUKT3KMG.js';
+export { ListHeader } from './chunk-5IJ6UGNZ.js';
+export { Text } from './chunk-CQHN45XR.js';
 export { ListInsetText } from './chunk-DG6G5EPF.js';
-export { ListItem, ListItemLink } from './chunk-SWVW56CV.js';
-export { List } from './chunk-NAPE7WUS.js';
-
-export { ToolbarText } from './chunk-3SXMEK3B.js';
-export { DisclosureArrow } from './chunk-KROD7KZK.js';
+export { ListItem, ListItemLink } from './chunk-EN4LDR5Y.js';
+export { ToolbarText } from './chunk-V3DX3K65.js';
+export { DisclosureArrow } from './chunk-AUVG54KC.js';
 export { FloatingToolbar } from './chunk-I3Q7KKYM.js';
 
-export { LoadingSpinner } from './chunk-ZLWQZUGF.js';
 export { Skeleton } from './chunk-AHEG27M7.js';
 export { Badge } from './chunk-MP2GDBQZ.js';
-export { Chip } from './chunk-EAC4CDY7.js';
-export { Pane } from './chunk-EZVNC4J6.js';
-export { ToolbarActionLink, ToolbarControlGroup } from './chunk-7JUBXOIV.js';
-export { Toolbar } from './chunk-MERWRTBG.js';
-export { LucideIcon } from './chunk-4R777DUZ.js';
-export { ContentItem } from './chunk-MA73TA6D.js';
+export { Chip } from './chunk-SMZGAPCU.js';
+export { Pane } from './chunk-3BYFWTP3.js';
+export { List } from './chunk-NAPE7WUS.js';
+
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-NXWE5S57.js';
+export { Toolbar } from './chunk-RGS4WX2M.js';
+export { LucideIcon } from './chunk-MOSIE4Z2.js';
+export { LoadingSpinner } from './chunk-ZLWQZUGF.js';
+export { ContentItem } from './chunk-7AKGPBCC.js';
 
 export { calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-2G2ZJQYK.js';
 

package/dist/list-action-row.js

@@ -1,4 +1,4 @@
-export { ListActionRow } from './chunk-F4QMLOXJ.js';
+export { ListActionRow } from './chunk-IAOAZUOO.js';
 
 
 

package/dist/list-header.js

@@ -1,4 +1,4 @@
-export { ListHeader } from './chunk-5Q3N6EV7.js';
+export { ListHeader } from './chunk-5IJ6UGNZ.js';
 
 
 

package/dist/list-item.js

@@ -1,4 +1,4 @@
-export { ListItem, ListItemLink } from './chunk-SWVW56CV.js';
+export { ListItem, ListItemLink } from './chunk-EN4LDR5Y.js';
 
 
 

package/dist/lucide-icon.d.ts

@@ -2,15 +2,18 @@ import * as kerfjs from 'kerfjs';
 import { IconNode } from 'lucide';
 
 type LucideNode = IconNode;
+type LucideIconSize = 'xs' | 's' | 'm' | 'l' | 'xl' | number;
 interface LucideIconProps {
     icon: LucideNode;
     name: string;
     className?: string;
     label?: string;
+    /** Named icon scale or positive pixel size, converted to rem. Omit for 1em. */
+    size?: LucideIconSize;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
 /** Render a Lucide-compatible icon node without copying icon SVG strings. */
-declare function LucideIcon({ icon, name, className, label, slot, }: LucideIconProps): kerfjs.SafeHtml;
+declare function LucideIcon({ icon, name, className, label, size, slot, }: LucideIconProps): kerfjs.SafeHtml;
 
-export { LucideIcon, type LucideIconProps, type LucideNode };
+export { LucideIcon, type LucideIconProps, type LucideIconSize, type LucideNode };

package/dist/lucide-icon.js

@@ -1,3 +1,4 @@
-export { LucideIcon } from './chunk-4R777DUZ.js';
+export { LucideIcon } from './chunk-MOSIE4Z2.js';
+
 
 //# sourceMappingURL=lucide-icon.js.map

package/dist/nav-stack.d.ts

@@ -1,8 +1,8 @@
 import * as kerfjs from 'kerfjs';
+import { PaneAppearance } from './pane.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import { ToolbarConfig } from './toolbar.js';
 import { ToolbarTextSize, HeadingLevel } from './toolbar-text.js';
-import './pane.js';
 import './sides-BPSWde0A.js';
 
 /**
@@ -13,6 +13,8 @@ interface NavStackView {
     /** Stable identity for keyed reconcile and transition direction. */
     key: string;
     content: KerfUiContent;
+    /** Background of this view's scrolling work surface. */
+    appearance?: PaneAppearance;
     /** Title shown in the top toolbar for this view. */
     title?: string;
     /** Leading groups for this view's top toolbar, after the back control and before the title. */

package/dist/nav-stack.js

@@ -1,4 +1,5 @@
-export { NavStack } from './chunk-5PESG2VP.js';
+export { NavStack } from './chunk-HXCMWANP.js';
+
 
 
 

package/dist/pane.d.ts

@@ -22,6 +22,7 @@ type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
     'data-safe-area-inline-end'?: never;
     'data-chrome-placement'?: never;
     'data-chrome-dividers'?: never;
+    'data-appearance'?: never;
 }>;
 /** How a Pane's header and footer relate to its scrolling content. */
 type PaneChromePlacement = 'fixed' | 'auto';
@@ -31,6 +32,8 @@ type PaneChromePlacement = 'fixed' | 'auto';
  * chrome, as `wireScrollDividers` reports; `always`; or `none`.
  */
 type PaneChromeDividers = 'scroll' | 'always' | 'none';
+/** Background treatment of the Pane's scrolling work surface. */
+type PaneAppearance = 'default' | 'sunken';
 interface PaneProps {
     /** Optional fixed chrome above the scrolling content, arranged vertically. */
     header?: KerfUiContent;
@@ -48,7 +51,8 @@ interface PaneProps {
     chromePlacement?: PaneChromePlacement;
     /**
      * The divider under the header and over the footer, where they meet the
-     * scrolling content. `scroll` (default) shows the header's divider only
+     * scrolling content. Omitted defaults to `scroll` for a plain pane and
+     * `always` for `appearance="sunken"`. `scroll` shows the header's divider only
      * while the content is scrolled down, and the footer's only while more
      * content lies below — never when the content fits — once
      * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above
@@ -56,6 +60,8 @@ interface PaneProps {
      * The line is drawn inside the chrome, so no state moves the content.
      */
     chromeDividers?: PaneChromeDividers;
+    /** Paint the scrolling work surface with the shared lowered-surface color. */
+    appearance?: PaneAppearance;
     /** Root semantics. Defaults to `div`. */
     element?: PaneElement;
     /** Scrolling content semantics. Defaults to `div`. */
@@ -90,13 +96,13 @@ interface PaneProps {
  * or a CollapsiblePanel) forwards, so the app configures that pane instead of
  * styling it. An omitted or `undefined` field keeps the composite's default.
  */
-type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers'>;
+type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers' | 'appearance'>;
 /**
  * An unpadded application column with optional fixed header/footer slots and one
  * scrolling vertical content owner. Separator lines are independently opt-in on
  * each logical edge, so the same component works as a sidebar, main area,
  * inspector, or dialog column.
  */
-declare function Pane({ header, children, footer, chromePlacement, chromeDividers, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
+declare function Pane({ header, children, footer, chromePlacement, chromeDividers, appearance, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
 
-export { Pane, type PaneChromeDividers, type PaneChromePlacement, type PaneConfig, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };
+export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneConfig, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };

package/dist/pane.js

@@ -1,4 +1,4 @@
-export { Pane } from './chunk-EZVNC4J6.js';
+export { Pane } from './chunk-3BYFWTP3.js';
 
 
 //# sourceMappingURL=pane.js.map

package/dist/{panel-toolbar-DqwtBxQL.d.ts → panel-toolbar-DDKh4uKd.d.ts}

@@ -1,5 +1,5 @@
-import { LucideIcon } from './lucide-icon.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { LucideIcon } from './lucide-icon.js';
 import { ToolbarConfig } from './toolbar.js';
 
 /** Which edge a collapsible panel docks to. */
@@ -59,5 +59,14 @@ interface PanelToolbar extends ToolbarConfig {
     trailing?: KerfUiContent;
     toggle?: PanelToggle;
 }
+/** A panel's fixed bottom toolbar, below its optional footer content. */
+interface PanelBottomToolbar extends ToolbarConfig {
+    label: string;
+    leading?: KerfUiContent;
+    center?: KerfUiContent;
+    trailing?: KerfUiContent;
+}
+/** Whether panel chrome stays fixed, scrolls, or follows Pane's auto rule. */
+type PanelChromePlacement = 'fixed' | 'scroll' | 'auto';
 
-export { type PanelSide as P, type PanelToolbar as a, type PanelToggle as b, collapsiblePanelToggleIcon as c };
+export { type PanelSide as P, type PanelToolbar as a, type PanelChromePlacement as b, type PanelBottomToolbar as c, type PanelToggle as d, collapsiblePanelToggleIcon as e };

package/dist/popup-menu-register.js

@@ -1,7 +1,7 @@
 import { installHelpTags } from './chunk-BFPBS5Y4.js';
 import '@awesome.me/webawesome/dist/components/button/button.js';
 import '@awesome.me/webawesome/dist/components/divider/divider.js';
-import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
+import WaDropdownItem from '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';
 import WaDropdown from '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';
 
@@ -21,8 +21,45 @@ function installPopupMenuKeyboard(prototype) {
   };
 }
 
+// src/install-popup-menu-submenu-focus.ts
+var installed2 = /* @__PURE__ */ new WeakSet();
+function installPopupMenuSubmenuFocus(prototype) {
+  if (installed2.has(prototype)) return;
+  installed2.add(prototype);
+  const target = prototype;
+  const openSubmenu = target.openSubmenu;
+  target.openSubmenu = async function() {
+    const submenu = this.submenuElement;
+    if (!this.closest("wa-dropdown.kui-popup-menu") || !submenu)
+      return openSubmenu.call(this);
+    let desired;
+    const trackFocus = (event) => {
+      const item = event.composedPath().find(
+        (node) => node instanceof HTMLElement && node.localName === "wa-dropdown-item" && node.getAttribute("slot") === "submenu"
+      );
+      if (item && this.getSubmenuItems().includes(item)) desired = item;
+    };
+    submenu.addEventListener("focusin", trackFocus);
+    try {
+      await openSubmenu.call(this);
+    } finally {
+      submenu.removeEventListener("focusin", trackFocus);
+    }
+    const items = this.getSubmenuItems();
+    if (!desired || desired === items[0]) return;
+    const selected = desired;
+    window.setTimeout(() => {
+      if (!this.isConnected || !this.submenuOpen || submenu.hidden || document.activeElement !== items[0])
+        return;
+      items.forEach((item) => item.active = item === selected);
+      selected.focus({ preventScroll: true });
+    }, 0);
+  };
+}
+
 // src/popup-menu-register.ts
 installPopupMenuKeyboard(WaDropdown.prototype);
+installPopupMenuSubmenuFocus(WaDropdownItem.prototype);
 installHelpTags();
 var popupMenuElementsRegistered = true;
 

package/dist/popup-menu-register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/install-popup-menu-keyboard.ts","../src/popup-menu-register.ts"],"names":[],"mappings":";;;;;;;;AAOA,IAAM,SAAA,uBAAgB,OAAA,EAAgB;AAW/B,SAAS,yBAAyB,SAAA,EAAyB;AAChE,EAAA,IAAI,SAAA,CAAU,GAAA,CAAI,SAAS,CAAA,EAAG;AAC9B,EAAA,SAAA,CAAU,IAAI,SAAS,CAAA;AACvB,EAAA,MAAM,MAAA,GAAS,SAAA;AACf,EAAA,MAAM,gBAAgB,MAAA,CAAO,aAAA;AAC7B,EAAA,MAAA,CAAO,aAAA,GAAgB,SAAmC,IAAA,EAAM,KAAA,EAAa;AAC3E,IAAA,IACE,KAAA,YAAiB,iBACjB,IAAA,CAAK,SAAA,CAAU,SAAS,gBAAgB,CAAA,IACxC,CAAC,IAAA,CAAK,QAAA,EACN;AACA,MAAA,IAAA,CAAK,KAAA,EAAM;AACX,MAAA;AAAA,IACF;AACA,IAAA,aAAA,CAAc,IAAA,CAAK,IAAA,EAAM,IAAA,EAAM,KAAK,CAAA;AAAA,EACtC,CAAA;AACF;;;ACxBA,wBAAA,CAAyB,WAAW,SAAS,CAAA;AAC7C,eAAA,EAAgB;AAQT,IAAM,2BAAA,GAA8B","file":"popup-menu-register.js","sourcesContent":["interface PopupMenuDropdown extends HTMLElement {\n  makeSelection(\n    item: HTMLElement & { disabled?: boolean },\n    event?: Event,\n  ): void;\n}\n\nconst installed = new WeakSet<object>();\n\n/**\n * Route a keyboard choice in a `PopupMenu` through the item's click. Web Awesome\n * selects a pointer choice from the item's click event but a keyboard choice\n * (Enter or Space) directly, so delegated `data-action` click handlers would\n * never run for keyboard users. Clicking the item makes Web Awesome select it\n * exactly as it does for a pointer — one `wa-select`, then close and focus\n * return — while the click reaches the application's delegation. Raw\n * `wa-dropdown`s outside `PopupMenu` are unaffected.\n */\nexport function installPopupMenuKeyboard(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as PopupMenuDropdown;\n  const makeSelection = target.makeSelection;\n  target.makeSelection = function (this: PopupMenuDropdown, item, event): void {\n    if (\n      event instanceof KeyboardEvent &&\n      this.classList.contains('kui-popup-menu') &&\n      !item.disabled\n    ) {\n      item.click();\n      return;\n    }\n    makeSelection.call(this, item, event);\n  };\n}\n","import '@awesome.me/webawesome/dist/components/button/button.js';\nimport '@awesome.me/webawesome/dist/components/divider/divider.js';\nimport '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';\nimport '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';\n\nimport WaDropdown from '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';\n\nimport { installHelpTags } from './install-help-tag.js';\nimport { installPopupMenuKeyboard } from './install-popup-menu-keyboard.js';\n\ninstallPopupMenuKeyboard(WaDropdown.prototype);\ninstallHelpTags();\n\n/**\n * Marker export for tests and tooling; importing this module registers the\n * Web Awesome elements a `PopupMenu` renders (`wa-dropdown`,\n * `wa-dropdown-item`, `wa-button`, and `wa-divider`) and routes a keyboard\n * choice through the item's click so delegated `data-action`s run.\n */\nexport const popupMenuElementsRegistered = true;\n"]}
+{"version":3,"sources":["../src/install-popup-menu-keyboard.ts","../src/install-popup-menu-submenu-focus.ts","../src/popup-menu-register.ts"],"names":["installed"],"mappings":";;;;;;;;AAOA,IAAM,SAAA,uBAAgB,OAAA,EAAgB;AAW/B,SAAS,yBAAyB,SAAA,EAAyB;AAChE,EAAA,IAAI,SAAA,CAAU,GAAA,CAAI,SAAS,CAAA,EAAG;AAC9B,EAAA,SAAA,CAAU,IAAI,SAAS,CAAA;AACvB,EAAA,MAAM,MAAA,GAAS,SAAA;AACf,EAAA,MAAM,gBAAgB,MAAA,CAAO,aAAA;AAC7B,EAAA,MAAA,CAAO,aAAA,GAAgB,SAAmC,IAAA,EAAM,KAAA,EAAa;AAC3E,IAAA,IACE,KAAA,YAAiB,iBACjB,IAAA,CAAK,SAAA,CAAU,SAAS,gBAAgB,CAAA,IACxC,CAAC,IAAA,CAAK,QAAA,EACN;AACA,MAAA,IAAA,CAAK,KAAA,EAAM;AACX,MAAA;AAAA,IACF;AACA,IAAA,aAAA,CAAc,IAAA,CAAK,IAAA,EAAM,IAAA,EAAM,KAAK,CAAA;AAAA,EACtC,CAAA;AACF;;;ACvBA,IAAMA,UAAAA,uBAAgB,OAAA,EAAgB;AAG/B,SAAS,6BAA6B,SAAA,EAAyB;AACpE,EAAA,IAAIA,UAAAA,CAAU,GAAA,CAAI,SAAS,CAAA,EAAG;AAC9B,EAAAA,UAAAA,CAAU,IAAI,SAAS,CAAA;AACvB,EAAA,MAAM,MAAA,GAAS,SAAA;AACf,EAAA,MAAM,cAAc,MAAA,CAAO,WAAA;AAC3B,EAAA,MAAA,CAAO,cAAc,iBAEJ;AACf,IAAA,MAAM,UAAU,IAAA,CAAK,cAAA;AACrB,IAAA,IAAI,CAAC,IAAA,CAAK,OAAA,CAAQ,4BAA4B,KAAK,CAAC,OAAA;AAClD,MAAA,OAAO,WAAA,CAAY,KAAK,IAAI,CAAA;AAE9B,IAAA,IAAI,OAAA;AACJ,IAAA,MAAM,UAAA,GAAa,CAAC,KAAA,KAAsB;AACxC,MAAA,MAAM,IAAA,GAAO,KAAA,CACV,YAAA,EAAa,CACb,IAAA;AAAA,QACC,CAAC,IAAA,KACC,IAAA,YAAgB,WAAA,IAChB,IAAA,CAAK,cAAc,kBAAA,IACnB,IAAA,CAAK,YAAA,CAAa,MAAM,CAAA,KAAM;AAAA,OAClC;AACF,MAAA,IAAI,QAAQ,IAAA,CAAK,eAAA,GAAkB,QAAA,CAAS,IAAI,GAAG,OAAA,GAAU,IAAA;AAAA,IAC/D,CAAA;AACA,IAAA,OAAA,CAAQ,gBAAA,CAAiB,WAAW,UAAU,CAAA;AAC9C,IAAA,IAAI;AACF,MAAA,MAAM,WAAA,CAAY,KAAK,IAAI,CAAA;AAAA,IAC7B,CAAA,SAAE;AACA,MAAA,OAAA,CAAQ,mBAAA,CAAoB,WAAW,UAAU,CAAA;AAAA,IACnD;AAEA,IAAA,MAAM,KAAA,GAAQ,KAAK,eAAA,EAAgB;AACnC,IAAA,IAAI,CAAC,OAAA,IAAW,OAAA,KAAY,KAAA,CAAM,CAAC,CAAA,EAAG;AACtC,IAAA,MAAM,QAAA,GAAW,OAAA;AAIjB,IAAA,MAAA,CAAO,WAAW,MAAM;AACtB,MAAA,IACE,CAAC,IAAA,CAAK,WAAA,IACN,CAAC,IAAA,CAAK,WAAA,IACN,OAAA,CAAQ,MAAA,IACR,QAAA,CAAS,aAAA,KAAkB,KAAA,CAAM,CAAC,CAAA;AAElC,QAAA;AACF,MAAA,KAAA,CAAM,QAAQ,CAAC,IAAA,KAAU,IAAA,CAAK,MAAA,GAAS,SAAS,QAAS,CAAA;AACzD,MAAA,QAAA,CAAS,KAAA,CAAM,EAAE,aAAA,EAAe,IAAA,EAAM,CAAA;AAAA,IACxC,GAAG,CAAC,CAAA;AAAA,EACN,CAAA;AACF;;;ACnDA,wBAAA,CAAyB,WAAW,SAAS,CAAA;AAC7C,4BAAA,CAA6B,eAAe,SAAS,CAAA;AACrD,eAAA,EAAgB;AAQT,IAAM,2BAAA,GAA8B","file":"popup-menu-register.js","sourcesContent":["interface PopupMenuDropdown extends HTMLElement {\n  makeSelection(\n    item: HTMLElement & { disabled?: boolean },\n    event?: Event,\n  ): void;\n}\n\nconst installed = new WeakSet<object>();\n\n/**\n * Route a keyboard choice in a `PopupMenu` through the item's click. Web Awesome\n * selects a pointer choice from the item's click event but a keyboard choice\n * (Enter or Space) directly, so delegated `data-action` click handlers would\n * never run for keyboard users. Clicking the item makes Web Awesome select it\n * exactly as it does for a pointer — one `wa-select`, then close and focus\n * return — while the click reaches the application's delegation. Raw\n * `wa-dropdown`s outside `PopupMenu` are unaffected.\n */\nexport function installPopupMenuKeyboard(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as PopupMenuDropdown;\n  const makeSelection = target.makeSelection;\n  target.makeSelection = function (this: PopupMenuDropdown, item, event): void {\n    if (\n      event instanceof KeyboardEvent &&\n      this.classList.contains('kui-popup-menu') &&\n      !item.disabled\n    ) {\n      item.click();\n      return;\n    }\n    makeSelection.call(this, item, event);\n  };\n}\n","interface SubmenuItem extends HTMLElement {\n  active: boolean;\n}\n\ninterface PopupMenuParentItem extends HTMLElement {\n  submenuElement?: HTMLElement;\n  submenuOpen: boolean;\n  getSubmenuItems(): SubmenuItem[];\n  openSubmenu(): Promise<void>;\n}\n\nconst installed = new WeakSet<object>();\n\n/** Preserve a rapid keyboard move past Web Awesome's late first-item focus. */\nexport function installPopupMenuSubmenuFocus(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as PopupMenuParentItem;\n  const openSubmenu = target.openSubmenu;\n  target.openSubmenu = async function (\n    this: PopupMenuParentItem,\n  ): Promise<void> {\n    const submenu = this.submenuElement;\n    if (!this.closest('wa-dropdown.kui-popup-menu') || !submenu)\n      return openSubmenu.call(this);\n\n    let desired: SubmenuItem | undefined;\n    const trackFocus = (event: FocusEvent) => {\n      const item = event\n        .composedPath()\n        .find(\n          (node): node is SubmenuItem =>\n            node instanceof HTMLElement &&\n            node.localName === 'wa-dropdown-item' &&\n            node.getAttribute('slot') === 'submenu',\n        );\n      if (item && this.getSubmenuItems().includes(item)) desired = item;\n    };\n    submenu.addEventListener('focusin', trackFocus);\n    try {\n      await openSubmenu.call(this);\n    } finally {\n      submenu.removeEventListener('focusin', trackFocus);\n    }\n\n    const items = this.getSubmenuItems();\n    if (!desired || desired === items[0]) return;\n    const selected = desired;\n    // Web Awesome queues its first-item focus after the show animation. This\n    // timer follows that one, restoring a user's later arrow choice only if\n    // the queued focus actually reset it. Pointer/blur/close paths are left alone.\n    window.setTimeout(() => {\n      if (\n        !this.isConnected ||\n        !this.submenuOpen ||\n        submenu.hidden ||\n        document.activeElement !== items[0]\n      )\n        return;\n      items.forEach((item) => (item.active = item === selected));\n      selected.focus({ preventScroll: true });\n    }, 0);\n  };\n}\n","import '@awesome.me/webawesome/dist/components/button/button.js';\nimport '@awesome.me/webawesome/dist/components/divider/divider.js';\nimport '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';\nimport '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';\n\nimport WaDropdown from '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';\nimport WaDropdownItem from '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';\n\nimport { installHelpTags } from './install-help-tag.js';\nimport { installPopupMenuKeyboard } from './install-popup-menu-keyboard.js';\nimport { installPopupMenuSubmenuFocus } from './install-popup-menu-submenu-focus.js';\n\ninstallPopupMenuKeyboard(WaDropdown.prototype);\ninstallPopupMenuSubmenuFocus(WaDropdownItem.prototype);\ninstallHelpTags();\n\n/**\n * Marker export for tests and tooling; importing this module registers the\n * Web Awesome elements a `PopupMenu` renders (`wa-dropdown`,\n * `wa-dropdown-item`, `wa-button`, and `wa-divider`) and routes a keyboard\n * choice through the item's click so delegated `data-action`s run.\n */\nexport const popupMenuElementsRegistered = true;\n"]}

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.d.ts

@@ -58,6 +58,8 @@ interface SelectBaseProps<Value extends string = string> {
     size?: SelectSize;
     /** Closed trigger width; omit to keep the presentation's default. */
     triggerWidth?: SelectTriggerWidth;
+    /** Show the disclosure caret (default); omit it for a compact icon-only trigger. */
+    caret?: boolean;
     /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */
     focusRingOwner?: SelectFocusRingOwner;
     /** Maximum closed-control label width in CSS pixels before ellipsis. */

package/dist/select.js

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

package/dist/split-view.d.ts

@@ -2,8 +2,8 @@ import * as kerfjs from 'kerfjs';
 import { NavStackProps, NavStackView } from './nav-stack.js';
 import { ResizableRegionProps } from './resizable-region.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import './toolbar.js';
 import './pane.js';
+import './toolbar.js';
 import './sides-BPSWde0A.js';
 import './toolbar-text.js';
 import './css-values.js';

package/dist/split-view.js

@@ -1,4 +1,4 @@
-import { NavStack } from './chunk-5PESG2VP.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/app-tab.css

@@ -162,6 +162,90 @@
   width: 2rem;
   min-width: 2rem;
 }
+/* TabBar owns the tablist width query; AppTab owns its own responsive
+   geometry and visually hidden name. The name remains in the accessibility
+   tree, so the tab keeps its accessible name without a rerender. */
+@container kui-tab-bar-tabs (max-width: 52rem) {
+  .kui-tab-bar[data-icon-only-at="wide"]
+    .kui-tab-bar__tabs
+    > .kui-app-tab[data-presentation="segmented"] {
+    width: 2rem;
+    min-width: 2rem;
+    flex: none;
+  }
+  .kui-tab-bar[data-icon-only-at="wide"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__select {
+    width: 100%;
+    justify-content: center;
+  }
+  .kui-tab-bar[data-icon-only-at="wide"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__name {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+}
+@container kui-tab-bar-tabs (max-width: 44rem) {
+  .kui-tab-bar[data-icon-only-at="narrow"]
+    .kui-tab-bar__tabs
+    > .kui-app-tab[data-presentation="segmented"] {
+    width: 2rem;
+    min-width: 2rem;
+    flex: none;
+  }
+  .kui-tab-bar[data-icon-only-at="narrow"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__select {
+    width: 100%;
+    justify-content: center;
+  }
+  .kui-tab-bar[data-icon-only-at="narrow"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__name {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+}
+@container kui-tab-bar-tabs (max-width: 28rem) {
+  .kui-tab-bar[data-icon-only-at="compact"]
+    .kui-tab-bar__tabs
+    > .kui-app-tab[data-presentation="segmented"] {
+    width: 2rem;
+    min-width: 2rem;
+    flex: none;
+  }
+  .kui-tab-bar[data-icon-only-at="compact"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__select {
+    width: 100%;
+    justify-content: center;
+  }
+  .kui-tab-bar[data-icon-only-at="compact"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__name {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+}
 /* In a TabBar, the tab styles itself in the context of its parent strip. A
    segmented strip's outer ends follow the pill track: the first tab's leading
    corners, and a filled strip's last tab's trailing corners, are pill-rounded

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"] {