@eifi1/ui-kit 0.51.3 → 0.51.5

package/dist/components/chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/chip.tsx"],"sourcesContent":["import { isValidElement, useCallback, useId } from \"react\";\nimport type { KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { Check, X } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { statusTone, type StatusKind } from \"../lib/status-tone\";\nimport { TOUCH_TARGET_LARGE } from \"./button-look\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { assignRef, LockedReason, type DisabledReasonDisplay } from \"./field-parts\";\nimport { hasContent } from \"../lib/presence\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport { useSnapEdges } from \"../lib/chip-edge-snap\";\n// The edge-snap engine lives in lib/chip-edge-snap.ts and ChipInput in chip-input.tsx\n// (MOD-9). `refreshChipEdges` is still this module's; of ChipInput only the types are,\n// since a runtime re-export would make chip ⇄ chip-input a cycle — the barrel exports\n// chip-input itself.\nexport { refreshChipEdges } from \"../lib/chip-edge-snap\";\nexport type { ChipInputLabels, ChipInputProps } from \"./chip-input\";\n\n/**\n * A chip: a compact pill carrying one value.\n *\n * Three jobs, deliberately one component. A chip can be inert (a tag on a row), a link\n * (a jump to a section), or a toggle (a filter that is on or off) — and the difference is\n * which prop you pass, not which component you pick. Keeping them together is what stops\n * an app growing three near-identical pills that drift apart; it is the shape this kit\n * already uses for `Button`, which is a link when it is given an href.\n *\n * A chip is not a `Button`. It is smaller, it is rounded to a pill, and it reads as a\n * VALUE rather than as an action — which matters because a row of eight buttons says\n * \"choose one of eight things to do\" and a row of eight chips says \"here are eight\n * things\". Using `Button` for both is the mistake this exists to prevent.\n */\n\nexport type ChipTone =\n  | \"neutral\"\n  | \"brand\"\n  | \"danger\"\n  | \"warning\"\n  | \"success\"\n  | \"info\"\n  | \"income\"\n  | \"expense\"\n  | ChipHue;\n/**\n * Categorical hues (0.10.0): colour that says \"a different value\" and nothing more —\n * kastlan's status-badge.tsx paints ~15 enums in 9 Tailwind hues by hand. Four of those\n * nine are semantic and already tones (green = `success`, yellow = `warning`, red =\n * `danger`, gray = `neutral`); these five are the rest, each a `--hue-*` token triple\n * in tokens.css with a light and a dark value. Use a semantic tone when the value HAS a\n * meaning (overdue is `danger`), a hue when it only needs telling apart (sent vs\n * accepted vs invoiced).\n */\nexport type ChipHue = \"blue\" | \"indigo\" | \"purple\" | \"teal\" | \"orange\";\n/** `lg` is the 44px touch target (`min-h-11`) a phone surface wants; `md` is ~28px.\n *  `xs` (0.10.0) is 11px type at `px-1.5` — keksdose's goal markers and budget-cell\n *  badges, which sit inside a figure's line and must not make it taller. */\nexport type ChipSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n/**\n * How much of the tone the chip wears.\n *\n * - `soft` (default): the tinted surface every chip has had.\n * - `outline`: the tone's border and text on NO surface — keksdose's DEV badge in the\n *   account menu and kastlan's 27 shadcn `variant=\"outline\"` badges, which sit on\n *   coloured rows where a second tint would muddy the row.\n * - `solid`: the tone as a fill under contrasting text — the \"count\" pill (unread\n *   messages, open tasks). It centres its content and sets figures tabular, so a\n *   one-digit count is a round dot and \"9\" → \"10\" does not jiggle the row.\n * - `dot` (0.10.0): no pill at all — a dot in the tone's colour before plain text, for\n *   a status in a dense list or a table column where eight tinted pills in a column\n *   would outshout the figures beside them (kastlan's unit picker already draws its\n *   UnitStatus this way, from a separate `dotColor` map).\n */\nexport type ChipVariant = \"soft\" | \"outline\" | \"solid\" | \"dot\";\n/** `pill` (default) is fully rounded; `square` has the small radius of a field or a\n *  button — for a chip that sits in a table cell or beside square controls. */\nexport type ChipShape = \"pill\" | \"square\";\n\nconst TONE: Record<ChipTone, { idle: string; selected: string }> = {\n  neutral: {\n    idle: \"border-subtle bg-surface-2 text-secondary\",\n    selected: \"border-strong bg-active text-primary\",\n  },\n  brand: {\n    idle: \"border-subtle bg-brand-soft text-brand-muted\",\n    selected: \"border-brand bg-brand text-brand-contrast\",\n  },\n  danger: {\n    idle: \"border-danger bg-danger-soft text-danger\",\n    selected: \"border-[var(--danger)] bg-danger text-danger-contrast\",\n  },\n  warning: {\n    idle: \"border-warning bg-warning-soft text-warning\",\n    selected: \"border-[var(--warning)] bg-warning-soft text-warning\",\n  },\n  success: {\n    idle: \"border-success bg-success-soft text-success\",\n    selected: \"border-[var(--success)] bg-success-soft text-success\",\n  },\n  info: {\n    idle: \"border-info bg-info-soft text-info\",\n    selected: \"border-[var(--info)] bg-info-soft text-info\",\n  },\n  // The money pair (Keksdose's direction toggle). Only the TEXT and the BORDER carry\n  // the tint, on the neutral chip's own surfaces: the money tokens are chosen for text\n  // contrast, and a filled amber pill beside an amber figure reads as one smear.\n  // `border-current` takes its hue from the text, so the two cannot drift apart.\n  income: {\n    idle: \"border-current/40 bg-surface-2 text-money-income\",\n    selected: \"border-current bg-active text-money-income\",\n  },\n  expense: {\n    idle: \"border-current/40 bg-surface-2 text-money-expense\",\n    selected: \"border-current bg-active text-money-expense\",\n  },\n  // The categorical hues: the `info` recipe with its own token triple, so a hue chip\n  // and a status chip in one row carry the same weight.\n  blue: {\n    idle: \"border-hue-blue bg-hue-blue-soft text-hue-blue\",\n    selected: \"border-[var(--hue-blue)] bg-hue-blue-soft text-hue-blue\",\n  },\n  indigo: {\n    idle: \"border-hue-indigo bg-hue-indigo-soft text-hue-indigo\",\n    selected: \"border-[var(--hue-indigo)] bg-hue-indigo-soft text-hue-indigo\",\n  },\n  purple: {\n    idle: \"border-hue-purple bg-hue-purple-soft text-hue-purple\",\n    selected: \"border-[var(--hue-purple)] bg-hue-purple-soft text-hue-purple\",\n  },\n  teal: {\n    idle: \"border-hue-teal bg-hue-teal-soft text-hue-teal\",\n    selected: \"border-[var(--hue-teal)] bg-hue-teal-soft text-hue-teal\",\n  },\n  orange: {\n    idle: \"border-hue-orange bg-hue-orange-soft text-hue-orange\",\n    selected: \"border-[var(--hue-orange)] bg-hue-orange-soft text-hue-orange\",\n  },\n};\n\n// `outline` idle looks: the tone's border and text, the surface left to whatever the\n// chip sits on. Selected still takes the tone's `selected` look (below), because an\n// outline toggle that stays an outline when on has no visible state.\nconst OUTLINE: Record<ChipTone, string> = {\n  neutral: \"border-strong bg-transparent text-secondary\",\n  // The brand AS TEXT is `--brand-muted` (0.33): `--brand` itself is solved to 3:1, a\n  // fill's boundary, and as text it fell to 3.0:1 in the derived dark presets.\n  brand: \"border-brand bg-transparent text-brand-muted\",\n  danger: \"border-danger bg-transparent text-danger\",\n  warning: \"border-warning bg-transparent text-warning\",\n  success: \"border-success bg-transparent text-success\",\n  info: \"border-info bg-transparent text-info\",\n  income: \"border-current/60 bg-transparent text-money-income\",\n  expense: \"border-current/60 bg-transparent text-money-expense\",\n  blue: \"border-hue-blue bg-transparent text-hue-blue\",\n  indigo: \"border-hue-indigo bg-transparent text-hue-indigo\",\n  purple: \"border-hue-purple bg-transparent text-hue-purple\",\n  teal: \"border-hue-teal bg-transparent text-hue-teal\",\n  orange: \"border-hue-orange bg-transparent text-hue-orange\",\n};\n\n// `solid`: the fill under its own foreground, `<fill>-contrast` (0.33, colour-roles\n// §5.1): white in light, the tone's 950 (the page, for money) on the dark theme's\n// pastels. Until 0.33 only brand and danger had one and the rest borrowed\n// `--text-inverse`, the surface colour — which left light warning at 4.24:1 and orange\n// at 4.38:1. Neutral keeps the inverse pair: a count pill, louder than the neutral\n// fill. The border goes transparent rather than away, so a solid chip is exactly as\n// tall as a soft one.\nconst SOLID: Record<ChipTone, string> = {\n  neutral: \"border-transparent bg-inverse text-inverse\",\n  brand: \"border-transparent bg-brand text-brand-contrast\",\n  danger: \"border-transparent bg-danger text-danger-contrast\",\n  warning: \"border-transparent bg-warning text-warning-contrast\",\n  success: \"border-transparent bg-success text-success-contrast\",\n  info: \"border-transparent bg-info text-info-contrast\",\n  income: \"border-transparent bg-money-pos text-money-income-contrast\",\n  expense: \"border-transparent bg-money-neg text-money-expense-contrast\",\n  blue: \"border-transparent bg-hue-blue text-hue-blue-contrast\",\n  indigo: \"border-transparent bg-hue-indigo text-hue-indigo-contrast\",\n  purple: \"border-transparent bg-hue-purple text-hue-purple-contrast\",\n  teal: \"border-transparent bg-hue-teal text-hue-teal-contrast\",\n  orange: \"border-transparent bg-hue-orange text-hue-orange-contrast\",\n};\n\n/** `dot`: the fill of the dot itself — the tone's strongest colour, which is the one\n *  chosen to read on the page surface in both themes. Neutral takes the muted ink: a\n *  grey dot is \"no particular state\", not a darker black. */\nconst DOT: Record<ChipTone, string> = {\n  neutral: \"bg-[var(--text-muted)]\",\n  brand: \"bg-brand\",\n  danger: \"bg-danger\",\n  warning: \"bg-warning\",\n  success: \"bg-success\",\n  info: \"bg-info\",\n  income: \"bg-money-income\",\n  expense: \"bg-money-expense\",\n  blue: \"bg-hue-blue\",\n  indigo: \"bg-hue-indigo\",\n  purple: \"bg-hue-purple\",\n  teal: \"bg-hue-teal\",\n  orange: \"bg-hue-orange\",\n};\n\n/** Per size: the dot's diameter. */\nconst DOT_SIZE: Record<ChipSize, string> = { xs: \"size-1.5\", sm: \"size-2\", md: \"size-2\", lg: \"size-2.5\" };\n\n/** The status-badge type (`caps`): a size step down, heavier and tracked, because\n *  capitals at body size shout and capitals untracked run together. Per size, so it\n *  replaces the size's own `text-*` through tailwind-merge. */\nconst CAPS: Record<ChipSize, string> = {\n  xs: \"text-micro font-semibold uppercase tracking-wider\",\n  sm: \"text-micro font-semibold uppercase tracking-wider\",\n  md: \"text-caption font-semibold uppercase tracking-wider\",\n  lg: \"text-xs font-semibold uppercase tracking-wider\",\n};\n\nfunction surfaceOf(tone: ChipTone, variant: ChipVariant, selected: boolean | undefined): string {\n  const palette = TONE[tone];\n  if (variant === \"dot\") {\n    // No surface and no border colour: the dot carries the tone, the text stays ink.\n    // The border goes transparent rather than away, so a dot chip lines up with a pill.\n    return selected\n      ? \"border-transparent bg-transparent font-medium text-primary\"\n      : \"border-transparent bg-transparent text-secondary\";\n  }\n  if (variant === \"solid\") {\n    // A solid chip is already the strongest look there is, so \"on\" is a ring round it.\n    return cn(SOLID[tone], selected && \"ring-2 ring-strong ring-offset-1 ring-offset-surface\");\n  }\n  if (selected) return palette.selected;\n  return variant === \"outline\" ? OUTLINE[tone] : palette.idle;\n}\n\n/** What {@link ChipProps.renderLink} is handed: everything the chip would have put on\n *  its own `<a>`. Spread it onto your router's link, mapping `href` to what the link\n *  calls it — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface ChipLinkProps {\n  href: string;\n  /** The chip's whole look — keep it, or the pill is a bare link. */\n  className: string;\n  children: ReactNode;\n  /** The chip's forwarded ref. React 19 passes it to a function component as a prop. */\n  ref?: Ref<HTMLAnchorElement>;\n  \"aria-current\"?: \"true\";\n  /**\n   * The chip's `onClick`, when it was given one — spread it onto the link with the\n   * rest. Carried here so a caller need not close over it twice: keksdose's admin pill\n   * in the account menu closes the menu on the way to /admin (account-menu.tsx), and\n   * with `onClick` on the Chip its `renderLink` stays the one-liner\n   * `({ href, ...p }) => <Link to={href} {...p} />`.\n   */\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  id?: string;\n  title?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\n/**\n * `body` is the whole pill when the chip is ONE element. When a link or a button also has\n * a dismiss control, the pill is a wrapper holding two siblings (see the note on\n * {@link Chip}): `split` is then the interactive part's own padding — the full start\n * inset, a short end one before the ×; `tail` is the wrapper's end inset after the ×.\n */\nconst SIZE: Record<\n  ChipSize,\n  { body: string; split: string; tail: string; icon: string; remove: string }\n> = {\n  xs: {\n    body: \"gap-1 px-1.5 py-0 text-caption leading-4\",\n    split: \"gap-1 ps-1.5 pe-0.5 py-0 text-caption leading-4\",\n    tail: \"pe-1\",\n    icon: \"size-3\",\n    remove: \"size-2.5\",\n  },\n  sm: {\n    body: \"gap-1 px-2 py-0.5 text-xs\",\n    split: \"gap-1 ps-2 pe-1 py-0.5 text-xs\",\n    tail: \"pe-1.5\",\n    icon: \"size-3\",\n    remove: \"size-3\",\n  },\n  md: {\n    body: \"gap-1.5 px-2.5 py-1 text-sm\",\n    split: \"gap-1.5 ps-2.5 pe-1.5 py-1 text-sm\",\n    tail: \"pe-2\",\n    icon: \"size-3.5\",\n    remove: \"size-3.5\",\n  },\n  lg: {\n    body: \"min-h-11 gap-2 px-4 py-2 text-sm\",\n    split: \"min-h-11 gap-2 ps-4 pe-2 py-2 text-sm\",\n    tail: \"min-h-11 pe-3.5\",\n    icon: \"size-4\",\n    remove: \"size-4\",\n  },\n};\n\nconst CHIP_PILL = \"inline-flex max-w-full items-center rounded-full border transition-colors\";\n\n// `focus-visible`, not `focus`: a chip commonly receives focus programmatically (the\n// ChipInput moves focus onto one after a removal) and a ring that appears on a\n// pointer click reads as a stuck selection.\nconst CHIP_RING = `${FOCUS_RING} focus-visible:ring-offset-1 focus-visible:ring-offset-surface`;\nconst CHIP_BASE = `${CHIP_PILL} ${CHIP_RING}`;\n\n/**\n * A text chip's label at Large and Extra large (0.32.1, keksdose's 0.32 report;\n * docs/text-size-harmonization.md §4 \"nothing truncates\"): it wraps instead of ending in\n * \"…\". keksdose's \"Zur Prüfung zurücklegen\" read \"Zur Prüfung zu…\" on a phone at Extra\n * large, which is a different instruction. No size has a fixed height (padding and\n * `min-h-*` only), so the pill grows with its lines; the mark before the text stays\n * centred on them, as in a pill. A `large:` rule, so Normal keeps its one-line chip.\n *\n * 0.33 (§10.17): the kit's one `truncate-until-large` (tokens.css) in place of this\n * file's own `truncate` + `large:whitespace-normal large:break-words`, as StatusDot's\n * label took it. The utility breaks with `overflow-wrap: anywhere`, which lowers the\n * label's min-content width to one letter: a status chip in an auto-sized table column\n * wants the column given a width at Large, or it is squeezed to a letter per line\n * (StatusDot's label was, in the showcase's tone table at 360 px, Extra large).\n */\nconst CHIP_LABEL_TRUNCATE = \"truncate-until-large\";\n\n/**\n * An interactive chip's touch target at Large and Extra large (docs/text-size-harmonization.md\n * §4: \"touch targets at least 48 px … for buttons, inputs, chips\"): a link or toggle chip\n * grows its pill to 48 px, as Button `sm` does, and centres what is in it once the\n * minimum width is what sizes it. An inert chip (a tag on a row) is no target and keeps\n * its size; a disabled one is no target either.\n */\nconst CHIP_TOUCH_LARGE = `${TOUCH_TARGET_LARGE} large:justify-center`;\n\n/**\n * The ×'s 48 px hit area at Large (§4) — IconButton's `2xs` pattern: a box that cannot\n * grow without growing the chip around it keeps its size and gets an invisible\n * `::after`, 48 px square and centred on it, which takes the taps a finger lands round\n * the glyph. On an inert removable chip (ChipInput's values) the × is the only target.\n */\nconst REMOVE_HIT_AREA_LARGE =\n  \"relative large:after:absolute large:after:inset-[calc((100%-48px)/2)] large:after:content-['']\";\n\ninterface ChipBaseProps {\n  children: ReactNode;\n  tone?: ChipTone;\n  /**\n   * What the value means as a status (0.49 KIT-8), instead of a `tone`: `good` (success),\n   * `attention` (warning), `problem` (danger), `active` (info), `inactive` (neutral) —\n   * {@link statusTone}. An explicit `tone` wins. Never `brand` for a status.\n   */\n  status?: StatusKind;\n  size?: ChipSize;\n  /** See {@link ChipVariant}. Default `soft`. */\n  variant?: ChipVariant;\n  /** See {@link ChipShape}. Default `pill`. */\n  shape?: ChipShape;\n  /**\n   * The uppercase, tracked \"status badge\" type — keksdose's ~25 PAID / DRAFT /\n   * OVERDUE / ADMIN badges, each spelling `uppercase tracking-wide text-[10px]` by\n   * hand. A flag rather than a fourth `variant` because it is TYPE, not surface: a\n   * status badge is soft, outlined or solid as the row needs, and a `variant=\"tag\"`\n   * would have had to pick one. Screen readers read the text as written, not as\n   * drawn, so write it in normal case.\n   */\n  caps?: boolean;\n  /**\n   * The leading glyph: a lucide component (`icon={Check}`, drawn at the chip's size), or\n   * — since 0.15.4 — a ready element (`icon={<Check className=\"text-success\" />}`)\n   * for a glyph whose colour or stroke carries a state; it is sized to the same box\n   * (keksdose live #358 built that slot by hand inside `children`).\n   */\n  icon?: LucideIcon | ReactElement;\n  /**\n   * Marks the chip as the current one — `aria-current` on a link, `aria-pressed` on a\n   * toggle.\n   *\n   * On an ON/OFF toggle, keep the LABEL the same in both states and let `selected`\n   * carry the state. A label that flips with it (\"Skip this month\" / \"Ask again this\n   * month\") is announced together with \"pressed\", and then says the opposite of what\n   * it does.\n   *\n   * A control that switches between two NAMED states (outflow ⇄ inflow) is not a\n   * toggle but an ACTION button: leave `selected` out, let the visible label and the\n   * tone follow the state (\"− Outflow\" / \"+ Inflow\"), and name the action in\n   * `aria-label` (\"Direction: outflow — tap for inflow\"). Without `selected` the chip\n   * reports no pressed state at all. A fixed label there contradicts the figure beside\n   * it — \"+ Outflow\" in green next to an inflow (keksdose #417).\n   */\n  selected?: boolean;\n  /**\n   * Checkbox mode (0.10.0), for a toggle chip (`onClick` + `selected`): a small box\n   * at the start that shows a tick when `selected`, and the button reports\n   * `role=\"checkbox\"` + `aria-checked` instead of `aria-pressed`. For a set of\n   * include/exclude choices where \"on\" must read as TICKED, not merely tinted —\n   * keksdose's add-group-card (the \"which categories come along\" pills), which put a\n   * real `<Checkbox>` inside a `<label>` pill by hand. The box is drawn in both\n   * states so ticking one never shifts its label.\n   */\n  checkbox?: boolean;\n  /** Renders a dismiss affordance. Works alongside `href`/`onClick` — see the note below. */\n  onRemove?: () => void;\n  /** Accessible name for the dismiss button. Default: `common.remove` from the\n   *  {@link UiKitProvider}, else \"Remove\". */\n  removeLabel?: string;\n  /** Disables the × ONLY — the chip itself stays a working link or toggle. For the\n   *  value that may not be removed right now (the last filter of a required set, a\n   *  tag the user may read but not edit) where `disabled` would also kill the chip's\n   *  own action. */\n  removeDisabled?: boolean;\n  disabled?: boolean;\n  className?: string;\n  /**\n   * Roving focus, for a container that manages a row of chips (see {@link ChipInput}).\n   * A chip with no `href`/`onClick` is inert and unfocusable by default; give it a\n   * `tabIndex` and a `role` and it becomes the thing arrow keys move between.\n   */\n  tabIndex?: number;\n  role?: string;\n  onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;\n  onFocus?: () => void;\n  /** Accessible name, when the visible text is not the whole story. */\n  \"aria-label\"?: string;\n  /** Any other ARIA attribute — `aria-describedby`, `aria-expanded`, `aria-controls`,\n   *  `aria-haspopup` — reaches the chip's interactive element. */\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  /** A test id, a `data-tour` anchor, or any other data attribute. */\n  [key: `data-${string}`]: unknown;\n  id?: string;\n  /** A native tooltip. For anything a user must read, prefer the kit's `Tooltip`. */\n  title?: string;\n  /**\n   * Even hairlines on fractional-ratio displays (0.18.0). At a device-pixel ratio of\n   * 1.25 — a 125 % Windows display, or 125 % zoom — Chrome draws a chip's two 1px\n   * side borders on different sub-pixel phases, one crisp and one a half-strength\n   * smear that reads as a thinner line (worst on the 60 %-alpha `danger` border).\n   * `snapEdges` widens the chip by under 4px, from where it sits, so the two edges\n   * rasterise as mirror images, and centres its content in the extra.\n   *\n   * Off by default: it reads the chip's position (batched for every snapped chip into\n   * one pass a frame, through one shared observer), and the fix is only as fresh as the\n   * last pass — it re-snaps on render, resize, zoom and ratio change, but not when\n   * something else moves the chip; call {@link refreshChipEdges} then. At an integer\n   * ratio, and at 1.5, it writes nothing. Turn it on for status chips that sit in a\n   * column and are compared side by side; a chip with no visible border (`dot`) has\n   * nothing to snap.\n   */\n  snapEdges?: boolean;\n  /** The interactive element — the pill, or a split pill's body. A React 19 ref prop\n   *  since 0.34 (MOD-4, refactor audit 2026-10); it was `forwardRef`. */\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * A chip is a link OR a button, never both — so the types say so. Before 0.7.0 both were\n * accepted and `onClick` was silently dropped whenever `href` was set. A LINK may still\n * run code on its way (close the menu it sits in): that is an `onClick` typed for the\n * anchor, on the link shape, and the pill stays a link — no `aria-pressed`, no button.\n * That shape wants a definite `href` string, so a bare `onClick` is always the\n * button's, with a button's event.\n */\nexport type ChipProps = ChipBaseProps &\n  (\n    | {\n        /** Renders the chip as a link. */\n        href?: string;\n        onClick?: never;\n        /**\n         * Renders the link for `href` — pass your router's `<Link>` here, since a\n         * plain `<a>` reloads a single-page app (keksdose's account-menu admin pill).\n         * Default: the `<UiKitProvider linkComponent>`, then `<a>`. Ignored without\n         * `href`.\n         *\n         * A render function rather than an `as={Link}`, for three reasons. It is the\n         * API `StatTile` already has (`renderLink`), so a consumer learns it once.\n         * Router links do not take `href` — react-router's takes `to` — so an `as`\n         * would either have to pass props through untyped or teach the kit about one\n         * router; here the caller maps `href` onto its own link in one line, fully\n         * typed. And it keeps `href` as THE link prop, which is what the `href` /\n         * `onClick` exclusion below is typed on: the pill is a link because it has an\n         * href, whichever element draws it.\n         */\n        renderLink?: (props: ChipLinkProps) => ReactElement;\n        commit?: never;\n        disabledReason?: never;\n        disabledReasonDisplay?: never;\n      }\n    | {\n        /** The link shape again, with an `onClick`. `href` is a required string here,\n         *  which is what lets TypeScript tell this shape from the button's: a bare\n         *  `onClick` can only be the button's, and keeps its button event. */\n        href: string;\n        /** Runs on the link's click, before the navigation — keksdose's admin pill\n         *  closes the account menu with it. Reaches a `renderLink` link as\n         *  {@link ChipLinkProps.onClick}. Not called on a disabled chip, which renders\n         *  no link. */\n        onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n        /** See the link shape above. */\n        renderLink?: (props: ChipLinkProps) => ReactElement;\n        commit?: never;\n        disabledReason?: never;\n        disabledReasonDisplay?: never;\n      }\n    | {\n        href?: never;\n        renderLink?: never;\n        /** Renders the chip as a toggle button. Mutually exclusive with `href`. Receives\n         *  the click, so a chip inside a clickable row can `stopPropagation()`. */\n        onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n        /**\n         * Why the toggle cannot be pressed right now — {@link Button}'s\n         * `disabledReason`, on the chip's button shape (keksdose K3: a filter or flag\n         * chip that saves on press, under a read-only lock). The chip stays focusable\n         * and `aria-disabled`, a press (and its `onRemove` ×) does nothing, and the\n         * reason describes the chip — as a line under it at Large and on a touch\n         * screen, in the kit {@link Tooltip} otherwise (see `disabledReasonDisplay`).\n         * Wins over `disabled`. A link chip navigates rather than commits, so it takes\n         * neither this nor `commit`; an inert chip has nothing to refuse.\n         */\n        disabledReason?: ReactNode;\n        /**\n         * Where `disabledReason` shows (0.32, docs/text-size-harmonization.md §4 \"No fact\n         * only in a tooltip\") — {@link Button}'s `disabledReasonDisplay`: by default a line\n         * under the chip at Large and Extra large and on a touch screen, where a bubble\n         * cannot be hovered open, and the tooltip otherwise and inside\n         * `CompactControls`. `\"line\"` / `\"tooltip\"` force one. See\n         * {@link DisabledReasonDisplay}.\n         */\n        disabledReasonDisplay?: DisabledReasonDisplay;\n        /** This chip COMMITS — pressing it saves. Under a locked\n         *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n         *  reason, as {@link Button}'s `commit` does. */\n        commit?: CommitScope;\n      }\n  );\n\n/**\n * Note on `onRemove` with `href`/`onClick`: a button cannot be nested inside a button or\n * a link, so when both are present the chip renders a wrapper holding TWO siblings — the\n * interactive body and the dismiss control. The WRAPPER is the visual pill (border, tone,\n * `className`) and the two sit inside it, so the × reads as part of the chip; the body's\n * focus ring is drawn on the body alone, and `ref`, `id` and the ARIA props still reach\n * the body — the interactive element.\n */\nexport function Chip({\n  ref,\n  children,\n  tone: toneProp,\n  status,\n  size = \"md\",\n  variant = \"soft\",\n  shape = \"pill\",\n  caps = false,\n  icon: Icon,\n  selected,\n  checkbox = false,\n  href,\n  renderLink,\n  onClick,\n  onRemove,\n  removeLabel,\n  removeDisabled = false,\n  disabled = false,\n  className,\n  tabIndex,\n  role,\n  onKeyDown,\n  onFocus,\n  snapEdges = false,\n  disabledReason: ownDisabledReason,\n  disabledReasonDisplay,\n  commit,\n  ...rest\n}: ChipProps) {\n  const tone: ChipTone = toneProp ?? (status ? statusTone(status) : \"neutral\");\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { remove: removeLabel });\n  const reasonId = useId();\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  // Only the BUTTON shape commits: a link navigates, an inert chip does nothing.\n  const locked = Boolean(onClick) && !href && hasContent(disabledReason);\n  const kitLink = useKitLink();\n  const s = SIZE[size];\n  const interactive = !!href || !!onClick;\n  // One radius for every rounded piece — the pill, the body inside a split pill, the ×\n  // — so a square chip has no round focus ring inside it.\n  const radius =\n    shape === \"square\" ? (size === \"sm\" || size === \"xs\" ? \"rounded\" : \"rounded-md\") : \"rounded-full\";\n  const dot = variant === \"dot\";\n  const type = cn(caps && CAPS[size], variant === \"solid\" && \"justify-center tabular-nums\");\n  const surface = cn(\n    surfaceOf(tone, variant, selected),\n    // A reason wins over `disabled`: the focusable kind of disabled, with the cursor\n    // that says \"refused\" rather than \"nothing here\".\n    disabled && !locked && \"cursor-default opacity-50\",\n    locked && \"cursor-not-allowed opacity-50\",\n  );\n  const snap = snapEdges && !dot;\n  // A finger's target at Large (§4): what can be pressed, refused or not — see\n  // CHIP_TOUCH_LARGE. A disabled link renders as the inert span below and is none.\n  const target = interactive && (!disabled || locked);\n  const snapRef = useSnapEdges(snap);\n  // The visible pill carries the snap: the whole chip, or the wrapper of a split one\n  // (whose body gets the forwarded ref instead).\n  const ownRef = useCallback(\n    (el: HTMLElement | null) => {\n      snapRef(el);\n      assignRef(ref, el);\n    },\n    [snapRef, ref],\n  );\n  const look = cn(\n    CHIP_BASE,\n    s.body,\n    type,\n    radius,\n    surface,\n    interactive && !disabled && !locked && \"cursor-pointer hover:brightness-[0.97] dark:hover:brightness-110\",\n    // §4: a link or toggle is a 48 px target at Large — a locked one too, since it is\n    // still focusable and still says why when pressed.\n    target && CHIP_TOUCH_LARGE,\n    // An inert dot chip is text in a column: no inset, so it aligns with the header.\n    dot && !interactive && \"px-0\",\n    // The under-4px a snap adds is split between the two sides, not stacked at the end.\n    snap && \"justify-center\",\n    className,\n  );\n\n  // The tone as data on the visible pill (0.34, refactor audit 2026-10, TST-9): a stable\n  // hook for a test or a caller's selector, where the surface classes are the kit's to\n  // change. On the pill wrapper of a split chip, else on the chip itself; before the\n  // caller's props, so a `data-tone` of their own wins.\n  const toneData = { \"data-tone\": onRemove ? undefined : tone } as Record<string, string | undefined>;\n\n  // The checkbox box, only on the toggle shape it has meaning on.\n  const isCheckbox = checkbox && !!onClick && !href;\n  const body = (\n    <>\n      {isCheckbox && (\n        <span\n          aria-hidden\n          data-chip-check=\"\"\n          className={cn(\n            \"flex shrink-0 items-center justify-center rounded-sm border\",\n            s.icon,\n            selected ? \"border-current bg-current/15\" : \"border-current/50\",\n          )}\n        >\n          {selected && <Check className=\"size-full\" strokeWidth={3} />}\n        </span>\n      )}\n      {dot && <span aria-hidden data-chip-dot=\"\" className={cn(\"shrink-0 rounded-full\", DOT_SIZE[size], DOT[tone])} />}\n      {Icon &&\n        (isValidElement(Icon) ? (\n          <span aria-hidden className={cn(s.icon, \"inline-flex shrink-0 [&>svg]:size-full\")}>\n            {Icon}\n          </span>\n        ) : (\n          <Icon className={cn(s.icon, \"shrink-0\")} aria-hidden />\n        ))}\n      {/* Text truncates at Normal and wraps at Large (CHIP_LABEL_TRUNCATE). Mixed\n          children (an icon and a word) sit in a row instead: as a plain span, the svg —\n          a block under Tailwind's preflight — stacked above the text (keksdose live\n          #358). */}\n      <span\n        className={cn(\n          \"min-w-0\",\n          typeof children === \"string\" || typeof children === \"number\"\n            ? CHIP_LABEL_TRUNCATE\n            : \"inline-flex items-center gap-1 [&>svg]:size-[1em] [&>svg]:shrink-0\",\n        )}\n      >\n        {children}\n      </span>\n    </>\n  );\n\n  const remove = onRemove ? (\n    <button\n      type=\"button\"\n      // The name carries WHAT is being removed, not just \"Remove\" — a screen-reader user\n      // tabbing a row of eight dismiss buttons otherwise hears the same word eight times\n      // with no way to tell which one they are on.\n      // Composed through `common.fieldValue` because the punctuation between the two\n      // halves is the language's, not ours. A chip whose content is not plain text\n      // has no value to name, and gets the bare verb rather than a dangling colon.\n      aria-label={\n        typeof children === \"string\" && children\n          ? common.fieldValue(common.remove, children)\n          : common.remove\n      }\n      onClick={(e) => {\n        // The chip may itself be a link; removing it must not also follow it.\n        e.preventDefault();\n        e.stopPropagation();\n        // Removing a value from a chip that commits is a commit too.\n        if (locked) return;\n        onRemove();\n      }}\n      disabled={(disabled && !locked) || removeDisabled}\n      aria-disabled={locked || undefined}\n      aria-describedby={locked ? reasonId : undefined}\n      className={cn(\n        // Logical margins: the × sits at the END of the pill, which is the left in RTL.\n        \"-me-0.5 ms-0.5 shrink-0 p-0.5 transition-colors\",\n        shape === \"square\" ? \"rounded-sm\" : \"rounded-full\",\n        FOCUS_RING,\n        // §4: the × is a 48 px target at Large without growing the chip around it.\n        REMOVE_HIT_AREA_LARGE,\n        !locked && \"hover:bg-active\",\n        locked && \"cursor-not-allowed\",\n        ((disabled && !locked) || removeDisabled) && \"pointer-events-none\",\n        // A disabled chip is already dimmed as a whole; dimming the × again on top\n        // would take it to a quarter. `removeDisabled` alone dims just the ×.\n        removeDisabled && !disabled && \"opacity-40\",\n      )}\n    >\n      <X className={s.remove} aria-hidden />\n    </button>\n  ) : null;\n\n  // ── The combined shape: one pill, two interactive siblings inside it.\n  const pill = (inner: ReactNode) => (\n    <span\n      ref={snap ? snapRef : undefined}\n      data-tone={tone}\n      // The pill is the target's box here (§4): the body inside stretches to its height.\n      className={cn(CHIP_PILL, s.tail, radius, surface, target && CHIP_TOUCH_LARGE, snap && \"justify-center\", className)}\n    >\n      {inner}\n      {remove}\n    </span>\n  );\n  // The body inside a pill: no border or surface of its own (the pill has them), a\n  // hover wash in the text's own hue so it works on every tone.\n  const inner = cn(\n    \"inline-flex min-w-0 items-center self-stretch transition-colors\",\n    radius,\n    CHIP_RING,\n    s.split,\n    type,\n    !disabled && !locked && \"cursor-pointer hover:bg-current/10\",\n    disabled && !locked && \"cursor-default\",\n    locked && \"cursor-not-allowed\",\n  );\n\n  // ── The three shapes.\n  if (href && !disabled) {\n    // On this shape `onClick` is the link shape's, typed for the anchor.\n    const onLinkClick = onClick as ChipLinkProps[\"onClick\"];\n    const linkProps: ChipLinkProps = {\n      ...toneData,\n      ...rest,\n      ref: (remove ? ref : ownRef) as Ref<HTMLAnchorElement>,\n      href,\n      onClick: onLinkClick,\n      \"aria-current\": selected ? \"true\" : undefined,\n      className: remove ? inner : look,\n      children: body,\n    };\n    const render = pickLinkRenderer(renderLink, kitLink, href);\n    const link = render ? (\n      // Through a component rather than called here, so the forwarded ref arrives as\n      // an ordinary prop of an element and is never handed to a function mid-render.\n      <RenderedLink render={render} {...linkProps} />\n    ) : (\n      <a\n        ref={(remove ? ref : ownRef) as React.Ref<HTMLAnchorElement>}\n        {...toneData}\n        href={href}\n        aria-current={selected ? \"true\" : undefined}\n        onClick={onLinkClick}\n        className={remove ? inner : look}\n        {...rest}\n      >\n        {body}\n      </a>\n    );\n    return remove ? pill(link) : link;\n  }\n\n  // `!href`: a DISABLED link renders no link, and its link-shaped `onClick` must not\n  // turn it into a button instead — it falls through to the inert span, as before.\n  if (onClick && !href) {\n    const onButtonClick = onClick as (event: MouseEvent<HTMLButtonElement>) => void;\n    const ownDescribedBy = rest[\"aria-describedby\"];\n    const button = (\n      <button\n        ref={(remove ? ref : ownRef) as React.Ref<HTMLButtonElement>}\n        {...toneData}\n        type=\"button\"\n        onClick={(e) => {\n          // Locked: the press is swallowed — the chip saves on press, and a lock that\n          // let it through would toggle a state that is never stored.\n          if (locked) {\n            e.preventDefault();\n            return;\n          }\n          onButtonClick(e);\n        }}\n        disabled={disabled && !locked}\n        // Only when `selected` is PASSED: a chip with `onClick` and no `selected` is an\n        // action button (it does something), not a toggle (it is on or off), and\n        // announcing it \"not pressed\" would claim a state it does not have.\n        // A checkbox chip says \"checked\", not \"pressed\" — the same state in the words\n        // of the control it looks like.\n        role={isCheckbox ? \"checkbox\" : undefined}\n        aria-pressed={isCheckbox ? undefined : selected}\n        aria-checked={isCheckbox ? !!selected : undefined}\n        className={remove ? inner : look}\n        {...rest}\n        // After the spread, merged with it: the lock's state and reason are not the\n        // caller's to drop by passing an `aria-describedby` of their own.\n        aria-disabled={locked || (rest[\"aria-disabled\"] as boolean | \"true\" | \"false\" | undefined)}\n        aria-describedby={\n          locked ? [ownDescribedBy, reasonId].filter(Boolean).join(\" \") : (ownDescribedBy as string | undefined)\n        }\n      >\n        {body}\n      </button>\n    );\n    const shaped = remove ? pill(button) : button;\n    if (!locked) return shaped;\n    return (\n      <LockedReason lock={{ reason: disabledReason, reasonId }} display={disabledReasonDisplay}>\n        {shaped}\n      </LockedReason>\n    );\n  }\n\n  return (\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are\n       the roving-focus hooks, live only when the container passes `role` and `tabIndex`\n       (ChipInput does); the role is a prop, so the rule cannot see it. */\n    <span\n      ref={ownRef as React.Ref<HTMLSpanElement>}\n      {...toneData}\n      className={look}\n      tabIndex={tabIndex}\n      role={role}\n      onKeyDown={onKeyDown}\n      onFocus={onFocus}\n      {...rest}\n    >\n      {body}\n      {remove}\n    </span>\n  );\n}\n\n/** Calls a chip's `renderLink` with the props it was given — see its call site. */\nfunction RenderedLink({\n  render,\n  ...props\n}: ChipLinkProps & { render: (props: ChipLinkProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":"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","names":["inner"]}
+{"version":3,"sources":["../../src/components/chip.tsx"],"sourcesContent":["import { isValidElement, useCallback, useId } from \"react\";\nimport type { KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { Check, X } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { statusTone, type StatusKind } from \"../lib/status-tone\";\nimport { TOUCH_TARGET_LARGE } from \"./button-look\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { assignRef, LockedReason, type DisabledReasonDisplay } from \"./field-parts\";\nimport { hasContent } from \"../lib/presence\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport { useSnapEdges } from \"../lib/chip-edge-snap\";\n// The edge-snap engine lives in lib/chip-edge-snap.ts and ChipInput in chip-input.tsx\n// (MOD-9). `refreshChipEdges` is still this module's; of ChipInput only the types are,\n// since a runtime re-export would make chip ⇄ chip-input a cycle — the barrel exports\n// chip-input itself.\nexport { refreshChipEdges } from \"../lib/chip-edge-snap\";\nexport type { ChipInputLabels, ChipInputProps } from \"./chip-input\";\n\n/**\n * A chip: a compact pill carrying one value.\n *\n * Three jobs, deliberately one component. A chip can be inert (a tag on a row), a link\n * (a jump to a section), or a toggle (a filter that is on or off) — and the difference is\n * which prop you pass, not which component you pick. Keeping them together is what stops\n * an app growing three near-identical pills that drift apart; it is the shape this kit\n * already uses for `Button`, which is a link when it is given an href.\n *\n * A chip is not a `Button`. It is smaller, it is rounded to a pill, and it reads as a\n * VALUE rather than as an action — which matters because a row of eight buttons says\n * \"choose one of eight things to do\" and a row of eight chips says \"here are eight\n * things\". Using `Button` for both is the mistake this exists to prevent.\n */\n\nexport type ChipTone = \"neutral\" | \"brand\" | \"danger\" | \"warning\" | \"success\" | \"info\" | \"income\" | \"expense\" | ChipHue;\n/**\n * Categorical hues (0.10.0): colour that says \"a different value\" and nothing more —\n * kastlan's status-badge.tsx paints ~15 enums in 9 Tailwind hues by hand. Four of those\n * nine are semantic and already tones (green = `success`, yellow = `warning`, red =\n * `danger`, gray = `neutral`); these five are the rest, each a `--hue-*` token triple\n * in tokens.css with a light and a dark value. Use a semantic tone when the value HAS a\n * meaning (overdue is `danger`), a hue when it only needs telling apart (sent vs\n * accepted vs invoiced).\n */\nexport type ChipHue = \"blue\" | \"indigo\" | \"purple\" | \"teal\" | \"orange\";\n/** `lg` is the 44px touch target (`min-h-11`) a phone surface wants; `md` is ~28px.\n *  `xs` (0.10.0) is 11px type at `px-1.5` — keksdose's goal markers and budget-cell\n *  badges, which sit inside a figure's line and must not make it taller. */\nexport type ChipSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n/**\n * How much of the tone the chip wears.\n *\n * - `soft` (default): the tinted surface every chip has had.\n * - `outline`: the tone's border and text on NO surface — keksdose's DEV badge in the\n *   account menu and kastlan's 27 shadcn `variant=\"outline\"` badges, which sit on\n *   coloured rows where a second tint would muddy the row.\n * - `solid`: the tone as a fill under contrasting text — the \"count\" pill (unread\n *   messages, open tasks). It centres its content and sets figures tabular, so a\n *   one-digit count is a round dot and \"9\" → \"10\" does not jiggle the row.\n * - `dot` (0.10.0): no pill at all — a dot in the tone's colour before plain text, for\n *   a status in a dense list or a table column where eight tinted pills in a column\n *   would outshout the figures beside them (kastlan's unit picker already draws its\n *   UnitStatus this way, from a separate `dotColor` map).\n */\nexport type ChipVariant = \"soft\" | \"outline\" | \"solid\" | \"dot\";\n/** `pill` (default) is fully rounded; `square` has the small radius of a field or a\n *  button — for a chip that sits in a table cell or beside square controls. */\nexport type ChipShape = \"pill\" | \"square\";\n\nconst TONE: Record<ChipTone, { idle: string; selected: string }> = {\n  neutral: {\n    idle: \"border-subtle bg-surface-2 text-secondary\",\n    selected: \"border-strong bg-active text-primary\",\n  },\n  brand: {\n    idle: \"border-subtle bg-brand-soft text-brand-muted\",\n    selected: \"border-brand bg-brand text-brand-contrast\",\n  },\n  danger: {\n    idle: \"border-danger bg-danger-soft text-danger\",\n    selected: \"border-[var(--danger)] bg-danger text-danger-contrast\",\n  },\n  warning: {\n    idle: \"border-warning bg-warning-soft text-warning\",\n    selected: \"border-[var(--warning)] bg-warning-soft text-warning\",\n  },\n  success: {\n    idle: \"border-success bg-success-soft text-success\",\n    selected: \"border-[var(--success)] bg-success-soft text-success\",\n  },\n  info: {\n    idle: \"border-info bg-info-soft text-info\",\n    selected: \"border-[var(--info)] bg-info-soft text-info\",\n  },\n  // The money pair (Keksdose's direction toggle). Only the TEXT and the BORDER carry\n  // the tint, on the neutral chip's own surfaces: the money tokens are chosen for text\n  // contrast, and a filled amber pill beside an amber figure reads as one smear.\n  // `border-current` takes its hue from the text, so the two cannot drift apart.\n  income: {\n    idle: \"border-current/40 bg-surface-2 text-money-income\",\n    selected: \"border-current bg-active text-money-income\",\n  },\n  expense: {\n    idle: \"border-current/40 bg-surface-2 text-money-expense\",\n    selected: \"border-current bg-active text-money-expense\",\n  },\n  // The categorical hues: the `info` recipe with its own token triple, so a hue chip\n  // and a status chip in one row carry the same weight.\n  blue: {\n    idle: \"border-hue-blue bg-hue-blue-soft text-hue-blue\",\n    selected: \"border-[var(--hue-blue)] bg-hue-blue-soft text-hue-blue\",\n  },\n  indigo: {\n    idle: \"border-hue-indigo bg-hue-indigo-soft text-hue-indigo\",\n    selected: \"border-[var(--hue-indigo)] bg-hue-indigo-soft text-hue-indigo\",\n  },\n  purple: {\n    idle: \"border-hue-purple bg-hue-purple-soft text-hue-purple\",\n    selected: \"border-[var(--hue-purple)] bg-hue-purple-soft text-hue-purple\",\n  },\n  teal: {\n    idle: \"border-hue-teal bg-hue-teal-soft text-hue-teal\",\n    selected: \"border-[var(--hue-teal)] bg-hue-teal-soft text-hue-teal\",\n  },\n  orange: {\n    idle: \"border-hue-orange bg-hue-orange-soft text-hue-orange\",\n    selected: \"border-[var(--hue-orange)] bg-hue-orange-soft text-hue-orange\",\n  },\n};\n\n// `outline` idle looks: the tone's border and text, the surface left to whatever the\n// chip sits on. Selected still takes the tone's `selected` look (below), because an\n// outline toggle that stays an outline when on has no visible state.\nconst OUTLINE: Record<ChipTone, string> = {\n  neutral: \"border-strong bg-transparent text-secondary\",\n  // The brand AS TEXT is `--brand-muted` (0.33): `--brand` itself is solved to 3:1, a\n  // fill's boundary, and as text it fell to 3.0:1 in the derived dark presets.\n  brand: \"border-brand bg-transparent text-brand-muted\",\n  danger: \"border-danger bg-transparent text-danger\",\n  warning: \"border-warning bg-transparent text-warning\",\n  success: \"border-success bg-transparent text-success\",\n  info: \"border-info bg-transparent text-info\",\n  income: \"border-current/60 bg-transparent text-money-income\",\n  expense: \"border-current/60 bg-transparent text-money-expense\",\n  blue: \"border-hue-blue bg-transparent text-hue-blue\",\n  indigo: \"border-hue-indigo bg-transparent text-hue-indigo\",\n  purple: \"border-hue-purple bg-transparent text-hue-purple\",\n  teal: \"border-hue-teal bg-transparent text-hue-teal\",\n  orange: \"border-hue-orange bg-transparent text-hue-orange\",\n};\n\n// `solid`: the fill under its own foreground, `<fill>-contrast` (0.33, colour-roles\n// §5.1): white in light, the tone's 950 (the page, for money) on the dark theme's\n// pastels. Until 0.33 only brand and danger had one and the rest borrowed\n// `--text-inverse`, the surface colour — which left light warning at 4.24:1 and orange\n// at 4.38:1. Neutral keeps the inverse pair: a count pill, louder than the neutral\n// fill. The border goes transparent rather than away, so a solid chip is exactly as\n// tall as a soft one.\nconst SOLID: Record<ChipTone, string> = {\n  neutral: \"border-transparent bg-inverse text-inverse\",\n  brand: \"border-transparent bg-brand text-brand-contrast\",\n  danger: \"border-transparent bg-danger text-danger-contrast\",\n  warning: \"border-transparent bg-warning text-warning-contrast\",\n  success: \"border-transparent bg-success text-success-contrast\",\n  info: \"border-transparent bg-info text-info-contrast\",\n  income: \"border-transparent bg-money-pos text-money-income-contrast\",\n  expense: \"border-transparent bg-money-neg text-money-expense-contrast\",\n  blue: \"border-transparent bg-hue-blue text-hue-blue-contrast\",\n  indigo: \"border-transparent bg-hue-indigo text-hue-indigo-contrast\",\n  purple: \"border-transparent bg-hue-purple text-hue-purple-contrast\",\n  teal: \"border-transparent bg-hue-teal text-hue-teal-contrast\",\n  orange: \"border-transparent bg-hue-orange text-hue-orange-contrast\",\n};\n\n/** `dot`: the fill of the dot itself — the tone's strongest colour, which is the one\n *  chosen to read on the page surface in both themes. Neutral takes the muted ink: a\n *  grey dot is \"no particular state\", not a darker black. */\nconst DOT: Record<ChipTone, string> = {\n  neutral: \"bg-[var(--text-muted)]\",\n  brand: \"bg-brand\",\n  danger: \"bg-danger\",\n  warning: \"bg-warning\",\n  success: \"bg-success\",\n  info: \"bg-info\",\n  income: \"bg-money-income\",\n  expense: \"bg-money-expense\",\n  blue: \"bg-hue-blue\",\n  indigo: \"bg-hue-indigo\",\n  purple: \"bg-hue-purple\",\n  teal: \"bg-hue-teal\",\n  orange: \"bg-hue-orange\",\n};\n\n/** Per size: the dot's diameter. */\nconst DOT_SIZE: Record<ChipSize, string> = { xs: \"size-1.5\", sm: \"size-2\", md: \"size-2\", lg: \"size-2.5\" };\n\n/** The status-badge type (`caps`): a size step down, heavier and tracked, because\n *  capitals at body size shout and capitals untracked run together. Per size, so it\n *  replaces the size's own `text-*` through tailwind-merge. */\nconst CAPS: Record<ChipSize, string> = {\n  xs: \"text-micro font-semibold uppercase tracking-wider\",\n  sm: \"text-micro font-semibold uppercase tracking-wider\",\n  md: \"text-caption font-semibold uppercase tracking-wider\",\n  lg: \"text-xs font-semibold uppercase tracking-wider\",\n};\n\nfunction surfaceOf(tone: ChipTone, variant: ChipVariant, selected: boolean | undefined): string {\n  const palette = TONE[tone];\n  if (variant === \"dot\") {\n    // No surface and no border colour: the dot carries the tone, the text stays ink.\n    // The border goes transparent rather than away, so a dot chip lines up with a pill.\n    return selected\n      ? \"border-transparent bg-transparent font-medium text-primary\"\n      : \"border-transparent bg-transparent text-secondary\";\n  }\n  if (variant === \"solid\") {\n    // A solid chip is already the strongest look there is, so \"on\" is a ring round it.\n    return cn(SOLID[tone], selected && \"ring-2 ring-strong ring-offset-1 ring-offset-surface\");\n  }\n  if (selected) return palette.selected;\n  return variant === \"outline\" ? OUTLINE[tone] : palette.idle;\n}\n\n/** What {@link ChipProps.renderLink} is handed: everything the chip would have put on\n *  its own `<a>`. Spread it onto your router's link, mapping `href` to what the link\n *  calls it — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface ChipLinkProps {\n  href: string;\n  /** The chip's whole look — keep it, or the pill is a bare link. */\n  className: string;\n  children: ReactNode;\n  /** The chip's forwarded ref. React 19 passes it to a function component as a prop. */\n  ref?: Ref<HTMLAnchorElement>;\n  \"aria-current\"?: \"true\";\n  /**\n   * The chip's `onClick`, when it was given one — spread it onto the link with the\n   * rest. Carried here so a caller need not close over it twice: keksdose's admin pill\n   * in the account menu closes the menu on the way to /admin (account-menu.tsx), and\n   * with `onClick` on the Chip its `renderLink` stays the one-liner\n   * `({ href, ...p }) => <Link to={href} {...p} />`.\n   */\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  id?: string;\n  title?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\n/**\n * `body` is the whole pill when the chip is ONE element. When a link or a button also has\n * a dismiss control, the pill is a wrapper holding two siblings (see the note on\n * {@link Chip}): `split` is then the interactive part's own padding — the full start\n * inset, a short end one before the ×; `tail` is the wrapper's end inset after the ×.\n */\nconst SIZE: Record<ChipSize, { body: string; split: string; tail: string; icon: string; remove: string }> = {\n  xs: {\n    body: \"gap-1 px-1.5 py-0 text-caption leading-4\",\n    split: \"gap-1 ps-1.5 pe-0.5 py-0 text-caption leading-4\",\n    tail: \"pe-1\",\n    icon: \"size-3\",\n    remove: \"size-2.5\",\n  },\n  sm: {\n    body: \"gap-1 px-2 py-0.5 text-xs\",\n    split: \"gap-1 ps-2 pe-1 py-0.5 text-xs\",\n    tail: \"pe-1.5\",\n    icon: \"size-3\",\n    remove: \"size-3\",\n  },\n  md: {\n    body: \"gap-1.5 px-2.5 py-1 text-sm\",\n    split: \"gap-1.5 ps-2.5 pe-1.5 py-1 text-sm\",\n    tail: \"pe-2\",\n    icon: \"size-3.5\",\n    remove: \"size-3.5\",\n  },\n  lg: {\n    body: \"min-h-11 gap-2 px-4 py-2 text-sm\",\n    split: \"min-h-11 gap-2 ps-4 pe-2 py-2 text-sm\",\n    tail: \"min-h-11 pe-3.5\",\n    icon: \"size-4\",\n    remove: \"size-4\",\n  },\n};\n\nconst CHIP_PILL = \"inline-flex max-w-full items-center rounded-full border transition-colors\";\n\n// `focus-visible`, not `focus`: a chip commonly receives focus programmatically (the\n// ChipInput moves focus onto one after a removal) and a ring that appears on a\n// pointer click reads as a stuck selection.\nconst CHIP_RING = `${FOCUS_RING} focus-visible:ring-offset-1 focus-visible:ring-offset-surface`;\nconst CHIP_BASE = `${CHIP_PILL} ${CHIP_RING}`;\n\n/**\n * A text chip's label at Large and Extra large (0.32.1, keksdose's 0.32 report;\n * docs/text-size-harmonization.md §4 \"nothing truncates\"): it wraps instead of ending in\n * \"…\". keksdose's \"Zur Prüfung zurücklegen\" read \"Zur Prüfung zu…\" on a phone at Extra\n * large, which is a different instruction. No size has a fixed height (padding and\n * `min-h-*` only), so the pill grows with its lines; the mark before the text stays\n * centred on them, as in a pill. A `large:` rule, so Normal keeps its one-line chip.\n *\n * 0.33 (§10.17): the kit's one `truncate-until-large` (tokens.css) in place of this\n * file's own `truncate` + `large:whitespace-normal large:break-words`, as StatusDot's\n * label took it. The utility breaks with `overflow-wrap: anywhere`, which lowers the\n * label's min-content width to one letter: a status chip in an auto-sized table column\n * wants the column given a width at Large, or it is squeezed to a letter per line\n * (StatusDot's label was, in the showcase's tone table at 360 px, Extra large).\n */\nconst CHIP_LABEL_TRUNCATE = \"truncate-until-large\";\n\n/**\n * An interactive chip's touch target at Large and Extra large (docs/text-size-harmonization.md\n * §4: \"touch targets at least 48 px … for buttons, inputs, chips\"): a link or toggle chip\n * grows its pill to 48 px, as Button `sm` does, and centres what is in it once the\n * minimum width is what sizes it. An inert chip (a tag on a row) is no target and keeps\n * its size; a disabled one is no target either.\n */\nconst CHIP_TOUCH_LARGE = `${TOUCH_TARGET_LARGE} large:justify-center`;\n\n/**\n * The ×'s 48 px hit area at Large (§4) — IconButton's `2xs` pattern: a box that cannot\n * grow without growing the chip around it keeps its size and gets an invisible\n * `::after`, 48 px square and centred on it, which takes the taps a finger lands round\n * the glyph. On an inert removable chip (ChipInput's values) the × is the only target.\n */\nconst REMOVE_HIT_AREA_LARGE =\n  \"relative large:after:absolute large:after:inset-[calc((100%-48px)/2)] large:after:content-['']\";\n\ninterface ChipBaseProps {\n  children: ReactNode;\n  tone?: ChipTone;\n  /**\n   * What the value means as a status (0.49 KIT-8), instead of a `tone`: `good` (success),\n   * `attention` (warning), `problem` (danger), `active` (info), `inactive` (neutral) —\n   * {@link statusTone}. An explicit `tone` wins. Never `brand` for a status.\n   */\n  status?: StatusKind;\n  size?: ChipSize;\n  /** See {@link ChipVariant}. Default `soft`. */\n  variant?: ChipVariant;\n  /** See {@link ChipShape}. Default `pill`. */\n  shape?: ChipShape;\n  /**\n   * The uppercase, tracked \"status badge\" type — keksdose's ~25 PAID / DRAFT /\n   * OVERDUE / ADMIN badges, each spelling `uppercase tracking-wide text-[10px]` by\n   * hand. A flag rather than a fourth `variant` because it is TYPE, not surface: a\n   * status badge is soft, outlined or solid as the row needs, and a `variant=\"tag\"`\n   * would have had to pick one. Screen readers read the text as written, not as\n   * drawn, so write it in normal case.\n   */\n  caps?: boolean;\n  /**\n   * The leading glyph: a lucide component (`icon={Check}`, drawn at the chip's size), or\n   * — since 0.15.4 — a ready element (`icon={<Check className=\"text-success\" />}`)\n   * for a glyph whose colour or stroke carries a state; it is sized to the same box\n   * (keksdose live #358 built that slot by hand inside `children`).\n   */\n  icon?: LucideIcon | ReactElement;\n  /**\n   * Marks the chip as the current one — `aria-current` on a link, `aria-pressed` on a\n   * toggle.\n   *\n   * On an ON/OFF toggle, keep the LABEL the same in both states and let `selected`\n   * carry the state. A label that flips with it (\"Skip this month\" / \"Ask again this\n   * month\") is announced together with \"pressed\", and then says the opposite of what\n   * it does.\n   *\n   * A control that switches between two NAMED states (outflow ⇄ inflow) is not a\n   * toggle but an ACTION button: leave `selected` out, let the visible label and the\n   * tone follow the state (\"− Outflow\" / \"+ Inflow\"), and name the action in\n   * `aria-label` (\"Direction: outflow — tap for inflow\"). Without `selected` the chip\n   * reports no pressed state at all. A fixed label there contradicts the figure beside\n   * it — \"+ Outflow\" in green next to an inflow (keksdose #417).\n   */\n  selected?: boolean;\n  /**\n   * Checkbox mode (0.10.0), for a toggle chip (`onClick` + `selected`): a small box\n   * at the start that shows a tick when `selected`, and the button reports\n   * `role=\"checkbox\"` + `aria-checked` instead of `aria-pressed`. For a set of\n   * include/exclude choices where \"on\" must read as TICKED, not merely tinted —\n   * keksdose's add-group-card (the \"which categories come along\" pills), which put a\n   * real `<Checkbox>` inside a `<label>` pill by hand. The box is drawn in both\n   * states so ticking one never shifts its label.\n   */\n  checkbox?: boolean;\n  /** Renders a dismiss affordance. Works alongside `href`/`onClick` — see the note below. */\n  onRemove?: () => void;\n  /** Accessible name for the dismiss button. Default: `common.remove` from the\n   *  {@link UiKitProvider}, else \"Remove\". */\n  removeLabel?: string;\n  /** Disables the × ONLY — the chip itself stays a working link or toggle. For the\n   *  value that may not be removed right now (the last filter of a required set, a\n   *  tag the user may read but not edit) where `disabled` would also kill the chip's\n   *  own action. */\n  removeDisabled?: boolean;\n  disabled?: boolean;\n  className?: string;\n  /**\n   * Roving focus, for a container that manages a row of chips (see {@link ChipInput}).\n   * A chip with no `href`/`onClick` is inert and unfocusable by default; give it a\n   * `tabIndex` and a `role` and it becomes the thing arrow keys move between.\n   */\n  tabIndex?: number;\n  role?: string;\n  onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;\n  onFocus?: () => void;\n  /** Accessible name, when the visible text is not the whole story. */\n  \"aria-label\"?: string;\n  /** Any other ARIA attribute — `aria-describedby`, `aria-expanded`, `aria-controls`,\n   *  `aria-haspopup` — reaches the chip's interactive element. */\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  /** A test id, a `data-tour` anchor, or any other data attribute. */\n  [key: `data-${string}`]: unknown;\n  id?: string;\n  /** A native tooltip. For anything a user must read, prefer the kit's `Tooltip`. */\n  title?: string;\n  /**\n   * Even hairlines on fractional-ratio displays (0.18.0). At a device-pixel ratio of\n   * 1.25 — a 125 % Windows display, or 125 % zoom — Chrome draws a chip's two 1px\n   * side borders on different sub-pixel phases, one crisp and one a half-strength\n   * smear that reads as a thinner line (worst on the 60 %-alpha `danger` border).\n   * `snapEdges` widens the chip by under 4px, from where it sits, so the two edges\n   * rasterise as mirror images, and centres its content in the extra.\n   *\n   * Off by default: it reads the chip's position (batched for every snapped chip into\n   * one pass a frame, through one shared observer), and the fix is only as fresh as the\n   * last pass — it re-snaps on render, resize, zoom and ratio change, but not when\n   * something else moves the chip; call {@link refreshChipEdges} then. At an integer\n   * ratio, and at 1.5, it writes nothing. Turn it on for status chips that sit in a\n   * column and are compared side by side; a chip with no visible border (`dot`) has\n   * nothing to snap.\n   */\n  snapEdges?: boolean;\n  /** The interactive element — the pill, or a split pill's body. A React 19 ref prop\n   *  since 0.34 (MOD-4, refactor audit 2026-10); it was `forwardRef`. */\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * A chip is a link OR a button, never both — so the types say so. Before 0.7.0 both were\n * accepted and `onClick` was silently dropped whenever `href` was set. A LINK may still\n * run code on its way (close the menu it sits in): that is an `onClick` typed for the\n * anchor, on the link shape, and the pill stays a link — no `aria-pressed`, no button.\n * That shape wants a definite `href` string, so a bare `onClick` is always the\n * button's, with a button's event.\n */\nexport type ChipProps = ChipBaseProps &\n  (\n    | {\n        /** Renders the chip as a link. */\n        href?: string;\n        onClick?: never;\n        /**\n         * Renders the link for `href` — pass your router's `<Link>` here, since a\n         * plain `<a>` reloads a single-page app (keksdose's account-menu admin pill).\n         * Default: the `<UiKitProvider linkComponent>`, then `<a>`. Ignored without\n         * `href`.\n         *\n         * A render function rather than an `as={Link}`, for three reasons. It is the\n         * API `StatTile` already has (`renderLink`), so a consumer learns it once.\n         * Router links do not take `href` — react-router's takes `to` — so an `as`\n         * would either have to pass props through untyped or teach the kit about one\n         * router; here the caller maps `href` onto its own link in one line, fully\n         * typed. And it keeps `href` as THE link prop, which is what the `href` /\n         * `onClick` exclusion below is typed on: the pill is a link because it has an\n         * href, whichever element draws it.\n         */\n        renderLink?: (props: ChipLinkProps) => ReactElement;\n        commit?: never;\n        disabledReason?: never;\n        disabledReasonDisplay?: never;\n      }\n    | {\n        /** The link shape again, with an `onClick`. `href` is a required string here,\n         *  which is what lets TypeScript tell this shape from the button's: a bare\n         *  `onClick` can only be the button's, and keeps its button event. */\n        href: string;\n        /** Runs on the link's click, before the navigation — keksdose's admin pill\n         *  closes the account menu with it. Reaches a `renderLink` link as\n         *  {@link ChipLinkProps.onClick}. Not called on a disabled chip, which renders\n         *  no link. */\n        onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n        /** See the link shape above. */\n        renderLink?: (props: ChipLinkProps) => ReactElement;\n        commit?: never;\n        disabledReason?: never;\n        disabledReasonDisplay?: never;\n      }\n    | {\n        href?: never;\n        renderLink?: never;\n        /** Renders the chip as a toggle button. Mutually exclusive with `href`. Receives\n         *  the click, so a chip inside a clickable row can `stopPropagation()`. */\n        onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n        /**\n         * Why the toggle cannot be pressed right now — {@link Button}'s\n         * `disabledReason`, on the chip's button shape (keksdose K3: a filter or flag\n         * chip that saves on press, under a read-only lock). The chip stays focusable\n         * and `aria-disabled`, a press (and its `onRemove` ×) does nothing, and the\n         * reason describes the chip — as a line under it at Large and on a touch\n         * screen, in the kit {@link Tooltip} otherwise (see `disabledReasonDisplay`).\n         * Wins over `disabled`. A link chip navigates rather than commits, so it takes\n         * neither this nor `commit`; an inert chip has nothing to refuse.\n         */\n        disabledReason?: ReactNode;\n        /**\n         * Where `disabledReason` shows (0.32, docs/text-size-harmonization.md §4 \"No fact\n         * only in a tooltip\") — {@link Button}'s `disabledReasonDisplay`: by default a line\n         * under the chip at Large and Extra large and on a touch screen, where a bubble\n         * cannot be hovered open, and the tooltip otherwise and inside\n         * `CompactControls`. `\"line\"` / `\"tooltip\"` force one. See\n         * {@link DisabledReasonDisplay}.\n         */\n        disabledReasonDisplay?: DisabledReasonDisplay;\n        /** This chip COMMITS — pressing it saves. Under a locked\n         *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n         *  reason, as {@link Button}'s `commit` does. */\n        commit?: CommitScope;\n      }\n  );\n\n/**\n * Note on `onRemove` with `href`/`onClick`: a button cannot be nested inside a button or\n * a link, so when both are present the chip renders a wrapper holding TWO siblings — the\n * interactive body and the dismiss control. The WRAPPER is the visual pill (border, tone,\n * `className`) and the two sit inside it, so the × reads as part of the chip; the body's\n * focus ring is drawn on the body alone, and `ref`, `id` and the ARIA props still reach\n * the body — the interactive element.\n */\nexport function Chip({\n  ref,\n  children,\n  tone: toneProp,\n  status,\n  size = \"md\",\n  variant = \"soft\",\n  shape = \"pill\",\n  caps = false,\n  icon: Icon,\n  selected,\n  checkbox = false,\n  href,\n  renderLink,\n  onClick,\n  onRemove,\n  removeLabel,\n  removeDisabled = false,\n  disabled = false,\n  className,\n  tabIndex,\n  role,\n  onKeyDown,\n  onFocus,\n  snapEdges = false,\n  disabledReason: ownDisabledReason,\n  disabledReasonDisplay,\n  commit,\n  ...rest\n}: ChipProps) {\n  const tone: ChipTone = toneProp ?? (status ? statusTone(status) : \"neutral\");\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { remove: removeLabel });\n  const reasonId = useId();\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  // Only the BUTTON shape commits: a link navigates, an inert chip does nothing.\n  const locked = Boolean(onClick) && !href && hasContent(disabledReason);\n  const kitLink = useKitLink();\n  const s = SIZE[size];\n  const interactive = !!href || !!onClick;\n  // One radius for every rounded piece — the pill, the body inside a split pill, the ×\n  // — so a square chip has no round focus ring inside it.\n  const radius = shape === \"square\" ? (size === \"sm\" || size === \"xs\" ? \"rounded\" : \"rounded-md\") : \"rounded-full\";\n  const dot = variant === \"dot\";\n  const type = cn(caps && CAPS[size], variant === \"solid\" && \"justify-center tabular-nums\");\n  const surface = cn(\n    surfaceOf(tone, variant, selected),\n    // A reason wins over `disabled`: the focusable kind of disabled, with the cursor\n    // that says \"refused\" rather than \"nothing here\".\n    disabled && !locked && \"cursor-default opacity-50\",\n    locked && \"cursor-not-allowed opacity-50\",\n  );\n  const snap = snapEdges && !dot;\n  // A finger's target at Large (§4): what can be pressed, refused or not — see\n  // CHIP_TOUCH_LARGE. A disabled link renders as the inert span below and is none.\n  const target = interactive && (!disabled || locked);\n  const snapRef = useSnapEdges(snap);\n  // The visible pill carries the snap: the whole chip, or the wrapper of a split one\n  // (whose body gets the forwarded ref instead).\n  const ownRef = useCallback(\n    (el: HTMLElement | null) => {\n      snapRef(el);\n      assignRef(ref, el);\n    },\n    [snapRef, ref],\n  );\n  const look = cn(\n    CHIP_BASE,\n    s.body,\n    type,\n    radius,\n    surface,\n    interactive && !disabled && !locked && \"cursor-pointer hover:brightness-[0.97] dark:hover:brightness-110\",\n    // §4: a link or toggle is a 48 px target at Large — a locked one too, since it is\n    // still focusable and still says why when pressed.\n    target && CHIP_TOUCH_LARGE,\n    // An inert dot chip is text in a column: no inset, so it aligns with the header.\n    dot && !interactive && \"px-0\",\n    // The under-4px a snap adds is split between the two sides, not stacked at the end.\n    snap && \"justify-center\",\n    className,\n  );\n\n  // The tone as data on the visible pill (0.34, refactor audit 2026-10, TST-9): a stable\n  // hook for a test or a caller's selector, where the surface classes are the kit's to\n  // change. On the pill wrapper of a split chip, else on the chip itself; before the\n  // caller's props, so a `data-tone` of their own wins.\n  const toneData = { \"data-tone\": onRemove ? undefined : tone } as Record<string, string | undefined>;\n\n  // The checkbox box, only on the toggle shape it has meaning on.\n  const isCheckbox = checkbox && !!onClick && !href;\n  const body = (\n    <>\n      {isCheckbox && (\n        <span\n          aria-hidden\n          data-chip-check=\"\"\n          className={cn(\n            \"flex shrink-0 items-center justify-center rounded-sm border\",\n            s.icon,\n            selected ? \"border-current bg-current/15\" : \"border-current/50\",\n          )}\n        >\n          {selected && <Check className=\"size-full\" strokeWidth={3} />}\n        </span>\n      )}\n      {dot && <span aria-hidden data-chip-dot=\"\" className={cn(\"shrink-0 rounded-full\", DOT_SIZE[size], DOT[tone])} />}\n      {Icon &&\n        (isValidElement(Icon) ? (\n          <span aria-hidden className={cn(s.icon, \"inline-flex shrink-0 [&>svg]:size-full\")}>\n            {Icon}\n          </span>\n        ) : (\n          <Icon className={cn(s.icon, \"shrink-0\")} aria-hidden />\n        ))}\n      {/* Text truncates at Normal and wraps at Large (CHIP_LABEL_TRUNCATE). Mixed\n          children (an icon and a word) sit in a row instead: as a plain span, the svg —\n          a block under Tailwind's preflight — stacked above the text (keksdose live\n          #358). */}\n      <span\n        className={cn(\n          \"min-w-0\",\n          typeof children === \"string\" || typeof children === \"number\"\n            ? CHIP_LABEL_TRUNCATE\n            : \"inline-flex items-center gap-1 [&>svg]:size-[1em] [&>svg]:shrink-0\",\n        )}\n      >\n        {children}\n      </span>\n    </>\n  );\n\n  const remove = onRemove ? (\n    <button\n      type=\"button\"\n      // The name carries WHAT is being removed, not just \"Remove\" — a screen-reader user\n      // tabbing a row of eight dismiss buttons otherwise hears the same word eight times\n      // with no way to tell which one they are on.\n      // Composed through `common.fieldValue` because the punctuation between the two\n      // halves is the language's, not ours. A chip whose content is not plain text\n      // has no value to name, and gets the bare verb rather than a dangling colon.\n      aria-label={typeof children === \"string\" && children ? common.fieldValue(common.remove, children) : common.remove}\n      onClick={(e) => {\n        // The chip may itself be a link; removing it must not also follow it.\n        e.preventDefault();\n        e.stopPropagation();\n        // Removing a value from a chip that commits is a commit too.\n        if (locked) return;\n        onRemove();\n      }}\n      disabled={(disabled && !locked) || removeDisabled}\n      aria-disabled={locked || undefined}\n      aria-describedby={locked ? reasonId : undefined}\n      className={cn(\n        // Logical margins: the × sits at the END of the pill, which is the left in RTL.\n        \"-me-0.5 ms-0.5 shrink-0 p-0.5 transition-colors\",\n        shape === \"square\" ? \"rounded-sm\" : \"rounded-full\",\n        FOCUS_RING,\n        // §4: the × is a 48 px target at Large without growing the chip around it.\n        REMOVE_HIT_AREA_LARGE,\n        !locked && \"hover:bg-active\",\n        locked && \"cursor-not-allowed\",\n        ((disabled && !locked) || removeDisabled) && \"pointer-events-none\",\n        // A disabled chip is already dimmed as a whole; dimming the × again on top\n        // would take it to a quarter. `removeDisabled` alone dims just the ×.\n        removeDisabled && !disabled && \"opacity-40\",\n      )}\n    >\n      <X className={s.remove} aria-hidden />\n    </button>\n  ) : null;\n\n  // ── The combined shape: one pill, two interactive siblings inside it.\n  const pill = (inner: ReactNode) => (\n    <span\n      ref={snap ? snapRef : undefined}\n      data-tone={tone}\n      // The pill is the target's box here (§4): the body inside stretches to its height.\n      className={cn(\n        CHIP_PILL,\n        s.tail,\n        radius,\n        surface,\n        target && CHIP_TOUCH_LARGE,\n        snap && \"justify-center\",\n        className,\n      )}\n    >\n      {inner}\n      {remove}\n    </span>\n  );\n  // The body inside a pill: no border or surface of its own (the pill has them), a\n  // hover wash in the text's own hue so it works on every tone.\n  const inner = cn(\n    \"inline-flex min-w-0 items-center self-stretch transition-colors\",\n    radius,\n    CHIP_RING,\n    s.split,\n    type,\n    !disabled && !locked && \"cursor-pointer hover:bg-current/10\",\n    disabled && !locked && \"cursor-default\",\n    locked && \"cursor-not-allowed\",\n  );\n\n  // ── The three shapes.\n  if (href && !disabled) {\n    // On this shape `onClick` is the link shape's, typed for the anchor.\n    const onLinkClick = onClick as ChipLinkProps[\"onClick\"];\n    const linkProps: ChipLinkProps = {\n      ...toneData,\n      ...rest,\n      ref: (remove ? ref : ownRef) as Ref<HTMLAnchorElement>,\n      href,\n      onClick: onLinkClick,\n      \"aria-current\": selected ? \"true\" : undefined,\n      className: remove ? inner : look,\n      children: body,\n    };\n    const render = pickLinkRenderer(renderLink, kitLink, href);\n    const link = render ? (\n      // Through a component rather than called here, so the forwarded ref arrives as\n      // an ordinary prop of an element and is never handed to a function mid-render.\n      <RenderedLink render={render} {...linkProps} />\n    ) : (\n      <a\n        ref={(remove ? ref : ownRef) as React.Ref<HTMLAnchorElement>}\n        {...toneData}\n        href={href}\n        aria-current={selected ? \"true\" : undefined}\n        onClick={onLinkClick}\n        className={remove ? inner : look}\n        {...rest}\n      >\n        {body}\n      </a>\n    );\n    return remove ? pill(link) : link;\n  }\n\n  // `!href`: a DISABLED link renders no link, and its link-shaped `onClick` must not\n  // turn it into a button instead — it falls through to the inert span, as before.\n  if (onClick && !href) {\n    const onButtonClick = onClick as (event: MouseEvent<HTMLButtonElement>) => void;\n    const ownDescribedBy = rest[\"aria-describedby\"];\n    const button = (\n      <button\n        ref={(remove ? ref : ownRef) as React.Ref<HTMLButtonElement>}\n        {...toneData}\n        type=\"button\"\n        onClick={(e) => {\n          // Locked: the press is swallowed — the chip saves on press, and a lock that\n          // let it through would toggle a state that is never stored.\n          if (locked) {\n            e.preventDefault();\n            return;\n          }\n          onButtonClick(e);\n        }}\n        disabled={disabled && !locked}\n        // Only when `selected` is PASSED: a chip with `onClick` and no `selected` is an\n        // action button (it does something), not a toggle (it is on or off), and\n        // announcing it \"not pressed\" would claim a state it does not have.\n        // A checkbox chip says \"checked\", not \"pressed\" — the same state in the words\n        // of the control it looks like.\n        role={isCheckbox ? \"checkbox\" : undefined}\n        aria-pressed={isCheckbox ? undefined : selected}\n        aria-checked={isCheckbox ? !!selected : undefined}\n        className={remove ? inner : look}\n        {...rest}\n        // After the spread, merged with it: the lock's state and reason are not the\n        // caller's to drop by passing an `aria-describedby` of their own.\n        aria-disabled={locked || (rest[\"aria-disabled\"] as boolean | \"true\" | \"false\" | undefined)}\n        aria-describedby={\n          locked ? [ownDescribedBy, reasonId].filter(Boolean).join(\" \") : (ownDescribedBy as string | undefined)\n        }\n      >\n        {body}\n      </button>\n    );\n    const shaped = remove ? pill(button) : button;\n    if (!locked) return shaped;\n    return (\n      <LockedReason lock={{ reason: disabledReason, reasonId }} display={disabledReasonDisplay}>\n        {shaped}\n      </LockedReason>\n    );\n  }\n\n  return (\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are\n       the roving-focus hooks, live only when the container passes `role` and `tabIndex`\n       (ChipInput does); the role is a prop, so the rule cannot see it. */\n    <span\n      ref={ownRef as React.Ref<HTMLSpanElement>}\n      {...toneData}\n      className={look}\n      tabIndex={tabIndex}\n      role={role}\n      onKeyDown={onKeyDown}\n      onFocus={onFocus}\n      {...rest}\n    >\n      {body}\n      {remove}\n    </span>\n  );\n}\n\n/** Calls a chip's `renderLink` with the props it was given — see its call site. */\nfunction RenderedLink({ render, ...props }: ChipLinkProps & { render: (props: ChipLinkProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":"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","names":["inner"]}

package/dist/components/choice-card.js

@@ -56,76 +56,64 @@ function ChoiceCard({
   useEffect(() => {
     if (local.current) local.current.indeterminate = mixed;
   });
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      htmlFor: inputId,
-      className: cn(CARD, disabled && CARD_DISABLED, isInvalid && CARD_INVALID, className),
-      children: [
-        /* @__PURE__ */ jsxs("span", { className: "relative flex h-5 shrink-0 items-center", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: setRef,
-              id: inputId,
-              disabled,
-              required,
-              ...rest,
-              type,
-              "aria-labelledby": rest["aria-labelledby"] ?? titleId,
-              "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
-              "aria-describedby": mergeDescribedBy(
-                rest["aria-describedby"],
-                showDescription && descriptionId,
-                showError && errorId
-              ),
-              onChange: (e) => {
-                onChange?.(e);
-                onCheckedChange?.(e.target.checked);
-              },
-              className: cn(
-                BOX,
-                type === "radio" ? RADIO : CHECKBOX,
-                mixed && "border-brand bg-brand",
-                inputClassName
-              )
-            }
-          ),
-          type === "checkbox" && (mixed ? /* @__PURE__ */ jsx(
-            Minus,
-            {
-              "aria-hidden": true,
-              strokeWidth: 3,
-              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-brand-contrast peer-checked:visible"
-            }
-          ))
-        ] }),
-        Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-secondary" }),
-        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs(
-            "span",
-            {
-              id: titleId,
-              className: "block select-none text-sm font-medium leading-5 text-primary",
-              children: [
-                title,
-                required && !inGroup && /* @__PURE__ */ jsx(RequiredMark, {})
-              ]
-            }
+  return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: cn(CARD, disabled && CARD_DISABLED, isInvalid && CARD_INVALID, className), children: [
+    /* @__PURE__ */ jsxs("span", { className: "relative flex h-5 shrink-0 items-center", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: setRef,
+          id: inputId,
+          disabled,
+          required,
+          ...rest,
+          type,
+          "aria-labelledby": rest["aria-labelledby"] ?? titleId,
+          "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+          "aria-describedby": mergeDescribedBy(
+            rest["aria-describedby"],
+            showDescription && descriptionId,
+            showError && errorId
           ),
-          showDescription && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "mt-0.5 block text-xs text-muted", children: description }),
-          showError && /* @__PURE__ */ jsx("span", { id: errorId, className: cn("block", FIELD_ERROR_CLASS), children: error })
-        ] })
-      ]
-    }
-  );
+          onChange: (e) => {
+            onChange?.(e);
+            onCheckedChange?.(e.target.checked);
+          },
+          className: cn(BOX, type === "radio" ? RADIO : CHECKBOX, mixed && "border-brand bg-brand", inputClassName)
+        }
+      ),
+      type === "checkbox" && (mixed ? /* @__PURE__ */ jsx(
+        Minus,
+        {
+          "aria-hidden": true,
+          strokeWidth: 3,
+          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-brand-contrast peer-checked:visible"
+        }
+      ))
+    ] }),
+    Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-secondary" }),
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          id: titleId,
+          className: "block select-none text-sm font-medium leading-5 text-primary",
+          children: [
+            title,
+            required && !inGroup && /* @__PURE__ */ jsx(RequiredMark, {})
+          ]
+        }
+      ),
+      showDescription && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "mt-0.5 block text-xs text-muted", children: description }),
+      showError && /* @__PURE__ */ jsx("span", { id: errorId, className: cn("block", FIELD_ERROR_CLASS), children: error })
+    ] })
+  ] });
 }
 const META_TONE = {
   muted: "text-muted",
@@ -173,11 +161,7 @@ function ActionCard({
     className
   );
   const labelledBy = rest["aria-labelledby"] ?? titleId;
-  const describedBy = mergeDescribedBy(
-    rest["aria-describedby"],
-    showDescription && descriptionId,
-    showMeta && metaId
-  );
+  const describedBy = mergeDescribedBy(rest["aria-describedby"], showDescription && descriptionId, showMeta && metaId);
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: cn("mt-0.5 size-5 shrink-0", ICON_TONE[iconTone], iconClassName) }),
     /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 space-y-1", children: [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/choice-card.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useEffect, useId, useRef } from \"react\";\nimport type {\n  ButtonHTMLAttributes,\n  ChangeEvent,\n  ComponentType,\n  InputHTMLAttributes,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { Check, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { assignRef, FIELD_ERROR_CLASS, mergeDescribedBy, useFieldError } from \"./field-parts\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\n\n/**\n * A checkbox or a radio, presented as a bordered card: a title, a line of description,\n * an optional icon — and the whole card is the hit area.\n *\n * Kastlan built this twice by hand: the \"manage roles\" dialog wraps a `Checkbox` in a\n * bordered `<label>` per role, and the lease wizard's \"set up recurring rent\" option is\n * a `Checkbox` with `className=\"rounded-md border p-3\"`. Neither had a focus ring on\n * the card or a checked look beyond the 16px box, and the role picker's border stayed\n * grey whether the role was on or off.\n *\n * Still a native `<input>` underneath, for the reasons {@link Checkbox} gives: it\n * submits with its form, answers to `required`, and a radio set sharing a `name` gets\n * the browser's own arrow-key behaviour — which already flips in a right-to-left page.\n * The card is a `<label>` wrapped round it, so a click anywhere on the card lands on\n * the input; the input is NAMED by the title alone and DESCRIBED by the description,\n * so a screen reader does not read the whole card as its name.\n *\n * Checked is said three ways, none of them colour alone: the box's tick (or the\n * radio's dot), a heavier border, and the brand-tinted surface.\n */\n\nexport type ChoiceCardType = \"checkbox\" | \"radio\";\n\nexport interface ChoiceCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"title\"> {\n  /** \"checkbox\" (default) for an on/off option or one of several; \"radio\" for one of\n   *  a set — give every card of the set the same `name`, or use {@link ChoiceCardGroup}. */\n  type?: ChoiceCardType;\n  /** The option's name — the input's accessible name. */\n  title: ReactNode;\n  /** A line or two under the title. Attached with `aria-describedby`. */\n  description?: ReactNode;\n  /** A Lucide icon (or any component taking a `className`), shown at the card's start. */\n  icon?: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** Checkbox only: \"some but not all\". See {@link CheckboxProps.indeterminate}. */\n  indeterminate?: boolean;\n  /** Paints the card and sets `aria-invalid` together. */\n  invalid?: boolean;\n  /** What is wrong, in the caller's words. Rendered in the card and attached with\n   *  `aria-describedby`; implies `invalid`. */\n  error?: ReactNode;\n  /** The checked state as a boolean. Fires alongside `onChange`, never instead of it. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>`. `className` styles the card. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit. Reaches the `<input>` as the native `required` (a\n   * `<form>` refuses to submit without it, a screen reader announces \"required\"),\n   * and draws the kit's `aria-hidden` star after the title — {@link Checkbox}'s\n   * contract, down to writing the title WITHOUT a literal \"*\". Inside a\n   * {@link ChoiceCardGroup} the star goes on the legend instead, once.\n   */\n  required?: boolean;\n  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it\n   *  was `forwardRef`. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/** Set by {@link ChoiceCardGroup}: its legend carries the one required mark, so the\n *  cards inside it draw none of their own. Private — not a prop a caller could set\n *  by accident on a lone card. */\nconst InGroupContext = createContext(false);\n\n/** The kit's required mark — {@link Label}'s: `aria-hidden`, because the word is\n *  announced from the control and a star read out in the name is only noise. */\nfunction RequiredMark() {\n  return (\n    <span aria-hidden className=\"ms-0.5 text-danger\">\n      *\n    </span>\n  );\n}\n\n// The card. `has-[:checked]` and `has-[:focus-visible]` read the INPUT's state, so an\n// uncontrolled card (`defaultChecked`, a plain form) looks right with no React state.\nconst CARD =\n  \"flex cursor-pointer items-start gap-3 rounded-lg border border-subtle bg-surface p-3 shadow-sm transition-colors \" +\n  \"hover:border-strong hover:bg-hover \" +\n  \"has-[:checked]:border-brand has-[:checked]:bg-brand-soft has-[:checked]:ring-1 has-[:checked]:ring-brand \" +\n  // The focus mark is the CARD's, not the 16px box's: the card is what was clicked and\n  // what the eye is on. An OUTLINE rather than a ring, because the checked state already\n  // spends the ring — two `ring-*` widths on one element are decided by stylesheet\n  // order, and the loser would be the focus mark. Offset, so the two never merge. Its\n  // width is the kit's focus frame (0.32, §5: `--focus-ring-width`, 3 px under More\n  // contrast) — `FOCUS_RING` itself is a ring, which this mark cannot be.\n  \"has-[:focus-visible]:outline-focus has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-brand \" +\n  // Read from the input too, so a card disabled by its `<fieldset>` fades as well.\n  \"has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60\";\n\n// No hover offer on a card that cannot be changed.\nconst CARD_DISABLED = \"hover:border-subtle hover:bg-surface\";\n\nconst CARD_INVALID =\n  \"border-danger-strong ring-1 ring-danger-strong has-[:checked]:border-danger-strong has-[:checked]:ring-danger-strong\";\n\nconst BOX =\n  \"peer size-4 shrink-0 appearance-none border border-strong bg-surface transition-colors \" +\n  \"checked:border-brand focus:outline-none disabled:cursor-not-allowed\";\nconst CHECKBOX = \"rounded checked:bg-brand\";\n// A radio's dot is its BORDER: a 0.3125rem brand border (5px at Normal) round a\n// surface-coloured 0.375rem centre. No glyph to lay over it, and in rem since 0.32\n// (§3.2) it scales with the box — a 5px border on a 24px box at 150 % was a ring, not a\n// dot.\nconst RADIO = \"rounded-full checked:border-[0.3125rem]\";\n\nexport function ChoiceCard({\n  ref,\n  type = \"checkbox\",\n  title,\n  description,\n  icon: Icon,\n  indeterminate = false,\n  invalid,\n  error,\n  onCheckedChange,\n  onChange,\n  className,\n  inputClassName,\n  id,\n  disabled,\n  required,\n  ...rest\n}: ChoiceCardProps) {\n  const inGroup = useContext(InGroupContext);\n  const generated = useId();\n  const inputId = id ?? generated;\n  const titleId = `${inputId}-title`;\n  const descriptionId = `${inputId}-description`;\n  const errorId = `${inputId}-error`;\n  const showDescription = hasContent(description);\n  const showError = hasContent(error);\n  const isInvalid = Boolean(invalid) || showError;\n  const mixed = type === \"checkbox\" && indeterminate;\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, as Checkbox does: a click clears the DOM property.\n  useEffect(() => {\n    if (local.current) local.current.indeterminate = mixed;\n  });\n\n  return (\n    <label\n      htmlFor={inputId}\n      className={cn(CARD, disabled && CARD_DISABLED, isInvalid && CARD_INVALID, className)}\n    >\n      {/* A 20px cell, so the box centres on the title's first line (text-sm). */}\n      <span className=\"relative flex h-5 shrink-0 items-center\">\n        <input\n          ref={setRef}\n          id={inputId}\n          disabled={disabled}\n          required={required}\n          {...rest}\n          type={type}\n          aria-labelledby={rest[\"aria-labelledby\"] ?? titleId}\n          aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n          aria-describedby={mergeDescribedBy(\n            rest[\"aria-describedby\"],\n            showDescription && descriptionId,\n            showError && errorId,\n          )}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            onChange?.(e);\n            onCheckedChange?.(e.target.checked);\n          }}\n          className={cn(\n            BOX,\n            type === \"radio\" ? RADIO : CHECKBOX,\n            mixed && \"border-brand bg-brand\",\n            inputClassName,\n          )}\n        />\n        {type === \"checkbox\" &&\n          (mixed ? (\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      {Icon && <Icon aria-hidden className=\"mt-0.5 size-4 shrink-0 text-secondary\" />}\n      <span className=\"min-w-0 flex-1\">\n        <span\n          id={titleId}\n          // `select-none`: a double-click to toggle twice would otherwise select the words.\n          className=\"block select-none text-sm font-medium leading-5 text-primary\"\n        >\n          {title}\n          {required && !inGroup && <RequiredMark />}\n        </span>\n        {showDescription && (\n          <span id={descriptionId} className=\"mt-0.5 block text-xs text-muted\">\n            {description}\n          </span>\n        )}\n        {showError && (\n          <span id={errorId} className={cn(\"block\", FIELD_ERROR_CLASS)}>\n            {error}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n}\n\n/* ── ActionCard ──────────────────────────────────────────────────────────── */\n\n/** The colour of {@link ActionCardProps.meta}. */\nexport type ActionCardMetaTone = \"muted\" | \"warning\" | \"danger\" | \"info\" | \"success\";\n\nconst META_TONE: Record<ActionCardMetaTone, string> = {\n  muted: \"text-muted\",\n  warning: \"text-warning\",\n  danger: \"text-danger\",\n  info: \"text-info\",\n  success: \"text-success\",\n};\n\n/** The colour of {@link ActionCardProps.icon}. `default` is the secondary text colour\n *  the icon has always had; `brand` tints it (keksdose's privacy enrolment) with the\n *  brand as text, `--brand-muted` (0.33, docs/colour-roles-harmonization.md §5.5):\n *  `--brand` read 3.03:1 on the card's hover in the derived dark presets. */\nexport type ActionCardIconTone = \"default\" | \"muted\" | \"brand\" | \"warning\" | \"danger\" | \"info\" | \"success\";\n\nconst ICON_TONE: Record<ActionCardIconTone, string> = {\n  default: \"text-secondary\",\n  ...META_TONE,\n  brand: \"text-brand-muted\",\n};\n\n/** What {@link ActionCardProps.renderLink} (and the provider's `linkComponent`) is\n *  handed. Spread it onto your router's link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface ActionCardLinkProps {\n  href: string;\n  /** The card's whole look — keep it. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  id?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface ActionCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"title\"> {\n  /** What the card does — the button's accessible name. */\n  title: ReactNode;\n  /** A line or two on what it means. Attached with `aria-describedby`. */\n  description?: ReactNode;\n  /**\n   * What it costs, or what else to know — a third line, said as prose and not as fine\n   * print (keksdose's custody choice: both options are legitimate and neither is free,\n   * so a card listing only benefits would be selling rather than explaining). Attached\n   * with `aria-describedby` after the description.\n   */\n  meta?: ReactNode;\n  /** The meta line's colour. Default `muted`; keksdose's cost line is `warning`. */\n  metaTone?: ActionCardMetaTone;\n  /** A Lucide icon (or any component taking a `className`), shown at the card's start. */\n  icon?: ChoiceCardProps[\"icon\"];\n  /** The icon's colour. Default `default` (the secondary text colour). */\n  iconTone?: ActionCardIconTone;\n  /** Classes on the icon, after {@link iconTone} — a size, a tinted tile behind it. */\n  iconClassName?: string;\n  /**\n   * Makes the card a LINK to another page rather than a button that acts: kastlan's\n   * section tiles on the group overview (group-overview-page), each an icon, a name and\n   * a line on what is there. A real `<a href>`, so a middle click opens it in a new\n   * tab. A `disabled` card renders the inert button instead — a link cannot be\n   * disabled. The ref then reaches the `<a>`.\n   */\n  href?: string;\n  /** Your router's link for an in-app `href`. Default: the `<UiKitProvider\n   *  linkComponent>`, then a plain `<a>`. Ignored without `href`. */\n  renderLink?: (props: ActionCardLinkProps) => ReactElement;\n  /** The `<button>` — or, with `href`, the `<a>`. A React 19 ref prop since 0.34 (MOD-4,\n   *  refactor audit 2026-10); it was `forwardRef`. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * A {@link ChoiceCard} that ACTS rather than holds a state: a `<button>` with the\n * card's icon, title and description, plus a `meta` line, that runs `onClick` the\n * moment it is pressed. keksdose's privacy enrolment (privacy-enroll-dialog:345,\n * `CustodyOption`) offers two custody modes this way — picking one IS the next step,\n * so there is no checked state to show and no \"Continue\" to press after it. With\n * `href` it is the same card as a link (kastlan's overview section tiles).\n *\n * A separate component rather than `ChoiceCard as=\"button\"`: a ChoiceCard is an\n * `<input>` (its ref, its `checked`, its form value), and a button shares none of it.\n * Named by the title alone and described by the rest, so a screen reader hears\n * \"Keep the key yourself, button\" and then the explanation, not one long name.\n */\nexport function ActionCard({\n  ref,\n  title,\n  description,\n  meta,\n  metaTone = \"muted\",\n  icon: Icon,\n  iconTone = \"default\",\n  iconClassName,\n  href,\n  renderLink,\n  className,\n  id,\n  type = \"button\",\n  ...rest\n}: ActionCardProps) {\n  const kitLink = useKitLink();\n  const generated = useId();\n  const baseId = id ?? generated;\n  const titleId = `${baseId}-title`;\n  const descriptionId = `${baseId}-description`;\n  const metaId = `${baseId}-meta`;\n  const showDescription = hasContent(description);\n  const showMeta = hasContent(meta);\n  const look = cn(\n    \"flex w-full items-start gap-3 rounded-lg border border-subtle bg-surface p-3 text-start shadow-sm transition-colors\",\n    \"hover:border-brand hover:bg-hover\",\n    // The outline, as on ChoiceCard: the card is what the eye is on — the focus frame's\n    // width (§5).\n    \"focus:outline-none focus-visible:outline-focus focus-visible:outline-offset-2 focus-visible:outline-brand\",\n    \"disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:border-subtle disabled:hover:bg-surface\",\n    className,\n  );\n  const labelledBy = rest[\"aria-labelledby\"] ?? titleId;\n  const describedBy = mergeDescribedBy(\n    rest[\"aria-describedby\"],\n    showDescription && descriptionId,\n    showMeta && metaId,\n  );\n  const body = (\n    <>\n      {Icon && <Icon aria-hidden className={cn(\"mt-0.5 size-5 shrink-0\", ICON_TONE[iconTone], iconClassName)} />}\n      <span className=\"min-w-0 flex-1 space-y-1\">\n        <span id={titleId} className=\"block text-sm font-medium leading-5 text-primary\">\n          {title}\n        </span>\n        {showDescription && (\n          <span id={descriptionId} className=\"block text-sm text-secondary\">\n            {description}\n          </span>\n        )}\n        {showMeta && (\n          <span id={metaId} className={cn(\"block text-sm\", META_TONE[metaTone])}>\n            {meta}\n          </span>\n        )}\n      </span>\n    </>\n  );\n\n  if (href !== undefined && !rest.disabled) {\n    // The button-only attributes stay behind; `aria-*`, `data-*` and handlers ride along.\n    const {\n      disabled: _disabled,\n      form: _form,\n      formAction: _formAction,\n      name: _name,\n      value: _value,\n      onClick,\n      ...anchorRest\n    } = rest;\n    const linkProps: ActionCardLinkProps = {\n      ...(anchorRest as Partial<ActionCardLinkProps>),\n      ref: ref as unknown as Ref<HTMLAnchorElement>,\n      id,\n      href,\n      \"aria-labelledby\": labelledBy,\n      \"aria-describedby\": describedBy,\n      onClick: onClick as unknown as ActionCardLinkProps[\"onClick\"],\n      className: look,\n      children: body,\n    };\n    const render = pickLinkRenderer(renderLink, kitLink, href);\n    if (render) return <RenderedActionLink render={render} {...linkProps} />;\n    const { children: content, ...anchor } = linkProps;\n    return <a {...anchor}>{content}</a>;\n  }\n\n  return (\n    <button\n      ref={ref}\n      id={id}\n      type={type}\n      {...rest}\n      aria-labelledby={labelledBy}\n      aria-describedby={describedBy}\n      className={look}\n    >\n      {body}\n    </button>\n  );\n}\n\n/** Calls the link renderer as a component, so a router link's hooks are its own. */\nfunction RenderedActionLink({\n  render,\n  ...props\n}: ActionCardLinkProps & { render: (props: ActionCardLinkProps) => ReactElement }) {\n  return render(props);\n}\n\n/* ── ChoiceCardGroup ─────────────────────────────────────────────────────── */\n\nexport interface ChoiceCardOption<T extends string> {\n  value: T;\n  title: ReactNode;\n  description?: ReactNode;\n  icon?: ChoiceCardProps[\"icon\"];\n  disabled?: boolean;\n}\n\ninterface ChoiceCardGroupBaseProps<T extends string> {\n  options: ChoiceCardOption<T>[];\n  /** The question the cards answer. Rendered as the fieldset's `<legend>`, which is\n   *  what names the group. Without one, pass `aria-label`. */\n  legend?: ReactNode;\n  \"aria-label\"?: string;\n  /** Shared by every input — what a plain form submits under. Generated if omitted. */\n  name?: string;\n  /** Classes for the card grid. Default: one column, two from `sm` up. */\n  className?: string;\n  /** Classes for every card. */\n  cardClassName?: string;\n  disabled?: boolean;\n  /** What is wrong with the answer as a whole. Rendered under the cards and attached\n   *  to the fieldset. */\n  error?: ReactNode;\n  /**\n   * An answer is needed. Draws the required star after the `legend` (none without\n   * one — the name then comes from `aria-label`, which has nowhere to draw it), and\n   * reaches the inputs as the native `required`:\n   *  - radios: every radio of the set, which is how HTML marks a radio group — the\n   *    group is satisfied by any one of them, and each announces \"required\";\n   *  - checkboxes: every box while NONE is ticked, dropped from all of them once one\n   *    is — \"at least one\", which checkboxes cannot say natively. A form then refuses\n   *    to submit an empty set, and nothing is left demanding a second box.\n   */\n  required?: boolean;\n}\n\n/** One of the set: radios. `value` is `null` while nothing is chosen. */\nexport interface ChoiceCardSingleProps<T extends string> extends ChoiceCardGroupBaseProps<T> {\n  multiple?: false;\n  value: T | null;\n  onChange: (value: T) => void;\n}\n\n/** Any of the set: checkboxes. */\nexport interface ChoiceCardMultipleProps<T extends string> extends ChoiceCardGroupBaseProps<T> {\n  multiple: true;\n  value: T[];\n  onChange: (value: T[]) => void;\n}\n\nexport type ChoiceCardGroupProps<T extends string> =\n  | ChoiceCardSingleProps<T>\n  | ChoiceCardMultipleProps<T>;\n\n/**\n * A set of {@link ChoiceCard}s answering one question, in a `<fieldset>`.\n *\n * `multiple` picks the input: radios (one of the set, the browser's arrow keys\n * between them) or checkboxes (any of the set, Tab between them). The value is kept\n * in the order of `options`, not the order the boxes were ticked, so a list saved\n * from it does not depend on the order someone clicked in.\n */\nexport function ChoiceCardGroup<T extends string>(props: ChoiceCardGroupProps<T>) {\n  const { options, legend, name, className, cardClassName, disabled, error, required } = props;\n  const generated = useId();\n  const groupName = name ?? generated;\n  // Every field's error wiring (DUP-8): the message under the cards, the group's\n  // description, and every card painted.\n  const field = useFieldError(error, false, undefined);\n\n  const isChecked = (v: T) => (props.multiple ? props.value.includes(v) : props.value === v);\n  const toggle = (v: T, on: boolean) => {\n    if (props.multiple) {\n      const next = new Set(props.value);\n      if (on) next.add(v);\n      else next.delete(v);\n      props.onChange(options.map((o) => o.value).filter((x) => next.has(x)));\n    } else if (on) {\n      props.onChange(v);\n    }\n  };\n\n  return (\n    <InGroupContext.Provider value={true}>\n      <fieldset\n        aria-label={props[\"aria-label\"]}\n        aria-describedby={field.describedBy}\n        disabled={disabled}\n        className=\"min-w-0\"\n      >\n        {legend !== undefined && (\n          <legend className=\"mb-2 text-sm font-medium text-primary\">\n            {legend}\n            {required && <RequiredMark />}\n          </legend>\n        )}\n        <div className={cn(\"grid grid-cols-1 gap-2 sm:grid-cols-2\", className)}>\n          {options.map((o) => (\n            <ChoiceCard\n              key={o.value}\n              type={props.multiple ? \"checkbox\" : \"radio\"}\n              name={groupName}\n              value={o.value}\n              title={o.title}\n              description={o.description}\n              icon={o.icon}\n              disabled={o.disabled}\n              invalid={field.isInvalid}\n              required={required && (!props.multiple || props.value.length === 0) ? true : undefined}\n              checked={isChecked(o.value)}\n              onCheckedChange={(on) => toggle(o.value, on)}\n              className={cardClassName}\n            />\n          ))}\n        </div>\n        {field.errorEl}\n      </fieldset>\n    </InGroupContext.Provider>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/choice-card.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useEffect, useId, useRef } from \"react\";\nimport type {\n  ButtonHTMLAttributes,\n  ChangeEvent,\n  ComponentType,\n  InputHTMLAttributes,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { Check, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { assignRef, FIELD_ERROR_CLASS, mergeDescribedBy, useFieldError } from \"./field-parts\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\n\n/**\n * A checkbox or a radio, presented as a bordered card: a title, a line of description,\n * an optional icon — and the whole card is the hit area.\n *\n * Kastlan built this twice by hand: the \"manage roles\" dialog wraps a `Checkbox` in a\n * bordered `<label>` per role, and the lease wizard's \"set up recurring rent\" option is\n * a `Checkbox` with `className=\"rounded-md border p-3\"`. Neither had a focus ring on\n * the card or a checked look beyond the 16px box, and the role picker's border stayed\n * grey whether the role was on or off.\n *\n * Still a native `<input>` underneath, for the reasons {@link Checkbox} gives: it\n * submits with its form, answers to `required`, and a radio set sharing a `name` gets\n * the browser's own arrow-key behaviour — which already flips in a right-to-left page.\n * The card is a `<label>` wrapped round it, so a click anywhere on the card lands on\n * the input; the input is NAMED by the title alone and DESCRIBED by the description,\n * so a screen reader does not read the whole card as its name.\n *\n * Checked is said three ways, none of them colour alone: the box's tick (or the\n * radio's dot), a heavier border, and the brand-tinted surface.\n */\n\nexport type ChoiceCardType = \"checkbox\" | \"radio\";\n\nexport interface ChoiceCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"title\"> {\n  /** \"checkbox\" (default) for an on/off option or one of several; \"radio\" for one of\n   *  a set — give every card of the set the same `name`, or use {@link ChoiceCardGroup}. */\n  type?: ChoiceCardType;\n  /** The option's name — the input's accessible name. */\n  title: ReactNode;\n  /** A line or two under the title. Attached with `aria-describedby`. */\n  description?: ReactNode;\n  /** A Lucide icon (or any component taking a `className`), shown at the card's start. */\n  icon?: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** Checkbox only: \"some but not all\". See {@link CheckboxProps.indeterminate}. */\n  indeterminate?: boolean;\n  /** Paints the card and sets `aria-invalid` together. */\n  invalid?: boolean;\n  /** What is wrong, in the caller's words. Rendered in the card and attached with\n   *  `aria-describedby`; implies `invalid`. */\n  error?: ReactNode;\n  /** The checked state as a boolean. Fires alongside `onChange`, never instead of it. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>`. `className` styles the card. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit. Reaches the `<input>` as the native `required` (a\n   * `<form>` refuses to submit without it, a screen reader announces \"required\"),\n   * and draws the kit's `aria-hidden` star after the title — {@link Checkbox}'s\n   * contract, down to writing the title WITHOUT a literal \"*\". Inside a\n   * {@link ChoiceCardGroup} the star goes on the legend instead, once.\n   */\n  required?: boolean;\n  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it\n   *  was `forwardRef`. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/** Set by {@link ChoiceCardGroup}: its legend carries the one required mark, so the\n *  cards inside it draw none of their own. Private — not a prop a caller could set\n *  by accident on a lone card. */\nconst InGroupContext = createContext(false);\n\n/** The kit's required mark — {@link Label}'s: `aria-hidden`, because the word is\n *  announced from the control and a star read out in the name is only noise. */\nfunction RequiredMark() {\n  return (\n    <span aria-hidden className=\"ms-0.5 text-danger\">\n      *\n    </span>\n  );\n}\n\n// The card. `has-[:checked]` and `has-[:focus-visible]` read the INPUT's state, so an\n// uncontrolled card (`defaultChecked`, a plain form) looks right with no React state.\nconst CARD =\n  \"flex cursor-pointer items-start gap-3 rounded-lg border border-subtle bg-surface p-3 shadow-sm transition-colors \" +\n  \"hover:border-strong hover:bg-hover \" +\n  \"has-[:checked]:border-brand has-[:checked]:bg-brand-soft has-[:checked]:ring-1 has-[:checked]:ring-brand \" +\n  // The focus mark is the CARD's, not the 16px box's: the card is what was clicked and\n  // what the eye is on. An OUTLINE rather than a ring, because the checked state already\n  // spends the ring — two `ring-*` widths on one element are decided by stylesheet\n  // order, and the loser would be the focus mark. Offset, so the two never merge. Its\n  // width is the kit's focus frame (0.32, §5: `--focus-ring-width`, 3 px under More\n  // contrast) — `FOCUS_RING` itself is a ring, which this mark cannot be.\n  \"has-[:focus-visible]:outline-focus has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-brand \" +\n  // Read from the input too, so a card disabled by its `<fieldset>` fades as well.\n  \"has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60\";\n\n// No hover offer on a card that cannot be changed.\nconst CARD_DISABLED = \"hover:border-subtle hover:bg-surface\";\n\nconst CARD_INVALID =\n  \"border-danger-strong ring-1 ring-danger-strong has-[:checked]:border-danger-strong has-[:checked]:ring-danger-strong\";\n\nconst BOX =\n  \"peer size-4 shrink-0 appearance-none border border-strong bg-surface transition-colors \" +\n  \"checked:border-brand focus:outline-none disabled:cursor-not-allowed\";\nconst CHECKBOX = \"rounded checked:bg-brand\";\n// A radio's dot is its BORDER: a 0.3125rem brand border (5px at Normal) round a\n// surface-coloured 0.375rem centre. No glyph to lay over it, and in rem since 0.32\n// (§3.2) it scales with the box — a 5px border on a 24px box at 150 % was a ring, not a\n// dot.\nconst RADIO = \"rounded-full checked:border-[0.3125rem]\";\n\nexport function ChoiceCard({\n  ref,\n  type = \"checkbox\",\n  title,\n  description,\n  icon: Icon,\n  indeterminate = false,\n  invalid,\n  error,\n  onCheckedChange,\n  onChange,\n  className,\n  inputClassName,\n  id,\n  disabled,\n  required,\n  ...rest\n}: ChoiceCardProps) {\n  const inGroup = useContext(InGroupContext);\n  const generated = useId();\n  const inputId = id ?? generated;\n  const titleId = `${inputId}-title`;\n  const descriptionId = `${inputId}-description`;\n  const errorId = `${inputId}-error`;\n  const showDescription = hasContent(description);\n  const showError = hasContent(error);\n  const isInvalid = Boolean(invalid) || showError;\n  const mixed = type === \"checkbox\" && indeterminate;\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, as Checkbox does: a click clears the DOM property.\n  useEffect(() => {\n    if (local.current) local.current.indeterminate = mixed;\n  });\n\n  return (\n    <label htmlFor={inputId} className={cn(CARD, disabled && CARD_DISABLED, isInvalid && CARD_INVALID, className)}>\n      {/* A 20px cell, so the box centres on the title's first line (text-sm). */}\n      <span className=\"relative flex h-5 shrink-0 items-center\">\n        <input\n          ref={setRef}\n          id={inputId}\n          disabled={disabled}\n          required={required}\n          {...rest}\n          type={type}\n          aria-labelledby={rest[\"aria-labelledby\"] ?? titleId}\n          aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n          aria-describedby={mergeDescribedBy(\n            rest[\"aria-describedby\"],\n            showDescription && descriptionId,\n            showError && errorId,\n          )}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            onChange?.(e);\n            onCheckedChange?.(e.target.checked);\n          }}\n          className={cn(BOX, type === \"radio\" ? RADIO : CHECKBOX, mixed && \"border-brand bg-brand\", inputClassName)}\n        />\n        {type === \"checkbox\" &&\n          (mixed ? (\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      {Icon && <Icon aria-hidden className=\"mt-0.5 size-4 shrink-0 text-secondary\" />}\n      <span className=\"min-w-0 flex-1\">\n        <span\n          id={titleId}\n          // `select-none`: a double-click to toggle twice would otherwise select the words.\n          className=\"block select-none text-sm font-medium leading-5 text-primary\"\n        >\n          {title}\n          {required && !inGroup && <RequiredMark />}\n        </span>\n        {showDescription && (\n          <span id={descriptionId} className=\"mt-0.5 block text-xs text-muted\">\n            {description}\n          </span>\n        )}\n        {showError && (\n          <span id={errorId} className={cn(\"block\", FIELD_ERROR_CLASS)}>\n            {error}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n}\n\n/* ── ActionCard ──────────────────────────────────────────────────────────── */\n\n/** The colour of {@link ActionCardProps.meta}. */\nexport type ActionCardMetaTone = \"muted\" | \"warning\" | \"danger\" | \"info\" | \"success\";\n\nconst META_TONE: Record<ActionCardMetaTone, string> = {\n  muted: \"text-muted\",\n  warning: \"text-warning\",\n  danger: \"text-danger\",\n  info: \"text-info\",\n  success: \"text-success\",\n};\n\n/** The colour of {@link ActionCardProps.icon}. `default` is the secondary text colour\n *  the icon has always had; `brand` tints it (keksdose's privacy enrolment) with the\n *  brand as text, `--brand-muted` (0.33, docs/colour-roles-harmonization.md §5.5):\n *  `--brand` read 3.03:1 on the card's hover in the derived dark presets. */\nexport type ActionCardIconTone = \"default\" | \"muted\" | \"brand\" | \"warning\" | \"danger\" | \"info\" | \"success\";\n\nconst ICON_TONE: Record<ActionCardIconTone, string> = {\n  default: \"text-secondary\",\n  ...META_TONE,\n  brand: \"text-brand-muted\",\n};\n\n/** What {@link ActionCardProps.renderLink} (and the provider's `linkComponent`) is\n *  handed. Spread it onto your router's link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface ActionCardLinkProps {\n  href: string;\n  /** The card's whole look — keep it. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  id?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface ActionCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"title\"> {\n  /** What the card does — the button's accessible name. */\n  title: ReactNode;\n  /** A line or two on what it means. Attached with `aria-describedby`. */\n  description?: ReactNode;\n  /**\n   * What it costs, or what else to know — a third line, said as prose and not as fine\n   * print (keksdose's custody choice: both options are legitimate and neither is free,\n   * so a card listing only benefits would be selling rather than explaining). Attached\n   * with `aria-describedby` after the description.\n   */\n  meta?: ReactNode;\n  /** The meta line's colour. Default `muted`; keksdose's cost line is `warning`. */\n  metaTone?: ActionCardMetaTone;\n  /** A Lucide icon (or any component taking a `className`), shown at the card's start. */\n  icon?: ChoiceCardProps[\"icon\"];\n  /** The icon's colour. Default `default` (the secondary text colour). */\n  iconTone?: ActionCardIconTone;\n  /** Classes on the icon, after {@link iconTone} — a size, a tinted tile behind it. */\n  iconClassName?: string;\n  /**\n   * Makes the card a LINK to another page rather than a button that acts: kastlan's\n   * section tiles on the group overview (group-overview-page), each an icon, a name and\n   * a line on what is there. A real `<a href>`, so a middle click opens it in a new\n   * tab. A `disabled` card renders the inert button instead — a link cannot be\n   * disabled. The ref then reaches the `<a>`.\n   */\n  href?: string;\n  /** Your router's link for an in-app `href`. Default: the `<UiKitProvider\n   *  linkComponent>`, then a plain `<a>`. Ignored without `href`. */\n  renderLink?: (props: ActionCardLinkProps) => ReactElement;\n  /** The `<button>` — or, with `href`, the `<a>`. A React 19 ref prop since 0.34 (MOD-4,\n   *  refactor audit 2026-10); it was `forwardRef`. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * A {@link ChoiceCard} that ACTS rather than holds a state: a `<button>` with the\n * card's icon, title and description, plus a `meta` line, that runs `onClick` the\n * moment it is pressed. keksdose's privacy enrolment (privacy-enroll-dialog:345,\n * `CustodyOption`) offers two custody modes this way — picking one IS the next step,\n * so there is no checked state to show and no \"Continue\" to press after it. With\n * `href` it is the same card as a link (kastlan's overview section tiles).\n *\n * A separate component rather than `ChoiceCard as=\"button\"`: a ChoiceCard is an\n * `<input>` (its ref, its `checked`, its form value), and a button shares none of it.\n * Named by the title alone and described by the rest, so a screen reader hears\n * \"Keep the key yourself, button\" and then the explanation, not one long name.\n */\nexport function ActionCard({\n  ref,\n  title,\n  description,\n  meta,\n  metaTone = \"muted\",\n  icon: Icon,\n  iconTone = \"default\",\n  iconClassName,\n  href,\n  renderLink,\n  className,\n  id,\n  type = \"button\",\n  ...rest\n}: ActionCardProps) {\n  const kitLink = useKitLink();\n  const generated = useId();\n  const baseId = id ?? generated;\n  const titleId = `${baseId}-title`;\n  const descriptionId = `${baseId}-description`;\n  const metaId = `${baseId}-meta`;\n  const showDescription = hasContent(description);\n  const showMeta = hasContent(meta);\n  const look = cn(\n    \"flex w-full items-start gap-3 rounded-lg border border-subtle bg-surface p-3 text-start shadow-sm transition-colors\",\n    \"hover:border-brand hover:bg-hover\",\n    // The outline, as on ChoiceCard: the card is what the eye is on — the focus frame's\n    // width (§5).\n    \"focus:outline-none focus-visible:outline-focus focus-visible:outline-offset-2 focus-visible:outline-brand\",\n    \"disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:border-subtle disabled:hover:bg-surface\",\n    className,\n  );\n  const labelledBy = rest[\"aria-labelledby\"] ?? titleId;\n  const describedBy = mergeDescribedBy(rest[\"aria-describedby\"], showDescription && descriptionId, showMeta && metaId);\n  const body = (\n    <>\n      {Icon && <Icon aria-hidden className={cn(\"mt-0.5 size-5 shrink-0\", ICON_TONE[iconTone], iconClassName)} />}\n      <span className=\"min-w-0 flex-1 space-y-1\">\n        <span id={titleId} className=\"block text-sm font-medium leading-5 text-primary\">\n          {title}\n        </span>\n        {showDescription && (\n          <span id={descriptionId} className=\"block text-sm text-secondary\">\n            {description}\n          </span>\n        )}\n        {showMeta && (\n          <span id={metaId} className={cn(\"block text-sm\", META_TONE[metaTone])}>\n            {meta}\n          </span>\n        )}\n      </span>\n    </>\n  );\n\n  if (href !== undefined && !rest.disabled) {\n    // The button-only attributes stay behind; `aria-*`, `data-*` and handlers ride along.\n    const {\n      disabled: _disabled,\n      form: _form,\n      formAction: _formAction,\n      name: _name,\n      value: _value,\n      onClick,\n      ...anchorRest\n    } = rest;\n    const linkProps: ActionCardLinkProps = {\n      ...(anchorRest as Partial<ActionCardLinkProps>),\n      ref: ref as unknown as Ref<HTMLAnchorElement>,\n      id,\n      href,\n      \"aria-labelledby\": labelledBy,\n      \"aria-describedby\": describedBy,\n      onClick: onClick as unknown as ActionCardLinkProps[\"onClick\"],\n      className: look,\n      children: body,\n    };\n    const render = pickLinkRenderer(renderLink, kitLink, href);\n    if (render) return <RenderedActionLink render={render} {...linkProps} />;\n    const { children: content, ...anchor } = linkProps;\n    return <a {...anchor}>{content}</a>;\n  }\n\n  return (\n    <button\n      ref={ref}\n      id={id}\n      type={type}\n      {...rest}\n      aria-labelledby={labelledBy}\n      aria-describedby={describedBy}\n      className={look}\n    >\n      {body}\n    </button>\n  );\n}\n\n/** Calls the link renderer as a component, so a router link's hooks are its own. */\nfunction RenderedActionLink({\n  render,\n  ...props\n}: ActionCardLinkProps & { render: (props: ActionCardLinkProps) => ReactElement }) {\n  return render(props);\n}\n\n/* ── ChoiceCardGroup ─────────────────────────────────────────────────────── */\n\nexport interface ChoiceCardOption<T extends string> {\n  value: T;\n  title: ReactNode;\n  description?: ReactNode;\n  icon?: ChoiceCardProps[\"icon\"];\n  disabled?: boolean;\n}\n\ninterface ChoiceCardGroupBaseProps<T extends string> {\n  options: ChoiceCardOption<T>[];\n  /** The question the cards answer. Rendered as the fieldset's `<legend>`, which is\n   *  what names the group. Without one, pass `aria-label`. */\n  legend?: ReactNode;\n  \"aria-label\"?: string;\n  /** Shared by every input — what a plain form submits under. Generated if omitted. */\n  name?: string;\n  /** Classes for the card grid. Default: one column, two from `sm` up. */\n  className?: string;\n  /** Classes for every card. */\n  cardClassName?: string;\n  disabled?: boolean;\n  /** What is wrong with the answer as a whole. Rendered under the cards and attached\n   *  to the fieldset. */\n  error?: ReactNode;\n  /**\n   * An answer is needed. Draws the required star after the `legend` (none without\n   * one — the name then comes from `aria-label`, which has nowhere to draw it), and\n   * reaches the inputs as the native `required`:\n   *  - radios: every radio of the set, which is how HTML marks a radio group — the\n   *    group is satisfied by any one of them, and each announces \"required\";\n   *  - checkboxes: every box while NONE is ticked, dropped from all of them once one\n   *    is — \"at least one\", which checkboxes cannot say natively. A form then refuses\n   *    to submit an empty set, and nothing is left demanding a second box.\n   */\n  required?: boolean;\n}\n\n/** One of the set: radios. `value` is `null` while nothing is chosen. */\nexport interface ChoiceCardSingleProps<T extends string> extends ChoiceCardGroupBaseProps<T> {\n  multiple?: false;\n  value: T | null;\n  onChange: (value: T) => void;\n}\n\n/** Any of the set: checkboxes. */\nexport interface ChoiceCardMultipleProps<T extends string> extends ChoiceCardGroupBaseProps<T> {\n  multiple: true;\n  value: T[];\n  onChange: (value: T[]) => void;\n}\n\nexport type ChoiceCardGroupProps<T extends string> = ChoiceCardSingleProps<T> | ChoiceCardMultipleProps<T>;\n\n/**\n * A set of {@link ChoiceCard}s answering one question, in a `<fieldset>`.\n *\n * `multiple` picks the input: radios (one of the set, the browser's arrow keys\n * between them) or checkboxes (any of the set, Tab between them). The value is kept\n * in the order of `options`, not the order the boxes were ticked, so a list saved\n * from it does not depend on the order someone clicked in.\n */\nexport function ChoiceCardGroup<T extends string>(props: ChoiceCardGroupProps<T>) {\n  const { options, legend, name, className, cardClassName, disabled, error, required } = props;\n  const generated = useId();\n  const groupName = name ?? generated;\n  // Every field's error wiring (DUP-8): the message under the cards, the group's\n  // description, and every card painted.\n  const field = useFieldError(error, false, undefined);\n\n  const isChecked = (v: T) => (props.multiple ? props.value.includes(v) : props.value === v);\n  const toggle = (v: T, on: boolean) => {\n    if (props.multiple) {\n      const next = new Set(props.value);\n      if (on) next.add(v);\n      else next.delete(v);\n      props.onChange(options.map((o) => o.value).filter((x) => next.has(x)));\n    } else if (on) {\n      props.onChange(v);\n    }\n  };\n\n  return (\n    <InGroupContext.Provider value={true}>\n      <fieldset\n        aria-label={props[\"aria-label\"]}\n        aria-describedby={field.describedBy}\n        disabled={disabled}\n        className=\"min-w-0\"\n      >\n        {legend !== undefined && (\n          <legend className=\"mb-2 text-sm font-medium text-primary\">\n            {legend}\n            {required && <RequiredMark />}\n          </legend>\n        )}\n        <div className={cn(\"grid grid-cols-1 gap-2 sm:grid-cols-2\", className)}>\n          {options.map((o) => (\n            <ChoiceCard\n              key={o.value}\n              type={props.multiple ? \"checkbox\" : \"radio\"}\n              name={groupName}\n              value={o.value}\n              title={o.title}\n              description={o.description}\n              icon={o.icon}\n              disabled={o.disabled}\n              invalid={field.isInvalid}\n              required={required && (!props.multiple || props.value.length === 0) ? true : undefined}\n              checked={isChecked(o.value)}\n              onCheckedChange={(on) => toggle(o.value, on)}\n              className={cardClassName}\n            />\n          ))}\n        </div>\n        {field.errorEl}\n      </fieldset>\n    </InGroupContext.Provider>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/column-mapper-labels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/column-mapper-labels.ts"],"sourcesContent":["// The English words of ./column-mapper, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./column-mapper re-exports them.\n\nimport type { ColumnMapperLabels } from \"./column-mapper\";\n\n/** {@link ColumnMapperLabels.requiredRoleShort}'s English — and its fallback for a\n *  provider whose labels predate the key. */\nexport const markedShort = (role: string) => `${role} *`;\n\nexport const DEFAULT_COLUMN_MAPPER_LABELS: ColumnMapperLabels = {\n  paste: \"Paste a table\",\n  pasteHint:\n    \"Copy the rows out of a spreadsheet and paste them here, or drop a CSV or text file.\",\n  chooseFile: \"Choose a file\",\n  readError: (name) => `“${name}” could not be read`,\n  headerRow: \"The first line names the columns\",\n  summary: (columns, rows) =>\n    `${columns} ${columns === 1 ? \"column\" : \"columns\"}, ${rows} ${rows === 1 ? \"row\" : \"rows\"}`,\n  separatorSemicolon: \"separated by semicolons\",\n  separatorComma: \"separated by commas\",\n  separatorTab: \"separated by tabs\",\n  separatorSpace: \"separated by spaces\",\n  decimalComma: \"decimal comma (1,5)\",\n  decimalPoint: \"decimal point (1.5)\",\n  unreadCount: (count) =>\n    count === 1\n      ? \"1 line could not be read\"\n      : `${count} lines could not be read`,\n  unreadLine: (line) => `Line ${line} could not be read`,\n  unreadMore: (count) => `…and ${count} more`,\n  noRows: \"No line of this text reads as a row of the table.\",\n  table: \"Columns and their roles\",\n  columnN: (n) => `Column ${n}`,\n  roleOf: (column) => `What does column “${column}” hold?`,\n  ignore: \"Ignore\",\n  requiredRole: (role) => `${role} (required)`,\n  requiredRoleShort: markedShort,\n  previewOf: (shown, total) =>\n    shown === 1\n      ? `The first of ${total} rows`\n      : `The first ${shown} of ${total} rows`,\n  oneOf: (roles) => `either ${roles}`,\n  missing: (roles) => `Still needed: ${roles}.`,\n};\n"],"mappings":";AAQO,MAAM,cAAc,CAAC,SAAiB,GAAG,IAAI;AAE7C,MAAM,+BAAmD;AAAA,EAC9D,OAAO;AAAA,EACP,WACE;AAAA,EACF,YAAY;AAAA,EACZ,WAAW,CAAC,SAAS,SAAI,IAAI;AAAA,EAC7B,WAAW;AAAA,EACX,SAAS,CAAC,SAAS,SACjB,GAAG,OAAO,IAAI,YAAY,IAAI,WAAW,SAAS,KAAK,IAAI,IAAI,SAAS,IAAI,QAAQ,MAAM;AAAA,EAC5F,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,aAAa,CAAC,UACZ,UAAU,IACN,6BACA,GAAG,KAAK;AAAA,EACd,YAAY,CAAC,SAAS,QAAQ,IAAI;AAAA,EAClC,YAAY,CAAC,UAAU,aAAQ,KAAK;AAAA,EACpC,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS,CAAC,MAAM,UAAU,CAAC;AAAA,EAC3B,QAAQ,CAAC,WAAW,0BAAqB,MAAM;AAAA,EAC/C,QAAQ;AAAA,EACR,cAAc,CAAC,SAAS,GAAG,IAAI;AAAA,EAC/B,mBAAmB;AAAA,EACnB,WAAW,CAAC,OAAO,UACjB,UAAU,IACN,gBAAgB,KAAK,UACrB,aAAa,KAAK,OAAO,KAAK;AAAA,EACpC,OAAO,CAAC,UAAU,UAAU,KAAK;AAAA,EACjC,SAAS,CAAC,UAAU,iBAAiB,KAAK;AAC5C;","names":[]}
+{"version":3,"sources":["../../src/components/column-mapper-labels.ts"],"sourcesContent":["// The English words of ./column-mapper, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./column-mapper re-exports them.\n\nimport type { ColumnMapperLabels } from \"./column-mapper\";\n\n/** {@link ColumnMapperLabels.requiredRoleShort}'s English — and its fallback for a\n *  provider whose labels predate the key. */\nexport const markedShort = (role: string) => `${role} *`;\n\nexport const DEFAULT_COLUMN_MAPPER_LABELS: ColumnMapperLabels = {\n  paste: \"Paste a table\",\n  pasteHint: \"Copy the rows out of a spreadsheet and paste them here, or drop a CSV or text file.\",\n  chooseFile: \"Choose a file\",\n  readError: (name) => `“${name}” could not be read`,\n  headerRow: \"The first line names the columns\",\n  summary: (columns, rows) =>\n    `${columns} ${columns === 1 ? \"column\" : \"columns\"}, ${rows} ${rows === 1 ? \"row\" : \"rows\"}`,\n  separatorSemicolon: \"separated by semicolons\",\n  separatorComma: \"separated by commas\",\n  separatorTab: \"separated by tabs\",\n  separatorSpace: \"separated by spaces\",\n  decimalComma: \"decimal comma (1,5)\",\n  decimalPoint: \"decimal point (1.5)\",\n  unreadCount: (count) => (count === 1 ? \"1 line could not be read\" : `${count} lines could not be read`),\n  unreadLine: (line) => `Line ${line} could not be read`,\n  unreadMore: (count) => `…and ${count} more`,\n  noRows: \"No line of this text reads as a row of the table.\",\n  table: \"Columns and their roles\",\n  columnN: (n) => `Column ${n}`,\n  roleOf: (column) => `What does column “${column}” hold?`,\n  ignore: \"Ignore\",\n  requiredRole: (role) => `${role} (required)`,\n  requiredRoleShort: markedShort,\n  previewOf: (shown, total) => (shown === 1 ? `The first of ${total} rows` : `The first ${shown} of ${total} rows`),\n  oneOf: (roles) => `either ${roles}`,\n  missing: (roles) => `Still needed: ${roles}.`,\n};\n"],"mappings":";AAQO,MAAM,cAAc,CAAC,SAAiB,GAAG,IAAI;AAE7C,MAAM,+BAAmD;AAAA,EAC9D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW,CAAC,SAAS,SAAI,IAAI;AAAA,EAC7B,WAAW;AAAA,EACX,SAAS,CAAC,SAAS,SACjB,GAAG,OAAO,IAAI,YAAY,IAAI,WAAW,SAAS,KAAK,IAAI,IAAI,SAAS,IAAI,QAAQ,MAAM;AAAA,EAC5F,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,aAAa,CAAC,UAAW,UAAU,IAAI,6BAA6B,GAAG,KAAK;AAAA,EAC5E,YAAY,CAAC,SAAS,QAAQ,IAAI;AAAA,EAClC,YAAY,CAAC,UAAU,aAAQ,KAAK;AAAA,EACpC,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS,CAAC,MAAM,UAAU,CAAC;AAAA,EAC3B,QAAQ,CAAC,WAAW,0BAAqB,MAAM;AAAA,EAC/C,QAAQ;AAAA,EACR,cAAc,CAAC,SAAS,GAAG,IAAI;AAAA,EAC/B,mBAAmB;AAAA,EACnB,WAAW,CAAC,OAAO,UAAW,UAAU,IAAI,gBAAgB,KAAK,UAAU,aAAa,KAAK,OAAO,KAAK;AAAA,EACzG,OAAO,CAAC,UAAU,UAAU,KAAK;AAAA,EACjC,SAAS,CAAC,UAAU,iBAAiB,KAAK;AAC5C;","names":[]}