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

package/dist/chunk-JCCN3U6X.js

@@ -0,0 +1,176 @@
+import { PopupMenu } from './chunk-OQP3PFKQ.js';
+import { listIconTilePresentation, withWordBreaks, nativeDraggable } from './chunk-ZNROKDSZ.js';
+import { Skeleton } from './chunk-CVD5IZGB.js';
+import { LoadingSpinner } from './chunk-WVS6CUCT.js';
+import { remify, em } from './chunk-IQSRHXZR.js';
+import { filterDataAttributes, filterControlAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-item-id",
+  "data-has-icon",
+  "data-icon-tile",
+  "data-icon-tile-tone",
+  "data-multiline",
+  "data-density",
+  "data-divider",
+  "data-busy",
+  "data-trailing-visibility",
+  "data-state",
+  "data-selected",
+  "data-pressed",
+  "data-dragging",
+  "data-drop-position"
+]);
+var PROTECTED_TRAILING_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-item-id",
+  "data-kui-disabled"
+]);
+function ListActionRow({
+  label,
+  description,
+  status,
+  busy = false,
+  density = "standard",
+  divider = "none",
+  icon,
+  iconTile,
+  action,
+  itemId,
+  selected = false,
+  pressed,
+  accessibleLabel,
+  title,
+  multiline = false,
+  state,
+  disabled = false,
+  tabIndex,
+  placeholder = false,
+  draggable,
+  dragging = false,
+  dropPosition,
+  trailingAction,
+  trailingActionLabel,
+  trailingActionIcon,
+  trailingActionDisabled = false,
+  trailingActionTitle,
+  trailingActionVisibility = "always",
+  trailingMenu,
+  className = "",
+  rootAttributes = {},
+  trailingActionAttributes = {},
+  slot
+}) {
+  const extensionRootAttributes = filterDataAttributes(
+    rootAttributes,
+    PROTECTED_ROOT_DATA_ATTRIBUTES
+  );
+  const extensionTrailingAttributes = filterControlAttributes(
+    trailingActionAttributes,
+    PROTECTED_TRAILING_DATA_ATTRIBUTES
+  );
+  const tile = icon ? listIconTilePresentation(iconTile, "list-action-row") : null;
+  const iconSize = tile?.tile ? 32 : 18;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...extensionRootAttributes,
+      class: `kui-list-action-row ${className}`.trim(),
+      "data-component": "list-action-row",
+      "data-item-id": itemId,
+      "data-has-icon": String(Boolean(icon)),
+      "data-icon-tile": tile?.tile,
+      "data-icon-tile-tone": tile?.tone,
+      "data-multiline": multiline ? "true" : void 0,
+      "data-density": density,
+      "data-divider": divider,
+      "data-busy": busy ? "true" : void 0,
+      "data-trailing-visibility": trailingActionVisibility,
+      "data-state": state,
+      "data-selected": String(selected),
+      "data-pressed": pressed === void 0 ? void 0 : String(pressed),
+      "data-placeholder": placeholder ? "true" : void 0,
+      draggable: nativeDraggable(draggable, placeholder),
+      "data-dragging": dragging ? "true" : void 0,
+      "data-drop-position": dropPosition,
+      "aria-busy": placeholder || busy ? "true" : void 0,
+      slot,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: "kui-list-action-row__primary",
+            title: placeholder ? void 0 : title,
+            disabled: disabled || placeholder,
+            tabindex: placeholder ? -1 : tabIndex,
+            "data-kui-disabled": disabled ? "true" : void 0,
+            "data-action": placeholder ? void 0 : action,
+            "data-item-id": itemId,
+            "aria-label": accessibleLabel,
+            "aria-current": selected ? "page" : void 0,
+            "aria-pressed": pressed === void 0 ? void 0 : String(pressed),
+            children: [
+              icon && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  class: "kui-list-action-row__icon",
+                  style: placeholder ? void 0 : tile?.style,
+                  children: placeholder ? /* @__PURE__ */ jsx(
+                    Skeleton,
+                    {
+                      block: true,
+                      width: remify(iconSize),
+                      height: remify(iconSize)
+                    }
+                  ) : icon
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { class: "kui-list-action-row__label", children: [
+                /* @__PURE__ */ jsx("span", { class: "kui-list-action-row__primary-label", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(9) }) : multiline ? withWordBreaks(label) : label }),
+                description && /* @__PURE__ */ jsx("span", { class: "kui-list-action-row__description", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(11) }) : description }),
+                (busy || status) && /* @__PURE__ */ jsxs("span", { class: "kui-list-action-row__status", children: [
+                  busy && /* @__PURE__ */ jsx(LoadingSpinner, {}),
+                  status && (placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(6) }) : status)
+                ] })
+              ] })
+            ]
+          }
+        ),
+        trailingMenu ? /* @__PURE__ */ jsx(
+          PopupMenu,
+          {
+            label: trailingMenu.label,
+            icon: trailingMenu.icon,
+            items: trailingMenu.items,
+            placement: trailingMenu.placement ?? "bottom-end",
+            caret: false,
+            disabled: Boolean(trailingMenu.disabled) || placeholder
+          }
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            ...extensionTrailingAttributes,
+            type: "button",
+            class: "kui-list-action-row__trailing-action",
+            "data-action": placeholder ? void 0 : trailingAction,
+            "data-item-id": itemId,
+            "aria-label": trailingActionLabel,
+            title: trailingActionTitle ?? trailingActionLabel,
+            disabled: trailingActionDisabled || placeholder || void 0,
+            "data-kui-disabled": trailingActionDisabled ? "true" : void 0,
+            children: trailingActionIcon
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ListActionRow };
+
+//# sourceMappingURL=chunk-JCCN3U6X.js.map

package/dist/chunk-JCCN3U6X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/list-action-row/list-action-row.tsx"],"names":[],"mappings":"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","file":"chunk-JCCN3U6X.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport {\n  type ListIconTile,\n  listIconTilePresentation,\n} from '../../../shared/content/list-icon-tile.js';\nimport { nativeDraggable } from '../../../shared/dom/draggable.js';\nimport {\n  filterControlAttributes,\n  filterDataAttributes,\n} from '../../../shared/dom/extension-attributes.js';\nimport { em, remify } from '../../../shared/styles/css-values.js';\nimport { withWordBreaks } from '../../../shared/text/word-breaks.js';\nimport {\n  PopupMenu,\n  type PopupMenuEntry,\n  type PopupMenuPlacement,\n} from '../../actions/popup-menu/popup-menu.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nexport type {\n  ListIconTile,\n  ListIconTileColor,\n  ListIconTileTone,\n} from '../../../shared/content/list-icon-tile.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-icon-tile',\n  'data-icon-tile-tone',\n  'data-multiline',\n  'data-density',\n  'data-divider',\n  'data-busy',\n  'data-trailing-visibility',\n  'data-state',\n  'data-selected',\n  'data-pressed',\n  'data-dragging',\n  'data-drop-position',\n]);\nconst PROTECTED_TRAILING_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-kui-disabled',\n]);\n\ntype ListActionRowRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-icon-tile'?: never;\n    'data-icon-tile-tone'?: never;\n    'data-multiline'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-busy'?: never;\n    'data-trailing-visibility'?: never;\n    'data-state'?: never;\n    'data-selected'?: never;\n    'data-pressed'?: never;\n    'data-dragging'?: never;\n    'data-drop-position'?: never;\n  }\n>;\n\ntype ListActionRowTrailingAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-kui-disabled'?: never;\n    popoverTarget?: string;\n    popoverTargetAction?: 'toggle' | 'show' | 'hide';\n    'aria-controls'?: string;\n    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n  }\n>;\n\n/** A trailing overflow `PopupMenu` rendered as the row's sibling trailing control. */\nexport interface ListActionRowTrailingMenu {\n  /** Accessible name of the icon-only menu trigger, such as `Actions for report.json`. */\n  label: string;\n  /** Decorative trigger icon, typically a `MoreHorizontal` `LucideIcon`. */\n  icon: SafeHtml;\n  /** The menu's commands, headings, and dividers; items dispatch their own `data-action`s. */\n  items: readonly PopupMenuEntry[];\n  /** Where the menu opens relative to its trigger. Defaults to `bottom-end`. */\n  placement?: PopupMenuPlacement;\n  disabled?: boolean;\n}\n\ninterface ListActionRowTrailingButtonProps {\n  trailingAction: string;\n  trailingActionLabel: string;\n  /** Decorative dormant content for the trailing button. Must not contain interactive descendants. */\n  trailingActionIcon: SafeHtml;\n  trailingActionDisabled?: boolean;\n  trailingActionTitle?: string;\n  trailingActionAttributes?: ListActionRowTrailingAttributes;\n  trailingMenu?: never;\n}\n\ninterface ListActionRowTrailingMenuProps {\n  /** A trailing overflow menu in place of the trailing button. Import `@kerfjs/ui/popup-menu/register` once. */\n  trailingMenu: ListActionRowTrailingMenu;\n  trailingAction?: never;\n  trailingActionLabel?: never;\n  trailingActionIcon?: never;\n  trailingActionDisabled?: never;\n  trailingActionTitle?: never;\n  trailingActionAttributes?: never;\n}\n\ninterface ListActionRowCommonProps {\n  /** Visible dormant content for the primary button. Must not contain interactive descendants. */\n  label: string | SafeHtml;\n  description?: string | SafeHtml;\n  status?: string | SafeHtml;\n  busy?: boolean;\n  /** Row height: `standard` is 44px; `compact` is 36px (42px with `iconTile`), the height of a compact `ListItem`. */\n  density?: 'standard' | 'compact';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  /** Decorative dormant content for the primary button. Must not contain interactive descendants. */\n  icon?: SafeHtml;\n  /** Present `icon` in a filled 32px rounded tile with an 18px glyph: a quiet tone preset, or `{ color, foreground? }` for an application color. */\n  iconTile?: ListIconTile;\n  action: string;\n  itemId?: string;\n  selected?: boolean;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render as an unanimated loading skeleton, disabling both actions: label, description, icon, and status text become skeletons; the `busy` indicator stays live. */\n  placeholder?: boolean;\n  /** Native HTML drag source (`draggable=\"true\"` on the row root); a placeholder is never draggable. Pair with `wireListReorder` for pointer and keyboard reordering. */\n  draggable?: boolean;\n  /** Dim this row as one of the rows being dragged. */\n  dragging?: boolean;\n  /** Draw the insertion line at this row's leading (`before`) or trailing (`after`) block edge. */\n  dropPosition?: 'before' | 'after';\n  trailingActionVisibility?: 'always' | 'interaction';\n  className?: string;\n  rootAttributes?: ListActionRowRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** Exactly one trailing control: a native button (`trailingAction*`) or an overflow menu (`trailingMenu`). */\nexport type ListActionRowProps = ListActionRowCommonProps &\n  (ListActionRowTrailingButtonProps | ListActionRowTrailingMenuProps);\n\nexport function ListActionRow({\n  label,\n  description,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  icon,\n  iconTile,\n  action,\n  itemId,\n  selected = false,\n  pressed,\n  accessibleLabel,\n  title,\n  multiline = false,\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  draggable,\n  dragging = false,\n  dropPosition,\n  trailingAction,\n  trailingActionLabel,\n  trailingActionIcon,\n  trailingActionDisabled = false,\n  trailingActionTitle,\n  trailingActionVisibility = 'always',\n  trailingMenu,\n  className = '',\n  rootAttributes = {},\n  trailingActionAttributes = {},\n  slot,\n}: ListActionRowProps) {\n  const extensionRootAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const extensionTrailingAttributes = filterControlAttributes(\n    trailingActionAttributes,\n    PROTECTED_TRAILING_DATA_ATTRIBUTES,\n  );\n  const tile = icon\n    ? listIconTilePresentation(iconTile, 'list-action-row')\n    : null;\n  const iconSize = tile?.tile ? 32 : 18;\n\n  return (\n    <div\n      {...extensionRootAttributes}\n      class={`kui-list-action-row ${className}`.trim()}\n      data-component=\"list-action-row\"\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-icon-tile={tile?.tile}\n      data-icon-tile-tone={tile?.tone}\n      data-multiline={multiline ? 'true' : undefined}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-trailing-visibility={trailingActionVisibility}\n      data-state={state}\n      data-selected={String(selected)}\n      data-pressed={pressed === undefined ? undefined : String(pressed)}\n      data-placeholder={placeholder ? 'true' : undefined}\n      draggable={nativeDraggable(draggable, placeholder)}\n      data-dragging={dragging ? 'true' : undefined}\n      data-drop-position={dropPosition}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n      slot={slot}\n    >\n      <button\n        type=\"button\"\n        class=\"kui-list-action-row__primary\"\n        title={placeholder ? undefined : title}\n        disabled={disabled || placeholder}\n        tabindex={placeholder ? -1 : tabIndex}\n        data-kui-disabled={disabled ? 'true' : undefined}\n        data-action={placeholder ? undefined : action}\n        data-item-id={itemId}\n        aria-label={accessibleLabel}\n        aria-current={selected ? 'page' : undefined}\n        aria-pressed={pressed === undefined ? undefined : String(pressed)}\n      >\n        {icon && (\n          <span\n            class=\"kui-list-action-row__icon\"\n            style={placeholder ? undefined : tile?.style}\n          >\n            {placeholder ? (\n              <Skeleton\n                block\n                width={remify(iconSize)}\n                height={remify(iconSize)}\n              />\n            ) : (\n              icon\n            )}\n          </span>\n        )}\n        <span class=\"kui-list-action-row__label\">\n          <span class=\"kui-list-action-row__primary-label\">\n            {placeholder ? (\n              <Skeleton width={em(9)} />\n            ) : multiline ? (\n              withWordBreaks(label)\n            ) : (\n              label\n            )}\n          </span>\n          {description && (\n            <span class=\"kui-list-action-row__description\">\n              {placeholder ? <Skeleton width={em(11)} /> : description}\n            </span>\n          )}\n          {(busy || status) && (\n            <span class=\"kui-list-action-row__status\">\n              {/* The busy spinner is component-owned chrome drawn from a\n                  known prop, so a placeholder keeps it live; only the status\n                  text is a value and becomes a skeleton. */}\n              {busy && <LoadingSpinner />}\n              {status && (placeholder ? <Skeleton width={em(6)} /> : status)}\n            </span>\n          )}\n        </span>\n      </button>\n      {trailingMenu ? (\n        <PopupMenu\n          label={trailingMenu.label}\n          icon={trailingMenu.icon}\n          items={trailingMenu.items}\n          placement={trailingMenu.placement ?? 'bottom-end'}\n          caret={false}\n          disabled={Boolean(trailingMenu.disabled) || placeholder}\n        />\n      ) : (\n        <button\n          {...extensionTrailingAttributes}\n          type=\"button\"\n          class=\"kui-list-action-row__trailing-action\"\n          data-action={placeholder ? undefined : trailingAction}\n          data-item-id={itemId}\n          aria-label={trailingActionLabel}\n          title={trailingActionTitle ?? trailingActionLabel}\n          disabled={trailingActionDisabled || placeholder || undefined}\n          data-kui-disabled={trailingActionDisabled ? 'true' : undefined}\n        >\n          {trailingActionIcon}\n        </button>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/chunk-K57NINLH.js

@@ -0,0 +1,137 @@
+import { isApplePlatform, selectionGesture, applySelection } from './chunk-GXSX6Q6O.js';
+
+// src/components/forms/choice-chips/wiring/wire-choice-chips.ts
+var GROUP = '[data-component="choice-chips"][data-selection-mode="multiple"]';
+var OPTION = '.kui-choice-chips__chip[role="option"]';
+function optionsOf(group) {
+  return Array.from(group.querySelectorAll(OPTION)).filter(
+    (option) => option.closest(GROUP) === group
+  );
+}
+var valueOf = (option) => option.dataset.choiceValue;
+var isEnabled = (option) => option.getAttribute("aria-disabled") !== "true";
+function readChoiceChips(group) {
+  return optionsOf(group).filter((option) => option.getAttribute("aria-selected") === "true").map(valueOf);
+}
+function wireChoiceChips(root) {
+  const anchors = /* @__PURE__ */ new WeakMap();
+  const apple = isApplePlatform();
+  const moveFocus = (group, target) => {
+    for (const option of optionsOf(group))
+      option.tabIndex = option === target ? 0 : -1;
+    target.focus();
+  };
+  const commit = (group, next) => {
+    const before = readChoiceChips(group);
+    const options = optionsOf(group);
+    const keep = new Set(next);
+    for (const option of options)
+      if (!isEnabled(option) && before.includes(valueOf(option)))
+        keep.add(valueOf(option));
+    for (const option of options)
+      option.setAttribute(
+        "aria-selected",
+        keep.has(valueOf(option)) ? "true" : "false"
+      );
+    const after = readChoiceChips(group);
+    if (after.join("\0") === before.join("\0")) return;
+    for (const input of group.querySelectorAll(
+      ":scope > input.kui-choice-chips__value"
+    ))
+      input.remove();
+    for (const value of after) {
+      const input = group.ownerDocument.createElement("input");
+      input.className = "kui-choice-chips__value";
+      input.type = "hidden";
+      input.name = group.dataset.name ?? "";
+      input.value = value;
+      if (group.dataset.form) input.setAttribute("form", group.dataset.form);
+      group.append(input);
+    }
+    group.dispatchEvent(new Event("change", { bubbles: true }));
+  };
+  const select = (group, target, gesture) => {
+    const value = valueOf(target);
+    const result = applySelection({
+      items: optionsOf(group).filter(isEnabled).map(valueOf),
+      selected: readChoiceChips(group),
+      anchor: anchors.get(group),
+      target: value,
+      gesture
+    });
+    anchors.set(group, result.anchor);
+    commit(group, result.selected);
+  };
+  const locate = (event) => {
+    const option = event.target instanceof Element ? event.target.closest(OPTION) : null;
+    const group = option?.closest(GROUP);
+    if (!option || !group || group.getAttribute("aria-disabled") === "true")
+      return null;
+    return { option, group };
+  };
+  const click = (event) => {
+    const hit = locate(event);
+    if (!hit || !isEnabled(hit.option)) return;
+    moveFocus(hit.group, hit.option);
+    select(hit.group, hit.option, selectionGesture(event, apple));
+  };
+  const keydown = (event) => {
+    if (event.defaultPrevented || event.altKey) return;
+    const hit = locate(event);
+    if (!hit) return;
+    const { option, group } = hit;
+    const toggleKey = apple ? event.metaKey : event.ctrlKey;
+    const enabled = optionsOf(group).filter(isEnabled);
+    if (toggleKey && !event.shiftKey && event.key.toLowerCase() === "a") {
+      event.preventDefault();
+      commit(group, enabled.map(valueOf));
+      return;
+    }
+    if (event.key === " " || event.key === "Spacebar") {
+      event.preventDefault();
+      if (!isEnabled(option)) return;
+      select(group, option, event.shiftKey ? "extend" : "toggle");
+      return;
+    }
+    const rtl = group.ownerDocument.defaultView?.getComputedStyle(group).direction === "rtl";
+    const index = enabled.indexOf(option);
+    let next;
+    switch (event.key) {
+      case "ArrowDown":
+        next = enabled[index + 1];
+        break;
+      case "ArrowUp":
+        next = enabled[index - 1];
+        break;
+      case "ArrowRight":
+        next = enabled[index + (rtl ? -1 : 1)];
+        break;
+      case "ArrowLeft":
+        next = enabled[index + (rtl ? 1 : -1)];
+        break;
+      case "Home":
+        next = enabled[0];
+        break;
+      case "End":
+        next = enabled[enabled.length - 1];
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    if (!next) return;
+    moveFocus(group, next);
+    if (toggleKey && !event.shiftKey) return;
+    select(group, next, event.shiftKey ? "extend" : "replace");
+  };
+  root.addEventListener("click", click);
+  root.addEventListener("keydown", keydown);
+  return () => {
+    root.removeEventListener("click", click);
+    root.removeEventListener("keydown", keydown);
+  };
+}
+
+export { readChoiceChips, wireChoiceChips };
+
+//# sourceMappingURL=chunk-K57NINLH.js.map

package/dist/chunk-K57NINLH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/choice-chips/wiring/wire-choice-chips.ts"],"names":[],"mappings":"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","file":"chunk-K57NINLH.js","sourcesContent":["import {\n  applySelection,\n  isApplePlatform,\n  type SelectionGesture,\n  selectionGesture,\n} from '../../../../shared/selection/selection.js';\n\nconst GROUP = '[data-component=\"choice-chips\"][data-selection-mode=\"multiple\"]';\nconst OPTION = '.kui-choice-chips__chip[role=\"option\"]';\n\nfunction optionsOf(group: Element): HTMLElement[] {\n  return Array.from(group.querySelectorAll<HTMLElement>(OPTION)).filter(\n    (option) => option.closest(GROUP) === group,\n  );\n}\n\nconst valueOf = (option: HTMLElement) => option.dataset.choiceValue!;\nconst isEnabled = (option: HTMLElement) =>\n  option.getAttribute('aria-disabled') !== 'true';\n\n/** The selected values of a `multiple: true` ChoiceChips group, in choice order. */\nexport function readChoiceChips(group: Element): string[] {\n  return optionsOf(group)\n    .filter((option) => option.getAttribute('aria-selected') === 'true')\n    .map(valueOf);\n}\n\n/**\n * Give every `multiple: true` ChoiceChips group under `root` its listbox\n * behavior: a click selects one chip, Cmd (Apple platforms) or Ctrl\n * (elsewhere) toggles one, and Shift extends a range from the last plain or\n * toggled chip. On the keyboard the group is one Tab stop: arrows, Home, and\n * End move the selection, Shift with them extends it, Cmd/Ctrl with them\n * moves focus alone, Space toggles the focused chip (Shift+Space extends to\n * it), and Cmd/Ctrl+A selects every chip. Disabled chips keep their state.\n * Each change updates `aria-selected` and the hidden form inputs, then fires\n * a bubbling `change` on the group, whose `data-action` is the group's\n * `action`; read the new set with `readChoiceChips`. Returns a disposer.\n */\nexport function wireChoiceChips(root: HTMLElement | Document): () => void {\n  const anchors = new WeakMap<Element, string>();\n  const apple = isApplePlatform();\n\n  const moveFocus = (group: Element, target: HTMLElement) => {\n    for (const option of optionsOf(group))\n      option.tabIndex = option === target ? 0 : -1;\n    target.focus();\n  };\n\n  const commit = (group: HTMLElement, next: readonly string[]) => {\n    const before = readChoiceChips(group);\n    const options = optionsOf(group);\n    const keep = new Set(next);\n    // A disabled chip cannot be changed by the user: it keeps its state.\n    for (const option of options)\n      if (!isEnabled(option) && before.includes(valueOf(option)))\n        keep.add(valueOf(option));\n    for (const option of options)\n      option.setAttribute(\n        'aria-selected',\n        keep.has(valueOf(option)) ? 'true' : 'false',\n      );\n    const after = readChoiceChips(group);\n    if (after.join('\\u0000') === before.join('\\u0000')) return;\n    for (const input of group.querySelectorAll(\n      ':scope > input.kui-choice-chips__value',\n    ))\n      input.remove();\n    for (const value of after) {\n      const input = group.ownerDocument.createElement('input');\n      input.className = 'kui-choice-chips__value';\n      input.type = 'hidden';\n      input.name = group.dataset.name ?? '';\n      input.value = value;\n      if (group.dataset.form) input.setAttribute('form', group.dataset.form);\n      group.append(input);\n    }\n    group.dispatchEvent(new Event('change', { bubbles: true }));\n  };\n\n  const select = (\n    group: HTMLElement,\n    target: HTMLElement,\n    gesture: SelectionGesture,\n  ) => {\n    const value = valueOf(target);\n    const result = applySelection({\n      items: optionsOf(group).filter(isEnabled).map(valueOf),\n      selected: readChoiceChips(group),\n      anchor: anchors.get(group),\n      target: value,\n      gesture,\n    });\n    anchors.set(group, result.anchor);\n    commit(group, result.selected);\n  };\n\n  const locate = (event: Event) => {\n    const option =\n      event.target instanceof Element\n        ? event.target.closest<HTMLElement>(OPTION)\n        : null;\n    const group = option?.closest<HTMLElement>(GROUP);\n    if (!option || !group || group.getAttribute('aria-disabled') === 'true')\n      return null;\n    return { option, group };\n  };\n\n  const click = (event: Event) => {\n    const hit = locate(event);\n    if (!hit || !isEnabled(hit.option)) return;\n    moveFocus(hit.group, hit.option);\n    select(hit.group, hit.option, selectionGesture(event as MouseEvent, apple));\n  };\n\n  const keydown = (event: KeyboardEvent) => {\n    if (event.defaultPrevented || event.altKey) return;\n    const hit = locate(event);\n    if (!hit) return;\n    const { option, group } = hit;\n    const toggleKey = apple ? event.metaKey : event.ctrlKey;\n    const enabled = optionsOf(group).filter(isEnabled);\n    if (toggleKey && !event.shiftKey && event.key.toLowerCase() === 'a') {\n      event.preventDefault();\n      commit(group, enabled.map(valueOf));\n      return;\n    }\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      if (!isEnabled(option)) return;\n      select(group, option, event.shiftKey ? 'extend' : 'toggle');\n      return;\n    }\n    const rtl =\n      group.ownerDocument.defaultView?.getComputedStyle(group).direction ===\n      'rtl';\n    const index = enabled.indexOf(option);\n    let next: HTMLElement | undefined;\n    switch (event.key) {\n      case 'ArrowDown':\n        next = enabled[index + 1];\n        break;\n      case 'ArrowUp':\n        next = enabled[index - 1];\n        break;\n      case 'ArrowRight':\n        next = enabled[index + (rtl ? -1 : 1)];\n        break;\n      case 'ArrowLeft':\n        next = enabled[index + (rtl ? 1 : -1)];\n        break;\n      case 'Home':\n        next = enabled[0];\n        break;\n      case 'End':\n        next = enabled[enabled.length - 1];\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    if (!next) return;\n    moveFocus(group, next);\n    if (toggleKey && !event.shiftKey) return;\n    select(group, next, event.shiftKey ? 'extend' : 'replace');\n  };\n\n  root.addEventListener('click', click);\n  root.addEventListener('keydown', keydown as EventListener);\n  return () => {\n    root.removeEventListener('click', click);\n    root.removeEventListener('keydown', keydown as EventListener);\n  };\n}\n"]}

package/dist/chunk-KC6WUSNS.js

@@ -0,0 +1,34 @@
+// src/components/forms/text-field/wiring/wire-text-fields.ts
+var CLEAR = "[data-text-field-clear]";
+var FIELD = '[data-component="text-field"]';
+var INPUT = ".kui-text-field__input";
+function wireTextFields(root) {
+  const onClick = (event) => {
+    const button = event.target instanceof Element ? event.target.closest(CLEAR) : null;
+    const input = button?.closest(FIELD)?.querySelector(INPUT);
+    if (!input || input.disabled || input.readOnly) return;
+    event.preventDefault();
+    input.value = "";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+    input.focus();
+  };
+  const onInput = (event) => {
+    const input = event.target;
+    if (!(input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement))
+      return;
+    const count = input.closest(FIELD)?.querySelector("[data-text-field-count]");
+    if (!count || !input.matches(INPUT)) return;
+    count.textContent = `${String(input.value.length)} / ${String(input.maxLength)}`;
+  };
+  root.addEventListener("click", onClick);
+  root.addEventListener("input", onInput);
+  return () => {
+    root.removeEventListener("click", onClick);
+    root.removeEventListener("input", onInput);
+  };
+}
+
+export { wireTextFields };
+
+//# sourceMappingURL=chunk-KC6WUSNS.js.map

package/dist/chunk-KC6WUSNS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/text-field/wiring/wire-text-fields.ts"],"names":[],"mappings":";AAEA,IAAM,KAAA,GAAQ,yBAAA;AACd,IAAM,KAAA,GAAQ,+BAAA;AACd,IAAM,KAAA,GAAQ,wBAAA;AAUP,SAAS,eAAe,IAAA,EAAwB;AACrD,EAAA,MAAM,OAAA,GAAU,CAAC,KAAA,KAAiB;AAChC,IAAA,MAAM,MAAA,GACJ,MAAM,MAAA,YAAkB,OAAA,GACpB,MAAM,MAAA,CAAO,OAAA,CAA2B,KAAK,CAAA,GAC7C,IAAA;AACN,IAAA,MAAM,QAAQ,MAAA,EACV,OAAA,CAAQ,KAAK,CAAA,EACb,cAAgC,KAAK,CAAA;AACzC,IAAA,IAAI,CAAC,KAAA,IAAS,KAAA,CAAM,QAAA,IAAY,MAAM,QAAA,EAAU;AAChD,IAAA,KAAA,CAAM,cAAA,EAAe;AACrB,IAAA,KAAA,CAAM,KAAA,GAAQ,EAAA;AACd,IAAA,KAAA,CAAM,aAAA,CAAc,IAAI,KAAA,CAAM,OAAA,EAAS,EAAE,OAAA,EAAS,IAAA,EAAM,CAAC,CAAA;AACzD,IAAA,KAAA,CAAM,aAAA,CAAc,IAAI,KAAA,CAAM,QAAA,EAAU,EAAE,OAAA,EAAS,IAAA,EAAM,CAAC,CAAA;AAC1D,IAAA,KAAA,CAAM,KAAA,EAAM;AAAA,EACd,CAAA;AACA,EAAA,MAAM,OAAA,GAAU,CAAC,KAAA,KAAiB;AAChC,IAAA,MAAM,QAAQ,KAAA,CAAM,MAAA;AACpB,IAAA,IAAI,EACF,KAAA,YAAiB,gBAAA,IAAoB,KAAA,YAAiB,mBAAA,CAAA;AAEtD,MAAA;AACF,IAAA,MAAM,QAAQ,KAAA,CACX,OAAA,CAAQ,KAAK,CAAA,EACZ,cAA2B,yBAAyB,CAAA;AACxD,IAAA,IAAI,CAAC,KAAA,IAAS,CAAC,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA,EAAG;AACrC,IAAA,KAAA,CAAM,WAAA,GAAc,CAAA,EAAG,MAAA,CAAO,KAAA,CAAM,KAAA,CAAM,MAAM,CAAC,CAAA,GAAA,EAAM,MAAA,CAAO,KAAA,CAAM,SAAS,CAAC,CAAA,CAAA;AAAA,EAChF,CAAA;AACA,EAAA,IAAA,CAAK,gBAAA,CAAiB,SAAS,OAAO,CAAA;AACtC,EAAA,IAAA,CAAK,gBAAA,CAAiB,SAAS,OAAO,CAAA;AACtC,EAAA,OAAO,MAAM;AACX,IAAA,IAAA,CAAK,mBAAA,CAAoB,SAAS,OAAO,CAAA;AACzC,IAAA,IAAA,CAAK,mBAAA,CAAoB,SAAS,OAAO,CAAA;AAAA,EAC3C,CAAA;AACF","file":"chunk-KC6WUSNS.js","sourcesContent":["type Root = HTMLElement | Document;\n\nconst CLEAR = '[data-text-field-clear]';\nconst FIELD = '[data-component=\"text-field\"]';\nconst INPUT = '.kui-text-field__input';\n\n/**\n * Make every clearable `TextField` below root clear itself: its clear button\n * empties the field, announces the change with bubbling `input` and `change`\n * events (as typing would), and returns focus to the field. The button hides\n * itself while the field is empty. A field with `showCount` keeps its\n * `count / maxLength` current as people type. Dispose with the owning\n * application.\n */\nexport function wireTextFields(root: Root): () => void {\n  const onClick = (event: Event) => {\n    const button =\n      event.target instanceof Element\n        ? event.target.closest<HTMLButtonElement>(CLEAR)\n        : null;\n    const input = button\n      ?.closest(FIELD)\n      ?.querySelector<HTMLInputElement>(INPUT);\n    if (!input || input.disabled || input.readOnly) return;\n    event.preventDefault();\n    input.value = '';\n    input.dispatchEvent(new Event('input', { bubbles: true }));\n    input.dispatchEvent(new Event('change', { bubbles: true }));\n    input.focus();\n  };\n  const onInput = (event: Event) => {\n    const input = event.target;\n    if (!(\n      input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement\n    ))\n      return;\n    const count = input\n      .closest(FIELD)\n      ?.querySelector<HTMLElement>('[data-text-field-count]');\n    if (!count || !input.matches(INPUT)) return;\n    count.textContent = `${String(input.value.length)} / ${String(input.maxLength)}`;\n  };\n  root.addEventListener('click', onClick);\n  root.addEventListener('input', onInput);\n  return () => {\n    root.removeEventListener('click', onClick);\n    root.removeEventListener('input', onInput);\n  };\n}\n"]}

package/dist/chunk-KCS6NJ3O.js

@@ -0,0 +1,82 @@
+import { gapLength } from './chunk-MHMWQ7RB.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var gridProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-columns",
+  "data-min-column-width",
+  "data-auto-fill",
+  "data-flex",
+  "data-fill",
+  "data-text-insets",
+  "data-control-insets"
+]);
+function Grid({
+  children,
+  selectionMode,
+  ariaLabel,
+  columns,
+  minColumnWidth,
+  autoFill = false,
+  gap = "xs",
+  flex = false,
+  fill = false,
+  textInsets = "",
+  controlInsets = "",
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  if (selectionMode === "multiple" && !ariaLabel) {
+    throw new Error("Multi-select Grid requires an ariaLabel");
+  }
+  if (minColumnWidth !== void 0 && columns !== void 0) {
+    throw new RangeError(
+      "Grid columns and minColumnWidth are mutually exclusive"
+    );
+  }
+  if (autoFill && minColumnWidth === void 0) {
+    throw new RangeError("Grid autoFill requires minColumnWidth");
+  }
+  if (minColumnWidth === void 0 && (columns === void 0 || !Number.isSafeInteger(columns) || columns < 1)) {
+    throw new RangeError("Grid columns must be a positive safe integer");
+  }
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    gridProtectedAttributes
+  );
+  const gapStyle = typeof gap === "string" ? `--_kui-grid-gap:${gapLength(gap)}` : `--_kui-grid-column-gap:${gapLength(gap.column)};--_kui-grid-row-gap:${gapLength(gap.row)}`;
+  const flexValue = flex === true ? "1 1 auto" : flex || void 0;
+  const style = [
+    columns === void 0 ? "" : `--_kui-grid-columns:${columns}`,
+    minColumnWidth === void 0 ? "" : `--_kui-grid-min-column-width:${minColumnWidth}`,
+    gapStyle,
+    flexValue ? `--_kui-grid-flex:${flexValue}` : ""
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...safeRootAttributes,
+      class: `kui-grid ${className}`.trim(),
+      "data-component": "grid",
+      role: selectionMode === "multiple" ? "grid" : void 0,
+      "aria-label": selectionMode === "multiple" ? ariaLabel : void 0,
+      "aria-multiselectable": selectionMode === "multiple" ? "true" : void 0,
+      "data-columns": columns === void 0 ? void 0 : String(columns),
+      "data-min-column-width": minColumnWidth === void 0 ? void 0 : "true",
+      "data-auto-fill": autoFill ? "true" : void 0,
+      "data-flex": String(Boolean(flex)),
+      "data-fill": fill ? "true" : void 0,
+      "data-text-insets": textInsets || void 0,
+      "data-control-insets": controlInsets || void 0,
+      style,
+      slot,
+      children
+    }
+  );
+}
+
+export { Grid };
+
+//# sourceMappingURL=chunk-KCS6NJ3O.js.map

package/dist/chunk-KCS6NJ3O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/grid/grid.tsx"],"names":[],"mappings":"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","file":"chunk-KCS6NJ3O.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-KDQZ3E5C.js

@@ -0,0 +1,75 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/components/forms/file-picker/file-picker.tsx
+function fileInput(props, label) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "file",
+      class: "kui-file-picker__input",
+      accept: props.accept,
+      multiple: props.multiple,
+      name: props.name,
+      "aria-label": label,
+      disabled: props.disabled
+    }
+  );
+}
+function FilePickerTrigger(props) {
+  const {
+    label,
+    accessibleLabel,
+    icon,
+    pickerId,
+    disabled,
+    className = ""
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      class: `kui-file-picker ${className}`.trim(),
+      "data-component": "file-picker-trigger",
+      "data-presentation": "trigger",
+      "data-file-picker-id": pickerId,
+      "data-disabled": disabled ? "true" : void 0,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { class: "kui-file-picker__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx("span", { children: label }),
+        fileInput(props, accessibleLabel)
+      ]
+    }
+  );
+}
+function FileDropZone(props) {
+  const {
+    title,
+    detail,
+    icon,
+    accessibleLabel,
+    pickerId,
+    disabled,
+    dropScope,
+    className = ""
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      class: `kui-file-picker ${className}`.trim(),
+      "data-component": "file-drop-zone",
+      "data-drop-scope": dropScope,
+      "data-presentation": "drop-zone",
+      "data-file-picker-id": pickerId,
+      "data-disabled": disabled ? "true" : void 0,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { class: "kui-file-picker__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx("span", { class: "kui-file-picker__title", children: title }),
+        detail && /* @__PURE__ */ jsx("span", { class: "kui-file-picker__detail", children: detail }),
+        fileInput(props, accessibleLabel)
+      ]
+    }
+  );
+}
+
+export { FileDropZone, FilePickerTrigger };
+
+//# sourceMappingURL=chunk-KDQZ3E5C.js.map

package/dist/chunk-KDQZ3E5C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/file-picker/file-picker.tsx"],"names":[],"mappings":";;;AA0CA,SAAS,SAAA,CAAU,OAAuB,KAAA,EAA2B;AACnE,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAM,wBAAA;AAAA,MACN,QAAQ,KAAA,CAAM,MAAA;AAAA,MACd,UAAU,KAAA,CAAM,QAAA;AAAA,MAChB,MAAM,KAAA,CAAM,IAAA;AAAA,MACZ,YAAA,EAAY,KAAA;AAAA,MACZ,UAAU,KAAA,CAAM;AAAA;AAAA,GAClB;AAEJ;AAQO,SAAS,kBAAkB,KAAA,EAA+B;AAC/D,EAAA,MAAM;AAAA,IACJ,KAAA;AAAA,IACA,eAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA,GAAY;AAAA,GACd,GAAI,KAAA;AACJ,EAAA,uBACE,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,qBAAA;AAAA,MACf,mBAAA,EAAkB,SAAA;AAAA,MAClB,qBAAA,EAAqB,QAAA;AAAA,MACrB,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MAElC,QAAA,EAAA;AAAA,QAAA,IAAA,wBACE,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAwB,aAAA,EAAY,QAC7C,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,wBAEF,GAAA,CAAC,UAAM,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACZ,SAAA,CAAU,OAAO,eAAe;AAAA;AAAA;AAAA,GACnC;AAEJ;AAOO,SAAS,aAAa,KAAA,EAA0B;AACrD,EAAA,MAAM;AAAA,IACJ,KAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA,GAAY;AAAA,GACd,GAAI,KAAA;AACJ,EAAA,uBACE,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,gBAAA;AAAA,MACf,iBAAA,EAAiB,SAAA;AAAA,MACjB,mBAAA,EAAkB,WAAA;AAAA,MAClB,qBAAA,EAAqB,QAAA;AAAA,MACrB,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MAElC,QAAA,EAAA;AAAA,QAAA,IAAA,wBACE,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAwB,aAAA,EAAY,QAC7C,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,wBAEF,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QAC3C,MAAA,oBAAU,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,2BAA2B,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,QACxD,SAAA,CAAU,OAAO,eAAe;AAAA;AAAA;AAAA,GACnC;AAEJ","file":"chunk-KDQZ3E5C.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\ninterface FileInputProps {\n  /** Accepted types, as the native `accept` attribute (`.png,image/*`). */\n  accept?: string;\n  /** Allow several files at once. */\n  multiple?: boolean;\n  /** Form field name of the native file input. */\n  name?: string;\n  /** Identifies this picker in `wireFilePickers` reports. */\n  pickerId?: string;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface FilePickerTriggerProps extends FileInputProps {\n  /** Visible trigger text, such as \"Add\". */\n  label: string;\n  /** Accessible name of the file input when it should say more than `label`. */\n  accessibleLabel?: string;\n  /** Optional decorative leading icon, normally an unsized LucideIcon. */\n  icon?: SafeHtml;\n}\n\nexport interface FileDropZoneProps extends FileInputProps {\n  /** Primary copy, such as \"Drop attachments here or browse\". */\n  title: string;\n  /** Optional secondary copy, such as accepted types or a size limit. */\n  detail?: string;\n  /** Optional decorative icon above the copy, normally an unsized LucideIcon. */\n  icon?: SafeHtml;\n  /** Accessible name of the file input when it should say more than `title`. */\n  accessibleLabel?: string;\n  /**\n   * A selector for an enclosing element (the zone's ancestor) that also\n   * takes drops, such as an attachments panel: while files are dragged over\n   * any part of it the zone is highlighted, and files dropped there are\n   * reported for this zone (`via: 'drop'`).\n   */\n  dropScope?: string;\n}\n\nfunction fileInput(props: FileInputProps, label: string | undefined) {\n  return (\n    <input\n      type=\"file\"\n      class=\"kui-file-picker__input\"\n      accept={props.accept}\n      multiple={props.multiple}\n      name={props.name}\n      aria-label={label}\n      disabled={props.disabled}\n    />\n  );\n}\n\n/**\n * A compact, link-toned trigger that opens the native file chooser: a label\n * around a visually hidden `<input type=\"file\">`, so a click or keyboard\n * activation reaches the input without script. Report choices with\n * `wireFilePickers`.\n */\nexport function FilePickerTrigger(props: FilePickerTriggerProps) {\n  const {\n    label,\n    accessibleLabel,\n    icon,\n    pickerId,\n    disabled,\n    className = '',\n  } = props;\n  return (\n    <label\n      class={`kui-file-picker ${className}`.trim()}\n      data-component=\"file-picker-trigger\"\n      data-presentation=\"trigger\"\n      data-file-picker-id={pickerId}\n      data-disabled={disabled ? 'true' : undefined}\n    >\n      {icon && (\n        <span class=\"kui-file-picker__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span>{label}</span>\n      {fileInput(props, accessibleLabel)}\n    </label>\n  );\n}\n\n/**\n * A dashed drop target that also opens the file chooser when clicked. While\n * files are dragged over it, `wireFilePickers` sets `data-dragging` and Kerf\n * highlights it; dropped and chosen files are reported the same way.\n */\nexport function FileDropZone(props: FileDropZoneProps) {\n  const {\n    title,\n    detail,\n    icon,\n    accessibleLabel,\n    pickerId,\n    disabled,\n    dropScope,\n    className = '',\n  } = props;\n  return (\n    <label\n      class={`kui-file-picker ${className}`.trim()}\n      data-component=\"file-drop-zone\"\n      data-drop-scope={dropScope}\n      data-presentation=\"drop-zone\"\n      data-file-picker-id={pickerId}\n      data-disabled={disabled ? 'true' : undefined}\n    >\n      {icon && (\n        <span class=\"kui-file-picker__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span class=\"kui-file-picker__title\">{title}</span>\n      {detail && <span class=\"kui-file-picker__detail\">{detail}</span>}\n      {fileInput(props, accessibleLabel)}\n    </label>\n  );\n}\n"]}