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

package/dist/chunk-IO27YTL3.js

@@ -0,0 +1,73 @@
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var COLOR_SWATCHES_PROTECTED = /* @__PURE__ */ new Set(["data-component", "data-size"]);
+var unsafeColor = /[;{}<>"'\\]|\p{Cc}/u;
+function swatchStyle(color) {
+  if (color === "transparent") return void 0;
+  const value = color.trim();
+  if (!value || unsafeColor.test(value))
+    throw new TypeError("A ColorSwatches color must be one CSS color value.");
+  return `--_kui-color-swatches-color:${value}`;
+}
+function ColorSwatches({
+  name,
+  swatches,
+  value,
+  label,
+  ariaLabel,
+  size = "default",
+  disabled = false,
+  action,
+  form,
+  id,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const legend = label === void 0 ? null : /* @__PURE__ */ jsx("legend", { class: "kui-color-swatches__label", children: label });
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      ...filterDataAttributes(rootAttributes, COLOR_SWATCHES_PROTECTED),
+      id,
+      class: `kui-color-swatches ${className}`.trim(),
+      "data-component": "color-swatches",
+      "data-size": size,
+      "aria-label": ariaLabel,
+      disabled,
+      slot,
+      children: [
+        legend,
+        /* @__PURE__ */ jsx("div", { class: "kui-color-swatches__list", children: swatches.map((swatch) => /* @__PURE__ */ jsxs("label", { class: "kui-color-swatches__swatch", title: swatch.label, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              class: "kui-color-swatches__input",
+              type: "radio",
+              name,
+              value: swatch.value,
+              checked: swatch.value === value,
+              form,
+              "data-action": action,
+              "aria-label": swatch.label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              class: "kui-color-swatches__dot",
+              "data-swatch": swatch.color === "transparent" ? "transparent" : "color",
+              style: swatchStyle(swatch.color),
+              "aria-hidden": "true"
+            }
+          )
+        ] })) })
+      ]
+    }
+  );
+}
+
+export { ColorSwatches };
+
+//# sourceMappingURL=chunk-IO27YTL3.js.map

package/dist/chunk-IO27YTL3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/color-swatches/color-swatches.tsx"],"names":[],"mappings":";;;AAyBA,IAAM,2CAA2B,IAAI,GAAA,CAAI,CAAC,gBAAA,EAAkB,WAAW,CAAC,CAAA;AAwBxE,IAAM,WAAA,GAAc,qBAAA;AAEpB,SAAS,YAAY,KAAA,EAAiD;AACpE,EAAA,IAAI,KAAA,KAAU,eAAe,OAAO,MAAA;AACpC,EAAA,MAAM,KAAA,GAAQ,MAAM,IAAA,EAAK;AACzB,EAAA,IAAI,CAAC,KAAA,IAAS,WAAA,CAAY,IAAA,CAAK,KAAK,CAAA;AAClC,IAAA,MAAM,IAAI,UAAU,oDAAoD,CAAA;AAC1E,EAAA,OAAO,+BAA+B,KAAK,CAAA,CAAA;AAC7C;AAUO,SAAS,aAAA,CAAc;AAAA,EAC5B,IAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,MAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,MAAA,GACJ,UAAU,MAAA,GAAY,IAAA,uBACnB,QAAA,EAAA,EAAO,KAAA,EAAM,6BAA6B,QAAA,EAAA,KAAA,EAAM,CAAA;AAErD,EAAA,uBACE,IAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,wBAAwB,CAAA;AAAA,MACjE,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,mBAAA,EAAsB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC9C,gBAAA,EAAe,gBAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,YAAA,EAAY,SAAA;AAAA,MACZ,QAAA;AAAA,MACA,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,MAAA;AAAA,wBACD,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,0BAAA,EACR,mBAAS,GAAA,CAAI,CAAC,MAAA,qBACb,IAAA,CAAC,OAAA,EAAA,EAAM,KAAA,EAAM,4BAAA,EAA6B,KAAA,EAAO,OAAO,KAAA,EACtD,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,2BAAA;AAAA,cACN,IAAA,EAAK,OAAA;AAAA,cACL,IAAA;AAAA,cACA,OAAO,MAAA,CAAO,KAAA;AAAA,cACd,OAAA,EAAS,OAAO,KAAA,KAAU,KAAA;AAAA,cAC1B,IAAA;AAAA,cACA,aAAA,EAAa,MAAA;AAAA,cACb,cAAY,MAAA,CAAO;AAAA;AAAA,WACrB;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,yBAAA;AAAA,cACN,aAAA,EACE,MAAA,CAAO,KAAA,KAAU,aAAA,GAAgB,aAAA,GAAgB,OAAA;AAAA,cAEnD,KAAA,EAAO,WAAA,CAAY,MAAA,CAAO,KAAK,CAAA;AAAA,cAC/B,aAAA,EAAY;AAAA;AAAA;AACd,SAAA,EACF,CACD,CAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ","file":"chunk-IO27YTL3.js","sourcesContent":["import { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\n\n/** `default` is a 24px swatch; `compact` is 20px. */\nexport type ColorSwatchesSize = 'default' | 'compact';\n\n/** One color in the palette. */\nexport interface ColorSwatch {\n  /** The submitted value, such as `#0a84ff` or `blue`. */\n  value: string;\n  /** The color's name: the swatch's accessible name and its hover hint. */\n  label: string;\n  /**\n   * The swatch's paint: a `CssColor` from `uiColor()`, `colorVar()`, or\n   * `fillColor()` (`@kerfjs/ui/css-values`), or `'transparent'` for the\n   * no-color swatch, drawn outlined and struck through.\n   */\n  color: CssColor | 'transparent';\n}\n\n/** Application `data-*` metadata; the group's own markers stay protected. */\nexport type ColorSwatchesRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nconst COLOR_SWATCHES_PROTECTED = new Set(['data-component', 'data-size']);\n\nexport type ColorSwatchesProps = {\n  /** The radio group name the chosen value submits under. */\n  name: string;\n  swatches: readonly ColorSwatch[];\n  /** The chosen swatch's value. */\n  value?: string;\n  size?: ColorSwatchesSize;\n  disabled?: boolean;\n  /** Delegated `data-action` on each radio; listen for `change`. */\n  action?: string;\n  /** Associate the radios with a form outside their ancestor chain. */\n  form?: string;\n  /** The group's id. */\n  id?: string;\n  className?: string;\n  rootAttributes?: ColorSwatchesRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n} & (\n  { label: string; ariaLabel?: never } | { label?: never; ariaLabel: string }\n);\n\nconst unsafeColor = /[;{}<>\"'\\\\]|\\p{Cc}/u;\n\nfunction swatchStyle(color: ColorSwatch['color']): string | undefined {\n  if (color === 'transparent') return undefined;\n  const value = color.trim();\n  if (!value || unsafeColor.test(value))\n    throw new TypeError('A ColorSwatches color must be one CSS color value.');\n  return `--_kui-color-swatches-color:${value}`;\n}\n\n/**\n * A fixed palette: a group of round color swatches with no visible text, one\n * of which is chosen. It is a native radio group, so arrow keys move the\n * choice, Tab reaches it once, and the chosen value submits under `name`.\n * Each swatch is named by its color's label (also its hover hint), and the\n * chosen one wears a ring that does not rely on its hue. A `'transparent'`\n * swatch offers \"no color\".\n */\nexport function ColorSwatches({\n  name,\n  swatches,\n  value,\n  label,\n  ariaLabel,\n  size = 'default',\n  disabled = false,\n  action,\n  form,\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ColorSwatchesProps) {\n  const legend =\n    label === undefined ? null : (\n      <legend class=\"kui-color-swatches__label\">{label}</legend>\n    );\n  return (\n    <fieldset\n      {...filterDataAttributes(rootAttributes, COLOR_SWATCHES_PROTECTED)}\n      id={id}\n      class={`kui-color-swatches ${className}`.trim()}\n      data-component=\"color-swatches\"\n      data-size={size}\n      aria-label={ariaLabel}\n      disabled={disabled}\n      slot={slot}\n    >\n      {legend}\n      <div class=\"kui-color-swatches__list\">\n        {swatches.map((swatch) => (\n          <label class=\"kui-color-swatches__swatch\" title={swatch.label}>\n            <input\n              class=\"kui-color-swatches__input\"\n              type=\"radio\"\n              name={name}\n              value={swatch.value}\n              checked={swatch.value === value}\n              form={form}\n              data-action={action}\n              aria-label={swatch.label}\n            />\n            <span\n              class=\"kui-color-swatches__dot\"\n              data-swatch={\n                swatch.color === 'transparent' ? 'transparent' : 'color'\n              }\n              style={swatchStyle(swatch.color)}\n              aria-hidden=\"true\"\n            />\n          </label>\n        ))}\n      </div>\n    </fieldset>\n  );\n}\n"]}

package/dist/chunk-ITUQC4FW.js

@@ -0,0 +1,163 @@
+import { jsxs, jsx, Fragment } 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",
+    presentation = "chips",
+    maxHeight,
+    disabled = false,
+    form,
+    id,
+    className = "",
+    slot,
+    label,
+    labelledBy
+  } = props;
+  const icons = presentation === "icons";
+  if (icons && choices.some((choice) => choice.icon === void 0))
+    throw new TypeError("An icons ChoiceChips choice needs an icon.");
+  const shape = {
+    "data-presentation": icons ? "icons" : void 0,
+    "data-scrollable": maxHeight === void 0 ? void 0 : "",
+    style: maxHeight === void 0 ? void 0 : `--_kui-choice-chips-max-height:${maxHeight}`
+  };
+  const titleOf = (choice) => choice.title ?? (icons ? choice.label : void 0);
+  if (choices.some((choice) => choice.swatch !== void 0 && choice.icon))
+    throw new TypeError("A ChoiceChips choice takes a swatch or an icon.");
+  const mode = props.multiple === true ? "multiple" : props.multiple === "toggle" ? "toggle" : "single";
+  const required = mode === "single" && props.required === true;
+  const checked = props.multiple === true || props.multiple === "toggle" ? props.value ?? [] : props.value === void 0 ? [] : [props.value];
+  const content = (choice) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    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 })
+  ] });
+  if (mode === "multiple") {
+    const enabled = disabled ? [] : choices.filter((choice) => choice.disabled !== true);
+    const tabStop = enabled.find((choice) => checked.includes(choice.value)) ?? enabled[0];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id,
+        class: `kui-choice-chips ${className}`.trim(),
+        "data-component": "choice-chips",
+        "data-selection-mode": "multiple",
+        "data-size": size,
+        ...shape,
+        "data-disabled": disabled ? "" : void 0,
+        "data-action": action,
+        "data-name": name,
+        "data-form": form,
+        role: "listbox",
+        "aria-multiselectable": "true",
+        "aria-orientation": "horizontal",
+        "aria-label": label,
+        "aria-labelledby": labelledBy,
+        "aria-disabled": disabled ? "true" : void 0,
+        slot,
+        children: [
+          choices.map((choice) => {
+            const unavailable = disabled || choice.disabled === true;
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                class: "kui-choice-chips__chip",
+                role: "option",
+                tabindex: choice === tabStop ? "0" : "-1",
+                "aria-selected": checked.includes(choice.value) ? "true" : "false",
+                "aria-disabled": unavailable ? "true" : void 0,
+                "data-choice-value": choice.value,
+                "data-disabled": unavailable ? "" : void 0,
+                title: titleOf(choice),
+                children: content(choice)
+              }
+            );
+          }),
+          choices.filter((choice) => checked.includes(choice.value)).map((choice) => /* @__PURE__ */ jsx(
+            "input",
+            {
+              class: "kui-choice-chips__value",
+              type: "hidden",
+              name,
+              value: choice.value,
+              form,
+              disabled
+            }
+          ))
+        ]
+      }
+    );
+  }
+  const multiple = mode === "toggle";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      class: `kui-choice-chips ${className}`.trim(),
+      "data-component": "choice-chips",
+      "data-selection-mode": mode,
+      "data-size": size,
+      ...shape,
+      "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: titleOf(choice),
+            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
+                }
+              ),
+              content(choice)
+            ]
+          }
+        );
+      })
+    }
+  );
+}
+
+export { ChoiceChips };
+
+//# sourceMappingURL=chunk-ITUQC4FW.js.map

package/dist/chunk-ITUQC4FW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/choice-chips/choice-chips.tsx"],"names":[],"mappings":"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","file":"chunk-ITUQC4FW.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\n\nexport type ChoiceChipsSize = 'default' | 'compact';\n\n/**\n * `chips` (default) are labeled pills; `icons` are square 36px icon-only\n * choices (an icon picker), each named by its hidden label, which is also\n * its hover title.\n */\nexport type ChoiceChipsPresentation = 'chips' | 'icons';\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   * Form field name: the selected value (or, with `multiple`, every selected\n   * value) submits under it.\n   */\n  name: string;\n  choices: readonly ChoiceChipsChoice<Value>[];\n  /**\n   * Delegated `data-action`; listen for `change`. It sits on every native\n   * input, or for `multiple: true` on the group, which `wireChoiceChips`\n   * fires `change` on.\n   */\n  action?: string;\n  size?: ChoiceChipsSize;\n  presentation?: ChoiceChipsPresentation;\n  /**\n   * Cap the group's height; past it the group scrolls (a long icon grid).\n   */\n  maxHeight?: CssLength;\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, a click or Space toggles it alone, and every checked value submits\n * under `name`.\n */\nexport interface ChoiceChipsToggleProps<Value extends string = string> {\n  multiple: 'toggle';\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 toggle group\n   * has no \"at least one\" requirement; validate the checked set in the app.\n   */\n  required?: never;\n}\n\n/**\n * Any number of values with the conventional desktop selection model, as an\n * ARIA multi-select listbox: a click selects one chip, Cmd (Apple) or Ctrl\n * (elsewhere) toggles one, and Shift extends a range. The group is one Tab\n * stop; arrows move the selection, Shift+arrows extend it, Cmd/Ctrl+arrows\n * move focus alone, Space toggles, and Cmd/Ctrl+A selects all. Hidden inputs\n * submit every selected value under `name`. Requires `wireChoiceChips`.\n */\nexport interface ChoiceChipsMultipleProps<Value extends string = string> {\n  multiple: true;\n  /** The selected values. Omit (or pass `[]`) for none. */\n  value?: readonly NoInfer<Value>[];\n  /** Validate the selected set in the app; a listbox has no native `required`. */\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    (\n      | ChoiceChipsSingleProps<Value>\n      | ChoiceChipsToggleProps<Value>\n      | ChoiceChipsMultipleProps<Value>\n    ) &\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/** Which selection model a ChoiceChips group renders. */\nexport type ChoiceChipsSelectionMode = 'single' | 'toggle' | 'multiple';\n\n/**\n * A wrapping set of pill chips. By default it is an exclusive radio group:\n * one Tab stop, arrow-key selection, and a real form value. With\n * `multiple: 'toggle'` it is a checkbox group: each pill toggles on its own.\n * With `multiple: true` it is a multi-select listbox with modifier-key\n * selection (wire it with `wireChoiceChips`). Each choice may lead with a\n * color swatch (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    presentation = 'chips',\n    maxHeight,\n    disabled = false,\n    form,\n    id,\n    className = '',\n    slot,\n    label,\n    labelledBy,\n  } = props;\n  const icons = presentation === 'icons';\n  if (icons && choices.some((choice) => choice.icon === undefined))\n    throw new TypeError('An icons ChoiceChips choice needs an icon.');\n  const shape = {\n    'data-presentation': icons ? 'icons' : undefined,\n    'data-scrollable': maxHeight === undefined ? undefined : '',\n    style:\n      maxHeight === undefined\n        ? undefined\n        : `--_kui-choice-chips-max-height:${maxHeight}`,\n  };\n  const titleOf = (choice: ChoiceChipsChoice<Value>) =>\n    choice.title ?? (icons ? choice.label : undefined);\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 mode: ChoiceChipsSelectionMode =\n    props.multiple === true\n      ? 'multiple'\n      : props.multiple === 'toggle'\n        ? 'toggle'\n        : 'single';\n  const required = mode === 'single' && props.required === true;\n  const checked: readonly Value[] =\n    props.multiple === true || props.multiple === 'toggle'\n      ? (props.value ?? [])\n      : props.value === undefined\n        ? []\n        : [props.value];\n  const content = (choice: ChoiceChipsChoice<Value>) => (\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    </>\n  );\n  if (mode === 'multiple') {\n    // One Tab stop: the first selected enabled chip, else the first enabled.\n    const enabled = disabled\n      ? []\n      : choices.filter((choice) => choice.disabled !== true);\n    const tabStop =\n      enabled.find((choice) => checked.includes(choice.value)) ?? enabled[0];\n    return (\n      <div\n        id={id}\n        class={`kui-choice-chips ${className}`.trim()}\n        data-component=\"choice-chips\"\n        data-selection-mode=\"multiple\"\n        data-size={size}\n        {...shape}\n        data-disabled={disabled ? '' : undefined}\n        data-action={action}\n        data-name={name}\n        data-form={form}\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        aria-orientation=\"horizontal\"\n        aria-label={label}\n        aria-labelledby={labelledBy}\n        aria-disabled={disabled ? 'true' : undefined}\n        slot={slot}\n      >\n        {choices.map((choice) => {\n          const unavailable = disabled || choice.disabled === true;\n          return (\n            <span\n              class=\"kui-choice-chips__chip\"\n              role=\"option\"\n              tabindex={choice === tabStop ? '0' : '-1'}\n              aria-selected={checked.includes(choice.value) ? 'true' : 'false'}\n              aria-disabled={unavailable ? 'true' : undefined}\n              data-choice-value={choice.value}\n              data-disabled={unavailable ? '' : undefined}\n              title={titleOf(choice)}\n            >\n              {content(choice)}\n            </span>\n          );\n        })}\n        {choices\n          .filter((choice) => checked.includes(choice.value))\n          .map((choice) => (\n            <input\n              class=\"kui-choice-chips__value\"\n              type=\"hidden\"\n              name={name}\n              value={choice.value}\n              form={form}\n              disabled={disabled}\n            />\n          ))}\n      </div>\n    );\n  }\n  const multiple = mode === 'toggle';\n  return (\n    <div\n      id={id}\n      class={`kui-choice-chips ${className}`.trim()}\n      data-component=\"choice-chips\"\n      data-selection-mode={mode}\n      data-size={size}\n      {...shape}\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={titleOf(choice)}\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            {content(choice)}\n          </label>\n        );\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-W4IK7AWD.js → chunk-KDQZ3E5C.js}

@@ -48,6 +48,7 @@ function FileDropZone(props) {
     accessibleLabel,
     pickerId,
     disabled,
+    dropScope,
     className = ""
   } = props;
   return /* @__PURE__ */ jsxs(
@@ -55,6 +56,7 @@ function FileDropZone(props) {
     {
       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,
@@ -70,4 +72,4 @@ function FileDropZone(props) {
 
 export { FileDropZone, FilePickerTrigger };
 
-//# sourceMappingURL=chunk-W4IK7AWD.js.map
+//# 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"]}

package/dist/{chunk-2MSPNRWJ.js → chunk-KK3S5OTW.js}

@@ -32,28 +32,44 @@ function wireFilePickers(root, { onFiles }) {
     input.value = "";
   };
   const zoneOf = (event) => {
-    const zone = event.target instanceof Element ? event.target.closest(DROP_ZONE) : null;
-    return zone && zone.dataset.disabled !== "true" ? zone : null;
+    const target = event.target instanceof Element ? event.target : null;
+    if (!target) return null;
+    const direct = target.closest(DROP_ZONE);
+    if (direct)
+      return direct.dataset.disabled === "true" ? null : { zone: direct, area: areaOf(direct) };
+    for (const zone of root.querySelectorAll(
+      `${DROP_ZONE}[data-drop-scope]`
+    )) {
+      const area = areaOf(zone);
+      if (area !== zone && area.contains(target))
+        return zone.dataset.disabled === "true" ? null : { zone, area };
+    }
+    return null;
+  };
+  const areaOf = (zone) => {
+    const scope = zone.dataset.dropScope;
+    return scope && zone.parentElement?.closest(scope) || zone;
   };
   const carriesFiles = (event) => [...event.dataTransfer?.types ?? []].includes("Files");
   const onDragOver = (event) => {
     const drag = event;
-    const zone = zoneOf(drag);
-    if (!zone || !carriesFiles(drag)) return;
+    const over = zoneOf(drag);
+    if (!over || !carriesFiles(drag)) return;
     drag.preventDefault();
     drag.dataTransfer.dropEffect = "copy";
-    zone.dataset.dragging = "true";
+    over.zone.dataset.dragging = "true";
   };
   const onDragLeave = (event) => {
-    const zone = zoneOf(event);
+    const over = zoneOf(event);
     const related = event.relatedTarget;
-    if (zone && !(related instanceof Node && zone.contains(related)))
-      delete zone.dataset.dragging;
+    if (over && !(related instanceof Node && over.area.contains(related)))
+      delete over.zone.dataset.dragging;
   };
   const onDrop = (event) => {
     const drag = event;
-    const zone = zoneOf(drag);
-    if (!zone) return;
+    const over = zoneOf(drag);
+    if (!over) return;
+    const { zone } = over;
     drag.preventDefault();
     delete zone.dataset.dragging;
     const input = inputOf(zone);
@@ -79,4 +95,4 @@ function wireFilePickers(root, { onFiles }) {
 
 export { fileMatchesAccept, wireFilePickers };
 
-//# sourceMappingURL=chunk-2MSPNRWJ.js.map
+//# sourceMappingURL=chunk-KK3S5OTW.js.map

package/dist/chunk-KK3S5OTW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/file-picker/wiring/wire-file-pickers.ts"],"names":[],"mappings":";AAEA,IAAM,MAAA,GACJ,2EAAA;AACF,IAAM,SAAA,GAAY,mCAAA;AAiBX,SAAS,iBAAA,CAAkB,MAAY,MAAA,EAAyB;AACrE,EAAA,MAAM,MAAA,GAAS,MAAA,CACZ,KAAA,CAAM,GAAG,EACT,GAAA,CAAI,CAAC,KAAA,KAAU,KAAA,CAAM,MAAK,CAAE,WAAA,EAAa,CAAA,CACzC,OAAO,OAAO,CAAA;AACjB,EAAA,IAAI,MAAA,CAAO,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAChC,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,IAAA,CAAK,WAAA,EAAY;AACnC,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,IAAA,CAAK,WAAA,EAAY;AACnC,EAAA,OAAO,MAAA,CAAO,IAAA,CAAK,CAAC,KAAA,KAAU;AAC5B,IAAA,IAAI,MAAM,UAAA,CAAW,GAAG,GAAG,OAAO,IAAA,CAAK,SAAS,KAAK,CAAA;AACrD,IAAA,IAAI,KAAA,CAAM,QAAA,CAAS,IAAI,CAAA,EAAG,OAAO,IAAA,CAAK,UAAA,CAAW,KAAA,CAAM,KAAA,CAAM,CAAA,EAAG,EAAE,CAAC,CAAA;AACnE,IAAA,OAAO,IAAA,KAAS,KAAA;AAAA,EAClB,CAAC,CAAA;AACH;AAEA,SAAS,SAAS,KAAA,EAA6C;AAC7D,EAAA,OAAO,KAAA,CAAM,QAAqB,MAAM,CAAA;AAC1C;AAEA,SAAS,QAAQ,MAAA,EAA8C;AAC7D,EAAA,OAAO,MAAA,CAAO,cAAgC,oBAAoB,CAAA;AACpE;AAWO,SAAS,eAAA,CACd,IAAA,EACA,EAAE,OAAA,EAAQ,EACE;AACZ,EAAA,MAAM,MAAA,GAAS,CACb,MAAA,EACA,KAAA,EACA,GAAA,KACG;AACH,IAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AACxB,IAAA,OAAA,CAAQ,EAAE,QAAQ,EAAA,EAAI,MAAA,CAAO,QAAQ,YAAA,EAAc,KAAA,EAAO,KAAK,CAAA;AAAA,EACjE,CAAA;AACA,EAAA,MAAM,QAAA,GAAW,CAAC,KAAA,KAAiB;AACjC,IAAA,MAAM,QAAQ,KAAA,CAAM,MAAA;AACpB,IAAA,IAAI,EAAE,KAAA,YAAiB,gBAAA,CAAA,IAAqB,KAAA,CAAM,SAAS,MAAA,EAAQ;AACnE,IAAA,MAAM,MAAA,GAAS,SAAS,KAAK,CAAA;AAC7B,IAAA,IAAI,CAAC,MAAA,EAAQ;AAEb,IAAA,MAAA,CAAO,QAAQ,CAAC,GAAG,KAAA,CAAM,KAAM,GAAG,QAAQ,CAAA;AAC1C,IAAA,KAAA,CAAM,KAAA,GAAQ,EAAA;AAAA,EAChB,CAAA;AAGA,EAAA,MAAM,MAAA,GAAS,CACb,KAAA,KACoD;AACpD,IAAA,MAAM,MAAA,GAAS,KAAA,CAAM,MAAA,YAAkB,OAAA,GAAU,MAAM,MAAA,GAAS,IAAA;AAChE,IAAA,IAAI,CAAC,QAAQ,OAAO,IAAA;AACpB,IAAA,MAAM,MAAA,GAAS,MAAA,CAAO,OAAA,CAAqB,SAAS,CAAA;AACpD,IAAA,IAAI,MAAA;AACF,MAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,QAAA,KAAa,MAAA,GAC/B,IAAA,GACA,EAAE,IAAA,EAAM,MAAA,EAAQ,IAAA,EAAM,MAAA,CAAO,MAAM,CAAA,EAAE;AAC3C,IAAA,KAAA,MAAW,QAAQ,IAAA,CAAK,gBAAA;AAAA,MACtB,GAAG,SAAS,CAAA,iBAAA;AAAA,KACd,EAAG;AACD,MAAA,MAAM,IAAA,GAAO,OAAO,IAAI,CAAA;AACxB,MAAA,IAAI,IAAA,KAAS,IAAA,IAAQ,IAAA,CAAK,QAAA,CAAS,MAAM,CAAA;AACvC,QAAA,OAAO,KAAK,OAAA,CAAQ,QAAA,KAAa,SAAS,IAAA,GAAO,EAAE,MAAM,IAAA,EAAK;AAAA,IAClE;AACA,IAAA,OAAO,IAAA;AAAA,EACT,CAAA;AACA,EAAA,MAAM,MAAA,GAAS,CAAC,IAAA,KAAmC;AACjD,IAAA,MAAM,KAAA,GAAQ,KAAK,OAAA,CAAQ,SAAA;AAC3B,IAAA,OAAQ,KAAA,IAAS,IAAA,CAAK,aAAA,EAAe,OAAA,CAAqB,KAAK,CAAA,IAAM,IAAA;AAAA,EACvE,CAAA;AACA,EAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KACpB,CAAC,GAAI,KAAA,CAAM,YAAA,EAAc,KAAA,IAAS,EAAG,CAAA,CAAE,QAAA,CAAS,OAAO,CAAA;AACzD,EAAA,MAAM,UAAA,GAAa,CAAC,KAAA,KAAiB;AACnC,IAAA,MAAM,IAAA,GAAO,KAAA;AACb,IAAA,MAAM,IAAA,GAAO,OAAO,IAAI,CAAA;AACxB,IAAA,IAAI,CAAC,IAAA,IAAQ,CAAC,YAAA,CAAa,IAAI,CAAA,EAAG;AAClC,IAAA,IAAA,CAAK,cAAA,EAAe;AAEpB,IAAA,IAAA,CAAK,aAAc,UAAA,GAAa,MAAA;AAChC,IAAA,IAAA,CAAK,IAAA,CAAK,QAAQ,QAAA,GAAW,MAAA;AAAA,EAC/B,CAAA;AACA,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAiB;AACpC,IAAA,MAAM,IAAA,GAAO,OAAO,KAAK,CAAA;AACzB,IAAA,MAAM,UAAW,KAAA,CAAoB,aAAA;AACrC,IAAA,IAAI,QAAQ,EAAE,OAAA,YAAmB,QAAQ,IAAA,CAAK,IAAA,CAAK,SAAS,OAAO,CAAA,CAAA;AACjE,MAAA,OAAO,IAAA,CAAK,KAAK,OAAA,CAAQ,QAAA;AAAA,EAC7B,CAAA;AACA,EAAA,MAAM,MAAA,GAAS,CAAC,KAAA,KAAiB;AAC/B,IAAA,MAAM,IAAA,GAAO,KAAA;AACb,IAAA,MAAM,IAAA,GAAO,OAAO,IAAI,CAAA;AACxB,IAAA,IAAI,CAAC,IAAA,EAAM;AACX,IAAA,MAAM,EAAE,MAAK,GAAI,IAAA;AACjB,IAAA,IAAA,CAAK,cAAA,EAAe;AACpB,IAAA,OAAO,KAAK,OAAA,CAAQ,QAAA;AACpB,IAAA,MAAM,KAAA,GAAQ,QAAQ,IAAI,CAAA;AAC1B,IAAA,IAAI,QAAQ,CAAC,GAAI,KAAK,YAAA,EAAc,KAAA,IAAS,EAAG,CAAA;AAChD,IAAA,IAAI,KAAA,EAAO,MAAA;AACT,MAAA,KAAA,GAAQ,KAAA,CAAM,OAAO,CAAC,IAAA,KAAS,kBAAkB,IAAA,EAAM,KAAA,CAAM,MAAM,CAAC,CAAA;AACtE,IAAA,IAAI,KAAA,IAAS,CAAC,KAAA,CAAM,QAAA,UAAkB,KAAA,CAAM,KAAA,CAAM,GAAG,CAAC,CAAA;AACtD,IAAA,MAAA,CAAO,IAAA,EAAM,OAAO,MAAM,CAAA;AAAA,EAC5B,CAAA;AACA,EAAA,IAAA,CAAK,gBAAA,CAAiB,UAAU,QAAQ,CAAA;AACxC,EAAA,IAAA,CAAK,gBAAA,CAAiB,aAAa,UAAU,CAAA;AAC7C,EAAA,IAAA,CAAK,gBAAA,CAAiB,YAAY,UAAU,CAAA;AAC5C,EAAA,IAAA,CAAK,gBAAA,CAAiB,aAAa,WAAW,CAAA;AAC9C,EAAA,IAAA,CAAK,gBAAA,CAAiB,QAAQ,MAAM,CAAA;AACpC,EAAA,OAAO,MAAM;AACX,IAAA,IAAA,CAAK,mBAAA,CAAoB,UAAU,QAAQ,CAAA;AAC3C,IAAA,IAAA,CAAK,mBAAA,CAAoB,aAAa,UAAU,CAAA;AAChD,IAAA,IAAA,CAAK,mBAAA,CAAoB,YAAY,UAAU,CAAA;AAC/C,IAAA,IAAA,CAAK,mBAAA,CAAoB,aAAa,WAAW,CAAA;AACjD,IAAA,IAAA,CAAK,mBAAA,CAAoB,QAAQ,MAAM,CAAA;AAAA,EACzC,CAAA;AACF","file":"chunk-KK3S5OTW.js","sourcesContent":["type Root = HTMLElement | Document;\n\nconst PICKER =\n  '[data-component=\"file-picker-trigger\"], [data-component=\"file-drop-zone\"]';\nconst DROP_ZONE = '[data-component=\"file-drop-zone\"]';\n\n/** Files a picker reported, and how they arrived. */\nexport interface FilePickerSelection {\n  /** The trigger or drop zone element. */\n  picker: HTMLElement;\n  /** Its `pickerId`, when set. */\n  id?: string;\n  files: File[];\n  via: 'browse' | 'drop';\n}\n\nexport interface WireFilePickersOptions {\n  onFiles: (selection: FilePickerSelection) => void;\n}\n\n/** Whether a file matches a native `accept` list (`.png, image/*, text/plain`). */\nexport function fileMatchesAccept(file: File, accept: string): boolean {\n  const tokens = accept\n    .split(',')\n    .map((token) => token.trim().toLowerCase())\n    .filter(Boolean);\n  if (tokens.length === 0) return true;\n  const name = file.name.toLowerCase();\n  const type = file.type.toLowerCase();\n  return tokens.some((token) => {\n    if (token.startsWith('.')) return name.endsWith(token);\n    if (token.endsWith('/*')) return type.startsWith(token.slice(0, -1));\n    return type === token;\n  });\n}\n\nfunction pickerOf(input: HTMLInputElement): HTMLElement | null {\n  return input.closest<HTMLElement>(PICKER);\n}\n\nfunction inputOf(picker: HTMLElement): HTMLInputElement | null {\n  return picker.querySelector<HTMLInputElement>('input[type=\"file\"]');\n}\n\n/**\n * Report files chosen through any `FilePickerTrigger` or `FileDropZone` below\n * root, or dropped on a `FileDropZone` (or anywhere in the enclosing element\n * its `dropScope` names), and mark a zone `data-dragging` while files are\n * dragged over it or its scope. Dropped files are filtered by the input's\n * `accept` (and to one when it is not `multiple`); a disabled picker ignores\n * drops. The input is reset after each report, so choosing the same file again\n * reports again. Dispose with the owning application.\n */\nexport function wireFilePickers(\n  root: Root,\n  { onFiles }: WireFilePickersOptions,\n): () => void {\n  const report = (\n    picker: HTMLElement,\n    files: File[],\n    via: FilePickerSelection['via'],\n  ) => {\n    if (files.length === 0) return;\n    onFiles({ picker, id: picker.dataset.filePickerId, files, via });\n  };\n  const onChange = (event: Event) => {\n    const input = event.target;\n    if (!(input instanceof HTMLInputElement) || input.type !== 'file') return;\n    const picker = pickerOf(input);\n    if (!picker) return;\n    // A file input always has a FileList.\n    report(picker, [...input.files!], 'browse');\n    input.value = '';\n  };\n  // The zone a drag event targets, and the area that counts as over it: the\n  // zone itself, or the enclosing element its `dropScope` names.\n  const zoneOf = (\n    event: Event,\n  ): { zone: HTMLElement; area: HTMLElement } | null => {\n    const target = event.target instanceof Element ? event.target : null;\n    if (!target) return null;\n    const direct = target.closest<HTMLElement>(DROP_ZONE);\n    if (direct)\n      return direct.dataset.disabled === 'true'\n        ? null\n        : { zone: direct, area: areaOf(direct) };\n    for (const zone of root.querySelectorAll<HTMLElement>(\n      `${DROP_ZONE}[data-drop-scope]`,\n    )) {\n      const area = areaOf(zone);\n      if (area !== zone && area.contains(target))\n        return zone.dataset.disabled === 'true' ? null : { zone, area };\n    }\n    return null;\n  };\n  const areaOf = (zone: HTMLElement): HTMLElement => {\n    const scope = zone.dataset.dropScope;\n    return (scope && zone.parentElement?.closest<HTMLElement>(scope)) || zone;\n  };\n  const carriesFiles = (event: DragEvent) =>\n    [...(event.dataTransfer?.types ?? [])].includes('Files');\n  const onDragOver = (event: Event) => {\n    const drag = event as DragEvent;\n    const over = zoneOf(drag);\n    if (!over || !carriesFiles(drag)) return;\n    drag.preventDefault();\n    // carriesFiles guarantees a DataTransfer.\n    drag.dataTransfer!.dropEffect = 'copy';\n    over.zone.dataset.dragging = 'true';\n  };\n  const onDragLeave = (event: Event) => {\n    const over = zoneOf(event);\n    const related = (event as DragEvent).relatedTarget;\n    if (over && !(related instanceof Node && over.area.contains(related)))\n      delete over.zone.dataset.dragging;\n  };\n  const onDrop = (event: Event) => {\n    const drag = event as DragEvent;\n    const over = zoneOf(drag);\n    if (!over) return;\n    const { zone } = over;\n    drag.preventDefault();\n    delete zone.dataset.dragging;\n    const input = inputOf(zone);\n    let files = [...(drag.dataTransfer?.files ?? [])];\n    if (input?.accept)\n      files = files.filter((file) => fileMatchesAccept(file, input.accept));\n    if (input && !input.multiple) files = files.slice(0, 1);\n    report(zone, files, 'drop');\n  };\n  root.addEventListener('change', onChange);\n  root.addEventListener('dragenter', onDragOver);\n  root.addEventListener('dragover', onDragOver);\n  root.addEventListener('dragleave', onDragLeave);\n  root.addEventListener('drop', onDrop);\n  return () => {\n    root.removeEventListener('change', onChange);\n    root.removeEventListener('dragenter', onDragOver);\n    root.removeEventListener('dragover', onDragOver);\n    root.removeEventListener('dragleave', onDragLeave);\n    root.removeEventListener('drop', onDrop);\n  };\n}\n"]}