@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.111

package/dist/chunk-ZCDRLN3B.js

@@ -0,0 +1,138 @@
+import { Skeleton } from './chunk-CVD5IZGB.js';
+import { em } from './chunk-IQSRHXZR.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-tab-id",
+  "data-selected",
+  "data-tab-dragging",
+  "data-tab-drop-position",
+  "data-attention",
+  "data-drop-target",
+  "data-name-overflow",
+  "data-pinned"
+]);
+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 TabBarItem({
+  id,
+  name,
+  selected = false,
+  attention = false,
+  dropTarget = false,
+  pinned = false,
+  closable = true,
+  draggable = false,
+  leading,
+  trailing,
+  presentation = "pill",
+  size = "default",
+  labelMaxWidth,
+  nameOverflow = "ellipsis",
+  closeIcon,
+  selectAction = "select-tab",
+  closeAction = "close-tab",
+  className = "",
+  placeholder = false,
+  pending = false,
+  rootAttributes = {},
+  slot
+}) {
+  const dormant = placeholder || pending;
+  const named = pending && !placeholder;
+  const keyshortcuts = [
+    closable && !dormant ? "Delete Backspace" : "",
+    draggable && !dormant ? "Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" : ""
+  ].filter(Boolean).join(" ");
+  const extensionAttributes = filterDataAttributes(
+    rootAttributes,
+    PROTECTED_ROOT_DATA_ATTRIBUTES
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...extensionAttributes,
+      class: `kui-tab-bar-item ${className}`.trim(),
+      "data-component": "tab-bar-item",
+      "data-tab-id": id,
+      "data-selected": String(selected),
+      "data-attention": attention ? "true" : void 0,
+      "data-drop-target": dropTarget ? "true" : void 0,
+      "data-pinned": pinned ? "true" : void 0,
+      "data-name-overflow": nameOverflow,
+      "data-presentation": presentation,
+      "data-size": size,
+      "data-placeholder": placeholder ? "true" : void 0,
+      "data-pending": named ? "true" : void 0,
+      draggable: dormant ? "false" : draggable ? "true" : "false",
+      "aria-busy": dormant ? "true" : void 0,
+      style: labelMaxWidth === void 0 ? void 0 : `--kui-tab-bar-item-label-max-width:${labelMaxWidth}px`,
+      slot,
+      children: [
+        closable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabindex: "-1",
+            class: "kui-tab-bar-item__close",
+            "data-action": dormant ? void 0 : closeAction,
+            "data-tab-id": id,
+            disabled: dormant || void 0,
+            "aria-label": `Close ${name}`,
+            title: `Close ${name}`,
+            children: /* @__PURE__ */ jsx("span", { class: "kui-tab-bar-item__close-icon", "aria-hidden": "true", children: closeIcon ?? /* @__PURE__ */ jsx(CloseIcon, {}) })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: "kui-tab-bar-item__select",
+            role: "tab",
+            "aria-selected": String(selected),
+            "aria-label": presentation === "icon-only" || named ? name : void 0,
+            "aria-keyshortcuts": keyshortcuts || void 0,
+            "data-action": placeholder ? void 0 : selectAction,
+            "data-tab-id": id,
+            disabled: placeholder || void 0,
+            tabindex: !placeholder && selected ? "0" : "-1",
+            children: [
+              leading,
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  class: "kui-tab-bar-item__name",
+                  "aria-hidden": presentation === "icon-only" ? "true" : void 0,
+                  children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(7) }) : name
+                }
+              ),
+              closable || trailing ? /* @__PURE__ */ jsx("span", { class: "kui-tab-bar-item__trailing", children: trailing }) : void 0
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { TabBarItem };
+
+//# sourceMappingURL=chunk-ZCDRLN3B.js.map

package/dist/chunk-ZCDRLN3B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/tab-bar-item/tab-bar-item.tsx"],"names":[],"mappings":"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","file":"chunk-ZCDRLN3B.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { em } from '../../../shared/styles/css-values.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.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  'data-attention',\n  'data-drop-target',\n  'data-name-overflow',\n  'data-pinned',\n]);\n\ntype TabBarItemRootAttributes = 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    'data-attention'?: never;\n    'data-drop-target'?: never;\n    'data-name-overflow'?: never;\n    'data-pinned'?: never;\n  }\n>;\n\nexport type TabBarItemPresentation = 'pill' | 'segmented' | 'icon-only';\nexport type TabBarItemSize = 'default' | 'compact';\nexport type TabBarItemNameOverflow = 'ellipsis' | 'visible';\n\nexport interface TabBarItemProps {\n  id: string;\n  name: string;\n  selected?: boolean;\n  /** Emphasize the visible tab name with the attention color token. */\n  attention?: boolean;\n  /** Highlight this tab as the target of a drag over its content. */\n  dropTarget?: boolean;\n  /** Keep the leading tab visible within its TabBar tablist while peers scroll. */\n  pinned?: boolean;\n  closable?: boolean;\n  draggable?: boolean;\n  leading?: KerfUiContent;\n  trailing?: KerfUiContent;\n  /** Visual treatment within a TabBar. Icon-only tabs retain `name` as their accessible name. */\n  presentation?: TabBarItemPresentation;\n  /** Compact tabs use the 32px application-rail height. */\n  size?: TabBarItemSize;\n  /** Maximum visible label width in CSS pixels before ellipsis. */\n  labelMaxWidth?: number;\n  /** Keep the full name visible for an inline loading treatment. */\n  nameOverflow?: TabBarItemNameOverflow;\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  /** Render as an unanimated loading skeleton, disabling select/close and dragging. */\n  placeholder?: boolean;\n  /**\n   * Named and still opening: the tab is known but its content is loading.\n   * Keeps `name` visible in the quiet text color and as the tab's accessible\n   * name, shows `trailing` (for example a `LoadingSpinner`), and marks the\n   * tab `aria-busy`. Unlike `placeholder` it stays selectable — the\n   * application shows placeholder content in its panel until loading\n   * completes — while close and dragging stay disabled. Same pill geometry\n   * as the live tab, so swapping it in place does not shift the bar.\n   * `placeholder` wins when both are set.\n   */\n  pending?: boolean;\n  rootAttributes?: TabBarItemRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nfunction CloseIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2.25\"\n      stroke-linecap=\"round\"\n    >\n      <path d=\"m7 7 10 10\" />\n      <path d=\"M17 7 7 17\" />\n    </svg>\n  );\n}\n\nexport function TabBarItem({\n  id,\n  name,\n  selected = false,\n  attention = false,\n  dropTarget = false,\n  pinned = false,\n  closable = true,\n  draggable = false,\n  leading,\n  trailing,\n  presentation = 'pill',\n  size = 'default',\n  labelMaxWidth,\n  nameOverflow = 'ellipsis',\n  closeIcon,\n  selectAction = 'select-tab',\n  closeAction = 'close-tab',\n  className = '',\n  placeholder = false,\n  pending = false,\n  rootAttributes = {},\n  slot,\n}: TabBarItemProps) {\n  // Both loading states disable close and dragging; a `placeholder` (unknown\n  // tab) is also unselectable and hides its name, while a `pending` (known,\n  // still opening) tab stays selectable so its panel can show placeholders.\n  const dormant = placeholder || pending;\n  const named = pending && !placeholder;\n  const keyshortcuts = [\n    closable && !dormant ? 'Delete Backspace' : '',\n    draggable && !dormant ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  return (\n    <div\n      {...extensionAttributes}\n      class={`kui-tab-bar-item ${className}`.trim()}\n      data-component=\"tab-bar-item\"\n      data-tab-id={id}\n      data-selected={String(selected)}\n      data-attention={attention ? 'true' : undefined}\n      data-drop-target={dropTarget ? 'true' : undefined}\n      data-pinned={pinned ? 'true' : undefined}\n      data-name-overflow={nameOverflow}\n      data-presentation={presentation}\n      data-size={size}\n      data-placeholder={placeholder ? 'true' : undefined}\n      data-pending={named ? 'true' : undefined}\n      draggable={dormant ? 'false' : draggable ? 'true' : 'false'}\n      aria-busy={dormant ? 'true' : undefined}\n      style={\n        labelMaxWidth === undefined\n          ? undefined\n          : `--kui-tab-bar-item-label-max-width:${labelMaxWidth}px`\n      }\n      slot={slot}\n    >\n      {closable && (\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"kui-tab-bar-item__close\"\n          data-action={dormant ? undefined : closeAction}\n          data-tab-id={id}\n          disabled={dormant || undefined}\n          aria-label={`Close ${name}`}\n          title={`Close ${name}`}\n        >\n          <span class=\"kui-tab-bar-item__close-icon\" aria-hidden=\"true\">\n            {closeIcon ?? <CloseIcon />}\n          </span>\n        </button>\n      )}\n      <button\n        type=\"button\"\n        class=\"kui-tab-bar-item__select\"\n        role=\"tab\"\n        aria-selected={String(selected)}\n        aria-label={presentation === 'icon-only' || named ? name : undefined}\n        aria-keyshortcuts={keyshortcuts || undefined}\n        data-action={placeholder ? undefined : selectAction}\n        data-tab-id={id}\n        disabled={placeholder || undefined}\n        tabindex={!placeholder && selected ? '0' : '-1'}\n      >\n        {leading}\n        <span\n          class=\"kui-tab-bar-item__name\"\n          aria-hidden={presentation === 'icon-only' ? 'true' : undefined}\n        >\n          {placeholder ? <Skeleton width={em(7)} /> : name}\n        </span>\n        {closable || trailing ? (\n          <span class=\"kui-tab-bar-item__trailing\">{trailing}</span>\n        ) : undefined}\n      </button>\n    </div>\n  );\n}\n"]}

package/dist/chunk-ZKKO4MHC.js

@@ -0,0 +1,25 @@
+// src/components/feedback/corner-status/wiring/wire-corner-status.ts
+var HOST = '[data-component="corner-status"][popover]';
+function open(host) {
+  if (!(host instanceof HTMLElement) || !host.isConnected || typeof host.showPopover !== "function" || host.matches(":popover-open"))
+    return;
+  host.showPopover();
+}
+function openWithin(node) {
+  if (!(node instanceof Element)) return;
+  if (node.matches(HOST)) open(node);
+  for (const host of node.querySelectorAll(HOST)) open(host);
+}
+function wireCornerStatus(root) {
+  openWithin(root.nodeType === 9 ? root.documentElement : root);
+  const observer = new MutationObserver((records) => {
+    for (const record of records)
+      for (const node of record.addedNodes) openWithin(node);
+  });
+  observer.observe(root, { childList: true, subtree: true });
+  return () => observer.disconnect();
+}
+
+export { wireCornerStatus };
+
+//# sourceMappingURL=chunk-ZKKO4MHC.js.map

package/dist/chunk-ZKKO4MHC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/corner-status/wiring/wire-corner-status.ts"],"names":[],"mappings":";AAEA,IAAM,IAAA,GAAO,2CAAA;AAEb,SAAS,KAAK,IAAA,EAAe;AAC3B,EAAA,IACE,EAAE,IAAA,YAAgB,WAAA,CAAA,IAClB,CAAC,IAAA,CAAK,WAAA,IACN,OAAO,IAAA,CAAK,WAAA,KAAgB,UAAA,IAC5B,IAAA,CAAK,OAAA,CAAQ,eAAe,CAAA;AAE5B,IAAA;AACF,EAAA,IAAA,CAAK,WAAA,EAAY;AACnB;AAEA,SAAS,WAAW,IAAA,EAAY;AAC9B,EAAA,IAAI,EAAE,gBAAgB,OAAA,CAAA,EAAU;AAChC,EAAA,IAAI,IAAA,CAAK,OAAA,CAAQ,IAAI,CAAA,OAAQ,IAAI,CAAA;AACjC,EAAA,KAAA,MAAW,QAAQ,IAAA,CAAK,gBAAA,CAAiB,IAAI,CAAA,OAAQ,IAAI,CAAA;AAC3D;AASO,SAAS,iBAAiB,IAAA,EAAwB;AACvD,EAAA,UAAA,CAAW,IAAA,CAAK,QAAA,KAAa,CAAA,GAAK,IAAA,CAAkB,kBAAkB,IAAI,CAAA;AAC1E,EAAA,MAAM,QAAA,GAAW,IAAI,gBAAA,CAAiB,CAAC,OAAA,KAAY;AACjD,IAAA,KAAA,MAAW,MAAA,IAAU,OAAA;AACnB,MAAA,KAAA,MAAW,IAAA,IAAQ,MAAA,CAAO,UAAA,EAAY,UAAA,CAAW,IAAI,CAAA;AAAA,EACzD,CAAC,CAAA;AACD,EAAA,QAAA,CAAS,QAAQ,IAAA,EAAM,EAAE,WAAW,IAAA,EAAM,OAAA,EAAS,MAAM,CAAA;AACzD,EAAA,OAAO,MAAM,SAAS,UAAA,EAAW;AACnC","file":"chunk-ZKKO4MHC.js","sourcesContent":["type Root = HTMLElement | Document;\n\nconst HOST = '[data-component=\"corner-status\"][popover]';\n\nfunction open(host: Element) {\n  if (\n    !(host instanceof HTMLElement) ||\n    !host.isConnected ||\n    typeof host.showPopover !== 'function' ||\n    host.matches(':popover-open')\n  )\n    return;\n  host.showPopover();\n}\n\nfunction openWithin(node: Node) {\n  if (!(node instanceof Element)) return;\n  if (node.matches(HOST)) open(node);\n  for (const host of node.querySelectorAll(HOST)) open(host);\n}\n\n/**\n * Open every overlay `CornerStatus` below root in the top layer, now and as\n * renders insert them. Opening never moves focus, and a manual popover has no\n * light dismiss or Escape, so the status stays until the application removes\n * it. Where the Popover API is missing the host stays a fixed-position\n * element. Dispose with the owning application.\n */\nexport function wireCornerStatus(root: Root): () => void {\n  openWithin(root.nodeType === 9 ? (root as Document).documentElement : root);\n  const observer = new MutationObserver((records) => {\n    for (const record of records)\n      for (const node of record.addedNodes) openWithin(node);\n  });\n  observer.observe(root, { childList: true, subtree: true });\n  return () => observer.disconnect();\n}\n"]}

package/dist/chunk-ZN7KUMPY.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+// src/components/actions/toolbar/toolbar.tsx
+var claim = (edges, side) => edges?.includes(side) ? "true" : void 0;
+function Toolbar({
+  id,
+  leading,
+  center,
+  trailing,
+  label,
+  position = "header",
+  density = "default",
+  dividerSides = "",
+  centerAlign = "center",
+  responsive = "none",
+  responsiveAt = "narrow",
+  safeAreaEdges,
+  className = "",
+  slot
+}) {
+  const attributes = {
+    id,
+    class: `kui-toolbar ${className}`.trim(),
+    "data-component": "toolbar",
+    "data-density": density === "compact" ? "compact" : void 0,
+    "divider-sides": dividerSides || void 0,
+    "data-has-center": String(Boolean(center)),
+    "data-center-align": centerAlign,
+    "data-responsive": responsive,
+    "data-responsive-at": responsiveAt,
+    "data-safe-area-block-start": claim(safeAreaEdges, "block-start"),
+    "data-safe-area-block-end": claim(safeAreaEdges, "block-end"),
+    "data-safe-area-inline-start": claim(safeAreaEdges, "inline-start"),
+    "data-safe-area-inline-end": claim(safeAreaEdges, "inline-end"),
+    "aria-label": label,
+    slot
+  };
+  const zones = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { class: "kui-toolbar__leading", children: leading }),
+    /* @__PURE__ */ jsx("div", { class: "kui-toolbar__center", children: center }),
+    /* @__PURE__ */ jsx("div", { class: "kui-toolbar__trailing", children: trailing })
+  ] });
+  return position === "footer" ? /* @__PURE__ */ jsx("footer", { ...attributes, children: zones }) : /* @__PURE__ */ jsx("header", { ...attributes, children: zones });
+}
+
+export { Toolbar };
+
+//# sourceMappingURL=chunk-ZN7KUMPY.js.map

package/dist/chunk-ZN7KUMPY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/actions/toolbar/toolbar.tsx"],"names":[],"mappings":";;;AAyFA,IAAM,KAAA,GAAQ,CACZ,KAAA,EACA,IAAA,KACI,OAAO,QAAA,CAAS,IAAI,IAAI,MAAA,GAAS,MAAA;AAEhC,SAAS,OAAA,CAAQ;AAAA,EACtB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,QAAA;AAAA,EACX,OAAA,GAAU,SAAA;AAAA,EACV,YAAA,GAAe,EAAA;AAAA,EACf,WAAA,GAAc,QAAA;AAAA,EACd,UAAA,GAAa,MAAA;AAAA,EACb,YAAA,GAAe,QAAA;AAAA,EACf,aAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAiB;AACf,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,EAAA;AAAA,IACA,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,IACvC,gBAAA,EAAkB,SAAA;AAAA,IAClB,cAAA,EAAgB,OAAA,KAAY,SAAA,GAAY,SAAA,GAAY,MAAA;AAAA,IACpD,iBAAiB,YAAA,IAAgB,MAAA;AAAA,IACjC,iBAAA,EAAmB,MAAA,CAAO,OAAA,CAAQ,MAAM,CAAC,CAAA;AAAA,IACzC,mBAAA,EAAqB,WAAA;AAAA,IACrB,iBAAA,EAAmB,UAAA;AAAA,IACnB,oBAAA,EAAsB,YAAA;AAAA,IACtB,4BAAA,EAA8B,KAAA,CAAM,aAAA,EAAe,aAAa,CAAA;AAAA,IAChE,0BAAA,EAA4B,KAAA,CAAM,aAAA,EAAe,WAAW,CAAA;AAAA,IAC5D,6BAAA,EAA+B,KAAA,CAAM,aAAA,EAAe,cAAc,CAAA;AAAA,IAClE,2BAAA,EAA6B,KAAA,CAAM,aAAA,EAAe,YAAY,CAAA;AAAA,IAC9D,YAAA,EAAc,KAAA;AAAA,IACd;AAAA,GACF;AACA,EAAA,MAAM,wBACJ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,oBAC3C,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,qBAAA,EAAuB,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,oBACzC,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,QAAA,EAAS;AAAA,GAAA,EAC/C,CAAA;AAEF,EAAA,OAAO,QAAA,KAAa,QAAA,mBAClB,GAAA,CAAC,QAAA,EAAA,EAAQ,GAAG,UAAA,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA,mBAE/B,GAAA,CAAC,QAAA,EAAA,EAAQ,GAAG,UAAA,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAEnC","file":"chunk-ZN7KUMPY.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\nimport type { PaneSeparatorSide } from '../../layout/pane/pane.js';\n\nexport type ToolbarPosition = 'header' | 'footer';\n/** Control-band density: `default` (60px with 44px groups) or `compact`. */\nexport type ToolbarDensity = 'default' | 'compact';\n\nexport interface ToolbarProps {\n  /**\n   * The toolbar's id, so app code can address it: name it as a scrolling\n   * List's chrome in `wireScrollDividers({ targets })`, or find it in tests.\n   */\n  id?: string;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n  label?: string;\n  /** Use footer semantics for a bottom toolbar; defaults to header. */\n  position?: ToolbarPosition;\n  /**\n   * `compact` sizes the toolbar to a 34px control band with 3px block\n   * insets — 40px tall — for a header embedded in a panel or card. Fill it\n   * with `ToolbarControlGroup size=\"compact\"` groups; inline insets and the\n   * gap between zones are unchanged. Composites that render a Toolbar from a\n   * `ToolbarConfig` (Workbench, CollapsiblePanel, NavStack, SplitView) forward\n   * it and size the groups they compose to match. Defaults to `default`.\n   */\n  density?: ToolbarDensity;\n  /**\n   * Physical divider edges in canonical top/right/bottom/left order, drawn\n   * always. Defaults to none: a toolbar pinned over or under scrolling content\n   * gets its divider from the scroll state instead — a `Pane` draws the line\n   * between its chrome and content while content is scrolled away beneath it,\n   * and `wireScrollDividers` `targets` can name a toolbar as chrome, which\n   * then draws its facing side the same way.\n   */\n  dividerSides?: Sides;\n  /** `balanced` gives both side zones equal tracks, centering the middle zone on the toolbar even if only one side has controls. */\n  centerAlign?: 'center' | 'stretch' | 'balanced';\n  /**\n   * Component-owned responsive layout; applications choose the policy rather\n   * than restyling toolbar internals. Under every policy the trailing zone\n   * wraps its groups instead of clipping an action, and the center zone keeps\n   * its whole content width: when the zones do not fit one row, the leading\n   * title truncates with an ellipsis rather than the center overlapping it.\n   * - `none` keeps one row; the leading identity truncates first.\n   * - `stack` stacks the zones at `responsiveAt`, wrapping stacked control\n   *   groups onto further rows.\n   * - `wrap` keeps one row while every zone fits at its natural width, and\n   *   otherwise moves the trailing zone below a whole leading identity.\n   * - `center-priority` gives an expanded center control the full row.\n   * - `trailing-priority` moves an expanded trailing control to a full row\n   *   below the leading identity at `responsiveAt`.\n   */\n  responsive?:\n    'none' | 'stack' | 'wrap' | 'center-priority' | 'trailing-priority';\n  /** Container width at which `stack` or `trailing-priority` activates. */\n  responsiveAt?: 'compact' | 'narrow';\n  /**\n   * Screen edges this toolbar claims for device safe-area compensation, for an\n   * app bar or bottom bar that sits directly at a screen edge rather than in a\n   * Pane header or footer. Each listed side pads by the inset its surrounding\n   * layout reports through `--kui-edge-inset-*`, or the full device inset when\n   * nothing routes that edge, while the toolbar's box and dividers paint\n   * through. Omitted, the toolbar pads only the inline edges an owner such as\n   * a Pane header hands it, and never a block edge.\n   */\n  safeAreaEdges?: readonly PaneSeparatorSide[];\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A toolbar's configuration, apart from its content: the props a composite\n * that renders a `Toolbar` for the app (a Workbench or CollapsiblePanel\n * toolbar) forwards, so the app configures that toolbar instead of styling it.\n */\nexport type ToolbarConfig = Pick<\n  ToolbarProps,\n  | 'density'\n  | 'dividerSides'\n  | 'centerAlign'\n  | 'responsive'\n  | 'responsiveAt'\n  | 'safeAreaEdges'\n>;\n\nconst claim = (\n  edges: readonly PaneSeparatorSide[] | undefined,\n  side: PaneSeparatorSide,\n) => (edges?.includes(side) ? 'true' : undefined);\n\nexport function Toolbar({\n  id,\n  leading,\n  center,\n  trailing,\n  label,\n  position = 'header',\n  density = 'default',\n  dividerSides = '',\n  centerAlign = 'center',\n  responsive = 'none',\n  responsiveAt = 'narrow',\n  safeAreaEdges,\n  className = '',\n  slot,\n}: ToolbarProps) {\n  const attributes = {\n    id,\n    class: `kui-toolbar ${className}`.trim(),\n    'data-component': 'toolbar',\n    'data-density': density === 'compact' ? 'compact' : undefined,\n    'divider-sides': dividerSides || undefined,\n    'data-has-center': String(Boolean(center)),\n    'data-center-align': centerAlign,\n    'data-responsive': responsive,\n    'data-responsive-at': responsiveAt,\n    'data-safe-area-block-start': claim(safeAreaEdges, 'block-start'),\n    'data-safe-area-block-end': claim(safeAreaEdges, 'block-end'),\n    'data-safe-area-inline-start': claim(safeAreaEdges, 'inline-start'),\n    'data-safe-area-inline-end': claim(safeAreaEdges, 'inline-end'),\n    'aria-label': label,\n    slot,\n  };\n  const zones = (\n    <>\n      <div class=\"kui-toolbar__leading\">{leading}</div>\n      <div class=\"kui-toolbar__center\">{center}</div>\n      <div class=\"kui-toolbar__trailing\">{trailing}</div>\n    </>\n  );\n  return position === 'footer' ? (\n    <footer {...attributes}>{zones}</footer>\n  ) : (\n    <header {...attributes}>{zones}</header>\n  );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\n"]}

package/dist/chunk-ZNROKDSZ.js

@@ -0,0 +1,54 @@
+import { jsx, Fragment, jsxs } from 'kerfjs/jsx-runtime';
+
+// src/shared/content/list-icon-tile.ts
+var tileTones = [
+  "neutral",
+  "brand",
+  "success",
+  "warning",
+  "danger"
+];
+var unsafeColor = /[;{}<>"'\\]|\p{Cc}/u;
+function colorDeclaration(value, property) {
+  const color = value.trim();
+  if (!color || unsafeColor.test(color))
+    throw new TypeError(`iconTile ${property} requires one CSS color value.`);
+  return color;
+}
+function listIconTilePresentation(tile, component) {
+  if (tile === void 0)
+    return { tile: void 0, tone: void 0, style: void 0 };
+  if (typeof tile === "string") {
+    if (!tileTones.includes(tile))
+      throw new RangeError(`iconTile received unknown tone ${String(tile)}.`);
+    return { tile: "tone", tone: tile, style: void 0 };
+  }
+  const declarations = [
+    `--_kui-${component}-icon-tile-fill: ${colorDeclaration(tile.color, "color")}`
+  ];
+  if (tile.foreground !== void 0)
+    declarations.push(
+      `--_kui-${component}-icon-tile-foreground: ${colorDeclaration(tile.foreground, "foreground")}`
+    );
+  return { tile: "color", tone: void 0, style: declarations.join("; ") };
+}
+
+// src/shared/dom/draggable.ts
+function nativeDraggable(draggable, placeholder) {
+  if (draggable === void 0) return void 0;
+  return draggable && !placeholder ? "true" : "false";
+}
+var CAMEL_BOUNDARY = /(?<=[\p{Ll}\p{N}])(?=\p{Lu})|(?<=\p{Lu})(?=\p{Lu}\p{Ll})/u;
+function withWordBreaks(label) {
+  if (typeof label !== "string") return label;
+  const parts = label.split(CAMEL_BOUNDARY);
+  if (parts.length < 2) return label;
+  return /* @__PURE__ */ jsx(Fragment, { children: parts.map((part, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    index > 0 ? /* @__PURE__ */ jsx("wbr", {}) : null,
+    part
+  ] })) });
+}
+
+export { listIconTilePresentation, nativeDraggable, withWordBreaks };
+
+//# sourceMappingURL=chunk-ZNROKDSZ.js.map

package/dist/chunk-ZNROKDSZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/content/list-icon-tile.ts","../src/shared/dom/draggable.ts","../src/shared/text/word-breaks.tsx"],"names":[],"mappings":";;;AAoBA,IAAM,SAAA,GAAyC;AAAA,EAC7C,SAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA;AACA,IAAM,WAAA,GAAc,qBAAA;AAEpB,SAAS,gBAAA,CAAiB,OAAe,QAAA,EAA0B;AACjE,EAAA,MAAM,KAAA,GAAQ,MAAM,IAAA,EAAK;AACzB,EAAA,IAAI,CAAC,KAAA,IAAS,WAAA,CAAY,IAAA,CAAK,KAAK,CAAA;AAClC,IAAA,MAAM,IAAI,SAAA,CAAU,CAAA,SAAA,EAAY,QAAQ,CAAA,8BAAA,CAAgC,CAAA;AAC1E,EAAA,OAAO,KAAA;AACT;AAUO,SAAS,wBAAA,CACd,MACA,SAAA,EAC0B;AAC1B,EAAA,IAAI,IAAA,KAAS,MAAA;AACX,IAAA,OAAO,EAAE,IAAA,EAAM,MAAA,EAAW,IAAA,EAAM,MAAA,EAAW,OAAO,MAAA,EAAU;AAC9D,EAAA,IAAI,OAAO,SAAS,QAAA,EAAU;AAC5B,IAAA,IAAI,CAAC,SAAA,CAAU,QAAA,CAAS,IAAI,CAAA;AAC1B,MAAA,MAAM,IAAI,UAAA,CAAW,CAAA,+BAAA,EAAkC,MAAA,CAAO,IAAI,CAAC,CAAA,CAAA,CAAG,CAAA;AACxE,IAAA,OAAO,EAAE,IAAA,EAAM,MAAA,EAAQ,IAAA,EAAM,IAAA,EAAM,OAAO,MAAA,EAAU;AAAA,EACtD;AACA,EAAA,MAAM,YAAA,GAAe;AAAA,IACnB,UAAU,SAAS,CAAA,iBAAA,EAAoB,iBAAiB,IAAA,CAAK,KAAA,EAAO,OAAO,CAAC,CAAA;AAAA,GAC9E;AACA,EAAA,IAAI,KAAK,UAAA,KAAe,MAAA;AACtB,IAAA,YAAA,CAAa,IAAA;AAAA,MACX,UAAU,SAAS,CAAA,uBAAA,EAA0B,iBAAiB,IAAA,CAAK,UAAA,EAAY,YAAY,CAAC,CAAA;AAAA,KAC9F;AACF,EAAA,OAAO,EAAE,MAAM,OAAA,EAAS,IAAA,EAAM,QAAW,KAAA,EAAO,YAAA,CAAa,IAAA,CAAK,IAAI,CAAA,EAAE;AAC1E;;;AC3DO,SAAS,eAAA,CACd,WACA,WAAA,EAC8B;AAC9B,EAAA,IAAI,SAAA,KAAc,QAAW,OAAO,MAAA;AACpC,EAAA,OAAO,SAAA,IAAa,CAAC,WAAA,GAAc,MAAA,GAAS,OAAA;AAC9C;ACNA,IAAM,cAAA,GACJ,2DAAA;AAQK,SAAS,eAAe,KAAA,EAA6C;AAC1E,EAAA,IAAI,OAAO,KAAA,KAAU,QAAA,EAAU,OAAO,KAAA;AACtC,EAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,KAAA,CAAM,cAAc,CAAA;AACxC,EAAA,IAAI,KAAA,CAAM,MAAA,GAAS,CAAA,EAAG,OAAO,KAAA;AAC7B,EAAA,uCAEK,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,0BAChB,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,KAAA,GAAQ,CAAA,mBAAI,GAAA,CAAC,KAAA,EAAA,EAAI,CAAA,GAAK,IAAA;AAAA,IACtB;AAAA,GAAA,EACH,CACD,CAAA,EACH,CAAA;AAEJ","file":"chunk-ZNROKDSZ.js","sourcesContent":["import type { CssColor, CssForegroundColor } from '../styles/css-values.js';\n\n/**\n * Quiet tile palette for a list row's leading icon: the same fill, border, and\n * foreground roles as `ToolbarControlGroup`'s `tileTone`.\n */\nexport type ListIconTileTone =\n  'neutral' | 'brand' | 'success' | 'warning' | 'danger';\n\n/** A list row's leading icon tile filled with an application-chosen color. */\nexport interface ListIconTileColor {\n  /** The tile fill: `uiColor()`, `colorVar()`, or `fillColor()` for an app color such as `#e5484d`. */\n  color: CssColor;\n  /** The glyph color over the fill. Defaults to black or white, whichever contrasts with `color`. */\n  foreground?: CssForegroundColor;\n}\n\n/** A filled leading icon tile: a quiet tone preset or an application color. */\nexport type ListIconTile = ListIconTileTone | ListIconTileColor;\n\nconst tileTones: readonly ListIconTileTone[] = [\n  'neutral',\n  'brand',\n  'success',\n  'warning',\n  'danger',\n];\nconst unsafeColor = /[;{}<>\"'\\\\]|\\p{Cc}/u;\n\nfunction colorDeclaration(value: string, property: string): string {\n  const color = value.trim();\n  if (!color || unsafeColor.test(color))\n    throw new TypeError(`iconTile ${property} requires one CSS color value.`);\n  return color;\n}\n\n/** Root data attributes and the icon slot's custom properties for a tile. */\nexport interface ListIconTilePresentation {\n  tile: 'tone' | 'color' | undefined;\n  tone: ListIconTileTone | undefined;\n  style: string | undefined;\n}\n\n/** Validate a row's `iconTile` and resolve how its icon slot renders it. */\nexport function listIconTilePresentation(\n  tile: ListIconTile | undefined,\n  component: 'list-item' | 'list-action-row',\n): ListIconTilePresentation {\n  if (tile === undefined)\n    return { tile: undefined, tone: undefined, style: undefined };\n  if (typeof tile === 'string') {\n    if (!tileTones.includes(tile))\n      throw new RangeError(`iconTile received unknown tone ${String(tile)}.`);\n    return { tile: 'tone', tone: tile, style: undefined };\n  }\n  const declarations = [\n    `--_kui-${component}-icon-tile-fill: ${colorDeclaration(tile.color, 'color')}`,\n  ];\n  if (tile.foreground !== undefined)\n    declarations.push(\n      `--_kui-${component}-icon-tile-foreground: ${colorDeclaration(tile.foreground, 'foreground')}`,\n    );\n  return { tile: 'color', tone: undefined, style: declarations.join('; ') };\n}\n","/**\n * The native `draggable` attribute value for a component root: omitted unless\n * the author set it, and never `\"true\"` on an inert loading placeholder.\n */\nexport function nativeDraggable(\n  draggable: boolean | undefined,\n  placeholder: boolean,\n): 'true' | 'false' | undefined {\n  if (draggable === undefined) return undefined;\n  return draggable && !placeholder ? 'true' : 'false';\n}\n","import type { SafeHtml } from 'kerfjs';\n\n// A lowercase letter or digit followed by an uppercase letter (\"ticketBoard\"),\n// or an acronym followed by a capitalized word (\"HTMLParser\" → \"HTML|Parser\").\nconst CAMEL_BOUNDARY =\n  /(?<=[\\p{Ll}\\p{N}])(?=\\p{Lu})|(?<=\\p{Lu})(?=\\p{Lu}\\p{Ll})/u;\n\n/**\n * A label with line-break opportunities (`<wbr>`) at camelCase boundaries, so a\n * wrapping row breaks a long identifier-like name (`QuickTicketComposer`) at a\n * word boundary instead of mid-word. The text, and so the accessible name, is\n * unchanged; a `SafeHtml` label is returned as given.\n */\nexport function withWordBreaks(label: string | SafeHtml): string | SafeHtml {\n  if (typeof label !== 'string') return label;\n  const parts = label.split(CAMEL_BOUNDARY);\n  if (parts.length < 2) return label;\n  return (\n    <>\n      {parts.map((part, index) => (\n        <>\n          {index > 0 ? <wbr /> : null}\n          {part}\n        </>\n      ))}\n    </>\n  );\n}\n"]}

package/dist/chunk-ZX2QQJXD.js

@@ -0,0 +1,249 @@
+import { summarizeSelection } from './chunk-TUID42UE.js';
+import { PopupCaretGlyph } from './chunk-AYPGXR2E.js';
+import { Skeleton } from './chunk-CVD5IZGB.js';
+import { Badge } from './chunk-RMWNO6BA.js';
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+import { em } from './chunk-IQSRHXZR.js';
+import { Check } from 'lucide';
+import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
+
+function ChoiceIcon({
+  choice,
+  icon,
+  selected = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      class: `kui-select__icon${selected ? " kui-select__icon--selected" : ""}`,
+      style: choice.color ? `color:${choice.color}` : void 0,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        LucideIcon,
+        {
+          icon,
+          name: choice.iconName ?? choice.label.toLowerCase().replaceAll(" ", "-")
+        }
+      )
+    }
+  );
+}
+function Caret() {
+  return /* @__PURE__ */ jsx("span", { class: "kui-select__caret", "aria-hidden": "true", children: /* @__PURE__ */ jsx(PopupCaretGlyph, {}) });
+}
+function Select(props) {
+  const {
+    name,
+    label,
+    ariaLabel,
+    choices,
+    className = "",
+    placeholderText,
+    hint,
+    disabled = false,
+    fitMenu = false,
+    placeholder = false,
+    presentation = "form",
+    size = "default",
+    triggerWidth,
+    maxTriggerWidth,
+    minTriggerWidth,
+    caret = true,
+    focusRingOwner = "select",
+    focusRingInset = false,
+    labelMaxWidth,
+    slot
+  } = props;
+  const multiple = props.multiple === true;
+  const values = props.multiple ? props.value : [props.value];
+  const renderSelected = props.multiple ? void 0 : props.renderSelected;
+  const selectedPresentation = props.selectedPresentation ?? "label";
+  const iconTrigger = props.multiple && props.selectedPresentation === "icon-only";
+  const accessibleName = label || ariaLabel;
+  const style = [
+    labelMaxWidth === void 0 ? void 0 : `--kui-select-label-max-width:${labelMaxWidth}px`,
+    maxTriggerWidth === void 0 ? void 0 : `--_kui-select-trigger-max:${maxTriggerWidth}`,
+    minTriggerWidth === void 0 ? void 0 : `--_kui-select-trigger-min:${minTriggerWidth}`
+  ].filter(Boolean).join(";") || void 0;
+  const rootData = {
+    "data-component": "select",
+    "data-presentation": presentation,
+    "data-size": size,
+    "data-trigger-width": triggerWidth,
+    "data-trigger-max": maxTriggerWidth === void 0 ? void 0 : "",
+    "data-trigger-min": minTriggerWidth === void 0 ? void 0 : "",
+    "data-caret": caret ? void 0 : "false",
+    "data-selected-presentation": selectedPresentation,
+    "data-focus-ring-owner": focusRingOwner,
+    "data-focus-ring-inset": focusRingInset ? "true" : void 0
+  };
+  if (placeholder) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        class: `kui-select kui-select--placeholder ${className}`.trim(),
+        ...rootData,
+        "data-placeholder": "true",
+        "aria-busy": "true",
+        style,
+        slot,
+        children: [
+          label && /* @__PURE__ */ jsx("span", { class: "kui-select__label", children: label }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              class: "kui-select__placeholder-box",
+              "aria-label": ariaLabel,
+              role: "img",
+              children: [
+                /* @__PURE__ */ jsx(Skeleton, { width: em(10) }),
+                caret ? /* @__PURE__ */ jsx(Caret, {}) : null
+              ]
+            }
+          ),
+          hint && /* @__PURE__ */ jsx("span", { class: "kui-select__hint", children: hint })
+        ]
+      }
+    );
+  }
+  const enabledChosen = choices.filter(
+    (choice) => !choice.disabled && values.includes(choice.value)
+  );
+  const selected = multiple ? void 0 : enabledChosen[0];
+  const summary = multiple ? summarizeSelection(enabledChosen.map((choice) => choice.label)) : "";
+  const triggerName = iconTrigger && summary ? `${accessibleName}: ${summary}` : accessibleName;
+  const valueText = multiple ? iconTrigger ? "" : summary : selected?.label ?? "";
+  const option = (choice, index) => {
+    const chosen = !choice.disabled && values.includes(choice.value);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      choice.separatorBefore && index > 0 ? /* @__PURE__ */ jsx("div", { class: "kui-select__separator", role: "separator" }) : null,
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          class: "kui-select__option",
+          role: "option",
+          tabindex: -1,
+          "data-value": choice.value,
+          "data-default-selected": chosen ? "" : void 0,
+          "aria-selected": String(chosen),
+          "aria-disabled": choice.disabled ? "true" : void 0,
+          title: choice.disabled ? choice.disabledReason : void 0,
+          children: [
+            /* @__PURE__ */ jsx("span", { class: "kui-select__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx(LucideIcon, { icon: Check, name: "check" }) }),
+            choice.icon ? /* @__PURE__ */ jsx(ChoiceIcon, { choice, icon: choice.icon }) : null,
+            /* @__PURE__ */ jsx("span", { class: "kui-select__option-label", children: choice.label })
+          ]
+        }
+      )
+    ] });
+  };
+  const groups = [
+    ...new Set(
+      choices.map((choice) => choice.group).filter((group) => Boolean(group))
+    )
+  ];
+  const ungrouped = choices.filter((choice) => !choice.group);
+  return /* @__PURE__ */ jsxs(
+    "kui-select",
+    {
+      class: `kui-select${renderSelected ? " kui-select--custom-selected" : ""}${fitMenu ? " kui-select--fit-menu" : ""} ${className}`.trim(),
+      ...rootData,
+      name,
+      value: multiple ? void 0 : selected?.value ?? "",
+      multiple,
+      disabled,
+      style,
+      slot,
+      children: [
+        label ? /* @__PURE__ */ jsx("span", { class: "kui-select__label", "aria-hidden": "true", children: label }) : null,
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: "kui-select__trigger",
+            role: "combobox",
+            tabindex: 0,
+            "aria-haspopup": "listbox",
+            "aria-expanded": "false",
+            "aria-label": triggerName,
+            "aria-description": hint,
+            disabled,
+            children: [
+              iconTrigger ? /* @__PURE__ */ jsx("span", { class: "kui-select__icon kui-select__icon--selected kui-select__trigger-icon", children: props.triggerIcon }) : selected && renderSelected ? /* @__PURE__ */ jsx("span", { class: "kui-select__custom-selected", children: /* @__PURE__ */ jsx("span", { class: "kui-select__custom-selected-content", children: renderSelected(selected) }) }) : selected?.icon ? /* @__PURE__ */ jsx(ChoiceIcon, { choice: selected, icon: selected.icon, selected: true }) : null,
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  class: "kui-select__value",
+                  "data-placeholder": valueText ? void 0 : "true",
+                  "data-placeholder-text": placeholderText,
+                  children: valueText || placeholderText || ""
+                }
+              ),
+              iconTrigger && enabledChosen.length > 0 ? /* @__PURE__ */ jsx(Badge, { tone: "info", size: "compact", ariaHidden: true, children: enabledChosen.length }) : null,
+              caret ? /* @__PURE__ */ jsx(Caret, {}) : null
+            ]
+          }
+        ),
+        hint ? /* @__PURE__ */ jsx("span", { class: "kui-select__hint", "aria-hidden": "true", children: hint }) : null,
+        /* @__PURE__ */ jsxs("div", { class: "kui-select__popup", popover: "manual", tabindex: -1, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              class: "kui-select__listbox",
+              role: "listbox",
+              "aria-label": accessibleName,
+              "aria-multiselectable": multiple ? "true" : void 0,
+              children: [
+                ungrouped.map(option),
+                groups.map((group, index) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    class: `kui-select__group${index > 0 || ungrouped.length > 0 ? " kui-select__group--separated" : ""}`,
+                    role: "group",
+                    "aria-label": group,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { class: "kui-select__group-title", "aria-hidden": "true", children: group }),
+                      choices.filter((choice) => choice.group === group).map(option)
+                    ]
+                  }
+                ))
+              ]
+            }
+          ),
+          props.multiple && (props.selectAllLabel || props.clearLabel) ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              class: "kui-select__actions",
+              role: "group",
+              "aria-label": accessibleName,
+              children: [
+                props.selectAllLabel ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    class: "kui-select__action",
+                    type: "button",
+                    "data-select-action": "all",
+                    children: props.selectAllLabel
+                  }
+                ) : null,
+                props.clearLabel ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    class: "kui-select__action",
+                    type: "button",
+                    "data-select-action": "clear",
+                    children: props.clearLabel
+                  }
+                ) : null
+              ]
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+
+export { Select };
+
+//# sourceMappingURL=chunk-ZX2QQJXD.js.map

package/dist/chunk-ZX2QQJXD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/select/select.tsx"],"names":[],"mappings":"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","file":"chunk-ZX2QQJXD.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport type { KerfCustomElement } from 'kerfjs/jsx-runtime';\nimport { Check } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { PopupCaretGlyph } from '../../../shared/popup/popup-glyphs.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport {\n  type CssForegroundColor,\n  em,\n} from '../../../shared/styles/css-values.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\nimport {\n  LucideIcon,\n  type LucideNode,\n} from '../../media/lucide-icon/lucide-icon.js';\nimport { summarizeSelection } from './model/select-summary.js';\n\ndeclare module 'kerfjs/jsx-runtime' {\n  // Module augmentation requires the namespace form expected by the JSX runtime.\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      /** The Select root: a light-DOM form control defined by `select/register`. */\n      'kui-select': KerfCustomElement & {\n        class?: string;\n        name?: string;\n        value?: string;\n        multiple?: boolean;\n        disabled?: boolean;\n        style?: string;\n        slot?: string;\n      };\n    }\n  }\n}\n\nexport interface SelectChoice<Value extends string = string> {\n  value: Value;\n  label: string;\n  icon?: LucideNode;\n  iconName?: string;\n  /**\n   * Foreground color for the optional icon: a semantic foreground token such\n   * as `uiColor('success-on-quiet')`, or an application-owned\n   * `foregroundColorVar('--app-icon-color')`. Fill tokens such as\n   * `uiColor('success-fill-quiet')` are pale background tints and do not\n   * type-check.\n   */\n  color?: CssForegroundColor;\n  group?: string;\n  /** Keep an unavailable choice visible but prevent selection. */\n  disabled?: boolean;\n  /** Optional explanation exposed as the disabled option's native tooltip. */\n  disabledReason?: string;\n  /**\n   * Draw a divider between this choice and the previous choice in the same\n   * list. A group boundary is already a separator, so the first choice of a\n   * group (or of the whole menu) never draws a second one.\n   */\n  separatorBefore?: boolean;\n}\n\ntype SelectAccessibleName =\n  { label: string; ariaLabel?: string } | { label?: never; ariaLabel: string };\n\nexport type SelectPresentation =\n  'form' | 'toolbar-borderless' | 'navigation' | 'inline' | 'title';\nexport type SelectSize = 'default' | 'compact';\nexport type SelectSelectedPresentation = 'label' | 'icon-only';\nexport type SelectFocusRingOwner = 'select' | 'group';\nexport type SelectTriggerWidth = 'fit-content' | 'max-content' | 'fill';\n\ninterface SelectBaseProps<Value extends string = string> {\n  name: string;\n  choices: readonly SelectChoice<Value>[];\n  className?: string;\n  /** Empty-value hint text shown in the closed control. */\n  placeholderText?: string;\n  /** Supporting text shown below the control and announced as its description. */\n  hint?: string;\n  disabled?: boolean;\n  /** Match menu width to the trigger; default menus grow to content within viewport gutters. */\n  fitMenu?: boolean;\n  /** Render as an unanimated loading skeleton: the label above a static, empty control box. */\n  placeholder?: boolean;\n  /** Form (default), borderless toolbar, intrinsic navigation, inline, or view-title chrome. */\n  presentation?: SelectPresentation;\n  size?: SelectSize;\n  /** Closed trigger width; omit to keep the presentation's default. */\n  triggerWidth?: SelectTriggerWidth;\n  /**\n   * The widest the closed trigger grows, under any presentation; its value\n   * (or `renderSelected` content) ellipsizes inside it and the caret stays.\n   */\n  maxTriggerWidth?: CssLength;\n  /** The narrowest the closed trigger gets. */\n  minTriggerWidth?: CssLength;\n  /** Show the disclosure caret (default); omit it for a compact icon-only trigger. */\n  caret?: boolean;\n  /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */\n  focusRingOwner?: SelectFocusRingOwner;\n  /** Keep the trigger's focus ring inside its box when an ancestor clips overflow. */\n  focusRingInset?: boolean;\n  /** Maximum closed-control label width in CSS pixels before ellipsis. */\n  labelMaxWidth?: number;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** One chosen value (the default). */\nexport interface SelectSingleValueProps<Value extends string = string> {\n  multiple?: false;\n  value: NoInfer<Value>;\n  renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n  /** Show only the selected choice icon while retaining the Select's accessible name. */\n  selectedPresentation?: SelectSelectedPresentation;\n  triggerIcon?: never;\n  selectAllLabel?: never;\n  clearLabel?: never;\n}\n\n/**\n * Any number of chosen values. The popup stays open while the person toggles\n * choices and closes on an outside press, Escape, or Tab; the closed control\n * summarizes the chosen labels in choice order.\n */\nexport interface SelectMultipleLabelProps<Value extends string = string> {\n  multiple: true;\n  value: readonly NoInfer<Value>[];\n  renderSelected?: never;\n  selectedPresentation?: 'label';\n  triggerIcon?: never;\n  /** Opt in to a footer action that selects every enabled choice. */\n  selectAllLabel?: string;\n  /** Opt in to a footer action that clears the current selection. */\n  clearLabel?: string;\n}\n\n/**\n * A multiple Select drawn as an icon-only toolbar trigger, such as a\n * \"Filter by label\" funnel. No single choice is selected, so the trigger shows\n * a fixed `triggerIcon` naming the menu's purpose; while any choice is chosen\n * a count badge sits beside it, and the trigger's accessible name ends with\n * the chosen labels in choice order.\n */\nexport interface SelectMultipleIconProps<Value extends string = string> {\n  multiple: true;\n  value: readonly NoInfer<Value>[];\n  renderSelected?: never;\n  selectedPresentation: 'icon-only';\n  /**\n   * The trigger's fixed icon, typically a `LucideIcon` naming the menu's\n   * purpose (a funnel for a filter), independent of the selection.\n   */\n  triggerIcon: KerfUiContent;\n  /** Opt in to a footer action that selects every enabled choice. */\n  selectAllLabel?: string;\n  /** Opt in to a footer action that clears the current selection. */\n  clearLabel?: string;\n}\n\nexport type SelectMultipleValueProps<Value extends string = string> =\n  SelectMultipleLabelProps<Value> | SelectMultipleIconProps<Value>;\n\nexport type SelectProps<Value extends string = string> =\n  SelectBaseProps<Value> &\n    SelectAccessibleName &\n    (SelectSingleValueProps<Value> | SelectMultipleValueProps<Value>);\n\n/**\n * A choice's icon, in the listbox or (`selected`) in the closed trigger.\n * Rendered only for a choice that has one.\n */\nfunction ChoiceIcon<Value extends string>({\n  choice,\n  icon,\n  selected = false,\n}: {\n  choice: SelectChoice<Value>;\n  icon: LucideNode;\n  selected?: boolean;\n}) {\n  return (\n    <span\n      class={`kui-select__icon${selected ? ' kui-select__icon--selected' : ''}`}\n      style={choice.color ? `color:${choice.color}` : undefined}\n      aria-hidden=\"true\"\n    >\n      <LucideIcon\n        icon={icon}\n        name={\n          choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')\n        }\n      />\n    </span>\n  );\n}\n\nfunction Caret() {\n  return (\n    <span class=\"kui-select__caret\" aria-hidden=\"true\">\n      <PopupCaretGlyph />\n    </span>\n  );\n}\n\nexport function Select<Value extends string>(props: SelectProps<Value>) {\n  const {\n    name,\n    label,\n    ariaLabel,\n    choices,\n    className = '',\n    placeholderText,\n    hint,\n    disabled = false,\n    fitMenu = false,\n    placeholder = false,\n    presentation = 'form',\n    size = 'default',\n    triggerWidth,\n    maxTriggerWidth,\n    minTriggerWidth,\n    caret = true,\n    focusRingOwner = 'select',\n    focusRingInset = false,\n    labelMaxWidth,\n    slot,\n  } = props;\n  const multiple = props.multiple === true;\n  const values: readonly Value[] = props.multiple ? props.value : [props.value];\n  const renderSelected = props.multiple ? undefined : props.renderSelected;\n  const selectedPresentation: SelectSelectedPresentation =\n    props.selectedPresentation ?? 'label';\n  // A multiple icon-only trigger shows a fixed icon naming the menu's\n  // purpose instead of a selected choice's icon.\n  const iconTrigger =\n    props.multiple && props.selectedPresentation === 'icon-only';\n  const accessibleName = label || ariaLabel;\n  const style =\n    [\n      labelMaxWidth === undefined\n        ? undefined\n        : `--kui-select-label-max-width:${labelMaxWidth}px`,\n      maxTriggerWidth === undefined\n        ? undefined\n        : `--_kui-select-trigger-max:${maxTriggerWidth}`,\n      minTriggerWidth === undefined\n        ? undefined\n        : `--_kui-select-trigger-min:${minTriggerWidth}`,\n    ]\n      .filter(Boolean)\n      .join(';') || undefined;\n  const rootData = {\n    'data-component': 'select',\n    'data-presentation': presentation,\n    'data-size': size,\n    'data-trigger-width': triggerWidth,\n    'data-trigger-max': maxTriggerWidth === undefined ? undefined : '',\n    'data-trigger-min': minTriggerWidth === undefined ? undefined : '',\n    'data-caret': caret ? undefined : 'false',\n    'data-selected-presentation': selectedPresentation,\n    'data-focus-ring-owner': focusRingOwner,\n    'data-focus-ring-inset': focusRingInset ? 'true' : undefined,\n  } as const;\n  if (placeholder) {\n    return (\n      <div\n        class={`kui-select kui-select--placeholder ${className}`.trim()}\n        {...rootData}\n        data-placeholder=\"true\"\n        aria-busy=\"true\"\n        style={style}\n        slot={slot}\n      >\n        {label && <span class=\"kui-select__label\">{label}</span>}\n        <span\n          class=\"kui-select__placeholder-box\"\n          aria-label={ariaLabel}\n          role=\"img\"\n        >\n          <Skeleton width={em(10)} />\n          {caret ? <Caret /> : null}\n        </span>\n        {hint && <span class=\"kui-select__hint\">{hint}</span>}\n      </div>\n    );\n  }\n  const enabledChosen = choices.filter(\n    (choice) => !choice.disabled && values.includes(choice.value),\n  );\n  const selected = multiple ? undefined : enabledChosen[0];\n  // A multiple Select summarizes its chosen labels, in choice order; an\n  // icon-only trigger (whose value text is hidden) ends its name with them.\n  const summary = multiple\n    ? summarizeSelection(enabledChosen.map((choice) => choice.label))\n    : '';\n  const triggerName =\n    iconTrigger && summary ? `${accessibleName}: ${summary}` : accessibleName;\n  const valueText = multiple\n    ? iconTrigger\n      ? ''\n      : summary\n    : (selected?.label ?? '');\n  const option = (choice: SelectChoice<Value>, index: number) => {\n    const chosen = !choice.disabled && values.includes(choice.value);\n    return (\n      <>\n        {choice.separatorBefore && index > 0 ? (\n          <div class=\"kui-select__separator\" role=\"separator\" />\n        ) : null}\n        <div\n          class=\"kui-select__option\"\n          role=\"option\"\n          tabindex={-1}\n          data-value={choice.value}\n          data-default-selected={chosen ? '' : undefined}\n          aria-selected={String(chosen)}\n          aria-disabled={choice.disabled ? 'true' : undefined}\n          title={choice.disabled ? choice.disabledReason : undefined}\n        >\n          <span class=\"kui-select__check\" aria-hidden=\"true\">\n            <LucideIcon icon={Check} name=\"check\" />\n          </span>\n          {choice.icon ? (\n            <ChoiceIcon choice={choice} icon={choice.icon} />\n          ) : null}\n          <span class=\"kui-select__option-label\">{choice.label}</span>\n        </div>\n      </>\n    );\n  };\n  const groups = [\n    ...new Set(\n      choices\n        .map((choice) => choice.group)\n        .filter((group): group is string => Boolean(group)),\n    ),\n  ];\n  const ungrouped = choices.filter((choice) => !choice.group);\n  return (\n    <kui-select\n      class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''} ${className}`.trim()}\n      {...rootData}\n      name={name}\n      value={multiple ? undefined : (selected?.value ?? '')}\n      multiple={multiple}\n      disabled={disabled}\n      style={style}\n      slot={slot}\n    >\n      {label ? (\n        <span class=\"kui-select__label\" aria-hidden=\"true\">\n          {label}\n        </span>\n      ) : null}\n      <button\n        type=\"button\"\n        class=\"kui-select__trigger\"\n        role=\"combobox\"\n        // Safari's default Tab order skips buttons; a select stays in it.\n        tabindex={0}\n        aria-haspopup=\"listbox\"\n        aria-expanded=\"false\"\n        aria-label={triggerName}\n        aria-description={hint}\n        disabled={disabled}\n      >\n        {iconTrigger ? (\n          <span class=\"kui-select__icon kui-select__icon--selected kui-select__trigger-icon\">\n            {props.triggerIcon}\n          </span>\n        ) : selected && renderSelected ? (\n          <span class=\"kui-select__custom-selected\">\n            <span class=\"kui-select__custom-selected-content\">\n              {renderSelected(selected)}\n            </span>\n          </span>\n        ) : selected?.icon ? (\n          <ChoiceIcon choice={selected} icon={selected.icon} selected />\n        ) : null}\n        <span\n          class=\"kui-select__value\"\n          data-placeholder={valueText ? undefined : 'true'}\n          data-placeholder-text={placeholderText}\n        >\n          {valueText || placeholderText || ''}\n        </span>\n        {iconTrigger && enabledChosen.length > 0 ? (\n          <Badge tone=\"info\" size=\"compact\" ariaHidden>\n            {enabledChosen.length}\n          </Badge>\n        ) : null}\n        {caret ? <Caret /> : null}\n      </button>\n      {hint ? (\n        <span class=\"kui-select__hint\" aria-hidden=\"true\">\n          {hint}\n        </span>\n      ) : null}\n      <div class=\"kui-select__popup\" popover=\"manual\" tabindex={-1}>\n        <div\n          class=\"kui-select__listbox\"\n          role=\"listbox\"\n          aria-label={accessibleName}\n          aria-multiselectable={multiple ? 'true' : undefined}\n        >\n          {ungrouped.map(option)}\n          {groups.map((group, index) => (\n            <div\n              class={`kui-select__group${index > 0 || ungrouped.length > 0 ? ' kui-select__group--separated' : ''}`}\n              role=\"group\"\n              aria-label={group}\n            >\n              <span class=\"kui-select__group-title\" aria-hidden=\"true\">\n                {group}\n              </span>\n              {choices.filter((choice) => choice.group === group).map(option)}\n            </div>\n          ))}\n        </div>\n        {props.multiple && (props.selectAllLabel || props.clearLabel) ? (\n          <div\n            class=\"kui-select__actions\"\n            role=\"group\"\n            aria-label={accessibleName}\n          >\n            {props.selectAllLabel ? (\n              <button\n                class=\"kui-select__action\"\n                type=\"button\"\n                data-select-action=\"all\"\n              >\n                {props.selectAllLabel}\n              </button>\n            ) : null}\n            {props.clearLabel ? (\n              <button\n                class=\"kui-select__action\"\n                type=\"button\"\n                data-select-action=\"clear\"\n              >\n                {props.clearLabel}\n              </button>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </kui-select>\n  );\n}\n"]}