@eifi1/ui-kit 0.4.1 → 0.5.0

package/dist/components/multi-entity-combobox.js

@@ -1,9 +1,16 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from "./ui.js";
 import { ComboboxPanel, useComboboxCore } from "./combobox-core.js";
+import {
+  DEFAULT_COMBOBOX_LABELS,
+  DEFAULT_COMMON_LABELS,
+  useKitLabels,
+  useKitLocale
+} from "../i18n/kit-labels.js";
 function MultiEntityCombobox({
   value,
   onChange,
@@ -12,8 +19,8 @@ function MultiEntityCombobox({
   loading,
   label,
   placeholder,
-  searchPlaceholder = "Search",
-  emptyLabel = "No results",
+  searchPlaceholder,
+  emptyLabel,
   itemLabel,
   clearable,
   clearLabel,
@@ -22,16 +29,31 @@ function MultiEntityCombobox({
   onCreate,
   createLabel,
   className,
-  invalid
+  invalid,
+  "aria-label": ariaLabel,
+  ...rest
 }) {
   const core = useComboboxCore({ options, loadOptions, loading });
-  const { results, resolve, setOpen } = core;
+  const labels = useKitLabels("combobox", DEFAULT_COMBOBOX_LABELS, {
+    search: searchPlaceholder,
+    noResults: emptyLabel,
+    clear: clearLabel,
+    create: createLabel
+  });
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const { open, results, resolve, setOpen } = core;
+  const listboxId = useId();
   const valueSet = useMemo(() => new Set(value), [value]);
+  const locale = useKitLocale();
+  const listFormat = useMemo(
+    () => new Intl.ListFormat(locale, { type: "conjunction", style: "narrow" }),
+    [locale]
+  );
   const summary = (() => {
     if (value.length === 0) return placeholder ?? "";
     if (itemLabel) return itemLabel(value.length);
     const chosen = value.map(resolve);
-    return chosen.every(Boolean) ? chosen.map((o) => o.label).join(", ") : `${value.length} selected`;
+    return chosen.every(Boolean) ? listFormat.format(chosen.map((o) => o.label)) : labels.selectedCount(value.length);
   })();
   const q = core.query.trim();
   const showCreate = Boolean(onCreate) && q.length > 0 && !results.some((o) => o.label.toLowerCase() === q.toLowerCase());
@@ -41,74 +63,92 @@ function MultiEntityCombobox({
     if (valueSet.has(o.value)) onChange(value.filter((v) => v !== o.value));
     else onChange([...value, o.value]);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
-    label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref: core.triggerRef,
-        type: "button",
-        "aria-label": typeof label === "string" ? `${label}: ${summary}` : void 0,
-        disabled,
-        "aria-invalid": invalid || void 0,
-        onClick: () => !disabled && setOpen((o) => !o),
-        className: cn(
-          FIELD_TRIGGER,
-          "pr-9",
-          label !== void 0 && FIELD_FLOATING_PAD,
-          disabled && "cursor-not-allowed opacity-50",
-          invalid && FIELD_INVALID
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "min-w-0 truncate",
-                // Inherit FIELD_BASE's ink for a value, keep the placeholder grey — the
-                // same rule every field on a form row follows (Keksdose dev#477).
-                !value.length && "text-slate-400 dark:text-slate-500"
-              ),
-              children: summary
+  return (
+    // `rest` dresses the wrapper, which has no role; the accessible NAME goes on
+    // the trigger, which has one. Spread FIRST so the trigger's ARIA and the
+    // handlers that open the panel cannot be clobbered from outside.
+    /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative", className), children: [
+      label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: core.triggerRef,
+          type: "button",
+          role: "combobox",
+          "aria-expanded": open,
+          "aria-controls": listboxId,
+          "aria-haspopup": "listbox",
+          "aria-label": ariaLabel ?? (typeof label === "string" ? common.fieldValue(label, summary) : void 0),
+          disabled,
+          "aria-invalid": invalid || void 0,
+          onClick: () => !disabled && setOpen((o) => !o),
+          onKeyDown: (e) => {
+            if (disabled) return;
+            if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+              e.preventDefault();
+              setOpen(true);
             }
+          },
+          className: cn(
+            FIELD_TRIGGER,
+            "pr-9",
+            label !== void 0 && FIELD_FLOATING_PAD,
+            disabled && "cursor-not-allowed opacity-50",
+            invalid && FIELD_INVALID
           ),
-          showClear ? /* @__PURE__ */ jsx(
-            "span",
-            {
-              role: "button",
-              tabIndex: -1,
-              "aria-label": clearLabel ?? "Clear",
-              onClick: (e) => {
-                e.stopPropagation();
-                onChange([]);
-              },
-              className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300",
-              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
-            }
-          ) : /* @__PURE__ */ jsx(FieldChevron, {})
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ComboboxPanel,
-      {
-        core,
-        multi: true,
-        sheetTitle: label ?? placeholder,
-        searchPlaceholder,
-        emptyLabel,
-        closeLabel,
-        isSelected: (v) => valueSet.has(v),
-        onChoose: toggle,
-        showCreate,
-        onCreate: () => {
-          onCreate?.(q);
-          core.setQuery("");
-        },
-        createContent: createLabel ? createLabel(q) : `Create \u201C${q}\u201D`
-      }
-    )
-  ] });
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "min-w-0 truncate",
+                  // Inherit FIELD_BASE's ink for a value, keep the placeholder tone
+                  // (`--text-placeholder`) — the same rule every field on a form row
+                  // follows (Keksdose dev#477).
+                  !value.length && "text-[var(--text-placeholder)]"
+                ),
+                children: summary
+              }
+            ),
+            showClear ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "button",
+                tabIndex: -1,
+                "aria-label": labels.clear,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onChange([]);
+                },
+                className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]",
+                children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+              }
+            ) : /* @__PURE__ */ jsx(FieldChevron, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ComboboxPanel,
+        {
+          core,
+          listboxId,
+          multi: true,
+          sheetTitle: label ?? placeholder,
+          searchPlaceholder: labels.search,
+          emptyLabel: labels.noResults,
+          closeLabel,
+          isSelected: (v) => valueSet.has(v),
+          onChoose: toggle,
+          showCreate,
+          onCreate: () => {
+            onCreate?.(q);
+            core.setQuery("");
+          },
+          createContent: labels.create(q)
+        }
+      )
+    ] })
+  );
 }
 export {
   MultiEntityCombobox

package/dist/components/multi-entity-combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/multi-entity-combobox.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./ui\";\nimport { ComboboxPanel, useComboboxCore, type ComboOption } from \"./combobox-core\";\n\nexport interface MultiEntityComboboxProps<V extends string | number> {\n  /** Selected ids. */\n  value: V[];\n  onChange: (value: V[]) => void;\n  /** Already-loaded options (client-side filtered); also resolves selected labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced + race-safe. When set, `options` resolves\n   *  labels only. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  loading?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyLabel?: string;\n  /** Trigger summary when 1+ selected (default: the labels joined by \", \", or\n   *  \"N selected\" when a label can't be resolved). */\n  itemLabel?: (count: number) => string;\n  clearable?: boolean;\n  clearLabel?: string;\n  /** The phone sheet's close button. Its own prop rather than a reuse of\n   *  `clearLabel`: \"clear the selection\" and \"close this screen\" are different\n   *  actions, and on a full-screen sheet the close button is the only way out —\n   *  so it is the one control here that MUST be in the reader's language. */\n  closeLabel?: string;\n  disabled?: boolean;\n  /** When set, a \"create\" row appears for a non-empty query with no exact match.\n   *  The panel stays open (adding the new entity to `value` is the caller's job). */\n  onCreate?: (query: string) => void;\n  createLabel?: (query: string) => string;\n  className?: string;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n}\n\n/**\n * Multi-value sibling of {@link EntityCombobox}: pick several entities by search,\n * with the same async `loadOptions`/`onCreate` support. Rows show a checkbox and\n * toggle without closing the panel; the trigger summarises the selection.\n */\nexport function MultiEntityCombobox<V extends string | number>({\n  value,\n  onChange,\n  options,\n  loadOptions,\n  loading,\n  label,\n  placeholder,\n  searchPlaceholder = \"Search\",\n  emptyLabel = \"No results\",\n  itemLabel,\n  clearable,\n  clearLabel,\n  closeLabel,\n  disabled,\n  onCreate,\n  createLabel,\n  className,\n  invalid,\n}: MultiEntityComboboxProps<V>) {\n  const core = useComboboxCore<V>({ options, loadOptions, loading });\n  const { results, resolve, setOpen } = core;\n\n  const valueSet = useMemo(() => new Set(value), [value]);\n  const summary = (() => {\n    if (value.length === 0) return placeholder ?? \"\";\n    if (itemLabel) return itemLabel(value.length);\n    const chosen = value.map(resolve);\n    return chosen.every(Boolean)\n      ? chosen.map((o) => o!.label).join(\", \")\n      : `${value.length} selected`;\n  })();\n\n  const q = core.query.trim();\n  const showCreate =\n    Boolean(onCreate) && q.length > 0 && !results.some((o) => o.label.toLowerCase() === q.toLowerCase());\n  const showClear = Boolean(clearable && value.length > 0 && !disabled);\n\n  const toggle = (o: ComboOption<V>) => {\n    core.cacheRef.current.set(o.value, o);\n    if (valueSet.has(o.value)) onChange(value.filter((v) => v !== o.value));\n    else onChange([...value, o.value]);\n    // Stay open — multi-select keeps adding.\n  };\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      <button\n        ref={core.triggerRef}\n        type=\"button\"\n        // The label is a floating <span>, not a <label for>, so without this the\n        // trigger's accessible name is whatever value happens to be selected —\n        // \"Checking\" with nothing saying it is the account. The label AND the\n        // value, because `aria-label` replaces the content rather than adding to\n        // it, and a control that announces only its name has lost the answer.\n        aria-label={\n          typeof label === \"string\" ? `${label}: ${summary}` : undefined\n        }\n        disabled={disabled}\n        aria-invalid={invalid || undefined}\n        onClick={() => !disabled && setOpen((o) => !o)}\n        className={cn(\n          FIELD_TRIGGER,\n          \"pr-9\",\n          label !== undefined && FIELD_FLOATING_PAD,\n          disabled && \"cursor-not-allowed opacity-50\",\n          invalid && FIELD_INVALID,\n        )}\n      >\n        <span\n          className={cn(\n            \"min-w-0 truncate\",\n            // Inherit FIELD_BASE's ink for a value, keep the placeholder grey — the\n            // same rule every field on a form row follows (Keksdose dev#477).\n            !value.length && \"text-slate-400 dark:text-slate-500\",\n          )}\n        >\n          {summary}\n        </span>\n        {showClear ? (\n          <span\n            role=\"button\"\n            tabIndex={-1}\n            aria-label={clearLabel ?? \"Clear\"}\n            onClick={(e) => {\n              e.stopPropagation();\n              onChange([]);\n            }}\n            className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300\"\n          >\n            <X className=\"size-4\" />\n          </span>\n        ) : (\n          <FieldChevron />\n        )}\n      </button>\n      <ComboboxPanel\n        core={core}\n        multi\n        // On a phone the panel becomes a full-screen sheet, which needs the field's\n        // own label to say what it is asking for (live #200).\n        sheetTitle={label ?? placeholder}\n        searchPlaceholder={searchPlaceholder}\n        emptyLabel={emptyLabel}\n        closeLabel={closeLabel}\n        isSelected={(v) => valueSet.has(v)}\n        onChoose={toggle}\n        showCreate={showCreate}\n        onCreate={() => {\n          onCreate?.(q);\n          core.setQuery(\"\");\n        }}\n        createContent={createLabel ? createLabel(q) : `Create “${q}”`}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/multi-entity-combobox.tsx"],"sourcesContent":["import { useId, useMemo, type ComponentPropsWithoutRef, type ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./ui\";\nimport { ComboboxPanel, useComboboxCore, type ComboOption } from \"./combobox-core\";\nimport {\n  DEFAULT_COMBOBOX_LABELS,\n  DEFAULT_COMMON_LABELS,\n  useKitLabels,\n  useKitLocale,\n} from \"../i18n/kit-labels\";\n\n/** `onChange` is the kit's — \"a selection was made\", carrying values — rather\n *  than the div's form event, so the DOM's spelling of it is omitted. */\nexport interface MultiEntityComboboxProps<V extends string | number>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /** Selected ids. */\n  value: V[];\n  onChange: (value: V[]) => void;\n  /** Already-loaded options (client-side filtered); also resolves selected labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced + race-safe. When set, `options` resolves\n   *  labels only. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  loading?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyLabel?: string;\n  /** Trigger summary when 1+ selected (default: the labels as a locale-formatted\n   *  list, or `combobox.selectedCount` when a label can't be resolved). */\n  itemLabel?: (count: number) => string;\n  clearable?: boolean;\n  clearLabel?: string;\n  /** The phone sheet's close button. Its own prop rather than a reuse of\n   *  `clearLabel`: \"clear the selection\" and \"close this screen\" are different\n   *  actions, and on a full-screen sheet the close button is the only way out —\n   *  so it is the one control here that MUST be in the reader's language. */\n  closeLabel?: string;\n  disabled?: boolean;\n  /** When set, a \"create\" row appears for a non-empty query with no exact match.\n   *  The panel stays open (adding the new entity to `value` is the caller's job). */\n  onCreate?: (query: string) => void;\n  createLabel?: (query: string) => string;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n}\n\n/**\n * Multi-value sibling of {@link EntityCombobox}: pick several entities by search,\n * with the same async `loadOptions`/`onCreate` support. Rows show a checkbox and\n * toggle without closing the panel; the trigger summarises the selection.\n */\nexport function MultiEntityCombobox<V extends string | number>({\n  value,\n  onChange,\n  options,\n  loadOptions,\n  loading,\n  label,\n  placeholder,\n  searchPlaceholder,\n  emptyLabel,\n  itemLabel,\n  clearable,\n  clearLabel,\n  closeLabel,\n  disabled,\n  onCreate,\n  createLabel,\n  className,\n  invalid,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: MultiEntityComboboxProps<V>) {\n  const core = useComboboxCore<V>({ options, loadOptions, loading });\n  // The props are the per-instance overrides, the provider the app-wide ones; a\n  // prop left `undefined` falls through to the provider rather than masking it.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    search: searchPlaceholder,\n    noResults: emptyLabel,\n    clear: clearLabel,\n    create: createLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const { open, results, resolve, setOpen } = core;\n  // One id per instance, generated here rather than in the core: `aria-controls` on\n  // the trigger has to name the list while the list is still closed, so the id\n  // belongs to whoever renders both ends of it.\n  const listboxId = useId();\n\n  const valueSet = useMemo(() => new Set(value), [value]);\n  // A list of NAMES, not a sentence, so the narrow conjunction: English gets\n  // \"Food, Rent, Travel\" (no \"and\" squeezed into a truncating trigger), German and\n  // French still get their \"und\"/\"et\" where the language insists on it, and Japanese\n  // and Chinese get the ideographic comma \"、\". The `unit` type looked like the\n  // natural fit for a summary, but in ja/zh it concatenates the names with nothing\n  // between them at all.\n  const locale = useKitLocale();\n  const listFormat = useMemo(\n    () => new Intl.ListFormat(locale, { type: \"conjunction\", style: \"narrow\" }),\n    [locale],\n  );\n  const summary = (() => {\n    if (value.length === 0) return placeholder ?? \"\";\n    if (itemLabel) return itemLabel(value.length);\n    const chosen = value.map(resolve);\n    return chosen.every(Boolean)\n      ? listFormat.format(chosen.map((o) => o!.label))\n      : labels.selectedCount(value.length);\n  })();\n\n  const q = core.query.trim();\n  const showCreate =\n    Boolean(onCreate) && q.length > 0 && !results.some((o) => o.label.toLowerCase() === q.toLowerCase());\n  const showClear = Boolean(clearable && value.length > 0 && !disabled);\n\n  const toggle = (o: ComboOption<V>) => {\n    core.cacheRef.current.set(o.value, o);\n    if (valueSet.has(o.value)) onChange(value.filter((v) => v !== o.value));\n    else onChange([...value, o.value]);\n    // Stay open — multi-select keeps adding.\n  };\n\n  return (\n    // `rest` dresses the wrapper, which has no role; the accessible NAME goes on\n    // the trigger, which has one. Spread FIRST so the trigger's ARIA and the\n    // handlers that open the panel cannot be clobbered from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      <button\n        ref={core.triggerRef}\n        type=\"button\"\n        // A combobox, not a button. The distinction is not pedantry: this control\n        // carried `aria-invalid`, which `button` does not support, so a required\n        // field left empty painted a rose border and told a reader nothing at all —\n        // and ESLint flagged it as exactly that (`role-supports-aria-props`). The\n        // fix the audit asked for is the role that describes what this IS: a closed\n        // choice that expands into the list named below. `combobox` supports\n        // `aria-invalid`, so the border and the announcement finally agree.\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's accessible name is whatever value happens to be selected —\n        // \"Checking\" with nothing saying it is the account. The label AND the\n        // value, because `aria-label` replaces the content rather than adding to\n        // it, and a control that announces only its name has lost the answer.\n        // A caller's own name wins over the composition: two fields labelled\n        // \"Account\" on a transfer form are the from and the to, and only the\n        // caller knows which is which.\n        aria-label={\n          ariaLabel ??\n          (typeof label === \"string\" ? common.fieldValue(label, summary) : undefined)\n        }\n        disabled={disabled}\n        aria-invalid={invalid || undefined}\n        onClick={() => !disabled && setOpen((o) => !o)}\n        // Down/Up opens the list from the closed trigger, per the APG. Enter and\n        // Space already do it through the button's own click.\n        onKeyDown={(e) => {\n          if (disabled) return;\n          if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n            e.preventDefault();\n            setOpen(true);\n          }\n        }}\n        className={cn(\n          FIELD_TRIGGER,\n          \"pr-9\",\n          label !== undefined && FIELD_FLOATING_PAD,\n          disabled && \"cursor-not-allowed opacity-50\",\n          invalid && FIELD_INVALID,\n        )}\n      >\n        <span\n          className={cn(\n            \"min-w-0 truncate\",\n            // Inherit FIELD_BASE's ink for a value, keep the placeholder tone\n            // (`--text-placeholder`) — the same rule every field on a form row\n            // follows (Keksdose dev#477).\n            !value.length && \"text-[var(--text-placeholder)]\",\n          )}\n        >\n          {summary}\n        </span>\n        {showClear ? (\n          <span\n            role=\"button\"\n            tabIndex={-1}\n            aria-label={labels.clear}\n            onClick={(e) => {\n              e.stopPropagation();\n              onChange([]);\n            }}\n            className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\"\n          >\n            <X className=\"size-4\" />\n          </span>\n        ) : (\n          <FieldChevron />\n        )}\n      </button>\n      <ComboboxPanel\n        core={core}\n        listboxId={listboxId}\n        multi\n        // On a phone the panel becomes a full-screen sheet, which needs the field's\n        // own label to say what it is asking for (live #200).\n        sheetTitle={label ?? placeholder}\n        searchPlaceholder={labels.search}\n        emptyLabel={labels.noResults}\n        closeLabel={closeLabel}\n        isSelected={(v) => valueSet.has(v)}\n        onChoose={toggle}\n        showCreate={showCreate}\n        onCreate={() => {\n          onCreate?.(q);\n          core.setQuery(\"\");\n        }}\n        createContent={labels.create(q)}\n      />\n    </div>\n  );\n}\n"],"mappings":";AAiI8B,cACxB,YADwB;AAjI9B,SAAS,OAAO,eAA8D;AAC9E,SAAS,SAAS;AAClB,SAAS,UAAU;AACnB,SAAS,cAAc,YAAY,eAAe,oBAAoB,qBAAqB;AAC3F,SAAS,eAAe,uBAAyC;AACjE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA2CA,SAAS,oBAA+C;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAgC;AAC9B,QAAM,OAAO,gBAAmB,EAAE,SAAS,aAAa,QAAQ,CAAC;AAGjE,QAAM,SAAS,aAAa,YAAY,yBAAyB;AAAA,IAC/D,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,EACV,CAAC;AACD,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,EAAE,MAAM,SAAS,SAAS,QAAQ,IAAI;AAI5C,QAAM,YAAY,MAAM;AAExB,QAAM,WAAW,QAAQ,MAAM,IAAI,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC;AAOtD,QAAM,SAAS,aAAa;AAC5B,QAAM,aAAa;AAAA,IACjB,MAAM,IAAI,KAAK,WAAW,QAAQ,EAAE,MAAM,eAAe,OAAO,SAAS,CAAC;AAAA,IAC1E,CAAC,MAAM;AAAA,EACT;AACA,QAAM,WAAW,MAAM;AACrB,QAAI,MAAM,WAAW,EAAG,QAAO,eAAe;AAC9C,QAAI,UAAW,QAAO,UAAU,MAAM,MAAM;AAC5C,UAAM,SAAS,MAAM,IAAI,OAAO;AAChC,WAAO,OAAO,MAAM,OAAO,IACvB,WAAW,OAAO,OAAO,IAAI,CAAC,MAAM,EAAG,KAAK,CAAC,IAC7C,OAAO,cAAc,MAAM,MAAM;AAAA,EACvC,GAAG;AAEH,QAAM,IAAI,KAAK,MAAM,KAAK;AAC1B,QAAM,aACJ,QAAQ,QAAQ,KAAK,EAAE,SAAS,KAAK,CAAC,QAAQ,KAAK,CAAC,MAAM,EAAE,MAAM,YAAY,MAAM,EAAE,YAAY,CAAC;AACrG,QAAM,YAAY,QAAQ,aAAa,MAAM,SAAS,KAAK,CAAC,QAAQ;AAEpE,QAAM,SAAS,CAAC,MAAsB;AACpC,SAAK,SAAS,QAAQ,IAAI,EAAE,OAAO,CAAC;AACpC,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,EAEnC;AAEA;AAAA;AAAA;AAAA;AAAA,IAIE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,YAAY,SAAS,GAC/C;AAAA,gBAAU,UAAa,oBAAC,cAAY,iBAAM;AAAA,MAC3C;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,KAAK;AAAA,UACV,MAAK;AAAA,UAQL,MAAK;AAAA,UACL,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,iBAAc;AAAA,UASd,cACE,cACC,OAAO,UAAU,WAAW,OAAO,WAAW,OAAO,OAAO,IAAI;AAAA,UAEnE;AAAA,UACA,gBAAc,WAAW;AAAA,UACzB,SAAS,MAAM,CAAC,YAAY,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,UAG7C,WAAW,CAAC,MAAM;AAChB,gBAAI,SAAU;AACd,gBAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AAChD,gBAAE,eAAe;AACjB,sBAAQ,IAAI;AAAA,YACd;AAAA,UACF;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA,UAAU,UAAa;AAAA,YACvB,YAAY;AAAA,YACZ,WAAW;AAAA,UACb;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA;AAAA;AAAA;AAAA,kBAIA,CAAC,MAAM,UAAU;AAAA,gBACnB;AAAA,gBAEC;AAAA;AAAA,YACH;AAAA,YACC,YACC;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,cAAY,OAAO;AAAA,gBACnB,SAAS,CAAC,MAAM;AACd,oBAAE,gBAAgB;AAClB,2BAAS,CAAC,CAAC;AAAA,gBACb;AAAA,gBACA,WAAU;AAAA,gBAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,YACxB,IAEA,oBAAC,gBAAa;AAAA;AAAA;AAAA,MAElB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,OAAK;AAAA,UAGL,YAAY,SAAS;AAAA,UACrB,mBAAmB,OAAO;AAAA,UAC1B,YAAY,OAAO;AAAA,UACnB;AAAA,UACA,YAAY,CAAC,MAAM,SAAS,IAAI,CAAC;AAAA,UACjC,UAAU;AAAA,UACV;AAAA,UACA,UAAU,MAAM;AACd,uBAAW,CAAC;AACZ,iBAAK,SAAS,EAAE;AAAA,UAClB;AAAA,UACA,eAAe,OAAO,OAAO,CAAC;AAAA;AAAA,MAChC;AAAA,OACF;AAAA;AAEJ;","names":[]}

package/dist/components/multi-select.d.ts

@@ -1,30 +1,32 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 interface MultiSelectOption {
     value: string | number;
     label: string;
     hint?: string;
 }
-interface Props {
+/** `onChange` is the kit's — "the selection changed", carrying the new values —
+ *  rather than the div's form event. */
+interface MultiSelectProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
     options: MultiSelectOption[];
     values: (string | number)[];
     onChange: (next: (string | number)[]) => void;
-    /** Displayed when no value is selected (i.e. "all"). Defaults to "All"; pass a
-     * translated string for i18n. */
+    /** Displayed when no value is selected (i.e. "all"). Defaults to `placeholder`,
+     * then to `multiSelect.all` from the {@link UiKitProvider}, then "All". */
     allLabel?: string;
-    /** Singular/plural countable label, used when 1+ items are selected. */
+    /** Singular/plural countable label, used when 1+ items are selected. Default:
+     *  `multiSelect.selectedCount` from the provider — the bare count in English. */
     itemLabel?: (count: number) => string;
     placeholder?: string;
     /** Embedded top-boundary label, matching the native Input/Select fields. */
     label?: ReactNode;
-    /** Search-box placeholder (default "Search"). */
+    /** Search-box placeholder. Default: `multiSelect.search` from the provider, else "Search". */
     searchLabel?: string;
-    /** "Select all" action label (default "Select all"). */
+    /** "Select all" action label. Default: `multiSelect.selectAll`, else "Select all". */
     selectAllLabel?: string;
-    /** "Clear" action label (default "Clear"). */
+    /** "Clear" action label. Default: `multiSelect.clear`, else "Clear". */
     clearLabel?: string;
-    className?: string;
     /** Extra classes for the open dropdown PANEL — the way to widen it past its
      *  16rem default when the rows carry more than a label (Keksdose feedback #147). */
     panelClassName?: string;
@@ -34,6 +36,6 @@ interface Props {
      *  only the one that happened to have it first. */
     invalid?: boolean;
 }
-declare function MultiSelect({ options, values, onChange, allLabel, itemLabel, placeholder, label, searchLabel, selectAllLabel, clearLabel, className, panelClassName, invalid, }: Props): react.JSX.Element;
+declare function MultiSelect({ options, values, onChange, allLabel, itemLabel, placeholder, label, searchLabel, selectAllLabel, clearLabel, className, panelClassName, invalid, "aria-label": ariaLabel, ...rest }: MultiSelectProps): react.JSX.Element;
 
-export { MultiSelect, type MultiSelectOption };
+export { MultiSelect, type MultiSelectOption, type MultiSelectProps };

package/dist/components/multi-select.js

@@ -1,9 +1,16 @@
+"use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+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 { cn } from "../lib/cn.js";
 import { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from "./dropdown.js";
+import { useActiveOptionScroll } from "./combobox-core.js";
+import {
+  DEFAULT_COMMON_LABELS,
+  DEFAULT_MULTI_SELECT_LABELS,
+  useKitLabels
+} from "../i18n/kit-labels.js";
 function MultiSelect({
   options,
   values,
@@ -12,14 +19,27 @@ function MultiSelect({
   itemLabel,
   placeholder,
   label,
-  searchLabel = "Search",
-  selectAllLabel = "Select all",
-  clearLabel = "Clear",
+  searchLabel,
+  selectAllLabel,
+  clearLabel,
   className,
   panelClassName,
-  invalid
+  invalid,
+  "aria-label": ariaLabel,
+  ...rest
 }) {
-  const { open, setOpen, wrapperRef, query, setQuery, inputRef } = useDropdownSearch();
+  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
+  });
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  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;
@@ -31,9 +51,8 @@ function MultiSelect({
   const allChecked = options.length > 0 && options.every((o) => valueSet.has(o.value));
   const anyChecked = values.length > 0;
   const selectedSummary = (() => {
-    if (!anyChecked) return allLabel ?? placeholder ?? "All";
-    if (allChecked) return allLabel ?? placeholder ?? "All";
-    return itemLabel ? itemLabel(values.length) : `${values.length}`;
+    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));
@@ -41,90 +60,148 @@ function MultiSelect({
   };
   const selectAll = () => onChange(options.map((o) => o.value));
   const clearAll = () => onChange([]);
-  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: cn("relative", className), children: [
-    label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => setOpen((v) => !v),
-        "aria-invalid": invalid || void 0,
-        className: cn(FIELD_TRIGGER, "pr-9", label !== void 0 && FIELD_FLOATING_PAD, invalid && FIELD_INVALID),
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedSummary }),
-          /* @__PURE__ */ jsx(FieldChevron, {})
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsx(
-      DropdownPanel,
-      {
-        className: cn("w-64", panelClassName),
-        empty: filtered.length === 0,
-        header: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            DropdownSearchHeader,
-            {
-              query,
-              onQueryChange: setQuery,
-              inputRef,
-              placeholder: searchLabel
+  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();
+    }
+  };
+  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 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: triggerRef,
+          type: "button",
+          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);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+              e.preventDefault();
+              setOpen(true);
+              setActive(0);
             }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-2 py-1.5 text-xs", children: [
+          },
+          "aria-invalid": invalid || void 0,
+          className: cn(FIELD_TRIGGER, "pr-9", label !== void 0 && FIELD_FLOATING_PAD, invalid && FIELD_INVALID),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedSummary }),
+            /* @__PURE__ */ jsx(FieldChevron, {})
+          ]
+        }
+      ),
+      open && /* @__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: [
             /* @__PURE__ */ jsx(
-              "button",
+              DropdownSearchHeader,
               {
-                type: "button",
-                onClick: selectAll,
-                disabled: allChecked,
-                className: "rounded px-2 py-0.5 text-slate-600 hover:bg-slate-100 disabled:opacity-40 dark:text-slate-300 dark:hover:bg-slate-800",
-                children: selectAllLabel
+                query,
+                onQueryChange: (v) => {
+                  setQuery(v);
+                  setActive(0);
+                },
+                inputRef,
+                placeholder: labels.search,
+                listboxId,
+                activeId,
+                onKeyDown: onListKeyDown
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__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(
               "button",
               {
                 type: "button",
-                onClick: clearAll,
-                disabled: !anyChecked,
-                className: "rounded px-2 py-0.5 text-slate-600 hover:bg-slate-100 disabled:opacity-40 dark:text-slate-300 dark:hover:bg-slate-800",
-                children: clearLabel
-              }
-            )
-          ] })
-        ] }),
-        children: filtered.map((o) => {
-          const checked = valueSet.has(o.value);
-          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => toggle(o.value),
-              className: cn(
-                "flex w-full items-center justify-between gap-2 px-3 py-1.5 text-sm text-left hover:bg-slate-50 dark:hover:bg-slate-800",
-                checked && "bg-slate-100/60 dark:bg-slate-800/60"
-              ),
-              children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 min-w-0", children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "flex size-4 shrink-0 items-center justify-center rounded border",
-                      checked ? "border-slate-900 bg-slate-900 text-white dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900" : "border-slate-300 bg-white dark:border-slate-600 dark:bg-slate-900"
-                    ),
-                    children: checked && /* @__PURE__ */ jsx(Check, { className: "size-3" })
-                  }
+                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-left hover:bg-[var(--bg-hover)]",
+                  checked && "bg-[var(--bg-active)]",
+                  i === active && "bg-[var(--bg-hover)]"
                 ),
-                /* @__PURE__ */ jsx("span", { className: "truncate text-slate-900 dark:text-slate-100", children: o.label }),
-                o.hint && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-slate-400 dark:text-slate-500", children: o.hint })
-              ] })
-            }
-          ) }, o.value);
-        })
-      }
-    )
-  ] });
+                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 })
+                ] })
+              }
+            ) }, o.value);
+          })
+        }
+      )
+    ] })
+  );
 }
 export {
   MultiSelect