@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/dist/chunk-FKKJHGN5.js

@@ -0,0 +1,147 @@
+import { NavStack } from './chunk-ZXZAECHZ.js';
+import { ResizableRegion } from './chunk-Y6KT7ZTR.js';
+import { remify, pct } from './chunk-IQSRHXZR.js';
+import { jsx, jsxs } from 'kerfjs/jsx-runtime';
+
+function listWidthValue(listWidth) {
+  const { size, maxFraction } = typeof listWidth === "number" ? { size: listWidth, maxFraction: void 0 } : listWidth;
+  if (!Number.isFinite(size) || size <= 0)
+    throw new RangeError(
+      "SplitView listWidth size must be a positive number of pixels"
+    );
+  if (maxFraction !== void 0 && (!Number.isFinite(maxFraction) || maxFraction <= 0 || maxFraction > 1))
+    throw new RangeError(
+      "SplitView listWidth maxFraction must be greater than 0 and at most 1"
+    );
+  const preferred = remify(size);
+  return maxFraction === void 0 ? preferred : `min(${preferred}, ${pct(maxFraction * 100)})`;
+}
+function SplitView({
+  id,
+  label,
+  list,
+  detail,
+  compact = false,
+  detailActive = false,
+  listTitle = "",
+  detailTitle = "",
+  backLabel = "Back",
+  compactStack = {},
+  resizable,
+  listWidth,
+  className = "",
+  slot
+}) {
+  if (listWidth !== void 0 && resizable)
+    throw new RangeError(
+      "SplitView listWidth applies to a fixed split; size a resizable list with resizable.size, min, and max"
+    );
+  const listWidthStyle = listWidth === void 0 ? void 0 : `--kui-split-view-list-width:${listWidthValue(listWidth)}`;
+  if (compact) {
+    const listView = {
+      ...compactStack.list,
+      key: "list",
+      toolbar: { ...compactStack.list?.toolbar, title: listTitle },
+      content: list
+    };
+    const views = detailActive ? [
+      listView,
+      {
+        ...compactStack.detail,
+        key: "detail",
+        toolbar: { ...compactStack.detail?.toolbar, title: detailTitle },
+        content: detail
+      }
+    ] : [listView];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        class: `kui-split-view kui-split-view--compact ${className}`.trim(),
+        id,
+        "data-component": "split-view",
+        "data-split-mode": "compact",
+        slot,
+        children: /* @__PURE__ */ jsx(
+          NavStack,
+          {
+            id: `${id}-stack`,
+            label,
+            views,
+            backLabel,
+            backIcon: compactStack.backIcon,
+            backText: compactStack.backText,
+            toolbarConfig: compactStack.toolbarConfig,
+            hideToolbar: compactStack.hideToolbar,
+            bottomToolbar: compactStack.bottomToolbar,
+            chromeDividers: compactStack.chromeDividers,
+            chromePresentation: compactStack.chromePresentation,
+            bottomToolbarPresentation: compactStack.bottomToolbarPresentation
+          }
+        )
+      }
+    );
+  }
+  const listPane = resizable ? /* @__PURE__ */ jsx(
+    ResizableRegion,
+    {
+      id: `${id}-list`,
+      label: listTitle || "List",
+      size: resizable.size,
+      min: resizable.min,
+      max: resizable.max,
+      separator: resizable.separator,
+      handleIcon: resizable.handleIcon,
+      contentOverflow: resizable.contentOverflow,
+      collapsed: resizable.collapsed,
+      transitioning: resizable.transitioning,
+      collapseMotion: resizable.collapseMotion,
+      restoreControl: resizable.restoreControl,
+      restorePosition: resizable.restorePosition,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          class: "kui-split-view__list kui-pane",
+          "data-split-list": true,
+          "data-resizable": "true",
+          children: list
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: "kui-split-view__list kui-pane",
+      "data-split-list": true,
+      "data-resizable": "false",
+      children: list
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: `kui-split-view ${className}`.trim(),
+      id,
+      "data-component": "split-view",
+      "data-split-mode": "split",
+      "aria-label": label,
+      style: listWidthStyle,
+      slot,
+      children: [
+        listPane,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-split-view__detail kui-pane",
+            "data-split-detail": true,
+            "aria-label": detailTitle || void 0,
+            children: detail
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { SplitView };
+
+//# sourceMappingURL=chunk-FKKJHGN5.js.map

package/dist/chunk-FKKJHGN5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/split-view/split-view.tsx"],"names":[],"mappings":"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","file":"chunk-FKKJHGN5.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { pct, remify } from '../../../shared/styles/css-values.js';\nimport {\n  NavStack,\n  type NavStackProps,\n  type NavStackView,\n} from '../../navigation/nav-stack/nav-stack.js';\nimport {\n  ResizableRegion,\n  type ResizableRegionProps,\n} from '../resizable-region/resizable-region.js';\n\n/**\n * The roomy list pane's `ResizableRegion`: its committed `size` and `min` /\n * `max` limits, plus the region configuration that forwards unchanged\n * (`separator`, `handleIcon`, `contentOverflow`, and collapse:\n * `collapsed`, `transitioning`, `collapseMotion`, `restoreControl`,\n * `restorePosition`). Omitted options keep the region's defaults.\n */\nexport interface SplitViewResizable extends Pick<\n  ResizableRegionProps,\n  | 'separator'\n  | 'handleIcon'\n  | 'contentOverflow'\n  | 'collapsed'\n  | 'transitioning'\n  | 'collapseMotion'\n  | 'restoreControl'\n  | 'restorePosition'\n> {\n  size: number;\n  min: number;\n  max: number;\n}\n\n/**\n * One compact view's top- and bottom-toolbar content and pinned footer (see\n * `NavStackView`).\n */\nexport type SplitViewCompactViewToolbars = Pick<\n  NavStackView,\n  'toolbar' | 'bottomToolbar' | 'footer'\n>;\n\n/**\n * The compact `NavStack`'s configuration: its toolbar configuration, back\n * control, persistent bottom toolbar, chrome dividers, and chrome and\n * bottom-toolbar presentations forward to the stack, and `list` / `detail`\n * give each view its own toolbar groups.\n */\nexport interface SplitViewCompactStack extends Pick<\n  NavStackProps,\n  | 'toolbarConfig'\n  | 'backIcon'\n  | 'backText'\n  | 'hideToolbar'\n  | 'bottomToolbar'\n  | 'chromeDividers'\n  | 'chromePresentation'\n  | 'bottomToolbarPresentation'\n> {\n  /** Toolbar content for the list (root) view. */\n  list?: SplitViewCompactViewToolbars;\n  /** Toolbar content for the pushed detail view. */\n  detail?: SplitViewCompactViewToolbars;\n}\n\n/**\n * The fixed list column's width: a size in CSS pixels, or that size capped\n * at a fraction of the SplitView's own width so a narrow container (a\n * dialog, a small window) always leaves the detail in view.\n */\nexport type SplitViewListWidth =\n  | number\n  | {\n      /** Preferred width in CSS pixels. */\n      size: number;\n      /** Largest share of the SplitView's width, greater than 0 and at most 1. */\n      maxFraction?: number;\n    };\n\n/** The list-width custom property value for a fixed split. */\nfunction listWidthValue(listWidth: SplitViewListWidth): string {\n  const { size, maxFraction } =\n    typeof listWidth === 'number'\n      ? { size: listWidth, maxFraction: undefined }\n      : listWidth;\n  if (!Number.isFinite(size) || size <= 0)\n    throw new RangeError(\n      'SplitView listWidth size must be a positive number of pixels',\n    );\n  if (\n    maxFraction !== undefined &&\n    (!Number.isFinite(maxFraction) || maxFraction <= 0 || maxFraction > 1)\n  )\n    throw new RangeError(\n      'SplitView listWidth maxFraction must be greater than 0 and at most 1',\n    );\n  const preferred = remify(size);\n  return maxFraction === undefined\n    ? preferred\n    : `min(${preferred}, ${pct(maxFraction * 100)})`;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: KerfUiContent;\n  /** The detail (secondary) pane. */\n  detail: KerfUiContent;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** Compact NavStack configuration and per-view toolbars. */\n  compactStack?: SplitViewCompactStack;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  /**\n   * The fixed split's list column width (default 320px). A number is CSS\n   * pixels; `{ size, maxFraction }` caps it at that share of the SplitView's\n   * width. A resizable split sizes its list with `resizable` instead.\n   */\n  listWidth?: SplitViewListWidth;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({\n  id,\n  label,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  listTitle = '',\n  detailTitle = '',\n  backLabel = 'Back',\n  compactStack = {},\n  resizable,\n  listWidth,\n  className = '',\n  slot,\n}: SplitViewProps) {\n  if (listWidth !== undefined && resizable)\n    throw new RangeError(\n      'SplitView listWidth applies to a fixed split; size a resizable list with resizable.size, min, and max',\n    );\n  const listWidthStyle =\n    listWidth === undefined\n      ? undefined\n      : `--kui-split-view-list-width:${listWidthValue(listWidth)}`;\n  if (compact) {\n    const listView: NavStackView = {\n      ...compactStack.list,\n      key: 'list',\n      toolbar: { ...compactStack.list?.toolbar, title: listTitle },\n      content: list,\n    };\n    const views: NavStackView[] = detailActive\n      ? [\n          listView,\n          {\n            ...compactStack.detail,\n            key: 'detail',\n            toolbar: { ...compactStack.detail?.toolbar, title: detailTitle },\n            content: detail,\n          },\n        ]\n      : [listView];\n    return (\n      <div\n        class={`kui-split-view kui-split-view--compact ${className}`.trim()}\n        id={id}\n        data-component=\"split-view\"\n        data-split-mode=\"compact\"\n        slot={slot}\n      >\n        <NavStack\n          id={`${id}-stack`}\n          label={label}\n          views={views}\n          backLabel={backLabel}\n          backIcon={compactStack.backIcon}\n          backText={compactStack.backText}\n          toolbarConfig={compactStack.toolbarConfig}\n          hideToolbar={compactStack.hideToolbar}\n          bottomToolbar={compactStack.bottomToolbar}\n          chromeDividers={compactStack.chromeDividers}\n          chromePresentation={compactStack.chromePresentation}\n          bottomToolbarPresentation={compactStack.bottomToolbarPresentation}\n        />\n      </div>\n    );\n  }\n  const listPane = resizable ? (\n    <ResizableRegion\n      id={`${id}-list`}\n      label={listTitle || 'List'}\n      size={resizable.size}\n      min={resizable.min}\n      max={resizable.max}\n      separator={resizable.separator}\n      handleIcon={resizable.handleIcon}\n      contentOverflow={resizable.contentOverflow}\n      collapsed={resizable.collapsed}\n      transitioning={resizable.transitioning}\n      collapseMotion={resizable.collapseMotion}\n      restoreControl={resizable.restoreControl}\n      restorePosition={resizable.restorePosition}\n    >\n      <div\n        class=\"kui-split-view__list kui-pane\"\n        data-split-list\n        data-resizable=\"true\"\n      >\n        {list}\n      </div>\n    </ResizableRegion>\n  ) : (\n    <div\n      class=\"kui-split-view__list kui-pane\"\n      data-split-list\n      data-resizable=\"false\"\n    >\n      {list}\n    </div>\n  );\n  return (\n    <div\n      class={`kui-split-view ${className}`.trim()}\n      id={id}\n      data-component=\"split-view\"\n      data-split-mode=\"split\"\n      aria-label={label}\n      style={listWidthStyle}\n      slot={slot}\n    >\n      {listPane}\n      <div\n        class=\"kui-split-view__detail kui-pane\"\n        data-split-detail\n        aria-label={detailTitle || undefined}\n      >\n        {detail}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/{chunk-FDZNYD4C.js → chunk-GCAK23PU.js}

@@ -1,3 +1,5 @@
+import { followAnchor, positionPopup } from './chunk-PE2KPZDW.js';
+
 // src/components/forms/combobox/wiring/wire-comboboxes.ts
 var INPUT = ".kui-combobox__input";
 function partsOf(input) {
@@ -26,8 +28,36 @@ function activeOption(parts) {
   const id = parts.input.getAttribute("aria-activedescendant");
   return id ? parts.listbox.querySelector(`#${CSS.escape(id)}`) : null;
 }
+var following = /* @__PURE__ */ new WeakMap();
+function show(parts) {
+  const { listbox } = parts;
+  listbox.hidden = false;
+  if (!listbox.matches(":popover-open")) listbox.showPopover();
+  if (following.has(listbox)) return;
+  const control = parts.input.parentElement;
+  const place = async () => {
+    if (!listbox.isConnected || listbox.hidden) return;
+    listbox.style.width = `${control.getBoundingClientRect().width}px`;
+    await positionPopup(control, listbox, {
+      placement: "bottom-start",
+      gap: 4
+    });
+    listbox.style.maxHeight = `min(${listbox.style.maxHeight}, var(--_kui-combobox-max-height))`;
+  };
+  following.set(
+    listbox,
+    followAnchor(control, listbox, () => void place())
+  );
+}
+function hide(parts) {
+  const { listbox } = parts;
+  listbox.hidden = true;
+  if (listbox.matches(":popover-open")) listbox.hidePopover();
+  following.get(listbox)?.();
+  following.delete(listbox);
+}
 function close(parts) {
-  parts.listbox.hidden = true;
+  hide(parts);
   parts.input.setAttribute("aria-expanded", "false");
   setActive(parts, null);
 }
@@ -50,7 +80,8 @@ function update(parts) {
     );
   }
   const options = visibleOptions(parts);
-  parts.listbox.hidden = options.length === 0;
+  if (options.length === 0) hide(parts);
+  else show(parts);
   parts.input.setAttribute("aria-expanded", String(options.length > 0));
   if (!options.includes(activeOption(parts))) setActive(parts, null);
 }
@@ -135,4 +166,4 @@ function wireComboboxes(root, { onCommit, commitKeys = [","] }) {
 
 export { wireComboboxes };
 
-//# sourceMappingURL=chunk-FDZNYD4C.js.map
+//# sourceMappingURL=chunk-GCAK23PU.js.map

package/dist/chunk-GCAK23PU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/combobox/wiring/wire-comboboxes.ts"],"names":[],"mappings":"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","file":"chunk-GCAK23PU.js","sourcesContent":["import {\n  followAnchor,\n  positionPopup,\n} from '../../../../shared/popup/position-popup.js';\n\ntype Root = HTMLElement | Document;\n\nconst INPUT = '.kui-combobox__input';\n\n/** A committed combobox value. */\nexport interface ComboboxCommit {\n  id: string;\n  value: string;\n  /** True when the value matched no suggestion (the person created it). */\n  created: boolean;\n  /** The field's input; clear or keep its text after applying the commit. */\n  input: HTMLInputElement;\n}\n\nexport interface WireComboboxesOptions {\n  onCommit: (commit: ComboboxCommit) => void;\n  /** Characters that commit the typed text besides Enter. Default `[',']`. */\n  commitKeys?: readonly string[];\n}\n\ninterface Parts {\n  field: HTMLElement;\n  input: HTMLInputElement;\n  listbox: HTMLElement;\n  create: HTMLElement | null;\n}\n\n// `Combobox` renders the input inside its field with its listbox, and every\n// suggestion option with `data-value`, so the lookups below cannot miss.\nfunction partsOf(input: HTMLInputElement): Parts {\n  const field = input.closest<HTMLElement>('[data-component=\"combobox\"]')!;\n  const listbox = field.querySelector<HTMLElement>('[role=\"listbox\"]')!;\n  return {\n    field,\n    input,\n    listbox,\n    create: listbox.querySelector<HTMLElement>('[data-create]'),\n  };\n}\n\nconst visibleOptions = (parts: Parts) =>\n  [...parts.listbox.querySelectorAll<HTMLElement>('[role=\"option\"]')].filter(\n    (option) => !option.hidden,\n  );\n\nconst matches = (option: HTMLElement, text: string) =>\n  option.textContent!.toLowerCase().includes(text) ||\n  option.dataset.value!.toLowerCase().includes(text);\n\nfunction setActive(parts: Parts, option: HTMLElement | null) {\n  for (const item of parts.listbox.querySelectorAll('[role=\"option\"]'))\n    item.setAttribute('aria-selected', String(item === option));\n  if (option) {\n    parts.input.setAttribute('aria-activedescendant', option.id);\n    option.scrollIntoView?.({ block: 'nearest' });\n  } else parts.input.removeAttribute('aria-activedescendant');\n}\n\nfunction activeOption(parts: Parts): HTMLElement | null {\n  const id = parts.input.getAttribute('aria-activedescendant');\n  return id\n    ? parts.listbox.querySelector<HTMLElement>(`#${CSS.escape(id)}`)\n    : null;\n}\n\n// The listbox is a manual popover in the top layer, so no clipping or\n// scrolling ancestor (an AnchoredSurface, a dialog, a scrolling List) cuts\n// it off; it follows the field while shown.\nconst following = new WeakMap<HTMLElement, () => void>();\n\nfunction show(parts: Parts) {\n  const { listbox } = parts;\n  listbox.hidden = false;\n  if (!listbox.matches(':popover-open')) listbox.showPopover();\n  if (following.has(listbox)) return;\n  const control = parts.input.parentElement!;\n  const place = async () => {\n    if (!listbox.isConnected || listbox.hidden) return;\n    listbox.style.width = `${control.getBoundingClientRect().width}px`;\n    await positionPopup(control, listbox, {\n      placement: 'bottom-start',\n      gap: 4,\n    });\n    // Placement caps the height to the room its side has; keep the list's\n    // own cap too.\n    listbox.style.maxHeight = `min(${listbox.style.maxHeight}, var(--_kui-combobox-max-height))`;\n  };\n  following.set(\n    listbox,\n    followAnchor(control, listbox, () => void place()),\n  );\n}\n\nfunction hide(parts: Parts) {\n  const { listbox } = parts;\n  listbox.hidden = true;\n  if (listbox.matches(':popover-open')) listbox.hidePopover();\n  following.get(listbox)?.();\n  following.delete(listbox);\n}\n\nfunction close(parts: Parts) {\n  hide(parts);\n  parts.input.setAttribute('aria-expanded', 'false');\n  setActive(parts, null);\n}\n\n/** Filter the suggestions to the typed text and show the create option. */\nfunction update(parts: Parts) {\n  const typed = parts.input.value.trim();\n  const text = typed.toLowerCase();\n  let exact = false;\n  for (const option of parts.listbox.querySelectorAll<HTMLElement>(\n    '[role=\"option\"]:not([data-create])',\n  )) {\n    option.hidden = text !== '' && !matches(option, text);\n    if (option.dataset.value!.toLowerCase() === text) exact = true;\n  }\n  if (parts.create) {\n    parts.create.hidden = typed === '' || exact;\n    parts.create.dataset.value = typed;\n    // A create option exists only when the field has a create label.\n    parts.create.textContent = parts.field.dataset.createLabel!.replaceAll(\n      '{value}',\n      typed,\n    );\n  }\n  const options = visibleOptions(parts);\n  if (options.length === 0) hide(parts);\n  else show(parts);\n  parts.input.setAttribute('aria-expanded', String(options.length > 0));\n  if (!options.includes(activeOption(parts)!)) setActive(parts, null);\n}\n\n/**\n * Wire every `Combobox` below root: typing filters the suggestions (and offers\n * to create the typed text), ArrowDown/ArrowUp move the active option, Enter or\n * a commit key (comma by default) commits the active option or the typed text,\n * a click commits an option, and Escape or leaving the field closes the list.\n * Typed text that matches no suggestion commits only when the field offers\n * creation; otherwise Enter commits the first matching suggestion. Dispose with the owning application.\n */\nexport function wireComboboxes(\n  root: Root,\n  { onCommit, commitKeys = [','] }: WireComboboxesOptions,\n): () => void {\n  const commit = (parts: Parts, active: HTMLElement | null) => {\n    // Without a create option, Enter on partial text takes the first match.\n    const option =\n      active ?? (parts.create ? null : (visibleOptions(parts)[0] ?? null));\n    const typed = parts.input.value.trim();\n    // Callers commit only with an option or non-empty typed text.\n    const value = option ? option.dataset.value! : typed;\n    const suggestion = [\n      ...parts.listbox.querySelectorAll<HTMLElement>(\n        '[role=\"option\"]:not([data-create])',\n      ),\n    ].find((item) => item.dataset.value!.toLowerCase() === value.toLowerCase());\n    const created = !suggestion;\n    if (created && !parts.create) return;\n    close(parts);\n    onCommit({\n      id: parts.field.dataset.comboboxId!,\n      value: suggestion?.dataset.value ?? value,\n      created,\n      input: parts.input,\n    });\n  };\n  const inputOf = (event: Event) =>\n    event.target instanceof HTMLInputElement && event.target.matches(INPUT)\n      ? event.target\n      : null;\n  const onInput = (event: Event) => {\n    const input = inputOf(event);\n    const parts = input && partsOf(input);\n    if (parts) update(parts);\n  };\n  const onFocus = onInput;\n  const onKeyDown = (event: Event) => {\n    const keyboard = event as KeyboardEvent;\n    const input = inputOf(keyboard);\n    const parts = input && partsOf(input);\n    if (!parts || keyboard.isComposing) return;\n    const options = visibleOptions(parts);\n    const current = activeOption(parts);\n    const index = current ? options.indexOf(current) : -1;\n    if (keyboard.key === 'ArrowDown' || keyboard.key === 'ArrowUp') {\n      keyboard.preventDefault();\n      if (parts.listbox.hidden) update(parts);\n      const open = visibleOptions(parts);\n      if (open.length === 0) return;\n      const step = keyboard.key === 'ArrowDown' ? 1 : -1;\n      const next =\n        index < 0\n          ? step > 0\n            ? 0\n            : open.length - 1\n          : (index + step + open.length) % open.length;\n      setActive(parts, open[next]!);\n    } else if (keyboard.key === 'Enter' || commitKeys.includes(keyboard.key)) {\n      if (!parts.input.value.trim() && !current) return;\n      keyboard.preventDefault();\n      commit(parts, current);\n    } else if (keyboard.key === 'Escape' && !parts.listbox.hidden) {\n      keyboard.preventDefault();\n      close(parts);\n    }\n  };\n  const onPointerDown = (event: Event) => {\n    const option =\n      event.target instanceof Element\n        ? event.target.closest<HTMLElement>('.kui-combobox__option')\n        : null;\n    const input = option\n      ?.closest('[data-component=\"combobox\"]')\n      ?.querySelector<HTMLInputElement>(INPUT);\n    const parts = input && partsOf(input);\n    if (!option || !parts) return;\n    // Keep focus in the field; commit on the press itself.\n    event.preventDefault();\n    commit(parts, option);\n  };\n  const onFocusOut = (event: Event) => {\n    const input = inputOf(event);\n    const parts = input && partsOf(input);\n    if (parts) close(parts);\n  };\n  root.addEventListener('input', onInput);\n  root.addEventListener('focusin', onFocus);\n  root.addEventListener('keydown', onKeyDown);\n  root.addEventListener('pointerdown', onPointerDown);\n  root.addEventListener('focusout', onFocusOut);\n  return () => {\n    root.removeEventListener('input', onInput);\n    root.removeEventListener('focusin', onFocus);\n    root.removeEventListener('keydown', onKeyDown);\n    root.removeEventListener('pointerdown', onPointerDown);\n    root.removeEventListener('focusout', onFocusOut);\n  };\n}\n"]}

package/dist/chunk-GXSX6Q6O.js

@@ -0,0 +1,42 @@
+// src/shared/selection/selection.ts
+function isApplePlatform(navigatorLike = globalThis.navigator) {
+  if (!navigatorLike) return false;
+  const platform = navigatorLike.userAgentData?.platform || navigatorLike.platform || navigatorLike.userAgent;
+  return /mac|iphone|ipad|ipod/i.test(platform);
+}
+function selectionGesture(modifiers, apple = isApplePlatform()) {
+  if (modifiers.shiftKey) return "extend";
+  if (apple ? modifiers.metaKey : modifiers.ctrlKey) return "toggle";
+  return "replace";
+}
+function applySelection({
+  items,
+  selected,
+  anchor,
+  target,
+  gesture
+}) {
+  const inOrder = (ids) => items.filter((id) => ids.has(id));
+  const current = new Set(selected);
+  if (!items.includes(target))
+    return { selected: inOrder(current), anchor: anchor ?? target };
+  switch (gesture) {
+    case "replace":
+      return { selected: [target], anchor: target };
+    case "toggle":
+      if (current.has(target)) current.delete(target);
+      else current.add(target);
+      return { selected: inOrder(current), anchor: target };
+    case "extend": {
+      const pivot = anchor !== void 0 && items.includes(anchor) ? anchor : items.find((id) => current.has(id)) ?? target;
+      const from = items.indexOf(pivot);
+      const to = items.indexOf(target);
+      const range = items.slice(Math.min(from, to), Math.max(from, to) + 1);
+      return { selected: range, anchor: pivot };
+    }
+  }
+}
+
+export { applySelection, isApplePlatform, selectionGesture };
+
+//# sourceMappingURL=chunk-GXSX6Q6O.js.map

package/dist/chunk-GXSX6Q6O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/selection/selection.ts"],"names":[],"mappings":";AAiBO,SAAS,eAAA,CACd,aAAA,GAEgB,UAAA,CAAW,SAAA,EAClB;AACT,EAAA,IAAI,CAAC,eAAe,OAAO,KAAA;AAC3B,EAAA,MAAM,WACH,aAAA,CAA4D,aAAA,EACzD,QAAA,IACJ,aAAA,CAAc,YACd,aAAA,CAAc,SAAA;AAChB,EAAA,OAAO,uBAAA,CAAwB,KAAK,QAAQ,CAAA;AAC9C;AAOO,SAAS,gBAAA,CACd,SAAA,EACA,KAAA,GAAiB,eAAA,EAAgB,EACf;AAClB,EAAA,IAAI,SAAA,CAAU,UAAU,OAAO,QAAA;AAC/B,EAAA,IAAI,KAAA,GAAQ,SAAA,CAAU,OAAA,GAAU,SAAA,CAAU,SAAS,OAAO,QAAA;AAC1D,EAAA,OAAO,SAAA;AACT;AAiCO,SAAS,cAAA,CAAmB;AAAA,EACjC,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAAmD;AACjD,EAAA,MAAM,OAAA,GAAU,CAAC,GAAA,KAAyB,KAAA,CAAM,MAAA,CAAO,CAAC,EAAA,KAAO,GAAA,CAAI,GAAA,CAAI,EAAE,CAAC,CAAA;AAC1E,EAAA,MAAM,OAAA,GAAU,IAAI,GAAA,CAAI,QAAQ,CAAA;AAChC,EAAA,IAAI,CAAC,KAAA,CAAM,QAAA,CAAS,MAAM,CAAA;AACxB,IAAA,OAAO,EAAE,QAAA,EAAU,OAAA,CAAQ,OAAO,CAAA,EAAG,MAAA,EAAQ,UAAU,MAAA,EAAO;AAChE,EAAA,QAAQ,OAAA;AAAS,IACf,KAAK,SAAA;AACH,MAAA,OAAO,EAAE,QAAA,EAAU,CAAC,MAAM,CAAA,EAAG,QAAQ,MAAA,EAAO;AAAA,IAC9C,KAAK,QAAA;AACH,MAAA,IAAI,QAAQ,GAAA,CAAI,MAAM,CAAA,EAAG,OAAA,CAAQ,OAAO,MAAM,CAAA;AAAA,WACzC,OAAA,CAAQ,IAAI,MAAM,CAAA;AACvB,MAAA,OAAO,EAAE,QAAA,EAAU,OAAA,CAAQ,OAAO,CAAA,EAAG,QAAQ,MAAA,EAAO;AAAA,IACtD,KAAK,QAAA,EAAU;AACb,MAAA,MAAM,QACJ,MAAA,KAAW,MAAA,IAAa,KAAA,CAAM,QAAA,CAAS,MAAM,CAAA,GACzC,MAAA,GACC,KAAA,CAAM,IAAA,CAAK,CAAC,EAAA,KAAO,OAAA,CAAQ,GAAA,CAAI,EAAE,CAAC,CAAA,IAAK,MAAA;AAC9C,MAAA,MAAM,IAAA,GAAO,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA;AAChC,MAAA,MAAM,EAAA,GAAK,KAAA,CAAM,OAAA,CAAQ,MAAM,CAAA;AAC/B,MAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,KAAA,CAAM,IAAA,CAAK,GAAA,CAAI,IAAA,EAAM,EAAE,CAAA,EAAG,IAAA,CAAK,GAAA,CAAI,IAAA,EAAM,EAAE,IAAI,CAAC,CAAA;AACpE,MAAA,OAAO,EAAE,QAAA,EAAU,KAAA,EAAO,MAAA,EAAQ,KAAA,EAAM;AAAA,IAC1C;AAAA;AAEJ","file":"chunk-GXSX6Q6O.js","sourcesContent":["/**\n * What a pointer or key activation does to a multi-selection:\n * - `replace`: select only the target (a plain click or Enter);\n * - `toggle`: add or remove the target, keeping the rest (Cmd on Apple\n *   platforms, Ctrl elsewhere);\n * - `extend`: select the range from the anchor to the target (Shift).\n */\nexport type SelectionGesture = 'replace' | 'toggle' | 'extend';\n\n/** The modifier state of a `MouseEvent` or `KeyboardEvent`. */\nexport interface SelectionModifiers {\n  readonly shiftKey: boolean;\n  readonly metaKey: boolean;\n  readonly ctrlKey: boolean;\n}\n\n/** True on macOS, iOS, and iPadOS, where Cmd (not Ctrl) toggles one item. */\nexport function isApplePlatform(\n  navigatorLike:\n    | Pick<Navigator, 'platform' | 'userAgent'>\n    | undefined = globalThis.navigator,\n): boolean {\n  if (!navigatorLike) return false;\n  const platform =\n    (navigatorLike as { userAgentData?: { platform?: string } }).userAgentData\n      ?.platform ||\n    navigatorLike.platform ||\n    navigatorLike.userAgent;\n  return /mac|iphone|ipad|ipod/i.test(platform);\n}\n\n/**\n * Map an activation's modifiers to a {@link SelectionGesture}, normalized for\n * the host platform: Shift extends; Cmd on Apple platforms, Ctrl elsewhere,\n * toggles; anything else replaces.\n */\nexport function selectionGesture(\n  modifiers: SelectionModifiers,\n  apple: boolean = isApplePlatform(),\n): SelectionGesture {\n  if (modifiers.shiftKey) return 'extend';\n  if (apple ? modifiers.metaKey : modifiers.ctrlKey) return 'toggle';\n  return 'replace';\n}\n\nexport interface ApplySelectionOptions<Id> {\n  /** Every selectable id, in display order (leave out disabled items). */\n  readonly items: readonly Id[];\n  /** The current selection. */\n  readonly selected: readonly Id[];\n  /**\n   * The last replaced or toggled item; a Shift range starts here. Without\n   * one, the range starts at the first selected item, then at the target.\n   */\n  readonly anchor?: Id;\n  /** The activated item. */\n  readonly target: Id;\n  readonly gesture: SelectionGesture;\n}\n\nexport interface SelectionResult<Id> {\n  /** The new selection, in display order. */\n  readonly selected: Id[];\n  /** The anchor for the next Shift range. */\n  readonly anchor: Id;\n}\n\n/**\n * Apply one selection gesture to a multi-selection, the conventional desktop\n * list model: `replace` selects only the target, `toggle` flips it and keeps\n * the rest, and `extend` selects the range from the anchor (the first\n * selected item when there is none, else the target) to the target. The anchor moves to the target on\n * `replace` and `toggle` and stays put on `extend`, so successive Shift\n * activations pivot around one item. A target missing from `items` (such as a\n * disabled item) leaves the selection unchanged.\n */\nexport function applySelection<Id>({\n  items,\n  selected,\n  anchor,\n  target,\n  gesture,\n}: ApplySelectionOptions<Id>): SelectionResult<Id> {\n  const inOrder = (ids: ReadonlySet<Id>) => items.filter((id) => ids.has(id));\n  const current = new Set(selected);\n  if (!items.includes(target))\n    return { selected: inOrder(current), anchor: anchor ?? target };\n  switch (gesture) {\n    case 'replace':\n      return { selected: [target], anchor: target };\n    case 'toggle':\n      if (current.has(target)) current.delete(target);\n      else current.add(target);\n      return { selected: inOrder(current), anchor: target };\n    case 'extend': {\n      const pivot =\n        anchor !== undefined && items.includes(anchor)\n          ? anchor\n          : (items.find((id) => current.has(id)) ?? target);\n      const from = items.indexOf(pivot);\n      const to = items.indexOf(target);\n      const range = items.slice(Math.min(from, to), Math.max(from, to) + 1);\n      return { selected: range, anchor: pivot };\n    }\n  }\n}\n"]}

package/dist/{chunk-LOSRXZAH.js → chunk-HJXVVFBT.js}

@@ -1,5 +1,5 @@
 import { remify } from './chunk-IQSRHXZR.js';
-import { jsx, Fragment } from 'kerfjs/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'kerfjs/jsx-runtime';
 
 var lucideIconSizePixels = {
   xs: 12,
@@ -37,6 +37,7 @@ function LucideIcon({
   color,
   inline = false,
   label,
+  title,
   size,
   slot
 }) {
@@ -53,6 +54,7 @@ function LucideIcon({
     color,
     inline,
     label,
+    title,
     size,
     slot
   ]);
@@ -61,7 +63,7 @@ function LucideIcon({
   if (cached) return cached;
   const pixels = typeof size === "number" ? size : size && lucideIconSizePixels[size];
   const slotAttribute = { slot };
-  const markup = /* @__PURE__ */ jsx(
+  const markup = /* @__PURE__ */ jsxs(
     "svg",
     {
       ...slotAttribute,
@@ -69,9 +71,9 @@ function LucideIcon({
       "data-lucide": name,
       "data-inline": inline ? "true" : void 0,
       "data-size": size === void 0 ? void 0 : String(size),
-      role: label ? "img" : void 0,
+      role: label || title ? "img" : void 0,
       "aria-label": label,
-      "aria-hidden": label ? void 0 : "true",
+      "aria-hidden": label || title ? void 0 : "true",
       viewBox: "0 0 24 24",
       fill: appearance === "solid" ? "currentColor" : "none",
       stroke: "currentColor",
@@ -82,7 +84,13 @@ function LucideIcon({
         pixels === void 0 ? void 0 : `--_kui-lucide-size:${remify(pixels)}`,
         color === void 0 ? void 0 : `color:${color}`
       ].filter(Boolean).join(";") || void 0,
-      children: renderChildren(icon)
+      children: [
+        title ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("title", { children: title }),
+          /* @__PURE__ */ jsx("rect", { width: "24", height: "24", fill: "transparent", stroke: "none" })
+        ] }) : null,
+        renderChildren(icon)
+      ]
     }
   );
   if (childMarkup.has(icon)) {
@@ -97,4 +105,4 @@ function LucideIcon({
 
 export { LucideIcon };
 
-//# sourceMappingURL=chunk-LOSRXZAH.js.map
+//# sourceMappingURL=chunk-HJXVVFBT.js.map

package/dist/chunk-HJXVVFBT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/media/lucide-icon/lucide-icon.tsx"],"names":["Fragment","jsx"],"mappings":"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","file":"chunk-HJXVVFBT.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { Fragment, jsx } from 'kerfjs/jsx-runtime';\nimport type { IconNode } from 'lucide';\n\nimport type { CssForegroundColor } from '../../../shared/styles/css-values.js';\nimport { remify } from '../../../shared/styles/css-values.js';\n\nexport type LucideNode = IconNode;\nexport type LucideIconSize = 'xs' | 's' | 'm' | 'l' | 'xl' | number;\n\nconst lucideIconSizePixels = {\n  xs: 12,\n  s: 16,\n  m: 20,\n  l: 24,\n  xl: 32,\n} as const satisfies Record<Exclude<LucideIconSize, number>, number>;\n\nexport interface LucideIconProps {\n  icon: LucideNode;\n  name: string;\n  /** Outline by default; solid fills compatible glyphs with the current text color. */\n  appearance?: 'outline' | 'solid';\n  className?: string;\n  /** Foreground color; omit to inherit the surrounding text color. */\n  color?: CssForegroundColor;\n  /** Flow with surrounding text instead of occupying a block. */\n  inline?: boolean;\n  /** The icon's accessible name; without it the icon is decorative. */\n  label?: string;\n  /**\n   * Hover text, as an SVG `<title>`: a status icon's explanation (\"Session\n   * halted\"). With `label`, the label stays the accessible name; alone, the\n   * title also names the icon. The whole icon box shows it, not just its\n   * strokes.\n   */\n  title?: string;\n  /** Named icon scale or positive pixel size, converted to rem. Omit for 1em. */\n  size?: LucideIconSize;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * Each icon node's rendered child markup. Lucide icon nodes are module-level\n * constants, so a list that re-renders the same glyph in every row serializes\n * (validates, screens, and escapes) its path data once instead of per render.\n * Keyed by node identity and held weakly, so an app-built node is collected\n * with it; treat a node as immutable once rendered. A node carrying anything\n * but string or number attribute values (outside the `IconNode` type) is\n * rendered fresh every time.\n */\nconst childMarkup = new WeakMap<LucideNode, SafeHtml>();\n\nfunction renderChildren(icon: LucideNode): SafeHtml {\n  const cached = childMarkup.get(icon);\n  if (cached) return cached;\n  let cacheable = true;\n  const markup = jsx(Fragment, {\n    children: icon.map(([tag, attrs]) => {\n      for (const value of Object.values(attrs))\n        if (typeof value !== 'string' && typeof value !== 'number')\n          cacheable = false;\n      return jsx(tag, attrs);\n    }),\n  });\n  if (cacheable) childMarkup.set(icon, markup);\n  return markup;\n}\n\n/**\n * Each icon node's rendered icons, by their props. Rows that re-render the\n * same glyph with the same props get the identical `SafeHtml` back instead of\n * rebuilding the `<svg>` wrapper, and consumers that hash or compare icon\n * markup (PopupMenu's content key) see one string object. Bounded per node,\n * because a per-row `label` would otherwise grow it with the list; past the\n * bound the oldest variant is evicted. Only nodes whose child markup is\n * cacheable are cached.\n */\nconst iconMarkup = new WeakMap<LucideNode, Map<string, SafeHtml>>();\n\n/** Most rendered variants remembered per icon node. */\nconst LUCIDE_ICON_VARIANT_LIMIT = 64;\n\nfunction variantKey(parts: readonly (string | number | boolean | undefined)[]) {\n  // U+0001 marks an omitted prop so it never equals an empty string.\n  return parts\n    .map((part) => (part === undefined ? '\\u0001' : String(part)))\n    .join('\\u0000');\n}\n\n/** Render a Lucide-compatible icon node without copying icon SVG strings. */\nexport function LucideIcon({\n  icon,\n  name,\n  appearance = 'outline',\n  className,\n  color,\n  inline = false,\n  label,\n  title,\n  size,\n  slot,\n}: LucideIconProps) {\n  if (typeof size === 'number' && (!Number.isFinite(size) || size <= 0))\n    throw new RangeError(\n      'LucideIcon size must be a positive finite pixel value',\n    );\n  if (typeof size === 'string' && !Object.hasOwn(lucideIconSizePixels, size))\n    throw new RangeError('LucideIcon size must use a named icon step');\n  const key = variantKey([\n    name,\n    appearance,\n    className,\n    color,\n    inline,\n    label,\n    title,\n    size,\n    slot,\n  ]);\n  const variants = iconMarkup.get(icon);\n  const cached = variants?.get(key);\n  if (cached) return cached;\n  const pixels =\n    typeof size === 'number' ? size : size && lucideIconSizePixels[size];\n  const slotAttribute = { slot };\n  const markup = (\n    <svg\n      {...slotAttribute}\n      class={className}\n      data-lucide={name}\n      data-inline={inline ? 'true' : undefined}\n      data-size={size === undefined ? undefined : String(size)}\n      role={label || title ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={label || title ? undefined : 'true'}\n      viewBox=\"0 0 24 24\"\n      fill={appearance === 'solid' ? 'currentColor' : 'none'}\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      style={\n        [\n          pixels === undefined\n            ? undefined\n            : `--_kui-lucide-size:${remify(pixels)}`,\n          color === undefined ? undefined : `color:${color}`,\n        ]\n          .filter(Boolean)\n          .join(';') || undefined\n      }\n    >\n      {title ? (\n        <>\n          <title>{title}</title>\n          {/* A transparent box, so hovering between strokes shows the title. */}\n          <rect width=\"24\" height=\"24\" fill=\"transparent\" stroke=\"none\" />\n        </>\n      ) : null}\n      {renderChildren(icon)}\n    </svg>\n  );\n  if (childMarkup.has(icon)) {\n    const known = variants ?? new Map<string, SafeHtml>();\n    if (!variants) iconMarkup.set(icon, known);\n    if (known.size >= LUCIDE_ICON_VARIANT_LIMIT)\n      known.delete(known.keys().next().value!);\n    known.set(key, markup);\n  }\n  return markup;\n}\n"]}

package/dist/{chunk-M5KZ26VV.js → chunk-HQZG3OFL.js}

@@ -6,6 +6,10 @@ import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
 var paneProtectedAttributes = /* @__PURE__ */ new Set([
   "data-component",
   "data-chrome-placement",
+  "data-compact-header",
+  "data-compact-footer",
+  "data-compact-header-open",
+  "data-compact-footer-open",
   "data-chrome-dividers",
   "data-appearance",
   "data-background",
@@ -51,6 +55,8 @@ function Pane({
   footer,
   chromePlacement = "fixed",
   chromeDividers,
+  compactChrome = {},
+  compactChromeOpen = {},
   headerPresentation = "docked",
   scrollEdge = "none",
   scrollEdgeDistance,
@@ -121,6 +127,10 @@ function Pane({
     "data-header-material": clearHeader ? "clear" : void 0,
     ...scrollEdgeAttributes(scrollEdge, scrollEdgeDistance, clearHeader),
     "data-chrome-placement": chromePlacement === "auto" ? "auto" : void 0,
+    "data-compact-header": header !== void 0 && compactChrome.header !== "fixed" ? compactChrome.header : void 0,
+    "data-compact-footer": footer !== void 0 && compactChrome.footer !== "fixed" ? compactChrome.footer : void 0,
+    "data-compact-header-open": compactChrome.header === "overlay" && compactChromeOpen.header ? "" : void 0,
+    "data-compact-footer-open": compactChrome.footer === "overlay" && compactChromeOpen.footer ? "" : void 0,
     "data-chrome-dividers": resolvedChromeDividers === "always" || resolvedChromeDividers === "none" ? resolvedChromeDividers : void 0,
     "data-separator-block-start": String(separators.includes("block-start")),
     "data-separator-block-end": String(separators.includes("block-end")),
@@ -145,4 +155,4 @@ function Pane({
 
 export { Pane };
 
-//# sourceMappingURL=chunk-M5KZ26VV.js.map
+//# sourceMappingURL=chunk-HQZG3OFL.js.map

package/dist/chunk-HQZG3OFL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/pane/pane.tsx"],"names":[],"mappings":"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","file":"chunk-HQZG3OFL.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { ScrollClearance } from '../../../shared/layout/scroll-clearance.js';\nimport {\n  type ScrollEdge,\n  scrollEdgeAttributes,\n} from '../../../shared/layout/scroll-edge.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\nimport { ensureSunkenTexture } from '../../../shared/styles/sunken-texture.js';\nimport {\n  joinStyles,\n  type SurfaceTint,\n  surfaceTintAttributes,\n} from '../../../shared/styles/surface-tint.js';\n\n/**\n * Logical pane sides: where a {@link Pane} can show a separator and where it can\n * compensate for a device safe-area inset.\n */\nexport type PaneSeparatorSide =\n  'block-start' | 'block-end' | 'inline-start' | 'inline-end';\n\n/** Semantic root elements supported by {@link Pane}. */\nexport type PaneElement = 'article' | 'aside' | 'div' | 'main' | 'section';\n\n/** Semantic elements supported by the scrolling content slot. */\nexport type PaneContentElement = 'div' | 'main' | 'nav' | 'section';\n\nconst paneProtectedAttributes = new Set([\n  'data-component',\n  'data-chrome-placement',\n  'data-compact-header',\n  'data-compact-footer',\n  'data-compact-header-open',\n  'data-compact-footer-open',\n  'data-chrome-dividers',\n  'data-appearance',\n  'data-background',\n  'data-kui-tint',\n  'data-kui-tint-accent',\n  'data-deep-inset',\n  'data-outlined',\n  'data-scroll-clearance',\n  'data-header-presentation',\n  'data-header-material',\n  'data-scroll-edge',\n  'data-scroll-edge-distance',\n  'data-header-overlay',\n  'data-separator-block-start',\n  'data-separator-block-end',\n  'data-separator-inline-start',\n  'data-separator-inline-end',\n  'data-safe-area-block-start',\n  'data-safe-area-block-end',\n  'data-safe-area-inline-start',\n  'data-safe-area-inline-end',\n]);\n\nconst allPaneSides: readonly PaneSeparatorSide[] = [\n  'block-start',\n  'block-end',\n  'inline-start',\n  'inline-end',\n];\n\ntype PaneRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-separator-block-start'?: never;\n    'data-separator-block-end'?: never;\n    'data-separator-inline-start'?: never;\n    'data-separator-inline-end'?: never;\n    'data-safe-area-block-start'?: never;\n    'data-safe-area-block-end'?: never;\n    'data-safe-area-inline-start'?: never;\n    'data-safe-area-inline-end'?: never;\n    'data-chrome-placement'?: never;\n    'data-chrome-dividers'?: never;\n    'data-appearance'?: never;\n    'data-background'?: never;\n    'data-kui-tint'?: never;\n    'data-kui-tint-accent'?: never;\n    'data-deep-inset'?: never;\n    'data-outlined'?: never;\n    'data-scroll-clearance'?: never;\n    'data-header-presentation'?: never;\n    'data-header-material'?: never;\n    'data-scroll-edge'?: never;\n    'data-scroll-edge-distance'?: never;\n    'data-header-overlay'?: never;\n    'data-compact-header'?: never;\n    'data-compact-footer'?: never;\n    'data-compact-header-open'?: never;\n    'data-compact-footer-open'?: never;\n  }\n>;\n\n/** How a Pane's header and footer relate to its scrolling content. */\nexport type PaneChromePlacement = 'fixed' | 'auto';\n\n/**\n * How a header or footer behaves when the pane's container presents\n * compactly (a `NavStack` view, a `TabNavigator` scene, a full-screen dialog,\n * or a compact `Workbench`): `fixed` stays docked and shrinks the content\n * area; `scroll` sits inline with the content (a footer settles at the end\n * and scrolls past when the content is longer); `overlay` lies over the\n * content on the chrome material, shown only while the app opens it.\n */\nexport type PaneCompactChrome = 'fixed' | 'scroll' | 'overlay';\n\n/** The compact chrome policy for a Pane's header and footer. */\nexport interface PaneCompactChromePolicy {\n  header?: PaneCompactChrome;\n  footer?: PaneCompactChrome;\n}\n\n/**\n * When a Pane draws the divider between its pinned header or footer and its\n * scrolling content: `scroll` while content is scrolled away beneath that\n * chrome, as `wireScrollDividers` reports; `always`; or `none`.\n */\nexport type PaneChromeDividers = 'scroll' | 'always' | 'none';\n\n/**\n * How a Pane's header relates to its scrolling content: `docked` in its own\n * row above the content, or `overlay` laid over the content's top edge on the\n * translucent chrome material, so content scrolls visibly beneath it.\n * `clear` lays it over\n * the same edge fully transparent, for chrome over imagery: legibility comes\n * from glass control groups or a scrim, and with `scrollEdge=\"material\"` the\n * chrome material fades in once content scrolls beneath it.\n */\nexport type PaneHeaderPresentation = 'docked' | 'overlay' | 'clear';\n\n/** Background treatment of the Pane's scrolling work surface. */\nexport type PaneAppearance = 'default' | 'sunken';\n\nexport interface PaneProps {\n  /** Optional fixed chrome above the scrolling content, arranged vertically. */\n  header?: KerfUiContent;\n  /** The pane's primary vertical, scrolling content stack. */\n  children?: KerfUiContent;\n  /** Optional fixed chrome below the scrolling content. */\n  footer?: KerfUiContent;\n  /**\n   * Whether the header and footer stay pinned around the scrolling content.\n   * `fixed` (default) always pins them. `auto` pins them while the pane is\n   * tall enough, and below 480px of height (30rem, so it scales with the text\n   * size) lets the whole pane scroll as one column, so tall chrome can never\n   * squeeze the content to nothing.\n   */\n  chromePlacement?: PaneChromePlacement;\n  /**\n   * The divider under the header and over the footer, where they meet the\n   * scrolling content. Omitted defaults to `scroll` for a plain pane and\n   * `always` for `appearance=\"sunken\"`. `scroll` shows the header's divider only\n   * while the content is scrolled down, and the footer's only while more\n   * content lies below — never when the content fits — once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the pane; unwired, neither shows. `always` shows both; `none` neither.\n   * The line is drawn inside the chrome, so no state moves the content.\n   */\n  chromeDividers?: PaneChromeDividers;\n  /**\n   * `docked` (default) gives the header its own row above the scrolling\n   * content. `overlay` lays the header over the content's top edge on the\n   * translucent chrome material (`--kui-chrome-material`, opaque under\n   * `prefers-reduced-transparency`, forced colors, or without\n   * `backdrop-filter`), so content scrolls visibly beneath it. Once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the pane it measures the header and publishes its height as the\n   * `--kui-scroll-clearance-block-start` context, which the content adds to\n   * its block-start padding and `scroll-padding` without any\n   * `scrollClearance` prop, so the first item, and anything focused or\n   * scrolled into view, rests clear of the header. Until then, and with\n   * `chromePlacement=\"auto\"`, the header stays docked. Keep overlay header\n   * text in the normal text color: quiet text can fall below AA over the\n   * content passing beneath it.\n   */\n  /**\n   * What the header and footer do when the pane's container presents\n   * compactly (default `fixed`); roomy containers ignore it. The container\n   * interprets it, so set it on panes inside a `NavStack`, `TabNavigator`,\n   * full-screen dialog, or `Workbench`.\n   */\n  compactChrome?: PaneCompactChromePolicy;\n  /**\n   * Which `overlay` compact chrome is showing. The app owns it and flips it\n   * from a control the person can reach while the chrome is hidden.\n   */\n  compactChromeOpen?: { header?: boolean; footer?: boolean };\n  headerPresentation?: PaneHeaderPresentation;\n  /**\n   * With `headerPresentation=\"clear\"`, `material` fades the chrome material\n   * in behind the header once content scrolls beneath it (default `none`).\n   */\n  scrollEdge?: ScrollEdge;\n  /**\n   * The scroll distance, in CSS pixels, over which the scroll edge fades in\n   * (default 60).\n   */\n  scrollEdgeDistance?: number;\n  /** Paint the scrolling work surface with the shared lowered-surface color. */\n  appearance?: PaneAppearance;\n  /**\n   * Paint the whole pane, header and footer included, in an app-chosen color\n   * (`uiColor('surface-raised')`, `fillColor('#1f2a44')`, or `colorVar(…)`\n   * from `@kerfjs/ui/css-values`). It replaces the appearance's fill: a sunken\n   * pane drops its lowered color and grain. Omitted, the pane keeps its\n   * default (transparent, or the sunken surface). Forced colors paint\n   * `Canvas`. Keep text at AA over the color; a dark color needs a matching\n   * tint or dark tones for its content.\n   */\n  background?: CssColor;\n  /**\n   * A scoped tint: `{ color, scheme }`, the app's color and the scheme it\n   * belongs to. The pane paints the tinted surface (unless `background` is\n   * set) and its whole subtree, chrome material and quiet fills included,\n   * re-derives its surface and text tokens from the color with lightness\n   * clamped to keep text at WCAG AA. Without relative color syntax, or under\n   * `prefers-contrast: more`, the scope keeps the plain palette in the\n   * declared scheme.\n   */\n  tint?: SurfaceTint;\n  /**\n   * Clear chrome that lies over the scrolling content's block-start and/or\n   * block-end edge, such as a `DialogSurface` floating footer over a filling\n   * Pane. The content scroller adds the inherited\n   * `--kui-scroll-clearance-block-*` context that chrome publishes to its block\n   * padding and `scroll-padding`, so content scrolls visibly beneath the chrome\n   * while its first and last items (and anything focused or scrolled into\n   * view) can still rest clear of it. Defaults to none.\n   */\n  scrollClearance?: ScrollClearance;\n  /** Add 8px to every side of scrolling content (default: false). */\n  deepInset?: boolean;\n  /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the Pane root. */\n  tabIndex?: 0 | -1;\n  /** Keep the standard focus outline visible, such as for a drop target. */\n  outlined?: boolean;\n  /** Root semantics. Defaults to `div`. */\n  element?: PaneElement;\n  /** Scrolling content semantics. Defaults to `div`. */\n  contentElement?: PaneContentElement;\n  /** Independent logical-edge separator lines. Defaults to none. */\n  separators?: readonly PaneSeparatorSide[];\n  /**\n   * Sides on which the pane may compensate for a device safe-area inset.\n   * Defaults to every side: the pane pads its slots for each side that still\n   * reaches an unsafe screen edge, as its surrounding layout reports, while its\n   * background and separators paint through. List only the sides an app-owned\n   * layout places at a screen edge, or pass `[]` to opt out.\n   */\n  safeAreaEdges?: readonly PaneSeparatorSide[];\n  id?: string;\n  /** Accessible name for a landmark root such as `aside` or `main`. */\n  label?: string;\n  /** Accessible name for a landmark scrolling slot such as `nav`. */\n  contentLabel?: string;\n  className?: string;\n  headerClassName?: string;\n  contentClassName?: string;\n  footerClassName?: string;\n  /** Safe `data-*` metadata; Pane-owned structural attributes remain protected. */\n  rootAttributes?: PaneRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A pane's configuration, apart from its content and styling hooks: the props a\n * composite that renders a `Pane` for the app (a Workbench panel or work area,\n * or a CollapsiblePanel) forwards, so the app configures that pane instead of\n * styling it. An omitted or `undefined` field keeps the composite's default.\n */\nexport type PaneConfig = Pick<\n  PaneProps,\n  | 'contentElement'\n  | 'contentLabel'\n  | 'separators'\n  | 'safeAreaEdges'\n  | 'chromeDividers'\n  | 'compactChrome'\n  | 'compactChromeOpen'\n  | 'headerPresentation'\n  | 'scrollEdge'\n  | 'scrollEdgeDistance'\n  | 'appearance'\n  | 'background'\n  | 'tint'\n  | 'deepInset'\n  | 'scrollClearance'\n  | 'tabIndex'\n  | 'outlined'\n>;\n\nfunction paneContent(\n  element: PaneContentElement,\n  children: KerfUiContent,\n  className: string,\n  label: string | undefined,\n) {\n  const attributes = {\n    class: `kui-pane__content kui-content ${className}`.trim(),\n    'aria-label': label,\n  };\n  if (element === 'main') return <main {...attributes}>{children}</main>;\n  if (element === 'nav') return <nav {...attributes}>{children}</nav>;\n  if (element === 'section')\n    return <section {...attributes}>{children}</section>;\n  return <div {...attributes}>{children}</div>;\n}\n\n/**\n * An unpadded application column with optional fixed header/footer slots and one\n * scrolling vertical content owner. Separator lines are independently opt-in on\n * each logical edge, so the same component works as a sidebar, main area,\n * inspector, or dialog column.\n */\nexport function Pane({\n  header,\n  children,\n  footer,\n  chromePlacement = 'fixed',\n  chromeDividers,\n  compactChrome = {},\n  compactChromeOpen = {},\n  headerPresentation = 'docked',\n  scrollEdge = 'none',\n  scrollEdgeDistance,\n  appearance = 'default',\n  background,\n  tint,\n  deepInset = false,\n  scrollClearance,\n  tabIndex,\n  outlined = false,\n  element = 'div',\n  contentElement = 'div',\n  separators = [],\n  safeAreaEdges = allPaneSides,\n  id,\n  label,\n  contentLabel,\n  className = '',\n  headerClassName = '',\n  contentClassName = '',\n  footerClassName = '',\n  rootAttributes = {},\n  slot,\n}: PaneProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    paneProtectedAttributes,\n  );\n  const content = paneContent(\n    contentElement,\n    children,\n    contentClassName,\n    contentLabel,\n  );\n  const resolvedChromeDividers =\n    chromeDividers ?? (appearance === 'sunken' ? 'always' : 'scroll');\n  if (appearance === 'sunken' && background === undefined)\n    ensureSunkenTexture();\n  const tinted = surfaceTintAttributes(tint);\n  const clearHeader = headerPresentation === 'clear' && header !== undefined;\n  const body = (\n    <>\n      {header === undefined ? null : (\n        <header\n          class={`kui-pane__header kui-pane__toolbar ${headerClassName}`.trim()}\n        >\n          {header}\n        </header>\n      )}\n      {content}\n      {footer === undefined ? null : (\n        <footer class={`kui-pane__footer ${footerClassName}`.trim()}>\n          {footer}\n        </footer>\n      )}\n    </>\n  );\n  const attributes = {\n    ...safeRootAttributes,\n    class: `kui-pane ${tinted.className} ${className}`\n      .replace(/\\s+/g, ' ')\n      .trim(),\n    id,\n    'data-component': 'pane',\n    'data-appearance': appearance === 'sunken' ? 'sunken' : undefined,\n    'data-background': background === undefined ? undefined : '',\n    'data-kui-tint': tinted['data-kui-tint'],\n    'data-kui-tint-accent': tinted['data-kui-tint-accent'],\n    style: joinStyles(\n      background === undefined\n        ? undefined\n        : `--_kui-pane-background:${background}`,\n      tinted.style,\n    ),\n    'data-deep-inset': deepInset ? 'true' : undefined,\n    'data-outlined': outlined ? 'true' : undefined,\n    'data-scroll-clearance': scrollClearance,\n    'data-header-presentation':\n      headerPresentation !== 'docked' && header !== undefined\n        ? 'overlay'\n        : undefined,\n    'data-header-material': clearHeader ? 'clear' : undefined,\n    ...scrollEdgeAttributes(scrollEdge, scrollEdgeDistance, clearHeader),\n    'data-chrome-placement': chromePlacement === 'auto' ? 'auto' : undefined,\n    'data-compact-header':\n      header !== undefined && compactChrome.header !== 'fixed'\n        ? compactChrome.header\n        : undefined,\n    'data-compact-footer':\n      footer !== undefined && compactChrome.footer !== 'fixed'\n        ? compactChrome.footer\n        : undefined,\n    'data-compact-header-open':\n      compactChrome.header === 'overlay' && compactChromeOpen.header\n        ? ''\n        : undefined,\n    'data-compact-footer-open':\n      compactChrome.footer === 'overlay' && compactChromeOpen.footer\n        ? ''\n        : undefined,\n    'data-chrome-dividers':\n      resolvedChromeDividers === 'always' || resolvedChromeDividers === 'none'\n        ? resolvedChromeDividers\n        : undefined,\n    'data-separator-block-start': String(separators.includes('block-start')),\n    'data-separator-block-end': String(separators.includes('block-end')),\n    'data-separator-inline-start': String(separators.includes('inline-start')),\n    'data-separator-inline-end': String(separators.includes('inline-end')),\n    'data-safe-area-block-start': String(safeAreaEdges.includes('block-start')),\n    'data-safe-area-block-end': String(safeAreaEdges.includes('block-end')),\n    'data-safe-area-inline-start': String(\n      safeAreaEdges.includes('inline-start'),\n    ),\n    'data-safe-area-inline-end': String(safeAreaEdges.includes('inline-end')),\n    'aria-label': label,\n    tabindex: tabIndex,\n    slot,\n  };\n\n  if (element === 'article') return <article {...attributes}>{body}</article>;\n  if (element === 'aside') return <aside {...attributes}>{body}</aside>;\n  if (element === 'main') return <main {...attributes}>{body}</main>;\n  if (element === 'section') return <section {...attributes}>{body}</section>;\n  return <div {...attributes}>{body}</div>;\n}\n\nexport type { ScrollClearance } from '../../../shared/layout/scroll-clearance.js';\nexport type { ScrollEdge } from '../../../shared/layout/scroll-edge.js';\nexport type {\n  SurfaceTint,\n  SurfaceTintScheme,\n} from '../../../shared/styles/surface-tint.js';\n"]}

package/dist/{chunk-ELCMSQNJ.js → chunk-HTERKONR.js}

@@ -1,17 +1,17 @@
-// src/components/forms/composer/wiring/wire-composers.ts
-var COMPOSER = '[data-component="composer"]';
+// src/components/forms/message-composer/wiring/wire-message-composers.ts
+var COMPOSER = '[data-component="message-composer"]';
 var ACTION = "wa-button, button, [data-action]";
 var IME_KEY_CODE = 229;
 function composerFieldOf(target) {
-  if (!(target instanceof HTMLTextAreaElement) || !target.classList.contains("kui-composer__field"))
+  if (!(target instanceof HTMLTextAreaElement) || !target.classList.contains("kui-message-composer__field"))
     return null;
   const composer = target.closest(COMPOSER);
   return composer?.dataset.submitOnEnter === "true" ? target : null;
 }
 function isUnavailable(action) {
-  return action.hasAttribute("disabled") || action.hasAttribute("loading") || action.getAttribute("aria-disabled") === "true" || action.disabled === true;
+  return action.hasAttribute("disabled") || action.hasAttribute("loading") || action.getAttribute("aria-busy") === "true" || action.getAttribute("aria-disabled") === "true" || action.disabled === true;
 }
-function wireComposers(root) {
+function wireMessageComposers(root) {
   const composing = /* @__PURE__ */ new WeakSet();
   const onCompositionStart = (event) => {
     const field = composerFieldOf(event.target);
@@ -30,7 +30,7 @@ function wireComposers(root) {
       return;
     key.preventDefault();
     if (key.repeat || field.value.trim() === "") return;
-    const action = field.closest(COMPOSER).querySelector(".kui-composer__trailing")?.querySelector(ACTION);
+    const action = field.closest(COMPOSER).querySelector(":scope > .kui-toolbar > .kui-toolbar__trailing")?.querySelector(ACTION);
     if (!action || isUnavailable(action)) return;
     action.click();
   };
@@ -44,6 +44,6 @@ function wireComposers(root) {
   };
 }
 
-export { wireComposers };
+export { wireMessageComposers };
 
-//# sourceMappingURL=chunk-ELCMSQNJ.js.map
+//# sourceMappingURL=chunk-HTERKONR.js.map

package/dist/chunk-HTERKONR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/message-composer/wiring/wire-message-composers.ts"],"names":[],"mappings":";AAEA,IAAM,QAAA,GAAW,qCAAA;AACjB,IAAM,MAAA,GAAS,kCAAA;AAGf,IAAM,YAAA,GAAe,GAAA;AAErB,SAAS,gBACP,MAAA,EAC4B;AAC5B,EAAA,IACE,EAAE,MAAA,YAAkB,mBAAA,CAAA,IACpB,CAAC,MAAA,CAAO,SAAA,CAAU,SAAS,6BAA6B,CAAA;AAExD,IAAA,OAAO,IAAA;AACT,EAAA,MAAM,QAAA,GAAW,MAAA,CAAO,OAAA,CAAqB,QAAQ,CAAA;AACrD,EAAA,OAAO,QAAA,EAAU,OAAA,CAAQ,aAAA,KAAkB,MAAA,GAAS,MAAA,GAAS,IAAA;AAC/D;AAEA,SAAS,cAAc,MAAA,EAA0B;AAC/C,EAAA,OACE,OAAO,YAAA,CAAa,UAAU,KAC9B,MAAA,CAAO,YAAA,CAAa,SAAS,CAAA,IAC7B,MAAA,CAAO,aAAa,WAAW,CAAA,KAAM,UACrC,MAAA,CAAO,YAAA,CAAa,eAAe,CAAA,KAAM,MAAA,IACxC,OAA4C,QAAA,KAAa,IAAA;AAE9D;AAeO,SAAS,qBAAqB,IAAA,EAAwB;AAC3D,EAAA,MAAM,SAAA,uBAAgB,OAAA,EAA6B;AACnD,EAAA,MAAM,kBAAA,GAAqB,CAAC,KAAA,KAAiB;AAC3C,IAAA,MAAM,KAAA,GAAQ,eAAA,CAAgB,KAAA,CAAM,MAAM,CAAA;AAC1C,IAAA,IAAI,KAAA,EAAO,SAAA,CAAU,GAAA,CAAI,KAAK,CAAA;AAAA,EAChC,CAAA;AACA,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAiB;AACzC,IAAA,MAAM,KAAA,GAAQ,eAAA,CAAgB,KAAA,CAAM,MAAM,CAAA;AAC1C,IAAA,IAAI,KAAA,EAAO,SAAA,CAAU,MAAA,CAAO,KAAK,CAAA;AAAA,EACnC,CAAA;AACA,EAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAiB;AAClC,IAAA,MAAM,GAAA,GAAM,KAAA;AACZ,IAAA,IAAI,IAAI,GAAA,KAAQ,OAAA,IAAW,GAAA,CAAI,QAAA,IAAY,IAAI,MAAA,EAAQ;AACvD,IAAA,MAAM,KAAA,GAAQ,eAAA,CAAgB,GAAA,CAAI,MAAM,CAAA;AACxC,IAAA,IAAI,CAAC,KAAA,IAAS,KAAA,CAAM,QAAA,EAAU;AAC9B,IAAA,IAAI,IAAI,WAAA,IAAe,GAAA,CAAI,YAAY,YAAA,IAAgB,SAAA,CAAU,IAAI,KAAK,CAAA;AACxE,MAAA;AACF,IAAA,GAAA,CAAI,cAAA,EAAe;AACnB,IAAA,IAAI,IAAI,MAAA,IAAU,KAAA,CAAM,KAAA,CAAM,IAAA,OAAW,EAAA,EAAI;AAE7C,IAAA,MAAM,MAAA,GAAS,MACZ,OAAA,CAAQ,QAAQ,EAChB,aAAA,CAAc,gDAAgD,CAAA,EAC7D,aAAA,CAA2B,MAAM,CAAA;AACrC,IAAA,IAAI,CAAC,MAAA,IAAU,aAAA,CAAc,MAAM,CAAA,EAAG;AACtC,IAAA,MAAA,CAAO,KAAA,EAAM;AAAA,EACf,CAAA;AACA,EAAA,IAAA,CAAK,gBAAA,CAAiB,oBAAoB,kBAAkB,CAAA;AAC5D,EAAA,IAAA,CAAK,gBAAA,CAAiB,kBAAkB,gBAAgB,CAAA;AACxD,EAAA,IAAA,CAAK,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAC1C,EAAA,OAAO,MAAM;AACX,IAAA,IAAA,CAAK,mBAAA,CAAoB,oBAAoB,kBAAkB,CAAA;AAC/D,IAAA,IAAA,CAAK,mBAAA,CAAoB,kBAAkB,gBAAgB,CAAA;AAC3D,IAAA,IAAA,CAAK,mBAAA,CAAoB,WAAW,SAAS,CAAA;AAAA,EAC/C,CAAA;AACF","file":"chunk-HTERKONR.js","sourcesContent":["type Root = HTMLElement | Document;\n\nconst COMPOSER = '[data-component=\"message-composer\"]';\nconst ACTION = 'wa-button, button, [data-action]';\n\n/** IME keydowns report keyCode 229 (WebKit sends it after compositionend). */\nconst IME_KEY_CODE = 229;\n\nfunction composerFieldOf(\n  target: EventTarget | null,\n): HTMLTextAreaElement | null {\n  if (\n    !(target instanceof HTMLTextAreaElement) ||\n    !target.classList.contains('kui-message-composer__field')\n  )\n    return null;\n  const composer = target.closest<HTMLElement>(COMPOSER);\n  return composer?.dataset.submitOnEnter === 'true' ? target : null;\n}\n\nfunction isUnavailable(action: Element): boolean {\n  return (\n    action.hasAttribute('disabled') ||\n    action.hasAttribute('loading') ||\n    action.getAttribute('aria-busy') === 'true' ||\n    action.getAttribute('aria-disabled') === 'true' ||\n    (action as Element & { disabled?: unknown }).disabled === true\n  );\n}\n\n/**\n * Enter-to-send for every `MessageComposer` rendered with `submitOnEnter` below\n * root. In its field, Enter (alone or with Cmd or Ctrl) activates the\n * composer's first trailing action, so a keyboard send runs the same\n * delegated handler as a click. Shift+Enter and Alt+Enter insert a newline.\n * Nothing is sent, and no newline is inserted, when the message is empty or\n * whitespace-only, the key is auto-repeating, or the first action is\n * disabled, loading (a busy `Button` reports `aria-busy`), or\n * `aria-disabled`. An Enter that commits an IME\n * composition (`isComposing`, keyCode 229, or between `compositionstart` and\n * `compositionend`) is left to the input method. Dispose with the owning\n * application.\n */\nexport function wireMessageComposers(root: Root): () => void {\n  const composing = new WeakSet<HTMLTextAreaElement>();\n  const onCompositionStart = (event: Event) => {\n    const field = composerFieldOf(event.target);\n    if (field) composing.add(field);\n  };\n  const onCompositionEnd = (event: Event) => {\n    const field = composerFieldOf(event.target);\n    if (field) composing.delete(field);\n  };\n  const onKeyDown = (event: Event) => {\n    const key = event as KeyboardEvent;\n    if (key.key !== 'Enter' || key.shiftKey || key.altKey) return;\n    const field = composerFieldOf(key.target);\n    if (!field || field.disabled) return;\n    if (key.isComposing || key.keyCode === IME_KEY_CODE || composing.has(field))\n      return;\n    key.preventDefault();\n    if (key.repeat || field.value.trim() === '') return;\n    // composerFieldOf found the field inside a composer.\n    const action = field\n      .closest(COMPOSER)!\n      .querySelector(':scope > .kui-toolbar > .kui-toolbar__trailing')\n      ?.querySelector<HTMLElement>(ACTION);\n    if (!action || isUnavailable(action)) return;\n    action.click();\n  };\n  root.addEventListener('compositionstart', onCompositionStart);\n  root.addEventListener('compositionend', onCompositionEnd);\n  root.addEventListener('keydown', onKeyDown);\n  return () => {\n    root.removeEventListener('compositionstart', onCompositionStart);\n    root.removeEventListener('compositionend', onCompositionEnd);\n    root.removeEventListener('keydown', onKeyDown);\n  };\n}\n"]}

package/dist/chunk-HYORKKYP.js

@@ -0,0 +1,8 @@
+// src/components/actions/popup-menu/internal/popup-menu-events.ts
+var POPUP_MENU_OPEN_EVENT = "kui-popup-menu-open-request";
+var POPUP_MENU_CLOSE_EVENT = "kui-popup-menu-close-request";
+var POPUP_MENU_SELECT_EVENT = "kui-menu-select";
+
+export { POPUP_MENU_CLOSE_EVENT, POPUP_MENU_OPEN_EVENT, POPUP_MENU_SELECT_EVENT };
+
+//# sourceMappingURL=chunk-HYORKKYP.js.map

package/dist/chunk-HYORKKYP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/actions/popup-menu/internal/popup-menu-events.ts"],"names":[],"mappings":";AAKO,IAAM,qBAAA,GAAwB;AAC9B,IAAM,sBAAA,GAAyB;AAQ/B,IAAM,uBAAA,GAA0B","file":"chunk-HYORKKYP.js","sourcesContent":["/**\n * The requests `openPopupMenu`, `openPopupMenuAt`, and `closePopupMenu` send\n * to a PopupMenu root. The component module stays free of behavior code; the\n * `/register` entry's document listener carries them out.\n */\nexport const POPUP_MENU_OPEN_EVENT = 'kui-popup-menu-open-request';\nexport const POPUP_MENU_CLOSE_EVENT = 'kui-popup-menu-close-request';\n\n/**\n * The choice event a PopupMenu root dispatches before it closes: bubbling and\n * cancelable (canceling keeps the menu open). `detail.item` is the chosen\n * item element, `detail.value` its `value`, and `detail.checked` the state a\n * checkbox choice asks for; the application owns that state and renders it.\n */\nexport const POPUP_MENU_SELECT_EVENT = 'kui-menu-select';\n\nexport interface PopupMenuOpenDetail {\n  /** Open from this viewport point (bottom-start) for this opening only. */\n  point?: { x: number; y: number };\n}\n\nexport interface PopupMenuSelectDetail {\n  item: HTMLElement;\n  value: string | undefined;\n  checked: boolean | undefined;\n}\n"]}