@eifi1/ui-kit 0.32.2 → 0.33.1

package/dist/components/calculator.d.ts

@@ -1,18 +1,23 @@
 import * as react from 'react';
-import { bP as CalculatorLabels } from '../delete-account-setting-Dy4kJgUm.js';
+import { bP as CalculatorLabels } from '../delete-account-setting-DAgGBrbn.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-kpAAVi6g.js';
+import '../data-table-labels-BJ5JE_X2.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
+import './status-dot.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './stat-tile.js';
+import './chip.js';
+import 'lucide-react';
+import './field-parts.js';
+import './write-lock.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import '../hooks/use-breakpoint.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -24,7 +29,6 @@ import './page-contents.js';
 import './series-chart-labels.js';
 import './pie-chart-labels.js';
 import './sparkline.js';
-import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
 import './swatch-picker.js';
@@ -36,9 +40,6 @@ import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
 import './user-avatar.js';
 import '../lib/person-name.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
 import '../shell/topbar-action-menu.js';
 import './menu-item.js';
 import './floating-panel.js';
@@ -54,7 +55,6 @@ import './error-boundary.js';
 import './authed-image.js';
 import './image-grid.js';
 import './lightbox.js';
-import './write-lock.js';
 import '../auth/sign-in-form.js';
 import '../landing/access.js';
 import '../landing/landing-labels.js';
@@ -81,6 +81,7 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import '../i18n/plurals.js';
 import './appearance-labels.js';
 import '../theme/contrast.js';
 import '../theme/text-size.js';

package/dist/components/calculator.js

@@ -29,8 +29,8 @@ const KEYS = [
   { kind: "ins", label: "+", ins: "+", accent: true, name: "plus" }
 ];
 const KEY_BASE = "flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-[var(--border-strong)]";
-const KEY_DIGIT = "bg-[var(--bg-surface-2)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)]";
-const KEY_ACCENT = "bg-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-surface-2)]";
+const KEY_DIGIT = "bg-surface-2 text-primary hover:bg-active";
+const KEY_ACCENT = "bg-active text-secondary hover:bg-surface-2";
 function seed(initial) {
   const t = initial.trim();
   return t === "-" ? "" : t;
@@ -113,7 +113,7 @@ function CalculatorPanel({
           type: "button",
           "aria-label": labels.clear,
           onClick: clearAll,
-          className: cn(KEY_BASE, "col-span-2 bg-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-surface-2)]"),
+          className: cn(KEY_BASE, "col-span-2", KEY_ACCENT),
           children: "C"
         }
       ),

package/dist/components/calculator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/calculator.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Calculator as CalculatorIcon, Delete } from \"lucide-react\";\nimport { Popover } from \"./popover\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"./ui\";\nimport { evaluateExpression, formatResult, isBareAmount, splitLeadingSign } from \"../lib/calc\";\nimport {\n  DEFAULT_CALCULATOR_LABELS,\n  useKitLabels,\n  type CalculatorLabels,\n} from \"../i18n/kit-labels\";\n\n/** Screen-reader names for the calculator panel's own controls — any part of the\n *  kit's `calculator` namespace. Once three optional keys of its own; widened, not\n *  replaced, so every object that type-checked before still does. */\nexport type CalculatorButtonLabels = Partial<CalculatorLabels>;\n\ninterface CalculatorButtonProps {\n  /** Current field text — seeds the keypad so the user can keep calculating\n   * from what's already entered. */\n  value: string;\n  /**\n   * Called with the evaluated result whenever the running expression resolves\n   * to a number, so the host field tracks the keypad live.\n   *\n   * `expression` is the TEXT that result came out of — `\"-42+50\"` for an 8 — and\n   * is omitted when there was no calculation (a cleared pad). A host that keeps\n   * the sign of its figure OUTSIDE the text (see `AmountInput`'s `negative` /\n   * `onNegativeChange`, where a direction toggle owns it) cannot otherwise tell\n   * that 8 from a freshly typed one: the first is a sum that came out positive\n   * and has to take the direction with it, the second is a magnitude that must\n   * leave the direction alone. Hosts whose text carries its own sign can take\n   * the one argument and ignore this.\n   */\n  onChange: (value: string, expression?: string) => void;\n  className?: string;\n  /** The trigger's accessible name; wins over `calculator.open` from the provider. */\n  ariaLabel?: string;\n  /** Screen-reader names for the panel's own controls. `ariaLabel` above already\n   *  covers the trigger; these three were hardcoded English inside the popover,\n   *  which a translating host had no way to reach. */\n  labels?: CalculatorButtonLabels;\n}\n\n/** Keypad layout (4 columns). The final C/= row is rendered separately. `name` is\n *  the key of the {@link CalculatorLabels} entry that names a non-digit key; a digit\n *  is named by its own glyph. */\ntype Key =\n  | { kind: \"ins\"; label: string; ins: string; accent?: boolean; name?: KeyName }\n  | { kind: \"back\" };\n\ntype KeyName = \"plus\" | \"minus\" | \"times\" | \"divide\" | \"decimal\";\n\nconst KEYS: Key[] = [\n  { kind: \"ins\", label: \"7\", ins: \"7\" },\n  { kind: \"ins\", label: \"8\", ins: \"8\" },\n  { kind: \"ins\", label: \"9\", ins: \"9\" },\n  { kind: \"ins\", label: \"÷\", ins: \"÷\", accent: true, name: \"divide\" },\n  { kind: \"ins\", label: \"4\", ins: \"4\" },\n  { kind: \"ins\", label: \"5\", ins: \"5\" },\n  { kind: \"ins\", label: \"6\", ins: \"6\" },\n  { kind: \"ins\", label: \"×\", ins: \"×\", accent: true, name: \"times\" },\n  { kind: \"ins\", label: \"1\", ins: \"1\" },\n  { kind: \"ins\", label: \"2\", ins: \"2\" },\n  { kind: \"ins\", label: \"3\", ins: \"3\" },\n  { kind: \"ins\", label: \"−\", ins: \"−\", accent: true, name: \"minus\" },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"ins\", label: \".\", ins: \".\", name: \"decimal\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true, name: \"plus\" },\n];\n\nconst KEY_BASE =\n  \"flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-[var(--border-strong)]\";\n// Two key families, two fills: digits sit on the inset surface and darken on\n// hover, operators sit a step down on `--border` and lift toward that surface —\n// the same split `NumberPadSheet` uses for this keypad on a phone. The tokens\n// flip with the theme, so neither needs a `dark:` twin.\nconst KEY_DIGIT =\n  \"bg-[var(--bg-surface-2)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\";\nconst KEY_ACCENT =\n  \"bg-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-surface-2)]\";\n\nfunction seed(initial: string): string {\n  const t = initial.trim();\n  return t === \"-\" ? \"\" : t;\n}\n\nfunction CalculatorPanel({\n  initial,\n  onChange,\n  labels,\n}: {\n  initial: string;\n  onChange: (value: string, expression?: string) => void;\n  labels: CalculatorLabels;\n}) {\n  const [expr, setExpr] = useState(() => seed(initial));\n  const inputRef = useRef<HTMLInputElement>(null);\n  // What the pad SHOWS. Normally the expression it holds — but when the host owns\n  // the sign of the figure, the magnitude it hands back is not the whole number:\n  // type 50 into a pad opened on an outflow and the host answers \"-50\". Derived\n  // rather than stored, so there is no echo to guard against and a host that\n  // ignores `onChange` entirely (a static `value`) still sees its own keystrokes:\n  // the pad only defers when the host's text is character-for-character its own\n  // last number with a minus in front.\n  const host = splitLeadingSign(initial.trim());\n  const text = host.sign === \"-\" && isBareAmount(expr) && host.rest === expr.trim() ? initial.trim() : expr;\n  const result = evaluateExpression(text);\n\n  // Focus the display on open so the user can type or hit Enter immediately.\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  // Update the host field whenever the expression resolves to a number; an\n  // incomplete expression (e.g. \"12+\") simply leaves the field untouched. The\n  // expression rides along with the result — see `onChange` above.\n  const apply = (next: string) => {\n    setExpr(next);\n    const n = evaluateExpression(next);\n    if (n !== null) onChange(formatResult(n), next);\n  };\n\n  const clearAll = () => {\n    setExpr(\"\");\n    onChange(\"\");\n  };\n\n  const equals = () => {\n    if (result === null) return;\n    const out = formatResult(result);\n    setExpr(out);\n    onChange(out, text);\n  };\n\n  return (\n    <div className=\"space-y-2\">\n      <input\n        ref={inputRef}\n        aria-label={labels.calculation}\n        value={text}\n        inputMode=\"decimal\"\n        onChange={(e) => apply(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n            equals();\n          }\n        }}\n        // Arithmetic reads left to right in every script, and a calculator display\n        // is right-aligned in every script too — so both stay physical, pinned\n        // with `dir=\"ltr\"` rather than mirrored in a right-to-left form.\n        dir=\"ltr\"\n        className={cn(\"block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-right font-mono text-sm text-[var(--text-primary)] focus:border-[var(--border-strong)] focus:ring-[var(--border-strong)]\", FIELD_TOUCH_TEXT)}\n      />\n      <div dir=\"ltr\" className=\"h-4 pr-1 text-right font-mono text-xs text-[var(--text-placeholder)]\">\n        {result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : \"\"}\n      </div>\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={labels.backspace}\n              onClick={() => apply(text.slice(0, -1))}\n              className={cn(KEY_BASE, KEY_ACCENT)}\n            >\n              <Delete className=\"size-4\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              aria-label={key.name ? labels[key.name] : undefined}\n              onClick={() => apply(text + key.ins)}\n              className={cn(KEY_BASE, key.accent ? KEY_ACCENT : KEY_DIGIT)}\n            >\n              {key.label}\n            </button>\n          ),\n        )}\n        <button\n          type=\"button\"\n          // \"C\" is a convention, not a name: read aloud it is the letter.\n          aria-label={labels.clear}\n          onClick={clearAll}\n          className={cn(KEY_BASE, \"col-span-2 bg-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-surface-2)]\")}\n        >\n          C\n        </button>\n        <button\n          type=\"button\"\n          aria-label={labels.equals}\n          onClick={equals}\n          className={cn(\n            KEY_BASE,\n            // The one chip that inverts against the page. There is no hover token for\n            // an inverted fill, so the hover is the chip mixed back toward the\n            // surface — a step quieter in either theme, and still a colour, so\n            // KEY_BASE's `transition-colors` carries it.\n            \"col-span-2 bg-[var(--bg-inverse)] text-[var(--text-inverse)] hover:bg-[color-mix(in_oklab,var(--bg-inverse)_88%,var(--bg-surface))]\",\n          )}\n        >\n          =\n        </button>\n      </div>\n    </div>\n  );\n}\n\n/**\n * A calculator icon that opens a small keypad popover anchored to its host\n * field. Designed as a trailing-edge adornment: render it inside the field's\n * `relative` wrapper, positioned absolutely. The keypad seeds from the current\n * field value and writes evaluated results straight back through `onChange`.\n */\nexport function CalculatorButton({\n  value,\n  onChange,\n  className,\n  ariaLabel,\n  labels: labelsProp,\n}: CalculatorButtonProps) {\n  // prop > provider > English, with the older `ariaLabel` prop folded in as the\n  // `open` key it has always been.\n  const fromProps = useMemo(\n    () => (ariaLabel === undefined ? labelsProp : { ...labelsProp, open: ariaLabel }),\n    [ariaLabel, labelsProp],\n  );\n  const labels = useKitLabels(\"calculator\", DEFAULT_CALCULATOR_LABELS, fromProps);\n  return (\n    <Popover\n      width=\"14rem\"\n      labels={{ panel: labels.panel }}\n      trigger={({ open, toggle, ref }) => (\n        <button\n          ref={ref}\n          type=\"button\"\n          tabIndex={-1}\n          onClick={toggle}\n          aria-label={labels.open}\n          aria-expanded={open}\n          className={cn(\n            \"flex items-center justify-center text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)]\",\n            className,\n          )}\n        >\n          <CalculatorIcon className=\"size-4\" />\n        </button>\n      )}\n    >\n      {() => <CalculatorPanel initial={value} onChange={onChange} labels={labels} />}\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/calculator.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Calculator as CalculatorIcon, Delete } from \"lucide-react\";\nimport { Popover } from \"./popover\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"./ui\";\nimport { evaluateExpression, formatResult, isBareAmount, splitLeadingSign } from \"../lib/calc\";\nimport {\n  DEFAULT_CALCULATOR_LABELS,\n  useKitLabels,\n  type CalculatorLabels,\n} from \"../i18n/kit-labels\";\n\n/** Screen-reader names for the calculator panel's own controls — any part of the\n *  kit's `calculator` namespace. Once three optional keys of its own; widened, not\n *  replaced, so every object that type-checked before still does. */\nexport type CalculatorButtonLabels = Partial<CalculatorLabels>;\n\ninterface CalculatorButtonProps {\n  /** Current field text — seeds the keypad so the user can keep calculating\n   * from what's already entered. */\n  value: string;\n  /**\n   * Called with the evaluated result whenever the running expression resolves\n   * to a number, so the host field tracks the keypad live.\n   *\n   * `expression` is the TEXT that result came out of — `\"-42+50\"` for an 8 — and\n   * is omitted when there was no calculation (a cleared pad). A host that keeps\n   * the sign of its figure OUTSIDE the text (see `AmountInput`'s `negative` /\n   * `onNegativeChange`, where a direction toggle owns it) cannot otherwise tell\n   * that 8 from a freshly typed one: the first is a sum that came out positive\n   * and has to take the direction with it, the second is a magnitude that must\n   * leave the direction alone. Hosts whose text carries its own sign can take\n   * the one argument and ignore this.\n   */\n  onChange: (value: string, expression?: string) => void;\n  className?: string;\n  /** The trigger's accessible name; wins over `calculator.open` from the provider. */\n  ariaLabel?: string;\n  /** Screen-reader names for the panel's own controls. `ariaLabel` above already\n   *  covers the trigger; these three were hardcoded English inside the popover,\n   *  which a translating host had no way to reach. */\n  labels?: CalculatorButtonLabels;\n}\n\n/** Keypad layout (4 columns). The final C/= row is rendered separately. `name` is\n *  the key of the {@link CalculatorLabels} entry that names a non-digit key; a digit\n *  is named by its own glyph. */\ntype Key =\n  | { kind: \"ins\"; label: string; ins: string; accent?: boolean; name?: KeyName }\n  | { kind: \"back\" };\n\ntype KeyName = \"plus\" | \"minus\" | \"times\" | \"divide\" | \"decimal\";\n\nconst KEYS: Key[] = [\n  { kind: \"ins\", label: \"7\", ins: \"7\" },\n  { kind: \"ins\", label: \"8\", ins: \"8\" },\n  { kind: \"ins\", label: \"9\", ins: \"9\" },\n  { kind: \"ins\", label: \"÷\", ins: \"÷\", accent: true, name: \"divide\" },\n  { kind: \"ins\", label: \"4\", ins: \"4\" },\n  { kind: \"ins\", label: \"5\", ins: \"5\" },\n  { kind: \"ins\", label: \"6\", ins: \"6\" },\n  { kind: \"ins\", label: \"×\", ins: \"×\", accent: true, name: \"times\" },\n  { kind: \"ins\", label: \"1\", ins: \"1\" },\n  { kind: \"ins\", label: \"2\", ins: \"2\" },\n  { kind: \"ins\", label: \"3\", ins: \"3\" },\n  { kind: \"ins\", label: \"−\", ins: \"−\", accent: true, name: \"minus\" },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"ins\", label: \".\", ins: \".\", name: \"decimal\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true, name: \"plus\" },\n];\n\nconst KEY_BASE =\n  \"flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-[var(--border-strong)]\";\n// Two key families, two fills: digits sit on the inset surface and darken on\n// hover, operators sit a step down on `--bg-active` and lift toward that surface —\n// the same split `NumberPadSheet` uses for this keypad on a phone. The tokens\n// flip with the theme, so neither needs a `dark:` twin.\n//\n// 0.33 (docs/colour-roles-harmonization.md §12.2, §12.9): the digits hover onto\n// `--bg-active`, 1.11–1.18:1 from the key — `--bg-hover` is mixed against the card and\n// sat only 1.04:1 from the well, which in light is the page. The operators rest on\n// `--bg-active` rather than `--border`: More contrast steps the border until it is a\n// 3:1 LINE, and as a fill under the label that left 2.2–2.7:1.\nconst KEY_DIGIT = \"bg-surface-2 text-primary hover:bg-active\";\nconst KEY_ACCENT = \"bg-active text-secondary hover:bg-surface-2\";\n\nfunction seed(initial: string): string {\n  const t = initial.trim();\n  return t === \"-\" ? \"\" : t;\n}\n\nfunction CalculatorPanel({\n  initial,\n  onChange,\n  labels,\n}: {\n  initial: string;\n  onChange: (value: string, expression?: string) => void;\n  labels: CalculatorLabels;\n}) {\n  const [expr, setExpr] = useState(() => seed(initial));\n  const inputRef = useRef<HTMLInputElement>(null);\n  // What the pad SHOWS. Normally the expression it holds — but when the host owns\n  // the sign of the figure, the magnitude it hands back is not the whole number:\n  // type 50 into a pad opened on an outflow and the host answers \"-50\". Derived\n  // rather than stored, so there is no echo to guard against and a host that\n  // ignores `onChange` entirely (a static `value`) still sees its own keystrokes:\n  // the pad only defers when the host's text is character-for-character its own\n  // last number with a minus in front.\n  const host = splitLeadingSign(initial.trim());\n  const text = host.sign === \"-\" && isBareAmount(expr) && host.rest === expr.trim() ? initial.trim() : expr;\n  const result = evaluateExpression(text);\n\n  // Focus the display on open so the user can type or hit Enter immediately.\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  // Update the host field whenever the expression resolves to a number; an\n  // incomplete expression (e.g. \"12+\") simply leaves the field untouched. The\n  // expression rides along with the result — see `onChange` above.\n  const apply = (next: string) => {\n    setExpr(next);\n    const n = evaluateExpression(next);\n    if (n !== null) onChange(formatResult(n), next);\n  };\n\n  const clearAll = () => {\n    setExpr(\"\");\n    onChange(\"\");\n  };\n\n  const equals = () => {\n    if (result === null) return;\n    const out = formatResult(result);\n    setExpr(out);\n    onChange(out, text);\n  };\n\n  return (\n    <div className=\"space-y-2\">\n      <input\n        ref={inputRef}\n        aria-label={labels.calculation}\n        value={text}\n        inputMode=\"decimal\"\n        onChange={(e) => apply(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n            equals();\n          }\n        }}\n        // Arithmetic reads left to right in every script, and a calculator display\n        // is right-aligned in every script too — so both stay physical, pinned\n        // with `dir=\"ltr\"` rather than mirrored in a right-to-left form.\n        dir=\"ltr\"\n        className={cn(\"block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-right font-mono text-sm text-[var(--text-primary)] focus:border-[var(--border-strong)] focus:ring-[var(--border-strong)]\", FIELD_TOUCH_TEXT)}\n      />\n      <div dir=\"ltr\" className=\"h-4 pr-1 text-right font-mono text-xs text-[var(--text-placeholder)]\">\n        {result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : \"\"}\n      </div>\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={labels.backspace}\n              onClick={() => apply(text.slice(0, -1))}\n              className={cn(KEY_BASE, KEY_ACCENT)}\n            >\n              <Delete className=\"size-4\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              aria-label={key.name ? labels[key.name] : undefined}\n              onClick={() => apply(text + key.ins)}\n              className={cn(KEY_BASE, key.accent ? KEY_ACCENT : KEY_DIGIT)}\n            >\n              {key.label}\n            </button>\n          ),\n        )}\n        <button\n          type=\"button\"\n          // \"C\" is a convention, not a name: read aloud it is the letter.\n          aria-label={labels.clear}\n          onClick={clearAll}\n          className={cn(KEY_BASE, \"col-span-2\", KEY_ACCENT)}\n        >\n          C\n        </button>\n        <button\n          type=\"button\"\n          aria-label={labels.equals}\n          onClick={equals}\n          className={cn(\n            KEY_BASE,\n            // The one chip that inverts against the page. There is no hover token for\n            // an inverted fill, so the hover is the chip mixed back toward the\n            // surface — a step quieter in either theme, and still a colour, so\n            // KEY_BASE's `transition-colors` carries it.\n            \"col-span-2 bg-[var(--bg-inverse)] text-[var(--text-inverse)] hover:bg-[color-mix(in_oklab,var(--bg-inverse)_88%,var(--bg-surface))]\",\n          )}\n        >\n          =\n        </button>\n      </div>\n    </div>\n  );\n}\n\n/**\n * A calculator icon that opens a small keypad popover anchored to its host\n * field. Designed as a trailing-edge adornment: render it inside the field's\n * `relative` wrapper, positioned absolutely. The keypad seeds from the current\n * field value and writes evaluated results straight back through `onChange`.\n */\nexport function CalculatorButton({\n  value,\n  onChange,\n  className,\n  ariaLabel,\n  labels: labelsProp,\n}: CalculatorButtonProps) {\n  // prop > provider > English, with the older `ariaLabel` prop folded in as the\n  // `open` key it has always been.\n  const fromProps = useMemo(\n    () => (ariaLabel === undefined ? labelsProp : { ...labelsProp, open: ariaLabel }),\n    [ariaLabel, labelsProp],\n  );\n  const labels = useKitLabels(\"calculator\", DEFAULT_CALCULATOR_LABELS, fromProps);\n  return (\n    <Popover\n      width=\"14rem\"\n      labels={{ panel: labels.panel }}\n      trigger={({ open, toggle, ref }) => (\n        <button\n          ref={ref}\n          type=\"button\"\n          tabIndex={-1}\n          onClick={toggle}\n          aria-label={labels.open}\n          aria-expanded={open}\n          className={cn(\n            \"flex items-center justify-center text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)]\",\n            className,\n          )}\n        >\n          <CalculatorIcon className=\"size-4\" />\n        </button>\n      )}\n    >\n      {() => <CalculatorPanel initial={value} onChange={onChange} labels={labels} />}\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/checkbox-group.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
+import { CommitScope } from './write-lock.js';
 
 /** One box of a {@link CheckboxGroup}. */
 interface CheckboxGroupOption<T extends string = string> {
@@ -69,7 +70,7 @@ interface CheckboxGroupProps<T extends string = string> {
      * per-locale grants). Under a locked {@link WriteLockProvider} every box is locked
      * the focusable way with the lock's reason. See {@link Checkbox}'s `commit`.
      */
-    commit?: boolean;
+    commit?: CommitScope;
     /** Why no box can be changed — every box gets it, and it wins over `disabled` (the
      *  boxes stay focusable to say it). See {@link Checkbox}'s `disabledReason`. */
     disabledReason?: ReactNode;

package/dist/components/checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/checkbox-group.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Checkbox } from \"./checkbox\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { useCommitReason } from \"./write-lock\";\nimport { RequiredStarOnLegend } from \"./field-parts\";\n\n/** One box of a {@link CheckboxGroup}. */\nexport interface CheckboxGroupOption<T extends string = string> {\n  value: T;\n  /** The words beside the box — its accessible name. */\n  label: ReactNode;\n  /** A line under the label (\"Imprint, Privacy Policy and Terms only\"), attached to the\n   *  box with `aria-describedby` — {@link Checkbox}'s `description`. */\n  hint?: ReactNode;\n  /** This box cannot be changed; the others can. */\n  disabled?: boolean;\n}\n\n/** Whether the legend is drawn. `\"sr-only\"` keeps it as the group's name for a screen\n *  reader where the dialog's title already says it to the eye. */\nexport type CheckboxGroupLegendVisibility = \"visible\" | \"sr-only\";\n\nexport interface CheckboxGroupProps<T extends string = string> {\n  /** The question the boxes answer — the fieldset's `<legend>`, which names the group.\n   *  Without one, pass `aria-label`. */\n  legend?: ReactNode;\n  /** Default `\"visible\"`. */\n  legendVisibility?: CheckboxGroupLegendVisibility;\n  \"aria-label\"?: string;\n  /** One box per option, in this order. */\n  options: CheckboxGroupOption<T>[];\n  /** The ticked values. Controlled. */\n  value: T[];\n  /**\n   * The new set on every tick. In the ORDER OF `options`, not the order the boxes were\n   * ticked, so a list saved from it does not change with the order someone clicked in\n   * (ChoiceCardGroup's rule). A value in `value` that no option carries — a grant for a\n   * locale the app no longer offers — is kept, after the known ones: a picker that\n   * dropped what it could not show would delete it on the next unrelated tick.\n   */\n  onChange: (value: T[]) => void;\n  /**\n   * `\"vertical\"` (default): one box per line. `\"horizontal\"`: a wrapping row, for a few\n   * short labels. With `columns`, vertical becomes a grid of that many columns from the\n   * `sm` breakpoint up and stays one column on a phone — the reviewer dialog's shape.\n   */\n  layout?: \"vertical\" | \"horizontal\";\n  /** Columns for a vertical group, from `sm` up (one on a phone). Default 1. */\n  columns?: 1 | 2 | 3 | 4;\n  /** Shared by every box — what a plain form submits the values under. */\n  name?: string;\n  /** Every box: the fieldset's own `disabled` (which disables them all natively), each\n   *  box faded as a disabled Checkbox is, and the legend with them. */\n  disabled?: boolean;\n  /**\n   * At least one box must be ticked. Draws the required star after the legend, and puts\n   * the native `required` on every box while NONE is ticked — so a form refuses an\n   * empty set — and on none once one is (ChoiceCardGroup's rule: checkboxes cannot say\n   * \"at least one\" natively).\n   */\n  required?: boolean;\n  /**\n   * Standing advice for the group, under the boxes, attached to the fieldset with\n   * `aria-describedby` before the error — the field anatomy every kit field keeps.\n   */\n  hint?: ReactNode;\n  /** What is wrong with the set, in the caller's words. Under the boxes, on the\n   *  fieldset's `aria-describedby`, and paints every box invalid. */\n  error?: ReactNode;\n  /** Paints every box invalid without a message (the message lives elsewhere). */\n  invalid?: boolean;\n  /**\n   * The group SAVES on change — each tick is written straight away (a reviewer's\n   * per-locale grants). Under a locked {@link WriteLockProvider} every box is locked\n   * the focusable way with the lock's reason. See {@link Checkbox}'s `commit`.\n   */\n  commit?: boolean;\n  /** Why no box can be changed — every box gets it, and it wins over `disabled` (the\n   *  boxes stay focusable to say it). See {@link Checkbox}'s `disabledReason`. */\n  disabledReason?: ReactNode;\n  /** The fieldset's id. */\n  id?: string;\n  /** Classes for the fieldset — the outermost element, where layout belongs. */\n  className?: string;\n  /** Classes for the box list (the grid or the row). */\n  listClassName?: string;\n  /** Ids of something else on the page that describes the group; merged before the\n   *  group's own hint and error. */\n  \"aria-describedby\"?: string;\n}\n\n// Literal class strings so Tailwind's scanner sees each one.\nconst COLUMNS: Record<NonNullable<CheckboxGroupProps[\"columns\"]>, string> = {\n  1: \"flex flex-col gap-2\",\n  2: \"grid grid-cols-1 gap-2 sm:grid-cols-2\",\n  3: \"grid grid-cols-1 gap-2 sm:grid-cols-3\",\n  4: \"grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-4\",\n};\n\n/**\n * A set of kit {@link Checkbox}es answering one question, in a `<fieldset>`.\n *\n * Kurvenschmiede's reviewer dialog (features/admin/reviewer-dialog.tsx) builds this by\n * hand — a fieldset, an `sr-only` legend, a grid of checkboxes, a `toggle(code, on)`\n * that adds or filters a `string[]` — and keksdose's and kastlan's reviewer grants build\n * the same picker for the same per-locale grant. The hand-built ones differ in the parts\n * that are easy to get wrong: whether the legend names the group, whether a hint or an\n * error is attached to anything, what order the saved list comes out in, and whether a\n * value the picker cannot show survives a tick.\n *\n * Every box is a kit {@link Checkbox}, so the native checkbox semantics stay (each box\n * submits under `name` in a plain form). The legend is the group's name; the hint and\n * error describe the fieldset. For a choice of ONE, use radios ({@link ChoiceCardGroup},\n * {@link ToggleGroup}).\n */\nexport function CheckboxGroup<T extends string = string>({\n  legend,\n  legendVisibility = \"visible\",\n  \"aria-label\": ariaLabel,\n  options,\n  value,\n  onChange,\n  layout = \"vertical\",\n  columns = 1,\n  name,\n  disabled,\n  required,\n  hint,\n  error,\n  invalid,\n  commit,\n  disabledReason,\n  id,\n  className,\n  listClassName,\n  \"aria-describedby\": ariaDescribedBy,\n}: CheckboxGroupProps<T>) {\n  const generated = useId();\n  const hintId = `${generated}-hint`;\n  const errorId = `${generated}-error`;\n  const showHint = hasMessage(hint);\n  const showError = hasMessage(error);\n  const isInvalid = Boolean(invalid) || showError;\n  const ticked = new Set(value);\n  // Resolved here rather than per box: a reason has to keep the fieldset from being\n  // natively `disabled` too, or it would take every box out of the tab order — the\n  // thing a reason exists to prevent.\n  const reason = useCommitReason(commit, disabledReason);\n  const locked = hasMessage(reason);\n\n  const toggle = (v: T, on: boolean) => {\n    const next = new Set(value);\n    if (on) next.add(v);\n    else next.delete(v);\n    const known = new Set(options.map((o) => o.value));\n    onChange([\n      ...options.map((o) => o.value).filter((x) => next.has(x)),\n      // Values no option carries, kept in their own order — see `onChange`.\n      ...value.filter((x) => !known.has(x)),\n    ]);\n  };\n\n  return (\n    <fieldset\n      id={id}\n      aria-label={ariaLabel}\n      aria-describedby={mergeDescribedBy(ariaDescribedBy, showHint && hintId, showError && errorId)}\n      disabled={disabled && !locked}\n      // `relative` holds an `sr-only` legend (sr-only-containment.test); `min-w-0`\n      // undoes a fieldset's `min-width: min-content`, which would otherwise push a long\n      // label past a phone's edge instead of wrapping it.\n      className={cn(\"relative m-0 min-w-0 border-0 p-0\", className)}\n    >\n      {legend !== undefined && (\n        <legend\n          className={\n            legendVisibility === \"sr-only\"\n              ? \"sr-only\"\n              : cn(\"mb-2 p-0 text-sm font-medium text-[var(--text-primary)]\", (disabled || locked) && \"opacity-60\")\n          }\n        >\n          {legend}\n          {required && (\n            <span aria-hidden className=\"ms-0.5 text-[var(--danger)]\">\n              *\n            </span>\n          )}\n        </legend>\n      )}\n      <RequiredStarOnLegend.Provider value={true}>\n        <div\n          className={cn(\n            layout === \"horizontal\" ? \"flex flex-wrap gap-x-4 gap-y-2\" : COLUMNS[columns],\n            listClassName,\n          )}\n        >\n          {options.map((o) => (\n            <Checkbox\n              key={o.value}\n              name={name}\n              value={o.value}\n              label={o.label}\n              description={o.hint}\n              checked={ticked.has(o.value)}\n              onCheckedChange={(on) => toggle(o.value, on)}\n              disabled={disabled || o.disabled}\n              invalid={isInvalid || undefined}\n              required={required && value.length === 0 ? true : undefined}\n              disabledReason={reason}\n            />\n          ))}\n        </div>\n      </RequiredStarOnLegend.Provider>\n      {showHint && (\n        // A `div`, not a `p`: a hint may be a node with a link in it.\n        <div id={hintId} className=\"mt-1.5 text-caption leading-tight text-[var(--text-muted)]\">\n          {hint}\n        </div>\n      )}\n      {showError && (\n        <p id={errorId} className=\"mt-1 text-caption leading-tight text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n    </fieldset>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/checkbox-group.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Checkbox } from \"./checkbox\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport { RequiredStarOnLegend } from \"./field-parts\";\n\n/** One box of a {@link CheckboxGroup}. */\nexport interface CheckboxGroupOption<T extends string = string> {\n  value: T;\n  /** The words beside the box — its accessible name. */\n  label: ReactNode;\n  /** A line under the label (\"Imprint, Privacy Policy and Terms only\"), attached to the\n   *  box with `aria-describedby` — {@link Checkbox}'s `description`. */\n  hint?: ReactNode;\n  /** This box cannot be changed; the others can. */\n  disabled?: boolean;\n}\n\n/** Whether the legend is drawn. `\"sr-only\"` keeps it as the group's name for a screen\n *  reader where the dialog's title already says it to the eye. */\nexport type CheckboxGroupLegendVisibility = \"visible\" | \"sr-only\";\n\nexport interface CheckboxGroupProps<T extends string = string> {\n  /** The question the boxes answer — the fieldset's `<legend>`, which names the group.\n   *  Without one, pass `aria-label`. */\n  legend?: ReactNode;\n  /** Default `\"visible\"`. */\n  legendVisibility?: CheckboxGroupLegendVisibility;\n  \"aria-label\"?: string;\n  /** One box per option, in this order. */\n  options: CheckboxGroupOption<T>[];\n  /** The ticked values. Controlled. */\n  value: T[];\n  /**\n   * The new set on every tick. In the ORDER OF `options`, not the order the boxes were\n   * ticked, so a list saved from it does not change with the order someone clicked in\n   * (ChoiceCardGroup's rule). A value in `value` that no option carries — a grant for a\n   * locale the app no longer offers — is kept, after the known ones: a picker that\n   * dropped what it could not show would delete it on the next unrelated tick.\n   */\n  onChange: (value: T[]) => void;\n  /**\n   * `\"vertical\"` (default): one box per line. `\"horizontal\"`: a wrapping row, for a few\n   * short labels. With `columns`, vertical becomes a grid of that many columns from the\n   * `sm` breakpoint up and stays one column on a phone — the reviewer dialog's shape.\n   */\n  layout?: \"vertical\" | \"horizontal\";\n  /** Columns for a vertical group, from `sm` up (one on a phone). Default 1. */\n  columns?: 1 | 2 | 3 | 4;\n  /** Shared by every box — what a plain form submits the values under. */\n  name?: string;\n  /** Every box: the fieldset's own `disabled` (which disables them all natively), each\n   *  box faded as a disabled Checkbox is, and the legend with them. */\n  disabled?: boolean;\n  /**\n   * At least one box must be ticked. Draws the required star after the legend, and puts\n   * the native `required` on every box while NONE is ticked — so a form refuses an\n   * empty set — and on none once one is (ChoiceCardGroup's rule: checkboxes cannot say\n   * \"at least one\" natively).\n   */\n  required?: boolean;\n  /**\n   * Standing advice for the group, under the boxes, attached to the fieldset with\n   * `aria-describedby` before the error — the field anatomy every kit field keeps.\n   */\n  hint?: ReactNode;\n  /** What is wrong with the set, in the caller's words. Under the boxes, on the\n   *  fieldset's `aria-describedby`, and paints every box invalid. */\n  error?: ReactNode;\n  /** Paints every box invalid without a message (the message lives elsewhere). */\n  invalid?: boolean;\n  /**\n   * The group SAVES on change — each tick is written straight away (a reviewer's\n   * per-locale grants). Under a locked {@link WriteLockProvider} every box is locked\n   * the focusable way with the lock's reason. See {@link Checkbox}'s `commit`.\n   */\n  commit?: CommitScope;\n  /** Why no box can be changed — every box gets it, and it wins over `disabled` (the\n   *  boxes stay focusable to say it). See {@link Checkbox}'s `disabledReason`. */\n  disabledReason?: ReactNode;\n  /** The fieldset's id. */\n  id?: string;\n  /** Classes for the fieldset — the outermost element, where layout belongs. */\n  className?: string;\n  /** Classes for the box list (the grid or the row). */\n  listClassName?: string;\n  /** Ids of something else on the page that describes the group; merged before the\n   *  group's own hint and error. */\n  \"aria-describedby\"?: string;\n}\n\n// Literal class strings so Tailwind's scanner sees each one.\nconst COLUMNS: Record<NonNullable<CheckboxGroupProps[\"columns\"]>, string> = {\n  1: \"flex flex-col gap-2\",\n  2: \"grid grid-cols-1 gap-2 sm:grid-cols-2\",\n  3: \"grid grid-cols-1 gap-2 sm:grid-cols-3\",\n  4: \"grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-4\",\n};\n\n/**\n * A set of kit {@link Checkbox}es answering one question, in a `<fieldset>`.\n *\n * Kurvenschmiede's reviewer dialog (features/admin/reviewer-dialog.tsx) builds this by\n * hand — a fieldset, an `sr-only` legend, a grid of checkboxes, a `toggle(code, on)`\n * that adds or filters a `string[]` — and keksdose's and kastlan's reviewer grants build\n * the same picker for the same per-locale grant. The hand-built ones differ in the parts\n * that are easy to get wrong: whether the legend names the group, whether a hint or an\n * error is attached to anything, what order the saved list comes out in, and whether a\n * value the picker cannot show survives a tick.\n *\n * Every box is a kit {@link Checkbox}, so the native checkbox semantics stay (each box\n * submits under `name` in a plain form). The legend is the group's name; the hint and\n * error describe the fieldset. For a choice of ONE, use radios ({@link ChoiceCardGroup},\n * {@link ToggleGroup}).\n */\nexport function CheckboxGroup<T extends string = string>({\n  legend,\n  legendVisibility = \"visible\",\n  \"aria-label\": ariaLabel,\n  options,\n  value,\n  onChange,\n  layout = \"vertical\",\n  columns = 1,\n  name,\n  disabled,\n  required,\n  hint,\n  error,\n  invalid,\n  commit,\n  disabledReason,\n  id,\n  className,\n  listClassName,\n  \"aria-describedby\": ariaDescribedBy,\n}: CheckboxGroupProps<T>) {\n  const generated = useId();\n  const hintId = `${generated}-hint`;\n  const errorId = `${generated}-error`;\n  const showHint = hasMessage(hint);\n  const showError = hasMessage(error);\n  const isInvalid = Boolean(invalid) || showError;\n  const ticked = new Set(value);\n  // Resolved here rather than per box: a reason has to keep the fieldset from being\n  // natively `disabled` too, or it would take every box out of the tab order — the\n  // thing a reason exists to prevent.\n  const reason = useCommitReason(commit, disabledReason);\n  const locked = hasMessage(reason);\n\n  const toggle = (v: T, on: boolean) => {\n    const next = new Set(value);\n    if (on) next.add(v);\n    else next.delete(v);\n    const known = new Set(options.map((o) => o.value));\n    onChange([\n      ...options.map((o) => o.value).filter((x) => next.has(x)),\n      // Values no option carries, kept in their own order — see `onChange`.\n      ...value.filter((x) => !known.has(x)),\n    ]);\n  };\n\n  return (\n    <fieldset\n      id={id}\n      aria-label={ariaLabel}\n      aria-describedby={mergeDescribedBy(ariaDescribedBy, showHint && hintId, showError && errorId)}\n      disabled={disabled && !locked}\n      // `relative` holds an `sr-only` legend (sr-only-containment.test); `min-w-0`\n      // undoes a fieldset's `min-width: min-content`, which would otherwise push a long\n      // label past a phone's edge instead of wrapping it.\n      className={cn(\"relative m-0 min-w-0 border-0 p-0\", className)}\n    >\n      {legend !== undefined && (\n        <legend\n          className={\n            legendVisibility === \"sr-only\"\n              ? \"sr-only\"\n              : cn(\"mb-2 p-0 text-sm font-medium text-[var(--text-primary)]\", (disabled || locked) && \"opacity-60\")\n          }\n        >\n          {legend}\n          {required && (\n            <span aria-hidden className=\"ms-0.5 text-[var(--danger)]\">\n              *\n            </span>\n          )}\n        </legend>\n      )}\n      <RequiredStarOnLegend.Provider value={true}>\n        <div\n          className={cn(\n            layout === \"horizontal\" ? \"flex flex-wrap gap-x-4 gap-y-2\" : COLUMNS[columns],\n            listClassName,\n          )}\n        >\n          {options.map((o) => (\n            <Checkbox\n              key={o.value}\n              name={name}\n              value={o.value}\n              label={o.label}\n              description={o.hint}\n              checked={ticked.has(o.value)}\n              onCheckedChange={(on) => toggle(o.value, on)}\n              disabled={disabled || o.disabled}\n              invalid={isInvalid || undefined}\n              required={required && value.length === 0 ? true : undefined}\n              disabledReason={reason}\n            />\n          ))}\n        </div>\n      </RequiredStarOnLegend.Provider>\n      {showHint && (\n        // A `div`, not a `p`: a hint may be a node with a link in it.\n        <div id={hintId} className=\"mt-1.5 text-caption leading-tight text-[var(--text-muted)]\">\n          {hint}\n        </div>\n      )}\n      {showError && (\n        <p id={errorId} className=\"mt-1 text-caption leading-tight text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n    </fieldset>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/checkbox.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { InputHTMLAttributes, ReactNode } from 'react';
 import { DisabledReasonDisplay } from './field-parts.js';
+import { CommitScope } from './write-lock.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
@@ -72,7 +73,7 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "typ
      * locked the `disabledReason` way with the lock's reason (which wins over its own).
      * No provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3.
      */
-    commit?: boolean;
+    commit?: CommitScope;
 }
 /**
  * A native checkbox in the kit's tokens, with an optional label, description and

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\";\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?: boolean;\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 { 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"]}

package/dist/components/chip.d.ts

@@ -2,6 +2,7 @@ import * as react from 'react';
 import { ReactNode, ReactElement, KeyboardEvent, Ref, MouseEvent, ComponentPropsWithoutRef } from 'react';
 import { LucideIcon } from 'lucide-react';
 import { DisabledReasonDisplay } from './field-parts.js';
+import { CommitScope } from './write-lock.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
@@ -260,7 +261,7 @@ type ChipProps = ChipBaseProps & ({
     /** This chip COMMITS — pressing it saves. Under a locked
      *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's
      *  reason, as {@link Button}'s `commit` does. */
-    commit?: boolean;
+    commit?: CommitScope;
 });
 /**
  * Note on `onRemove` with `href`/`onClick`: a button cannot be nested inside a button or

package/dist/components/chip.js

@@ -73,7 +73,9 @@ const TONE = {
 };
 const OUTLINE = {
   neutral: "border-[var(--border-strong)] bg-transparent text-[var(--text-secondary)]",
-  brand: "border-[var(--brand)] bg-transparent text-[var(--brand)]",
+  // The brand AS TEXT is `--brand-muted` (0.33): `--brand` itself is solved to 3:1, a
+  // fill's boundary, and as text it fell to 3.0:1 in the derived dark presets.
+  brand: "border-[var(--brand)] bg-transparent text-brand-muted",
   danger: "border-[var(--danger-border)] bg-transparent text-[var(--danger)]",
   warning: "border-[var(--warning-border)] bg-transparent text-[var(--warning)]",
   success: "border-[var(--success-border)] bg-transparent text-[var(--success)]",
@@ -87,19 +89,19 @@ const OUTLINE = {
   orange: "border-[var(--hue-orange-border)] bg-transparent text-[var(--hue-orange)]"
 };
 const SOLID = {
-  neutral: "border-transparent bg-[var(--bg-inverse)] text-[var(--text-inverse)]",
-  brand: "border-transparent bg-[var(--brand)] text-[var(--brand-contrast)]",
-  danger: "border-transparent bg-[var(--danger)] text-[var(--danger-contrast)]",
-  warning: "border-transparent bg-[var(--warning)] text-[var(--text-inverse)]",
-  success: "border-transparent bg-[var(--success)] text-[var(--text-inverse)]",
-  info: "border-transparent bg-[var(--info)] text-[var(--text-inverse)]",
-  income: "border-transparent bg-[var(--money-income)] text-[var(--text-inverse)]",
-  expense: "border-transparent bg-[var(--money-expense)] text-[var(--text-inverse)]",
-  blue: "border-transparent bg-[var(--hue-blue)] text-[var(--text-inverse)]",
-  indigo: "border-transparent bg-[var(--hue-indigo)] text-[var(--text-inverse)]",
-  purple: "border-transparent bg-[var(--hue-purple)] text-[var(--text-inverse)]",
-  teal: "border-transparent bg-[var(--hue-teal)] text-[var(--text-inverse)]",
-  orange: "border-transparent bg-[var(--hue-orange)] text-[var(--text-inverse)]"
+  neutral: "border-transparent bg-inverse text-inverse",
+  brand: "border-transparent bg-brand text-brand-contrast",
+  danger: "border-transparent bg-danger text-danger-contrast",
+  warning: "border-transparent bg-warning text-warning-contrast",
+  success: "border-transparent bg-success text-success-contrast",
+  info: "border-transparent bg-info text-info-contrast",
+  income: "border-transparent bg-money-pos text-money-income-contrast",
+  expense: "border-transparent bg-money-neg text-money-expense-contrast",
+  blue: "border-transparent bg-hue-blue text-hue-blue-contrast",
+  indigo: "border-transparent bg-hue-indigo text-hue-indigo-contrast",
+  purple: "border-transparent bg-hue-purple text-hue-purple-contrast",
+  teal: "border-transparent bg-hue-teal text-hue-teal-contrast",
+  orange: "border-transparent bg-hue-orange text-hue-orange-contrast"
 };
 const DOT = {
   neutral: "bg-[var(--text-muted)]",
@@ -201,7 +203,7 @@ function refreshChipEdges() {
   for (let pass = 0; pass <= n && pending.length; pass++) {
     const reads = pending.map((el) => {
       const r = el.getBoundingClientRect();
-      const label = el.querySelector(".truncate");
+      const label = el.querySelector(".truncate-until-large");
       if (!r.width || label && (label.scrollWidth > label.clientWidth || labelWraps(label))) return null;
       const width = Math.round(r.width * 64) / 64;
       const target = snappedChipEdgeWidth(width, r.left + window.scrollX, dpr);
@@ -295,7 +297,7 @@ function assignRef(target, value) {
 const CHIP_PILL = "inline-flex max-w-full items-center rounded-full border transition-colors";
 const CHIP_RING = `${FOCUS_RING} focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]`;
 const CHIP_BASE = `${CHIP_PILL} ${CHIP_RING}`;
-const CHIP_LABEL_WRAP_AT_LARGE = "large:whitespace-normal large:break-words";
+const CHIP_LABEL_TRUNCATE = "truncate-until-large";
 const CHIP_TOUCH_LARGE = `${TOUCH_TARGET_LARGE} large:justify-center`;
 const REMOVE_HIT_AREA_LARGE = "relative large:after:absolute large:after:inset-[calc((100%-48px)/2)] large:after:content-['']";
 const Chip = forwardRef(function Chip2({
@@ -391,7 +393,7 @@ const Chip = forwardRef(function Chip2({
       {
         className: cn(
           "min-w-0",
-          typeof children === "string" || typeof children === "number" ? cn("truncate", CHIP_LABEL_WRAP_AT_LARGE) : "inline-flex items-center gap-1 [&>svg]:size-[1em] [&>svg]:shrink-0"
+          typeof children === "string" || typeof children === "number" ? CHIP_LABEL_TRUNCATE : "inline-flex items-center gap-1 [&>svg]:size-[1em] [&>svg]:shrink-0"
         ),
         children
       }