@eifi1/ui-kit 0.48.2 → 0.50.0

package/dist/components/chip.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isValidElement, useCallback, useId } from "react";
 import { Check, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { statusTone } from "../lib/status-tone.js";
 import { TOUCH_TARGET_LARGE } from "./button-look.js";
 import { FOCUS_RING } from "./focus-ring.js";
 import { assignRef, LockedReason } from "./field-parts.js";
@@ -176,7 +177,8 @@ const REMOVE_HIT_AREA_LARGE = "relative large:after:absolute large:after:inset-[
 function Chip({
   ref,
   children,
-  tone = "neutral",
+  tone: toneProp,
+  status,
   size = "md",
   variant = "soft",
   shape = "pill",
@@ -202,6 +204,7 @@ function Chip({
   commit,
   ...rest
 }) {
+  const tone = toneProp ?? (status ? statusTone(status) : "neutral");
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { remove: removeLabel });
   const reasonId = useId();
   const disabledReason = useCommitReason(commit, ownDisabledReason);

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 { 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  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 = \"neutral\",\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 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 =\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"]}

package/dist/components/combobox-core.js

@@ -505,6 +505,7 @@ function ComboboxPanel({
       {
         ...rest,
         ref: panelRef,
+        "data-kit-layer": "",
         dir,
         onKeyDown,
         onPointerDownCapture: (e) => {

package/dist/components/combobox-core.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/combobox-core.tsx"],"sourcesContent":["import { Fragment, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  ComponentPropsWithoutRef,\n  Dispatch,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  RefObject,\n  SetStateAction,\n} from \"react\";\nimport { Check, Plus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { CLIPS_ATTRIBUTE } from \"../lib/clipping\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { PickerSheet, SHEET_ROW_CLASS } from \"./picker-sheet\";\nimport { usePhoneLayout, useRemPx } from \"../hooks/use-breakpoint\";\nimport { FLOATING_LABEL_STATIC } from \"./field-parts\";\nimport { Spinner } from \"./spinner\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport { type AnchorRect } from \"../hooks/use-anchored-rect\";\nimport { anchoredInline, useAnchoredPanel, viewportSize, type AnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { pressInside, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { isImeEnter } from \"../lib/ime\";\nimport { foldForSearch } from \"../lib/text-match\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { hasContent } from \"../lib/presence\";\n\n/**\n * What an entity picker hands `onChange` when it is cleared — `clearValue` on\n * {@link EntityCombobox} and {@link InlineEntityCombobox}. `null` by default.\n *\n * A closed set rather than any value, on purpose: every member is something no\n * option can be (an option's value is a `string | number`, and `\"\"` is never a real\n * id), so the picker can also READ it back — a field whose `value` is the clear\n * value shows as empty, with no clear button, exactly as `null` does. An arbitrary\n * sentinel could collide with an id and would make that read ambiguous.\n *\n * No `undefined`: a prop set to `undefined` is a prop not passed, so it would read as\n * the default and emit `null` — the one outcome the caller had asked not to get.\n */\nexport type ComboClearValue = null | \"\";\n\nexport interface ComboOption<V extends string | number> {\n  value: V;\n  label: string;\n  sublabel?: string;\n  icon?: ReactNode;\n  /**\n   * Section this option belongs to. Where a consumer renders it as a heading with the\n   * members indented beneath — {@link InlineEntityCombobox} does — this is a genuine\n   * grouping, not decoration: the name appears once per section rather than trailing\n   * every row in small grey type, which is barely legible on a phone (feedback #136).\n   * The heading stays at the top of the list while its rows scroll beneath it.\n   *\n   * NOT searched (0.40, kk run 79): a group is where a row is filed, not what it is\n   * called — with first-letter groups (\"A\", \"B\", … \"#\"), typing \"a\" matched every row\n   * filed under A. Searching a category's name means putting it in `sublabel`.\n   */\n  group?: string;\n  /**\n   * Shown but not takeable: rendered dimmed with `aria-disabled`, passed over by the\n   * arrow keys, and a click or Enter on it does nothing. For a row whose existence is\n   * the information — a write-locked result, an account that is closed — where\n   * leaving it out would read as \"there is no such thing\". Say WHY in `sublabel`: a\n   * hover tooltip is the one explanation a phone cannot show.\n   *\n   * Honoured by {@link Autocomplete}, {@link InlineEntityCombobox} and the panel\n   * pickers ({@link EntityCombobox}, {@link MultiEntityCombobox}); on those an already\n   * chosen disabled option stays chosen — the row only refuses to be toggled.\n   */\n  disabled?: boolean;\n}\n\n/** A row the user may take — present and not {@link ComboOption.disabled}. */\nexport const isOptionEnabled = (o: { disabled?: boolean } | undefined): boolean =>\n  o !== undefined && !o.disabled;\n\n/**\n * The next takeable row from `from`, stepping `dir` — what the arrow keys use so a\n * disabled row is passed over, as the APG allows. Stays on `from` at the end of the\n * list (the family's arrows clamp rather than wrap) and answers `-1` when `from` is\n * not a row and there is nothing to step to.\n */\nexport function stepEnabled(\n  rows: readonly { disabled?: boolean }[],\n  from: number,\n  dir: 1 | -1,\n): number {\n  for (let i = from + dir; i >= 0 && i < rows.length; i += dir) {\n    if (!rows[i].disabled) return i;\n  }\n  return from >= 0 && from < rows.length ? from : -1;\n}\n\n/** `i` when that row is takeable, else the nearest takeable one after it, else\n *  before it, else `-1`. For a highlight that starts on a fixed index (the panel\n *  pickers open on row 0) and must never rest on a disabled row. */\nexport function settleEnabled(rows: readonly { disabled?: boolean }[], i: number): number {\n  if (i < 0 || i >= rows.length) return -1;\n  if (!rows[i].disabled) return i;\n  const after = stepEnabled(rows, i, 1);\n  if (after !== i) return after;\n  const before = stepEnabled(rows, i, -1);\n  return before !== i ? before : -1;\n}\n\n/** Classes a disabled row adds over its normal ones — dimmed, no hover, the\n *  kit's soft-disabled look (`DangerConfirm`, `SignaturePad`). */\nexport const DISABLED_ROW_CLASS = \"cursor-not-allowed opacity-50 hover:bg-transparent\";\n\n/**\n * Whether an entity picker offers its create row — one rule for\n * {@link EntityCombobox}, {@link MultiEntityCombobox} and {@link InlineEntityCombobox}.\n *\n * With a query: while the trimmed query names no option exactly (case-insensitive) —\n * an exact hit is a record the list is already showing, and a second way to \"make\" it\n * would mint a duplicate. With NO query: only when the caller named the row for that\n * case (`createEmptyLabel`) — a row reading `Create “”` says nothing, and the kit cannot\n * know the noun (\"Create cash account\") that would make it say something (keksdose G9).\n *\n * `names` is what the query is compared against: the loaded rows for a panel picker\n * (its async list is all it knows), every option for the inline one.\n */\nexport function offersCreate(\n  onCreate: unknown,\n  query: string,\n  names: readonly string[],\n  createEmptyLabel: string | undefined,\n): boolean {\n  if (!onCreate) return false;\n  if (!query) return Boolean(createEmptyLabel);\n  const q = query.toLowerCase();\n  return !names.some((n) => n.toLowerCase() === q);\n}\n\n/**\n * {@link EndHintRow}'s `hint` and `className` for a combobox-family field, keeping the\n * 0.22 rule (keksdose): a field that was passed `hint` at all — even `undefined` — keeps\n * ONE box, so a hint coming and going never rebuilds the control under the cursor.\n *\n * A text hint is a caption after the control and never moved it; the case this covers\n * is the \"?\" (a {@link FieldHint}) on a field with no label line, which sits at the end\n * edge in a row of its own. Without this the row existed only while the \"?\" did, and\n * the control was re-parented — remounted, focus and caret lost — each time it came or\n * went. With `hint` passed the row stays, its end slot empty and its gap closed, so\n * nothing on screen moves either.\n */\nexport function endHintRowProps(\n  hintPassed: boolean,\n  hasLabel: boolean,\n  labelHint: ReactNode | undefined,\n): { hint: ReactNode | undefined; className?: string } {\n  if (hasLabel) return { hint: undefined };\n  if (labelHint !== undefined) return { hint: labelHint };\n  return hintPassed ? { hint: null, className: \"gap-0\" } : { hint: undefined };\n}\n\n/**\n * The family's floating label, as a real `<label for>` (lenkbank): the input is then\n * named the way {@link Input}'s is, so `getByLabelText` and any helper that walks\n * `<label htmlFor>` finds it. Same placement and type as {@link FieldLabel}, which\n * stays a `<span>` for the TRIGGER pickers — a `<button>` is labelable, but those\n * compose their own \"label: value\" name. `pointer-events-none` (from the class)\n * keeps a press on it landing on the field under it, as before.\n */\nexport function ComboboxFieldLabel({\n  htmlFor,\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<\"label\"> & { htmlFor: string }) {\n  return (\n    <label {...rest} htmlFor={htmlFor} className={cn(FLOATING_LABEL_STATIC, \"z-10\", className)}>\n      {children}\n    </label>\n  );\n}\n\n/**\n * Where a combobox's rows come from, and how a query narrows them. Shared by the\n * trigger pickers ({@link useComboboxCore}) and the inline {@link Autocomplete}, so\n * the two cannot drift in what a failed lookup or a too-short query does.\n */\nexport interface OptionSourceOptions<V extends string | number> {\n  /** Already-loaded options (client-side filtered unless `filter` is false), also\n   *  used to resolve labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced and race-safe; stale responses are ignored,\n   *  and a rejection is caught and reported as `failed`. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** External loading flag, OR-ed with the internal async state. */\n  loading?: boolean;\n  /**\n   * Narrow `options` by the query (label/sublabel substring, folded for search: no case,\n   * no accents, the locale's case rules — \"zurich\" finds Zürich, DUP-5). Default `true`.\n   *\n   * `false` shows `options` exactly as given, in the given order — for a list the\n   * caller has already searched and ranked on a server (Keksdose's geocoder), which a\n   * second, client-side substring filter could only get wrong: a provider that\n   * matches \"Bahnhofstr.\" to \"Bahnhofstrasse\" is right, and a label filter would\n   * throw that row away.\n   */\n  filter?: boolean;\n  /**\n   * Below this many (trimmed) characters nothing is offered and `loadOptions` is not\n   * called. Default `0` — the pickers list everything on open. Set it for a source\n   * that is costly or rate-limited: one letter against a geocoder matches half a\n   * continent, and a request per opened panel is a request nobody asked for.\n   */\n  minChars?: number;\n  /** Quiet time after the last keystroke before `loadOptions` runs. Default 150 ms. */\n  debounceMs?: number;\n}\n\nexport interface OptionSource<V extends string | number> {\n  results: ComboOption<V>[];\n  busy: boolean;\n  /** The last lookup for this query REJECTED. The rows are emptied with it: results\n   *  from an earlier query under a failed one would read as the answer to it. */\n  failed: boolean;\n  /** The query is shorter than `minChars`, so nothing was asked. */\n  tooShort: boolean;\n}\n\n/**\n * The rows half of a combobox: client-side filtering, or a debounced, race-safe\n * `loadOptions` with its loading and failure states.\n *\n * `active` gates the async side — a closed list asks nothing. Loading is DERIVED\n * (\"the settled answer is for a different query\") rather than flagged on in the\n * effect, so there is no render between a keystroke and the debounce in which an\n * empty list could claim \"No results\" for a question still being asked.\n */\nexport function useOptionSource<V extends string | number>({\n  options,\n  loadOptions,\n  loading,\n  filter = true,\n  minChars = 0,\n  debounceMs = 150,\n  query,\n  active,\n}: OptionSourceOptions<V> & { query: string; active: boolean }): OptionSource<V> {\n  const isAsync = typeof loadOptions === \"function\";\n  const tooShort = query.trim().length < minChars;\n  const [settled, setSettled] = useState<{\n    query: string | null;\n    results: ComboOption<V>[];\n    failed: boolean;\n  }>({ query: null, results: [], failed: false });\n  const loadRef = useRef(loadOptions);\n  useEffect(() => {\n    loadRef.current = loadOptions;\n  });\n  const reqId = useRef(0);\n\n  useEffect(() => {\n    // Bumped even when nothing is asked, so a request still in flight from a longer\n    // query cannot land after the user has deleted back below `minChars`.\n    const id = ++reqId.current;\n    if (!active || !isAsync || tooShort) return;\n    const t = setTimeout(\n      async () => {\n        try {\n          const r = await loadRef.current!(query);\n          if (reqId.current === id) setSettled({ query, results: r, failed: false });\n        } catch {\n          // The one path the old `try/finally` had no answer for: the list kept the\n          // previous query's rows and said nothing (Keksdose proposal §2).\n          if (reqId.current === id) setSettled({ query, results: [], failed: true });\n        }\n      },\n      query ? debounceMs : 0,\n    );\n    return () => clearTimeout(t);\n  }, [query, active, isAsync, tooShort, debounceMs]);\n\n  // Folded as every kit list folds (DUP-5, refactor audit 2026-10): plain `toLowerCase`\n  // here meant \"zurich\" found no Zürich in kastlan's eighteen entity pickers, and the\n  // Turkish \"ı\" no \"IRMAK\".\n  const locale = useKitLocale();\n  const clientResults = useMemo(() => {\n    if (isAsync) return [];\n    const src = options ?? [];\n    const q = foldForSearch(query.trim(), locale);\n    if (!filter || !q) return src;\n    const hit = (s: string | undefined) => s !== undefined && foldForSearch(s, locale).includes(q);\n    return src.filter((o) => hit(o.label) || hit(o.sublabel));\n  }, [isAsync, options, query, filter, locale]);\n\n  const pending = isAsync && active && !tooShort && settled.query !== query;\n  const failed = isAsync && !tooShort && settled.failed;\n  return {\n    results: tooShort ? [] : isAsync ? (failed ? [] : settled.results) : clientResults,\n    busy: Boolean(loading) || pending,\n    failed: failed && !pending,\n    tooShort,\n  };\n}\n\nexport interface ComboboxCoreOptions<V extends string | number> extends OptionSourceOptions<V> {\n  /**\n   * Back closes the open anchored list, not the page or the dialog behind it — the rule\n   * `useDropdown` keeps for its lists (keksdose live #309 rework). Default `false`, as the\n   * entity pickers have always been; CurrencySelect, MultiSelect, GroupedPicker and\n   * AmountInput's currency chip, which came over from `useDropdown` (DUP-4), pass `true`\n   * so they keep it. On a phone the `PickerSheet` registers Back itself.\n   */\n  backCloses?: boolean;\n}\n\nexport interface ComboboxCore<V extends string | number> {\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  panelRef: RefObject<HTMLDivElement | null>;\n  inputRef: RefObject<HTMLInputElement | null>;\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n  query: string;\n  setQuery: Dispatch<SetStateAction<string>>;\n  active: number;\n  setActive: Dispatch<SetStateAction<number>>;\n  results: ComboOption<V>[];\n  busy: boolean;\n  /** See {@link OptionSource}. */\n  failed: boolean;\n  tooShort: boolean;\n  minChars: number;\n  rect: AnchorRect | null;\n  /** Where the dropdown goes, clamped to the visible viewport (feedback #135). */\n  placement: AnchoredPanel;\n  /** Put an option in the label cache, so {@link ComboboxCore.resolve} still knows a\n   *  value the caller just chose after the result list has moved on. */\n  rememberOption: (o: ComboOption<V>) => void;\n  resolve: (v: V) => ComboOption<V> | null;\n  /** Close and hand focus back to the trigger — the keyboard paths only. See\n   *  {@link useDropdown} for why a pointer dismissal must not do this. */\n  closeToTrigger: () => void;\n}\n\n/**\n * Shared plumbing for the entity pickers: open/query/active state, portalled\n * anchoring + outside-click/Escape dismissal, focus-on-open, a debounced\n * race-safe async (or client-side) result list, and a label cache so a selected\n * value still renders its label after the async list has moved on. The single-\n * and multi-value comboboxes render their triggers on top of this and share\n * {@link ComboboxPanel} for the dropdown.\n */\nexport function useComboboxCore<V extends string | number>({\n  options,\n  minChars = 0,\n  backCloses = false,\n  ...source\n}: ComboboxCoreOptions<V>): ComboboxCore<V> {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [active, setActive] = useState(0);\n\n  const close = () => setOpen(false);\n  // Escape unmounts the panel the user is typing in; without this the browser drops\n  // focus on <body>, so the caret disappears and the next Tab restarts at the top of\n  // the page. A pointer dismissal deliberately does NOT do this — the press has\n  // already decided where focus belongs.\n  const closeToTrigger = () => {\n    setOpen(false);\n    triggerRef.current?.focus();\n  };\n  // Placement, not just the anchor rect: the panel has to dodge the on-screen\n  // keyboard its own search box summons (feedback #135).\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  // Outside-click dismissal belongs to the ANCHORED panel, and only to it. On a\n  // phone `ComboboxPanel` renders a full-screen `PickerSheet` instead (live #200),\n  // portalled to <body> and carrying its own ways out — the close X, Escape, and\n  // Back through `useOverlayHistory` — so there is no outside left to press.\n  //\n  // Leaving the listener on there was not merely redundant, it was the bug:\n  // `panelRef` is attached to the desktop panel alone, so with the sheet up every\n  // press inside it answered \"outside\". While `useOutsideClick` listened for\n  // `mousedown` the rows survived by accident — they commit on `onMouseDown` too,\n  // and won the race — but `pointerdown` PRECEDES `mousedown`, so the sheet closed\n  // at finger-down and the commit landed on an unmounted tree: a tapped row kept the\n  // old value, and tapping the search box or the X was equally fatal. `PickerSheet`\n  // stops `mousedown` for exactly this reason, but that guard was written for\n  // `useDropdown`'s listener and never covered this hook.\n  const isPhone = usePhoneLayout();\n  useOutsideClick([triggerRef, panelRef], close, open && !isPhone);\n  // A layer on the Escape stack while the anchored panel is open (Wave 2, DUP-1), so a\n  // dialog around the picker closes only after it (BUG-1). `ComboboxPanel` takes the key\n  // where focus is. On a phone the `PickerSheet` is the layer, as it is the outside.\n  useDismissLayer(open && !isPhone, closeToTrigger);\n  // See `backCloses`. The same close path a pointer dismissal takes.\n  useOverlayHistory(backCloses && open && !isPhone, close);\n\n  // Reset the query each time the panel opens, and the highlighted row whenever the\n  // visible set changes (a new query, or the panel opening or closing). Adjusted while\n  // rendering against the previous values rather than in an effect, so the render that\n  // opens the panel already searches for \"\" and highlights the first row.\n  const [prevOpen, setPrevOpen] = useState(open);\n  const [prevQuery, setPrevQuery] = useState(query);\n  if (open !== prevOpen || query !== prevQuery) {\n    const opened = open && !prevOpen;\n    setPrevOpen(open);\n    setPrevQuery(opened ? \"\" : query);\n    if (opened) setQuery(\"\");\n    setActive(0);\n  }\n\n  // Focus the search box each time the panel opens.\n  useEffect(() => {\n    if (!open) return;\n    const id = requestAnimationFrame(() => inputRef.current?.focus());\n    return () => cancelAnimationFrame(id);\n  }, [open]);\n\n  // Debounced, race-safe async search (only when loadOptions is provided) or the\n  // client-side filter — see {@link useOptionSource}.\n  const { results, busy, failed, tooShort } = useOptionSource<V>({\n    ...source,\n    options,\n    minChars,\n    query,\n    active: open,\n  });\n\n  // Accumulate every option we've seen so a selected value can render its label\n  // even after the async list has moved on to other query results.\n  const cacheRef = useRef(new Map<V, ComboOption<V>>());\n  useEffect(() => {\n    for (const o of options ?? []) cacheRef.current.set(o.value, o);\n    for (const o of results) cacheRef.current.set(o.value, o);\n  }, [options, results]);\n  const resolve = (v: V): ComboOption<V> | null =>\n    options?.find((o) => o.value === v) ?? cacheRef.current.get(v) ?? null;\n  const rememberOption = (o: ComboOption<V>) => {\n    cacheRef.current.set(o.value, o);\n  };\n\n  return {\n    triggerRef,\n    panelRef,\n    inputRef,\n    open,\n    setOpen,\n    query,\n    setQuery,\n    active,\n    setActive,\n    results,\n    busy,\n    failed,\n    tooShort,\n    minChars,\n    rect,\n    placement,\n    rememberOption,\n    resolve,\n    closeToTrigger,\n  };\n}\n\n// The family's `error` is every field's `useFieldError` (field-parts) since 0.34 — the\n// restatement that stood here ignored a form library's `aria-invalid` (DUP-8).\n\n/** The anchored suggestion list's box and rows — one look for {@link Combobox},\n *  {@link InlineEntityCombobox} and {@link Autocomplete}. */\n/**\n * A group's heading in a picker list stays at the top of the list while its rows scroll\n * under it (kk run 79 gap 3): with first-letter groups over two hundred payees, the\n * heading is the one thing that says where in the alphabet the thumb is. Opaque — the\n * list's own `bg-surface` — so the rows pass beneath it rather than through it. Shared\n * by every list that heads groups (the panel and the sheet, `Combobox`, `Autocomplete`,\n * `InlineEntityCombobox`).\n */\nexport const GROUP_HEADING_STICKY = \"sticky top-0 z-10 bg-surface\";\n\nexport const SUGGESTION_LIST_CLASS =\n  \"max-h-64 overflow-y-auto rounded-md border border-subtle bg-surface py-1 shadow-lg\";\n\n// One line at Normal; from Large up a long suggestion wraps and its row grows (text size\n// §10.17, round 0.34 T1), like every other option list of the kit.\nexport const suggestionRowClass = (isActive: boolean) =>\n  cn(\n    \"block w-full truncate-until-large px-3 py-1.5 text-start text-sm text-primary\",\n    isActive ? \"bg-active\" : \"hover:bg-hover\",\n  );\n\n/**\n * Keep the option the keyboard is on inside the visible part of the list.\n *\n * `aria-activedescendant` moves a highlight WITHOUT moving focus, which is the whole\n * point of it — and the cost is that the browser scrolls nothing on its own. In a\n * panel capped at a few hundred pixels over an account list two hundred long, Down\n * walked the highlight straight out of the box and the list sat still.\n *\n * Optional-called because jsdom does not implement `scrollIntoView`: three consumers\n * run this component in their own suites, and a picker that throws there is a worse\n * trade than a list that does not scroll in a test.\n */\nexport function useActiveOptionScroll(activeId: string | undefined): void {\n  useEffect(() => {\n    if (!activeId) return;\n    document.getElementById(activeId)?.scrollIntoView?.({ block: \"nearest\" });\n  }, [activeId]);\n}\n\n/** The anchored panel's least width, in rem: 220 px at Normal (§3.2). */\nconst PANEL_MIN_REM = 13.75;\n\n/** The room the anchored panel keeps from either edge of the glass, in px —\n *  `anchoredInline`'s default. */\nconst PANEL_EDGE = 8;\n\n/**\n * How wide the anchored panel is. The phone sheet is the screen's width whatever this\n * says.\n */\nexport interface ComboboxPanelWidth {\n  /** The least width, in rem — never under the trigger's own. Default 13.75 (220 px at\n   *  Normal, §3.2). */\n  minRem?: number;\n  /**\n   * As wide as the rows make it (`max-content`), between the least width and `maxRem`,\n   * instead of exactly the least — measured, so the clamp to the glass still knows it.\n   * CurrencySelect's list grows to show the full currency names (feedback #308);\n   * MultiSelect's rows to show their hints (keksdose #147). A `w-*` class in the panel's\n   * `className` does not apply: the panel is portalled to <body>, where `w-full` would be\n   * the screen.\n   */\n  fit?: boolean;\n  /** With `fit`, the most it grows to, in rem. Default: the glass. */\n  maxRem?: number;\n}\n\nexport interface ComboboxPanelProps<V extends string | number>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  core: ComboboxCore<V>;\n  /** What the trigger's `aria-controls` names. Owned by the component that renders\n   *  the trigger, not by the core: one id has to reach both, and only one of them\n   *  can be the origin. */\n  listboxId: string;\n  /** Default: `combobox.search` from the {@link UiKitProvider}, else English. */\n  searchPlaceholder?: string;\n  /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */\n  emptyLabel?: string;\n  multi?: boolean;\n  isSelected: (v: V) => boolean;\n  onChoose: (o: ComboOption<V>) => void;\n  showCreate: boolean;\n  onCreate: () => void;\n  createContent: ReactNode;\n  /**\n   * The create row is shown but not takeable, and this says why — the lock's reason\n   * when the picker's `createCommit` meets a locked {@link WriteLockProvider}. Rendered\n   * as the row's second line rather than a tooltip, as {@link ComboOption.disabled}\n   * asks of every disabled row: a hover is the one explanation a phone cannot show.\n   */\n  createDisabledReason?: ReactNode;\n  /** What the sheet calls itself on a phone — the field's label. Ignored on\n   *  desktop, where the panel sits under the field that already says it. */\n  sheetTitle?: ReactNode;\n  closeLabel?: string;\n  /** Default: `combobox.loadError` from the {@link UiKitProvider}, else English. */\n  loadErrorLabel?: string;\n  /**\n   * What a row shows in place of its label and sublabel — for a row that says more than\n   * two strings: CurrencySelect's symbol, code and name side by side. The option's\n   * `icon`, the multi checkbox and the check mark stay the panel's. Its text is the\n   * option's accessible name, so separate the parts with a space.\n   */\n  renderOption?: (o: ComboOption<V>) => ReactNode;\n  /** Controls between the search box and the list, in the anchored panel and the phone\n   *  sheet alike — MultiSelect's \"Select all\" and \"Clear\". */\n  toolbar?: ReactNode;\n  /** See {@link ComboboxPanelWidth}. */\n  width?: ComboboxPanelWidth;\n  /** Which of the trigger's edges the anchored panel hangs from, by reading direction.\n   *  Default `start`; `end` grows the panel toward the start, so a field with content\n   *  after it is not pushed past the page (CurrencySelect, feedback #308). */\n  align?: \"start\" | \"end\";\n  /**\n   * Lay the rows out in columns, one block per `group`, with the group's name above it —\n   * GroupedPicker's panel (feedback #267/#276): a large grouped set reads as a sheet of\n   * short lists side by side rather than one long one. Each block is a `role=\"group\"`\n   * named by its heading. The arrow keys walk the rows in reading order, down each\n   * column. The phone sheet keeps one column with headings.\n   */\n  columns?: boolean;\n}\n\n/**\n * The portalled dropdown (search header + result rows + optional create row)\n * shared by the single- and multi-value comboboxes. Start-aligned to the trigger\n * and sized to its width; `multi` swaps the trailing check for a leading\n * checkbox. `onChoose` decides whether to close (single) or stay open (multi).\n *\n * ## The ARIA, which is `CommandPalette`'s\n *\n * This rendered a `role=\"listbox\"` of `role=\"option\"` rows and stopped there, so a\n * reader was handed a text box and silence: the highlight the arrow keys move lived\n * only in a background colour, and nothing tied the box being typed in to the list\n * being filtered. `CommandPalette` has had the whole model since it was written —\n * `aria-controls` from the field to the list, `aria-activedescendant` naming the row\n * the keyboard is on — and it was the only thing in the package that did.\n *\n * Two distinct states, deliberately not conflated:\n *   - `aria-selected` is CHOSEN. It is the check mark, and in `multi` the checkbox.\n *   - `aria-activedescendant` is where the KEYBOARD is. Announcing that as selected\n *     would tell a reader that the row they are merely passing over is the answer.\n *\n * `role=\"option\"` sits on the `<button>`, not on the `<li>` around it, for the same\n * reason it does in `CommandPalette`: an option may not contain a separately\n * focusable control, and the button is the thing a pointer presses. The rows are\n * `tabIndex={-1}` because focus never leaves the search box — that is what\n * `aria-activedescendant` is FOR.\n */\nexport function ComboboxPanel<V extends string | number>({\n  core,\n  listboxId,\n  searchPlaceholder,\n  emptyLabel,\n  multi,\n  isSelected,\n  onChoose,\n  showCreate,\n  onCreate,\n  createContent,\n  createDisabledReason,\n  sheetTitle,\n  closeLabel,\n  loadErrorLabel,\n  renderOption,\n  toolbar,\n  width,\n  align = \"start\",\n  columns,\n  className,\n  style,\n  ...rest\n}: ComboboxPanelProps<V>) {\n  const createLocked = hasContent(createDisabledReason);\n  const {\n    rect,\n    placement,\n    panelRef,\n    inputRef,\n    query,\n    setQuery,\n    results,\n    busy,\n    failed,\n    tooShort,\n    active,\n    setActive,\n    closeToTrigger,\n  } = core;\n  // The phone gets a full-screen sheet instead of an anchored panel (live #200).\n  // Same core, same results, same handlers — only the container differs, so the\n  // two presentations cannot drift in what they offer.\n  const isPhone = usePhoneLayout();\n  // Every row the keyboard can land on, the create row included — passed over, like a\n  // disabled option, while a write lock holds it.\n  const rows: readonly { disabled?: boolean }[] = showCreate\n    ? [...results, { disabled: createLocked }]\n    : results;\n  const rowCount = rows.length;\n  const optionId = (index: number) => `${listboxId}-option-${index}`;\n  // The core opens on row 0 and knows nothing of `disabled`; the highlight is settled\n  // HERE, derived, so it can never rest on a row that cannot be taken — whatever the\n  // async list turned out to hold.\n  const current = settleEnabled(rows, active);\n  const activeId = current >= 0 ? optionId(current) : undefined;\n  useActiveOptionScroll(activeId);\n  // The consumers resolve their own props against the provider already; this is\n  // for the loading row, which no consumer names, and for a caller that renders the\n  // panel directly and leaves the two optional strings out.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS);\n  // Portalled to <body>, the panel leaves the subtree its `dir` came from — so the\n  // direction is read off the trigger and put back on the panel below.\n  const dir = useAnchorDir(core.triggerRef, core.open);\n  const remPx = useRemPx();\n  // A `fit` panel's measured width — what it takes to keep it on the glass (see\n  // `ComboboxPanelWidth.fit`). Observed rather than read once: the rows change under the\n  // search, and a filtered list of short names is a narrower panel. `null` where nothing\n  // is laid out (jsdom), and the least width is used.\n  const fit = width?.fit === true && !isPhone;\n  const [fitWidth, setFitWidth] = useState<number | null>(null);\n  const placed = core.open && rect !== null;\n  useLayoutEffect(() => {\n    const el = panelRef.current;\n    if (!fit || !placed || !el || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const measured = el.getBoundingClientRect().width;\n      setFitWidth(measured > 0 ? measured : null);\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [fit, placed, panelRef]);\n\n  // The WAI-ARIA APG's listbox keyboard, in full: Up/Down step, Home/End jump, Enter\n  // commits, Tab leaves, Escape closes. On the panel's search box — in the anchored\n  // panel and, through `onSearchKeyDown`, in the phone sheet's header (BUG-5).\n  const onKeyDown = (e: ReactKeyboardEvent) => {\n    // Escape goes to the top of the kit's Escape stack — this list, which opened over\n    // any dialog it sits in — and stops HERE (round 0.34 BUG-1, Wave 2 DUP-1). The\n    // panel's events travel up the React tree through that dialog, portal or not, and\n    // one press used to close the dialog and throw the form away, list still open.\n    if (takeEscape(e)) return;\n    // The Enter that confirms an IME composition is the IME's (BUG-9).\n    if (isImeEnter(e)) return;\n    // Disabled rows are passed over (`stepEnabled`), and each step starts from the\n    // SETTLED highlight, not the raw index, so the first Down from a disabled row 0\n    // goes to the row after the one already shown as highlighted.\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActive(stepEnabled(rows, current, 1));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActive(current < 0 ? -1 : stepEnabled(rows, current, -1));\n    } else if (e.key === \"Home\") {\n      e.preventDefault();\n      setActive(stepEnabled(rows, -1, 1));\n    } else if (e.key === \"End\") {\n      e.preventDefault();\n      setActive(stepEnabled(rows, rowCount, -1));\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      if (current < 0) return;\n      if (current < results.length) onChoose(results[current]);\n      else if (showCreate && !createLocked) onCreate();\n    } else if (e.key === \"Tab\" && !isPhone) {\n      // The panel is PORTALLED to <body>, so the browser's own Tab would move from\n      // here to whatever follows the portal — i.e. off the end of the document. The\n      // trade is one extra Tab (trigger, then onward) against never stranding focus\n      // at the bottom of the page. The phone sheet is a dialog, and its trap keeps Tab.\n      e.preventDefault();\n      closeToTrigger();\n    }\n  };\n\n  // What the list holds, said in ONE place that is both on screen and a polite\n  // live region. Focus stays in the search box, so the list changing under it was\n  // silent — a reader typed and heard nothing back, and a failed lookup was the same\n  // silence as a slow one. Outside the listbox, which may own only options.\n  //\n  // Three different empties, and only one of them is \"nothing matched\": a lookup\n  // that failed must not claim there is nothing to find, and a query under\n  // `minChars` was never asked. With rows showing, the count is for the reader only.\n  const message: ReactNode =\n    busy && results.length === 0 ? (\n      // The ellipsis is the picture; the words are for a reader, who otherwise met\n      // an empty-looking list with a lone \"…\" in it — or, in most readers, nothing\n      // at all, since punctuation alone is skipped.\n      <>\n        <span aria-hidden>…</span>\n        <span className=\"sr-only\">{labels.loading}</span>\n      </>\n    ) : busy ? (\n      // Loading with the LAST query's rows still up. This was `null`, so a refetch —\n      // a new query, or a caller's `loading` while it reloads — looked exactly like a\n      // finished list: rows that were about to be replaced, with nothing saying so.\n      // A line of its own under the rows, in words, so it reads without the spinner.\n      <span className=\"flex items-center gap-2\">\n        <Spinner label={null} className=\"size-3.5 border\" />\n        {labels.loading}\n      </span>\n    ) : results.length === 0 && !showCreate ? (\n      failed ? (\n        (loadErrorLabel ?? labels.loadError)\n      ) : tooShort ? (\n        labels.minChars(core.minChars)\n      ) : (\n        (emptyLabel ?? labels.noResults)\n      )\n    ) : null;\n  // `relative` so the sr-only text has a local containing block (see\n  // sr-only-containment.test).\n  const announcement = (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      className={cn(\n        \"relative\",\n        message !== null && cn(\"py-2 text-sm\", isPhone ? \"px-4\" : \"px-3\"),\n        failed ? \"text-danger\" : \"text-muted\",\n      )}\n    >\n      {message ??\n        (results.length > 0 && (\n          <span className=\"sr-only\">{labels.resultCount(results.length)}</span>\n        ))}\n    </div>\n  );\n\n  if (!core.open || typeof document === \"undefined\") return null;\n\n  // One option row — the same in both containers and in both layouts.\n  const optionRow = (o: ComboOption<V>, i: number) => {\n    const selected = isSelected(o.value);\n    return (\n      <li role=\"presentation\">\n        <button\n          type=\"button\"\n          id={optionId(i)}\n          role=\"option\"\n          aria-selected={selected}\n          aria-disabled={o.disabled || undefined}\n          tabIndex={-1}\n          onMouseDown={(e) => {\n            e.preventDefault();\n            if (!o.disabled) onChoose(o);\n          }}\n          onMouseEnter={() => {\n            if (!o.disabled) setActive(i);\n          }}\n          className={cn(\n            isPhone\n              ? SHEET_ROW_CLASS\n              : columns\n                ? // A cell of a column (GroupedPicker): tighter, so four columns fit.\n                  \"flex w-full items-center gap-1.5 rounded px-1.5 py-0.5 text-start text-sm\"\n                : \"flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm\",\n            // The row the arrows are on shows it on a phone too: the sheet takes\n            // the keyboard (BUG-5), and a tablet or a desktop at Large has one.\n            o.disabled\n              ? DISABLED_ROW_CLASS\n              : i === current\n                ? \"bg-active\"\n                : !isPhone && \"hover:bg-hover\",\n            // After SHEET_ROW_CLASS, so its hover is the one cancelled.\n            o.disabled && isPhone && DISABLED_ROW_CLASS,\n          )}\n        >\n          {multi && (\n            <span\n              // The checkbox is a PICTURE of `aria-selected` above, so a reader\n              // that met both would be told twice.\n              aria-hidden\n              className={cn(\n                \"flex size-4 shrink-0 items-center justify-center rounded border\",\n                selected\n                  ? \"border-[var(--bg-inverse)] bg-inverse text-inverse\"\n                  : \"border-strong bg-surface\",\n              )}\n            >\n              {selected && <Check className=\"size-3\" />}\n            </span>\n          )}\n          {o.icon && <span className=\"shrink-0\">{o.icon}</span>}\n          {renderOption ? (\n            <span className=\"flex min-w-0 flex-1 items-center gap-2\">{renderOption(o)}</span>\n          ) : (\n            /* Label and sublabel wrap from Large up (text size §10.17, round 0.34 T1). */\n            <span className=\"min-w-0 flex-1\">\n              <span className={cn(\"block truncate-until-large text-primary\", columns && selected && \"font-medium\")}>\n                {o.label}\n              </span>\n              {o.sublabel && (\n                <span className=\"block truncate-until-large text-xs text-placeholder\">{o.sublabel}</span>\n              )}\n            </span>\n          )}\n          {!multi && selected && <Check className=\"size-4 shrink-0 text-brand\" />}\n        </button>\n      </li>\n    );\n  };\n\n  const createRow = showCreate && (\n    <li role=\"presentation\">\n      <button\n        type=\"button\"\n        id={optionId(results.length)}\n        role=\"option\"\n        // Never chosen — it is an action, and it disappears the moment it has\n        // been taken. Whether the keyboard is ON it is `aria-activedescendant`'s\n        // job to say.\n        aria-selected={false}\n        aria-disabled={createLocked || undefined}\n        tabIndex={-1}\n        onMouseDown={(e) => {\n          e.preventDefault();\n          if (!createLocked) onCreate();\n        }}\n        onMouseEnter={() => {\n          if (!createLocked) setActive(results.length);\n        }}\n        className={cn(\n          isPhone\n            ? SHEET_ROW_CLASS\n            : \"flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm\",\n          \"text-secondary\",\n          createLocked\n            ? DISABLED_ROW_CLASS\n            : current === results.length\n              ? \"bg-active\"\n              : !isPhone && \"hover:bg-hover\",\n          // After SHEET_ROW_CLASS, so its hover is the one cancelled.\n          createLocked && isPhone && DISABLED_ROW_CLASS,\n        )}\n      >\n        <Plus className=\"size-4 shrink-0\" />\n        <span className=\"min-w-0 flex-1\">\n          <span className=\"block truncate-until-large\">{createContent}</span>\n          {createLocked && (\n            <span className=\"block truncate-until-large text-xs text-placeholder\">\n              {createDisabledReason}\n            </span>\n          )}\n        </span>\n      </button>\n    </li>\n  );\n\n  // In columns, a block per run of one group; `results` keeps its source order, so a\n  // run is the rows up to the next change of group.\n  const blocks: { group: string; rows: { o: ComboOption<V>; i: number }[] }[] = [];\n  if (columns && !isPhone) {\n    results.forEach((o, i) => {\n      const group = o.group ?? \"\";\n      const last = blocks[blocks.length - 1];\n      if (last && last.group === group) last.rows.push({ o, i });\n      else blocks.push({ group, rows: [{ o, i }] });\n    });\n  }\n\n  const list = (\n    <ul\n      id={listboxId}\n      role=\"listbox\"\n      aria-multiselectable={multi}\n      // The rows are provisional while a lookup is in flight — whether or not the\n      // previous query's are still showing.\n      aria-busy={busy || undefined}\n      // It scrolls, and says so where jsdom can see it (see `CLIPS_ATTRIBUTE`): a\n      // Tooltip in a row then portals out in a test exactly as it does in the\n      // browser, instead of joining the option's accessible name (keksdose E8).\n      {...{ [CLIPS_ATTRIBUTE]: \"\" }}\n      className={cn(\n        \"min-h-0 flex-1 overflow-y-auto\",\n        columns && !isPhone ? \"columns-2 gap-4 p-3 md:columns-3 xl:columns-4\" : \"py-1\",\n        isPhone && \"flex-none\",\n      )}\n    >\n      {columns && !isPhone\n        ? blocks.map((block) => (\n            // A column block: its heading is a picture of the group's name, which the\n            // `role=\"group\"` carries for a reader — the listbox may own options and\n            // groups, and a heading of loose text in it is neither.\n            <li key={`${block.group}|${block.rows[0].i}`} role=\"presentation\" className=\"mb-3 break-inside-avoid\">\n              {block.group && (\n                <div aria-hidden className=\"mb-1 text-xs font-semibold uppercase tracking-wide text-muted\">\n                  {block.group}\n                </div>\n              )}\n              <ul role=\"group\" aria-label={block.group || undefined} className=\"space-y-0.5\">\n                {block.rows.map(({ o, i }) => (\n                  <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>{optionRow(o, i)}</Fragment>\n                ))}\n              </ul>\n            </li>\n          ))\n        : results.map((o, i) => {\n            // One heading per group rather than a grey suffix on every row (#136), and\n            // the thing the native <select>'s <optgroup> used to give the account\n            // picker for free (live #200). `results` keeps its source order, so a\n            // boundary is simply \"different from the row above\".\n            const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n            return (\n              // Keyed by group AND value: an option may deliberately appear twice —\n              // Keksdose repeats recently-used categories in a \"Recent\" group at the\n              // top (live #203) — and a bare value key would collide.\n              <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n                {startsGroup && (\n                  <li\n                    role=\"presentation\"\n                    className={cn(\n                      GROUP_HEADING_STICKY,\n                      \"font-semibold uppercase tracking-wide text-muted\",\n                      isPhone ? \"px-4 pb-1 pt-3 text-xs\" : \"px-3 pb-0.5 pt-2 text-caption first:pt-1\",\n                    )}\n                  >\n                    {o.group}\n                  </li>\n                )}\n                {optionRow(o, i)}\n              </Fragment>\n            );\n          })}\n      {createRow}\n    </ul>\n  );\n\n  // The search box is NAMED, not only prompted: a placeholder is gone the moment a\n  // character is typed, and jsdom's readers and some real ones never took it for a name\n  // (BUG-12: GroupedPicker's filter had \"no name beyond its placeholder\").\n  const searchText = searchPlaceholder ?? labels.search;\n\n  if (isPhone) {\n    return (\n      <PickerSheet\n        // First, so the sheet's own props below win: `rest` is typed as div\n        // attributes, and the DOM's `title` is a tooltip string where the sheet's is\n        // its heading — one name, two meanings, and the sheet's is the one the caller\n        // asked for.\n        {...rest}\n        className={className}\n        style={style}\n        open\n        onClose={() => core.setOpen(false)}\n        title={sheetTitle}\n        query={query}\n        onQueryChange={setQuery}\n        searchPlaceholder={searchText}\n        searchLabel={searchText}\n        inputRef={inputRef}\n        closeLabel={closeLabel}\n        // The sheet's search box is in its HEADER, outside the list: the keys go to it\n        // there, and it names the list and the active row (BUG-5). A div around the list\n        // used to catch them, and never did — focus is in the box, not in the list.\n        onSearchKeyDown={onKeyDown}\n        listboxId={listboxId}\n        activeId={activeId}\n        // A multi list stays open as rows are ticked, so the sheet needs a way out\n        // that is not the X in its corner: the kit's sticky \"Done\" (keksdose #412).\n        // A single pick closes the sheet itself.\n        done={multi}\n      >\n        {toolbar}\n        <div className=\"relative\">\n          {list}\n          {announcement}\n        </div>\n      </PickerSheet>\n    );\n  }\n\n  if (!rect) return null;\n  // The panel hangs from the trigger's START edge (or, `align=\"end\"`, its end): its left\n  // in a left-to-right form, its right in a right-to-left one, at least 13.75rem wide\n  // (220 px at Normal, in rem so its text keeps its room at Large, §3.2; `width.minRem`)\n  // and never wider than the glass — and clamped to the glass, which in a left-to-right\n  // form it never was (Wave 2, DUP-7). It is placed by the edge it hangs from, so a `fit`\n  // panel grows away from the trigger's edge before its width is measured; a box hung by\n  // its `right` is measured from inside any scrollbar, as the glass's width is.\n  const glass = viewportSize().width - 2 * PANEL_EDGE;\n  const least = Math.min(Math.max(rect.width, (width?.minRem ?? PANEL_MIN_REM) * remPx), glass);\n  const most = Math.max(least, Math.min(width?.maxRem !== undefined ? width.maxRem * remPx : glass, glass));\n  const panelWidth = fit ? Math.min(Math.max(fitWidth ?? least, least), most) : least;\n  const at = anchoredInline(rect, panelWidth, { dir, align, edge: PANEL_EDGE });\n  const inline = (dir === \"rtl\") === (align === \"start\") ? { right: at.right } : { left: at.left };\n\n  return createPortal(\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused\n       itself: it catches the listbox keys bubbling from the search <input> inside it,\n       which holds focus while the panel is open. */\n    <div\n      // Spread FIRST: `onKeyDown` below is the listbox keyboard (Up/Down/Home/End/\n      // Enter/Tab) and the placement is measured rather than chosen, so neither is a\n      // caller's to replace by accident — while a `data-*` anchor or an\n      // `aria-describedby` has nothing to collide with.\n      {...rest}\n      ref={panelRef}\n      dir={dir}\n      onKeyDown={onKeyDown}\n      // A press in a panel opened from a row is inside this list for the core's outside\n      // press, though portalled elsewhere (dev#623).\n      onPointerDownCapture={(e) => {\n        rest.onPointerDownCapture?.(e);\n        pressInside(panelRef)?.(e);\n      }}\n      // `placement` keeps the panel inside the region actually on screen: on a phone\n      // the search box below pulls up the keyboard, and a panel pinned under a\n      // low trigger would otherwise sit entirely behind it (feedback #135). Flipped\n      // above, it hangs from its bottom edge, so a list shorter than its cap still meets\n      // the trigger (keksdose K1); the edge not in use is cleared, a caller's included.\n      style={{\n        ...style,\n        position: \"fixed\",\n        top: placement.above ? undefined : placement.top,\n        bottom: placement.above ? placement.bottom : undefined,\n        ...inline,\n        // A `fit` panel takes its width from its rows between the two bounds; any other\n        // is exactly the least width.\n        ...(fit ? { width: \"max-content\", minWidth: least, maxWidth: most } : { width: panelWidth }),\n        maxHeight: placement.maxHeight,\n      }}\n      className={cn(\n        \"z-50 flex flex-col rounded-md border border-subtle bg-surface shadow-lg\",\n        className,\n      )}\n    >\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={setQuery}\n        inputRef={inputRef}\n        placeholder={searchText}\n        aria-label={searchText}\n        // Focus is in this box while the list is up, so this is what has to name the\n        // list and the row the arrows are on.\n        listboxId={listboxId}\n        activeId={activeId}\n      />\n      {toolbar}\n      {/* One list, two containers: the desktop panel and the phone sheet render\n          the same rows through the same handlers (live #200). */}\n      {list}\n      {announcement}\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":["Fragment"]}
+{"version":3,"sources":["../../src/components/combobox-core.tsx"],"sourcesContent":["import { Fragment, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  ComponentPropsWithoutRef,\n  Dispatch,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  RefObject,\n  SetStateAction,\n} from \"react\";\nimport { Check, Plus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { CLIPS_ATTRIBUTE } from \"../lib/clipping\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { PickerSheet, SHEET_ROW_CLASS } from \"./picker-sheet\";\nimport { usePhoneLayout, useRemPx } from \"../hooks/use-breakpoint\";\nimport { FLOATING_LABEL_STATIC } from \"./field-parts\";\nimport { Spinner } from \"./spinner\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport { type AnchorRect } from \"../hooks/use-anchored-rect\";\nimport { anchoredInline, useAnchoredPanel, viewportSize, type AnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { pressInside, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { isImeEnter } from \"../lib/ime\";\nimport { foldForSearch } from \"../lib/text-match\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { hasContent } from \"../lib/presence\";\n\n/**\n * What an entity picker hands `onChange` when it is cleared — `clearValue` on\n * {@link EntityCombobox} and {@link InlineEntityCombobox}. `null` by default.\n *\n * A closed set rather than any value, on purpose: every member is something no\n * option can be (an option's value is a `string | number`, and `\"\"` is never a real\n * id), so the picker can also READ it back — a field whose `value` is the clear\n * value shows as empty, with no clear button, exactly as `null` does. An arbitrary\n * sentinel could collide with an id and would make that read ambiguous.\n *\n * No `undefined`: a prop set to `undefined` is a prop not passed, so it would read as\n * the default and emit `null` — the one outcome the caller had asked not to get.\n */\nexport type ComboClearValue = null | \"\";\n\nexport interface ComboOption<V extends string | number> {\n  value: V;\n  label: string;\n  sublabel?: string;\n  icon?: ReactNode;\n  /**\n   * Section this option belongs to. Where a consumer renders it as a heading with the\n   * members indented beneath — {@link InlineEntityCombobox} does — this is a genuine\n   * grouping, not decoration: the name appears once per section rather than trailing\n   * every row in small grey type, which is barely legible on a phone (feedback #136).\n   * The heading stays at the top of the list while its rows scroll beneath it.\n   *\n   * NOT searched (0.40, kk run 79): a group is where a row is filed, not what it is\n   * called — with first-letter groups (\"A\", \"B\", … \"#\"), typing \"a\" matched every row\n   * filed under A. Searching a category's name means putting it in `sublabel`.\n   */\n  group?: string;\n  /**\n   * Shown but not takeable: rendered dimmed with `aria-disabled`, passed over by the\n   * arrow keys, and a click or Enter on it does nothing. For a row whose existence is\n   * the information — a write-locked result, an account that is closed — where\n   * leaving it out would read as \"there is no such thing\". Say WHY in `sublabel`: a\n   * hover tooltip is the one explanation a phone cannot show.\n   *\n   * Honoured by {@link Autocomplete}, {@link InlineEntityCombobox} and the panel\n   * pickers ({@link EntityCombobox}, {@link MultiEntityCombobox}); on those an already\n   * chosen disabled option stays chosen — the row only refuses to be toggled.\n   */\n  disabled?: boolean;\n}\n\n/** A row the user may take — present and not {@link ComboOption.disabled}. */\nexport const isOptionEnabled = (o: { disabled?: boolean } | undefined): boolean =>\n  o !== undefined && !o.disabled;\n\n/**\n * The next takeable row from `from`, stepping `dir` — what the arrow keys use so a\n * disabled row is passed over, as the APG allows. Stays on `from` at the end of the\n * list (the family's arrows clamp rather than wrap) and answers `-1` when `from` is\n * not a row and there is nothing to step to.\n */\nexport function stepEnabled(\n  rows: readonly { disabled?: boolean }[],\n  from: number,\n  dir: 1 | -1,\n): number {\n  for (let i = from + dir; i >= 0 && i < rows.length; i += dir) {\n    if (!rows[i].disabled) return i;\n  }\n  return from >= 0 && from < rows.length ? from : -1;\n}\n\n/** `i` when that row is takeable, else the nearest takeable one after it, else\n *  before it, else `-1`. For a highlight that starts on a fixed index (the panel\n *  pickers open on row 0) and must never rest on a disabled row. */\nexport function settleEnabled(rows: readonly { disabled?: boolean }[], i: number): number {\n  if (i < 0 || i >= rows.length) return -1;\n  if (!rows[i].disabled) return i;\n  const after = stepEnabled(rows, i, 1);\n  if (after !== i) return after;\n  const before = stepEnabled(rows, i, -1);\n  return before !== i ? before : -1;\n}\n\n/** Classes a disabled row adds over its normal ones — dimmed, no hover, the\n *  kit's soft-disabled look (`DangerConfirm`, `SignaturePad`). */\nexport const DISABLED_ROW_CLASS = \"cursor-not-allowed opacity-50 hover:bg-transparent\";\n\n/**\n * Whether an entity picker offers its create row — one rule for\n * {@link EntityCombobox}, {@link MultiEntityCombobox} and {@link InlineEntityCombobox}.\n *\n * With a query: while the trimmed query names no option exactly (case-insensitive) —\n * an exact hit is a record the list is already showing, and a second way to \"make\" it\n * would mint a duplicate. With NO query: only when the caller named the row for that\n * case (`createEmptyLabel`) — a row reading `Create “”` says nothing, and the kit cannot\n * know the noun (\"Create cash account\") that would make it say something (keksdose G9).\n *\n * `names` is what the query is compared against: the loaded rows for a panel picker\n * (its async list is all it knows), every option for the inline one.\n */\nexport function offersCreate(\n  onCreate: unknown,\n  query: string,\n  names: readonly string[],\n  createEmptyLabel: string | undefined,\n): boolean {\n  if (!onCreate) return false;\n  if (!query) return Boolean(createEmptyLabel);\n  const q = query.toLowerCase();\n  return !names.some((n) => n.toLowerCase() === q);\n}\n\n/**\n * {@link EndHintRow}'s `hint` and `className` for a combobox-family field, keeping the\n * 0.22 rule (keksdose): a field that was passed `hint` at all — even `undefined` — keeps\n * ONE box, so a hint coming and going never rebuilds the control under the cursor.\n *\n * A text hint is a caption after the control and never moved it; the case this covers\n * is the \"?\" (a {@link FieldHint}) on a field with no label line, which sits at the end\n * edge in a row of its own. Without this the row existed only while the \"?\" did, and\n * the control was re-parented — remounted, focus and caret lost — each time it came or\n * went. With `hint` passed the row stays, its end slot empty and its gap closed, so\n * nothing on screen moves either.\n */\nexport function endHintRowProps(\n  hintPassed: boolean,\n  hasLabel: boolean,\n  labelHint: ReactNode | undefined,\n): { hint: ReactNode | undefined; className?: string } {\n  if (hasLabel) return { hint: undefined };\n  if (labelHint !== undefined) return { hint: labelHint };\n  return hintPassed ? { hint: null, className: \"gap-0\" } : { hint: undefined };\n}\n\n/**\n * The family's floating label, as a real `<label for>` (lenkbank): the input is then\n * named the way {@link Input}'s is, so `getByLabelText` and any helper that walks\n * `<label htmlFor>` finds it. Same placement and type as {@link FieldLabel}, which\n * stays a `<span>` for the TRIGGER pickers — a `<button>` is labelable, but those\n * compose their own \"label: value\" name. `pointer-events-none` (from the class)\n * keeps a press on it landing on the field under it, as before.\n */\nexport function ComboboxFieldLabel({\n  htmlFor,\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<\"label\"> & { htmlFor: string }) {\n  return (\n    <label {...rest} htmlFor={htmlFor} className={cn(FLOATING_LABEL_STATIC, \"z-10\", className)}>\n      {children}\n    </label>\n  );\n}\n\n/**\n * Where a combobox's rows come from, and how a query narrows them. Shared by the\n * trigger pickers ({@link useComboboxCore}) and the inline {@link Autocomplete}, so\n * the two cannot drift in what a failed lookup or a too-short query does.\n */\nexport interface OptionSourceOptions<V extends string | number> {\n  /** Already-loaded options (client-side filtered unless `filter` is false), also\n   *  used to resolve labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced and race-safe; stale responses are ignored,\n   *  and a rejection is caught and reported as `failed`. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** External loading flag, OR-ed with the internal async state. */\n  loading?: boolean;\n  /**\n   * Narrow `options` by the query (label/sublabel substring, folded for search: no case,\n   * no accents, the locale's case rules — \"zurich\" finds Zürich, DUP-5). Default `true`.\n   *\n   * `false` shows `options` exactly as given, in the given order — for a list the\n   * caller has already searched and ranked on a server (Keksdose's geocoder), which a\n   * second, client-side substring filter could only get wrong: a provider that\n   * matches \"Bahnhofstr.\" to \"Bahnhofstrasse\" is right, and a label filter would\n   * throw that row away.\n   */\n  filter?: boolean;\n  /**\n   * Below this many (trimmed) characters nothing is offered and `loadOptions` is not\n   * called. Default `0` — the pickers list everything on open. Set it for a source\n   * that is costly or rate-limited: one letter against a geocoder matches half a\n   * continent, and a request per opened panel is a request nobody asked for.\n   */\n  minChars?: number;\n  /** Quiet time after the last keystroke before `loadOptions` runs. Default 150 ms. */\n  debounceMs?: number;\n}\n\nexport interface OptionSource<V extends string | number> {\n  results: ComboOption<V>[];\n  busy: boolean;\n  /** The last lookup for this query REJECTED. The rows are emptied with it: results\n   *  from an earlier query under a failed one would read as the answer to it. */\n  failed: boolean;\n  /** The query is shorter than `minChars`, so nothing was asked. */\n  tooShort: boolean;\n}\n\n/**\n * The rows half of a combobox: client-side filtering, or a debounced, race-safe\n * `loadOptions` with its loading and failure states.\n *\n * `active` gates the async side — a closed list asks nothing. Loading is DERIVED\n * (\"the settled answer is for a different query\") rather than flagged on in the\n * effect, so there is no render between a keystroke and the debounce in which an\n * empty list could claim \"No results\" for a question still being asked.\n */\nexport function useOptionSource<V extends string | number>({\n  options,\n  loadOptions,\n  loading,\n  filter = true,\n  minChars = 0,\n  debounceMs = 150,\n  query,\n  active,\n}: OptionSourceOptions<V> & { query: string; active: boolean }): OptionSource<V> {\n  const isAsync = typeof loadOptions === \"function\";\n  const tooShort = query.trim().length < minChars;\n  const [settled, setSettled] = useState<{\n    query: string | null;\n    results: ComboOption<V>[];\n    failed: boolean;\n  }>({ query: null, results: [], failed: false });\n  const loadRef = useRef(loadOptions);\n  useEffect(() => {\n    loadRef.current = loadOptions;\n  });\n  const reqId = useRef(0);\n\n  useEffect(() => {\n    // Bumped even when nothing is asked, so a request still in flight from a longer\n    // query cannot land after the user has deleted back below `minChars`.\n    const id = ++reqId.current;\n    if (!active || !isAsync || tooShort) return;\n    const t = setTimeout(\n      async () => {\n        try {\n          const r = await loadRef.current!(query);\n          if (reqId.current === id) setSettled({ query, results: r, failed: false });\n        } catch {\n          // The one path the old `try/finally` had no answer for: the list kept the\n          // previous query's rows and said nothing (Keksdose proposal §2).\n          if (reqId.current === id) setSettled({ query, results: [], failed: true });\n        }\n      },\n      query ? debounceMs : 0,\n    );\n    return () => clearTimeout(t);\n  }, [query, active, isAsync, tooShort, debounceMs]);\n\n  // Folded as every kit list folds (DUP-5, refactor audit 2026-10): plain `toLowerCase`\n  // here meant \"zurich\" found no Zürich in kastlan's eighteen entity pickers, and the\n  // Turkish \"ı\" no \"IRMAK\".\n  const locale = useKitLocale();\n  const clientResults = useMemo(() => {\n    if (isAsync) return [];\n    const src = options ?? [];\n    const q = foldForSearch(query.trim(), locale);\n    if (!filter || !q) return src;\n    const hit = (s: string | undefined) => s !== undefined && foldForSearch(s, locale).includes(q);\n    return src.filter((o) => hit(o.label) || hit(o.sublabel));\n  }, [isAsync, options, query, filter, locale]);\n\n  const pending = isAsync && active && !tooShort && settled.query !== query;\n  const failed = isAsync && !tooShort && settled.failed;\n  return {\n    results: tooShort ? [] : isAsync ? (failed ? [] : settled.results) : clientResults,\n    busy: Boolean(loading) || pending,\n    failed: failed && !pending,\n    tooShort,\n  };\n}\n\nexport interface ComboboxCoreOptions<V extends string | number> extends OptionSourceOptions<V> {\n  /**\n   * Back closes the open anchored list, not the page or the dialog behind it — the rule\n   * `useDropdown` keeps for its lists (keksdose live #309 rework). Default `false`, as the\n   * entity pickers have always been; CurrencySelect, MultiSelect, GroupedPicker and\n   * AmountInput's currency chip, which came over from `useDropdown` (DUP-4), pass `true`\n   * so they keep it. On a phone the `PickerSheet` registers Back itself.\n   */\n  backCloses?: boolean;\n}\n\nexport interface ComboboxCore<V extends string | number> {\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  panelRef: RefObject<HTMLDivElement | null>;\n  inputRef: RefObject<HTMLInputElement | null>;\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n  query: string;\n  setQuery: Dispatch<SetStateAction<string>>;\n  active: number;\n  setActive: Dispatch<SetStateAction<number>>;\n  results: ComboOption<V>[];\n  busy: boolean;\n  /** See {@link OptionSource}. */\n  failed: boolean;\n  tooShort: boolean;\n  minChars: number;\n  rect: AnchorRect | null;\n  /** Where the dropdown goes, clamped to the visible viewport (feedback #135). */\n  placement: AnchoredPanel;\n  /** Put an option in the label cache, so {@link ComboboxCore.resolve} still knows a\n   *  value the caller just chose after the result list has moved on. */\n  rememberOption: (o: ComboOption<V>) => void;\n  resolve: (v: V) => ComboOption<V> | null;\n  /** Close and hand focus back to the trigger — the keyboard paths only. See\n   *  {@link useDropdown} for why a pointer dismissal must not do this. */\n  closeToTrigger: () => void;\n}\n\n/**\n * Shared plumbing for the entity pickers: open/query/active state, portalled\n * anchoring + outside-click/Escape dismissal, focus-on-open, a debounced\n * race-safe async (or client-side) result list, and a label cache so a selected\n * value still renders its label after the async list has moved on. The single-\n * and multi-value comboboxes render their triggers on top of this and share\n * {@link ComboboxPanel} for the dropdown.\n */\nexport function useComboboxCore<V extends string | number>({\n  options,\n  minChars = 0,\n  backCloses = false,\n  ...source\n}: ComboboxCoreOptions<V>): ComboboxCore<V> {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [active, setActive] = useState(0);\n\n  const close = () => setOpen(false);\n  // Escape unmounts the panel the user is typing in; without this the browser drops\n  // focus on <body>, so the caret disappears and the next Tab restarts at the top of\n  // the page. A pointer dismissal deliberately does NOT do this — the press has\n  // already decided where focus belongs.\n  const closeToTrigger = () => {\n    setOpen(false);\n    triggerRef.current?.focus();\n  };\n  // Placement, not just the anchor rect: the panel has to dodge the on-screen\n  // keyboard its own search box summons (feedback #135).\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  // Outside-click dismissal belongs to the ANCHORED panel, and only to it. On a\n  // phone `ComboboxPanel` renders a full-screen `PickerSheet` instead (live #200),\n  // portalled to <body> and carrying its own ways out — the close X, Escape, and\n  // Back through `useOverlayHistory` — so there is no outside left to press.\n  //\n  // Leaving the listener on there was not merely redundant, it was the bug:\n  // `panelRef` is attached to the desktop panel alone, so with the sheet up every\n  // press inside it answered \"outside\". While `useOutsideClick` listened for\n  // `mousedown` the rows survived by accident — they commit on `onMouseDown` too,\n  // and won the race — but `pointerdown` PRECEDES `mousedown`, so the sheet closed\n  // at finger-down and the commit landed on an unmounted tree: a tapped row kept the\n  // old value, and tapping the search box or the X was equally fatal. `PickerSheet`\n  // stops `mousedown` for exactly this reason, but that guard was written for\n  // `useDropdown`'s listener and never covered this hook.\n  const isPhone = usePhoneLayout();\n  useOutsideClick([triggerRef, panelRef], close, open && !isPhone);\n  // A layer on the Escape stack while the anchored panel is open (Wave 2, DUP-1), so a\n  // dialog around the picker closes only after it (BUG-1). `ComboboxPanel` takes the key\n  // where focus is. On a phone the `PickerSheet` is the layer, as it is the outside.\n  useDismissLayer(open && !isPhone, closeToTrigger);\n  // See `backCloses`. The same close path a pointer dismissal takes.\n  useOverlayHistory(backCloses && open && !isPhone, close);\n\n  // Reset the query each time the panel opens, and the highlighted row whenever the\n  // visible set changes (a new query, or the panel opening or closing). Adjusted while\n  // rendering against the previous values rather than in an effect, so the render that\n  // opens the panel already searches for \"\" and highlights the first row.\n  const [prevOpen, setPrevOpen] = useState(open);\n  const [prevQuery, setPrevQuery] = useState(query);\n  if (open !== prevOpen || query !== prevQuery) {\n    const opened = open && !prevOpen;\n    setPrevOpen(open);\n    setPrevQuery(opened ? \"\" : query);\n    if (opened) setQuery(\"\");\n    setActive(0);\n  }\n\n  // Focus the search box each time the panel opens.\n  useEffect(() => {\n    if (!open) return;\n    const id = requestAnimationFrame(() => inputRef.current?.focus());\n    return () => cancelAnimationFrame(id);\n  }, [open]);\n\n  // Debounced, race-safe async search (only when loadOptions is provided) or the\n  // client-side filter — see {@link useOptionSource}.\n  const { results, busy, failed, tooShort } = useOptionSource<V>({\n    ...source,\n    options,\n    minChars,\n    query,\n    active: open,\n  });\n\n  // Accumulate every option we've seen so a selected value can render its label\n  // even after the async list has moved on to other query results.\n  const cacheRef = useRef(new Map<V, ComboOption<V>>());\n  useEffect(() => {\n    for (const o of options ?? []) cacheRef.current.set(o.value, o);\n    for (const o of results) cacheRef.current.set(o.value, o);\n  }, [options, results]);\n  const resolve = (v: V): ComboOption<V> | null =>\n    options?.find((o) => o.value === v) ?? cacheRef.current.get(v) ?? null;\n  const rememberOption = (o: ComboOption<V>) => {\n    cacheRef.current.set(o.value, o);\n  };\n\n  return {\n    triggerRef,\n    panelRef,\n    inputRef,\n    open,\n    setOpen,\n    query,\n    setQuery,\n    active,\n    setActive,\n    results,\n    busy,\n    failed,\n    tooShort,\n    minChars,\n    rect,\n    placement,\n    rememberOption,\n    resolve,\n    closeToTrigger,\n  };\n}\n\n// The family's `error` is every field's `useFieldError` (field-parts) since 0.34 — the\n// restatement that stood here ignored a form library's `aria-invalid` (DUP-8).\n\n/** The anchored suggestion list's box and rows — one look for {@link Combobox},\n *  {@link InlineEntityCombobox} and {@link Autocomplete}. */\n/**\n * A group's heading in a picker list stays at the top of the list while its rows scroll\n * under it (kk run 79 gap 3): with first-letter groups over two hundred payees, the\n * heading is the one thing that says where in the alphabet the thumb is. Opaque — the\n * list's own `bg-surface` — so the rows pass beneath it rather than through it. Shared\n * by every list that heads groups (the panel and the sheet, `Combobox`, `Autocomplete`,\n * `InlineEntityCombobox`).\n */\nexport const GROUP_HEADING_STICKY = \"sticky top-0 z-10 bg-surface\";\n\nexport const SUGGESTION_LIST_CLASS =\n  \"max-h-64 overflow-y-auto rounded-md border border-subtle bg-surface py-1 shadow-lg\";\n\n// One line at Normal; from Large up a long suggestion wraps and its row grows (text size\n// §10.17, round 0.34 T1), like every other option list of the kit.\nexport const suggestionRowClass = (isActive: boolean) =>\n  cn(\n    \"block w-full truncate-until-large px-3 py-1.5 text-start text-sm text-primary\",\n    isActive ? \"bg-active\" : \"hover:bg-hover\",\n  );\n\n/**\n * Keep the option the keyboard is on inside the visible part of the list.\n *\n * `aria-activedescendant` moves a highlight WITHOUT moving focus, which is the whole\n * point of it — and the cost is that the browser scrolls nothing on its own. In a\n * panel capped at a few hundred pixels over an account list two hundred long, Down\n * walked the highlight straight out of the box and the list sat still.\n *\n * Optional-called because jsdom does not implement `scrollIntoView`: three consumers\n * run this component in their own suites, and a picker that throws there is a worse\n * trade than a list that does not scroll in a test.\n */\nexport function useActiveOptionScroll(activeId: string | undefined): void {\n  useEffect(() => {\n    if (!activeId) return;\n    document.getElementById(activeId)?.scrollIntoView?.({ block: \"nearest\" });\n  }, [activeId]);\n}\n\n/** The anchored panel's least width, in rem: 220 px at Normal (§3.2). */\nconst PANEL_MIN_REM = 13.75;\n\n/** The room the anchored panel keeps from either edge of the glass, in px —\n *  `anchoredInline`'s default. */\nconst PANEL_EDGE = 8;\n\n/**\n * How wide the anchored panel is. The phone sheet is the screen's width whatever this\n * says.\n */\nexport interface ComboboxPanelWidth {\n  /** The least width, in rem — never under the trigger's own. Default 13.75 (220 px at\n   *  Normal, §3.2). */\n  minRem?: number;\n  /**\n   * As wide as the rows make it (`max-content`), between the least width and `maxRem`,\n   * instead of exactly the least — measured, so the clamp to the glass still knows it.\n   * CurrencySelect's list grows to show the full currency names (feedback #308);\n   * MultiSelect's rows to show their hints (keksdose #147). A `w-*` class in the panel's\n   * `className` does not apply: the panel is portalled to <body>, where `w-full` would be\n   * the screen.\n   */\n  fit?: boolean;\n  /** With `fit`, the most it grows to, in rem. Default: the glass. */\n  maxRem?: number;\n}\n\nexport interface ComboboxPanelProps<V extends string | number>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  core: ComboboxCore<V>;\n  /** What the trigger's `aria-controls` names. Owned by the component that renders\n   *  the trigger, not by the core: one id has to reach both, and only one of them\n   *  can be the origin. */\n  listboxId: string;\n  /** Default: `combobox.search` from the {@link UiKitProvider}, else English. */\n  searchPlaceholder?: string;\n  /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */\n  emptyLabel?: string;\n  multi?: boolean;\n  isSelected: (v: V) => boolean;\n  onChoose: (o: ComboOption<V>) => void;\n  showCreate: boolean;\n  onCreate: () => void;\n  createContent: ReactNode;\n  /**\n   * The create row is shown but not takeable, and this says why — the lock's reason\n   * when the picker's `createCommit` meets a locked {@link WriteLockProvider}. Rendered\n   * as the row's second line rather than a tooltip, as {@link ComboOption.disabled}\n   * asks of every disabled row: a hover is the one explanation a phone cannot show.\n   */\n  createDisabledReason?: ReactNode;\n  /** What the sheet calls itself on a phone — the field's label. Ignored on\n   *  desktop, where the panel sits under the field that already says it. */\n  sheetTitle?: ReactNode;\n  closeLabel?: string;\n  /** Default: `combobox.loadError` from the {@link UiKitProvider}, else English. */\n  loadErrorLabel?: string;\n  /**\n   * What a row shows in place of its label and sublabel — for a row that says more than\n   * two strings: CurrencySelect's symbol, code and name side by side. The option's\n   * `icon`, the multi checkbox and the check mark stay the panel's. Its text is the\n   * option's accessible name, so separate the parts with a space.\n   */\n  renderOption?: (o: ComboOption<V>) => ReactNode;\n  /** Controls between the search box and the list, in the anchored panel and the phone\n   *  sheet alike — MultiSelect's \"Select all\" and \"Clear\". */\n  toolbar?: ReactNode;\n  /** See {@link ComboboxPanelWidth}. */\n  width?: ComboboxPanelWidth;\n  /** Which of the trigger's edges the anchored panel hangs from, by reading direction.\n   *  Default `start`; `end` grows the panel toward the start, so a field with content\n   *  after it is not pushed past the page (CurrencySelect, feedback #308). */\n  align?: \"start\" | \"end\";\n  /**\n   * Lay the rows out in columns, one block per `group`, with the group's name above it —\n   * GroupedPicker's panel (feedback #267/#276): a large grouped set reads as a sheet of\n   * short lists side by side rather than one long one. Each block is a `role=\"group\"`\n   * named by its heading. The arrow keys walk the rows in reading order, down each\n   * column. The phone sheet keeps one column with headings.\n   */\n  columns?: boolean;\n}\n\n/**\n * The portalled dropdown (search header + result rows + optional create row)\n * shared by the single- and multi-value comboboxes. Start-aligned to the trigger\n * and sized to its width; `multi` swaps the trailing check for a leading\n * checkbox. `onChoose` decides whether to close (single) or stay open (multi).\n *\n * ## The ARIA, which is `CommandPalette`'s\n *\n * This rendered a `role=\"listbox\"` of `role=\"option\"` rows and stopped there, so a\n * reader was handed a text box and silence: the highlight the arrow keys move lived\n * only in a background colour, and nothing tied the box being typed in to the list\n * being filtered. `CommandPalette` has had the whole model since it was written —\n * `aria-controls` from the field to the list, `aria-activedescendant` naming the row\n * the keyboard is on — and it was the only thing in the package that did.\n *\n * Two distinct states, deliberately not conflated:\n *   - `aria-selected` is CHOSEN. It is the check mark, and in `multi` the checkbox.\n *   - `aria-activedescendant` is where the KEYBOARD is. Announcing that as selected\n *     would tell a reader that the row they are merely passing over is the answer.\n *\n * `role=\"option\"` sits on the `<button>`, not on the `<li>` around it, for the same\n * reason it does in `CommandPalette`: an option may not contain a separately\n * focusable control, and the button is the thing a pointer presses. The rows are\n * `tabIndex={-1}` because focus never leaves the search box — that is what\n * `aria-activedescendant` is FOR.\n */\nexport function ComboboxPanel<V extends string | number>({\n  core,\n  listboxId,\n  searchPlaceholder,\n  emptyLabel,\n  multi,\n  isSelected,\n  onChoose,\n  showCreate,\n  onCreate,\n  createContent,\n  createDisabledReason,\n  sheetTitle,\n  closeLabel,\n  loadErrorLabel,\n  renderOption,\n  toolbar,\n  width,\n  align = \"start\",\n  columns,\n  className,\n  style,\n  ...rest\n}: ComboboxPanelProps<V>) {\n  const createLocked = hasContent(createDisabledReason);\n  const {\n    rect,\n    placement,\n    panelRef,\n    inputRef,\n    query,\n    setQuery,\n    results,\n    busy,\n    failed,\n    tooShort,\n    active,\n    setActive,\n    closeToTrigger,\n  } = core;\n  // The phone gets a full-screen sheet instead of an anchored panel (live #200).\n  // Same core, same results, same handlers — only the container differs, so the\n  // two presentations cannot drift in what they offer.\n  const isPhone = usePhoneLayout();\n  // Every row the keyboard can land on, the create row included — passed over, like a\n  // disabled option, while a write lock holds it.\n  const rows: readonly { disabled?: boolean }[] = showCreate\n    ? [...results, { disabled: createLocked }]\n    : results;\n  const rowCount = rows.length;\n  const optionId = (index: number) => `${listboxId}-option-${index}`;\n  // The core opens on row 0 and knows nothing of `disabled`; the highlight is settled\n  // HERE, derived, so it can never rest on a row that cannot be taken — whatever the\n  // async list turned out to hold.\n  const current = settleEnabled(rows, active);\n  const activeId = current >= 0 ? optionId(current) : undefined;\n  useActiveOptionScroll(activeId);\n  // The consumers resolve their own props against the provider already; this is\n  // for the loading row, which no consumer names, and for a caller that renders the\n  // panel directly and leaves the two optional strings out.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS);\n  // Portalled to <body>, the panel leaves the subtree its `dir` came from — so the\n  // direction is read off the trigger and put back on the panel below.\n  const dir = useAnchorDir(core.triggerRef, core.open);\n  const remPx = useRemPx();\n  // A `fit` panel's measured width — what it takes to keep it on the glass (see\n  // `ComboboxPanelWidth.fit`). Observed rather than read once: the rows change under the\n  // search, and a filtered list of short names is a narrower panel. `null` where nothing\n  // is laid out (jsdom), and the least width is used.\n  const fit = width?.fit === true && !isPhone;\n  const [fitWidth, setFitWidth] = useState<number | null>(null);\n  const placed = core.open && rect !== null;\n  useLayoutEffect(() => {\n    const el = panelRef.current;\n    if (!fit || !placed || !el || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const measured = el.getBoundingClientRect().width;\n      setFitWidth(measured > 0 ? measured : null);\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [fit, placed, panelRef]);\n\n  // The WAI-ARIA APG's listbox keyboard, in full: Up/Down step, Home/End jump, Enter\n  // commits, Tab leaves, Escape closes. On the panel's search box — in the anchored\n  // panel and, through `onSearchKeyDown`, in the phone sheet's header (BUG-5).\n  const onKeyDown = (e: ReactKeyboardEvent) => {\n    // Escape goes to the top of the kit's Escape stack — this list, which opened over\n    // any dialog it sits in — and stops HERE (round 0.34 BUG-1, Wave 2 DUP-1). The\n    // panel's events travel up the React tree through that dialog, portal or not, and\n    // one press used to close the dialog and throw the form away, list still open.\n    if (takeEscape(e)) return;\n    // The Enter that confirms an IME composition is the IME's (BUG-9).\n    if (isImeEnter(e)) return;\n    // Disabled rows are passed over (`stepEnabled`), and each step starts from the\n    // SETTLED highlight, not the raw index, so the first Down from a disabled row 0\n    // goes to the row after the one already shown as highlighted.\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActive(stepEnabled(rows, current, 1));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActive(current < 0 ? -1 : stepEnabled(rows, current, -1));\n    } else if (e.key === \"Home\") {\n      e.preventDefault();\n      setActive(stepEnabled(rows, -1, 1));\n    } else if (e.key === \"End\") {\n      e.preventDefault();\n      setActive(stepEnabled(rows, rowCount, -1));\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      if (current < 0) return;\n      if (current < results.length) onChoose(results[current]);\n      else if (showCreate && !createLocked) onCreate();\n    } else if (e.key === \"Tab\" && !isPhone) {\n      // The panel is PORTALLED to <body>, so the browser's own Tab would move from\n      // here to whatever follows the portal — i.e. off the end of the document. The\n      // trade is one extra Tab (trigger, then onward) against never stranding focus\n      // at the bottom of the page. The phone sheet is a dialog, and its trap keeps Tab.\n      e.preventDefault();\n      closeToTrigger();\n    }\n  };\n\n  // What the list holds, said in ONE place that is both on screen and a polite\n  // live region. Focus stays in the search box, so the list changing under it was\n  // silent — a reader typed and heard nothing back, and a failed lookup was the same\n  // silence as a slow one. Outside the listbox, which may own only options.\n  //\n  // Three different empties, and only one of them is \"nothing matched\": a lookup\n  // that failed must not claim there is nothing to find, and a query under\n  // `minChars` was never asked. With rows showing, the count is for the reader only.\n  const message: ReactNode =\n    busy && results.length === 0 ? (\n      // The ellipsis is the picture; the words are for a reader, who otherwise met\n      // an empty-looking list with a lone \"…\" in it — or, in most readers, nothing\n      // at all, since punctuation alone is skipped.\n      <>\n        <span aria-hidden>…</span>\n        <span className=\"sr-only\">{labels.loading}</span>\n      </>\n    ) : busy ? (\n      // Loading with the LAST query's rows still up. This was `null`, so a refetch —\n      // a new query, or a caller's `loading` while it reloads — looked exactly like a\n      // finished list: rows that were about to be replaced, with nothing saying so.\n      // A line of its own under the rows, in words, so it reads without the spinner.\n      <span className=\"flex items-center gap-2\">\n        <Spinner label={null} className=\"size-3.5 border\" />\n        {labels.loading}\n      </span>\n    ) : results.length === 0 && !showCreate ? (\n      failed ? (\n        (loadErrorLabel ?? labels.loadError)\n      ) : tooShort ? (\n        labels.minChars(core.minChars)\n      ) : (\n        (emptyLabel ?? labels.noResults)\n      )\n    ) : null;\n  // `relative` so the sr-only text has a local containing block (see\n  // sr-only-containment.test).\n  const announcement = (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      className={cn(\n        \"relative\",\n        message !== null && cn(\"py-2 text-sm\", isPhone ? \"px-4\" : \"px-3\"),\n        failed ? \"text-danger\" : \"text-muted\",\n      )}\n    >\n      {message ??\n        (results.length > 0 && (\n          <span className=\"sr-only\">{labels.resultCount(results.length)}</span>\n        ))}\n    </div>\n  );\n\n  if (!core.open || typeof document === \"undefined\") return null;\n\n  // One option row — the same in both containers and in both layouts.\n  const optionRow = (o: ComboOption<V>, i: number) => {\n    const selected = isSelected(o.value);\n    return (\n      <li role=\"presentation\">\n        <button\n          type=\"button\"\n          id={optionId(i)}\n          role=\"option\"\n          aria-selected={selected}\n          aria-disabled={o.disabled || undefined}\n          tabIndex={-1}\n          onMouseDown={(e) => {\n            e.preventDefault();\n            if (!o.disabled) onChoose(o);\n          }}\n          onMouseEnter={() => {\n            if (!o.disabled) setActive(i);\n          }}\n          className={cn(\n            isPhone\n              ? SHEET_ROW_CLASS\n              : columns\n                ? // A cell of a column (GroupedPicker): tighter, so four columns fit.\n                  \"flex w-full items-center gap-1.5 rounded px-1.5 py-0.5 text-start text-sm\"\n                : \"flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm\",\n            // The row the arrows are on shows it on a phone too: the sheet takes\n            // the keyboard (BUG-5), and a tablet or a desktop at Large has one.\n            o.disabled\n              ? DISABLED_ROW_CLASS\n              : i === current\n                ? \"bg-active\"\n                : !isPhone && \"hover:bg-hover\",\n            // After SHEET_ROW_CLASS, so its hover is the one cancelled.\n            o.disabled && isPhone && DISABLED_ROW_CLASS,\n          )}\n        >\n          {multi && (\n            <span\n              // The checkbox is a PICTURE of `aria-selected` above, so a reader\n              // that met both would be told twice.\n              aria-hidden\n              className={cn(\n                \"flex size-4 shrink-0 items-center justify-center rounded border\",\n                selected\n                  ? \"border-[var(--bg-inverse)] bg-inverse text-inverse\"\n                  : \"border-strong bg-surface\",\n              )}\n            >\n              {selected && <Check className=\"size-3\" />}\n            </span>\n          )}\n          {o.icon && <span className=\"shrink-0\">{o.icon}</span>}\n          {renderOption ? (\n            <span className=\"flex min-w-0 flex-1 items-center gap-2\">{renderOption(o)}</span>\n          ) : (\n            /* Label and sublabel wrap from Large up (text size §10.17, round 0.34 T1). */\n            <span className=\"min-w-0 flex-1\">\n              <span className={cn(\"block truncate-until-large text-primary\", columns && selected && \"font-medium\")}>\n                {o.label}\n              </span>\n              {o.sublabel && (\n                <span className=\"block truncate-until-large text-xs text-placeholder\">{o.sublabel}</span>\n              )}\n            </span>\n          )}\n          {!multi && selected && <Check className=\"size-4 shrink-0 text-brand\" />}\n        </button>\n      </li>\n    );\n  };\n\n  const createRow = showCreate && (\n    <li role=\"presentation\">\n      <button\n        type=\"button\"\n        id={optionId(results.length)}\n        role=\"option\"\n        // Never chosen — it is an action, and it disappears the moment it has\n        // been taken. Whether the keyboard is ON it is `aria-activedescendant`'s\n        // job to say.\n        aria-selected={false}\n        aria-disabled={createLocked || undefined}\n        tabIndex={-1}\n        onMouseDown={(e) => {\n          e.preventDefault();\n          if (!createLocked) onCreate();\n        }}\n        onMouseEnter={() => {\n          if (!createLocked) setActive(results.length);\n        }}\n        className={cn(\n          isPhone\n            ? SHEET_ROW_CLASS\n            : \"flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm\",\n          \"text-secondary\",\n          createLocked\n            ? DISABLED_ROW_CLASS\n            : current === results.length\n              ? \"bg-active\"\n              : !isPhone && \"hover:bg-hover\",\n          // After SHEET_ROW_CLASS, so its hover is the one cancelled.\n          createLocked && isPhone && DISABLED_ROW_CLASS,\n        )}\n      >\n        <Plus className=\"size-4 shrink-0\" />\n        <span className=\"min-w-0 flex-1\">\n          <span className=\"block truncate-until-large\">{createContent}</span>\n          {createLocked && (\n            <span className=\"block truncate-until-large text-xs text-placeholder\">\n              {createDisabledReason}\n            </span>\n          )}\n        </span>\n      </button>\n    </li>\n  );\n\n  // In columns, a block per run of one group; `results` keeps its source order, so a\n  // run is the rows up to the next change of group.\n  const blocks: { group: string; rows: { o: ComboOption<V>; i: number }[] }[] = [];\n  if (columns && !isPhone) {\n    results.forEach((o, i) => {\n      const group = o.group ?? \"\";\n      const last = blocks[blocks.length - 1];\n      if (last && last.group === group) last.rows.push({ o, i });\n      else blocks.push({ group, rows: [{ o, i }] });\n    });\n  }\n\n  const list = (\n    <ul\n      id={listboxId}\n      role=\"listbox\"\n      aria-multiselectable={multi}\n      // The rows are provisional while a lookup is in flight — whether or not the\n      // previous query's are still showing.\n      aria-busy={busy || undefined}\n      // It scrolls, and says so where jsdom can see it (see `CLIPS_ATTRIBUTE`): a\n      // Tooltip in a row then portals out in a test exactly as it does in the\n      // browser, instead of joining the option's accessible name (keksdose E8).\n      {...{ [CLIPS_ATTRIBUTE]: \"\" }}\n      className={cn(\n        \"min-h-0 flex-1 overflow-y-auto\",\n        columns && !isPhone ? \"columns-2 gap-4 p-3 md:columns-3 xl:columns-4\" : \"py-1\",\n        isPhone && \"flex-none\",\n      )}\n    >\n      {columns && !isPhone\n        ? blocks.map((block) => (\n            // A column block: its heading is a picture of the group's name, which the\n            // `role=\"group\"` carries for a reader — the listbox may own options and\n            // groups, and a heading of loose text in it is neither.\n            <li key={`${block.group}|${block.rows[0].i}`} role=\"presentation\" className=\"mb-3 break-inside-avoid\">\n              {block.group && (\n                <div aria-hidden className=\"mb-1 text-xs font-semibold uppercase tracking-wide text-muted\">\n                  {block.group}\n                </div>\n              )}\n              <ul role=\"group\" aria-label={block.group || undefined} className=\"space-y-0.5\">\n                {block.rows.map(({ o, i }) => (\n                  <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>{optionRow(o, i)}</Fragment>\n                ))}\n              </ul>\n            </li>\n          ))\n        : results.map((o, i) => {\n            // One heading per group rather than a grey suffix on every row (#136), and\n            // the thing the native <select>'s <optgroup> used to give the account\n            // picker for free (live #200). `results` keeps its source order, so a\n            // boundary is simply \"different from the row above\".\n            const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n            return (\n              // Keyed by group AND value: an option may deliberately appear twice —\n              // Keksdose repeats recently-used categories in a \"Recent\" group at the\n              // top (live #203) — and a bare value key would collide.\n              <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n                {startsGroup && (\n                  <li\n                    role=\"presentation\"\n                    className={cn(\n                      GROUP_HEADING_STICKY,\n                      \"font-semibold uppercase tracking-wide text-muted\",\n                      isPhone ? \"px-4 pb-1 pt-3 text-xs\" : \"px-3 pb-0.5 pt-2 text-caption first:pt-1\",\n                    )}\n                  >\n                    {o.group}\n                  </li>\n                )}\n                {optionRow(o, i)}\n              </Fragment>\n            );\n          })}\n      {createRow}\n    </ul>\n  );\n\n  // The search box is NAMED, not only prompted: a placeholder is gone the moment a\n  // character is typed, and jsdom's readers and some real ones never took it for a name\n  // (BUG-12: GroupedPicker's filter had \"no name beyond its placeholder\").\n  const searchText = searchPlaceholder ?? labels.search;\n\n  if (isPhone) {\n    return (\n      <PickerSheet\n        // First, so the sheet's own props below win: `rest` is typed as div\n        // attributes, and the DOM's `title` is a tooltip string where the sheet's is\n        // its heading — one name, two meanings, and the sheet's is the one the caller\n        // asked for.\n        {...rest}\n        className={className}\n        style={style}\n        open\n        onClose={() => core.setOpen(false)}\n        title={sheetTitle}\n        query={query}\n        onQueryChange={setQuery}\n        searchPlaceholder={searchText}\n        searchLabel={searchText}\n        inputRef={inputRef}\n        closeLabel={closeLabel}\n        // The sheet's search box is in its HEADER, outside the list: the keys go to it\n        // there, and it names the list and the active row (BUG-5). A div around the list\n        // used to catch them, and never did — focus is in the box, not in the list.\n        onSearchKeyDown={onKeyDown}\n        listboxId={listboxId}\n        activeId={activeId}\n        // A multi list stays open as rows are ticked, so the sheet needs a way out\n        // that is not the X in its corner: the kit's sticky \"Done\" (keksdose #412).\n        // A single pick closes the sheet itself.\n        done={multi}\n      >\n        {toolbar}\n        <div className=\"relative\">\n          {list}\n          {announcement}\n        </div>\n      </PickerSheet>\n    );\n  }\n\n  if (!rect) return null;\n  // The panel hangs from the trigger's START edge (or, `align=\"end\"`, its end): its left\n  // in a left-to-right form, its right in a right-to-left one, at least 13.75rem wide\n  // (220 px at Normal, in rem so its text keeps its room at Large, §3.2; `width.minRem`)\n  // and never wider than the glass — and clamped to the glass, which in a left-to-right\n  // form it never was (Wave 2, DUP-7). It is placed by the edge it hangs from, so a `fit`\n  // panel grows away from the trigger's edge before its width is measured; a box hung by\n  // its `right` is measured from inside any scrollbar, as the glass's width is.\n  const glass = viewportSize().width - 2 * PANEL_EDGE;\n  const least = Math.min(Math.max(rect.width, (width?.minRem ?? PANEL_MIN_REM) * remPx), glass);\n  const most = Math.max(least, Math.min(width?.maxRem !== undefined ? width.maxRem * remPx : glass, glass));\n  const panelWidth = fit ? Math.min(Math.max(fitWidth ?? least, least), most) : least;\n  const at = anchoredInline(rect, panelWidth, { dir, align, edge: PANEL_EDGE });\n  const inline = (dir === \"rtl\") === (align === \"start\") ? { right: at.right } : { left: at.left };\n\n  return createPortal(\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused\n       itself: it catches the listbox keys bubbling from the search <input> inside it,\n       which holds focus while the panel is open. */\n    <div\n      // Spread FIRST: `onKeyDown` below is the listbox keyboard (Up/Down/Home/End/\n      // Enter/Tab) and the placement is measured rather than chosen, so neither is a\n      // caller's to replace by accident — while a `data-*` anchor or an\n      // `aria-describedby` has nothing to collide with.\n      {...rest}\n      ref={panelRef}\n      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).\n      data-kit-layer=\"\"\n      dir={dir}\n      onKeyDown={onKeyDown}\n      // A press in a panel opened from a row is inside this list for the core's outside\n      // press, though portalled elsewhere (dev#623).\n      onPointerDownCapture={(e) => {\n        rest.onPointerDownCapture?.(e);\n        pressInside(panelRef)?.(e);\n      }}\n      // `placement` keeps the panel inside the region actually on screen: on a phone\n      // the search box below pulls up the keyboard, and a panel pinned under a\n      // low trigger would otherwise sit entirely behind it (feedback #135). Flipped\n      // above, it hangs from its bottom edge, so a list shorter than its cap still meets\n      // the trigger (keksdose K1); the edge not in use is cleared, a caller's included.\n      style={{\n        ...style,\n        position: \"fixed\",\n        top: placement.above ? undefined : placement.top,\n        bottom: placement.above ? placement.bottom : undefined,\n        ...inline,\n        // A `fit` panel takes its width from its rows between the two bounds; any other\n        // is exactly the least width.\n        ...(fit ? { width: \"max-content\", minWidth: least, maxWidth: most } : { width: panelWidth }),\n        maxHeight: placement.maxHeight,\n      }}\n      className={cn(\n        \"z-50 flex flex-col rounded-md border border-subtle bg-surface shadow-lg\",\n        className,\n      )}\n    >\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={setQuery}\n        inputRef={inputRef}\n        placeholder={searchText}\n        aria-label={searchText}\n        // Focus is in this box while the list is up, so this is what has to name the\n        // list and the row the arrows are on.\n        listboxId={listboxId}\n        activeId={activeId}\n      />\n      {toolbar}\n      {/* One list, two containers: the desktop panel and the phone sheet render\n          the same rows through the same handlers (live #200). */}\n      {list}\n      {announcement}\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":["Fragment"]}