@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/components/checkbox.js

@@ -1,23 +1,26 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useContext, useEffect, useId, useRef } from "react";
+import { useCallback, useContext, useEffect, useId, useRef } from "react";
 import { Check, Minus } from "lucide-react";
 import { cn } from "../lib/cn.js";
-import { assignRef, hasMessage, mergeDescribedBy } from "./choice-parts.js";
+import { hasContent } from "../lib/presence.js";
 import {
+  assignRef,
   DISABLED_REASON_LINE_CLASS,
+  FIELD_ERROR_CLASS,
   LockedReason,
+  mergeDescribedBy,
   RequiredStarOnLegend,
   useDisabledReasonLine,
   useLockReason
 } from "./field-parts.js";
 import { FOCUS_RING } from "./focus-ring.js";
-const BOX = `peer size-4 shrink-0 cursor-pointer appearance-none rounded border border-[var(--border-strong)] bg-[var(--bg-surface)] shadow-sm transition-colors checked:border-[var(--brand)] checked:bg-[var(--brand)] focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)] disabled:cursor-not-allowed`;
+const BOX = `peer size-4 shrink-0 cursor-pointer appearance-none rounded border border-strong bg-surface shadow-sm transition-colors checked:border-brand checked:bg-brand focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-1 focus-visible:ring-offset-surface disabled:cursor-not-allowed`;
 const LABEL_TOUCH_LARGE = "large:relative large:after:absolute large:after:-start-6 large:after:end-0 large:after:-inset-y-[max(0px,calc((48px-100%)/2))] large:after:content-['']";
-const BOX_MIXED = "border-[var(--brand)] bg-[var(--brand)]";
-const BOX_INVALID = "border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] checked:border-[var(--danger-border-strong)] focus-visible:ring-[var(--danger)]";
-const ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
-const Checkbox = forwardRef(function Checkbox2({
+const BOX_MIXED = "border-brand bg-brand";
+const BOX_INVALID = "border-danger-strong ring-1 ring-danger-strong checked:border-danger-strong focus-visible:ring-[var(--danger)]";
+function Checkbox({
+  ref,
   label,
   description,
   indeterminate = false,
@@ -35,7 +38,7 @@ const Checkbox = forwardRef(function Checkbox2({
   commit,
   onClick,
   ...rest
-}, ref) {
+}) {
   const generated = useId();
   const inputId = id ?? generated;
   const lock = useLockReason(commit, disabledReason);
@@ -45,8 +48,8 @@ const Checkbox = forwardRef(function Checkbox2({
   const starOnLegend = useContext(RequiredStarOnLegend);
   const descriptionId = `${inputId}-description`;
   const errorId = `${inputId}-error`;
-  const showError = hasMessage(error);
-  const showDescription = hasMessage(description);
+  const showError = hasContent(error);
+  const showDescription = hasContent(description);
   const isInvalid = Boolean(invalid) || showError;
   const bare = label === void 0 && !showDescription && !showError;
   const local = useRef(null);
@@ -102,14 +105,14 @@ const Checkbox = forwardRef(function Checkbox2({
       {
         "aria-hidden": true,
         strokeWidth: 3,
-        className: "pointer-events-none absolute inset-0 m-auto size-3 text-[var(--brand-contrast)]"
+        className: "pointer-events-none absolute inset-0 m-auto size-3 text-brand-contrast"
       }
     ) : /* @__PURE__ */ jsx(
       Check,
       {
         "aria-hidden": true,
         strokeWidth: 3,
-        className: "pointer-events-none invisible absolute inset-0 m-auto size-3 text-[var(--brand-contrast)] peer-checked:visible"
+        className: "pointer-events-none invisible absolute inset-0 m-auto size-3 text-brand-contrast peer-checked:visible"
       }
     )
   ] });
@@ -138,7 +141,7 @@ const Checkbox = forwardRef(function Checkbox2({
             {
               htmlFor: inputId,
               className: cn(
-                "block text-sm leading-5 text-[var(--text-primary)]",
+                "block text-sm leading-5 text-primary",
                 // `select-none`: a double-click to toggle twice would otherwise select the
                 // words, and a drag that starts on them starts a native text drag.
                 looksDisabled ? "cursor-not-allowed" : "cursor-pointer select-none",
@@ -147,19 +150,18 @@ const Checkbox = forwardRef(function Checkbox2({
               ),
               children: [
                 label,
-                required && !starOnLegend && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ms-0.5 text-[var(--danger)]", children: "*" })
+                required && !starOnLegend && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ms-0.5 text-danger", children: "*" })
               ]
             }
           ),
-          showDescription && /* @__PURE__ */ jsx("span", { id: descriptionId, className: cn("mt-0.5 block text-xs text-[var(--text-muted)]", dimParts && "opacity-60"), children: description }),
+          showDescription && /* @__PURE__ */ jsx("span", { id: descriptionId, className: cn("mt-0.5 block text-xs text-muted", dimParts && "opacity-60"), children: description }),
           lineInWords && /* @__PURE__ */ jsx("span", { id: lock.reasonId, className: DISABLED_REASON_LINE_CLASS, children: lock.reason }),
-          showError && /* @__PURE__ */ jsx("span", { id: errorId, className: cn("block", ERROR_CLASS), children: error })
+          showError && /* @__PURE__ */ jsx("span", { id: errorId, className: cn("block", FIELD_ERROR_CLASS), children: error })
         ] })
       ]
     }
   );
-});
-Checkbox.displayName = "Checkbox";
+}
 export {
   Checkbox
 };

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useContext, useEffect, useId, useRef } from \"react\";\nimport { Check, Minus } from \"lucide-react\";\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { assignRef, hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport {\n  DISABLED_REASON_LINE_CLASS,\n  LockedReason,\n  RequiredStarOnLegend,\n  useDisabledReasonLine,\n  useLockReason,\n  type DisabledReasonDisplay,\n} from \"./field-parts\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport type { CommitScope } from \"./write-lock\";\n\n/**\n * A checkbox that is still `<input type=\"checkbox\">`.\n *\n * The three consuming apps had three answers: ~30 raw inputs in Keksdose leaning on\n * `tokens.css`'s `accent-color`, a label-plus-box `CheckboxField` in Lenkbank, and a\n * Radix `<button role=\"checkbox\">` in Kastlan. The native element is the one that\n * needs no ARIA to be a checkbox — it submits with its form, answers to `required`,\n * resets with the form and takes a `<label for>` click — so it stays underneath, and\n * only its paint is replaced (`appearance-none`, a token-coloured box, and a glyph\n * laid over it that ignores the pointer so the click still lands on the input).\n *\n * `accent-color` alone was not enough: it tints the native box but cannot change its\n * border, so an INVALID checkbox had no way to say so, and the unchecked box kept the\n * browser's own grey outline in both themes.\n */\n\n// The box. 1rem (16px at Normal), like every raw checkbox it replaces, so a migration\n// moves nothing; its corner `rounded` (0.25rem) rather than a fixed 4px, so it keeps its\n// shape as it grows with the text (0.32, §3.2).\n//\n// The kit's focus frame (§5), with an offset in the surface colour: a --brand ring\n// touching a --brand-filled (checked) box would be a ring painted in the colour it sits\n// on — present in the DOM and invisible on screen. The offset is what separates the two.\nconst BOX =\n  \"peer size-4 shrink-0 cursor-pointer appearance-none rounded border border-[var(--border-strong)] bg-[var(--bg-surface)] shadow-sm transition-colors \" +\n  \"checked:border-[var(--brand)] checked:bg-[var(--brand)] \" +\n  `focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)] ` +\n  \"disabled:cursor-not-allowed\";\n\n/**\n * The 48 px touch target at Large (0.32, §4) for a LABELLED box: the label's own hit\n * area, an invisible `::after` that is part of the `<label>` — so a tap on it ticks the\n * box through `for` — reaching back over the box and its gap (`-start-6`: 1rem + 0.5rem)\n * and out to 48 px tall on a one-line label. It changes no layout; a label already taller\n * than 48 px keeps its own box (`max(0px, …)`). A bare box has no label to grow, and\n * takes its target from where it stands (a table row's tap, the caller's own label).\n */\nconst LABEL_TOUCH_LARGE =\n  \"large:relative large:after:absolute large:after:-start-6 large:after:end-0 \" +\n  \"large:after:-inset-y-[max(0px,calc((48px-100%)/2))] large:after:content-['']\";\n\n// A mixed box wears the checked fill whether or not the underlying input is checked:\n// `indeterminate` is a property the browser keeps separately from `checked`, and the\n// dash means \"some\", which is neither answer.\nconst BOX_MIXED = \"border-[var(--brand)] bg-[var(--brand)]\";\n\n// The same geometry as FIELD_INVALID — a border plus a 1px ring, so the highlight\n// survives fractional display scaling on every edge (see the note in ui.tsx). The\n// focus ring turns danger too, so focusing a wrong box does not repaint it as fine.\nconst BOX_INVALID =\n  \"border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] checked:border-[var(--danger-border-strong)] focus-visible:ring-[var(--danger)]\";\n\nconst ERROR_CLASS = \"mt-1 text-caption leading-tight text-[var(--danger)]\";\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  /**\n   * The words beside the box. Rendered as a `<label for>` rather than a label that\n   * wraps the input, so `description` and `error` can sit under it without becoming\n   * part of the accessible NAME — a wrapping label would have the screen reader read\n   * the whole paragraph as the checkbox's name.\n   */\n  label?: ReactNode;\n  /** Secondary text under the label (\"Used when no account is chosen\"). Pointed at by\n   *  `aria-describedby`, merged with any the caller passed. Kastlan's\n   *  `CheckboxField` `description` variant. */\n  description?: ReactNode;\n  /**\n   * \"Some but not all\" — the header box of a list whose rows are partly selected.\n   * A DOM property with no HTML attribute, so it is set on the element after every\n   * render; it does not touch `checked`, and a click clears it (the browser's rule,\n   * and the caller's `onChange` decides what the click means).\n   */\n  indeterminate?: boolean;\n  /** See {@link Input}'s `invalid`: paints the box and sets `aria-invalid` together,\n   *  so the two cannot be spelled separately. */\n  invalid?: boolean;\n  /** What is wrong, in the caller's words (\"Accept the terms to continue\"). Rendered\n   *  under the label, attached with `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /** The checked state as a boolean — the `(next) => …` shape Lenkbank's\n   *  `CheckboxField` and Radix's `onCheckedChange` both used, so a migration does not\n   *  have to unwrap `event.target.checked` at every call site. Fires alongside\n   *  `onChange`, never instead of it. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>` itself. `className` styles the OUTERMOST element —\n   *  the row when there is a label, the box's own wrapper when there is not — which\n   *  is where layout (`self-end pb-2` to sit on a field's baseline) belongs. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit — a consent, an acceptance before paying. Reaches the\n   * `<input>` as the native `required` (so a `<form>` refuses to submit without it and a\n   * screen reader announces \"required\"), and draws the kit's required mark after the\n   * label, the same `aria-hidden` star as {@link Label}'s: the word is announced from\n   * the control, so a star inside the name would only be read out as noise. Write the\n   * label WITHOUT a literal \"*\". No mark without a label.\n   */\n  required?: boolean;\n  /**\n   * Why the box cannot be changed — {@link Button}'s `disabledReason`, for a checkbox\n   * that SAVES on change (keksdose K3: a setting ticked straight into the server, kept\n   * behind a hand-rolled `SaveGuard` that forced a native `disabled` — out of the tab\n   * order, so the reason never reached a keyboard).\n   *\n   * With a reason the box is `aria-disabled` instead: still focusable, a click or Space\n   * changes nothing and fires no `onChange` / `onCheckedChange`, the reason is in the\n   * kit {@link Tooltip} on the box and on its `aria-describedby`, and the row fades as a\n   * disabled one does. It wins over `disabled`. Changing the lock mounts the box anew (it\n   * moves in or out of the Tooltip), as a locked Button is.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where `disabledReason` shows (0.32, §4 \"No fact only in a tooltip\"): by default, at\n   * Large and on a touch screen, as a line under the label (a bare box: under the box),\n   * and in the tooltip otherwise. See {@link DisabledReasonDisplay}.\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This box COMMITS — ticking it saves. Under a locked {@link WriteLockProvider} it is\n   * locked the `disabledReason` way with the lock's reason (which wins over its own).\n   * No provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3.\n   */\n  commit?: CommitScope;\n}\n\n/**\n * A native checkbox in the kit's tokens, with an optional label, description and\n * error.\n *\n * Without `label`, `description` or `error` it renders the box and nothing else, so\n * it drops into a table cell or a caller's own `<label>` exactly as the raw input\n * did — give it an `aria-label` there. Every other prop reaches the `<input>`\n * (`checked`, `defaultChecked`, `name`, `required`, `data-*`, `aria-*`), so it works\n * controlled, uncontrolled, and inside a plain `<form>`.\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    label,\n    description,\n    indeterminate = false,\n    invalid,\n    error,\n    onCheckedChange,\n    onChange,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    required,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onClick,\n    ...rest\n  },\n  ref,\n) {\n  const generated = useId();\n  const inputId = id ?? generated;\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const reasonLine = useDisabledReasonLine(disabledReasonDisplay);\n  // Locked is disabled the focusable way: the row fades and the words stop inviting a\n  // click exactly as they do for `disabled`.\n  const looksDisabled = Boolean(disabled) || locked;\n  // In a CheckboxGroup the legend carries the star; the box keeps `required` itself.\n  const starOnLegend = useContext(RequiredStarOnLegend);\n  const descriptionId = `${inputId}-description`;\n  const errorId = `${inputId}-error`;\n  const showError = hasMessage(error);\n  const showDescription = hasMessage(description);\n  const isInvalid = Boolean(invalid) || showError;\n  // Nothing to lay out beside the box: render the box alone, as the raw input was.\n  const bare = label === undefined && !showDescription && !showError;\n\n  const local = useRef<HTMLInputElement | null>(null);\n  const setRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      local.current = node;\n      assignRef(ref, node);\n    },\n    [ref],\n  );\n  // After EVERY render, not only when the prop changes: a click clears the property\n  // in the DOM, and a controlled caller that keeps `indeterminate` true expects the\n  // dash back on the next render even though the prop never changed.\n  useEffect(() => {\n    if (local.current) local.current.indeterminate = indeterminate;\n  });\n\n  const control = (\n    <span className={cn(\"relative inline-flex shrink-0\", bare && !locked && className)}>\n      <input\n        ref={setRef}\n        id={bare ? id : inputId}\n        // A reason wins over `disabled`, as on Button: the point of giving one is that\n        // the box stays reachable.\n        disabled={locked ? undefined : disabled}\n        required={required}\n        {...rest}\n        // After the spread, like Switch: a props object spread at a checkbox must not\n        // be able to turn it into something else.\n        type=\"checkbox\"\n        aria-disabled={locked || rest[\"aria-disabled\"] || undefined}\n        // OR-ed with the spread so a caller's own `aria-invalid` survives — Input's rule.\n        aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n        aria-describedby={mergeDescribedBy(\n          rest[\"aria-describedby\"],\n          showDescription && descriptionId,\n          locked && lock.reasonId,\n          showError && errorId,\n        )}\n        // A locked box's click is swallowed, as a locked Button's is.\n        onClick={locked ? undefined : onClick}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          if (locked) {\n            // Put the tick back, and report nothing. Undone here rather than by\n            // cancelling the click: a cancelled click is reverted by the browser AFTER\n            // React has restored a controlled box, and jsdom reverts it by toggling, which\n            // turned a restored tick back over (the suites the apps run would have seen a\n            // locked box change). Setting the property also keeps React's own record of\n            // the value in step, so an uncontrolled box reports its next real change.\n            // Covers a click on the label and Space too — both arrive as a click.\n            e.currentTarget.checked = !e.currentTarget.checked;\n            e.currentTarget.indeterminate = indeterminate;\n            return;\n          }\n          onChange?.(e);\n          onCheckedChange?.(e.target.checked);\n        }}\n        className={cn(\n          BOX,\n          indeterminate && BOX_MIXED,\n          isInvalid && BOX_INVALID,\n          locked && \"cursor-not-allowed\",\n          inputClassName,\n        )}\n      />\n      {/* The glyph is drawn over the box, not inside it (an input has no children),\n          and ignores the pointer so a click on the tick still toggles the input. The\n          tick is shown by `peer-checked`, so an UNCONTROLLED box shows it too; the\n          dash replaces it outright while `indeterminate` holds. */}\n      {indeterminate ? (\n        <Minus\n          aria-hidden\n          strokeWidth={3}\n          className=\"pointer-events-none absolute inset-0 m-auto size-3 text-[var(--brand-contrast)]\"\n        />\n      ) : (\n        <Check\n          aria-hidden\n          strokeWidth={3}\n          className=\"pointer-events-none invisible absolute inset-0 m-auto size-3 text-[var(--brand-contrast)] peer-checked:visible\"\n        />\n      )}\n    </span>\n  );\n  // The reason's Tooltip goes round the BOX, not the row: the row is the caller's\n  // layout (`className`), and a wrapper round it would move that into a span. A bare\n  // box hands its `className` to the wrapper, which is then the outermost element.\n  // With words beside it, the reason LINE goes under them instead (Switch's shape).\n  const lineInWords = locked && reasonLine && !bare;\n  const box =\n    locked && !lineInWords ? (\n      <LockedReason lock={lock} line={reasonLine} className={cn(\"shrink-0\", bare && className)}>\n        {control}\n      </LockedReason>\n    ) : (\n      control\n    );\n  // The row's fade moves onto its parts while the reason line is in it, as on Switch.\n  const dimParts = lineInWords;\n\n  if (bare) return box;\n\n  return (\n    <div\n      className={cn(\n        // `items-start` + a 1.25rem cell for the box: the box centres on the label's FIRST\n        // line (text-sm's line is 1.25rem), so a label that wraps keeps the box at the top\n        // rather than floating to the middle of a paragraph.\n        \"flex items-start gap-2\",\n        // The whole row fades, the way ToggleGroup and the fields do, so the label does\n        // not stay at full strength beside a box you cannot change.\n        looksDisabled && !dimParts && \"opacity-60\",\n        className,\n      )}\n    >\n      <span className={cn(\"flex h-5 shrink-0 items-center\", dimParts && \"opacity-60\")}>{box}</span>\n      <span className=\"min-w-0\">\n        {label !== undefined && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              \"block text-sm leading-5 text-[var(--text-primary)]\",\n              // `select-none`: a double-click to toggle twice would otherwise select the\n              // words, and a drag that starts on them starts a native text drag.\n              looksDisabled ? \"cursor-not-allowed\" : \"cursor-pointer select-none\",\n              LABEL_TOUCH_LARGE,\n              dimParts && \"opacity-60\",\n            )}\n          >\n            {label}\n            {required && !starOnLegend && (\n              <span aria-hidden className=\"ms-0.5 text-[var(--danger)]\">\n                *\n              </span>\n            )}\n          </label>\n        )}\n        {showDescription && (\n          <span id={descriptionId} className={cn(\"mt-0.5 block text-xs text-[var(--text-muted)]\", dimParts && \"opacity-60\")}>\n            {description}\n          </span>\n        )}\n        {lineInWords && (\n          <span id={lock.reasonId} className={DISABLED_REASON_LINE_CLASS}>\n            {lock.reason}\n          </span>\n        )}\n        {showError && (\n          <span id={errorId} className={cn(\"block\", ERROR_CLASS)}>\n            {error}\n          </span>\n        )}\n      </span>\n    </div>\n  );\n});\nCheckbox.displayName = \"Checkbox\";\n"],"mappings":"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","names":["Checkbox"]}
+{"version":3,"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useId, useRef } from \"react\";\nimport { Check, Minus } from \"lucide-react\";\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport {\n  assignRef,\n  DISABLED_REASON_LINE_CLASS,\n  FIELD_ERROR_CLASS,\n  LockedReason,\n  mergeDescribedBy,\n  RequiredStarOnLegend,\n  useDisabledReasonLine,\n  useLockReason,\n  type DisabledReasonDisplay,\n} from \"./field-parts\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport type { CommitScope } from \"./write-lock\";\n\n/**\n * A checkbox that is still `<input type=\"checkbox\">`.\n *\n * The three consuming apps had three answers: ~30 raw inputs in Keksdose leaning on\n * `tokens.css`'s `accent-color`, a label-plus-box `CheckboxField` in Lenkbank, and a\n * Radix `<button role=\"checkbox\">` in Kastlan. The native element is the one that\n * needs no ARIA to be a checkbox — it submits with its form, answers to `required`,\n * resets with the form and takes a `<label for>` click — so it stays underneath, and\n * only its paint is replaced (`appearance-none`, a token-coloured box, and a glyph\n * laid over it that ignores the pointer so the click still lands on the input).\n *\n * `accent-color` alone was not enough: it tints the native box but cannot change its\n * border, so an INVALID checkbox had no way to say so, and the unchecked box kept the\n * browser's own grey outline in both themes.\n */\n\n// The box. 1rem (16px at Normal), like every raw checkbox it replaces, so a migration\n// moves nothing; its corner `rounded` (0.25rem) rather than a fixed 4px, so it keeps its\n// shape as it grows with the text (0.32, §3.2).\n//\n// The kit's focus frame (§5), with an offset in the surface colour: a --brand ring\n// touching a --brand-filled (checked) box would be a ring painted in the colour it sits\n// on — present in the DOM and invisible on screen. The offset is what separates the two.\nconst BOX =\n  \"peer size-4 shrink-0 cursor-pointer appearance-none rounded border border-strong bg-surface shadow-sm transition-colors \" +\n  \"checked:border-brand checked:bg-brand \" +\n  `focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-1 focus-visible:ring-offset-surface ` +\n  \"disabled:cursor-not-allowed\";\n\n/**\n * The 48 px touch target at Large (0.32, §4) for a LABELLED box: the label's own hit\n * area, an invisible `::after` that is part of the `<label>` — so a tap on it ticks the\n * box through `for` — reaching back over the box and its gap (`-start-6`: 1rem + 0.5rem)\n * and out to 48 px tall on a one-line label. It changes no layout; a label already taller\n * than 48 px keeps its own box (`max(0px, …)`). A bare box has no label to grow, and\n * takes its target from where it stands (a table row's tap, the caller's own label).\n */\nconst LABEL_TOUCH_LARGE =\n  \"large:relative large:after:absolute large:after:-start-6 large:after:end-0 \" +\n  \"large:after:-inset-y-[max(0px,calc((48px-100%)/2))] large:after:content-['']\";\n\n// A mixed box wears the checked fill whether or not the underlying input is checked:\n// `indeterminate` is a property the browser keeps separately from `checked`, and the\n// dash means \"some\", which is neither answer.\nconst BOX_MIXED = \"border-brand bg-brand\";\n\n// The same geometry as FIELD_INVALID — a border plus a 1px ring, so the highlight\n// survives fractional display scaling on every edge (see the note on FIELD_BASE in field-base.tsx). The\n// focus ring turns danger too, so focusing a wrong box does not repaint it as fine.\nconst BOX_INVALID =\n  \"border-danger-strong ring-1 ring-danger-strong checked:border-danger-strong focus-visible:ring-[var(--danger)]\";\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  /**\n   * The words beside the box. Rendered as a `<label for>` rather than a label that\n   * wraps the input, so `description` and `error` can sit under it without becoming\n   * part of the accessible NAME — a wrapping label would have the screen reader read\n   * the whole paragraph as the checkbox's name.\n   */\n  label?: ReactNode;\n  /** Secondary text under the label (\"Used when no account is chosen\"). Pointed at by\n   *  `aria-describedby`, merged with any the caller passed. Kastlan's\n   *  `CheckboxField` `description` variant. */\n  description?: ReactNode;\n  /**\n   * \"Some but not all\" — the header box of a list whose rows are partly selected.\n   * A DOM property with no HTML attribute, so it is set on the element after every\n   * render; it does not touch `checked`, and a click clears it (the browser's rule,\n   * and the caller's `onChange` decides what the click means).\n   */\n  indeterminate?: boolean;\n  /** See {@link Input}'s `invalid`: paints the box and sets `aria-invalid` together,\n   *  so the two cannot be spelled separately. */\n  invalid?: boolean;\n  /** What is wrong, in the caller's words (\"Accept the terms to continue\"). Rendered\n   *  under the label, attached with `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /** The checked state as a boolean — the `(next) => …` shape Lenkbank's\n   *  `CheckboxField` and Radix's `onCheckedChange` both used, so a migration does not\n   *  have to unwrap `event.target.checked` at every call site. Fires alongside\n   *  `onChange`, never instead of it. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>` itself. `className` styles the OUTERMOST element —\n   *  the row when there is a label, the box's own wrapper when there is not — which\n   *  is where layout (`self-end pb-2` to sit on a field's baseline) belongs. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit — a consent, an acceptance before paying. Reaches the\n   * `<input>` as the native `required` (so a `<form>` refuses to submit without it and a\n   * screen reader announces \"required\"), and draws the kit's required mark after the\n   * label, the same `aria-hidden` star as {@link Label}'s: the word is announced from\n   * the control, so a star inside the name would only be read out as noise. Write the\n   * label WITHOUT a literal \"*\". No mark without a label.\n   */\n  required?: boolean;\n  /**\n   * Why the box cannot be changed — {@link Button}'s `disabledReason`, for a checkbox\n   * that SAVES on change (keksdose K3: a setting ticked straight into the server, kept\n   * behind a hand-rolled `SaveGuard` that forced a native `disabled` — out of the tab\n   * order, so the reason never reached a keyboard).\n   *\n   * With a reason the box is `aria-disabled` instead: still focusable, a click or Space\n   * changes nothing and fires no `onChange` / `onCheckedChange`, the reason is in the\n   * kit {@link Tooltip} on the box and on its `aria-describedby`, and the row fades as a\n   * disabled one does. It wins over `disabled`. Changing the lock mounts the box anew (it\n   * moves in or out of the Tooltip), as a locked Button is.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where `disabledReason` shows (0.32, §4 \"No fact only in a tooltip\"): by default, at\n   * Large and on a touch screen, as a line under the label (a bare box: under the box),\n   * and in the tooltip otherwise. See {@link DisabledReasonDisplay}.\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This box COMMITS — ticking it saves. Under a locked {@link WriteLockProvider} it is\n   * locked the `disabledReason` way with the lock's reason (which wins over its own).\n   * No provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3.\n   */\n  commit?: CommitScope;\n  /** The `<input type=\"checkbox\">`. A React 19 ref prop since 0.34 (MOD-4, refactor\n   *  audit 2026-10); it was `forwardRef`. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * A native checkbox in the kit's tokens, with an optional label, description and\n * error.\n *\n * Without `label`, `description` or `error` it renders the box and nothing else, so\n * it drops into a table cell or a caller's own `<label>` exactly as the raw input\n * did — give it an `aria-label` there. Every other prop reaches the `<input>`\n * (`checked`, `defaultChecked`, `name`, `required`, `data-*`, `aria-*`), so it works\n * controlled, uncontrolled, and inside a plain `<form>`.\n */\nexport function Checkbox({\n  ref,\n  label,\n  description,\n  indeterminate = false,\n  invalid,\n  error,\n  onCheckedChange,\n  onChange,\n  className,\n  inputClassName,\n  id,\n  disabled,\n  required,\n  disabledReason,\n  disabledReasonDisplay,\n  commit,\n  onClick,\n  ...rest\n}: CheckboxProps) {\n  const generated = useId();\n  const inputId = id ?? generated;\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const reasonLine = useDisabledReasonLine(disabledReasonDisplay);\n  // Locked is disabled the focusable way: the row fades and the words stop inviting a\n  // click exactly as they do for `disabled`.\n  const looksDisabled = Boolean(disabled) || locked;\n  // In a CheckboxGroup the legend carries the star; the box keeps `required` itself.\n  const starOnLegend = useContext(RequiredStarOnLegend);\n  const descriptionId = `${inputId}-description`;\n  const errorId = `${inputId}-error`;\n  const showError = hasContent(error);\n  const showDescription = hasContent(description);\n  const isInvalid = Boolean(invalid) || showError;\n  // Nothing to lay out beside the box: render the box alone, as the raw input was.\n  const bare = label === undefined && !showDescription && !showError;\n\n  const local = useRef<HTMLInputElement | null>(null);\n  const setRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      local.current = node;\n      assignRef(ref, node);\n    },\n    [ref],\n  );\n  // After EVERY render, not only when the prop changes: a click clears the property\n  // in the DOM, and a controlled caller that keeps `indeterminate` true expects the\n  // dash back on the next render even though the prop never changed.\n  useEffect(() => {\n    if (local.current) local.current.indeterminate = indeterminate;\n  });\n\n  const control = (\n    <span className={cn(\"relative inline-flex shrink-0\", bare && !locked && className)}>\n      <input\n        ref={setRef}\n        id={bare ? id : inputId}\n        // A reason wins over `disabled`, as on Button: the point of giving one is that\n        // the box stays reachable.\n        disabled={locked ? undefined : disabled}\n        required={required}\n        {...rest}\n        // After the spread, like Switch: a props object spread at a checkbox must not\n        // be able to turn it into something else.\n        type=\"checkbox\"\n        aria-disabled={locked || rest[\"aria-disabled\"] || undefined}\n        // OR-ed with the spread so a caller's own `aria-invalid` survives — Input's rule.\n        aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n        aria-describedby={mergeDescribedBy(\n          rest[\"aria-describedby\"],\n          showDescription && descriptionId,\n          locked && lock.reasonId,\n          showError && errorId,\n        )}\n        // A locked box's click is swallowed, as a locked Button's is.\n        onClick={locked ? undefined : onClick}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          if (locked) {\n            // Put the tick back, and report nothing. Undone here rather than by\n            // cancelling the click: a cancelled click is reverted by the browser AFTER\n            // React has restored a controlled box, and jsdom reverts it by toggling, which\n            // turned a restored tick back over (the suites the apps run would have seen a\n            // locked box change). Setting the property also keeps React's own record of\n            // the value in step, so an uncontrolled box reports its next real change.\n            // Covers a click on the label and Space too — both arrive as a click.\n            e.currentTarget.checked = !e.currentTarget.checked;\n            e.currentTarget.indeterminate = indeterminate;\n            return;\n          }\n          onChange?.(e);\n          onCheckedChange?.(e.target.checked);\n        }}\n        className={cn(\n          BOX,\n          indeterminate && BOX_MIXED,\n          isInvalid && BOX_INVALID,\n          locked && \"cursor-not-allowed\",\n          inputClassName,\n        )}\n      />\n      {/* The glyph is drawn over the box, not inside it (an input has no children),\n          and ignores the pointer so a click on the tick still toggles the input. The\n          tick is shown by `peer-checked`, so an UNCONTROLLED box shows it too; the\n          dash replaces it outright while `indeterminate` holds. */}\n      {indeterminate ? (\n        <Minus\n          aria-hidden\n          strokeWidth={3}\n          className=\"pointer-events-none absolute inset-0 m-auto size-3 text-brand-contrast\"\n        />\n      ) : (\n        <Check\n          aria-hidden\n          strokeWidth={3}\n          className=\"pointer-events-none invisible absolute inset-0 m-auto size-3 text-brand-contrast peer-checked:visible\"\n        />\n      )}\n    </span>\n  );\n  // The reason's Tooltip goes round the BOX, not the row: the row is the caller's\n  // layout (`className`), and a wrapper round it would move that into a span. A bare\n  // box hands its `className` to the wrapper, which is then the outermost element.\n  // With words beside it, the reason LINE goes under them instead (Switch's shape).\n  const lineInWords = locked && reasonLine && !bare;\n  const box =\n    locked && !lineInWords ? (\n      <LockedReason lock={lock} line={reasonLine} className={cn(\"shrink-0\", bare && className)}>\n        {control}\n      </LockedReason>\n    ) : (\n      control\n    );\n  // The row's fade moves onto its parts while the reason line is in it, as on Switch.\n  const dimParts = lineInWords;\n\n  if (bare) return box;\n\n  return (\n    <div\n      className={cn(\n        // `items-start` + a 1.25rem cell for the box: the box centres on the label's FIRST\n        // line (text-sm's line is 1.25rem), so a label that wraps keeps the box at the top\n        // rather than floating to the middle of a paragraph.\n        \"flex items-start gap-2\",\n        // The whole row fades, the way ToggleGroup and the fields do, so the label does\n        // not stay at full strength beside a box you cannot change.\n        looksDisabled && !dimParts && \"opacity-60\",\n        className,\n      )}\n    >\n      <span className={cn(\"flex h-5 shrink-0 items-center\", dimParts && \"opacity-60\")}>{box}</span>\n      <span className=\"min-w-0\">\n        {label !== undefined && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              \"block text-sm leading-5 text-primary\",\n              // `select-none`: a double-click to toggle twice would otherwise select the\n              // words, and a drag that starts on them starts a native text drag.\n              looksDisabled ? \"cursor-not-allowed\" : \"cursor-pointer select-none\",\n              LABEL_TOUCH_LARGE,\n              dimParts && \"opacity-60\",\n            )}\n          >\n            {label}\n            {required && !starOnLegend && (\n              <span aria-hidden className=\"ms-0.5 text-danger\">\n                *\n              </span>\n            )}\n          </label>\n        )}\n        {showDescription && (\n          <span id={descriptionId} className={cn(\"mt-0.5 block text-xs text-muted\", dimParts && \"opacity-60\")}>\n            {description}\n          </span>\n        )}\n        {lineInWords && (\n          <span id={lock.reasonId} className={DISABLED_REASON_LINE_CLASS}>\n            {lock.reason}\n          </span>\n        )}\n        {showError && (\n          <span id={errorId} className={cn(\"block\", FIELD_ERROR_CLASS)}>\n            {error}\n          </span>\n        )}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/chip-input.d.ts

@@ -0,0 +1,73 @@
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import { DEFAULT_CHIP_INPUT_LABELS } from "./chip-labels.js";
+import { type ChipSize, type ChipTone } from "./chip.js";
+export interface ChipInputLabels {
+    /** Announced after a value is added. Receives the value. */
+    added: (value: string) => string;
+    /** Announced after a value is removed. Receives the value. */
+    removed: (value: string) => string;
+    /** Accessible name for each chip's dismiss button. */
+    remove: string;
+    /** Shown when `max` is reached. Receives the limit. */
+    atLimit: (max: number) => string;
+    /** Shown when a duplicate is rejected. Receives the value. */
+    duplicate: (value: string) => string;
+}
+export { DEFAULT_CHIP_INPUT_LABELS };
+/** @deprecated 0.34 — `useKitLabels("chipInput", DEFAULT_CHIP_INPUT_LABELS, labels)`, which
+ *  the provider reaches too, or ChipInput's own `labels`; removed in 0.35 (refactor audit
+ *  2026-10, API-6a). A merge from before the provider, which no kit component calls. */
+export declare function resolveChipInputLabels(labels?: Partial<ChipInputLabels>): ChipInputLabels;
+/**
+ * `onChange` is the field's own — the whole LIST, not a DOM event — so the wrapper
+ * div's `onChange` is omitted rather than shadowed. `placeholder` is likewise this
+ * component's, forwarded to the inner `<input>`; the div has none of its own.
+ */
+export interface ChipInputProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "placeholder" | "children"> {
+    value: string[];
+    onChange: (next: string[]) => void;
+    placeholder?: string;
+    /** Visible label, rendered above the field: a ReactNode, as on every kit field (a
+     *  string until 0.34, refactor audit 2026-10, API-9). Without one, name the field with
+     *  `aria-label`. */
+    label?: ReactNode;
+    /** Reject or rewrite a value on commit. Return a string to reject WITH that message. */
+    validate?: (raw: string) => string | null;
+    /** Characters that commit the current text, besides Enter. Default: comma. */
+    separators?: string[];
+    allowDuplicates?: boolean;
+    max?: number;
+    tone?: ChipTone;
+    size?: ChipSize;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Error text. Wires `aria-describedby` and implies `invalid`. */
+    error?: ReactNode;
+    labels?: LabelOverride<ChipInputLabels>;
+    className?: string;
+    /** The `<input>` the next value is typed into — the element that takes focus, which
+     *  react-hook-form's focus-on-error calls `focus()` on (API-3, refactor audit 2026-10).
+     *  Not the wrapper, which takes the rest of the props. */
+    ref?: Ref<HTMLInputElement>;
+}
+/**
+ * A field whose value is a LIST, entered as chips.
+ *
+ * The keyboard model is the whole component; the pills are the easy part. Per the WAI
+ * pattern for a "tag" input:
+ *
+ *   Enter, or any separator  commit the typed text
+ *   Backspace on empty text  move focus to the last chip (does NOT delete it)
+ *   ← →  while on a chip     move between chips, in reading order (mirrored in RTL)
+ *   Backspace / Delete       remove the focused chip, focus its neighbour
+ *   Escape                   clear what is typed but keep the committed chips
+ *   paste                    splits on the separators, so a pasted CSV becomes chips
+ *
+ * The Backspace-on-empty behaviour is the one worth arguing about. Deleting immediately
+ * is more common and is a trap: it is a destructive action with no feedback on a key
+ * people hit by reflex, and the value it destroys may have taken a while to type. Moving
+ * focus first makes the second Backspace a deliberate one, and it is what lets a
+ * keyboard user reach a chip at all.
+ */
+export declare function ChipInput({ value, onChange, placeholder, label, validate, separators, allowDuplicates, max, tone, size, disabled, invalid, error, labels, className, "aria-label": ariaLabelAttr, ref, ...rest }: ChipInputProps): import("react").JSX.Element;

package/dist/components/chip-input.js

@@ -0,0 +1,224 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { horizontalStep } from "../lib/direction.js";
+import { isImeEnter } from "../lib/ime.js";
+import { claimEscape } from "../hooks/use-dismiss.js";
+import { FIELD_INVALID, FIELD_TOUCH_TEXT } from "./field-base.js";
+import { FIELD_ERROR_CLASS, mergeRefs } from "./field-parts.js";
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { DEFAULT_CHIP_INPUT_LABELS } from "./chip-labels.js";
+import { Chip } from "./chip.js";
+function resolveChipInputLabels(labels) {
+  return labels ? { ...DEFAULT_CHIP_INPUT_LABELS, ...labels } : DEFAULT_CHIP_INPUT_LABELS;
+}
+function ChipInput({
+  value,
+  onChange,
+  placeholder,
+  label,
+  validate,
+  separators = [","],
+  allowDuplicates = false,
+  max,
+  tone = "neutral",
+  size = "md",
+  disabled = false,
+  invalid = false,
+  error,
+  labels,
+  className,
+  "aria-label": ariaLabelAttr,
+  ref,
+  ...rest
+}) {
+  const text = useKitLabels("chipInput", DEFAULT_CHIP_INPUT_LABELS, labels);
+  const locale = useKitLocale();
+  const [draft, setDraft] = useState("");
+  const [message, setMessage] = useState("");
+  const [rejected, setRejected] = useState(null);
+  const [focusedChip, setFocusedChip] = useState(null);
+  const inputRef = useRef(null);
+  const setInput = useMemo(() => mergeRefs(inputRef, ref), [ref]);
+  const chipRefs = useRef([]);
+  const id = useId();
+  const listId = `${id}-list`;
+  const errorId = `${id}-error`;
+  const rejectedId = `${id}-rejected`;
+  const isInvalid = invalid || !!error;
+  const describedBy = [error ? errorId : null, rejected ? rejectedId : null].filter(Boolean).join(" ");
+  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)) : ""));
+    setRejected(rejection);
+    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));
+    setRejected(null);
+    const next = index >= value.length - 1 ? null : index;
+    requestAnimationFrame(() => focusChip(value.length - 1 === 0 ? null : next));
+  };
+  const onInputKeyDown = (e) => {
+    if (e.key === "Enter") {
+      if (isImeEnter(e)) return;
+      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) {
+      claimEscape(e);
+      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;
+    }
+    const step = horizontalStep(e.key, e.currentTarget);
+    if (step === -1 && index > 0) {
+      e.preventDefault();
+      focusChip(index - 1);
+      return;
+    }
+    if (step === 1) {
+      e.preventDefault();
+      focusChip(index === value.length - 1 ? null : index + 1);
+      return;
+    }
+    if (e.key === "Escape") {
+      claimEscape(e);
+      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-secondary", children: label }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative flex flex-wrap items-center gap-1.5 rounded-md border border-subtle bg-surface px-2 py-1.5 shadow-sm",
+            "focus-within:border-brand focus-within:ring-1 focus-within:ring-brand",
+            disabled && "cursor-default 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: setInput,
+                value: draft,
+                onChange: (e) => {
+                  setDraft(e.target.value);
+                  setMessage("");
+                  setRejected(null);
+                },
+                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,
+                "aria-describedby": describedBy || void 0,
+                "aria-invalid": isInvalid || !!rejected || void 0,
+                className: cn("w-0 min-w-[6rem] flex-1 bg-transparent py-0.5 text-sm text-primary outline-none placeholder:text-placeholder disabled:cursor-default", FIELD_TOUCH_TEXT)
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", "aria-atomic": true, className: "sr-only-fixed", children: message })
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ jsx("p", { id: errorId, className: cn(FIELD_ERROR_CLASS, "mt-0"), children: error }),
+      rejected && /* @__PURE__ */ jsx("p", { id: rejectedId, className: cn(FIELD_ERROR_CLASS, "mt-0"), "data-chip-input-rejected": "", children: rejected })
+    ] })
+  );
+}
+export {
+  ChipInput,
+  DEFAULT_CHIP_INPUT_LABELS,
+  resolveChipInputLabels
+};
+//# sourceMappingURL=chip-input.js.map

package/dist/components/chip-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/chip-input.tsx"],"sourcesContent":["// A field whose value is a list, entered as chips. Moved out of chip.tsx as it was\n// (MOD-9, refactor audit 2026-10). It renders `Chip`, so chip.tsx re-exports only its\n// TYPES: re-exporting `ChipInput` itself would make chip ⇄ chip-input a runtime cycle\n// (check:graph, import-x/no-cycle). The barrel exports this module.\nimport { useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { isImeEnter } from \"../lib/ime\";\nimport { claimEscape } from \"../hooks/use-dismiss\";\nimport { FIELD_INVALID, FIELD_TOUCH_TEXT } from \"./field-base\";\nimport { FIELD_ERROR_CLASS, mergeRefs } from \"./field-parts\";\nimport { useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_CHIP_INPUT_LABELS } from \"./chip-labels\";\nimport { Chip, type ChipSize, type ChipTone } from \"./chip\";\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\n// Defined in ./chip-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_CHIP_INPUT_LABELS };\n\n/** @deprecated 0.34 — `useKitLabels(\"chipInput\", DEFAULT_CHIP_INPUT_LABELS, labels)`, which\n *  the provider reaches too, or ChipInput's own `labels`; removed in 0.35 (refactor audit\n *  2026-10, API-6a). A merge from before the provider, which no kit component calls. */\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: a ReactNode, as on every kit field (a\n   *  string until 0.34, refactor audit 2026-10, API-9). Without one, name the field with\n   *  `aria-label`. */\n  label?: ReactNode;\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?: LabelOverride<ChipInputLabels>;\n  className?: string;\n  /** The `<input>` the next value is typed into — the element that takes focus, which\n   *  react-hook-form's focus-on-error calls `focus()` on (API-3, refactor audit 2026-10).\n   *  Not the wrapper, which takes the rest of the props. */\n  ref?: Ref<HTMLInputElement>;\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, in reading order (mirrored in RTL)\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  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  ref,\n  ...rest\n}: ChipInputProps) {\n  // `labels` over the provider's `chipInput` over English.\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  // The last refusal, shown under the field until the next edit. The live region alone\n  // told only a screen-reader user why Enter did nothing; everyone else saw the text\n  // simply stay put.\n  const [rejected, setRejected] = useState<string | null>(null);\n  const [focusedChip, setFocusedChip] = useState<number | null>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  // The field's own handle on its input (focus after a chip goes) and the caller's `ref`.\n  const setInput = useMemo(() => mergeRefs(inputRef, ref), [ref]);\n  const chipRefs = useRef<Array<HTMLElement | null>>([]);\n  const id = useId();\n  const listId = `${id}-list`;\n  const errorId = `${id}-error`;\n  const rejectedId = `${id}-rejected`;\n  const isInvalid = invalid || !!error;\n  const describedBy = [error ? errorId : null, rejected ? rejectedId : null]\n    .filter(Boolean)\n    .join(\" \");\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    setRejected(rejection);\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    setRejected(null);\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      // The Enter that confirms an IME composition is the IME's: it commits no chip\n      // and submits no form (BUG-9).\n      if (isImeEnter(e)) return;\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    // Clearing the draft is this field's Escape, not a dialog's around it: claimed, so\n    // the dialog stays — the same in a Modal and a FullBleedDialog, which read it\n    // differently until 0.34 (Wave 2, DUP-1). With nothing typed the key goes on.\n    if (e.key === \"Escape\" && draft) {\n      claimEscape(e);\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    // ←/→ follow the reading direction, not DOM order: in RTL the previous chip is to\n    // the RIGHT, and ArrowLeft moves on towards the input.\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step === -1 && index > 0) {\n      e.preventDefault();\n      focusChip(index - 1);\n      return;\n    }\n    if (step === 1) {\n      e.preventDefault();\n      focusChip(index === value.length - 1 ? null : index + 1);\n      return;\n    }\n    // Back to the input, a step inside the field: claimed like the draft's (DUP-1).\n    if (e.key === \"Escape\") {\n      claimEscape(e);\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-secondary\">\n          {label}\n        </label>\n      )}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- a\n          pointer convenience that widens the input's hit area to the whole field; the\n          keyboard path is the <input> itself, which is in the tab order. */}\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-subtle bg-surface px-2 py-1.5 shadow-sm\",\n          \"focus-within:border-brand focus-within:ring-1 focus-within:ring-brand\",\n          disabled && \"cursor-default 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={setInput}\n          value={draft}\n          onChange={(e) => {\n            setDraft(e.target.value);\n            setMessage(\"\");\n            setRejected(null);\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.\n          aria-label={label ? undefined : ariaLabelAttr}\n          aria-describedby={describedBy || undefined}\n          aria-invalid={isInvalid || !!rejected || undefined}\n          // `w-0` with flex-1: without a width the browser's default input size (20\n          // characters) became the field's minimum width and pushed it past a 240 px\n          // phone at 150 % (0.32's screenshot run).\n          className={cn(\"w-0 min-w-[6rem] flex-1 bg-transparent py-0.5 text-sm text-primary outline-none placeholder:text-placeholder disabled:cursor-default\", FIELD_TOUCH_TEXT)}\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      {/* Every field's error type (DUP-8: these were `text-xs`); the root's `space-y-1`\n          spaces them, so not the class's own `mt-1` as well. */}\n      {error && (\n        <p id={errorId} className={cn(FIELD_ERROR_CLASS, \"mt-0\")}>\n          {error}\n        </p>\n      )}\n      {rejected && (\n        <p id={rejectedId} className={cn(FIELD_ERROR_CLASS, \"mt-0\")} data-chip-input-rejected=\"\">\n          {rejected}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/chip-labels.d.ts

@@ -0,0 +1,2 @@
+import type { ChipInputLabels } from "./chip.js";
+export declare const DEFAULT_CHIP_INPUT_LABELS: ChipInputLabels;

package/dist/components/chip-labels.js

@@ -0,0 +1,12 @@
+"use client";
+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`
+};
+export {
+  DEFAULT_CHIP_INPUT_LABELS
+};
+//# sourceMappingURL=chip-labels.js.map

package/dist/components/chip-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/chip-labels.ts"],"sourcesContent":["// The English words of ./chip, in a module with no component code: the English catalogue\n// (src/i18n/defaults.ts) imports them without the component, so `en` loads as one chunk\n// like the other languages (0.34, KS U8). ./chip-input re-exports them.\n\nimport type { ChipInputLabels } from \"./chip\";\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"],"mappings":";AAMO,MAAM,4BAA6C;AAAA,EACxD,OAAO,CAAC,MAAM,GAAG,CAAC;AAAA,EAClB,SAAS,CAAC,MAAM,GAAG,CAAC;AAAA,EACpB,QAAQ;AAAA,EACR,SAAS,CAAC,QAAQ,YAAY,GAAG;AAAA,EACjC,WAAW,CAAC,MAAM,GAAG,CAAC;AACxB;","names":[]}