@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.100

package/dist/chunk-ETCWQLJV.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/components/forms/combobox/combobox.tsx
+var optionParts = (suggestion) => typeof suggestion === "string" ? { value: suggestion, label: suggestion } : suggestion;
+function Combobox({
+  id,
+  label,
+  suggestions,
+  value = "",
+  placeholder,
+  hint,
+  name,
+  createLabel = "Create \u201C{value}\u201D",
+  disabled = false,
+  className = ""
+}) {
+  const listId = `${id}-listbox`;
+  const hintId = hint ? `${id}-hint` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: `kui-combobox ${className}`.trim(),
+      "data-component": "combobox",
+      "data-combobox-id": id,
+      "data-create-label": createLabel === false ? void 0 : createLabel,
+      "data-disabled": disabled ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("label", { class: "kui-combobox__label", for: id, children: label }),
+        /* @__PURE__ */ jsxs("div", { class: "kui-combobox__control", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id,
+              class: "kui-combobox__input",
+              type: "text",
+              role: "combobox",
+              "aria-autocomplete": "list",
+              "aria-expanded": "false",
+              "aria-controls": listId,
+              "aria-describedby": hintId,
+              autocomplete: "off",
+              spellcheck: "false",
+              name,
+              value,
+              placeholder,
+              disabled
+            }
+          ),
+          /* @__PURE__ */ jsxs("ul", { class: "kui-combobox__listbox", id: listId, role: "listbox", hidden: true, children: [
+            suggestions.map((suggestion, index) => {
+              const option = optionParts(suggestion);
+              return /* @__PURE__ */ jsx(
+                "li",
+                {
+                  class: "kui-combobox__option",
+                  id: `${id}-option-${index}`,
+                  role: "option",
+                  "aria-selected": "false",
+                  "data-value": option.value,
+                  children: option.label
+                }
+              );
+            }),
+            createLabel !== false && /* @__PURE__ */ jsx(
+              "li",
+              {
+                class: "kui-combobox__option",
+                id: `${id}-option-create`,
+                role: "option",
+                "aria-selected": "false",
+                "data-create": "",
+                hidden: true
+              }
+            )
+          ] })
+        ] }),
+        hint && /* @__PURE__ */ jsx("div", { class: "kui-combobox__hint", id: hintId, children: hint })
+      ]
+    }
+  );
+}
+
+export { Combobox };
+
+//# sourceMappingURL=chunk-ETCWQLJV.js.map

package/dist/chunk-ETCWQLJV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/combobox/combobox.tsx"],"names":[],"mappings":"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","file":"chunk-ETCWQLJV.js","sourcesContent":["/** A suggestion: a plain string, or a value with a distinct visible label. */\nexport type ComboboxSuggestion = string | { value: string; label: string };\n\nexport interface ComboboxProps {\n  /** Unique id; it also identifies the field in `wireComboboxes` reports. */\n  id: string;\n  /** Visible field label. */\n  label: string;\n  /** Suggestions to filter as the person types. */\n  suggestions: readonly ComboboxSuggestion[];\n  /** Initial text; the field owns its text while the person types. */\n  value?: string;\n  placeholder?: string;\n  /** Optional hint below the field, such as \"Press Enter to add\". */\n  hint?: string;\n  /** Form field name. */\n  name?: string;\n  /**\n   * Offer to create the typed text when it matches no suggestion; the option\n   * reads `createLabel` with `{value}` replaced. Omit to only allow\n   * suggestions. Default `Create “{value}”`.\n   */\n  createLabel?: string | false;\n  disabled?: boolean;\n  className?: string;\n}\n\nconst optionParts = (suggestion: ComboboxSuggestion) =>\n  typeof suggestion === 'string'\n    ? { value: suggestion, label: suggestion }\n    : suggestion;\n\n/**\n * A free-text field with a filtered suggestion list that can also create a new\n * value: the ARIA combobox pattern on a native input with the themed Web\n * Awesome field chrome. `wireComboboxes` filters, moves the active option,\n * and reports commits (Enter, comma, or a click). Use `Select` when only\n * existing values are allowed and nothing is typed.\n */\nexport function Combobox({\n  id,\n  label,\n  suggestions,\n  value = '',\n  placeholder,\n  hint,\n  name,\n  createLabel = 'Create “{value}”',\n  disabled = false,\n  className = '',\n}: ComboboxProps) {\n  const listId = `${id}-listbox`;\n  const hintId = hint ? `${id}-hint` : undefined;\n  return (\n    <div\n      class={`kui-combobox ${className}`.trim()}\n      data-component=\"combobox\"\n      data-combobox-id={id}\n      data-create-label={createLabel === false ? undefined : createLabel}\n      data-disabled={disabled ? 'true' : undefined}\n    >\n      <label class=\"kui-combobox__label\" for={id}>\n        {label}\n      </label>\n      <div class=\"kui-combobox__control\">\n        <input\n          id={id}\n          class=\"kui-combobox__input\"\n          type=\"text\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          aria-expanded=\"false\"\n          aria-controls={listId}\n          aria-describedby={hintId}\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          name={name}\n          value={value}\n          placeholder={placeholder}\n          disabled={disabled}\n        />\n        <ul class=\"kui-combobox__listbox\" id={listId} role=\"listbox\" hidden>\n          {suggestions.map((suggestion, index) => {\n            const option = optionParts(suggestion);\n            return (\n              <li\n                class=\"kui-combobox__option\"\n                id={`${id}-option-${index}`}\n                role=\"option\"\n                aria-selected=\"false\"\n                data-value={option.value}\n              >\n                {option.label}\n              </li>\n            );\n          })}\n          {createLabel !== false && (\n            <li\n              class=\"kui-combobox__option\"\n              id={`${id}-option-create`}\n              role=\"option\"\n              aria-selected=\"false\"\n              data-create=\"\"\n              hidden\n            />\n          )}\n        </ul>\n      </div>\n      {hint && (\n        <div class=\"kui-combobox__hint\" id={hintId}>\n          {hint}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/chunk-FDZNYD4C.js

@@ -0,0 +1,138 @@
+// src/components/forms/combobox/wiring/wire-comboboxes.ts
+var INPUT = ".kui-combobox__input";
+function partsOf(input) {
+  const field = input.closest('[data-component="combobox"]');
+  const listbox = field.querySelector('[role="listbox"]');
+  return {
+    field,
+    input,
+    listbox,
+    create: listbox.querySelector("[data-create]")
+  };
+}
+var visibleOptions = (parts) => [...parts.listbox.querySelectorAll('[role="option"]')].filter(
+  (option) => !option.hidden
+);
+var matches = (option, text) => option.textContent.toLowerCase().includes(text) || option.dataset.value.toLowerCase().includes(text);
+function setActive(parts, option) {
+  for (const item of parts.listbox.querySelectorAll('[role="option"]'))
+    item.setAttribute("aria-selected", String(item === option));
+  if (option) {
+    parts.input.setAttribute("aria-activedescendant", option.id);
+    option.scrollIntoView?.({ block: "nearest" });
+  } else parts.input.removeAttribute("aria-activedescendant");
+}
+function activeOption(parts) {
+  const id = parts.input.getAttribute("aria-activedescendant");
+  return id ? parts.listbox.querySelector(`#${CSS.escape(id)}`) : null;
+}
+function close(parts) {
+  parts.listbox.hidden = true;
+  parts.input.setAttribute("aria-expanded", "false");
+  setActive(parts, null);
+}
+function update(parts) {
+  const typed = parts.input.value.trim();
+  const text = typed.toLowerCase();
+  let exact = false;
+  for (const option of parts.listbox.querySelectorAll(
+    '[role="option"]:not([data-create])'
+  )) {
+    option.hidden = text !== "" && !matches(option, text);
+    if (option.dataset.value.toLowerCase() === text) exact = true;
+  }
+  if (parts.create) {
+    parts.create.hidden = typed === "" || exact;
+    parts.create.dataset.value = typed;
+    parts.create.textContent = parts.field.dataset.createLabel.replaceAll(
+      "{value}",
+      typed
+    );
+  }
+  const options = visibleOptions(parts);
+  parts.listbox.hidden = options.length === 0;
+  parts.input.setAttribute("aria-expanded", String(options.length > 0));
+  if (!options.includes(activeOption(parts))) setActive(parts, null);
+}
+function wireComboboxes(root, { onCommit, commitKeys = [","] }) {
+  const commit = (parts, active) => {
+    const option = active ?? (parts.create ? null : visibleOptions(parts)[0] ?? null);
+    const typed = parts.input.value.trim();
+    const value = option ? option.dataset.value : typed;
+    const suggestion = [
+      ...parts.listbox.querySelectorAll(
+        '[role="option"]:not([data-create])'
+      )
+    ].find((item) => item.dataset.value.toLowerCase() === value.toLowerCase());
+    const created = !suggestion;
+    if (created && !parts.create) return;
+    close(parts);
+    onCommit({
+      id: parts.field.dataset.comboboxId,
+      value: suggestion?.dataset.value ?? value,
+      created,
+      input: parts.input
+    });
+  };
+  const inputOf = (event) => event.target instanceof HTMLInputElement && event.target.matches(INPUT) ? event.target : null;
+  const onInput = (event) => {
+    const input = inputOf(event);
+    const parts = input && partsOf(input);
+    if (parts) update(parts);
+  };
+  const onFocus = onInput;
+  const onKeyDown = (event) => {
+    const keyboard = event;
+    const input = inputOf(keyboard);
+    const parts = input && partsOf(input);
+    if (!parts || keyboard.isComposing) return;
+    const options = visibleOptions(parts);
+    const current = activeOption(parts);
+    const index = current ? options.indexOf(current) : -1;
+    if (keyboard.key === "ArrowDown" || keyboard.key === "ArrowUp") {
+      keyboard.preventDefault();
+      if (parts.listbox.hidden) update(parts);
+      const open = visibleOptions(parts);
+      if (open.length === 0) return;
+      const step = keyboard.key === "ArrowDown" ? 1 : -1;
+      const next = index < 0 ? step > 0 ? 0 : open.length - 1 : (index + step + open.length) % open.length;
+      setActive(parts, open[next]);
+    } else if (keyboard.key === "Enter" || commitKeys.includes(keyboard.key)) {
+      if (!parts.input.value.trim() && !current) return;
+      keyboard.preventDefault();
+      commit(parts, current);
+    } else if (keyboard.key === "Escape" && !parts.listbox.hidden) {
+      keyboard.preventDefault();
+      close(parts);
+    }
+  };
+  const onPointerDown = (event) => {
+    const option = event.target instanceof Element ? event.target.closest(".kui-combobox__option") : null;
+    const input = option?.closest('[data-component="combobox"]')?.querySelector(INPUT);
+    const parts = input && partsOf(input);
+    if (!option || !parts) return;
+    event.preventDefault();
+    commit(parts, option);
+  };
+  const onFocusOut = (event) => {
+    const input = inputOf(event);
+    const parts = input && partsOf(input);
+    if (parts) close(parts);
+  };
+  root.addEventListener("input", onInput);
+  root.addEventListener("focusin", onFocus);
+  root.addEventListener("keydown", onKeyDown);
+  root.addEventListener("pointerdown", onPointerDown);
+  root.addEventListener("focusout", onFocusOut);
+  return () => {
+    root.removeEventListener("input", onInput);
+    root.removeEventListener("focusin", onFocus);
+    root.removeEventListener("keydown", onKeyDown);
+    root.removeEventListener("pointerdown", onPointerDown);
+    root.removeEventListener("focusout", onFocusOut);
+  };
+}
+
+export { wireComboboxes };
+
+//# sourceMappingURL=chunk-FDZNYD4C.js.map

package/dist/chunk-FDZNYD4C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/combobox/wiring/wire-comboboxes.ts"],"names":[],"mappings":"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","file":"chunk-FDZNYD4C.js","sourcesContent":["type 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\nfunction close(parts: Parts) {\n  parts.listbox.hidden = true;\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  parts.listbox.hidden = options.length === 0;\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-FR76ZJQC.js

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

package/dist/chunk-FR76ZJQC.js.map

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

package/dist/chunk-G3J7JDP6.js

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

package/dist/chunk-G3J7JDP6.js.map

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

package/dist/chunk-GS2QD3N7.js

@@ -0,0 +1,14 @@
+import { wireResizeHandles } from './chunk-CEJ5FK6G.js';
+
+// src/components/layout/resizable-region/wiring/wire-resizable-regions.ts
+function wireResizableRegions(root, options) {
+  return wireResizeHandles(
+    root,
+    options,
+    '[data-component="resizable-region"]'
+  );
+}
+
+export { wireResizableRegions };
+
+//# sourceMappingURL=chunk-GS2QD3N7.js.map

package/dist/chunk-GS2QD3N7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/resizable-region/wiring/wire-resizable-regions.ts"],"names":[],"mappings":";;;AASO,SAAS,oBAAA,CACd,MACA,OAAA,EACA;AACA,EAAA,OAAO,iBAAA;AAAA,IACL,IAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACF;AACF","file":"chunk-GS2QD3N7.js","sourcesContent":["import {\n  type ResizeCommit,\n  type WireResizableRegionsOptions,\n  wireResizeHandles,\n} from '../internal/resize-wiring.js';\n\nexport type { ResizeCommit, WireResizableRegionsOptions };\n\n/** Wire pointer and separator-keyboard behavior for every ResizableRegion below root. */\nexport function wireResizableRegions(\n  root: HTMLElement,\n  options: WireResizableRegionsOptions,\n) {\n  return wireResizeHandles(\n    root,\n    options,\n    '[data-component=\"resizable-region\"]',\n  );\n}\n"]}

package/dist/chunk-HGV7J4T6.js

@@ -0,0 +1,86 @@
+import { Skeleton } from './chunk-CVD5IZGB.js';
+import { em } from './chunk-IQSRHXZR.js';
+import { jsx, jsxs } from 'kerfjs/jsx-runtime';
+
+function ToolbarText({
+  text,
+  size = "default",
+  tone = "default",
+  hideBelow,
+  showBelow,
+  className = "",
+  id,
+  headingLevel,
+  placeholder = false,
+  wrap = false,
+  ellipsis = true,
+  maxLines = null,
+  fill = false,
+  slot,
+  action,
+  description,
+  descriptionId
+}) {
+  const capped = wrap && maxLines != null && maxLines > 0;
+  if (action !== void 0)
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        class: `kui-toolbar-text ${className}`.trim(),
+        "data-component": "toolbar-text",
+        "data-size": size,
+        "data-hide-below": hideBelow,
+        "data-show-below": showBelow,
+        "data-tone": tone === "default" ? void 0 : tone,
+        "data-fill": fill ? "true" : void 0,
+        "data-ellipsis": ellipsis ? void 0 : "false",
+        "data-action": action,
+        id,
+        slot,
+        children: /* @__PURE__ */ jsx("span", { class: "kui-toolbar-text__text", children: text })
+      }
+    );
+  const described = description !== void 0 && !placeholder;
+  const title = placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(8) }) : /* @__PURE__ */ jsx(
+    "span",
+    {
+      class: "kui-toolbar-text__text",
+      id: described ? id : void 0,
+      role: described && headingLevel ? "heading" : void 0,
+      "aria-level": described && headingLevel ? String(headingLevel) : void 0,
+      children: text
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      class: `kui-toolbar-text ${className}`.trim(),
+      "data-component": "toolbar-text",
+      "data-size": size,
+      "data-hide-below": hideBelow,
+      "data-show-below": showBelow,
+      "data-tone": tone === "default" ? void 0 : tone,
+      "data-fill": fill ? "true" : void 0,
+      "data-wrap": wrap ? "true" : void 0,
+      "data-ellipsis": ellipsis ? void 0 : "false",
+      "data-max-lines": capped ? String(maxLines) : void 0,
+      style: capped ? `--kui-toolbar-text-max-lines:${maxLines}` : void 0,
+      "data-placeholder": placeholder ? "true" : void 0,
+      "data-has-description": described ? "true" : void 0,
+      id: described ? void 0 : id,
+      role: headingLevel && !described ? "heading" : void 0,
+      "aria-level": headingLevel && !described ? String(headingLevel) : void 0,
+      "aria-busy": placeholder ? "true" : void 0,
+      slot,
+      children: [
+        title,
+        described ? /* @__PURE__ */ jsx("span", { class: "kui-toolbar-text__description", id: descriptionId, children: description }) : null
+      ]
+    }
+  );
+}
+
+export { ToolbarText };
+
+//# sourceMappingURL=chunk-HGV7J4T6.js.map

package/dist/chunk-HGV7J4T6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/actions/toolbar-text/toolbar-text.tsx"],"names":[],"mappings":"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","file":"chunk-HGV7J4T6.js","sourcesContent":["import { type CssLength, em } from '../../../shared/styles/css-values.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nexport type ToolbarTextSize =\n  'xlarge' | 'xlarge-fixed' | 'large' | 'default' | 'small' | 'xsmall';\n\nexport type ToolbarTextTone = 'default' | 'dark';\n\n/** ARIA heading level for a title exposed as a heading landmark. */\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\ninterface ToolbarTextBaseProps {\n  text: string;\n  size?: ToolbarTextSize;\n  /** Use dark-toolbar foregrounds on a dark or photo-backed toolbar. */\n  tone?: ToolbarTextTone;\n  /** Hide below this Toolbar content width; requires wireToolbarVisibility. */\n  hideBelow?: CssLength;\n  /** Show only below this Toolbar content width; requires wireToolbarVisibility. */\n  showBelow?: CssLength;\n  className?: string;\n  /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */\n  id?: string;\n  /**\n   * Show a trailing ellipsis (…) where the text is truncated — on the single line\n   * (default), or at the `maxLines` boundary when wrapping. Set false to hard-clip\n   * instead. Default true.\n   */\n  ellipsis?: boolean;\n  /**\n   * Grow to fill the free space of the flex row it sits in (a Toolbar zone),\n   * truncating at the space left by its siblings instead of taking only its\n   * text's width. Default false.\n   */\n  fill?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n  /**\n   * Cap wrapped text to this many lines, truncating past it. Only takes effect with\n   * `wrap`; ignored on a single line. `null`/omitted wraps without a line cap. Default null.\n   */\n}\n\ntype ToolbarTextWrappingProps =\n  | {\n      /** Wrap onto multiple lines; combine with `maxLines` to cap them. */\n      wrap: true;\n      maxLines?: number | null;\n    }\n  | { wrap?: false; maxLines?: never };\n\nexport type ToolbarTextProps = ToolbarTextBaseProps &\n  (\n    | ({\n        action?: never;\n        /** Expose `role=\"heading\"` and `aria-level` on read-only text. */\n        headingLevel?: HeadingLevel;\n        /** Render an unanimated loading skeleton instead of the text. */\n        placeholder?: boolean;\n        /**\n         * Quiet, single-line supporting copy under the title (\"Changes save\n         * automatically.\"), truncating with an ellipsis. Title and description\n         * share the toolbar's control band and the same text start, with or\n         * without a leading icon group. With a description, `id` and\n         * `headingLevel` apply to the title alone, so a dialog's\n         * `aria-labelledby` names only the title.\n         */\n        description?: string;\n        /** Id for the description, for a dialog's `aria-describedby`. */\n        descriptionId?: string;\n      } & ToolbarTextWrappingProps)\n    | {\n        /** Render a native button with this delegated action; the app owns editing. */\n        action: string;\n        headingLevel?: never;\n        placeholder?: never;\n        wrap?: never;\n        maxLines?: never;\n        description?: never;\n        descriptionId?: never;\n      }\n  );\n\nexport function ToolbarText({\n  text,\n  size = 'default',\n  tone = 'default',\n  hideBelow,\n  showBelow,\n  className = '',\n  id,\n  headingLevel,\n  placeholder = false,\n  wrap = false,\n  ellipsis = true,\n  maxLines = null,\n  fill = false,\n  slot,\n  action,\n  description,\n  descriptionId,\n}: ToolbarTextProps) {\n  const capped = wrap && maxLines != null && maxLines > 0;\n  if (action !== undefined)\n    return (\n      <button\n        type=\"button\"\n        class={`kui-toolbar-text ${className}`.trim()}\n        data-component=\"toolbar-text\"\n        data-size={size}\n        data-hide-below={hideBelow}\n        data-show-below={showBelow}\n        data-tone={tone === 'default' ? undefined : tone}\n        data-fill={fill ? 'true' : undefined}\n        data-ellipsis={ellipsis ? undefined : 'false'}\n        data-action={action}\n        id={id}\n        slot={slot}\n      >\n        <span class=\"kui-toolbar-text__text\">{text}</span>\n      </button>\n    );\n  const described = description !== undefined && !placeholder;\n  const title = placeholder ? (\n    <Skeleton width={em(8)} />\n  ) : (\n    <span\n      class=\"kui-toolbar-text__text\"\n      id={described ? id : undefined}\n      role={described && headingLevel ? 'heading' : undefined}\n      aria-level={described && headingLevel ? String(headingLevel) : undefined}\n    >\n      {text}\n    </span>\n  );\n  return (\n    <span\n      class={`kui-toolbar-text ${className}`.trim()}\n      data-component=\"toolbar-text\"\n      data-size={size}\n      data-hide-below={hideBelow}\n      data-show-below={showBelow}\n      data-tone={tone === 'default' ? undefined : tone}\n      data-fill={fill ? 'true' : undefined}\n      data-wrap={wrap ? 'true' : undefined}\n      data-ellipsis={ellipsis ? undefined : 'false'}\n      data-max-lines={capped ? String(maxLines) : undefined}\n      style={capped ? `--kui-toolbar-text-max-lines:${maxLines}` : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      data-has-description={described ? 'true' : undefined}\n      id={described ? undefined : id}\n      role={headingLevel && !described ? 'heading' : undefined}\n      aria-level={headingLevel && !described ? String(headingLevel) : undefined}\n      aria-busy={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      {title}\n      {described ? (\n        <span class=\"kui-toolbar-text__description\" id={descriptionId}>\n          {description}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n"]}

package/dist/chunk-HLDRH23D.js

@@ -0,0 +1,84 @@
+import { LucideIcon } from './chunk-LOSRXZAH.js';
+import { LoadingSpinner } from './chunk-WVS6CUCT.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { ChevronDown } from 'lucide';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var splitButtonProtected = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-tone",
+  "data-fill",
+  "data-busy"
+]);
+function SplitButton({
+  label,
+  action,
+  icon,
+  accessibleLabel,
+  optionsLabel,
+  optionsAction,
+  optionsExpanded = false,
+  optionsPopup = "menu",
+  optionsControls,
+  tone = "brand",
+  fill = false,
+  busy = false,
+  disabled = false,
+  optionsDisabled = false,
+  title,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const leading = busy ? /* @__PURE__ */ jsx(LoadingSpinner, {}) : icon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...filterDataAttributes(rootAttributes, splitButtonProtected),
+      class: `kui-split-button ${className}`.trim(),
+      "data-component": "split-button",
+      "data-tone": tone,
+      "data-fill": fill ? "true" : void 0,
+      "data-busy": busy ? "true" : void 0,
+      role: "group",
+      slot,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: "kui-split-button__primary",
+            "data-action": action,
+            "aria-label": accessibleLabel,
+            "aria-busy": busy ? "true" : void 0,
+            title,
+            disabled,
+            children: [
+              leading && /* @__PURE__ */ jsx("span", { class: "kui-split-button__icon", "aria-hidden": "true", children: leading }),
+              /* @__PURE__ */ jsx("span", { class: "kui-split-button__label", children: label })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            class: "kui-split-button__options",
+            "data-action": optionsAction,
+            "aria-label": optionsLabel,
+            "aria-haspopup": optionsPopup,
+            "aria-expanded": optionsExpanded ? "true" : "false",
+            "aria-controls": optionsControls,
+            title: optionsLabel,
+            disabled: optionsDisabled,
+            children: /* @__PURE__ */ jsx(LucideIcon, { icon: ChevronDown, name: "chevron-down" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { SplitButton };
+
+//# sourceMappingURL=chunk-HLDRH23D.js.map