@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/multi-select.js

@@ -1,227 +1,196 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useId, useMemo, useState } from "react";
-import { Check } from "lucide-react";
-import { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from "./ui.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useMemo } from "react";
+import { FieldChevron, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from "./field-base.js";
+import { FieldLabel } from "./field-parts.js";
 import { cn } from "../lib/cn.js";
-import { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from "./dropdown.js";
-import { useActiveOptionScroll, useComboboxFieldError } from "./combobox-core.js";
-import { EndHintRow, FieldCaption, LABEL_IN_ROW, StaticLabelRow, useFieldHint } from "./field-parts.js";
+import { ComboboxPanel, useComboboxCore } from "./combobox-core.js";
+import {
+  assignRef,
+  EndHintRow,
+  LABEL_IN_ROW,
+  LockedReason,
+  StaticLabelRow,
+  useFieldMessages,
+  useLockReason
+} from "./field-parts.js";
 import {
   DEFAULT_COMMON_LABELS,
   DEFAULT_MULTI_SELECT_LABELS,
   useKitLabels
 } from "../i18n/kit-labels.js";
-function MultiSelect({
-  options,
-  values,
-  onChange,
-  allLabel,
-  itemLabel,
-  placeholder,
-  label,
-  searchLabel,
-  selectAllLabel,
-  clearLabel,
-  className,
-  panelClassName,
-  invalid,
-  error,
-  hint,
-  disabled,
-  "aria-label": ariaLabel,
-  "aria-describedby": ariaDescribedBy,
-  ...rest
-}) {
-  const { open, setOpen, wrapperRef, triggerRef, closeToTrigger, query, setQuery, inputRef } = useDropdownSearch();
-  const labels = useKitLabels("multiSelect", DEFAULT_MULTI_SELECT_LABELS, {
-    search: searchLabel,
-    selectAll: selectAllLabel,
-    clear: clearLabel,
-    selectedCount: itemLabel
+function MultiSelect(props) {
+  const {
+    options,
+    value: valueProp,
+    onChange,
+    itemLabel,
+    placeholder,
+    label,
+    labels: labelsProp,
+    className,
+    panelClassName,
+    invalid,
+    error,
+    hint,
+    disabled,
+    disabledReason,
+    disabledReasonDisplay,
+    commit,
+    ref,
+    id,
+    "aria-label": ariaLabel,
+    // Off `rest` and onto the trigger, which is the combobox a reader meets: `Field`'s
+    // render-prop spreads `{ id, aria-describedby, aria-invalid, aria-required }`, and on
+    // the wrapper div the label named nothing and the required state described nothing
+    // (DUP-8, refactor audit 2026-10 — Combobox's rule).
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    ...rest
+  } = props;
+  const value = useMemo(() => valueProp ?? [], [valueProp]);
+  const comboOptions = useMemo(
+    () => options.map((o) => ({ value: o.value, label: o.label, sublabel: o.hint, disabled: o.disabled })),
+    [options]
+  );
+  const core = useComboboxCore({ options: comboOptions, backCloses: true });
+  const { open, setOpen, triggerRef } = core;
+  const setTrigger = useCallback(
+    (el) => {
+      triggerRef.current = el;
+      assignRef(ref, el);
+    },
+    [ref, triggerRef]
+  );
+  const text = useKitLabels("multiSelect", DEFAULT_MULTI_SELECT_LABELS, {
+    search: labelsProp?.search,
+    selectAll: labelsProp?.selectAll,
+    clear: labelsProp?.clear,
+    selectedCount: labelsProp?.selectedCount ?? itemLabel
   });
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
-  const hintParts = useFieldHint(hint, ariaDescribedBy);
-  const field = useComboboxFieldError(error, invalid, hintParts.describedBy);
-  const uid = useId();
-  const listboxId = `${uid}-listbox`;
-  const optionId = (index) => `${uid}-option-${index}`;
-  const [active, setActive] = useState(0);
-  const filtered = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    if (!q) return options;
-    return options.filter(
-      (o) => o.label.toLowerCase().includes(q) || (o.hint ?? "").toLowerCase().includes(q)
-    );
-  }, [options, query]);
-  const valueSet = useMemo(() => new Set(values), [values]);
+  const lock = useLockReason(commit, disabledReason);
+  const inert = lock.locked || Boolean(disabled);
+  if (inert && open) setOpen(false);
+  const field = useFieldMessages({
+    hint,
+    error,
+    invalid,
+    describedBy: ariaDescribedBy,
+    ariaInvalid,
+    reasonId: lock.locked && lock.reasonId
+  });
+  const listboxId = `${useId()}-listbox`;
+  const valueSet = useMemo(() => new Set(value), [value]);
   const allChecked = options.length > 0 && options.every((o) => valueSet.has(o.value));
-  const anyChecked = values.length > 0;
-  const selectedSummary = (() => {
-    if (!anyChecked || allChecked) return allLabel ?? placeholder ?? labels.all;
-    return labels.selectedCount(values.length);
-  })();
-  const toggle = (val) => {
-    if (valueSet.has(val)) onChange(values.filter((v) => v !== val));
-    else onChange([...values, val]);
+  const selectedSummary = value.length === 0 || allChecked ? labelsProp?.all ?? placeholder ?? text.all : text.selectedCount(value.length);
+  const toggle = (o) => {
+    if (lock.locked) return;
+    if (valueSet.has(o.value)) onChange(value.filter((v) => v !== o.value));
+    else onChange([...value, o.value]);
   };
-  const selectAll = () => onChange(options.map((o) => o.value));
-  const clearAll = () => onChange([]);
-  const activeId = active >= 0 && active < filtered.length ? optionId(active) : void 0;
-  useActiveOptionScroll(activeId);
-  const onListKeyDown = (e) => {
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setActive((i) => Math.min(i + 1, filtered.length - 1));
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setActive((i) => Math.max(i - 1, 0));
-    } else if (e.key === "Home") {
-      e.preventDefault();
-      setActive(0);
-    } else if (e.key === "End") {
-      e.preventDefault();
-      setActive(filtered.length - 1);
-    } else if (e.key === "Enter") {
-      e.preventDefault();
-      if (filtered[active]) toggle(filtered[active].value);
-    } else if (e.key === "Tab") {
-      e.preventDefault();
-      closeToTrigger();
+  const selectAll = () => onChange(options.filter((o) => !o.disabled || valueSet.has(o.value)).map((o) => o.value));
+  const clearAll = () => onChange(options.filter((o) => o.disabled && valueSet.has(o.value)).map((o) => o.value));
+  const canSelectAll = options.some((o) => !o.disabled && !valueSet.has(o.value));
+  const canClear = options.some((o) => !o.disabled && valueSet.has(o.value));
+  const trigger = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: setTrigger,
+      id,
+      type: "button",
+      disabled: lock.locked ? void 0 : disabled,
+      "aria-disabled": lock.locked || void 0,
+      role: "combobox",
+      "aria-expanded": open,
+      "aria-controls": listboxId,
+      "aria-haspopup": "listbox",
+      "aria-label": ariaLabel ?? (typeof label === "string" ? common.fieldValue(label, selectedSummary) : void 0),
+      onClick: () => {
+        if (!inert) setOpen((v) => !v);
+      },
+      onKeyDown: (e) => {
+        if (inert) return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          e.preventDefault();
+          setOpen(true);
+        }
+      },
+      "aria-invalid": field.isInvalid || void 0,
+      "aria-required": ariaRequired,
+      "aria-describedby": field.describedBy,
+      className: cn(
+        FIELD_TRIGGER,
+        "pe-9",
+        label !== void 0 && FIELD_FLOATING_PAD,
+        // FIELD_TRIGGER's hover would still light a trigger nothing can open.
+        "disabled:hover:bg-surface-2",
+        // Dimmed like EntityCombobox's and MultiEntityCombobox's disabled triggers;
+        // only the label was, so a disabled MultiSelect read as live (showcase audit).
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        lock.locked && "cursor-not-allowed opacity-50",
+        field.isInvalid && FIELD_INVALID
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate-until-large", children: selectedSummary }),
+        !inert && /* @__PURE__ */ jsx(FieldChevron, {})
+      ]
     }
-  };
+  );
   return (
     // `rest` dresses the wrapper; the name belongs to the trigger below it, which is
     // the thing with a role. Spread FIRST so the ARIA the trigger composes, and the
     // handlers that open the list, cannot be replaced by accident from outside.
-    /* @__PURE__ */ jsxs("div", { ...rest, ref: wrapperRef, className: cn("relative", className), children: [
-      label !== void 0 && hintParts.labelHint === void 0 && /* @__PURE__ */ jsx(FieldLabel, { className: disabled ? "opacity-50" : void 0, children: label }),
-      /* @__PURE__ */ jsx(EndHintRow, { hint: label === void 0 ? hintParts.labelHint : void 0, children: /* @__PURE__ */ jsxs(
-        "button",
+    /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative", className), children: [
+      label !== void 0 && field.labelHint === void 0 && /* @__PURE__ */ jsx(FieldLabel, { className: inert ? "opacity-50" : void 0, children: label }),
+      /* @__PURE__ */ jsx(EndHintRow, { hint: label === void 0 ? field.labelHint : void 0, children: lock.locked ? (
+        // Button's frame: the line under the trigger, or the Tooltip with a hidden copy
+        // for `aria-describedby`.
+        /* @__PURE__ */ jsx(LockedReason, { lock, display: disabledReasonDisplay, className: "block", children: trigger })
+      ) : trigger }),
+      label !== void 0 && field.labelHint !== void 0 && /* @__PURE__ */ jsx(StaticLabelRow, { hint: field.labelHint, children: /* @__PURE__ */ jsx(FieldLabel, { className: cn(LABEL_IN_ROW, inert && "opacity-50"), children: label }) }),
+      field.below,
+      /* @__PURE__ */ jsx(
+        ComboboxPanel,
         {
-          ref: triggerRef,
-          type: "button",
-          disabled,
-          role: "combobox",
-          "aria-expanded": open,
-          "aria-controls": listboxId,
-          "aria-haspopup": "listbox",
-          "aria-label": ariaLabel ?? (typeof label === "string" ? common.fieldValue(label, selectedSummary) : void 0),
-          onClick: () => {
-            setOpen((v) => !v);
-            setActive(0);
+          core,
+          listboxId,
+          multi: true,
+          sheetTitle: label ?? placeholder,
+          searchPlaceholder: text.search,
+          isSelected: (v) => valueSet.has(v),
+          onChoose: toggle,
+          showCreate: false,
+          onCreate: () => {
           },
-          onKeyDown: (e) => {
-            if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-              e.preventDefault();
-              setOpen(true);
-              setActive(0);
-            }
-          },
-          "aria-invalid": field.isInvalid || void 0,
-          "aria-describedby": field.describedBy,
-          className: cn(
-            FIELD_TRIGGER,
-            "pe-9",
-            label !== void 0 && FIELD_FLOATING_PAD,
-            // FIELD_TRIGGER's hover would still light a trigger nothing can open.
-            "disabled:hover:bg-[var(--bg-surface-2)]",
-            // Dimmed like EntityCombobox's and MultiEntityCombobox's disabled triggers;
-            // only the label was, so a disabled MultiSelect read as live (showcase audit).
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            field.isInvalid && FIELD_INVALID
-          ),
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedSummary }),
-            !disabled && /* @__PURE__ */ jsx(FieldChevron, {})
-          ]
-        }
-      ) }),
-      label !== void 0 && hintParts.labelHint !== void 0 && /* @__PURE__ */ jsx(StaticLabelRow, { hint: hintParts.labelHint, children: /* @__PURE__ */ jsx(FieldLabel, { className: cn(LABEL_IN_ROW, disabled && "opacity-50"), children: label }) }),
-      open && !disabled && /* @__PURE__ */ jsx(
-        DropdownPanel,
-        {
-          className: cn("w-64", panelClassName),
-          empty: filtered.length === 0,
-          listProps: { id: listboxId, role: "listbox", "aria-multiselectable": true },
-          header: /* @__PURE__ */ jsxs(Fragment, { children: [
+          createContent: null,
+          width: { minRem: 16, fit: true, maxRem: 32 },
+          className: panelClassName,
+          toolbar: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-2 py-1.5 text-xs", children: [
             /* @__PURE__ */ jsx(
-              DropdownSearchHeader,
+              "button",
               {
-                query,
-                onQueryChange: (v) => {
-                  setQuery(v);
-                  setActive(0);
-                },
-                inputRef,
-                placeholder: labels.search,
-                listboxId,
-                activeId,
-                onKeyDown: onListKeyDown
+                type: "button",
+                onClick: selectAll,
+                disabled: !canSelectAll,
+                className: "rounded px-2 py-0.5 text-secondary hover:bg-hover disabled:opacity-40",
+                children: text.selectAll
               }
             ),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-2 py-1.5 text-xs", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: selectAll,
-                  disabled: allChecked,
-                  className: "rounded px-2 py-0.5 text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] disabled:opacity-40",
-                  children: labels.selectAll
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: clearAll,
-                  disabled: !anyChecked,
-                  className: "rounded px-2 py-0.5 text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] disabled:opacity-40",
-                  children: labels.clear
-                }
-              )
-            ] })
-          ] }),
-          children: filtered.map((o, i) => {
-            const checked = valueSet.has(o.value);
-            return /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                id: optionId(i),
-                role: "option",
-                "aria-selected": checked,
-                tabIndex: -1,
-                onClick: () => toggle(o.value),
-                onMouseEnter: () => setActive(i),
-                className: cn(
-                  "flex w-full items-center justify-between gap-2 px-3 py-1.5 text-sm text-start hover:bg-[var(--bg-hover)]",
-                  checked && "bg-[var(--bg-active)]",
-                  i === active && "bg-[var(--bg-hover)]"
-                ),
-                children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 min-w-0", children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      "aria-hidden": true,
-                      className: cn(
-                        "flex size-4 shrink-0 items-center justify-center rounded border",
-                        checked ? "border-[var(--bg-inverse)] bg-[var(--bg-inverse)] text-[var(--text-inverse)]" : "border-[var(--border-strong)] bg-[var(--bg-surface)]"
-                      ),
-                      children: checked && /* @__PURE__ */ jsx(Check, { className: "size-3" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { className: "truncate text-[var(--text-primary)]", children: o.label }),
-                  o.hint && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-[var(--text-placeholder)]", children: o.hint })
-                ] })
+                onClick: clearAll,
+                disabled: !canClear,
+                className: "rounded px-2 py-0.5 text-secondary hover:bg-hover disabled:opacity-40",
+                children: text.clear
               }
-            ) }, o.value);
-          })
+            )
+          ] })
         }
-      ),
-      /* @__PURE__ */ jsx(FieldCaption, { parts: hintParts }),
-      field.errorEl
+      )
     ] })
   );
 }

package/dist/components/multi-select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/multi-select.tsx"],"sourcesContent":["import { useId, useMemo, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n} from \"react\";\nimport { Check } from \"lucide-react\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from \"./dropdown\";\nimport { useActiveOptionScroll, useComboboxFieldError } from \"./combobox-core\";\nimport { EndHintRow, FieldCaption, LABEL_IN_ROW, StaticLabelRow, useFieldHint } from \"./field-parts\";\nimport {\n  DEFAULT_COMMON_LABELS,\n  DEFAULT_MULTI_SELECT_LABELS,\n  useKitLabels,\n} from \"../i18n/kit-labels\";\n\nexport interface MultiSelectOption {\n  value: string | number;\n  label: string;\n  hint?: string;\n}\n\n/** `onChange` is the kit's — \"the selection changed\", carrying the new values —\n *  rather than the div's form event. */\nexport interface MultiSelectProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  options: MultiSelectOption[];\n  values: (string | number)[];\n  onChange: (next: (string | number)[]) => void;\n  /** Displayed when no value is selected (i.e. \"all\"). Defaults to `placeholder`,\n   * then to `multiSelect.all` from the {@link UiKitProvider}, then \"All\". */\n  allLabel?: string;\n  /** Singular/plural countable label, used when 1+ items are selected. Default:\n   *  `multiSelect.selectedCount` from the provider — the bare count in English. */\n  itemLabel?: (count: number) => string;\n  placeholder?: string;\n  /** Embedded top-boundary label, matching the native Input/Select fields. */\n  label?: ReactNode;\n  /** Search-box placeholder. Default: `multiSelect.search` from the provider, else \"Search\". */\n  searchLabel?: string;\n  /** \"Select all\" action label. Default: `multiSelect.selectAll`, else \"Select all\". */\n  selectAllLabel?: string;\n  /** \"Clear\" action label. Default: `multiSelect.clear`, else \"Clear\". */\n  clearLabel?: string;\n  /** Extra classes for the open dropdown PANEL — the way to widen it past its\n   *  16rem default when the rows carry more than a label (Keksdose feedback #147). */\n  panelClassName?: string;\n  /** Required and unanswered — {@link FIELD_INVALID}, the same rose border the\n   *  native `Select` has worn since feedback #235. Every field-styled control in\n   *  this package carries it now, so a form can mark any of its fields rather than\n   *  only the one that happened to have it first. */\n  invalid?: boolean;\n  /** What is wrong with the selection, in the caller's words. Rendered under the\n   *  field, pointed at by the trigger's `aria-describedby` (merged with any the\n   *  caller passed) and implies `invalid` — {@link Input}'s `error`, on the same\n   *  rules. */\n  error?: ReactNode;\n  /**\n   * Standing advice for the field — {@link Combobox}'s `hint` (keksdose K4): plain TEXT\n   * is a caption under the field on the trigger's `aria-describedby`, before any error;\n   * a {@link FieldHint} \"?\" rides the label line, or with no label sits at the trigger's\n   * end edge, outside the box. Not an option's `hint`, which stays on its row.\n   */\n  hint?: ReactNode;\n  /** The trigger cannot be opened: FIELD_BASE's settled grey, no chevron (as a\n   *  disabled {@link Select} drops its own), and a dimmed label. */\n  disabled?: boolean;\n}\n\nexport function MultiSelect({\n  options,\n  values,\n  onChange,\n  allLabel,\n  itemLabel,\n  placeholder,\n  label,\n  searchLabel,\n  selectAllLabel,\n  clearLabel,\n  className,\n  panelClassName,\n  invalid,\n  error,\n  hint,\n  disabled,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: MultiSelectProps) {\n  const { open, setOpen, wrapperRef, triggerRef, closeToTrigger, query, setQuery, inputRef } =\n    useDropdownSearch();\n  // `allLabel` is deliberately NOT folded in here: between it and the provider's\n  // `all` sits `placeholder`, which has always doubled as the \"nothing picked\" text,\n  // and a caller who set it must keep seeing it.\n  const labels = useKitLabels(\"multiSelect\", DEFAULT_MULTI_SELECT_LABELS, {\n    search: searchLabel,\n    selectAll: selectAllLabel,\n    clear: clearLabel,\n    selectedCount: itemLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const hintParts = useFieldHint(hint, ariaDescribedBy);\n  const field = useComboboxFieldError(error, invalid, hintParts.describedBy);\n  // One id per instance: `aria-controls` on the trigger names the list while the\n  // list is still closed.\n  const uid = useId();\n  const listboxId = `${uid}-listbox`;\n  const optionId = (index: number) => `${uid}-option-${index}`;\n  // Which row the arrow keys are on. Reset from the handlers that change what the\n  // list contains rather than from an effect — a render pass is not where this\n  // decision belongs, and the two callers that move the list are right here.\n  const [active, setActive] = useState(0);\n\n  const filtered = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return options;\n    return options.filter(\n      (o) =>\n        o.label.toLowerCase().includes(q) ||\n        (o.hint ?? \"\").toLowerCase().includes(q),\n    );\n  }, [options, query]);\n\n  const valueSet = useMemo(() => new Set(values), [values]);\n  const allChecked = options.length > 0 && options.every((o) => valueSet.has(o.value));\n  const anyChecked = values.length > 0;\n  const selectedSummary = (() => {\n    if (!anyChecked || allChecked) return allLabel ?? placeholder ?? labels.all;\n    return labels.selectedCount(values.length);\n  })();\n\n  const toggle = (val: string | number) => {\n    if (valueSet.has(val)) onChange(values.filter((v) => v !== val));\n    else onChange([...values, val]);\n  };\n\n  const selectAll = () => onChange(options.map((o) => o.value));\n  const clearAll = () => onChange([]);\n\n  const activeId = active >= 0 && active < filtered.length ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n\n  // The WAI-ARIA APG's listbox keyboard, handled on the search box because that is\n  // where focus is while the panel is up. Escape is `useDropdown`'s, on the document.\n  const onListKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActive((i) => Math.min(i + 1, filtered.length - 1));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActive((i) => Math.max(i - 1, 0));\n    } else if (e.key === \"Home\") {\n      e.preventDefault();\n      setActive(0);\n    } else if (e.key === \"End\") {\n      e.preventDefault();\n      setActive(filtered.length - 1);\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      // Toggling keeps the panel open, exactly as clicking a row does: this control\n      // exists to answer \"which of these\", which is rarely one of them.\n      if (filtered[active]) toggle(filtered[active].value);\n    } else if (e.key === \"Tab\") {\n      e.preventDefault();\n      closeToTrigger();\n    }\n  };\n\n  return (\n    // `rest` dresses the wrapper; the name belongs to the trigger below it, which is\n    // the thing with a role. Spread FIRST so the ARIA the trigger composes, and the\n    // handlers that open the list, cannot be replaced by accident from outside.\n    <div {...rest} ref={wrapperRef} className={cn(\"relative\", className)}>\n      {label !== undefined && hintParts.labelHint === undefined && (\n        <FieldLabel className={disabled ? \"opacity-50\" : undefined}>{label}</FieldLabel>\n      )}\n      <EndHintRow hint={label === undefined ? hintParts.labelHint : undefined}>\n        <button\n          ref={triggerRef}\n          type=\"button\"\n          disabled={disabled}\n          // A combobox, not a bare button: this trigger carried `aria-invalid`, which\n          // `button` does not support, so a required-and-empty filter painted its rose\n          // border and announced nothing (ESLint's `role-supports-aria-props`, the\n          // audit's §a11y). The role that describes it is the one that also supports\n          // the attribute.\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-controls={listboxId}\n          aria-haspopup=\"listbox\"\n          // The label is a floating <span>, not a <label for>, so without this the\n          // trigger announces only its summary — \"3 selected\", with nothing saying\n          // three of WHAT. The label AND the summary, because `aria-label` replaces\n          // the content rather than adding to it; the same composition its two\n          // siblings use, so a form row of pickers reads the same way throughout.\n          // A caller's own name wins: two filters labelled \"Accounts\" on one screen have\n          // to be told apart, and only the caller knows by what.\n          aria-label={\n            ariaLabel ?? (typeof label === \"string\" ? common.fieldValue(label, selectedSummary) : undefined)\n          }\n          onClick={() => {\n            setOpen((v) => !v);\n            setActive(0);\n          }}\n          // Down/Up opens the list from the closed trigger, per the APG; Enter and\n          // Space already do through the button's own click.\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n              e.preventDefault();\n              setOpen(true);\n              setActive(0);\n            }\n          }}\n          aria-invalid={field.isInvalid || undefined}\n          // On the TRIGGER, where focus lands — the `aria-describedby` a caller put on\n          // the component is taken off the wrapper for the same reason.\n          aria-describedby={field.describedBy}\n          className={cn(\n            FIELD_TRIGGER,\n            \"pe-9\",\n            label !== undefined && FIELD_FLOATING_PAD,\n            // FIELD_TRIGGER's hover would still light a trigger nothing can open.\n            \"disabled:hover:bg-[var(--bg-surface-2)]\",\n            // Dimmed like EntityCombobox's and MultiEntityCombobox's disabled triggers;\n            // only the label was, so a disabled MultiSelect read as live (showcase audit).\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            field.isInvalid && FIELD_INVALID,\n          )}\n        >\n          {/* The summary IS the field's value, so it inherits FIELD_BASE's ink rather\n              than restating a lighter one (Keksdose dev#477). */}\n          <span className=\"truncate\">{selectedSummary}</span>\n          {!disabled && <FieldChevron />}\n        </button>\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it — after the trigger, so the\n          \"?\" follows the control in the tab order, as on Input and Select. */}\n      {label !== undefined && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <FieldLabel className={cn(LABEL_IN_ROW, disabled && \"opacity-50\")}>{label}</FieldLabel>\n        </StaticLabelRow>\n      )}\n      {open && !disabled && (\n        <DropdownPanel\n          // 16rem by default; `panelClassName` is how a caller widens it (Keksdose\n          // feedback #147: the market picker's rows carry a postcode, a town, a\n          // distance and a receipt count, all of which were being truncated). The\n          // override used to be applied from the OUTSIDE with a\n          // `[&>div]:w-full` descendant selector, which worked and was a hack —\n          // \"change the package\" was the right call.\n          className={cn(\"w-64\", panelClassName)}\n          empty={filtered.length === 0}\n          // The rows below are options, so the list around them has to be a listbox\n          // — and one that says several answers are allowed, which is the only thing\n          // that made the trigger's \"3 selected\" make sense to a reader.\n          listProps={{ id: listboxId, role: \"listbox\", \"aria-multiselectable\": true }}\n          header={\n            <>\n              <DropdownSearchHeader\n                query={query}\n                onQueryChange={(v) => {\n                  setQuery(v);\n                  // The list under the highlight just changed; keeping the old index\n                  // would point `aria-activedescendant` at a different option than\n                  // the one the user was on.\n                  setActive(0);\n                }}\n                inputRef={inputRef}\n                placeholder={labels.search}\n                listboxId={listboxId}\n                activeId={activeId}\n                onKeyDown={onListKeyDown}\n              />\n              <div className=\"flex items-center justify-between gap-2 px-2 py-1.5 text-xs\">\n                <button\n                  type=\"button\"\n                  onClick={selectAll}\n                  disabled={allChecked}\n                  className=\"rounded px-2 py-0.5 text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] disabled:opacity-40\"\n                >\n                  {labels.selectAll}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={clearAll}\n                  disabled={!anyChecked}\n                  className=\"rounded px-2 py-0.5 text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] disabled:opacity-40\"\n                >\n                  {labels.clear}\n                </button>\n              </div>\n            </>\n          }\n        >\n          {filtered.map((o, i) => {\n              const checked = valueSet.has(o.value);\n              return (\n                <li key={o.value} role=\"presentation\">\n                  <button\n                    type=\"button\"\n                    id={optionId(i)}\n                    // The checked state used to exist ONLY as the decorative span\n                    // below (the audit's §a11y): the row said its label and nothing\n                    // else, so \"selected\" was imperceptible without sight. This is\n                    // the same state, in the one place a reader looks for it.\n                    role=\"option\"\n                    aria-selected={checked}\n                    // Focus stays in the search box — that is what\n                    // `aria-activedescendant` is for — so the rows are not tab stops.\n                    tabIndex={-1}\n                    onClick={() => toggle(o.value)}\n                    onMouseEnter={() => setActive(i)}\n                    className={cn(\n                      \"flex w-full items-center justify-between gap-2 px-3 py-1.5 text-sm text-start hover:bg-[var(--bg-hover)]\",\n                      checked && \"bg-[var(--bg-active)]\",\n                      i === active && \"bg-[var(--bg-hover)]\",\n                    )}\n                  >\n                    <span className=\"flex items-center gap-2 min-w-0\">\n                      <span\n                        // A picture of `aria-selected` above; a reader that met both\n                        // would be told twice.\n                        aria-hidden\n                        className={cn(\n                          \"flex size-4 shrink-0 items-center justify-center rounded border\",\n                          checked\n                            ? \"border-[var(--bg-inverse)] bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                            : \"border-[var(--border-strong)] bg-[var(--bg-surface)]\",\n                        )}\n                      >\n                        {checked && <Check className=\"size-3\" />}\n                      </span>\n                      <span className=\"truncate text-[var(--text-primary)]\">{o.label}</span>\n                      {o.hint && (\n                        <span className=\"truncate text-xs text-[var(--text-placeholder)]\">\n                          {o.hint}\n                        </span>\n                      )}\n                    </span>\n                  </button>\n                </li>\n              );\n            })}\n        </DropdownPanel>\n      )}\n      {/* After the panel, not before it: the panel is `absolute` with no `top`, so it\n          opens at its place in the flow — under the message, had the message come\n          first. */}\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/multi-select.tsx"],"sourcesContent":["import { useCallback, useId, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { FieldChevron, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from \"./field-base\";\nimport { FieldLabel } from \"./field-parts\";\nimport { cn } from \"../lib/cn\";\nimport { ComboboxPanel, useComboboxCore, type ComboOption } from \"./combobox-core\";\nimport {\n  assignRef,\n  EndHintRow,\n  LABEL_IN_ROW,\n  LockedReason,\n  StaticLabelRow,\n  useFieldMessages,\n  useLockReason,\n  type DisabledReasonDisplay,\n} from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\nimport {\n  DEFAULT_COMMON_LABELS,\n  DEFAULT_MULTI_SELECT_LABELS,\n  useKitLabels,\n  type MultiSelectLabels,\n  type LabelOverride,\n} from \"../i18n/kit-labels\";\n\n/**\n * One row of a {@link MultiSelect}. Generic over its value since 0.34 (API-4), so a list of\n * number ids hands `onChange` numbers — `MultiSelectOption` alone is the old\n * `string | number` row.\n */\nexport interface MultiSelectOption<V extends string | number = string | number> {\n  value: V;\n  label: string;\n  /** A second line under the label — a postcode, a count (keksdose #147). Searchable. */\n  hint?: string;\n  /**\n   * Shown but not takeable — {@link ComboOption.disabled}: dimmed, `aria-disabled`, passed\n   * over by the arrow keys, and a press does nothing. A chosen disabled row stays chosen:\n   * \"Select all\" and \"Clear\" leave it as it is. Say why in `hint`.\n   */\n  disabled?: boolean;\n}\n\n/** `onChange` is the kit's — \"the selection changed\", carrying the new values —\n *  rather than the div's form event. Generic over the option value (API-4): `V` is\n *  inferred from `options` and `value`, so `onChange` hands back `number[]` for number\n *  ids and `string[]` for string ones, and no call site casts. */\nexport interface MultiSelectProps<V extends string | number = string | number>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  options: MultiSelectOption<V>[];\n  /** The chosen values — the select family's `value` (API-4). */\n  value?: V[];\n  onChange: (next: V[]) => void;\n  /** Singular/plural countable label, used when 1+ items are selected. Default:\n   *  `labels.selectedCount`, else `multiSelect.selectedCount` from the provider — the\n   *  bare count in English. */\n  itemLabel?: (count: number) => string;\n  /** Shown when nothing is picked, unless `labels.all` says otherwise — it has always\n   *  doubled as the \"nothing picked\" text. */\n  placeholder?: string;\n  /** Embedded top-boundary label, matching the native Input/Select fields. */\n  label?: ReactNode;\n  /**\n   * Per-instance overrides of the provider's `multiSelect` namespace, over English — the\n   * kit's `labels` shape, where this took four string props until 0.35 (API-4: `allLabel`,\n   * `searchLabel`, `selectAllLabel`, `clearLabel`). `all` is the trigger when nothing is\n   * picked: `labels.all`, then `placeholder`, then the provider's.\n   */\n  labels?: LabelOverride<MultiSelectLabels>;\n  /**\n   * Extra classes for the open PANEL. The panel is portalled now (dev#548) and sizes\n   * itself: as wide as the trigger and at least 16rem, growing with its rows up to 32rem\n   * (or the trigger) — what this prop was asked for (keksdose feedback #147: the market\n   * picker's postcode, distance and receipt-count hints were cut at 16rem). A `w-*` class\n   * here no longer sets the width.\n   */\n  panelClassName?: string;\n  /** Required and unanswered — {@link FIELD_INVALID}, the same rose border the\n   *  native `Select` has worn since feedback #235. Every field-styled control in\n   *  this package carries it now, so a form can mark any of its fields rather than\n   *  only the one that happened to have it first. */\n  invalid?: boolean;\n  /** What is wrong with the selection, in the caller's words. Rendered under the\n   *  field, pointed at by the trigger's `aria-describedby` (merged with any the\n   *  caller passed) and implies `invalid` — {@link Input}'s `error`, on the same\n   *  rules. */\n  error?: ReactNode;\n  /**\n   * Standing advice for the field — {@link Combobox}'s `hint` (keksdose K4): plain TEXT\n   * is a caption under the field on the trigger's `aria-describedby`, before any error;\n   * a {@link FieldHint} \"?\" rides the label line, or with no label sits at the trigger's\n   * end edge, outside the box. Not an option's `hint`, which stays on its row.\n   */\n  hint?: ReactNode;\n  /** The trigger cannot be opened: FIELD_BASE's settled grey, no chevron (as a\n   *  disabled {@link Select} drops its own), and a dimmed label. */\n  disabled?: boolean;\n  /**\n   * Why the selection cannot be changed — {@link EntityCombobox}'s `disabledReason`: the\n   * trigger stays focusable and `aria-disabled`, the list does not open and `onChange`\n   * never fires; the reason is a line under the field at Large and on a touch screen,\n   * else in the kit {@link Tooltip} (`disabledReasonDisplay`), and on the trigger's\n   * `aria-describedby`. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the\n   *  field at Large and on a touch screen by default, the tooltip otherwise. */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /** This picker COMMITS — toggling saves (a filter persisted per user, a settings row).\n   *  Locked the `disabledReason` way under a locked {@link WriteLockProvider}, with the\n   *  lock's reason. Leave it off inside a form that has its own Save. */\n  commit?: CommitScope;\n  /** The TRIGGER — the focusable `<button>` — as a React 19 ref prop, as on\n   *  {@link MultiEntityCombobox} (react-hook-form's focus-on-error). Not the wrapper. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Pick several of a fixed list — a filter's accounts, a comparison's data sets — with a\n * search box, \"Select all\" and \"Clear\"; nothing picked reads as \"all\".\n *\n * Built on the picker family's foundation since round 0.34 (Wave 2, DUP-4):\n * `useComboboxCore` + `ComboboxPanel`, as {@link MultiEntityCombobox} is. It was an\n * absolute `DropdownPanel`, which an `overflow` ancestor clipped (dev#548) and which on a\n * phone was a 16rem panel between the field and the keyboard; it now has the full-screen\n * sheet (live #200), the portal, the live result count, disabled rows and the search\n * that folds accents (\"zurich\" finds Zürich, DUP-5).\n */\nexport function MultiSelect<V extends string | number = string | number>(props: MultiSelectProps<V>) {\n  const {\n    options,\n    value: valueProp,\n    onChange,\n    itemLabel,\n    placeholder,\n    label,\n    labels: labelsProp,\n    className,\n    panelClassName,\n    invalid,\n    error,\n    hint,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    ref,\n    id,\n    \"aria-label\": ariaLabel,\n    // Off `rest` and onto the trigger, which is the combobox a reader meets: `Field`'s\n    // render-prop spreads `{ id, aria-describedby, aria-invalid, aria-required }`, and on\n    // the wrapper div the label named nothing and the required state described nothing\n    // (DUP-8, refactor audit 2026-10 — Combobox's rule).\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  const value = useMemo<V[]>(() => valueProp ?? [], [valueProp]);\n  // The rows as the family's options — the hint is the sublabel, searched like the label.\n  const comboOptions = useMemo(\n    () => options.map((o): ComboOption<V> => ({ value: o.value, label: o.label, sublabel: o.hint, disabled: o.disabled })),\n    [options],\n  );\n  // Back closes the open list, as it did on `useDropdown` (keksdose live #309).\n  const core = useComboboxCore<V>({ options: comboOptions, backCloses: true });\n  const { open, setOpen, triggerRef } = core;\n  // The core anchors the panel to the trigger and hands focus back to it; the caller's\n  // `ref` wants the same element. One callback feeds both.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n  // `labels` > the provider's `multiSelect` > English. `all` is resolved apart below:\n  // between the instance's and the provider's sits `placeholder`, which has always\n  // doubled as the \"nothing picked\" text, and a caller who set it must keep seeing it.\n  const text = useKitLabels(\"multiSelect\", DEFAULT_MULTI_SELECT_LABELS, {\n    search: labelsProp?.search,\n    selectAll: labelsProp?.selectAll,\n    clear: labelsProp?.clear,\n    selectedCount: labelsProp?.selectedCount ?? itemLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n\n  // The lock — EntityCombobox's: the trigger stays reachable and says why.\n  const lock = useLockReason(commit, disabledReason);\n  const inert = lock.locked || Boolean(disabled);\n  // A lock (or `disabled`) arriving while the list is up closes it — adjusted while\n  // rendering, as CountrySelect does, so no frame shows a list that can no longer be used.\n  if (inert && open) setOpen(false);\n\n  // The caller's ids, the caption, a lock's reason, the error — Select's order.\n  const field = useFieldMessages({\n    hint,\n    error,\n    invalid,\n    describedBy: ariaDescribedBy,\n    ariaInvalid,\n    reasonId: lock.locked && lock.reasonId,\n  });\n  // One id per instance: `aria-controls` on the trigger names the list while the\n  // list is still closed.\n  const listboxId = `${useId()}-listbox`;\n\n  const valueSet = useMemo(() => new Set<V>(value), [value]);\n  const allChecked = options.length > 0 && options.every((o) => valueSet.has(o.value));\n  const selectedSummary =\n    value.length === 0 || allChecked\n      ? (labelsProp?.all ?? placeholder ?? text.all)\n      : text.selectedCount(value.length);\n\n  const toggle = (o: ComboOption<V>) => {\n    if (lock.locked) return;\n    if (valueSet.has(o.value)) onChange(value.filter((v) => v !== o.value));\n    else onChange([...value, o.value]);\n    // Stays open, as a pressed row always has: this control answers \"which of these\",\n    // which is rarely one of them.\n  };\n  // A chosen disabled row stays chosen, an unchosen one stays out — the row refuses to be\n  // toggled, by a press or by the two actions.\n  const selectAll = () => onChange(options.filter((o) => !o.disabled || valueSet.has(o.value)).map((o) => o.value));\n  const clearAll = () => onChange(options.filter((o) => o.disabled && valueSet.has(o.value)).map((o) => o.value));\n  const canSelectAll = options.some((o) => !o.disabled && !valueSet.has(o.value));\n  const canClear = options.some((o) => !o.disabled && valueSet.has(o.value));\n\n  const trigger = (\n    <button\n      ref={setTrigger}\n      id={id}\n      type=\"button\"\n      // The focusable kind of disabled while locked (Button's rule): native `disabled`\n      // would take the field out of the tab order, and the reason with it.\n      disabled={lock.locked ? undefined : disabled}\n      aria-disabled={lock.locked || undefined}\n      // A combobox, not a bare button: this trigger carried `aria-invalid`, which\n      // `button` does not support, so a required-and-empty filter painted its rose\n      // border and announced nothing (ESLint's `role-supports-aria-props`, the\n      // audit's §a11y). The role that describes it is the one that also supports\n      // the attribute.\n      role=\"combobox\"\n      aria-expanded={open}\n      aria-controls={listboxId}\n      aria-haspopup=\"listbox\"\n      // The label is a floating <span>, not a <label for>, so without this the\n      // trigger announces only its summary — \"3 selected\", with nothing saying\n      // three of WHAT. The label AND the summary, because `aria-label` replaces\n      // the content rather than adding to it; the same composition its two\n      // siblings use, so a form row of pickers reads the same way throughout.\n      // A caller's own name wins: two filters labelled \"Accounts\" on one screen have\n      // to be told apart, and only the caller knows by what.\n      aria-label={\n        ariaLabel ?? (typeof label === \"string\" ? common.fieldValue(label, selectedSummary) : undefined)\n      }\n      onClick={() => {\n        if (!inert) setOpen((v) => !v);\n      }}\n      // Down/Up opens the list from the closed trigger, per the APG; Enter and\n      // Space already do through the button's own click.\n      onKeyDown={(e) => {\n        if (inert) return;\n        if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n          e.preventDefault();\n          setOpen(true);\n        }\n      }}\n      aria-invalid={field.isInvalid || undefined}\n      aria-required={ariaRequired}\n      // On the TRIGGER, where focus lands — the `aria-describedby` a caller put on\n      // the component is taken off the wrapper for the same reason.\n      aria-describedby={field.describedBy}\n      className={cn(\n        FIELD_TRIGGER,\n        \"pe-9\",\n        label !== undefined && FIELD_FLOATING_PAD,\n        // FIELD_TRIGGER's hover would still light a trigger nothing can open.\n        \"disabled:hover:bg-surface-2\",\n        // Dimmed like EntityCombobox's and MultiEntityCombobox's disabled triggers;\n        // only the label was, so a disabled MultiSelect read as live (showcase audit).\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        lock.locked && \"cursor-not-allowed opacity-50\",\n        field.isInvalid && FIELD_INVALID,\n      )}\n    >\n      {/* The summary IS the field's value, so it inherits FIELD_BASE's ink rather\n          than restating a lighter one (Keksdose dev#477). An ellipsis at Normal; from\n          Large up it wraps and the trigger grows, as DatePicker's value does (text\n          size §10.17, round 0.34 T1). */}\n      <span className=\"truncate-until-large\">{selectedSummary}</span>\n      {!inert && <FieldChevron />}\n    </button>\n  );\n\n  return (\n    // `rest` dresses the wrapper; the name belongs to the trigger below it, which is\n    // the thing with a role. Spread FIRST so the ARIA the trigger composes, and the\n    // handlers that open the list, cannot be replaced by accident from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined && field.labelHint === undefined && (\n        <FieldLabel className={inert ? \"opacity-50\" : undefined}>{label}</FieldLabel>\n      )}\n      <EndHintRow hint={label === undefined ? field.labelHint : undefined}>\n        {lock.locked ? (\n          // Button's frame: the line under the trigger, or the Tooltip with a hidden copy\n          // for `aria-describedby`.\n          <LockedReason lock={lock} display={disabledReasonDisplay} className=\"block\">\n            {trigger}\n          </LockedReason>\n        ) : (\n          trigger\n        )}\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it — after the trigger, so the\n          \"?\" follows the control in the tab order, as on Input and Select. */}\n      {label !== undefined && field.labelHint !== undefined && (\n        <StaticLabelRow hint={field.labelHint}>\n          <FieldLabel className={cn(LABEL_IN_ROW, inert && \"opacity-50\")}>{label}</FieldLabel>\n        </StaticLabelRow>\n      )}\n      {field.below}\n      <ComboboxPanel\n        core={core}\n        listboxId={listboxId}\n        multi\n        // On a phone the list is a full-screen sheet, which needs the field's own name\n        // to say what it asks for (live #200).\n        sheetTitle={label ?? placeholder}\n        searchPlaceholder={text.search}\n        isSelected={(v) => valueSet.has(v)}\n        onChoose={toggle}\n        showCreate={false}\n        onCreate={() => {}}\n        createContent={null}\n        // At least the trigger's width and 16rem, growing with the rows to 32rem: the\n        // hints are why it was widened at all (keksdose #147).\n        width={{ minRem: 16, fit: true, maxRem: 32 }}\n        className={panelClassName}\n        toolbar={\n          <div className=\"flex items-center justify-between gap-2 px-2 py-1.5 text-xs\">\n            <button\n              type=\"button\"\n              onClick={selectAll}\n              disabled={!canSelectAll}\n              className=\"rounded px-2 py-0.5 text-secondary hover:bg-hover disabled:opacity-40\"\n            >\n              {text.selectAll}\n            </button>\n            <button\n              type=\"button\"\n              onClick={clearAll}\n              disabled={!canClear}\n              className=\"rounded px-2 py-0.5 text-secondary hover:bg-hover disabled:opacity-40\"\n            >\n              {text.clear}\n            </button>\n          </div>\n        }\n      />\n    </div>\n  );\n}\n"],"mappings":";AAqOI,SA6DE,KA7DF;AArOJ,SAAS,aAAa,OAAO,eAAe;AAE5C,SAAS,cAAc,eAAe,eAAe,0BAA0B;AAC/E,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AACnB,SAAS,eAAe,uBAAyC;AACjE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAyGA,SAAS,YAAyD,OAA4B;AACnG,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,IAKd,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,QAAQ,QAAa,MAAM,aAAa,CAAC,GAAG,CAAC,SAAS,CAAC;AAE7D,QAAM,eAAe;AAAA,IACnB,MAAM,QAAQ,IAAI,CAAC,OAAuB,EAAE,OAAO,EAAE,OAAO,OAAO,EAAE,OAAO,UAAU,EAAE,MAAM,UAAU,EAAE,SAAS,EAAE;AAAA,IACrH,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,OAAO,gBAAmB,EAAE,SAAS,cAAc,YAAY,KAAK,CAAC;AAC3E,QAAM,EAAE,MAAM,SAAS,WAAW,IAAI;AAGtC,QAAM,aAAa;AAAA,IACjB,CAAC,OAAiC;AAChC,iBAAW,UAAU;AACrB,gBAAU,KAAK,EAAE;AAAA,IACnB;AAAA,IACA,CAAC,KAAK,UAAU;AAAA,EAClB;AAIA,QAAM,OAAO,aAAa,eAAe,6BAA6B;AAAA,IACpE,QAAQ,YAAY;AAAA,IACpB,WAAW,YAAY;AAAA,IACvB,OAAO,YAAY;AAAA,IACnB,eAAe,YAAY,iBAAiB;AAAA,EAC9C,CAAC;AACD,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAG3D,QAAM,OAAO,cAAc,QAAQ,cAAc;AACjD,QAAM,QAAQ,KAAK,UAAU,QAAQ,QAAQ;AAG7C,MAAI,SAAS,KAAM,SAAQ,KAAK;AAGhC,QAAM,QAAQ,iBAAiB;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA,UAAU,KAAK,UAAU,KAAK;AAAA,EAChC,CAAC;AAGD,QAAM,YAAY,GAAG,MAAM,CAAC;AAE5B,QAAM,WAAW,QAAQ,MAAM,IAAI,IAAO,KAAK,GAAG,CAAC,KAAK,CAAC;AACzD,QAAM,aAAa,QAAQ,SAAS,KAAK,QAAQ,MAAM,CAAC,MAAM,SAAS,IAAI,EAAE,KAAK,CAAC;AACnF,QAAM,kBACJ,MAAM,WAAW,KAAK,aACjB,YAAY,OAAO,eAAe,KAAK,MACxC,KAAK,cAAc,MAAM,MAAM;AAErC,QAAM,SAAS,CAAC,MAAsB;AACpC,QAAI,KAAK,OAAQ;AACjB,QAAI,SAAS,IAAI,EAAE,KAAK,EAAG,UAAS,MAAM,OAAO,CAAC,MAAM,MAAM,EAAE,KAAK,CAAC;AAAA,QACjE,UAAS,CAAC,GAAG,OAAO,EAAE,KAAK,CAAC;AAAA,EAGnC;AAGA,QAAM,YAAY,MAAM,SAAS,QAAQ,OAAO,CAAC,MAAM,CAAC,EAAE,YAAY,SAAS,IAAI,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AAChH,QAAM,WAAW,MAAM,SAAS,QAAQ,OAAO,CAAC,MAAM,EAAE,YAAY,SAAS,IAAI,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AAC9G,QAAM,eAAe,QAAQ,KAAK,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC,SAAS,IAAI,EAAE,KAAK,CAAC;AAC9E,QAAM,WAAW,QAAQ,KAAK,CAAC,MAAM,CAAC,EAAE,YAAY,SAAS,IAAI,EAAE,KAAK,CAAC;AAEzE,QAAM,UACJ;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,MAAK;AAAA,MAGL,UAAU,KAAK,SAAS,SAAY;AAAA,MACpC,iBAAe,KAAK,UAAU;AAAA,MAM9B,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAc;AAAA,MAQd,cACE,cAAc,OAAO,UAAU,WAAW,OAAO,WAAW,OAAO,eAAe,IAAI;AAAA,MAExF,SAAS,MAAM;AACb,YAAI,CAAC,MAAO,SAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,MAC/B;AAAA,MAGA,WAAW,CAAC,MAAM;AAChB,YAAI,MAAO;AACX,YAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AAChD,YAAE,eAAe;AACjB,kBAAQ,IAAI;AAAA,QACd;AAAA,MACF;AAAA,MACA,gBAAc,MAAM,aAAa;AAAA,MACjC,iBAAe;AAAA,MAGf,oBAAkB,MAAM;AAAA,MACxB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,UAAU,UAAa;AAAA;AAAA,QAEvB;AAAA;AAAA;AAAA,QAGA;AAAA,QACA,KAAK,UAAU;AAAA,QACf,MAAM,aAAa;AAAA,MACrB;AAAA,MAMA;AAAA,4BAAC,UAAK,WAAU,wBAAwB,2BAAgB;AAAA,QACvD,CAAC,SAAS,oBAAC,gBAAa;AAAA;AAAA;AAAA,EAC3B;AAGF;AAAA;AAAA;AAAA;AAAA,IAIE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,YAAY,SAAS,GAC/C;AAAA,gBAAU,UAAa,MAAM,cAAc,UAC1C,oBAAC,cAAW,WAAW,QAAQ,eAAe,QAAY,iBAAM;AAAA,MAElE,oBAAC,cAAW,MAAM,UAAU,SAAY,MAAM,YAAY,QACvD,eAAK;AAAA;AAAA;AAAA,QAGJ,oBAAC,gBAAa,MAAY,SAAS,uBAAuB,WAAU,SACjE,mBACH;AAAA,UAEA,SAEJ;AAAA,MAGC,UAAU,UAAa,MAAM,cAAc,UAC1C,oBAAC,kBAAe,MAAM,MAAM,WAC1B,8BAAC,cAAW,WAAW,GAAG,cAAc,SAAS,YAAY,GAAI,iBAAM,GACzE;AAAA,MAED,MAAM;AAAA,MACP;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,OAAK;AAAA,UAGL,YAAY,SAAS;AAAA,UACrB,mBAAmB,KAAK;AAAA,UACxB,YAAY,CAAC,MAAM,SAAS,IAAI,CAAC;AAAA,UACjC,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,UAAU,MAAM;AAAA,UAAC;AAAA,UACjB,eAAe;AAAA,UAGf,OAAO,EAAE,QAAQ,IAAI,KAAK,MAAM,QAAQ,GAAG;AAAA,UAC3C,WAAW;AAAA,UACX,SACE,qBAAC,SAAI,WAAU,+DACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,UAAU,CAAC;AAAA,gBACX,WAAU;AAAA,gBAET,eAAK;AAAA;AAAA,YACR;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,UAAU,CAAC;AAAA,gBACX,WAAU;AAAA,gBAET,eAAK;AAAA;AAAA,YACR;AAAA,aACF;AAAA;AAAA,MAEJ;AAAA,OACF;AAAA;AAEJ;","names":[]}

package/dist/components/nav-pills.d.ts

@@ -1,7 +1,5 @@
-import * as react from 'react';
-import { ReactNode, ComponentType, MouseEvent, ComponentPropsWithoutRef, ReactElement } from 'react';
-
-interface NavPillItem<T extends string> {
+import type { ComponentPropsWithoutRef, ComponentType, MouseEvent, ReactElement, ReactNode, Ref } from "react";
+export interface NavPillItem<T extends string> {
     value: T;
     label: ReactNode;
     /** Where the pill leads. With one it is a link (see `renderLink`); without, a button
@@ -17,7 +15,7 @@ interface NavPillItem<T extends string> {
 }
 /** What {@link NavPillsProps.renderLink} is handed. Spread it onto your router's link
  *  — `({ href, ...p }) => <Link to={href} {...p} />`. */
-interface NavPillLinkProps {
+export interface NavPillLinkProps {
     href: string;
     className: string;
     children: ReactNode;
@@ -25,8 +23,8 @@ interface NavPillLinkProps {
     onClick: (e: MouseEvent<HTMLAnchorElement>) => void;
 }
 /** The `aria-current` token the current pill carries. */
-type NavPillsCurrent = "page" | "step" | "location" | "true";
-interface NavPillsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"nav">, "children" | "onSelect"> {
+export type NavPillsCurrent = "page" | "step" | "location" | "true";
+export interface NavPillsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"nav">, "children" | "onSelect"> {
     items: NavPillItem<T>[];
     /** The pill that is current. `null` or a value not in `items`: none is. */
     current: T | null;
@@ -47,6 +45,9 @@ interface NavPillsProps<T extends string> extends Omit<ComponentPropsWithoutRef<
     landmark?: boolean;
     /** Classes for every pill. */
     itemClassName?: string;
+    /** The `<nav>` (or the `<div role="group">`) — hence `HTMLElement` (0.34, API-2,
+     *  refactor audit 2026-10). */
+    ref?: Ref<HTMLElement>;
 }
 /**
  * A set of links or buttons that WRAPS onto as many rows as it needs, the current one
@@ -62,6 +63,4 @@ interface NavPillsProps<T extends string> extends Omit<ComponentPropsWithoutRef<
  * list (a screen reader hears "list, 4 items"), and "current" is `aria-current` — the
  * attribute a link to where you already are carries.
  */
-declare function NavPills<T extends string>({ items, current, onSelect, renderLink, currentType, size, landmark, itemClassName, className, ...rest }: NavPillsProps<T>): react.JSX.Element;
-
-export { type NavPillItem, type NavPillLinkProps, NavPills, type NavPillsCurrent, type NavPillsProps };
+export declare function NavPills<T extends string>({ items, current, onSelect, renderLink, currentType, size, landmark, itemClassName, className, ref, ...rest }: NavPillsProps<T>): import("react").JSX.Element;