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

package/dist/{chunk-GIUOXAVL.js → chunk-P74VXMB6.js}

@@ -1,7 +1,7 @@
-import { ToolbarControlGroup, isRelocatableGroup } from './chunk-MTCTX25G.js';
-import { Toolbar } from './chunk-BYHGRKC3.js';
-import { Pane } from './chunk-FL6J644M.js';
-import { List } from './chunk-QQICWWNX.js';
+import { ToolbarControlGroup, isRelocatableGroup } from './chunk-YXOMI7ES.js';
+import { Toolbar } from './chunk-CMLPFIC5.js';
+import { Pane } from './chunk-GJYQ27C2.js';
+import { List } from './chunk-V6W56V3N.js';
 import { LucideIcon } from './chunk-UKKRPP56.js';
 import { PanelLeftOpen, PanelLeftClose, PanelRightOpen, PanelRightClose, PanelBottomOpen, PanelBottomClose } from 'lucide';
 import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
@@ -27,25 +27,38 @@ function panelChromeList(content, config) {
     }
   );
 }
-function panelToggleGroup(side, toggle, collapsed, attributes) {
+function groupSizeFor(density) {
+  return density === "compact" ? "compact" : "default";
+}
+function panelToggleGroup(side, toggle, collapsed, attributes, size = "default") {
   const glyph = collapsiblePanelToggleIcon(side, collapsed);
-  return /* @__PURE__ */ jsx(ToolbarControlGroup, { label: toggle.name, appearance: "borderless", single: true, children: /* @__PURE__ */ jsx(
-    "button",
+  return /* @__PURE__ */ jsx(
+    ToolbarControlGroup,
     {
-      type: "button",
-      ...attributes,
-      "data-action": toggle.action,
-      "aria-expanded": String(!collapsed),
-      "aria-label": collapsed ? toggle.showLabel ?? `Show ${toggle.name}` : toggle.hideLabel ?? `Hide ${toggle.name}`,
-      children: /* @__PURE__ */ jsx(LucideIcon, { icon: glyph.icon, name: glyph.name })
+      label: toggle.name,
+      appearance: "borderless",
+      size,
+      single: true,
+      children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          ...attributes,
+          "data-action": toggle.action,
+          "aria-expanded": String(!collapsed),
+          "aria-label": collapsed ? toggle.showLabel ?? `Show ${toggle.name}` : toggle.hideLabel ?? `Hide ${toggle.name}`,
+          children: /* @__PURE__ */ jsx(LucideIcon, { icon: glyph.icon, name: glyph.name })
+        }
+      )
     }
-  ) });
+  );
 }
 function composedPanelToolbar(toolbar, side, collapsed, attributes) {
   return /* @__PURE__ */ jsx(
     Toolbar,
     {
       label: toolbar.label,
+      density: toolbar.density,
       dividerSides: toolbar.dividerSides,
       centerAlign: toolbar.centerAlign,
       responsive: toolbar.responsive,
@@ -58,7 +71,13 @@ function composedPanelToolbar(toolbar, side, collapsed, attributes) {
       ] }),
       trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
         toolbar.trailing,
-        toolbar.toggle ? panelToggleGroup(side, toolbar.toggle, collapsed, attributes) : null
+        toolbar.toggle ? panelToggleGroup(
+          side,
+          toolbar.toggle,
+          collapsed,
+          attributes,
+          groupSizeFor(toolbar.density)
+        ) : null
       ] })
     }
   );
@@ -89,6 +108,7 @@ function composedPanelBody({
       {
         position: "footer",
         label: bottomToolbar.label,
+        density: bottomToolbar.density,
         dividerSides: bottomToolbar.dividerSides,
         centerAlign: bottomToolbar.centerAlign,
         responsive: bottomToolbar.responsive,
@@ -125,7 +145,7 @@ function composedPanelBody({
     }
   );
 }
-function relocatedPanelGroups(toolbar, side, collapsed, attributes) {
+function relocatedPanelGroups(toolbar, side, collapsed, attributes, size = "default") {
   if (!collapsed || !toolbar) return [];
   const groups = [];
   const collect = (content) => {
@@ -140,10 +160,10 @@ function relocatedPanelGroups(toolbar, side, collapsed, attributes) {
   collect(toolbar.trailing);
   return [
     ...groups,
-    toolbar.toggle ? panelToggleGroup(side, toolbar.toggle, true, attributes) : null
+    toolbar.toggle ? panelToggleGroup(side, toolbar.toggle, true, attributes, size) : null
   ].filter((group) => group !== void 0 && group !== null && group !== false);
 }
 
-export { collapsiblePanelToggleIcon, composedPanelBody, panelToggleGroup, relocatedPanelGroups };
+export { collapsiblePanelToggleIcon, composedPanelBody, groupSizeFor, panelToggleGroup, relocatedPanelGroups };
 
-//# sourceMappingURL=chunk-GIUOXAVL.js.map
+//# sourceMappingURL=chunk-P74VXMB6.js.map

package/dist/chunk-P74VXMB6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/panels/panel-toolbar.tsx"],"names":[],"mappings":"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","file":"chunk-P74VXMB6.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport {\n  PanelBottomClose,\n  PanelBottomOpen,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PanelRightClose,\n  PanelRightOpen,\n} from 'lucide';\n\nimport {\n  Toolbar,\n  type ToolbarConfig,\n} from '../../components/actions/toolbar/toolbar.js';\nimport {\n  ToolbarControlGroup,\n  type ToolbarControlGroupSize,\n} from '../../components/actions/toolbar-control-group/toolbar-control-group.js';\nimport {\n  List,\n  type ListConfig,\n} from '../../components/collections/list/list.js';\nimport { Pane, type PaneConfig } from '../../components/layout/pane/pane.js';\nimport { LucideIcon } from '../../components/media/lucide-icon/lucide-icon.js';\nimport type { KerfUiContent } from '../content/semantic-content.js';\nimport { isRelocatableGroup } from './panel-toolbar-group.js';\n\n/** Which edge a collapsible panel docks to. */\nexport type PanelSide = 'left' | 'right' | 'bottom';\n\n/**\n * The standard collapse/expand icon for a panel `side` and `collapsed` state,\n * so every app's sidebars and drawers use one recognizable convention:\n * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`\n * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while\n * collapsed. Exposed so an app can render its own toggle affordance.\n */\nexport function collapsiblePanelToggleIcon(\n  side: PanelSide,\n  collapsed: boolean,\n): { icon: Parameters<typeof LucideIcon>[0]['icon']; name: string } {\n  if (side === 'left')\n    return collapsed\n      ? { icon: PanelLeftOpen, name: 'panel-left-open' }\n      : { icon: PanelLeftClose, name: 'panel-left-close' };\n  if (side === 'right')\n    return collapsed\n      ? { icon: PanelRightOpen, name: 'panel-right-open' }\n      : { icon: PanelRightClose, name: 'panel-right-close' };\n  return collapsed\n    ? { icon: PanelBottomOpen, name: 'panel-bottom-open' }\n    : { icon: PanelBottomClose, name: 'panel-bottom-close' };\n}\n\n/**\n * The standard collapse toggle a panel toolbar renders. The app handles the\n * button's `data-action` and flips its own `collapsed` flag.\n */\nexport interface PanelToggle {\n  /** The `data-action` the toggle button carries. */\n  action: string;\n  /** The panel's short name, for the accessible \"Show …\" / \"Hide …\" label. */\n  name: string;\n  /** Accessible label while the panel is collapsed. Defaults to `Show {name}`. */\n  showLabel?: string;\n  /** Accessible label while the panel is open. Defaults to `Hide {name}`. */\n  hideLabel?: string;\n}\n\n/**\n * A collapsible panel's top toolbar, composed so its groups follow the\n * panel's open state.\n *\n * - `title` precedes the `leading` zone. Groups may appear in any of the\n *   `leading`, `center`, and `trailing` zones while the panel is open.\n * - Groups marked `relocateOnCollapse` move to the work area's toolbar while\n *   the panel is collapsed, preserving their order across the three zones.\n * - `toggle` is always the last group: in the panel's toolbar while it is\n *   open, and right after the relocated groups in the work area's toolbar\n *   while it is collapsed.\n *\n * Relocated content renders in both places while the panel is collapsed (the\n * panel's copy is inert), so give it no `id`s. Pass groups directly or in\n * arrays so their render-time annotation remains available to the panel.\n *\n * The toolbar's configuration (`dividerSides`, `centerAlign`, `responsive`,\n * `responsiveAt`, `safeAreaEdges`) forwards to its `Toolbar`. It draws no\n * divider of its own: the panel's `Pane` draws the line under it while the\n * content is scrolled (its `chromeDividers`, wired by `wireScrollDividers`).\n */\nexport interface PanelToolbar extends ToolbarConfig {\n  /** Accessible name of the panel's toolbar. */\n  label: string;\n  title?: KerfUiContent;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n  toggle?: PanelToggle;\n}\n\n/** A panel's fixed bottom toolbar, below its optional footer content. */\nexport interface PanelBottomToolbar extends ToolbarConfig {\n  label: string;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n}\n\n/** Whether panel chrome stays fixed, scrolls, or follows Pane's auto rule. */\nexport type PanelChromePlacement = 'fixed' | 'scroll' | 'auto';\n\nfunction panelChromeList(content: KerfUiContent, config?: ListConfig) {\n  return (\n    <List\n      dividerSides={config?.dividerSides}\n      gap={config?.gap}\n      hAlign={config?.hAlign}\n      vAlign={config?.vAlign}\n      textInsets={config?.textInsets}\n      controlInsets={config?.controlInsets}\n    >\n      {content}\n    </List>\n  );\n}\n\n/** Owner-specific attributes a toggle button carries (its wiring hooks). */\nexport type PanelToggleAttributes = Readonly<Record<string, string>>;\n\n/** The group size that fits a toolbar of this density. */\nexport function groupSizeFor(\n  density: ToolbarConfig['density'],\n): ToolbarControlGroupSize {\n  return density === 'compact' ? 'compact' : 'default';\n}\n\n/** The standard toggle, alone in a borderless group. */\nexport function panelToggleGroup(\n  side: PanelSide,\n  toggle: PanelToggle,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n  size: ToolbarControlGroupSize = 'default',\n): SafeHtml {\n  const glyph = collapsiblePanelToggleIcon(side, collapsed);\n  return (\n    <ToolbarControlGroup\n      label={toggle.name}\n      appearance=\"borderless\"\n      size={size}\n      single\n    >\n      <button\n        type=\"button\"\n        {...attributes}\n        data-action={toggle.action}\n        aria-expanded={String(!collapsed)}\n        aria-label={\n          collapsed\n            ? (toggle.showLabel ?? `Show ${toggle.name}`)\n            : (toggle.hideLabel ?? `Hide ${toggle.name}`)\n        }\n      >\n        <LucideIcon icon={glyph.icon} name={glyph.name} />\n      </button>\n    </ToolbarControlGroup>\n  );\n}\n\n/**\n * The panel's own toolbar: content keeps its chosen zones and the toggle trails.\n */\nexport function composedPanelToolbar(\n  toolbar: PanelToolbar,\n  side: PanelSide,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n): SafeHtml {\n  return (\n    <Toolbar\n      label={toolbar.label}\n      density={toolbar.density}\n      dividerSides={toolbar.dividerSides}\n      centerAlign={toolbar.centerAlign}\n      responsive={toolbar.responsive}\n      responsiveAt={toolbar.responsiveAt}\n      safeAreaEdges={toolbar.safeAreaEdges}\n      center={toolbar.center}\n      leading={\n        <>\n          {toolbar.title}\n          {toolbar.leading}\n        </>\n      }\n      trailing={\n        <>\n          {toolbar.trailing}\n          {toolbar.toggle\n            ? panelToggleGroup(\n                side,\n                toolbar.toggle,\n                collapsed,\n                attributes,\n                groupSizeFor(toolbar.density),\n              )\n            : null}\n        </>\n      }\n    />\n  );\n}\n\n/**\n * A toolbar panel's body: its content in a `Pane` under its composed toolbar,\n * with its optional `footer` below. The panel's `pane` configuration forwards\n * to that `Pane`; an omitted or `undefined` field keeps the `Pane` default.\n */\nexport function composedPanelBody({\n  toolbar,\n  side,\n  collapsed,\n  attributes,\n  pane,\n  header,\n  headerList,\n  headerPlacement = 'fixed',\n  footer,\n  footerList,\n  bottomToolbar,\n  footerPlacement = 'fixed',\n  content,\n}: {\n  toolbar: PanelToolbar;\n  side: PanelSide;\n  collapsed: boolean;\n  attributes: PanelToggleAttributes;\n  pane: PaneConfig | undefined;\n  header?: KerfUiContent;\n  headerList?: ListConfig;\n  headerPlacement?: PanelChromePlacement;\n  footer?: KerfUiContent;\n  footerList?: ListConfig;\n  bottomToolbar?: PanelBottomToolbar;\n  footerPlacement?: PanelChromePlacement;\n  content: KerfUiContent;\n}): SafeHtml {\n  const panelHeader = (\n    <>\n      {composedPanelToolbar(toolbar, side, collapsed, attributes)}\n      {header ? panelChromeList(header, headerList) : null}\n    </>\n  );\n  const panelFooter =\n    footer || bottomToolbar ? (\n      <>\n        {footer ? panelChromeList(footer, footerList) : null}\n        {bottomToolbar ? (\n          <Toolbar\n            position=\"footer\"\n            label={bottomToolbar.label}\n            density={bottomToolbar.density}\n            dividerSides={bottomToolbar.dividerSides}\n            centerAlign={bottomToolbar.centerAlign}\n            responsive={bottomToolbar.responsive}\n            responsiveAt={bottomToolbar.responsiveAt}\n            safeAreaEdges={bottomToolbar.safeAreaEdges}\n            leading={bottomToolbar.leading}\n            center={bottomToolbar.center}\n            trailing={bottomToolbar.trailing}\n          />\n        ) : null}\n      </>\n    ) : undefined;\n  const scrollHeader = headerPlacement === 'scroll';\n  const scrollFooter = footerPlacement === 'scroll';\n  return (\n    <Pane\n      header={scrollHeader ? undefined : panelHeader}\n      footer={scrollFooter ? undefined : panelFooter}\n      chromePlacement={\n        headerPlacement === 'auto' || footerPlacement === 'auto'\n          ? 'auto'\n          : 'fixed'\n      }\n      contentElement={pane?.contentElement}\n      contentLabel={pane?.contentLabel}\n      separators={pane?.separators}\n      safeAreaEdges={pane?.safeAreaEdges}\n      chromeDividers={pane?.chromeDividers}\n      appearance={pane?.appearance}\n      deepInset={pane?.deepInset}\n      tabIndex={pane?.tabIndex}\n      outlined={pane?.outlined}\n    >\n      {scrollHeader ? panelHeader : null}\n      {content}\n      {scrollFooter ? panelFooter : null}\n    </Pane>\n  );\n}\n\n/**\n * The groups a collapsed panel hands to the work area, in zone order, then its\n * toggle. Empty while the panel is open or has no toolbar.\n */\nexport function relocatedPanelGroups(\n  toolbar: PanelToolbar | undefined,\n  side: PanelSide,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n  size: ToolbarControlGroupSize = 'default',\n): KerfUiContent[] {\n  if (!collapsed || !toolbar) return [];\n  const groups: KerfUiContent[] = [];\n  const collect = (content: KerfUiContent): void => {\n    if (Array.isArray(content)) {\n      for (const item of content) collect(item);\n    } else if (isRelocatableGroup(content)) {\n      groups.push(content);\n    }\n  };\n  collect(toolbar.leading);\n  collect(toolbar.center);\n  collect(toolbar.trailing);\n  return [\n    ...groups,\n    toolbar.toggle\n      ? panelToggleGroup(side, toolbar.toggle, true, attributes, size)\n      : null,\n  ].filter((group) => group !== undefined && group !== null && group !== false);\n}\n"]}

package/dist/{chunk-TKDDTLG5.js → chunk-PBT3CPPY.js}

@@ -152,9 +152,31 @@ function renderEntry(entry, nested = false) {
     }
   );
 }
+var pointerRestores = /* @__PURE__ */ new WeakMap();
 function openPopupMenuAt(menu, x, y) {
   menu.style.setProperty("--kui-popup-menu-context-x", `${x}px`);
   menu.style.setProperty("--kui-popup-menu-context-y", `${y}px`);
+  const popup = menu.getAttribute("data-trigger") === "context" ? null : menu.shadowRoot?.querySelector("wa-popup");
+  if (popup) {
+    popup.anchor = {
+      getBoundingClientRect: () => new DOMRect(x, y, 0, 0)
+    };
+    popup.placement = "bottom-start";
+    const previous = pointerRestores.get(menu);
+    if (previous) menu.removeEventListener("wa-after-hide", previous);
+    const restore = (event) => {
+      if (event.target !== menu) return;
+      menu.removeEventListener("wa-after-hide", restore);
+      pointerRestores.delete(menu);
+      popup.anchor = void 0;
+      popup.placement = menu.getAttribute("placement") ?? "bottom-start";
+    };
+    pointerRestores.set(menu, restore);
+    menu.addEventListener("wa-after-hide", restore);
+  }
+  menu.open = true;
+}
+function openPopupMenu(menu) {
   menu.open = true;
 }
 function closePopupMenu(menu) {
@@ -206,8 +228,13 @@ function PopupMenu({
   disabled = false,
   rootAttributes = {},
   slot,
-  context = false
+  context = false,
+  anchor
 }) {
+  if (anchor !== void 0 && (!context || !Number.isFinite(anchor.x) || !Number.isFinite(anchor.y)))
+    throw new RangeError(
+      "PopupMenu anchor requires context mode and finite x and y coordinates"
+    );
   const { key, cacheKey } = popupMenuContentKey(
     [
       text ?? "",
@@ -242,6 +269,7 @@ function PopupMenu({
       "data-key": key,
       "data-morph-skip-children": true,
       "data-trigger": context ? "context" : "button",
+      style: anchor ? `--kui-popup-menu-context-x:${anchor.x}px;--kui-popup-menu-context-y:${anchor.y}px` : void 0,
       placement,
       slot,
       children: content
@@ -249,6 +277,6 @@ function PopupMenu({
   );
 }
 
-export { PopupMenu, closePopupMenu, openPopupMenuAt };
+export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt };
 
-//# sourceMappingURL=chunk-TKDDTLG5.js.map
+//# sourceMappingURL=chunk-PBT3CPPY.js.map

package/dist/chunk-PBT3CPPY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/actions/popup-menu/internal/popup-menu-content-cache.ts","../src/components/actions/popup-menu/popup-menu.tsx"],"names":[],"mappings":"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","file":"chunk-PBT3CPPY.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { PopupMenuEntry } from '../popup-menu.js';\n\n/**\n * Streaming content hash: slot 0 is the FNV-1a digest that names\n * the menu's `data-key`; slot 1 is an independent check hash (a 31-multiplier\n * polynomial whose dependency chain runs in parallel with the digest's), so\n * the markup cache is keyed by about 64 bits and a digest collision cannot\n * serve another menu's markup. An `Int32Array` keeps both accumulators unboxed\n * between calls.\n */\nconst hashState = new Int32Array(2);\n\nfunction hashCode(code: number): void {\n  hashState[0] = Math.imul(hashState[0]! ^ code, 0x01000193);\n  hashState[1] = (Math.imul(hashState[1]!, 31) + code) | 0;\n}\n\n/**\n * Hash a string's code points. A surrogate pair is combined into one code\n * point, matching the former `for…of` iteration over the joined key, so the\n * digest, and with it the rendered `data-key`, is unchanged.\n */\nfunction hashText(text: string): void {\n  let digest = hashState[0]!;\n  let check = hashState[1]!;\n  const length = text.length;\n  for (let index = 0; index < length; index++) {\n    let code = text.charCodeAt(index);\n    if ((code & 0xfc00) === 0xd800 && index + 1 < length) {\n      const low = text.charCodeAt(index + 1);\n      if ((low & 0xfc00) === 0xdc00) {\n        code = ((code - 0xd800) << 10) + (low - 0xdc00) + 0x10000;\n        index++;\n      }\n    }\n    digest = Math.imul(digest ^ code, 0x01000193);\n    check = (Math.imul(check, 31) + code) | 0;\n  }\n  hashState[0] = digest;\n  hashState[1] = check;\n}\n\n/**\n * Parts at least this long (icon and details markup) are hashed through\n * {@link hashLongText}: by a memoized digest of the whole string instead of\n * character by character, so a glyph repeated on every row costs a map lookup.\n */\nexport const LONG_PART_LENGTH = 64;\n\n/** Bound on memoized long-part digests; past it the oldest is evicted. */\nexport const PART_DIGEST_LIMIT = 4096;\nconst partDigests = new Map<string, readonly [number, number]>();\n\n/**\n * Feed a long part as its own two hashes. A Lucide SVG is a few hundred\n * characters and repeats across every row's menu, so hashing its characters\n * dominated an unchanged menu's cost; V8 hashes a string key natively (once\n * per string object) and compares equal strings quickly.\n */\nfunction hashLongText(text: string): void {\n  let pair = partDigests.get(text);\n  if (!pair) {\n    const digest = hashState[0]!;\n    const check = hashState[1]!;\n    hashState[0] = 0x811c9dc5;\n    hashState[1] = 0x9747b28c;\n    hashText(text);\n    pair = [hashState[0], hashState[1]];\n    hashState[0] = digest;\n    hashState[1] = check;\n    if (partDigests.size >= PART_DIGEST_LIMIT)\n      partDigests.delete(partDigests.keys().next().value!);\n    partDigests.set(text, pair);\n  }\n  hashCode(pair[0]);\n  hashCode(pair[1]);\n}\n\n/** Hash a part, through its memoized digest when it is long. */\nfunction hashPart(text: string): void {\n  if (text.length >= LONG_PART_LENGTH) hashLongText(text);\n  else hashText(text);\n}\n\nconst PART_SEPARATOR = 0x00;\nconst FIELD_SEPARATOR = 0x01;\n\n/**\n * Feed one entry's structure: the fields, in order, separated by U+0001, with\n * each submenu entry appended the same way.\n */\nfunction hashEntry(entry: PopupMenuEntry): void {\n  if (entry.kind === 'divider') {\n    hashCode(0x2d); // '-'\n    return;\n  }\n  if (entry.kind === 'heading') {\n    hashCode(0x23); // '#'\n    hashText(entry.label);\n    return;\n  }\n  hashText(entry.label);\n  hashCode(FIELD_SEPARATOR);\n  hashText(entry.action ?? '');\n  hashCode(FIELD_SEPARATOR);\n  hashText(entry.value ?? '');\n  hashCode(FIELD_SEPARATOR);\n  hashCode(entry.disabled ? 0x31 : 0x30);\n  hashCode(FIELD_SEPARATOR);\n  hashCode(entry.checked === undefined ? 0x2d : entry.checked ? 0x31 : 0x30);\n  hashCode(FIELD_SEPARATOR);\n  hashText(entry.tone ?? '');\n  hashCode(FIELD_SEPARATOR);\n  hashText(entry.disabledReason ?? '');\n  hashCode(FIELD_SEPARATOR);\n  // SafeHtml stringifies to its stored markup without copying, and the key\n  // must change when an icon or details change.\n  hashPart(String(entry.icon ?? ''));\n  hashCode(FIELD_SEPARATOR);\n  hashPart(String(entry.details ?? ''));\n  hashCode(FIELD_SEPARATOR);\n  hashText(entry.attributes ? JSON.stringify(entry.attributes) : '{}');\n  for (const child of entry.submenu ?? []) {\n    hashCode(FIELD_SEPARATOR);\n    hashEntry(child);\n  }\n}\n\n/**\n * Bounded, least-recently-used cache of each menu's trigger and entry markup,\n * keyed by its content hashes. A list that re-renders unchanged menus then\n * pays one hash pass per menu instead of rendering every entry again, which\n * the morph would discard under `data-morph-skip-children` anyway. Sized above\n * a large list's distinct menus; past it, renders fall back to fresh markup.\n */\nexport const MARKUP_CACHE_LIMIT = 1024;\nconst markupCache = new Map<string, SafeHtml>();\n\n/**\n * The menu's `data-key` and its cache key. The digest covers, in order and\n * separated by U+0000, the trigger parts and then each entry, whose fields are\n * separated by U+0001; it is the FNV-1a hash of that joined text, except that\n * a part of {@link LONG_PART_LENGTH} or more characters contributes its own\n * two hashes in place of its characters.\n */\nexport function popupMenuContentKey(\n  triggerParts: readonly string[],\n  items: readonly PopupMenuEntry[],\n): { key: string; cacheKey: string } {\n  hashState[0] = 0x811c9dc5;\n  hashState[1] = 0x9747b28c;\n  for (let index = 0; index < triggerParts.length; index++) {\n    if (index > 0) hashCode(PART_SEPARATOR);\n    hashPart(triggerParts[index]!);\n  }\n  for (const entry of items) {\n    hashCode(PART_SEPARATOR);\n    hashEntry(entry);\n  }\n  const digest = (hashState[0]! >>> 0).toString(36);\n  return {\n    key: `kui-popup-menu-${digest}`,\n    cacheKey: `${digest}:${(hashState[1]! >>> 0).toString(36)}`,\n  };\n}\n\n/** Cached markup for a cache key, refreshed as most recently used. */\nexport function cachedPopupMenuContent(cacheKey: string): SafeHtml | undefined {\n  const content = markupCache.get(cacheKey);\n  if (content) {\n    markupCache.delete(cacheKey);\n    markupCache.set(cacheKey, content);\n  }\n  return content;\n}\n\n/**\n * Remember rendered markup, evicting the least recently used entry when full.\n * Only static markup is reusable: content that holds a keyed list must be\n * rendered in each pass for the list reconciler.\n */\nexport function cachePopupMenuContent(\n  cacheKey: string,\n  content: SafeHtml,\n): void {\n  if (content.__segment.kind !== 'static') return;\n  if (markupCache.size >= MARKUP_CACHE_LIMIT)\n    markupCache.delete(markupCache.keys().next().value!);\n  markupCache.set(cacheKey, content);\n}\n\n/** Test hook: drop cached menu markup and memoized part digests. */\nexport function _clearPopupMenuMarkupCache(): void {\n  markupCache.clear();\n  partDigests.clear();\n}\n\n/** Test hook: the number of memoized long-part digests. */\nexport function _popupMenuPartDigestCount(): number {\n  return partDigests.size;\n}\n\n/** Test hook: the number of cached menu markups. */\nexport function _popupMenuMarkupCacheSize(): number {\n  return markupCache.size;\n}\n","import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  cachedPopupMenuContent,\n  cachePopupMenuContent,\n  popupMenuContentKey,\n} from './internal/popup-menu-content-cache.js';\n\nexport type PopupMenuPlacement =\n  'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end';\n\ntype PopupMenuDataAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-action'?: never;\n    'data-component'?: never;\n    'data-key'?: never;\n    'data-morph-skip-children'?: never;\n  }\n>;\n\n/** One command in the menu. */\nexport interface PopupMenuItem {\n  kind?: 'item';\n  label: string;\n  /** Delegated `data-action` the app handles when the item is chosen. */\n  action?: string;\n  /** Native `wa-dropdown-item` value, reported by its `wa-select` event. */\n  value?: string;\n  /** Leading icon, typically a `LucideIcon`; it is placed in the item's icon slot. */\n  icon?: SafeHtml;\n  /** A checkbox choice, including nested choices; omit for a plain command. */\n  checked?: boolean;\n  /** Trailing safe content, such as secondary status. */\n  details?: SafeHtml;\n  /** Destructive command styling. */\n  tone?: 'default' | 'danger';\n  disabled?: boolean;\n  /** Native tooltip text for a disabled command. */\n  disabledReason?: string;\n  /** Application `data-*` metadata such as a record id. */\n  attributes?: PopupMenuDataAttributes;\n  /** Child commands, headings, and dividers opened by hover or keyboard navigation. */\n  submenu?: readonly PopupMenuEntry[];\n}\n\n/** A labeled group heading; items that follow it belong to the group. */\nexport interface PopupMenuHeading {\n  kind: 'heading';\n  label: string;\n}\n\n/** A separator between groups of items. */\nexport interface PopupMenuDivider {\n  kind: 'divider';\n}\n\nexport type PopupMenuEntry =\n  PopupMenuItem | PopupMenuHeading | PopupMenuDivider;\n\ntype PopupMenuTriggerName =\n  | {\n      /** Visible trigger text, which is also its accessible name. */\n      text: string;\n      label?: never;\n    }\n  | {\n      text?: never;\n      /**\n       * Accessible name of an icon-only trigger, rendered as visually hidden\n       * slotted text (a Web Awesome button takes its name from its content).\n       */\n      label: string;\n    };\n\n/** A context PopupMenu's viewport anchor point. */\nexport interface PopupMenuAnchor {\n  x: number;\n  y: number;\n}\n\ntype PopupMenuTrigger =\n  | (PopupMenuTriggerName & { context?: false; anchor?: never })\n  | {\n      context: true;\n      label: string;\n      /**\n       * The viewport point (CSS pixels, as in `MouseEvent.clientX/Y`) the\n       * menu opens from. Rendered into the menu itself, so it survives\n       * re-renders and replacement; open it with `openPopupMenu`.\n       */\n      anchor?: PopupMenuAnchor;\n      text?: never;\n      icon?: never;\n      caret?: never;\n      disabled?: never;\n    };\n\nexport type PopupMenuProps = PopupMenuTrigger & {\n  /** Trigger icon, typically a `LucideIcon`, before any visible text. */\n  icon?: KerfUiContent;\n  items: readonly PopupMenuEntry[];\n  /** Where the menu opens relative to its trigger. Defaults to `bottom-start`. */\n  placement?: PopupMenuPlacement;\n  /** Show the disclosure caret after the trigger content. Defaults to true. */\n  caret?: boolean;\n  disabled?: boolean;\n  /** Application `data-*` metadata on the menu root. */\n  rootAttributes?: PopupMenuDataAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n};\n\nfunction renderEntry(entry: PopupMenuEntry, nested = false) {\n  if (entry.kind === 'divider')\n    return <wa-divider slot={nested ? 'submenu' : undefined} />;\n  // A group title styled like the Select's group title. It is not a slotted\n  // h1-h6, whose Web Awesome group-label metrics are !important.\n  if (entry.kind === 'heading')\n    return (\n      <div\n        class=\"kui-popup-menu__heading\"\n        slot={nested ? 'submenu' : undefined}\n      >\n        {entry.label}\n      </div>\n    );\n  return (\n    <wa-dropdown-item\n      {...(entry.attributes ?? {})}\n      slot={nested ? 'submenu' : undefined}\n      data-action={entry.action}\n      value={entry.value}\n      type={entry.checked === undefined ? undefined : 'checkbox'}\n      checked={entry.checked}\n      variant={entry.tone === 'danger' ? 'danger' : undefined}\n      disabled={entry.disabled}\n      title={entry.disabled ? entry.disabledReason : undefined}\n    >\n      {entry.icon ? (\n        <span slot=\"icon\" class=\"kui-popup-menu__icon\">\n          {entry.icon}\n        </span>\n      ) : null}\n      {entry.label}\n      {entry.details ? (\n        <span slot=\"details\" class=\"kui-popup-menu__details\">\n          {entry.details}\n        </span>\n      ) : entry.submenu ? (\n        <span slot=\"details\" />\n      ) : null}\n      {entry.submenu?.map((child) => renderEntry(child, true))}\n    </wa-dropdown-item>\n  );\n}\n\n/** A rendered context PopupMenu with Web Awesome's controlled open state. */\nexport type PopupMenuElement = HTMLElement & { open: boolean };\n\n/** The Web Awesome popup inside an upgraded `wa-dropdown`, which accepts a virtual anchor. */\ntype PopupMenuPopup = HTMLElement & { anchor?: unknown; placement: string };\n\n/** Pending trigger-anchor restorations of pointer-opened button menus. */\nconst pointerRestores = new WeakMap<HTMLElement, (event: Event) => void>();\n\n/**\n * Open a PopupMenu at viewport pointer coordinates. A `context` menu rendered\n * without `anchor` moves its invisible anchor there (a menu rendered with\n * `anchor` opens with `openPopupMenu` instead). A button-triggered menu (such as a `ListActionRow`\n * trailing menu) anchors its popup at the point, opening `bottom-start` like a\n * context menu, for this opening only; once the menu has closed it returns to\n * its trigger and placement. Before Web Awesome upgrades it, the menu opens at\n * its trigger.\n */\nexport function openPopupMenuAt(\n  menu: PopupMenuElement,\n  x: number,\n  y: number,\n): void {\n  menu.style.setProperty('--kui-popup-menu-context-x', `${x}px`);\n  menu.style.setProperty('--kui-popup-menu-context-y', `${y}px`);\n  const popup =\n    menu.getAttribute('data-trigger') === 'context'\n      ? null\n      : menu.shadowRoot?.querySelector<PopupMenuPopup>('wa-popup');\n  if (popup) {\n    popup.anchor = {\n      getBoundingClientRect: () => new DOMRect(x, y, 0, 0),\n    };\n    popup.placement = 'bottom-start';\n    const previous = pointerRestores.get(menu);\n    if (previous) menu.removeEventListener('wa-after-hide', previous);\n    const restore = (event: Event) => {\n      if (event.target !== menu) return;\n      menu.removeEventListener('wa-after-hide', restore);\n      pointerRestores.delete(menu);\n      popup.anchor = undefined;\n      popup.placement = menu.getAttribute('placement') ?? 'bottom-start';\n    };\n    pointerRestores.set(menu, restore);\n    menu.addEventListener('wa-after-hide', restore);\n  }\n  menu.open = true;\n}\n\n/**\n * Open a context PopupMenu at the `anchor` it was rendered with (or the\n * point a previous `openPopupMenuAt` set).\n */\nexport function openPopupMenu(menu: PopupMenuElement): void {\n  menu.open = true;\n}\n\n/** Close a programmatically opened PopupMenu. */\nexport function closePopupMenu(menu: PopupMenuElement): void {\n  menu.open = false;\n}\n\ninterface PopupMenuContentProps {\n  context: boolean;\n  label: string | undefined;\n  icon: KerfUiContent;\n  text: string | undefined;\n  caret: boolean;\n  disabled: boolean;\n  items: readonly PopupMenuEntry[];\n}\n\n/** The trigger and entries: everything inside the `wa-dropdown` root. */\nfunction renderContent({\n  context,\n  label,\n  icon,\n  text,\n  caret,\n  disabled,\n  items,\n}: PopupMenuContentProps): SafeHtml {\n  return (\n    <>\n      {context ? (\n        <button\n          type=\"button\"\n          slot=\"trigger\"\n          class=\"kui-popup-menu__context-anchor\"\n          aria-label={label}\n          aria-hidden=\"true\"\n          tabindex={-1}\n        />\n      ) : (\n        <wa-button\n          slot=\"trigger\"\n          appearance=\"plain\"\n          with-caret={caret}\n          disabled={disabled}\n        >\n          {icon}\n          {text ? (\n            <span>{text}</span>\n          ) : (\n            <span class=\"kui-popup-menu__label\">{label}</span>\n          )}\n        </wa-button>\n      )}\n      {items.map((entry) => renderEntry(entry))}\n    </>\n  );\n}\n\n/**\n * An action menu: a trigger button that opens a list of commands. Renders the\n * `wa-dropdown` root directly, so a `single` `ToolbarControlGroup` (with\n * `nestedDropdown`) or a `PopupSurface` sizes and insets it as usual. Items\n * dispatch through delegated `data-action`s; the app owns the commands and any\n * open-state reaction. Import `@kerfjs/ui/popup-menu/register` once to register\n * the Web Awesome elements. At viewport widths up to 480px, submenus appear\n * above or below their parent menu so their rows do not cover the parent list.\n */\nexport function PopupMenu({\n  text,\n  label,\n  icon,\n  items,\n  placement = 'bottom-start',\n  caret = true,\n  disabled = false,\n  rootAttributes = {},\n  slot,\n  context = false,\n  anchor,\n}: PopupMenuProps) {\n  if (\n    anchor !== undefined &&\n    (!context || !Number.isFinite(anchor.x) || !Number.isFinite(anchor.y))\n  )\n    throw new RangeError(\n      'PopupMenu anchor requires context mode and finite x and y coordinates',\n    );\n  // Web Awesome owns the trigger and item DOM once upgraded, so the morph\n  // skips the children; the content key rebuilds the menu when they change.\n  // An unchanged menu reuses its cached markup and costs one hash pass.\n  const { key, cacheKey } = popupMenuContentKey(\n    [\n      text ?? '',\n      label ?? '',\n      String(icon ?? ''),\n      String(caret),\n      String(disabled),\n      String(context),\n    ],\n    items,\n  );\n  let content = cachedPopupMenuContent(cacheKey);\n  if (!content) {\n    content = renderContent({\n      context,\n      label,\n      icon,\n      text,\n      caret,\n      disabled,\n      items,\n    });\n    cachePopupMenuContent(cacheKey, content);\n  }\n  // size=\"m\" is Web Awesome's reflected default; rendering it keeps a\n  // re-render's morph from stripping it and forcing a Lit update.\n  return (\n    <wa-dropdown\n      size=\"m\"\n      {...rootAttributes}\n      class=\"kui-popup-menu\"\n      data-component=\"popup-menu\"\n      data-key={key}\n      data-morph-skip-children\n      data-trigger={context ? 'context' : 'button'}\n      style={\n        anchor\n          ? `--kui-popup-menu-context-x:${anchor.x}px;--kui-popup-menu-context-y:${anchor.y}px`\n          : undefined\n      }\n      placement={placement}\n      slot={slot}\n    >\n      {content}\n    </wa-dropdown>\n  );\n}\n"]}

package/dist/chunk-PRG4CL3Q.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from 'kerfjs/jsx-runtime';
+
+// src/components/forms/choice-chips/choice-chips.tsx
+var unsafeSwatch = /[;{}<>"'\\]|\p{Cc}/u;
+function swatchStyle(swatch) {
+  if (swatch === "transparent") return void 0;
+  const color = swatch.trim();
+  if (!color || unsafeSwatch.test(color))
+    throw new TypeError("ChoiceChips swatch requires one CSS color value.");
+  return `--_kui-choice-chips-swatch: ${color}`;
+}
+function ChoiceChips({
+  name,
+  value,
+  choices,
+  action,
+  size = "default",
+  disabled = false,
+  required = false,
+  form,
+  id,
+  className = "",
+  slot,
+  label,
+  labelledBy
+}) {
+  if (choices.some((choice) => choice.swatch !== void 0 && choice.icon))
+    throw new TypeError("A ChoiceChips choice takes a swatch or an icon.");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      class: `kui-choice-chips ${className}`.trim(),
+      "data-component": "choice-chips",
+      "data-size": size,
+      "data-disabled": disabled ? "" : void 0,
+      role: "radiogroup",
+      "aria-label": label,
+      "aria-labelledby": labelledBy,
+      "aria-required": required ? "true" : void 0,
+      "aria-disabled": disabled ? "true" : void 0,
+      slot,
+      children: choices.map((choice) => {
+        const unavailable = disabled || choice.disabled === true;
+        return /* @__PURE__ */ jsxs(
+          "label",
+          {
+            class: "kui-choice-chips__chip",
+            "data-choice-value": choice.value,
+            "data-disabled": unavailable ? "" : void 0,
+            title: choice.title,
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  class: "kui-choice-chips__input",
+                  type: "radio",
+                  name,
+                  value: choice.value,
+                  checked: choice.value === value,
+                  disabled: unavailable,
+                  required,
+                  form,
+                  "data-action": action
+                }
+              ),
+              choice.swatch === void 0 ? null : /* @__PURE__ */ jsx(
+                "span",
+                {
+                  class: "kui-choice-chips__swatch",
+                  "data-swatch": choice.swatch === "transparent" ? "transparent" : "color",
+                  style: swatchStyle(choice.swatch),
+                  "aria-hidden": "true"
+                }
+              ),
+              choice.icon === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-choice-chips__icon", "aria-hidden": "true", children: choice.icon }),
+              /* @__PURE__ */ jsx("span", { class: "kui-choice-chips__label", children: choice.label })
+            ]
+          }
+        );
+      })
+    }
+  );
+}
+
+export { ChoiceChips };
+
+//# sourceMappingURL=chunk-PRG4CL3Q.js.map

package/dist/chunk-PRG4CL3Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/choice-chips/choice-chips.tsx"],"names":[],"mappings":"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","file":"chunk-PRG4CL3Q.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { CssColor } from '../../../shared/styles/css-values.js';\n\nexport type ChoiceChipsSize = 'default' | 'compact';\n\n/**\n * A leading color dot: a {@link CssColor} from `uiColor()`, `colorVar()`, or\n * `foregroundColor()`, or `'transparent'` for the no-color swatch (an outlined\n * dot struck through by a diagonal line).\n */\nexport type ChoiceChipsSwatch = CssColor | 'transparent';\n\nexport interface ChoiceChipsChoice<Value extends string = string> {\n  value: Value;\n  /** Visible label; it is also the radio's accessible name. */\n  label: string;\n  /** Leading color dot. Mutually exclusive with `icon`. */\n  swatch?: ChoiceChipsSwatch;\n  /** Decorative leading icon, normally an unsized LucideIcon. */\n  icon?: SafeHtml;\n  /** Supplementary tooltip; never the only place a choice is described. */\n  title?: string;\n  disabled?: boolean;\n}\n\ninterface ChoiceChipsCommonProps<Value extends string> {\n  /** Native radio `name`: the form field the selected value submits under. */\n  name: string;\n  /** The selected value. Omit (or pass `undefined`) for no selection. */\n  value?: NoInfer<Value>;\n  choices: readonly ChoiceChipsChoice<Value>[];\n  /** Delegated `data-action` on every radio; listen for `change`. */\n  action?: string;\n  size?: ChoiceChipsSize;\n  /** Disable the whole group. */\n  disabled?: boolean;\n  /** Require a selection for native form validation. */\n  required?: boolean;\n  /** Associate the radios with a form outside their ancestor chain. */\n  form?: string;\n  id?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** A radio group is named either by a string or by a visible heading's id. */\nexport type ChoiceChipsProps<Value extends string = string> =\n  ChoiceChipsCommonProps<Value> &\n    (\n      | { label: string; labelledBy?: never }\n      | { labelledBy: string; label?: never }\n    );\n\nconst unsafeSwatch = /[;{}<>\"'\\\\]|\\p{Cc}/u;\n\nfunction swatchStyle(swatch: ChoiceChipsSwatch): string | undefined {\n  if (swatch === 'transparent') return undefined;\n  const color = swatch.trim();\n  if (!color || unsafeSwatch.test(color))\n    throw new TypeError('ChoiceChips swatch requires one CSS color value.');\n  return `--_kui-choice-chips-swatch: ${color}`;\n}\n\n/**\n * An exclusive, wrapping set of pill chips backed by native radios: one Tab\n * stop, arrow-key selection, and a real form value. Each choice may lead with\n * a color swatch (including a struck-through transparent swatch) or an icon.\n */\nexport function ChoiceChips<Value extends string>({\n  name,\n  value,\n  choices,\n  action,\n  size = 'default',\n  disabled = false,\n  required = false,\n  form,\n  id,\n  className = '',\n  slot,\n  label,\n  labelledBy,\n}: ChoiceChipsProps<Value>) {\n  if (choices.some((choice) => choice.swatch !== undefined && choice.icon))\n    throw new TypeError('A ChoiceChips choice takes a swatch or an icon.');\n  return (\n    <div\n      id={id}\n      class={`kui-choice-chips ${className}`.trim()}\n      data-component=\"choice-chips\"\n      data-size={size}\n      data-disabled={disabled ? '' : undefined}\n      role=\"radiogroup\"\n      aria-label={label}\n      aria-labelledby={labelledBy}\n      aria-required={required ? 'true' : undefined}\n      aria-disabled={disabled ? 'true' : undefined}\n      slot={slot}\n    >\n      {choices.map((choice) => {\n        const unavailable = disabled || choice.disabled === true;\n        return (\n          <label\n            class=\"kui-choice-chips__chip\"\n            data-choice-value={choice.value}\n            data-disabled={unavailable ? '' : undefined}\n            title={choice.title}\n          >\n            <input\n              class=\"kui-choice-chips__input\"\n              type=\"radio\"\n              name={name}\n              value={choice.value}\n              checked={choice.value === value}\n              disabled={unavailable}\n              required={required}\n              form={form}\n              data-action={action}\n            />\n            {choice.swatch === undefined ? null : (\n              <span\n                class=\"kui-choice-chips__swatch\"\n                data-swatch={\n                  choice.swatch === 'transparent' ? 'transparent' : 'color'\n                }\n                style={swatchStyle(choice.swatch)}\n                aria-hidden=\"true\"\n              />\n            )}\n            {choice.icon === undefined ? null : (\n              <span class=\"kui-choice-chips__icon\" aria-hidden=\"true\">\n                {choice.icon}\n              </span>\n            )}\n            <span class=\"kui-choice-chips__label\">{choice.label}</span>\n          </label>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/chunk-QH5KOFNS.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/components/feedback/edge-activity-indicator/edge-activity-indicator.tsx
+function EdgeActivityIndicator({
+  busy,
+  message,
+  tone = "info",
+  inset = "safe-area",
+  className = ""
+}) {
+  const showMessage = busy && Boolean(message?.trim());
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: `kui-edge-activity-indicator ${className}`.trim(),
+      "data-component": "edge-activity-indicator",
+      "data-tone": tone,
+      "data-busy": busy ? "true" : "false",
+      "data-inset": inset,
+      children: [
+        /* @__PURE__ */ jsx("div", { class: "kui-edge-activity-indicator__strip", "aria-hidden": "true" }),
+        message !== void 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-edge-activity-indicator__message",
+            role: "status",
+            "aria-live": "polite",
+            "data-visible": showMessage ? "true" : "false",
+            children: showMessage ? message : ""
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { EdgeActivityIndicator };
+
+//# sourceMappingURL=chunk-QH5KOFNS.js.map

package/dist/chunk-QH5KOFNS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/edge-activity-indicator/edge-activity-indicator.tsx"],"names":[],"mappings":";;;AAyBO,SAAS,qBAAA,CAAsB;AAAA,EACpC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,KAAA,GAAQ,WAAA;AAAA,EACR,SAAA,GAAY;AACd,CAAA,EAA+B;AAC7B,EAAA,MAAM,WAAA,GAAc,IAAA,IAAQ,OAAA,CAAQ,OAAA,EAAS,MAAM,CAAA;AACnD,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,4BAAA,EAA+B,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACvD,gBAAA,EAAe,yBAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAW,OAAO,MAAA,GAAS,OAAA;AAAA,MAC3B,YAAA,EAAY,KAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,oCAAA,EAAqC,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,QAClE,YAAY,MAAA,oBACX,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,sCAAA;AAAA,YACN,IAAA,EAAK,QAAA;AAAA,YACL,WAAA,EAAU,QAAA;AAAA,YACV,cAAA,EAAc,cAAc,MAAA,GAAS,OAAA;AAAA,YAEpC,wBAAc,OAAA,GAAU;AAAA;AAAA;AAC3B;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-QH5KOFNS.js","sourcesContent":["import type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n\nexport interface EdgeActivityIndicatorProps {\n  /** Whether work is in progress; shows the strip and runs its wave. */\n  busy: boolean;\n  /**\n   * Optional status shown in a small pill hanging from the edge while busy.\n   * The pill is a polite live region; omit it for a purely decorative strip.\n   */\n  message?: string;\n  /** Strip and pill color; defaults to `info`. */\n  tone?: SemanticTone;\n  /** Clear the device's top safe area (default) or sit at the very edge. */\n  inset?: 'safe-area' | 'none';\n  className?: string;\n}\n\n/**\n * A layout-free activity strip pinned to the top edge of the viewport: a row\n * of thin bars that ripple in a traveling wave while `busy`, plus an optional\n * hanging status pill. It allocates no layout, ignores the pointer, and its\n * bars are hidden from assistive technology; only the pill announces.\n * Kerf owns the motion: it scales in from the edge and, under reduced motion,\n * only fades.\n */\nexport function EdgeActivityIndicator({\n  busy,\n  message,\n  tone = 'info',\n  inset = 'safe-area',\n  className = '',\n}: EdgeActivityIndicatorProps) {\n  const showMessage = busy && Boolean(message?.trim());\n  return (\n    <div\n      class={`kui-edge-activity-indicator ${className}`.trim()}\n      data-component=\"edge-activity-indicator\"\n      data-tone={tone}\n      data-busy={busy ? 'true' : 'false'}\n      data-inset={inset}\n    >\n      <div class=\"kui-edge-activity-indicator__strip\" aria-hidden=\"true\" />\n      {message !== undefined && (\n        <div\n          class=\"kui-edge-activity-indicator__message\"\n          role=\"status\"\n          aria-live=\"polite\"\n          data-visible={showMessage ? 'true' : 'false'}\n        >\n          {showMessage ? message : ''}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/{chunk-CD5TOO22.js → chunk-QIAPOWHH.js}

@@ -1,5 +1,5 @@
 import { gapLength } from './chunk-6IVNMC6R.js';
-import { filterDataAttributes } from './chunk-LAZLBC2Q.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
 import { jsx } from 'kerfjs/jsx-runtime';
 
 var gridProtectedAttributes = /* @__PURE__ */ new Set([
@@ -79,4 +79,4 @@ function Grid({
 
 export { Grid };
 
-//# sourceMappingURL=chunk-CD5TOO22.js.map
+//# sourceMappingURL=chunk-QIAPOWHH.js.map

package/dist/{chunk-CD5TOO22.js.map → chunk-QIAPOWHH.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/layout/grid/grid.tsx"],"names":[],"mappings":"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","file":"chunk-CD5TOO22.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { gapLength } from '../../../shared/layout/gap.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\nimport {\n  type CssFlex,\n  type CssFlexKeyword,\n  type CssLength,\n  type UiGap,\n} from '../../../shared/styles/css-values.js';\n\nconst gridProtectedAttributes = new Set([\n  'data-component',\n  'data-columns',\n  'data-min-column-width',\n  'data-auto-fill',\n  'data-flex',\n  'data-fill',\n  'data-text-insets',\n  'data-control-insets',\n]);\n\ntype GridRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-columns'?: never;\n    'data-min-column-width'?: never;\n    'data-auto-fill'?: never;\n    'data-flex'?: never;\n    'data-fill'?: never;\n    'data-text-insets'?: never;\n    'data-control-insets'?: never;\n  }\n>;\n\ninterface GridCommonProps {\n  children?: KerfUiContent;\n  /** Make this a labeled multi-select grid for `ContentItem selectionMode=\"multiple\"` tiles. */\n  selectionMode?: 'multiple';\n  /** Accessible name for the multi-select grid. */\n  ariaLabel?: string;\n  /** One spacing value or separate column and row values. Defaults to xs. */\n  gap?: UiGap;\n  /** Allow this grid to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n  flex?: boolean | CssFlexKeyword | CssFlex;\n  /**\n   * Fill the height of a parent with a definite height, such as an app root or\n   * a fixed-height frame, when this grid is that parent's layout root. Inside a\n   * flex layout use `flex` instead. Defaults to false.\n   */\n  fill?: boolean;\n  /** Physical sides that receive the standard 17px text inset. */\n  textInsets?: Sides;\n  /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n  controlInsets?: Sides;\n  className?: string;\n  /** Safe `data-*` metadata; Grid-owned structural attributes remain protected. */\n  rootAttributes?: GridRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport type GridProps = GridCommonProps &\n  (\n    | {\n        /** Number of equal-width columns. Must be a positive safe integer. */\n        columns: number;\n        minColumnWidth?: never;\n        autoFill?: never;\n      }\n    | {\n        columns?: never;\n        /** Fit equal columns of at least this width; collapse as the container narrows. */\n        minColumnWidth: CssLength;\n        /** Keep empty tracks instead of stretching a sparse row. Defaults to false. */\n        autoFill?: boolean;\n      }\n  );\n\n/** Render equal tracks with a fixed count or a responsive minimum width. */\nexport function Grid({\n  children,\n  selectionMode,\n  ariaLabel,\n  columns,\n  minColumnWidth,\n  autoFill = false,\n  gap = 'xs',\n  flex = false,\n  fill = false,\n  textInsets = '',\n  controlInsets = '',\n  className = '',\n  rootAttributes = {},\n  slot,\n}: GridProps) {\n  if (selectionMode === 'multiple' && !ariaLabel) {\n    throw new Error('Multi-select Grid requires an ariaLabel');\n  }\n  if (minColumnWidth !== undefined && columns !== undefined) {\n    throw new RangeError(\n      'Grid columns and minColumnWidth are mutually exclusive',\n    );\n  }\n  if (autoFill && minColumnWidth === undefined) {\n    throw new RangeError('Grid autoFill requires minColumnWidth');\n  }\n  if (\n    minColumnWidth === undefined &&\n    (columns === undefined || !Number.isSafeInteger(columns) || columns < 1)\n  ) {\n    throw new RangeError('Grid columns must be a positive safe integer');\n  }\n\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    gridProtectedAttributes,\n  );\n  const gapStyle =\n    typeof gap === 'string'\n      ? `--_kui-grid-gap:${gapLength(gap)}`\n      : `--_kui-grid-column-gap:${gapLength(gap.column)};--_kui-grid-row-gap:${gapLength(gap.row)}`;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [\n    columns === undefined ? '' : `--_kui-grid-columns:${columns}`,\n    minColumnWidth === undefined\n      ? ''\n      : `--_kui-grid-min-column-width:${minColumnWidth}`,\n    gapStyle,\n    flexValue ? `--_kui-grid-flex:${flexValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      {...safeRootAttributes}\n      class={`kui-grid ${className}`.trim()}\n      data-component=\"grid\"\n      role={selectionMode === 'multiple' ? 'grid' : undefined}\n      aria-label={selectionMode === 'multiple' ? ariaLabel : undefined}\n      aria-multiselectable={selectionMode === 'multiple' ? 'true' : undefined}\n      data-columns={columns === undefined ? undefined : String(columns)}\n      data-min-column-width={minColumnWidth === undefined ? undefined : 'true'}\n      data-auto-fill={autoFill ? 'true' : undefined}\n      data-flex={String(Boolean(flex))}\n      data-fill={fill ? 'true' : undefined}\n      data-text-insets={textInsets || undefined}\n      data-control-insets={controlInsets || undefined}\n      style={style}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\nexport type {\n  CssFlex,\n  CssFlexKeyword,\n  CssLength,\n  UiGap,\n  UiGapValue,\n  UiSpaceName,\n} from '../../../shared/styles/css-values.js';\n"]}
+{"version":3,"sources":["../src/components/layout/grid/grid.tsx"],"names":[],"mappings":"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","file":"chunk-QIAPOWHH.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { gapLength } from '../../../shared/layout/gap.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\nimport {\n  type CssFlex,\n  type CssFlexKeyword,\n  type CssLength,\n  type UiGap,\n} from '../../../shared/styles/css-values.js';\n\nconst gridProtectedAttributes = new Set([\n  'data-component',\n  'data-columns',\n  'data-min-column-width',\n  'data-auto-fill',\n  'data-flex',\n  'data-fill',\n  'data-text-insets',\n  'data-control-insets',\n]);\n\ntype GridRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-columns'?: never;\n    'data-min-column-width'?: never;\n    'data-auto-fill'?: never;\n    'data-flex'?: never;\n    'data-fill'?: never;\n    'data-text-insets'?: never;\n    'data-control-insets'?: never;\n  }\n>;\n\ninterface GridCommonProps {\n  children?: KerfUiContent;\n  /** Make this a labeled multi-select grid for `ContentItem selectionMode=\"multiple\"` tiles. */\n  selectionMode?: 'multiple';\n  /** Accessible name for the multi-select grid. */\n  ariaLabel?: string;\n  /** One spacing value or separate column and row values. Defaults to xs. */\n  gap?: UiGap;\n  /** Allow this grid to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n  flex?: boolean | CssFlexKeyword | CssFlex;\n  /**\n   * Fill the height of a parent with a definite height, such as an app root or\n   * a fixed-height frame, when this grid is that parent's layout root. Inside a\n   * flex layout use `flex` instead. Defaults to false.\n   */\n  fill?: boolean;\n  /** Physical sides that receive the standard 17px text inset. */\n  textInsets?: Sides;\n  /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n  controlInsets?: Sides;\n  className?: string;\n  /** Safe `data-*` metadata; Grid-owned structural attributes remain protected. */\n  rootAttributes?: GridRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport type GridProps = GridCommonProps &\n  (\n    | {\n        /** Number of equal-width columns. Must be a positive safe integer. */\n        columns: number;\n        minColumnWidth?: never;\n        autoFill?: never;\n      }\n    | {\n        columns?: never;\n        /** Fit equal columns of at least this width; collapse as the container narrows. */\n        minColumnWidth: CssLength;\n        /** Keep empty tracks instead of stretching a sparse row. Defaults to false. */\n        autoFill?: boolean;\n      }\n  );\n\n/** Render equal tracks with a fixed count or a responsive minimum width. */\nexport function Grid({\n  children,\n  selectionMode,\n  ariaLabel,\n  columns,\n  minColumnWidth,\n  autoFill = false,\n  gap = 'xs',\n  flex = false,\n  fill = false,\n  textInsets = '',\n  controlInsets = '',\n  className = '',\n  rootAttributes = {},\n  slot,\n}: GridProps) {\n  if (selectionMode === 'multiple' && !ariaLabel) {\n    throw new Error('Multi-select Grid requires an ariaLabel');\n  }\n  if (minColumnWidth !== undefined && columns !== undefined) {\n    throw new RangeError(\n      'Grid columns and minColumnWidth are mutually exclusive',\n    );\n  }\n  if (autoFill && minColumnWidth === undefined) {\n    throw new RangeError('Grid autoFill requires minColumnWidth');\n  }\n  if (\n    minColumnWidth === undefined &&\n    (columns === undefined || !Number.isSafeInteger(columns) || columns < 1)\n  ) {\n    throw new RangeError('Grid columns must be a positive safe integer');\n  }\n\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    gridProtectedAttributes,\n  );\n  const gapStyle =\n    typeof gap === 'string'\n      ? `--_kui-grid-gap:${gapLength(gap)}`\n      : `--_kui-grid-column-gap:${gapLength(gap.column)};--_kui-grid-row-gap:${gapLength(gap.row)}`;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [\n    columns === undefined ? '' : `--_kui-grid-columns:${columns}`,\n    minColumnWidth === undefined\n      ? ''\n      : `--_kui-grid-min-column-width:${minColumnWidth}`,\n    gapStyle,\n    flexValue ? `--_kui-grid-flex:${flexValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      {...safeRootAttributes}\n      class={`kui-grid ${className}`.trim()}\n      data-component=\"grid\"\n      role={selectionMode === 'multiple' ? 'grid' : undefined}\n      aria-label={selectionMode === 'multiple' ? ariaLabel : undefined}\n      aria-multiselectable={selectionMode === 'multiple' ? 'true' : undefined}\n      data-columns={columns === undefined ? undefined : String(columns)}\n      data-min-column-width={minColumnWidth === undefined ? undefined : 'true'}\n      data-auto-fill={autoFill ? 'true' : undefined}\n      data-flex={String(Boolean(flex))}\n      data-fill={fill ? 'true' : undefined}\n      data-text-insets={textInsets || undefined}\n      data-control-insets={controlInsets || undefined}\n      style={style}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\nexport type {\n  CssFlex,\n  CssFlexKeyword,\n  CssLength,\n  UiGap,\n  UiGapValue,\n  UiSpaceName,\n} from '../../../shared/styles/css-values.js';\n"]}

package/dist/chunk-QQ3TTWFH.js

@@ -0,0 +1,29 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/components/feedback/corner-status/corner-status.tsx
+function CornerStatus({
+  id,
+  children,
+  placement = "bottom-end",
+  presentation = "overlay",
+  className = "",
+  slot
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      class: `kui-corner-status ${className}`.trim(),
+      "data-component": "corner-status",
+      "data-placement": placement,
+      "data-presentation": presentation,
+      popover: presentation === "overlay" ? "manual" : void 0,
+      slot,
+      children
+    }
+  );
+}
+
+export { CornerStatus };
+
+//# sourceMappingURL=chunk-QQ3TTWFH.js.map

package/dist/chunk-QQ3TTWFH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/corner-status/corner-status.tsx"],"names":[],"mappings":";;;AAoCO,SAAS,YAAA,CAAa;AAAA,EAC3B,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,YAAA;AAAA,EACZ,YAAA,GAAe,SAAA;AAAA,EACf,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAsB;AACpB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,kBAAA,EAAqB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC7C,gBAAA,EAAe,eAAA;AAAA,MACf,gBAAA,EAAgB,SAAA;AAAA,MAChB,mBAAA,EAAmB,YAAA;AAAA,MACnB,OAAA,EAAS,YAAA,KAAiB,SAAA,GAAY,QAAA,GAAW,MAAA;AAAA,MACjD,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-QQ3TTWFH.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\n\n/** The viewport corner a CornerStatus occupies, in logical (RTL-aware) terms. */\nexport type CornerStatusPlacement =\n  'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';\n\n/** Where a CornerStatus appears: the top layer, or in flow. */\nexport type CornerStatusPresentation = 'overlay' | 'embedded';\n\nexport interface CornerStatusProps {\n  /** The root id: what a `popovertarget` control or `getElementById` names. */\n  id?: string;\n  /** One or more `StateBanner`s, typically `urgency=\"status\"`; they stack. */\n  children: KerfUiContent;\n  /** Viewport corner; defaults to `bottom-end`. */\n  placement?: CornerStatusPlacement;\n  /**\n   * `overlay` (default) is a native `popover=\"manual\"` host in the top layer,\n   * opened by `wireCornerStatus`: above fixed and z-indexed page chrome,\n   * never focused, and with no close button, light dismiss, or Escape.\n   * `embedded` renders the same stack in flow for a catalog or inline use.\n   */\n  presentation?: CornerStatusPresentation;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A non-dismissible status surface pinned to a viewport corner — \"Loading…\",\n * \"Updating tickets… 3 of 12\" — for app-level progress that has no better\n * home beside the affected work. The application owns its lifetime: render it\n * while the work runs and remove it when the work ends. It carries no role of\n * its own; the composed `StateBanner` is the polite live region. Use a toast\n * for transient, dismissible confirmation instead.\n */\nexport function CornerStatus({\n  id,\n  children,\n  placement = 'bottom-end',\n  presentation = 'overlay',\n  className = '',\n  slot,\n}: CornerStatusProps) {\n  return (\n    <div\n      id={id}\n      class={`kui-corner-status ${className}`.trim()}\n      data-component=\"corner-status\"\n      data-placement={placement}\n      data-presentation={presentation}\n      popover={presentation === 'overlay' ? 'manual' : undefined}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/chunk-QYMJHS4K.js

@@ -0,0 +1,36 @@
+import { filterRootAttributes } from './chunk-KH4KEMSP.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var columnTrackProtected = /* @__PURE__ */ new Set(["data-component", "data-layout"]);
+function ColumnTrack({
+  children,
+  layout = "scroll",
+  minColumnWidth,
+  peek,
+  id,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const style = [
+    minColumnWidth === void 0 ? "" : `--_kui-column-track-min-width:${minColumnWidth}`,
+    peek === void 0 ? "" : `--_kui-column-track-peek:${peek}`
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...filterRootAttributes(rootAttributes, columnTrackProtected),
+      id,
+      class: `kui-column-track ${className}`.trim(),
+      "data-component": "column-track",
+      "data-layout": layout,
+      style: style || void 0,
+      slot,
+      children: /* @__PURE__ */ jsx("div", { class: "kui-column-track__columns", children })
+    }
+  );
+}
+
+export { ColumnTrack };
+
+//# sourceMappingURL=chunk-QYMJHS4K.js.map

package/dist/chunk-QYMJHS4K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/column-track/column-track.tsx"],"names":[],"mappings":";;;AAUA,IAAM,uCAAuB,IAAI,GAAA,CAAI,CAAC,gBAAA,EAAkB,aAAa,CAAC,CAAA;AAiC/D,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,MAAA,GAAS,QAAA;AAAA,EACT,cAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,cAAA,KAAmB,MAAA,GACf,EAAA,GACA,CAAA,8BAAA,EAAiC,cAAc,CAAA,CAAA;AAAA,IACnD,IAAA,KAAS,MAAA,GAAY,EAAA,GAAK,CAAA,yBAAA,EAA4B,IAAI,CAAA;AAAA,GAC5D,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,oBAAoB,CAAA;AAAA,MAC7D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,aAAA,EAAa,MAAA;AAAA,MACb,OAAO,KAAA,IAAS,MAAA;AAAA,MAChB,IAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,2BAAA,EAA6B,QAAA,EAAS;AAAA;AAAA,GACnD;AAEJ","file":"chunk-QYMJHS4K.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  filterRootAttributes,\n  type StructuralRootAttributes,\n} from '../../../shared/dom/extension-attributes.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\n\n/** `scroll` keeps equal min-width columns; `paged` shows one near-full-width column per page. */\nexport type ColumnTrackLayout = 'scroll' | 'paged';\n\nconst columnTrackProtected = new Set(['data-component', 'data-layout']);\n\ntype ColumnTrackRootAttributes = StructuralRootAttributes &\n  Readonly<{ 'data-component'?: never; 'data-layout'?: never }>;\n\nexport interface ColumnTrackProps {\n  /** The columns, in order; each owns its own inset and scrolling. */\n  children: KerfUiContent;\n  /**\n   * `scroll` (default): equal columns that never shrink below\n   * `minColumnWidth`, so a narrow track scrolls sideways instead of crushing\n   * them. `paged`: each column is nearly the visible width, the next one peeks\n   * in, and scrolling snaps to column starts.\n   */\n  layout?: ColumnTrackLayout;\n  /** Narrowest a `scroll` column gets before the track scrolls; default 250px. */\n  minColumnWidth?: CssLength;\n  /** How much of the next column a `paged` track shows; default 24px. */\n  peek?: CssLength;\n  id?: string;\n  className?: string;\n  /** Safe `data-*`, `aria-*`, and structural `role` metadata on the scroller. */\n  rootAttributes?: ColumnTrackRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A horizontal track of columns (a kanban board): the track is the sideways\n * scroll owner and fills its parent's height; columns sit flush and own their\n * insets and vertical scrolling. Kerf owns the overflow, the paged snapping,\n * and reduced motion.\n */\nexport function ColumnTrack({\n  children,\n  layout = 'scroll',\n  minColumnWidth,\n  peek,\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ColumnTrackProps) {\n  const style = [\n    minColumnWidth === undefined\n      ? ''\n      : `--_kui-column-track-min-width:${minColumnWidth}`,\n    peek === undefined ? '' : `--_kui-column-track-peek:${peek}`,\n  ]\n    .filter(Boolean)\n    .join(';');\n  return (\n    <div\n      {...filterRootAttributes(rootAttributes, columnTrackProtected)}\n      id={id}\n      class={`kui-column-track ${className}`.trim()}\n      data-component=\"column-track\"\n      data-layout={layout}\n      style={style || undefined}\n      slot={slot}\n    >\n      <div class=\"kui-column-track__columns\">{children}</div>\n    </div>\n  );\n}\n"]}

package/dist/chunk-R42D2BAO.js

@@ -0,0 +1,44 @@
+import { LucideIcon } from './chunk-UKKRPP56.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var iconToggleProtected = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-shape"
+]);
+function IconToggleButton({
+  icon,
+  iconName,
+  label,
+  pressed,
+  action,
+  shape = "pill",
+  disabled = false,
+  id,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...filterDataAttributes(rootAttributes, iconToggleProtected),
+      type: "button",
+      id,
+      class: `kui-icon-toggle-button ${className}`.trim(),
+      "data-component": "icon-toggle-button",
+      "data-action": action,
+      "data-shape": shape,
+      "aria-label": label,
+      "aria-pressed": pressed ? "true" : "false",
+      disabled,
+      slot,
+      children: /* @__PURE__ */ jsx("span", { class: "kui-icon-toggle-button__face", "aria-hidden": "true", children: /* @__PURE__ */ jsx(LucideIcon, { icon, name: iconName }) })
+    }
+  );
+}
+
+export { IconToggleButton };
+
+//# sourceMappingURL=chunk-R42D2BAO.js.map

package/dist/chunk-R42D2BAO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/actions/icon-toggle-button/icon-toggle-button.tsx"],"names":[],"mappings":";;;;AASA,IAAM,mBAAA,uBAA0B,GAAA,CAAI;AAAA,EAClC,gBAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAC,CAAA;AAsCM,SAAS,gBAAA,CAAiB;AAAA,EAC/B,IAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,QAAA,GAAW,KAAA;AAAA,EACX,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAA0B;AACxB,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,mBAAmB,CAAA;AAAA,MAC5D,IAAA,EAAK,QAAA;AAAA,MACL,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,uBAAA,EAA0B,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAClD,gBAAA,EAAe,oBAAA;AAAA,MACf,aAAA,EAAa,MAAA;AAAA,MACb,YAAA,EAAY,KAAA;AAAA,MACZ,YAAA,EAAY,KAAA;AAAA,MACZ,cAAA,EAAc,UAAU,MAAA,GAAS,OAAA;AAAA,MACjC,QAAA;AAAA,MACA,IAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,8BAAA,EAA+B,aAAA,EAAY,MAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAY,IAAA,EAAM,QAAA,EAAU,CAAA,EAC1C;AAAA;AAAA,GACF;AAEJ","file":"chunk-R42D2BAO.js","sourcesContent":["import { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport {\n  LucideIcon,\n  type LucideNode,\n} from '../../media/lucide-icon/lucide-icon.js';\n\n/** Corner shape: fully round `pill` (default) or a softer `rounded` square. */\nexport type IconToggleButtonShape = 'pill' | 'rounded';\n\nconst iconToggleProtected = new Set([\n  'data-component',\n  'data-action',\n  'data-shape',\n]);\n\ntype IconToggleButtonRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-shape'?: never;\n  }\n>;\n\nexport interface IconToggleButtonProps {\n  /** The Lucide-compatible icon node. */\n  icon: LucideNode;\n  /** The icon's stable name, as `LucideIcon` takes it. */\n  iconName: string;\n  /** Accessible name and hover help tag; required because no text is shown. */\n  label: string;\n  /** Pressed state, exposed as `aria-pressed`; the application owns it. */\n  pressed: boolean;\n  /** Delegated `data-action` the application handles to flip `pressed`. */\n  action?: string;\n  shape?: IconToggleButtonShape;\n  disabled?: boolean;\n  id?: string;\n  className?: string;\n  /** Safe `data-*` metadata; IconToggleButton-owned markers stay protected. */\n  rootAttributes?: IconToggleButtonRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A standalone, icon-only toggle: a native `<button aria-pressed>` with the\n * geometry and pressed chrome of a single contained `ToolbarControlGroup`\n * (44px, a 2px-inset face that rises when pressed), for content and pane\n * footers where no `Toolbar` belongs. Inside a toolbar, use a\n * `ToolbarControlGroup` instead.\n */\nexport function IconToggleButton({\n  icon,\n  iconName,\n  label,\n  pressed,\n  action,\n  shape = 'pill',\n  disabled = false,\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: IconToggleButtonProps) {\n  return (\n    <button\n      {...filterDataAttributes(rootAttributes, iconToggleProtected)}\n      type=\"button\"\n      id={id}\n      class={`kui-icon-toggle-button ${className}`.trim()}\n      data-component=\"icon-toggle-button\"\n      data-action={action}\n      data-shape={shape}\n      aria-label={label}\n      aria-pressed={pressed ? 'true' : 'false'}\n      disabled={disabled}\n      slot={slot}\n    >\n      <span class=\"kui-icon-toggle-button__face\" aria-hidden=\"true\">\n        <LucideIcon icon={icon} name={iconName} />\n      </span>\n    </button>\n  );\n}\n"]}