@eifi1/ui-kit 0.4.1 → 0.5.0

package/dist/components/chip.js

@@ -0,0 +1,357 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useRef, useState } from "react";
+import { X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { FIELD_INVALID } from "./ui.js";
+import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+const TONE = {
+  neutral: {
+    idle: "border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-secondary)]",
+    selected: "border-[var(--border-strong)] bg-[var(--bg-active)] text-[var(--text-primary)]"
+  },
+  brand: {
+    idle: "border-[var(--border)] bg-[var(--brand-bg)] text-[var(--brand-muted)]",
+    selected: "border-[var(--brand)] bg-[var(--brand)] text-[var(--brand-contrast)]"
+  },
+  danger: {
+    idle: "border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)]",
+    selected: "border-[var(--danger)] bg-[var(--danger)] text-[var(--danger-contrast)]"
+  },
+  warning: {
+    idle: "border-[var(--warning-border)] bg-[var(--warning-bg)] text-[var(--warning)]",
+    selected: "border-[var(--warning)] bg-[var(--warning-bg)] text-[var(--warning)]"
+  },
+  success: {
+    idle: "border-[var(--success-border)] bg-[var(--success-bg)] text-[var(--success)]",
+    selected: "border-[var(--success)] bg-[var(--success-bg)] text-[var(--success)]"
+  },
+  info: {
+    idle: "border-[var(--info-border)] bg-[var(--info-bg)] text-[var(--info)]",
+    selected: "border-[var(--info)] bg-[var(--info-bg)] text-[var(--info)]"
+  }
+};
+const SIZE = {
+  sm: { body: "gap-1 px-2 py-0.5 text-xs", icon: "size-3", remove: "size-3" },
+  md: { body: "gap-1.5 px-2.5 py-1 text-sm", icon: "size-3.5", remove: "size-3.5" }
+};
+const CHIP_BASE = "inline-flex max-w-full items-center rounded-full border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]";
+const Chip = forwardRef(function Chip2({
+  children,
+  tone = "neutral",
+  size = "md",
+  icon: Icon,
+  selected = false,
+  href,
+  onClick,
+  onRemove,
+  removeLabel,
+  disabled = false,
+  className,
+  tabIndex,
+  role,
+  onKeyDown,
+  onFocus,
+  ...rest
+}, ref) {
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { remove: removeLabel });
+  const s = SIZE[size];
+  const palette = TONE[tone];
+  const interactive = !!href || !!onClick;
+  const look = cn(
+    CHIP_BASE,
+    s.body,
+    selected ? palette.selected : palette.idle,
+    interactive && !disabled && "cursor-pointer hover:brightness-[0.97] dark:hover:brightness-110",
+    disabled && "cursor-default opacity-50",
+    className
+  );
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon && /* @__PURE__ */ jsx(Icon, { className: cn(s.icon, "shrink-0"), "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children })
+  ] });
+  const remove = onRemove ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": typeof children === "string" && children ? common.fieldValue(common.remove, children) : common.remove,
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onRemove();
+      },
+      disabled,
+      className: cn(
+        "-mr-0.5 ml-0.5 shrink-0 rounded-full p-0.5 transition-colors",
+        "hover:bg-[var(--bg-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+        disabled && "pointer-events-none"
+      ),
+      children: /* @__PURE__ */ jsx(X, { className: s.remove, "aria-hidden": true })
+    }
+  ) : null;
+  if (href && !disabled) {
+    const link = /* @__PURE__ */ jsxs(
+      "a",
+      {
+        ref,
+        href,
+        "aria-current": selected ? "true" : void 0,
+        className: cn(look, remove && "pr-1.5"),
+        ...rest,
+        children: [
+          body,
+          !remove && null
+        ]
+      }
+    );
+    return remove ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center", children: [
+      link,
+      remove
+    ] }) : link;
+  }
+  if (onClick) {
+    const button = /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick,
+        disabled,
+        "aria-pressed": selected,
+        className: cn(look, remove && "pr-1.5"),
+        ...rest,
+        children: body
+      }
+    );
+    return remove ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center", children: [
+      button,
+      remove
+    ] }) : button;
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: look,
+      tabIndex,
+      role,
+      onKeyDown,
+      onFocus,
+      ...rest,
+      children: [
+        body,
+        remove
+      ]
+    }
+  );
+});
+const DEFAULT_CHIP_INPUT_LABELS = {
+  added: (v) => `${v} added`,
+  removed: (v) => `${v} removed`,
+  remove: "Remove",
+  atLimit: (max) => `Limit of ${max} reached`,
+  duplicate: (v) => `${v} is already in the list`
+};
+function resolveChipInputLabels(labels) {
+  return labels ? { ...DEFAULT_CHIP_INPUT_LABELS, ...labels } : DEFAULT_CHIP_INPUT_LABELS;
+}
+function ChipInput({
+  value,
+  onChange,
+  placeholder,
+  label,
+  ariaLabel,
+  validate,
+  separators = [","],
+  allowDuplicates = false,
+  max,
+  tone = "neutral",
+  size = "md",
+  disabled = false,
+  invalid = false,
+  error,
+  labels,
+  className,
+  "aria-label": ariaLabelAttr,
+  ...rest
+}) {
+  const text = useKitLabels("chipInput", DEFAULT_CHIP_INPUT_LABELS, labels);
+  const locale = useKitLocale();
+  const [draft, setDraft] = useState("");
+  const [message, setMessage] = useState("");
+  const [focusedChip, setFocusedChip] = useState(null);
+  const inputRef = useRef(null);
+  const chipRefs = useRef([]);
+  const id = useId();
+  const listId = `${id}-list`;
+  const errorId = `${id}-error`;
+  const isInvalid = invalid || !!error;
+  const focusChip = (index) => {
+    setFocusedChip(index);
+    if (index === null) inputRef.current?.focus();
+    else chipRefs.current[index]?.focus();
+  };
+  const commitMany = (raws) => {
+    const next = [...value];
+    const added = [];
+    let rejection = null;
+    for (const raw of raws) {
+      const candidate = raw.trim();
+      if (!candidate) continue;
+      if (max !== void 0 && next.length >= max) {
+        rejection ??= text.atLimit(max);
+        break;
+      }
+      if (!allowDuplicates && next.includes(candidate)) {
+        rejection ??= text.duplicate(candidate);
+        continue;
+      }
+      const invalidReason = validate?.(candidate);
+      if (invalidReason) {
+        rejection ??= invalidReason;
+        continue;
+      }
+      next.push(candidate);
+      added.push(candidate);
+    }
+    if (added.length) onChange(next);
+    const addedList = new Intl.ListFormat(locale, { type: "conjunction", style: "long" });
+    setMessage(rejection ?? (added.length ? text.added(addedList.format(added)) : ""));
+    return { added, rejection };
+  };
+  const commit = (raw) => commitMany([raw]).added.length > 0;
+  const removeAt = (index) => {
+    const removed = value[index];
+    onChange(value.filter((_, i) => i !== index));
+    setMessage(text.removed(removed));
+    const next = index >= value.length - 1 ? null : index;
+    requestAnimationFrame(() => focusChip(value.length - 1 === 0 ? null : next));
+  };
+  const onInputKeyDown = (e) => {
+    if (e.key === "Enter") {
+      if (draft.trim()) {
+        e.preventDefault();
+        if (commit(draft)) setDraft("");
+      }
+      return;
+    }
+    if (separators.includes(e.key)) {
+      e.preventDefault();
+      if (commit(draft)) setDraft("");
+      return;
+    }
+    if (e.key === "Escape" && draft) {
+      e.preventDefault();
+      setDraft("");
+      return;
+    }
+    if (e.key === "Backspace" && !draft && value.length) {
+      e.preventDefault();
+      focusChip(value.length - 1);
+    }
+  };
+  const onChipKeyDown = (e, index) => {
+    if (e.key === "Backspace" || e.key === "Delete") {
+      e.preventDefault();
+      removeAt(index);
+      return;
+    }
+    if (e.key === "ArrowLeft" && index > 0) {
+      e.preventDefault();
+      focusChip(index - 1);
+      return;
+    }
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      focusChip(index === value.length - 1 ? null : index + 1);
+      return;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      focusChip(null);
+    }
+  };
+  return (
+    // The rest lands on the OUTER box — the thing a `data-tour` step or a test id
+    // wants to point at — while the accessible name below goes on the `<input>`,
+    // because that is what a screen-reader user actually lands in. Spreading the two
+    // to the same element would have named a decorative wrapper and left the field
+    // anonymous.
+    /* @__PURE__ */ jsxs("div", { ...rest, className: cn("space-y-1", className), children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: `${id}-input`, className: "block text-sm text-[var(--text-secondary)]", children: label }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative flex flex-wrap items-center gap-1.5 rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 shadow-sm",
+            "focus-within:border-[var(--brand)] focus-within:ring-1 focus-within:ring-[var(--brand)]",
+            disabled && "cursor-default bg-[var(--bg-surface-2)]",
+            isInvalid && FIELD_INVALID
+          ),
+          onClick: () => !disabled && inputRef.current?.focus(),
+          children: [
+            /* @__PURE__ */ jsx("ul", { id: listId, role: "list", className: "contents", children: value.map((v, i) => /* @__PURE__ */ jsx("li", { role: "presentation", className: "contents", children: /* @__PURE__ */ jsx(
+              Chip,
+              {
+                ref: (el) => {
+                  chipRefs.current[i] = el;
+                },
+                tone,
+                size,
+                disabled,
+                removeLabel: text.remove,
+                onRemove: disabled ? void 0 : () => removeAt(i),
+                tabIndex: focusedChip === i ? 0 : -1,
+                role: "listitem",
+                "aria-label": v,
+                onKeyDown: (e) => onChipKeyDown(e, i),
+                onFocus: () => setFocusedChip(i),
+                "data-chip-index": i,
+                children: v
+              }
+            ) }, `${v}-${i}`)) }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: `${id}-input`,
+                ref: inputRef,
+                value: draft,
+                onChange: (e) => {
+                  setDraft(e.target.value);
+                  setMessage("");
+                },
+                onKeyDown: onInputKeyDown,
+                onBlur: () => {
+                  if (draft.trim() && commit(draft)) setDraft("");
+                },
+                onPaste: (e) => {
+                  const pasted = e.clipboardData.getData("text");
+                  const pattern = new RegExp(`[${separators.map((s) => `\\${s}`).join("")}
+\r]`);
+                  if (!pattern.test(pasted)) return;
+                  e.preventDefault();
+                  if (commitMany(pasted.split(pattern)).added.length) setDraft("");
+                },
+                placeholder: value.length ? void 0 : placeholder,
+                disabled,
+                "aria-label": label ? void 0 : ariaLabelAttr ?? ariaLabel,
+                "aria-describedby": error ? errorId : void 0,
+                "aria-invalid": isInvalid || void 0,
+                className: "min-w-[6rem] flex-1 bg-transparent py-0.5 text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-placeholder)] disabled:cursor-default"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", "aria-atomic": true, className: "sr-only-fixed", children: message })
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-xs text-[var(--danger)]", children: error })
+    ] })
+  );
+}
+export {
+  Chip,
+  ChipInput,
+  DEFAULT_CHIP_INPUT_LABELS,
+  resolveChipInputLabels
+};
+//# sourceMappingURL=chip.js.map

package/dist/components/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/chip.tsx"],"sourcesContent":["import { forwardRef, useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_INVALID } from \"./ui\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\n/**\n * A chip: a compact pill carrying one value.\n *\n * Three jobs, deliberately one component. A chip can be inert (a tag on a row), a link\n * (a jump to a section), or a toggle (a filter that is on or off) — and the difference is\n * which prop you pass, not which component you pick. Keeping them together is what stops\n * an app growing three near-identical pills that drift apart; it is the shape this kit\n * already uses for `Button`, which is a link when it is given an href.\n *\n * A chip is not a `Button`. It is smaller, it is rounded to a pill, and it reads as a\n * VALUE rather than as an action — which matters because a row of eight buttons says\n * \"choose one of eight things to do\" and a row of eight chips says \"here are eight\n * things\". Using `Button` for both is the mistake this exists to prevent.\n */\n\nexport type ChipTone = \"neutral\" | \"brand\" | \"danger\" | \"warning\" | \"success\" | \"info\";\nexport type ChipSize = \"sm\" | \"md\";\n\nconst TONE: Record<ChipTone, { idle: string; selected: string }> = {\n  neutral: {\n    idle: \"border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-secondary)]\",\n    selected: \"border-[var(--border-strong)] bg-[var(--bg-active)] text-[var(--text-primary)]\",\n  },\n  brand: {\n    idle: \"border-[var(--border)] bg-[var(--brand-bg)] text-[var(--brand-muted)]\",\n    selected: \"border-[var(--brand)] bg-[var(--brand)] text-[var(--brand-contrast)]\",\n  },\n  danger: {\n    idle: \"border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)]\",\n    selected: \"border-[var(--danger)] bg-[var(--danger)] text-[var(--danger-contrast)]\",\n  },\n  warning: {\n    idle: \"border-[var(--warning-border)] bg-[var(--warning-bg)] text-[var(--warning)]\",\n    selected: \"border-[var(--warning)] bg-[var(--warning-bg)] text-[var(--warning)]\",\n  },\n  success: {\n    idle: \"border-[var(--success-border)] bg-[var(--success-bg)] text-[var(--success)]\",\n    selected: \"border-[var(--success)] bg-[var(--success-bg)] text-[var(--success)]\",\n  },\n  info: {\n    idle: \"border-[var(--info-border)] bg-[var(--info-bg)] text-[var(--info)]\",\n    selected: \"border-[var(--info)] bg-[var(--info-bg)] text-[var(--info)]\",\n  },\n};\n\nconst SIZE: Record<ChipSize, { body: string; icon: string; remove: string }> = {\n  sm: { body: \"gap-1 px-2 py-0.5 text-xs\", icon: \"size-3\", remove: \"size-3\" },\n  md: { body: \"gap-1.5 px-2.5 py-1 text-sm\", icon: \"size-3.5\", remove: \"size-3.5\" },\n};\n\nconst CHIP_BASE =\n  \"inline-flex max-w-full items-center rounded-full border transition-colors \" +\n  // `focus-visible`, not `focus`: a chip commonly receives focus programmatically (the\n  // ChipInput moves focus onto one after a removal) and a ring that appears on a\n  // pointer click reads as a stuck selection.\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]\";\n\nexport interface ChipProps {\n  children: ReactNode;\n  tone?: ChipTone;\n  size?: ChipSize;\n  icon?: LucideIcon;\n  /** Marks the chip as the current one — `aria-current` on a link, `aria-pressed` on a toggle. */\n  selected?: boolean;\n  /** Renders the chip as a link. Mutually exclusive with `onClick`. */\n  href?: string;\n  /** Renders the chip as a toggle button. Mutually exclusive with `href`. */\n  onClick?: () => void;\n  /** Renders a dismiss affordance. Works alongside `href`/`onClick` — see the note below. */\n  onRemove?: () => void;\n  /** Accessible name for the dismiss button. Default: `common.remove` from the\n   *  {@link UiKitProvider}, else \"Remove\". */\n  removeLabel?: string;\n  disabled?: boolean;\n  className?: string;\n  /**\n   * Roving focus, for a container that manages a row of chips (see {@link ChipInput}).\n   * A chip with no `href`/`onClick` is inert and unfocusable by default; give it a\n   * `tabIndex` and a `role` and it becomes the thing arrow keys move between.\n   */\n  tabIndex?: number;\n  role?: string;\n  onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;\n  onFocus?: () => void;\n  /** Accessible name, when the visible text is not the whole story. */\n  \"aria-label\"?: string;\n  /** Escape hatch for a test id, a `data-tour` anchor, or an `aria-describedby`. */\n  [key: `data-${string}`]: unknown;\n}\n\n/**\n * Note on `onRemove` with `href`/`onClick`: a button cannot be nested inside a button or\n * a link, so when both are present the chip renders a wrapper holding TWO siblings — the\n * interactive body and the dismiss control. That is why the outer element is not always\n * the interactive one, and why the focus ring is drawn on the body rather than the\n * wrapper.\n */\nexport const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(\n  {\n    children,\n    tone = \"neutral\",\n    size = \"md\",\n    icon: Icon,\n    selected = false,\n    href,\n    onClick,\n    onRemove,\n    removeLabel,\n    disabled = false,\n    className,\n    tabIndex,\n    role,\n    onKeyDown,\n    onFocus,\n    ...rest\n  },\n  ref,\n) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { remove: removeLabel });\n  const s = SIZE[size];\n  const palette = TONE[tone];\n  const interactive = !!href || !!onClick;\n  const look = cn(\n    CHIP_BASE,\n    s.body,\n    selected ? palette.selected : palette.idle,\n    interactive && !disabled && \"cursor-pointer hover:brightness-[0.97] dark:hover:brightness-110\",\n    disabled && \"cursor-default opacity-50\",\n    className,\n  );\n\n  const body = (\n    <>\n      {Icon && <Icon className={cn(s.icon, \"shrink-0\")} aria-hidden />}\n      <span className=\"min-w-0 truncate\">{children}</span>\n    </>\n  );\n\n  const remove = onRemove ? (\n    <button\n      type=\"button\"\n      // The name carries WHAT is being removed, not just \"Remove\" — a screen-reader user\n      // tabbing a row of eight dismiss buttons otherwise hears the same word eight times\n      // with no way to tell which one they are on.\n      // Composed through `common.fieldValue` because the punctuation between the two\n      // halves is the language's, not ours. A chip whose content is not plain text\n      // has no value to name, and gets the bare verb rather than a dangling colon.\n      aria-label={\n        typeof children === \"string\" && children\n          ? common.fieldValue(common.remove, children)\n          : common.remove\n      }\n      onClick={(e) => {\n        // The chip may itself be a link; removing it must not also follow it.\n        e.preventDefault();\n        e.stopPropagation();\n        onRemove();\n      }}\n      disabled={disabled}\n      className={cn(\n        \"-mr-0.5 ml-0.5 shrink-0 rounded-full p-0.5 transition-colors\",\n        \"hover:bg-[var(--bg-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n        disabled && \"pointer-events-none\",\n      )}\n    >\n      <X className={s.remove} aria-hidden />\n    </button>\n  ) : null;\n\n  // ── The three shapes.\n  if (href && !disabled) {\n    const link = (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        href={href}\n        aria-current={selected ? \"true\" : undefined}\n        className={cn(look, remove && \"pr-1.5\")}\n        {...rest}\n      >\n        {body}\n        {!remove && null}\n      </a>\n    );\n    return remove ? (\n      <span className=\"inline-flex items-center\">\n        {link}\n        {remove}\n      </span>\n    ) : (\n      link\n    );\n  }\n\n  if (onClick) {\n    const button = (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n        onClick={onClick}\n        disabled={disabled}\n        aria-pressed={selected}\n        className={cn(look, remove && \"pr-1.5\")}\n        {...rest}\n      >\n        {body}\n      </button>\n    );\n    return remove ? (\n      <span className=\"inline-flex items-center\">\n        {button}\n        {remove}\n      </span>\n    ) : (\n      button\n    );\n  }\n\n  return (\n    <span\n      ref={ref as React.Ref<HTMLSpanElement>}\n      className={look}\n      tabIndex={tabIndex}\n      role={role}\n      onKeyDown={onKeyDown}\n      onFocus={onFocus}\n      {...rest}\n    >\n      {body}\n      {remove}\n    </span>\n  );\n});\n\n/* ── ChipInput ────────────────────────────────────────────────────────────── */\n\nexport interface ChipInputLabels {\n  /** Announced after a value is added. Receives the value. */\n  added: (value: string) => string;\n  /** Announced after a value is removed. Receives the value. */\n  removed: (value: string) => string;\n  /** Accessible name for each chip's dismiss button. */\n  remove: string;\n  /** Shown when `max` is reached. Receives the limit. */\n  atLimit: (max: number) => string;\n  /** Shown when a duplicate is rejected. Receives the value. */\n  duplicate: (value: string) => string;\n}\n\nexport const DEFAULT_CHIP_INPUT_LABELS: ChipInputLabels = {\n  added: (v) => `${v} added`,\n  removed: (v) => `${v} removed`,\n  remove: \"Remove\",\n  atLimit: (max) => `Limit of ${max} reached`,\n  duplicate: (v) => `${v} is already in the list`,\n};\n\nexport function resolveChipInputLabels(labels?: Partial<ChipInputLabels>): ChipInputLabels {\n  return labels ? { ...DEFAULT_CHIP_INPUT_LABELS, ...labels } : DEFAULT_CHIP_INPUT_LABELS;\n}\n\n/**\n * `onChange` is the field's own — the whole LIST, not a DOM event — so the wrapper\n * div's `onChange` is omitted rather than shadowed. `placeholder` is likewise this\n * component's, forwarded to the inner `<input>`; the div has none of its own.\n */\nexport interface ChipInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"placeholder\" | \"children\"> {\n  value: string[];\n  onChange: (next: string[]) => void;\n  placeholder?: string;\n  /** Visible label, rendered above the field. Without one, name the field with\n   *  `aria-label`. */\n  label?: string;\n  /**\n   * @deprecated Pass `aria-label` instead — the DOM spelling the rest of this kit\n   * now uses. Still honoured, and still second to `aria-label` when both are given.\n   */\n  ariaLabel?: string;\n  /** Reject or rewrite a value on commit. Return a string to reject WITH that message. */\n  validate?: (raw: string) => string | null;\n  /** Characters that commit the current text, besides Enter. Default: comma. */\n  separators?: string[];\n  allowDuplicates?: boolean;\n  max?: number;\n  tone?: ChipTone;\n  size?: ChipSize;\n  disabled?: boolean;\n  invalid?: boolean;\n  /** Error text. Wires `aria-describedby` and implies `invalid`. */\n  error?: ReactNode;\n  labels?: Partial<ChipInputLabels>;\n  className?: string;\n}\n\n/**\n * A field whose value is a LIST, entered as chips.\n *\n * The keyboard model is the whole component; the pills are the easy part. Per the WAI\n * pattern for a \"tag\" input:\n *\n *   Enter, or any separator  commit the typed text\n *   Backspace on empty text  move focus to the last chip (does NOT delete it)\n *   ← →  while on a chip     move between chips\n *   Backspace / Delete       remove the focused chip, focus its neighbour\n *   Escape                   clear what is typed but keep the committed chips\n *   paste                    splits on the separators, so a pasted CSV becomes chips\n *\n * The Backspace-on-empty behaviour is the one worth arguing about. Deleting immediately\n * is more common and is a trap: it is a destructive action with no feedback on a key\n * people hit by reflex, and the value it destroys may have taken a while to type. Moving\n * focus first makes the second Backspace a deliberate one, and it is what lets a\n * keyboard user reach a chip at all.\n */\nexport function ChipInput({\n  value,\n  onChange,\n  placeholder,\n  label,\n  ariaLabel,\n  validate,\n  separators = [\",\"],\n  allowDuplicates = false,\n  max,\n  tone = \"neutral\",\n  size = \"md\",\n  disabled = false,\n  invalid = false,\n  error,\n  labels,\n  className,\n  \"aria-label\": ariaLabelAttr,\n  ...rest\n}: ChipInputProps) {\n  // `labels` over the provider's `chipInput` over English — the same order\n  // `resolveChipInputLabels` gives outside a provider.\n  const text = useKitLabels(\"chipInput\", DEFAULT_CHIP_INPUT_LABELS, labels);\n  // A batch of pasted values is announced as one list, joined the way the language\n  // joins a list in a sentence (\"a, b and c added\") — hence the long conjunction,\n  // where a trigger's summary would use the narrow one.\n  const locale = useKitLocale();\n  const [draft, setDraft] = useState(\"\");\n  const [message, setMessage] = useState(\"\");\n  const [focusedChip, setFocusedChip] = useState<number | null>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const chipRefs = useRef<Array<HTMLElement | null>>([]);\n  const id = useId();\n  const listId = `${id}-list`;\n  const errorId = `${id}-error`;\n  const isInvalid = invalid || !!error;\n\n  const focusChip = (index: number | null) => {\n    setFocusedChip(index);\n    if (index === null) inputRef.current?.focus();\n    else chipRefs.current[index]?.focus();\n  };\n\n  /**\n   * Try to add every candidate, as ONE change.\n   *\n   * Batched rather than looped for a reason that bites immediately: `commit` closes over\n   * `value`, so calling it once per pasted item makes every call compute its result from\n   * the list as it was BEFORE the paste, and each `onChange` overwrites the last. A\n   * pasted \"one,two,three\" left only \"three\". Accumulating locally and emitting once is\n   * also the correct behaviour for an undo stack — a paste is one action.\n   */\n  const commitMany = (raws: string[]): { added: string[]; rejection: string | null } => {\n    const next = [...value];\n    const added: string[] = [];\n    let rejection: string | null = null;\n\n    for (const raw of raws) {\n      const candidate = raw.trim();\n      if (!candidate) continue;\n      if (max !== undefined && next.length >= max) {\n        rejection ??= text.atLimit(max);\n        break;\n      }\n      if (!allowDuplicates && next.includes(candidate)) {\n        rejection ??= text.duplicate(candidate);\n        continue;\n      }\n      const invalidReason = validate?.(candidate);\n      if (invalidReason) {\n        rejection ??= invalidReason;\n        continue;\n      }\n      next.push(candidate);\n      added.push(candidate);\n    }\n\n    if (added.length) onChange(next);\n    // A rejection is the more useful thing to say: \"three added\" is obvious from the\n    // chips appearing, whereas \"already in the list\" is the only sign of what did not.\n    const addedList = new Intl.ListFormat(locale, { type: \"conjunction\", style: \"long\" });\n    setMessage(rejection ?? (added.length ? text.added(addedList.format(added)) : \"\"));\n    return { added, rejection };\n  };\n\n  const commit = (raw: string): boolean => commitMany([raw]).added.length > 0;\n\n  const removeAt = (index: number) => {\n    const removed = value[index];\n    onChange(value.filter((_, i) => i !== index));\n    setMessage(text.removed(removed));\n    // Focus the neighbour that takes its place, or the input when the list empties —\n    // dropping focus to <body> here is how a keyboard user loses the field entirely.\n    const next = index >= value.length - 1 ? null : index;\n    requestAnimationFrame(() => focusChip(value.length - 1 === 0 ? null : next));\n  };\n\n  const onInputKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") {\n      // Only when there is something to commit: an empty Enter belongs to the form.\n      if (draft.trim()) {\n        e.preventDefault();\n        if (commit(draft)) setDraft(\"\");\n      }\n      return;\n    }\n    if (separators.includes(e.key)) {\n      e.preventDefault();\n      if (commit(draft)) setDraft(\"\");\n      return;\n    }\n    if (e.key === \"Escape\" && draft) {\n      e.preventDefault();\n      setDraft(\"\");\n      return;\n    }\n    if (e.key === \"Backspace\" && !draft && value.length) {\n      e.preventDefault();\n      focusChip(value.length - 1);\n    }\n  };\n\n  const onChipKeyDown = (e: KeyboardEvent<HTMLElement>, index: number) => {\n    if (e.key === \"Backspace\" || e.key === \"Delete\") {\n      e.preventDefault();\n      removeAt(index);\n      return;\n    }\n    if (e.key === \"ArrowLeft\" && index > 0) {\n      e.preventDefault();\n      focusChip(index - 1);\n      return;\n    }\n    if (e.key === \"ArrowRight\") {\n      e.preventDefault();\n      focusChip(index === value.length - 1 ? null : index + 1);\n      return;\n    }\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      focusChip(null);\n    }\n  };\n\n  return (\n    // The rest lands on the OUTER box — the thing a `data-tour` step or a test id\n    // wants to point at — while the accessible name below goes on the `<input>`,\n    // because that is what a screen-reader user actually lands in. Spreading the two\n    // to the same element would have named a decorative wrapper and left the field\n    // anonymous.\n    <div {...rest} className={cn(\"space-y-1\", className)}>\n      {label && (\n        <label htmlFor={`${id}-input`} className=\"block text-sm text-[var(--text-secondary)]\">\n          {label}\n        </label>\n      )}\n      <div\n        // `relative` so the live region below can be `sr-only` without escaping to the\n        // initial containing block and inflating the document height.\n        className={cn(\n          \"relative flex flex-wrap items-center gap-1.5 rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 shadow-sm\",\n          \"focus-within:border-[var(--brand)] focus-within:ring-1 focus-within:ring-[var(--brand)]\",\n          disabled && \"cursor-default bg-[var(--bg-surface-2)]\",\n          isInvalid && FIELD_INVALID,\n        )}\n        onClick={() => !disabled && inputRef.current?.focus()}\n      >\n        {/* `display: contents` on the wrappers so the chips participate in the field's\n            own flex wrap rather than forming a nested row. The list semantics are\n            restored with explicit roles, because `contents` removes the ul/li boxes from\n            the accessibility tree in several engines. */}\n        {/* eslint-disable-next-line jsx-a11y/no-redundant-roles -- NOT redundant here: the\n            `contents` display below removes the ul and li boxes from the box tree, and\n            several engines drop the list semantics with them. The explicit role is what\n            puts \"list, 3 items\" back. */}\n        <ul id={listId} role=\"list\" className=\"contents\">\n          {value.map((v, i) => (\n            <li key={`${v}-${i}`} role=\"presentation\" className=\"contents\">\n              <Chip\n                ref={(el: HTMLElement | null) => {\n                  chipRefs.current[i] = el;\n                }}\n                tone={tone}\n                size={size}\n                disabled={disabled}\n                removeLabel={text.remove}\n                onRemove={disabled ? undefined : () => removeAt(i)}\n                // A ROVING tabIndex: only the focused chip is tabbable, so Tab leaves\n                // the field instead of walking through every value in it — the reason a\n                // list of twenty tags is otherwise a twenty-stop detour for a keyboard.\n                tabIndex={focusedChip === i ? 0 : -1}\n                role=\"listitem\"\n                aria-label={v}\n                onKeyDown={(e) => onChipKeyDown(e, i)}\n                onFocus={() => setFocusedChip(i)}\n                data-chip-index={i}\n              >\n                {v}\n              </Chip>\n            </li>\n          ))}\n        </ul>\n        <input\n          id={`${id}-input`}\n          ref={inputRef}\n          value={draft}\n          onChange={(e) => {\n            setDraft(e.target.value);\n            setMessage(\"\");\n          }}\n          onKeyDown={onInputKeyDown}\n          onBlur={() => {\n            // Commit on blur: a value typed and then clicked away from is a value the\n            // user meant to add, and losing it silently is the commonest complaint\n            // about this pattern.\n            if (draft.trim() && commit(draft)) setDraft(\"\");\n          }}\n          onPaste={(e) => {\n            const pasted = e.clipboardData.getData(\"text\");\n            const pattern = new RegExp(`[${separators.map((s) => `\\\\${s}`).join(\"\")}\\n\\r]`);\n            if (!pattern.test(pasted)) return;\n            e.preventDefault();\n            if (commitMany(pasted.split(pattern)).added.length) setDraft(\"\");\n          }}\n          placeholder={value.length ? undefined : placeholder}\n          disabled={disabled}\n          // A visible `label` is already wired through `htmlFor`, so adding a name\n          // here would give the field two. Failing that, the DOM spelling wins and\n          // the deprecated `ariaLabel` is the fallback.\n          aria-label={label ? undefined : (ariaLabelAttr ?? ariaLabel)}\n          aria-describedby={error ? errorId : undefined}\n          aria-invalid={isInvalid || undefined}\n          className=\"min-w-[6rem] flex-1 bg-transparent py-0.5 text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-placeholder)] disabled:cursor-default\"\n        />\n        {/* Additions, removals and rejections move no focus, so nothing would announce\n            them. `sr-only-fixed` rather than `sr-only`: this sits inside a consumer's\n            markup and must not extend the document height. */}\n        <span role=\"status\" aria-live=\"polite\" aria-atomic className=\"sr-only-fixed\">\n          {message}\n        </span>\n      </div>\n      {error && (\n        <p id={errorId} className=\"text-xs text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["Chip"]}

package/dist/components/choice-parts.d.ts

@@ -0,0 +1,24 @@
+import { Ref, ReactNode } from 'react';
+
+/**
+ * Small pieces the native choice controls (`Checkbox`, `Switch`) share. Private to
+ * the package — not re-exported from the barrel.
+ *
+ * `mergeDescribedBy` and `hasMessage` restate two rules ui.tsx's `useFieldError`
+ * keeps for Input/Select/Textarea; that hook is module-private and shaped around a
+ * single error node, while these controls also describe themselves with a
+ * `description`, so they compose the ids themselves under the same rules.
+ */
+/** Ids to describe the control by, merged in reading order: whatever the caller
+ *  already pointed at (standing advice), then the description, then the error (the
+ *  news). Merge, never replace — the rule ui.tsx's `useFieldError` keeps for Input.
+ *  An empty list is `undefined`, never `""`: a dangling attribute describes the
+ *  control as nothing at all. */
+declare function mergeDescribedBy(...ids: Array<string | false | null | undefined>): string | undefined;
+/** `null`, `false` and `""` are what `touched && errors.x` evaluates to on the happy
+ *  path. None of them is a message. */
+declare function hasMessage(node: ReactNode): boolean;
+/** Point a forwarded ref and a local one at the same node. */
+declare function assignRef<T>(ref: Ref<T> | undefined, node: T | null): void;
+
+export { assignRef, hasMessage, mergeDescribedBy };

package/dist/components/choice-parts.js

@@ -0,0 +1,18 @@
+"use client";
+function mergeDescribedBy(...ids) {
+  const list = ids.filter(Boolean);
+  return list.length ? list.join(" ") : void 0;
+}
+function hasMessage(node) {
+  return node !== void 0 && node !== null && node !== false && node !== "";
+}
+function assignRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+export {
+  assignRef,
+  hasMessage,
+  mergeDescribedBy
+};
+//# sourceMappingURL=choice-parts.js.map

package/dist/components/choice-parts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/choice-parts.ts"],"sourcesContent":["import type { ReactNode, Ref } from \"react\";\n\n/**\n * Small pieces the native choice controls (`Checkbox`, `Switch`) share. Private to\n * the package — not re-exported from the barrel.\n *\n * `mergeDescribedBy` and `hasMessage` restate two rules ui.tsx's `useFieldError`\n * keeps for Input/Select/Textarea; that hook is module-private and shaped around a\n * single error node, while these controls also describe themselves with a\n * `description`, so they compose the ids themselves under the same rules.\n */\n\n/** Ids to describe the control by, merged in reading order: whatever the caller\n *  already pointed at (standing advice), then the description, then the error (the\n *  news). Merge, never replace — the rule ui.tsx's `useFieldError` keeps for Input.\n *  An empty list is `undefined`, never `\"\"`: a dangling attribute describes the\n *  control as nothing at all. */\nexport function mergeDescribedBy(...ids: Array<string | false | null | undefined>): string | undefined {\n  const list = ids.filter(Boolean);\n  return list.length ? list.join(\" \") : undefined;\n}\n\n/** `null`, `false` and `\"\"` are what `touched && errors.x` evaluates to on the happy\n *  path. None of them is a message. */\nexport function hasMessage(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== \"\";\n}\n\n/** Point a forwarded ref and a local one at the same node. */\nexport function assignRef<T>(ref: Ref<T> | undefined, node: T | null) {\n  if (typeof ref === \"function\") ref(node);\n  else if (ref) (ref as { current: T | null }).current = node;\n}\n"],"mappings":";AAiBO,SAAS,oBAAoB,KAAmE;AACrG,QAAM,OAAO,IAAI,OAAO,OAAO;AAC/B,SAAO,KAAK,SAAS,KAAK,KAAK,GAAG,IAAI;AACxC;AAIO,SAAS,WAAW,MAA0B;AACnD,SAAO,SAAS,UAAa,SAAS,QAAQ,SAAS,SAAS,SAAS;AAC3E;AAGO,SAAS,UAAa,KAAyB,MAAgB;AACpE,MAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,WAC9B,IAAK,CAAC,IAA8B,UAAU;AACzD;","names":[]}

package/dist/components/combobox-core.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, RefObject, Dispatch, SetStateAction } from 'react';
+import { ReactNode, RefObject, Dispatch, SetStateAction, ComponentPropsWithoutRef } from 'react';
 import { AnchorRect } from '../hooks/use-anchored-rect.js';
 import { AnchoredPanel } from '../hooks/use-anchored-panel.js';
 
@@ -42,6 +42,9 @@ interface ComboboxCore<V extends string | number> {
     placement: AnchoredPanel;
     cacheRef: RefObject<Map<V, ComboOption<V>>>;
     resolve: (v: V) => ComboOption<V> | null;
+    /** Close and hand focus back to the trigger — the keyboard paths only. See
+     *  {@link useDropdown} for why a pointer dismissal must not do this. */
+    closeToTrigger: () => void;
 }
 /**
  * Shared plumbing for the entity pickers: open/query/active state, portalled
@@ -53,15 +56,28 @@ interface ComboboxCore<V extends string | number> {
  */
 declare function useComboboxCore<V extends string | number>({ options, loadOptions, loading, }: ComboboxCoreOptions<V>): ComboboxCore<V>;
 /**
- * The portalled dropdown (search header + result rows + optional create row)
- * shared by the single- and multi-value comboboxes. Left-aligned to the trigger
- * and sized to its width; `multi` swaps the trailing check for a leading
- * checkbox. `onChoose` decides whether to close (single) or stay open (multi).
+ * Keep the option the keyboard is on inside the visible part of the list.
+ *
+ * `aria-activedescendant` moves a highlight WITHOUT moving focus, which is the whole
+ * point of it — and the cost is that the browser scrolls nothing on its own. In a
+ * panel capped at a few hundred pixels over an account list two hundred long, Down
+ * walked the highlight straight out of the box and the list sat still.
+ *
+ * Optional-called because jsdom does not implement `scrollIntoView`: three consumers
+ * run this component in their own suites, and a picker that throws there is a worse
+ * trade than a list that does not scroll in a test.
  */
-declare function ComboboxPanel<V extends string | number>({ core, searchPlaceholder, emptyLabel, multi, isSelected, onChoose, showCreate, onCreate, createContent, sheetTitle, closeLabel, }: {
+declare function useActiveOptionScroll(activeId: string | undefined): void;
+interface ComboboxPanelProps<V extends string | number> extends ComponentPropsWithoutRef<"div"> {
     core: ComboboxCore<V>;
+    /** What the trigger's `aria-controls` names. Owned by the component that renders
+     *  the trigger, not by the core: one id has to reach both, and only one of them
+     *  can be the origin. */
+    listboxId: string;
+    /** Default: `combobox.search` from the {@link UiKitProvider}, else English. */
     searchPlaceholder?: string;
-    emptyLabel: string;
+    /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */
+    emptyLabel?: string;
     multi?: boolean;
     isSelected: (v: V) => boolean;
     onChoose: (o: ComboOption<V>) => void;
@@ -72,6 +88,33 @@ declare function ComboboxPanel<V extends string | number>({ core, searchPlacehol
      *  desktop, where the panel sits under the field that already says it. */
     sheetTitle?: ReactNode;
     closeLabel?: string;
-}): react.JSX.Element | null;
+}
+/**
+ * The portalled dropdown (search header + result rows + optional create row)
+ * shared by the single- and multi-value comboboxes. Left-aligned to the trigger
+ * and sized to its width; `multi` swaps the trailing check for a leading
+ * checkbox. `onChoose` decides whether to close (single) or stay open (multi).
+ *
+ * ## The ARIA, which is `CommandPalette`'s
+ *
+ * This rendered a `role="listbox"` of `role="option"` rows and stopped there, so a
+ * reader was handed a text box and silence: the highlight the arrow keys move lived
+ * only in a background colour, and nothing tied the box being typed in to the list
+ * being filtered. `CommandPalette` has had the whole model since it was written —
+ * `aria-controls` from the field to the list, `aria-activedescendant` naming the row
+ * the keyboard is on — and it was the only thing in the package that did.
+ *
+ * Two distinct states, deliberately not conflated:
+ *   - `aria-selected` is CHOSEN. It is the check mark, and in `multi` the checkbox.
+ *   - `aria-activedescendant` is where the KEYBOARD is. Announcing that as selected
+ *     would tell a reader that the row they are merely passing over is the answer.
+ *
+ * `role="option"` sits on the `<button>`, not on the `<li>` around it, for the same
+ * reason it does in `CommandPalette`: an option may not contain a separately
+ * focusable control, and the button is the thing a pointer presses. The rows are
+ * `tabIndex={-1}` because focus never leaves the search box — that is what
+ * `aria-activedescendant` is FOR.
+ */
+declare function ComboboxPanel<V extends string | number>({ core, listboxId, searchPlaceholder, emptyLabel, multi, isSelected, onChoose, showCreate, onCreate, createContent, sheetTitle, closeLabel, className, style, ...rest }: ComboboxPanelProps<V>): react.JSX.Element | null;
 
-export { type ComboOption, type ComboboxCore, type ComboboxCoreOptions, ComboboxPanel, useComboboxCore };
+export { type ComboOption, type ComboboxCore, type ComboboxCoreOptions, ComboboxPanel, type ComboboxPanelProps, useActiveOptionScroll, useComboboxCore };