@kerfjs/ui 4.4.1 → 5.0.0-beta.4

package/dist/chunk-S3TPM2LP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/menu-item.tsx"],"names":[],"mappings":";;;AAIA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAgCM,SAAS,QAAA,CAAS,EAAE,KAAA,EAAO,IAAA,EAAM,QAAA,EAAU,WAAW,KAAA,EAAO,MAAA,EAAQ,MAAA,EAAQ,SAAA,GAAY,EAAA,EAAI,KAAA,EAAO,SAAS,eAAA,EAAiB,KAAA,EAAO,SAAA,GAAY,KAAA,EAAO,KAAA,EAAO,QAAA,GAAW,OAAO,QAAA,EAAU,cAAA,GAAiB,EAAC,EAAE,EAAkB;AACtO,EAAA,MAAM,mBAAA,GAAsB,oBAAA,CAAqB,cAAA,EAAgB,8BAA8B,CAAA;AAC/F,EAAA,uBAAO,IAAA,CAAC,YAAQ,GAAG,mBAAA,EAAqB,MAAK,QAAA,EAAS,KAAA,EAAO,iBAAiB,SAAS,CAAA,CAAA,CAAG,MAAK,EAAG,KAAA,EAAc,OAAc,QAAA,EAAoB,QAAA,EAAU,UAAU,gBAAA,EAAe,WAAA,EAAY,aAAA,EAAa,MAAA,EAAQ,cAAA,EAAc,MAAA,EAAQ,iBAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA,EAAG,kBAAgB,SAAA,GAAY,MAAA,GAAS,MAAA,EAAW,YAAA,EAAY,KAAA,EAAO,YAAA,EAAY,iBAAiB,cAAA,EAAc,QAAA,GAAW,SAAS,MAAA,EAAW,cAAA,EAAc,YAAY,MAAA,GAAY,MAAA,GAAY,MAAA,CAAO,OAAO,CAAA,EAC5d,QAAA,EAAA;AAAA,IAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,qBAAA,EAAuB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,oBACjD,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IACzC,QAAA,oBAAY,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,2BAA2B,QAAA,EAAA,QAAA,EAAS;AAAA,GAAA,EAC/D,CAAA;AACF","file":"chunk-S3TPM2LP.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } from './extension-attributes.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-multiline',\n  'data-state',\n]);\n\ntype MenuItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-multiline'?: never;\n    'data-state'?: never;\n  }\n>;\n\nexport interface MenuItemProps {\n  label: string | SafeHtml;\n  icon?: SafeHtml;\n  trailing?: SafeHtml;\n  selected?: boolean;\n  action: string;\n  itemId?: string;\n  className?: string;\n  style?: string;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  rootAttributes?: MenuItemRootAttributes;\n}\n\nexport function MenuItem({ label, icon, trailing, selected = false, action, itemId, className = '', style, pressed, accessibleLabel, title, multiline = false, state, disabled = false, tabIndex, rootAttributes = {} }: MenuItemProps) {\n  const extensionAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);\n  return <button {...extensionAttributes} type=\"button\" class={`kui-menu-item ${className}`.trim()} style={style} title={title} disabled={disabled} tabindex={tabIndex} data-component=\"menu-item\" data-action={action} data-item-id={itemId} data-has-icon={String(Boolean(icon))} data-multiline={multiline ? 'true' : undefined} data-state={state} aria-label={accessibleLabel} aria-current={selected ? 'page' : undefined} aria-pressed={pressed === undefined ? undefined : String(pressed)}>\n    {icon && <span class=\"kui-menu-item__icon\">{icon}</span>}\n    <span class=\"kui-menu-item__label\">{label}</span>\n    {trailing && <span class=\"kui-menu-item__trailing\">{trailing}</span>}\n  </button>;\n}\n"]}

package/dist/{chunk-T5XNMVOI.js → chunk-XZXRLY5Q.js}

@@ -1,16 +1,25 @@
+import { filterDataAttributes } from './chunk-7BR3DO2A.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
-// src/app-tab.tsx
+var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-tab-id",
+  "data-selected",
+  "data-tab-dragging",
+  "data-tab-drop-position"
+]);
 function CloseIcon() {
   return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2.25", "stroke-linecap": "round", children: [
     /* @__PURE__ */ jsx("path", { d: "m7 7 10 10" }),
     /* @__PURE__ */ jsx("path", { d: "M17 7 7 17" })
   ] });
 }
-function AppTab({ id, name, selected = false, closable = true, draggable = false, leading, trailing, selectAction = "select-tab", closeAction = "close-tab", className = "", rootAttributes = {} }) {
+function AppTab({ id, name, selected = false, closable = true, draggable = false, leading, trailing, closeIcon, selectAction = "select-tab", closeAction = "close-tab", className = "", rootAttributes = {} }) {
   const keyshortcuts = [closable ? "Delete Backspace" : "", draggable ? "Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { class: `kui-app-tab ${className}`.trim(), ...rootAttributes, "data-component": "app-tab", "data-tab-id": id, "data-selected": String(selected), draggable: draggable ? "true" : "false", children: [
-    closable && /* @__PURE__ */ jsx("button", { type: "button", tabindex: "-1", class: "kui-app-tab__close", "data-action": closeAction, "data-tab-id": id, "aria-label": `Close ${name}`, title: `Close ${name}`, children: /* @__PURE__ */ jsx(CloseIcon, {}) }),
+  const extensionAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);
+  return /* @__PURE__ */ jsxs("div", { ...extensionAttributes, class: `kui-app-tab ${className}`.trim(), "data-component": "app-tab", "data-tab-id": id, "data-selected": String(selected), draggable: draggable ? "true" : "false", children: [
+    closable && /* @__PURE__ */ jsx("button", { type: "button", tabindex: "-1", class: "kui-app-tab__close", "data-action": closeAction, "data-tab-id": id, "aria-label": `Close ${name}`, title: `Close ${name}`, children: /* @__PURE__ */ jsx("span", { class: "kui-app-tab__close-icon", "aria-hidden": "true", children: closeIcon ?? /* @__PURE__ */ jsx(CloseIcon, {}) }) }),
     /* @__PURE__ */ jsxs("button", { type: "button", class: "kui-app-tab__select", role: "tab", "aria-selected": String(selected), "aria-keyshortcuts": keyshortcuts || void 0, "data-action": selectAction, "data-tab-id": id, tabindex: selected ? "0" : "-1", children: [
       leading,
       /* @__PURE__ */ jsx("span", { class: "kui-app-tab__name", children: name }),
@@ -21,4 +30,4 @@ function AppTab({ id, name, selected = false, closable = true, draggable = false
 
 export { AppTab };
 
-//# sourceMappingURL=chunk-T5XNMVOI.js.map
+//# sourceMappingURL=chunk-XZXRLY5Q.js.map

package/dist/chunk-XZXRLY5Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":";;;AAIA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,aAAA;AAAA,EACA,eAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAC,CAAA;AA6BD,SAAS,SAAA,GAAY;AACnB,EAAA,uBAAO,IAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,MAAA,EAAO,cAAA,EAAe,cAAA,EAAa,MAAA,EAAO,kBAAe,OAAA,EAAQ,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,YAAA,EAAa,CAAA;AAAA,oBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,YAAA,EAAa;AAAA,GAAA,EAAO,CAAA;AAC1L;AAEO,SAAS,MAAA,CAAO,EAAE,EAAA,EAAI,IAAA,EAAM,WAAW,KAAA,EAAO,QAAA,GAAW,IAAA,EAAM,SAAA,GAAY,KAAA,EAAO,OAAA,EAAS,UAAU,SAAA,EAAW,YAAA,GAAe,cAAc,WAAA,GAAc,WAAA,EAAa,YAAY,EAAA,EAAI,cAAA,GAAiB,EAAC,EAAE,EAAgB;AACjO,EAAA,MAAM,YAAA,GAAe,CAAC,QAAA,GAAW,kBAAA,GAAqB,EAAA,EAAI,SAAA,GAAY,0CAAA,GAA6C,EAAE,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AAC/I,EAAA,MAAM,mBAAA,GAAsB,oBAAA,CAAqB,cAAA,EAAgB,8BAA8B,CAAA;AAC/F,EAAA,uBAAO,IAAA,CAAC,SAAK,GAAG,mBAAA,EAAqB,OAAO,CAAA,YAAA,EAAe,SAAS,GAAG,IAAA,EAAK,EAAG,kBAAe,SAAA,EAAU,aAAA,EAAa,IAAI,eAAA,EAAe,MAAA,CAAO,QAAQ,CAAA,EAAG,SAAA,EAAW,SAAA,GAAY,MAAA,GAAS,OAAA,EACvL,QAAA,EAAA;AAAA,IAAA,QAAA,oBAAY,GAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,QAAA,EAAS,IAAA,EAAK,KAAA,EAAM,oBAAA,EAAqB,aAAA,EAAa,WAAA,EAAa,aAAA,EAAa,EAAA,EAAI,cAAY,CAAA,MAAA,EAAS,IAAI,CAAA,CAAA,EAAI,KAAA,EAAO,CAAA,MAAA,EAAS,IAAI,CAAA,CAAA,EAAI,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,yBAAA,EAA0B,aAAA,EAAY,MAAA,EAAQ,QAAA,EAAA,SAAA,oBAAa,GAAA,CAAC,SAAA,EAAA,EAAU,GAAG,CAAA,EAAO,CAAA;AAAA,oBACxQ,IAAA,CAAC,YAAO,IAAA,EAAK,QAAA,EAAS,OAAM,qBAAA,EAAsB,IAAA,EAAK,KAAA,EAAM,eAAA,EAAe,MAAA,CAAO,QAAQ,GAAG,mBAAA,EAAmB,YAAA,IAAgB,QAAW,aAAA,EAAa,YAAA,EAAc,eAAa,EAAA,EAAI,QAAA,EAAU,QAAA,GAAW,GAAA,GAAM,IAAA,EAChN,QAAA,EAAA;AAAA,MAAA,OAAA;AAAA,sBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,mBAAA,EAAqB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,MAAQ,YAAY,QAAA,mBAAW,GAAA,CAAC,UAAK,KAAA,EAAM,uBAAA,EAAyB,oBAAS,CAAA,GAAU;AAAA,KAAA,EACxI;AAAA,GAAA,EACF,CAAA;AACF","file":"chunk-XZXRLY5Q.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } from './extension-attributes.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-tab-id',\n  'data-selected',\n  'data-tab-dragging',\n  'data-tab-drop-position',\n]);\n\ntype AppTabRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-tab-id'?: never;\n    'data-selected'?: never;\n    'data-tab-dragging'?: never;\n    'data-tab-drop-position'?: never;\n  }\n>;\n\nexport interface AppTabProps {\n  id: string;\n  name: string;\n  selected?: boolean;\n  closable?: boolean;\n  draggable?: boolean;\n  leading?: SafeHtml;\n  trailing?: SafeHtml;\n  /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n  closeIcon?: SafeHtml;\n  selectAction?: string;\n  closeAction?: string;\n  className?: string;\n  rootAttributes?: AppTabRootAttributes;\n}\n\nfunction CloseIcon() {\n  return <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\"><path d=\"m7 7 10 10\"></path><path d=\"M17 7 7 17\"></path></svg>;\n}\n\nexport function AppTab({ id, name, selected = false, closable = true, draggable = false, leading, trailing, closeIcon, selectAction = 'select-tab', closeAction = 'close-tab', className = '', rootAttributes = {} }: AppTabProps) {\n  const keyshortcuts = [closable ? 'Delete Backspace' : '', draggable ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : ''].filter(Boolean).join(' ');\n  const extensionAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);\n  return <div {...extensionAttributes} class={`kui-app-tab ${className}`.trim()} data-component=\"app-tab\" data-tab-id={id} data-selected={String(selected)} draggable={draggable ? 'true' : 'false'}>\n    {closable && <button type=\"button\" tabindex=\"-1\" class=\"kui-app-tab__close\" data-action={closeAction} data-tab-id={id} aria-label={`Close ${name}`} title={`Close ${name}`}><span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">{closeIcon ?? <CloseIcon />}</span></button>}\n    <button type=\"button\" class=\"kui-app-tab__select\" role=\"tab\" aria-selected={String(selected)} aria-keyshortcuts={keyshortcuts || undefined} data-action={selectAction} data-tab-id={id} tabindex={selected ? '0' : '-1'}>\n      {leading}<span class=\"kui-app-tab__name\">{name}</span>{closable || trailing ? <span class=\"kui-app-tab__trailing\">{trailing}</span> : undefined}\n    </button>\n  </div>;\n}\n"]}

package/dist/dialog-header.d.ts

@@ -3,12 +3,13 @@ import { SafeHtml } from 'kerfjs';
 interface DialogHeaderProps {
     title: string;
     titleId: string;
-    summary: string;
+    summary?: string;
     summaryId?: string;
     icon?: SafeHtml;
     iconClassName?: string;
     actions?: SafeHtml;
+    actionsLabel?: string;
 }
-declare function DialogHeader({ title, titleId, summary, summaryId, icon, iconClassName, actions }: DialogHeaderProps): SafeHtml;
+declare function DialogHeader({ title, titleId, summary, summaryId, icon, iconClassName, actions, actionsLabel }: DialogHeaderProps): SafeHtml;
 
 export { DialogHeader, type DialogHeaderProps };

package/dist/dialog-header.js

@@ -1,3 +1,5 @@
-export { DialogHeader } from './chunk-723YNJBH.js';
+export { DialogHeader } from './chunk-K3G72I6D.js';
+
+
 
 //# sourceMappingURL=dialog-header.js.map

package/dist/disclosure-arrow.d.ts

@@ -0,0 +1,14 @@
+import { SafeHtml } from 'kerfjs';
+
+type DisclosureDirection = 'up' | 'down' | 'left' | 'right';
+interface DisclosureArrowProps {
+    open: boolean;
+    openDirection?: DisclosureDirection;
+    closedDirection?: DisclosureDirection;
+    /** Replacement icons should use right as their unrotated orientation. */
+    icon?: SafeHtml;
+    className?: string;
+}
+declare function DisclosureArrow({ open, openDirection, closedDirection, icon, className, }: DisclosureArrowProps): SafeHtml;
+
+export { DisclosureArrow, type DisclosureArrowProps, type DisclosureDirection };

package/dist/disclosure-arrow.js

@@ -0,0 +1,4 @@
+export { DisclosureArrow } from './chunk-56RJXPHG.js';
+
+
+//# sourceMappingURL=disclosure-arrow.js.map

package/dist/disclosure-arrow.js.map

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

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 export { AppTab, AppTabProps } from './app-tab.js';
 export { DialogHeader, DialogHeaderProps } from './dialog-header.js';
+export { DisclosureArrow, DisclosureArrowProps, DisclosureDirection } from './disclosure-arrow.js';
 export { EmptyState, EmptyStateProps } from './empty-state.js';
 export { LoadingSpinner, LoadingSpinnerProps } from './loading-spinner.js';
 export { LucideIcon, LucideIconProps, LucideNode } from './lucide-icon.js';
+export { MenuActionRow, MenuActionRowProps } from './menu-action-row.js';
 export { MenuHeader, MenuHeaderProps } from './menu-header.js';
 export { MenuItem, MenuItemProps } from './menu-item.js';
 export { PageHeader, PageHeaderProps } from './page-header.js';
@@ -11,11 +13,13 @@ export { SegmentedControl, SegmentedControlAppearance, SegmentedControlChoice, S
 export { Select, SelectChoice, SelectProps } from './select.js';
 export { StateBanner, StateBannerProps, StateBannerTone } from './state-banner.js';
 export { TabBar, TabBarProps } from './tab-bar.js';
+export { TokenSearchField, TokenSearchFieldProps, TokenSearchFieldValue, TokenSearchToken, placeTokenSearchCaret, readTokenSearchField } from './token-search-field.js';
 export { Toolbar, ToolbarProps } from './toolbar.js';
 export { ToolbarControlGroup, ToolbarControlGroupProps } from './toolbar-control-group.js';
 export { ToolbarText, ToolbarTextProps, ToolbarTextSize } from './toolbar-text.js';
-export { ValueTable, ValueTableProps } from './value-table.js';
+export { ValueTable, ValueTableProps, ValueTableRow, ValueTableRowProps } from './value-table.js';
 export { ResizeCommit, WireResizableRegionsOptions, wireResizableRegions } from './wire-resizable-regions.js';
 export { TabDropPosition, TabReorder, TabReorderSource, WireTabBarsOptions, reorderTabs, wireTabBars } from './wire-tab-bars.js';
+export { TokenSearchSubmit, WireTokenSearchFieldsOptions, wireTokenSearchFields } from './wire-token-search-fields.js';
 import 'kerfjs';
 import 'lucide';

package/dist/index.js

@@ -1,21 +1,26 @@
-export { ToolbarText } from './chunk-GY5WH7TO.js';
-export { Toolbar } from './chunk-DAFFDO33.js';
-export { ValueTable } from './chunk-VKH2JLDZ.js';
-export { wireResizableRegions } from './chunk-4HHCYSGT.js';
 export { reorderTabs, wireTabBars } from './chunk-MQIZAD4A.js';
+export { wireTokenSearchFields } from './chunk-H5AGGVU5.js';
+export { TabBar } from './chunk-MBR3TYNL.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-7LDCTU7D.js';
+export { ToolbarText } from './chunk-GY5WH7TO.js';
+export { ValueTable, ValueTableRow } from './chunk-R6JHHBKQ.js';
+export { wireResizableRegions } from './chunk-AQNKJRFH.js';
+export { MenuHeader } from './chunk-NPPD2A6O.js';
+export { MenuItem } from './chunk-S3TPM2LP.js';
 export { PageHeader } from './chunk-2PES33HS.js';
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-3O7ZEUW2.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-M5JRI6MN.js';
 export { SegmentedControl } from './chunk-TRNBHPNW.js';
-export { Select } from './chunk-NHXX4JI5.js';
+export { Select } from './chunk-CTQKI2XL.js';
 export { StateBanner } from './chunk-VHW5YNIB.js';
-export { TabBar } from './chunk-MBR3TYNL.js';
+export { AppTab } from './chunk-XZXRLY5Q.js';
+export { DialogHeader } from './chunk-K3G72I6D.js';
 export { ToolbarControlGroup } from './chunk-MFKMHK5W.js';
-export { AppTab } from './chunk-T5XNMVOI.js';
-export { DialogHeader } from './chunk-723YNJBH.js';
+export { Toolbar } from './chunk-DAFFDO33.js';
+export { DisclosureArrow } from './chunk-56RJXPHG.js';
 export { EmptyState } from './chunk-WVPYVDXY.js';
 export { LoadingSpinner } from './chunk-55DATV3A.js';
 export { LucideIcon } from './chunk-W2FK7ZNY.js';
-export { MenuHeader } from './chunk-OPCJRCYO.js';
-export { MenuItem } from './chunk-WY4CAEPG.js';
+export { MenuActionRow } from './chunk-EGHL5S4P.js';
+
 
 //# sourceMappingURL=index.js.map

package/dist/menu-action-row.d.ts

@@ -0,0 +1,50 @@
+import { SafeHtml } from 'kerfjs';
+
+type MenuActionRowRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-action'?: never;
+    'data-item-id'?: never;
+    'data-has-icon'?: never;
+    'data-multiline'?: never;
+    'data-state'?: never;
+    'data-selected'?: never;
+    'data-pressed'?: never;
+}>;
+type MenuActionRowTrailingAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-action'?: never;
+    'data-item-id'?: never;
+    popoverTarget?: string;
+    popoverTargetAction?: 'toggle' | 'show' | 'hide';
+    'aria-controls'?: string;
+    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';
+}>;
+interface MenuActionRowProps {
+    /** Visible dormant content for the primary button. Must not contain interactive descendants. */
+    label: string | SafeHtml;
+    /** Decorative dormant content for the primary button. Must not contain interactive descendants. */
+    icon?: SafeHtml;
+    action: string;
+    itemId?: string;
+    selected?: boolean;
+    pressed?: boolean;
+    accessibleLabel?: string;
+    title?: string;
+    multiline?: boolean;
+    state?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    trailingAction: string;
+    trailingActionLabel: string;
+    /** Decorative dormant content for the trailing button. Must not contain interactive descendants. */
+    trailingActionIcon: SafeHtml;
+    trailingActionDisabled?: boolean;
+    trailingActionTitle?: string;
+    className?: string;
+    style?: string;
+    rootAttributes?: MenuActionRowRootAttributes;
+    trailingActionAttributes?: MenuActionRowTrailingAttributes;
+}
+declare function MenuActionRow({ label, icon, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, className, style, rootAttributes, trailingActionAttributes }: MenuActionRowProps): SafeHtml;
+
+export { MenuActionRow, type MenuActionRowProps };

package/dist/menu-action-row.js

@@ -0,0 +1,4 @@
+export { MenuActionRow } from './chunk-EGHL5S4P.js';
+
+
+//# sourceMappingURL=menu-action-row.js.map

package/dist/menu-action-row.js.map

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

package/dist/menu-header.d.ts

@@ -1,6 +1,20 @@
 import { SafeHtml } from 'kerfjs';
 
-interface MenuHeaderProps {
+type MenuHeaderRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-action'?: never;
+    'data-has-badge'?: never;
+    'data-has-count'?: never;
+    'data-toggle'?: never;
+}>;
+type MenuHeaderTriggerAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-action'?: never;
+    popoverTarget?: string;
+    popoverTargetAction?: 'toggle' | 'show' | 'hide';
+    'aria-controls'?: string;
+    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';
+}>;
+interface MenuHeaderBaseProps {
     label: string;
     action?: string;
     actionLabel?: string;
@@ -9,7 +23,19 @@ interface MenuHeaderProps {
     disabledReason?: string;
     expanded?: boolean;
     toggle?: boolean;
+    rootAttributes?: MenuHeaderRootAttributes;
+    triggerAttributes?: MenuHeaderTriggerAttributes;
 }
-declare function MenuHeader({ label, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle }: MenuHeaderProps): SafeHtml;
+type MenuHeaderIndicatorProps = {
+    count: number;
+    countLabel: string;
+    badge?: never;
+} | {
+    count?: never;
+    countLabel?: never;
+    badge?: SafeHtml;
+};
+type MenuHeaderProps = MenuHeaderBaseProps & MenuHeaderIndicatorProps;
+declare function MenuHeader({ label, count, countLabel, badge, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, rootAttributes, triggerAttributes }: MenuHeaderProps): SafeHtml;
 
 export { MenuHeader, type MenuHeaderProps };

package/dist/menu-header.js

@@ -1,3 +1,6 @@
-export { MenuHeader } from './chunk-OPCJRCYO.js';
+export { MenuHeader } from './chunk-NPPD2A6O.js';
+
+
+
 
 //# sourceMappingURL=menu-header.js.map

package/dist/menu-item.d.ts

@@ -1,5 +1,13 @@
 import { SafeHtml } from 'kerfjs';
 
+type MenuItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-action'?: never;
+    'data-item-id'?: never;
+    'data-has-icon'?: never;
+    'data-multiline'?: never;
+    'data-state'?: never;
+}>;
 interface MenuItemProps {
     label: string | SafeHtml;
     icon?: SafeHtml;
@@ -16,7 +24,8 @@ interface MenuItemProps {
     state?: string;
     disabled?: boolean;
     tabIndex?: number;
+    rootAttributes?: MenuItemRootAttributes;
 }
-declare function MenuItem({ label, icon, trailing, selected, action, itemId, className, style, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex }: MenuItemProps): SafeHtml;
+declare function MenuItem({ label, icon, trailing, selected, action, itemId, className, style, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, rootAttributes }: MenuItemProps): SafeHtml;
 
 export { MenuItem, type MenuItemProps };

package/dist/menu-item.js

@@ -1,3 +1,4 @@
-export { MenuItem } from './chunk-WY4CAEPG.js';
+export { MenuItem } from './chunk-S3TPM2LP.js';
+
 
 //# sourceMappingURL=menu-item.js.map

package/dist/resizable-region.d.ts

@@ -12,10 +12,12 @@ interface ResizableRegionProps {
     edge?: ResizableRegionEdge;
     collapsed?: boolean;
     transitioning?: boolean;
+    /** Decorative dormant content for the separator handle. Must not contain interactive descendants. */
+    handleIcon?: SafeHtml;
     children: SafeHtml | SafeHtml[];
 }
 declare const clampRegionSize: (size: number, min: number, max: number) => number;
 declare const resizeRegionFromPointer: (startSize: number, delta: number, edge: ResizableRegionEdge) => number;
-declare function ResizableRegion({ id, label, size, min, max, axis, edge, collapsed, transitioning, children }: ResizableRegionProps): SafeHtml;
+declare function ResizableRegion({ id, label, size, min, max, axis, edge, collapsed, transitioning, handleIcon, children }: ResizableRegionProps): SafeHtml;
 
 export { ResizableRegion, type ResizableRegionAxis, type ResizableRegionEdge, type ResizableRegionProps, clampRegionSize, resizeRegionFromPointer };

package/dist/resizable-region.js

@@ -1,3 +1,3 @@
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-3O7ZEUW2.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-M5JRI6MN.js';
 
 //# sourceMappingURL=resizable-region.js.map

package/dist/select.js

@@ -1,4 +1,4 @@
-export { Select } from './chunk-NHXX4JI5.js';
+export { Select } from './chunk-CTQKI2XL.js';
 
 
 //# sourceMappingURL=select.js.map

package/dist/styles/app-tab.css

@@ -0,0 +1,152 @@
+.kui-app-tab {
+  --kui-app-tab-color: var(--kui-color-neutral-on-quiet);
+  --kui-app-tab-hover-background: color-mix(
+    in srgb,
+    var(--kui-color-surface) 72%,
+    transparent
+  );
+  --kui-app-tab-selected-color: var(--kui-color-brand-on-quiet);
+  --kui-app-tab-selected-background: var(--kui-color-surface);
+  --kui-app-tab-selected-border: color-mix(
+    in srgb,
+    var(--kui-color-neutral-border-normal) 80%,
+    transparent
+  );
+  --kui-app-tab-drop-indicator: var(--kui-color-brand-border-normal);
+  position: relative;
+  display: flex;
+  width: max-content;
+  min-width: max-content;
+  height: 2.5rem;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--kui-app-tab-color);
+  background: transparent;
+  align-items: center;
+  flex: none;
+}
+.kui-app-tab:hover {
+  border-color: var(--kui-color-neutral-border-normal);
+  background: var(--kui-app-tab-hover-background);
+}
+.kui-app-tab[data-selected="true"] {
+  border-color: var(--kui-app-tab-selected-border);
+  color: var(--kui-app-tab-selected-color);
+  background: var(--kui-app-tab-selected-background);
+  box-shadow: var(--kui-shadow-s);
+}
+.kui-app-tab[data-tab-dragging="true"] {
+  opacity: 0.55;
+}
+.kui-app-tab[data-tab-drop-position]::after {
+  position: absolute;
+  z-index: 2;
+  top: 0.2rem;
+  bottom: 0.2rem;
+  width: 2px;
+  border-radius: var(--kui-radius-pill);
+  background: var(--kui-app-tab-drop-indicator);
+  content: "";
+  pointer-events: none;
+}
+.kui-app-tab[data-tab-drop-position="before"]::after {
+  inset-inline-start: calc(var(--kui-space-2xs) * -1);
+}
+.kui-app-tab[data-tab-drop-position="after"]::after {
+  inset-inline-end: calc(var(--kui-space-2xs) * -1);
+}
+.kui-app-tab__select {
+  display: flex;
+  min-width: 0;
+  height: 100%;
+  padding: 0 var(--kui-layout-item-padding, 0.5rem);
+  border: 0;
+  appearance: none;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  align-items: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+  text-align: start;
+}
+.kui-app-tab:has(.kui-app-tab__close) .kui-app-tab__select {
+  padding-inline-start: var(--kui-layout-item-padding, 0.5rem);
+}
+.kui-app-tab:has(.kui-app-tab__select:focus-visible) {
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+.kui-app-tab__select:focus-visible {
+  outline: none;
+}
+.kui-app-tab__close:focus-visible {
+  border-radius: var(--kui-radius-pill);
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+.kui-app-tab__select > svg {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+}
+.kui-app-tab__name {
+  overflow: hidden;
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kui-app-tab__trailing {
+  display: grid;
+  min-width: 1.275rem;
+  min-height: 1.275rem;
+  flex: none;
+  place-items: center;
+}
+.kui-app-tab__close {
+  display: grid;
+  width: 1.275rem;
+  height: 1.275rem;
+  margin-inline-start: var(--kui-space-xs);
+  padding: 0;
+  border: 0;
+  appearance: none;
+  color: var(--kui-color-neutral-on-quiet);
+  background: transparent;
+  cursor: pointer;
+  flex: none;
+  place-items: center;
+}
+.kui-app-tab__close:hover {
+  color: var(--kui-color-text);
+}
+.kui-app-tab__close-icon {
+  display: grid;
+  width: 0.6375rem;
+  height: 0.6375rem;
+  pointer-events: none;
+  place-items: center;
+}
+.kui-app-tab__close-icon > svg {
+  width: 100%;
+  height: 100%;
+}
+@media (hover: hover) and (pointer: fine) {
+  .kui-app-tab__close {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.12s ease;
+  }
+  .kui-app-tab:hover .kui-app-tab__close,
+  .kui-app-tab:focus-within .kui-app-tab__close {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kui-app-tab__close {
+    transition: none;
+  }
+}

package/dist/styles/dialog-header.css

@@ -0,0 +1,87 @@
+.kui-dialog-header {
+  --kui-dialog-header-border: transparent;
+  --kui-dialog-header-icon-background: var(--kui-color-brand-fill-quiet);
+  --kui-dialog-header-icon-foreground: var(--kui-color-brand-on-quiet);
+  --kui-dialog-header-title-inset: 2px;
+  display: grid;
+  min-height: 2.75rem;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-dialog-header-border);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  gap: 0;
+}
+
+.kui-dialog-header[data-has-icon="true"] {
+  --kui-dialog-header-title-inset: calc(
+    2px + 2.125rem + var(--kui-layout-item-gap, 0.5rem)
+  );
+}
+
+.kui-dialog-header__toolbar {
+  min-height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  padding: 0;
+}
+
+.kui-dialog-header__identity {
+  max-width: 100%;
+  border-color: transparent;
+  background: transparent;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+
+.kui-dialog-header__icon {
+  display: grid;
+  width: 2.125rem;
+  height: 2.125rem;
+  border-radius: var(--kui-radius-circle);
+  color: var(--kui-dialog-header-icon-foreground);
+  background: var(--kui-dialog-header-icon-background);
+  flex: none;
+  place-items: center;
+}
+
+.kui-dialog-header__icon svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.kui-dialog-header__copy {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.kui-dialog-header h2,
+.kui-dialog-header__summary {
+  margin: 0;
+}
+
+.kui-dialog-header h2 {
+  overflow: hidden;
+  color: var(--kui-color-text);
+  font-size: var(--kui-font-l);
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kui-dialog-header__summary {
+  min-width: 0;
+  margin-block-start: calc(-1 * var(--kui-layout-item-padding, 0.5rem));
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  padding-inline-start: var(--kui-dialog-header-title-inset);
+  color: var(--kui-color-text-quiet);
+}
+
+.kui-dialog-header__actions {
+  gap: 0;
+}
+
+.kui-dialog-header__actions:has(> .kui-toolbar-control-group) {
+  height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}

package/dist/styles/disclosure-arrow.css

@@ -0,0 +1,23 @@
+.kui-disclosure-arrow {
+  display: inline-flex;
+  width: var(--kui-disclosure-arrow-size, 1.125rem);
+  height: var(--kui-disclosure-arrow-size, 1.125rem);
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  transform: rotate(var(--_kui-disclosure-arrow-rotation, 0deg));
+  transform-origin: center;
+  transition: transform var(--kui-disclosure-arrow-duration, 0.2s) ease;
+}
+
+.kui-disclosure-arrow svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-disclosure-arrow {
+    transition-duration: 0s;
+  }
+}

package/dist/styles/empty-state.css

@@ -0,0 +1,47 @@
+.kui-empty-state {
+  --kui-empty-state-foreground: var(--kui-color-neutral-on-quiet);
+  --kui-empty-state-title: var(--kui-color-text);
+  display: grid;
+  width: min(
+    calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem))),
+    28rem
+  );
+  min-height: 12rem;
+  margin: auto;
+  padding: var(--kui-space-xl);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-empty-state-border, transparent);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--kui-empty-state-foreground);
+  background: var(--kui-empty-state-background, transparent);
+  place-items: center;
+  place-content: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+  text-align: center;
+}
+.kui-empty-state__icon {
+  display: grid;
+  min-width: 2rem;
+  min-height: 2rem;
+  margin-block-end: var(--kui-space-xs);
+  color: inherit;
+  place-items: center;
+}
+.kui-empty-state__icon svg {
+  width: 2rem;
+  height: 2rem;
+  stroke-width: 1.5;
+}
+.kui-empty-state strong {
+  color: var(--kui-empty-state-title);
+  font-size: var(--kui-font-l);
+  font-weight: 650;
+}
+.kui-empty-state > span {
+  max-width: 24rem;
+  font-size: var(--kui-font-s);
+  line-height: 1.45;
+}
+.kui-empty-state__action {
+  margin-block-start: var(--kui-space-xs);
+}