@eifi1/ui-kit 0.24.1 → 0.25.1

package/dist/components/ui.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ui.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { ChevronDown, Eye, EyeOff, HelpCircle, Plus, X } from \"lucide-react\";\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, ChangeEvent, ComponentPropsWithoutRef, CSSProperties, InputHTMLAttributes, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref, SelectHTMLAttributes, TextareaHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { scrollIntoStrip, useStripFade } from \"../lib/strip-fade\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { Tooltip, type TooltipSide } from \"./tooltip\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, replacingClick, routerLinkNavigation } from \"./text-link\";\nimport { useCommitReason } from \"./write-lock\";\nimport { mergeDescribedBy } from \"./choice-parts\";\nimport {\n  EndHintRow,\n  FieldCaption,\n  LockedReason,\n  useFieldHint,\n  useLockReason,\n  FLOATING_LABEL_STATIC,\n  STATIC_LABEL_TYPE,\n  type FieldHintParts,\n} from \"./field-parts\";\n\n// The static label lives in field-parts since 0.23 (it is what the field anatomy\n// there draws, and field-parts must not import this file); public from here as before.\nexport { FieldLabel, FLOATING_LABEL_STATIC } from \"./field-parts\";\nexport type { FieldLabelProps } from \"./field-parts\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\" | \"brand\" | \"link\";\n\n// Shared base ring for every button-styled element. Kept as a named const so the\n// <Button> component and the {@link buttonClasses} helper draw from one source and\n// can never drift apart.\nconst BUTTON_BASE =\n  \"inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed\";\n\nexport type ButtonSize = \"sm\" | \"md\";\n\n// Box geometry per size, split out of the base so the two cannot be merged into one\n// string that a size then has to fight. `md` is the pre-0.8.0 look, unchanged. `sm` is\n// the compact secondary action keksdose repeats by hand as `px-2 py-1 text-xs` (and\n// `px-2 py-0.5 text-xs`) on the buttons in a toolbar or a table header; one rung is\n// enough, so the two spellings meet at `py-1`. There is no `lg`: no app has asked for\n// a bigger text button (IconButton's `lg` is a touch target, not a text size). The\n// variant map comes AFTER the size, so `link`'s `p-0` still wins at either size.\nconst BUTTON_SIZES: Record<ButtonSize, string> = {\n  md: \"gap-2 px-3 py-2 text-sm\",\n  sm: \"gap-1.5 px-2 py-1 text-xs\",\n};\n\n// Warm, palette-token-driven so buttons blend with the fields + cards in every theme.\n// Actions default to a warm bordered look (primary = filled warm chip, secondary =\n// outline); `brand` stays the solid accent for the rare strong CTA; `danger` takes the\n// semantic `--danger` family (destructive semantics), so a consumer can re-point the\n// destructive hue instead of inheriting a hard-coded red. Focus rings follow each\n// variant's own accent: brand for the four neutral ones, danger for `danger`.\nconst buttonVariantClasses: Record<ButtonVariant, string> = {\n  primary:\n    \"border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-primary)] hover:bg-[var(--border)] focus:ring-[var(--brand)]\",\n  secondary:\n    \"border border-[var(--border)] bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus:ring-[var(--brand)]\",\n  ghost:\n    \"bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus:ring-[var(--brand)]\",\n  danger:\n    \"bg-[var(--danger)] text-[var(--danger-contrast)] hover:bg-[var(--danger-hover)] focus:ring-[var(--danger-border-strong)]\",\n  brand:\n    \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)] focus:ring-[var(--brand)]\",\n  // A text link that is still a `<button>` — keksdose's six hand-rolled\n  // `<button className=\"text-brand underline\">` sites (\"Resend code\", \"Show all\",\n  // \"Undo\" in a toast…), which act rather than navigate and so must not be anchors.\n  // The box padding goes (`p-0`) so it sits in a sentence at the text's own size, but\n  // the base's `focus:ring-2` stays: those copies had `outline-none` and no ring, so\n  // a keyboard user tabbing onto them saw nothing at all. `rounded-sm` keeps that\n  // ring hugging the word instead of drawing a pill round it.\n  link:\n    \"rounded-sm p-0 bg-transparent text-[var(--brand)] underline-offset-4 hover:underline focus:ring-[var(--brand)]\",\n};\n\n/**\n * The text colour of a `link` or `ghost` button, over the variant's own.\n *\n * `muted` is the QUIET link keksdose hand-rolls in six places (tours-page:321's \"Mark\n * undone\", transaction-fields:176/215's \"Add line\" / \"Fill total\",\n * invoice-lines-table:376, invoice-review:464): secondary text that darkens to the\n * body colour under the pointer, for an action that must be findable but not compete\n * with the brand-coloured one beside it. `danger` is the same quiet look turning\n * `--danger` on hover — transaction-editor:401's \"Remove split\", which is a text\n * action that destroys something.\n *\n * A `tone` rather than a `link-muted` variant, because it is the axis IconButton\n * already has (`tone=\"muted\"`, `tone=\"danger\"`, same quiet-until-hover meaning), and\n * because the same two looks are wanted on `ghost`.\n *\n * `danger` also reaches the two NEUTRAL boxed variants, where the box carries it:\n * `secondary` becomes an outlined destructive button (`--danger` text and a\n * `--danger-border` outline, the quiet danger fill on hover) and `primary` a soft one\n * (the quiet fill at rest, solid `--danger` on hover). kastlan's meeting-invitations-\n * tab.tsx \"Remove all\" is `variant=\"secondary\" className=\"text-destructive\"` — a\n * destructive action that must sit in a row of secondary buttons without shouting\n * like the solid `variant=\"danger\"` would, and whose red text alone left the border\n * and hover saying \"neutral\". `muted` stays a text look and does nothing on a box, and\n * `danger`, `brand` and `link`'s own colours are left alone: a tone that recoloured a\n * solid danger or brand button would be a second variant under another name.\n */\nexport type ButtonTone = \"default\" | \"muted\" | \"danger\";\n\nconst BUTTON_TONES: Record<Exclude<ButtonTone, \"default\">, string> = {\n  muted:\n    \"text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:hover:text-[var(--text-secondary)]\",\n  danger:\n    \"text-[var(--text-secondary)] hover:text-[var(--danger)] focus:ring-[var(--danger-border-strong)] disabled:hover:text-[var(--text-secondary)]\",\n};\n\n/** Only the two transparent variants take every tone; see {@link ButtonTone}. */\nconst TONED_VARIANTS = new Set<ButtonVariant>([\"link\", \"ghost\"]);\n\n// `tone=\"danger\"` on the neutral boxed variants — see {@link ButtonTone}. Each string\n// restates every colour the variant sets (border, fill, text, hover, ring) so none of\n// the neutral ones survives the merge.\nconst BUTTON_BOXED_DANGER: Partial<Record<ButtonVariant, string>> = {\n  secondary:\n    \"border-[var(--danger-border)] bg-transparent text-[var(--danger)] hover:bg-[var(--danger-bg)] focus:ring-[var(--danger-border-strong)]\",\n  primary:\n    \"border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)] hover:border-[var(--danger)] hover:bg-[var(--danger)] hover:text-[var(--danger-contrast)] focus:ring-[var(--danger-border-strong)] disabled:hover:border-[var(--danger-border)] disabled:hover:bg-[var(--danger-bg)] disabled:hover:text-[var(--danger)]\",\n};\n\n// `pressed` on a `link`: the brand colour and a heavier weight, which is exactly what\n// lenkbank's \"All speeds\" toggle paints by hand (gear/hysteresis-charts.tsx:482). After\n// the tone, so a pressed muted link is brand, and an unpressed one is quiet grey.\nconst BUTTON_LINK_PRESSED =\n  \"font-medium text-[var(--brand)] hover:text-[var(--brand)] disabled:hover:text-[var(--brand)]\";\n\n/** The second argument of {@link buttonClasses} in its options form. */\nexport interface ButtonClassesOptions {\n  /** See {@link ButtonProps.size}. */\n  size?: ButtonSize;\n  className?: string;\n}\n\n/**\n * Button classes for the rare case where the styling must land on a non-`<button>`\n * element that {@link Button} can't render — e.g. a router `<Link>` or a Radix\n * AlertDialog Action/Cancel (which must stay the Radix element). Everywhere a real\n * button works, prefer `<Button>`. Draws from the same base, size and variant maps as\n * `<Button>`, so the two stay in lockstep.\n *\n * The second argument is either the extra classes (the pre-0.8.0 form) or\n * `{ size, className }` — `buttonClasses(\"secondary\", { size: \"sm\" })` for keksdose's\n * compact toolbar links.\n */\nexport function buttonClasses(\n  variant: ButtonVariant = \"primary\",\n  classNameOrOptions?: string | ButtonClassesOptions,\n): string {\n  const { size = \"md\", className } =\n    typeof classNameOrOptions === \"object\" ? classNameOrOptions : { className: classNameOrOptions };\n  return cn(BUTTON_BASE, BUTTON_SIZES[size], buttonVariantClasses[variant], className);\n}\n\n/**\n * ⚠️ No default `type`: like a native `<button>`, a `Button` inside a `<form>` SUBMITS\n * it unless you pass `type=\"button\"`. Kept native on purpose — a form's own submit\n * button relies on it, and changing the default would silently stop those forms from\n * submitting. Pass `type=\"button\"` for every other action in a form (keksdose had six\n * link buttons submitting their form).\n */\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  /** `md` (default) is the page's action button. `sm` is the compact one — 12px text\n   *  and `px-2 py-1` — for the secondary actions in a toolbar, a card header or a\n   *  table's header row (keksdose writes `px-2 py-1 text-xs` over `secondary` by hand\n   *  there). Every variant takes either size. */\n  size?: ButtonSize;\n  /** In a flex row next to a taller labelled field, fill the field's height so the\n   *  two line up. No effect outside a flex row. */\n  stretch?: boolean;\n  /** The `<button>` element. React 19 passes `ref` to a function component as an\n   *  ordinary prop, so it rides `...rest` onto the element with no `forwardRef` —\n   *  declared here only because `ButtonHTMLAttributes` does not carry it. */\n  ref?: Ref<HTMLButtonElement>;\n  /** Text colour for `link` and `ghost`: `muted` (quiet, body colour on hover) or\n   *  `danger` (quiet, `--danger` on hover). `danger` also makes `secondary` an\n   *  outlined destructive button and `primary` a soft one; ignored by the other\n   *  variants. See {@link ButtonTone}. */\n  tone?: ButtonTone;\n  /**\n   * Make it a toggle button, as {@link IconButton}'s `pressed` does. `true` sets\n   * `aria-pressed=\"true\"` and draws the \"on\" look — on a `link`, the brand colour and a\n   * medium weight; on the boxed variants, the quiet brand fill IconButton uses — and\n   * `false` sets `aria-pressed=\"false\"` with the ordinary look. Left out, no\n   * `aria-pressed` (or the caller's own). For lenkbank's \"All speeds\" text toggle\n   * (gear/hysteresis-charts.tsx:482), which is a hand-rolled `<button aria-pressed>`\n   * swapping two class strings; with `variant=\"link\" tone=\"muted\"` it is this.\n   */\n  pressed?: boolean;\n  /**\n   * Why the action is not available — the button's half of DangerConfirm's\n   * `lockedReason` (kastlan handover-detail-page.tsx:197 locks a signed handover).\n   *\n   * A disabled button that cannot say why is a dead end: the native `disabled` takes it\n   * out of the tab order, so a keyboard user never lands on it, and a pointer gets a\n   * `not-allowed` cursor and nothing else. With a reason the button is `aria-disabled`\n   * instead — still focusable, still hoverable — clicks (and the Enter/Space and form\n   * submission they stand for) do nothing, and the reason is shown in the kit\n   * {@link Tooltip} and attached with `aria-describedby`, so a screen reader hears it\n   * on focus. It wins over `disabled`: passing both keeps the button reachable, which is\n   * the point of giving a reason.\n   *\n   * The description is a `hidden` copy of the reason rather than the bubble itself: the\n   * bubble exists only while hovered or focused once it is portalled, and a description\n   * that comes and goes is read inconsistently. The bubble is kept visual, the way\n   * DangerConfirm keeps its own.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This button COMMITS — it saves, creates, deletes. Under a locked\n   * {@link WriteLockProvider} it is disabled the `disabledReason` way, with the lock's\n   * reason (which wins over a `disabledReason` of its own). No provider, or an\n   * unlocked one: no effect. See {@link WriteLockProvider}.\n   */\n  commit?: boolean;\n  /**\n   * Busy — the save is in flight: a spinner, `aria-busy`, and no second submit.\n   *\n   * kastlan's FormActions (form-actions.tsx:50) disables its submit and swaps in a\n   * `submittingLabel`, so the button jumps width mid-click and a screen reader hears\n   * the name change instead of \"busy\". Here the label STAYS — it is still the\n   * accessible name and still holds the button's width — and the spinner is drawn over\n   * it in the text colour, so nothing beside the button moves.\n   *\n   * The same prop {@link FileButton} has (`pending`), with one difference: this one is\n   * `aria-disabled`, not `disabled`. The button being pressed is the one that has focus,\n   * and a native `disabled` drops that focus to `<body>` the moment the save starts;\n   * clicks, and the Enter that submits a form through it, are swallowed instead.\n   */\n  pending?: boolean;\n  /** Only on the link form — see {@link ButtonLinkProps}. */\n  href?: never;\n  renderLink?: never;\n  external?: never;\n  replace?: never;\n  reloadDocument?: never;\n}\n\n/**\n * `<Button href>`: a link that looks like a button — for an action that NAVIGATES.\n *\n * kastlan paints `buttonClasses(…)` onto router Links by hand in six places (the\n * invoice / lease / unit preview dialogs' \"Open\" at invoice-preview-dialog.tsx:36,\n * platform-companies-page.tsx:111, verify-email-page.tsx:86's \"Log in\",\n * billing-history-page.tsx:85's PDF download), and has 26 `<Button onClick={() =>\n * navigate(…)}>` that are links in all but markup: no middle-click, no \"open in new\n * tab\", no URL on hover, and a screen reader announces a button that then changes the\n * page. With `href` it is an `<a>`: the provider's router link\n * ({@link UiKitProvider}'s `linkComponent`), or `renderLink` if given, else a plain one.\n *\n * `type` and `form` are typed out: they are a `<button>`'s, and a link never submits.\n */\nexport interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"type\" | \"href\"> {\n  href: string;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  stretch?: boolean;\n  tone?: ButtonTone;\n  /** The in-app router link, over the provider's `linkComponent` (see\n   *  {@link KitLinkComponent}). Ignored when `external`. */\n  renderLink?: KitLinkComponent;\n  /** Leaves the app: a plain `<a target=\"_blank\" rel=\"noopener noreferrer\">`, never the\n   *  router link, and \"(opens in a new tab)\" read after the label — billing-history's\n   *  Stripe PDF. A `target=\"_blank\"` of your own is announced the same way. */\n  external?: boolean;\n  /**\n   * Navigate by replacing the current history entry, so Back does not return here —\n   * keksdose F1: the \"Continue\" out of a one-shot page (an emailed confirmation link, a\n   * payment return URL) that must not be landed on again. Handed to the router link as\n   * `replace` (see `KitLinkProps.replace` for mapping it); on a plain `<a>` a plain click\n   * becomes `location.replace(href)`. Ignored when `external`.\n   */\n  replace?: boolean;\n  /**\n   * A plain `<a>` for an in-app `href`, so the browser loads the whole document instead\n   * of the router swapping the view — keksdose F1: a route the SPA does not own (a\n   * server-rendered export, a logout that must drop every in-memory cache). Wins over\n   * `renderLink` and the provider's `linkComponent`.\n   */\n  reloadDocument?: boolean;\n  /** A link cannot be `disabled`, so this renders an `<a>` with NO `href` —\n   *  `role=\"link\"` and `aria-disabled`, out of the tab order like a disabled button,\n   *  with the disabled look. The router link is not used: it needs somewhere to go. */\n  disabled?: boolean;\n  ref?: Ref<HTMLAnchorElement>;\n  type?: never;\n  form?: never;\n  pending?: never;\n  pressed?: never;\n  disabledReason?: never;\n  commit?: never;\n}\n\nfunction hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== \"\";\n}\n\n/** The button look shared by the `<button>` and the `<a>` form. */\nfunction buttonLook(variant: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone) {\n  return cn(\n    BUTTON_BASE,\n    BUTTON_SIZES[size],\n    // In a flex row next to a taller labelled field, `stretch` makes the button\n    // fill the field's height so the two line up (self-stretch overrides the row's\n    // align-items). No effect outside a flex row / when it's already the tallest.\n    stretch && \"self-stretch\",\n    buttonVariantClasses[variant],\n    tone !== \"default\" && TONED_VARIANTS.has(variant) && BUTTON_TONES[tone],\n    tone === \"danger\" && BUTTON_BOXED_DANGER[variant],\n  );\n}\n\n// Declared link-first so `<Button href>` picks the link props; the LAST signature is\n// what `ComponentProps<typeof Button>` reads, so wrappers (FileButton) still see the\n// `<button>` props they always did.\nexport function Button(props: ButtonLinkProps): ReactElement;\nexport function Button(props: ButtonProps): ReactElement;\nexport function Button(props: ButtonProps | ButtonLinkProps): ReactElement {\n  if (props.href !== undefined) return <ButtonLink {...(props as ButtonLinkProps)} />;\n  return <ButtonElement {...(props as ButtonProps)} />;\n}\n\n/** Calls a `renderLink` / provider link as a function, as ListItem and Chip do — an\n *  inline `renderLink` arrow would otherwise be a new component type every render. */\nfunction RenderedButtonLink({ render, ...props }: KitLinkProps & { render: KitLinkComponent }) {\n  return render(props);\n}\n\nfunction ButtonLink({\n  href,\n  renderLink,\n  external,\n  replace,\n  reloadDocument,\n  disabled,\n  variant = \"primary\",\n  size = \"md\",\n  stretch,\n  tone = \"default\",\n  className,\n  children,\n  target,\n  rel,\n  onClick,\n  ...rest\n}: ButtonLinkProps) {\n  const kitLink = useKitLink();\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  // The same rule as every kit link (`pickLinkRenderer`): an external `href` or an\n  // in-page `#anchor` is never handed to the provider's router link, even without\n  // `external`.\n  // `reloadDocument` is the caller saying \"not the router\" for this one link.\n  const Link = reloadDocument ? undefined : pickLinkRenderer<KitLinkProps>(renderLink, kitLink, href);\n  const newTab = !disabled && (external || target === \"_blank\");\n  const cls = cn(\n    buttonLook(variant, size, stretch, tone),\n    // `relative` holds the sr-only note (see sr-only-containment.test).\n    newTab && \"relative\",\n    // BUTTON_BASE's `disabled:` classes never match an `<a>`; no pointer events also\n    // keeps the hover fill from lighting up on something that refuses the click.\n    disabled && \"pointer-events-none cursor-not-allowed opacity-50\",\n    className,\n  );\n  const body = (\n    <>\n      {children}\n      {/* The space OUTSIDE the sr-only span: a name computation trims each child's\n          text, so one inside it was lost (\"Download(opens…\"). In a flex box a bare\n          space draws nothing. */}\n      {newTab && \" \"}\n      {newTab && <span className=\"sr-only\">({common.opensInNewTab})</span>}\n    </>\n  );\n  if (disabled) {\n    return (\n      <a {...rest} role=\"link\" aria-disabled=\"true\" className={cls}>\n        {body}\n      </a>\n    );\n  }\n  if (external || !Link) {\n    return (\n      <a\n        {...rest}\n        href={href}\n        target={external ? \"_blank\" : target}\n        rel={external ? (rel ?? \"noopener noreferrer\") : rel}\n        onClick={external ? onClick : replacingClick(onClick, href, replace, target)}\n        className={cls}\n      >\n        {body}\n      </a>\n    );\n  }\n  return (\n    <RenderedButtonLink\n      render={Link}\n      {...rest}\n      {...routerLinkNavigation(replace)}\n      href={href}\n      target={target}\n      rel={rel}\n      onClick={onClick}\n      className={cls}\n    >\n      {body}\n    </RenderedButtonLink>\n  );\n}\n\nfunction ButtonElement({\n  variant = \"primary\",\n  size = \"md\",\n  stretch,\n  tone = \"default\",\n  pressed,\n  disabledReason: ownDisabledReason,\n  commit,\n  pending,\n  className,\n  onClick,\n  children,\n  href: _href,\n  renderLink: _renderLink,\n  external: _external,\n  replace: _replace,\n  reloadDocument: _reloadDocument,\n  ...rest\n}: ButtonProps) {\n  const reasonId = useId();\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  const inert = locked || Boolean(pending);\n  const ownDescribedBy = rest[\"aria-describedby\"];\n  const button = (\n    <button\n      {...rest}\n      disabled={inert ? undefined : rest.disabled}\n      aria-disabled={inert || rest[\"aria-disabled\"]}\n      aria-busy={pending || rest[\"aria-busy\"]}\n      aria-describedby={locked ? (ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId) : ownDescribedBy}\n      aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n      onClick={(e) => {\n        // `preventDefault` as well as not calling through: a locked submit button must\n        // not submit its form, and the browser does that after this handler returns.\n        if (inert) {\n          e.preventDefault();\n          return;\n        }\n        onClick?.(e);\n      }}\n      className={cn(\n        buttonLook(variant, size, stretch, tone),\n        pressed && (variant === \"link\" ? BUTTON_LINK_PRESSED : ICON_BUTTON_PRESSED),\n        // The disabled look for the focusable kind of disabled.\n        locked && \"cursor-not-allowed opacity-50\",\n        // No dimming while pending: the spinner IS the state, and at half opacity it\n        // would be the faintest thing on the button. `relative` anchors it.\n        pending && \"relative cursor-progress\",\n        className,\n      )}\n    >\n      {pending ? (\n        <>\n          {/* Transparent, not hidden: it keeps the width AND stays the accessible\n              name (`visibility: hidden` would drop it from the name). `gap-[inherit]`\n              keeps an icon + text spaced as the button spaces them. */}\n          <span className=\"inline-flex items-center justify-center gap-[inherit] opacity-0\">{children}</span>\n          {/* Decorative: `aria-busy` says it, as on FileButton. */}\n          <Spinner\n            label={null}\n            className=\"absolute inset-0 m-auto size-4 border-current/30 border-t-current\"\n          />\n        </>\n      ) : (\n        children\n      )}\n    </button>\n  );\n  if (!locked) return button;\n  return (\n    // The button in a FRAGMENT so Tooltip does not clone its bubble into the\n    // description as well — the hidden copy below already describes it, and the same\n    // sentence twice would be read on every focus. `stretch` moves to the wrapper,\n    // which is now the flex item.\n    <Tooltip label={disabledReason} className={stretch ? \"self-stretch\" : undefined}>\n      <>\n        {button}\n        <span id={reasonId} hidden>\n          {disabledReason}\n        </span>\n      </>\n    </Tooltip>\n  );\n}\n\n// Canonical square icon-only button. <Button> carries TEXT geometry — px-3 py-2\n// gap-2 — so rendering a bare glyph through it gives a small icon in a wide,\n// text-shaped box. This fixes a square box instead and, crucially, forces the\n// child icon to a size set by the BOX (20px at md/sm) via `[&_svg]:size-*` so a\n// caller cannot under-size it. Use it wherever an action is a bare icon\n// (edit/delete/tools) so they all match the top-bar icon buttons and can never\n// drift apart again.\n//\n// Draws its colours from the same `buttonVariantClasses` map as <Button>, so the\n// two re-skin together with the palette.\nconst ICON_BUTTON_BASE =\n  \"inline-flex items-center justify-center rounded-md transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed\";\n\nexport type IconButtonSize = \"2xl\" | \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\" | \"2xs\";\n\n// Box and glyph together, so a 24px chip action cannot end up holding a 20px icon\n// that touches its edges. The two small steps are lenkbank's list-row (28px) and\n// chip (24px) actions, which it had hand-rolled beside the kit's 32/36px ones.\nconst ICON_BUTTON_SIZES: Record<IconButtonSize, string> = {\n  // 64px with a 28px glyph: a camera's shutter (keksdose invoices/camera-capture.tsx:248,\n  // `size-16` by hand) — the one control of a full-screen capture view, thumb-sized.\n  \"2xl\": \"size-16 [&_svg]:size-7\",\n  // 48px with a 24px glyph: the one primary action of a phone screen or sheet, a step\n  // past the 44px minimum rather than on it.\n  xl: \"size-12 [&_svg]:size-6\",\n  // The 44px touch target (WCAG 2.5.5's size) with the same 20px glyph — keksdose's\n  // bulk-action bars write `size-11` by hand over an `md` button to get it on phones.\n  lg: \"size-11 [&_svg]:size-5\",\n  md: \"size-9 [&_svg]:size-5\",\n  sm: \"size-8 [&_svg]:size-5\",\n  xs: \"size-7 rounded [&_svg]:size-4\",\n  \"2xs\": \"size-6 rounded [&_svg]:size-3.5\",\n};\n\n// `stretch`: the same WIDTH and glyph, and a height taken from the row instead of\n// stated — `size-*` sets a height that `self-stretch` cannot override, so the box is\n// written as a width plus a minimum height (the square it would otherwise be).\nconst ICON_BUTTON_STRETCH_SIZES: Record<IconButtonSize, string> = {\n  \"2xl\": \"w-16 min-h-16 self-stretch [&_svg]:size-7\",\n  xl: \"w-12 min-h-12 self-stretch [&_svg]:size-6\",\n  lg: \"w-11 min-h-11 self-stretch [&_svg]:size-5\",\n  md: \"w-9 min-h-9 self-stretch [&_svg]:size-5\",\n  sm: \"w-8 min-h-8 self-stretch [&_svg]:size-5\",\n  xs: \"w-7 min-h-7 self-stretch rounded [&_svg]:size-4\",\n  \"2xs\": \"w-6 min-h-6 self-stretch rounded [&_svg]:size-3.5\",\n};\n\n// A tone re-colours the glyph without changing what the variant draws around it.\n// Each coloured tone comes in two resting looks, picked by `quiet` (see the prop):\n// QUIET is placeholder grey until the pointer or focus arrives, then the tone's\n// family; TONED wears the tone's colour at rest. The defaults are the looks each tone\n// had before `quiet` existed: `danger` is quiet — an action in every row of a list\n// must not shout from every row, so the red arrives only on the one row you are about\n// to act on — while `warning` and `info` are toned, because they mark the ONE thing\n// on the row to notice (keksdose's \"needs review\" flag, its reconcile action at\n// accounts-page:867), and quiet grey would hide the very thing they point out.\n// `muted` is quiet by definition and has no toned look; `default` has no tone.\n//\n// `success` is toned at rest too: the green is the news (keksdose's \"in sync\" chip).\n// `custom` paints from `--icon-button-tone`, which `toneColor` sets — for a glyph whose\n// colour FOLLOWS STATE across tones (keksdose's sync chip: rose, amber, sky, green as\n// the sync moves), where swapping `tone` would do but the colour is one variable.\nexport type IconButtonTone = \"default\" | \"muted\" | \"danger\" | \"warning\" | \"info\" | \"success\" | \"custom\";\n\ntype ColouredTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"custom\";\n\nconst ICON_BUTTON_TONES: Record<ColouredTone, { quiet: string; toned: string }> = {\n  danger: {\n    quiet:\n      \"text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border-strong)]\",\n    toned: \"text-[var(--danger)] hover:bg-[var(--danger-bg)] focus:ring-[var(--danger-border-strong)]\",\n  },\n  warning: {\n    quiet:\n      \"text-[var(--text-placeholder)] hover:bg-[var(--warning-bg)] hover:text-[var(--warning)] focus:ring-[var(--warning-border)]\",\n    toned: \"text-[var(--warning)] hover:bg-[var(--warning-bg)] focus:ring-[var(--warning-border)]\",\n  },\n  info: {\n    quiet:\n      \"text-[var(--text-placeholder)] hover:bg-[var(--info-bg)] hover:text-[var(--info)] focus:ring-[var(--info-border)]\",\n    toned: \"text-[var(--info)] hover:bg-[var(--info-bg)] focus:ring-[var(--info-border)]\",\n  },\n  success: {\n    quiet:\n      \"text-[var(--text-placeholder)] hover:bg-[var(--success-bg)] hover:text-[var(--success)] focus:ring-[var(--success-border)]\",\n    toned: \"text-[var(--success)] hover:bg-[var(--success-bg)] focus:ring-[var(--success-border)]\",\n  },\n  // The hover fill and the ring are MIXED from the one colour, since a custom tone\n  // brings no `-bg` / `-border` pair of its own. The fallback is the body colour, so a\n  // `custom` tone with no colour set is the default look rather than invisible.\n  custom: {\n    quiet:\n      \"text-[var(--text-placeholder)] hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] hover:text-[var(--icon-button-tone,var(--text-primary))] focus:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]\",\n    toned:\n      \"text-[var(--icon-button-tone,var(--text-primary))] hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] focus:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]\",\n  },\n};\n\nconst ICON_BUTTON_MUTED =\n  \"text-[var(--text-placeholder)] hover:bg-[var(--bg-surface-2)] hover:text-[var(--text-primary)]\";\n\n/** Which tones sit quiet at rest when `quiet` is left out. */\nconst QUIET_BY_DEFAULT: Record<ColouredTone, boolean> = {\n  danger: true,\n  warning: false,\n  info: false,\n  success: false,\n  custom: false,\n};\n\nfunction iconButtonToneClass(tone: IconButtonTone, quiet: boolean | undefined): string {\n  if (tone === \"default\") return \"\";\n  if (tone === \"muted\") return cn(ICON_BUTTON_MUTED, ICON_BUTTON_QUIET_DISABLED_REST);\n  const isQuiet = quiet ?? QUIET_BY_DEFAULT[tone];\n  const look = ICON_BUTTON_TONES[tone];\n  return isQuiet ? cn(look.quiet, ICON_BUTTON_QUIET_DISABLED_REST) : look.toned;\n}\n\n// A disabled button must not answer the pointer. The hover classes above are plain\n// `hover:` (so a caller's `className=\"hover:…\"` still replaces them through\n// tailwind-merge), which means they fire on a disabled button too — the old grey\n// icon lit up on hover while refusing the click. Rather than rewrite every hover as\n// `enabled:hover:` (which never matches the `<a>` that `buttonClasses` also styles,\n// and would out-rank a caller's plain `hover:` override), each variant pins its\n// RESTING look under `disabled:hover:`, which out-ranks any `hover:` by specificity\n// and only ever matches a disabled button.\nconst ICON_BUTTON_DISABLED_REST: Record<IconButtonVariant, string> = {\n  primary: \"disabled:hover:bg-[var(--bg-surface-2)]\",\n  secondary: \"disabled:hover:bg-transparent\",\n  ghost: \"disabled:hover:bg-transparent\",\n  danger: \"disabled:hover:bg-[var(--danger)]\",\n  brand: \"disabled:hover:bg-[var(--brand)]\",\n  link: \"disabled:hover:bg-transparent disabled:hover:no-underline\",\n  overlay: \"disabled:hover:bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)]\",\n  shutter: \"disabled:hover:bg-[var(--media-scrim)]\",\n};\n\n// The quiet looks change the glyph on hover, so they pin their resting glyph the\n// same way. A toned look keeps its glyph on hover and needs no pin.\nconst ICON_BUTTON_QUIET_DISABLED_REST = \"disabled:hover:text-[var(--text-placeholder)]\";\n\n// `pressed`: a toggle that is on. The brand glyph on the quiet brand fill — the\n// \"selected\" look of a Chip or a SegmentedControl option, so an on toggle reads as on\n// beside them. After the tone, so a pressed `muted` button is brand, not grey.\nconst ICON_BUTTON_PRESSED =\n  \"bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)] hover:text-[var(--brand)] disabled:hover:bg-[var(--brand-bg)] disabled:hover:text-[var(--brand)]\";\n\n// `variant=\"overlay\"`: a round, translucent disc for a control that sits ON a photo\n// (keksdose's receipt-scan preview: close, rotate, retake over the camera image).\n// The inverse pair, not the surface one: what has to hold is the contrast between the\n// disc and its glyph, whatever the picture underneath is, and `--bg-inverse` /\n// `--text-inverse` are the one token pair defined as each other's opposite in both\n// themes. The disc is the inverse at 60% (`color-mix`, so it stays a token a palette\n// can re-point); the blur keeps a busy background from breaking the glyph's edge.\nconst ICON_BUTTON_OVERLAY =\n  \"rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)] text-[var(--text-inverse)] backdrop-blur-sm hover:bg-[color-mix(in_srgb,var(--bg-inverse)_75%,transparent)] focus:ring-[var(--text-inverse)]\";\n\n// `variant=\"shutter\"`: the camera's release — keksdose's camera-capture.tsx:248 draws\n// it by hand as a 64px circle with a thick white ring round a translucent fill. It sits\n// on a live camera picture, which is dark whatever the theme, so it uses the MEDIA\n// tokens (tokens.css), white ink on a dark scrim in both themes — the inverse pair\n// `overlay` uses would give a dark ring on a dark viewfinder in dark mode. The focus ring stands off by 2px, or it would\n// merge into the ring that is part of the look.\nconst ICON_BUTTON_SHUTTER =\n  \"rounded-full border-4 border-[var(--media-ink)] bg-[var(--media-scrim)] text-[var(--media-ink)] backdrop-blur-sm hover:bg-[var(--media-scrim-hover)] focus:ring-[var(--media-ink)] focus:ring-offset-2 focus:ring-offset-[var(--media-scrim-hover)]\";\n\nexport type IconButtonVariant = ButtonVariant | \"overlay\" | \"shutter\";\n\n/**\n * The glyph's size in px, over the one the box size implies — see\n * {@link IconButtonProps.glyphSize}.\n */\nexport type IconButtonGlyphSize = 12 | 14 | 16 | 20 | 24 | 28;\n\nconst ICON_BUTTON_GLYPH_SIZES: Record<IconButtonGlyphSize, string> = {\n  12: \"[&_svg]:size-3\",\n  14: \"[&_svg]:size-3.5\",\n  16: \"[&_svg]:size-4\",\n  20: \"[&_svg]:size-5\",\n  24: \"[&_svg]:size-6\",\n  28: \"[&_svg]:size-7\",\n};\n\n// `pending`'s spinner, the size of the glyph it replaces (the `[&_svg]` rules above\n// size only an svg, and the spinner is a bordered span).\nconst ICON_BUTTON_SPINNER: Record<IconButtonSize, string> = {\n  \"2xl\": \"size-7\",\n  xl: \"size-6\",\n  lg: \"size-5\",\n  md: \"size-5\",\n  sm: \"size-5\",\n  xs: \"size-4\",\n  \"2xs\": \"size-3.5\",\n};\nconst ICON_BUTTON_SPINNER_GLYPH: Record<IconButtonGlyphSize, string> = {\n  12: \"size-3\",\n  14: \"size-3.5\",\n  16: \"size-4\",\n  20: \"size-5\",\n  24: \"size-6\",\n  28: \"size-7\",\n};\n\nexport interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Any {@link ButtonVariant}; `overlay` — a round translucent disc for use over\n   *  an image (see `ICON_BUTTON_OVERLAY`); or `shutter` — a camera's release, a ringed\n   *  disc over the viewfinder (see `ICON_BUTTON_SHUTTER`; pair it with `size=\"2xl\"`). */\n  variant?: IconButtonVariant;\n  /** Box size: 2xl = 64px with a 28px icon (a camera shutter), xl = 48px with a 24px\n   *  icon, lg = 44px (a phone's touch target), md = 36px (matches the top bar),\n   *  sm = 32px — all three with a 20px icon;\n   *  xs = 28px with a 16px icon (an action in a list row), 2xs = 24px with a 14px\n   *  icon (an action on a chip or a tab). `glyphSize` overrides the icon. */\n  size?: IconButtonSize;\n  /**\n   * The icon's size in px, when the box's own is not the one wanted. keksdose's sync\n   * chip (app/sync-status-indicator.tsx:142) is a 24px round chip round a 20px cloud —\n   * `size=\"2xs\" glyphSize={20} shape=\"round\"` — where `2xs` alone draws 14px. A number\n   * over a new size step because the box and the glyph are two independent choices; a\n   * step per combination (`\"sm-lg\"`) would have to be named for every one.\n   */\n  glyphSize?: IconButtonGlyphSize;\n  /**\n   * A small mark on the button's corner — the sync chip's 12px check over its cloud\n   * (\"all good\", feedback #67). Rendered OUTSIDE the `<button>`, in a wrapper beside\n   * it, so the box's `[&_svg]:size-*` rule that sizes the glyph does not blow the badge\n   * up to the glyph's size; a bare `<Check />` comes out 12px, on a\n   * `--bg-surface` disc that keeps it legible over the glyph. Decorative\n   * (`aria-hidden`): the name (`label` / `aria-label`) must already carry the state.\n   * With a badge, `className` still lands on the button; the wrapper is the flex item.\n   */\n  badge?: ReactNode;\n  /**\n   * `keep`: a disabled button keeps its full colour (no 50% drop) and an ordinary\n   * cursor. For a STATUS that is also an action — the sync chip shows \"in sync\" in\n   * green and refreshes on click, and is disabled while offline or syncing, when the\n   * state it shows matters most; dimmed it read as broken (keksdose wrote\n   * `disabled:cursor-default` by hand and left out the dimming). Default `dim`.\n   */\n  disabledStyle?: \"dim\" | \"keep\";\n  /**\n   * Fill the height of the flex row it stands in, keeping its width — the delete at\n   * the end of keksdose's split line (transaction-fields:162), level with the labelled\n   * fields beside it rather than floating at half their height. {@link Button}'s\n   * `stretch`; no effect outside a flex row. With a `label`, the tooltip's wrapper is\n   * what stretches.\n   */\n  stretch?: boolean;\n  /** `round`: a circle instead of the rounded square — a compact status chip in a top\n   *  bar (keksdose's sync indicator). `overlay` is always round. */\n  shape?: \"square\" | \"round\";\n  /**\n   * The colour of `tone=\"custom\"`, as any CSS colour — a token (`var(--warning)`),\n   * ideally. Sets `--icon-button-tone` on the button, so passing a different one per\n   * state re-colours the glyph, its hover fill and its focus ring together. Passing it\n   * implies `tone=\"custom\"`. Or leave it out and set the variable yourself from a class\n   * (`className=\"[--icon-button-tone:var(--success)]\"`).\n   *\n   * Or a `{ light, dark }` pair, one colour per theme — keksdose: a raw colour that reads\n   * on the light surface (`#be123c`) is too dark on the dark one, and an inline style\n   * cannot say \"in dark mode\". See {@link IconButtonToneColor}.\n   */\n  toneColor?: IconButtonToneColor;\n  /** Glyph colour over the variant. `muted`: placeholder grey, full text colour on\n   *  hover. `danger`: the same grey at rest, `--danger` on hover and focus — for a\n   *  remove/delete that repeats down a list. `warning`: amber at rest — a flag that\n   *  wants attention. `info`: sky at rest — a notice-worthy but harmless action\n   *  (keksdose's reconcile). `success`: green at rest — a good state worth seeing.\n   *  `custom`: the colour of `toneColor` (see there). Default: the variant's own colours. See `quiet` for\n   *  turning a coloured tone's resting look the other way. */\n  tone?: IconButtonTone;\n  /**\n   * Whether a coloured tone (`danger`, `warning`, `info`) waits for the pointer:\n   * `true` is placeholder grey at rest and the tone's colour on hover and focus;\n   * `false` wears the tone's colour at rest. Left out, each tone keeps its own\n   * default — `danger` quiet, `warning` and `info` not. Ignored for `muted` (quiet by\n   * definition) and `default` (no tone).\n   *\n   * `quiet={false}` on `danger` is for a destructive action that stands ALONE, where\n   * hover-to-reveal hides it: keksdose's phone bulk bar (mobile-bulk-bar.tsx) has one\n   * \"delete all\" and a touch screen that never hovers, so it painted rose by hand.\n   * `quiet` on `warning`/`info` is the same switch the other way, for a flag repeated\n   * down a list. A boolean over the tone rather than a new tone (`danger-solid`) or an\n   * `emphasis` scale: there are exactly two resting looks, every coloured tone has\n   * both, and which one fits is a question about the SITE (alone or repeated, touch or\n   * pointer), not about the tone — so it is one switch the family shares.\n   */\n  quiet?: boolean;\n  /**\n   * Make it a toggle button. `true` sets `aria-pressed=\"true\"` and draws the \"on\" look\n   * (brand glyph on the quiet brand fill); `false` sets `aria-pressed=\"false\"` with the\n   * normal look, so a screen reader still hears a toggle that is off. Left out, it is\n   * an ordinary button with no `aria-pressed` — or whatever `aria-pressed` the caller\n   * passes. For keksdose's budget share toggle (budgets-page:291), which paints its own\n   * brand colour over a ghost button today. Keep the `aria-label` the same in both\n   * states (\"Share budget\"): the pressed state already says whether it is on.\n   */\n  pressed?: boolean;\n  /** Keep the click (and the Enter/Space that produces it) from reaching an\n   *  ancestor's handler — for an action inside a clickable table row or card.\n   *\n   *  **Not a licence to put this inside another `<button>`.** HTML forbids any\n   *  interactive content, and any element with a `tabindex`, inside a button — so\n   *  the `<span role=\"button\" tabIndex={0}>` workaround is invalid too — and ARIA\n   *  makes a button's children presentational, so a screen reader flattens the\n   *  inner one into the outer one's name and it cannot be reached at all. Make the\n   *  row's main action a button that fills the row and put this one BESIDE it, on\n   *  top:\n   *\n   *  ```tsx\n   *  <div className=\"relative\">\n   *    <button className=\"w-full pe-16 …\" onClick={open}>…row…</button>\n   *    <div className=\"absolute inset-y-0 end-2 flex items-center gap-0.5\">\n   *      <IconButton size=\"xs\" tone=\"danger\" aria-label=\"Delete\" onClick={remove}>\n   *        <Trash2 />\n   *      </IconButton>\n   *    </div>\n   *  </div>\n   *  ```\n   *\n   *  The pair look exactly like the nested version, click exactly like it, and\n   *  are two tab stops a screen reader can tell apart. */\n  stopPropagation?: boolean;\n  /**\n   * The button's name, said once: it becomes the `aria-label` AND the text of a kit\n   * {@link Tooltip} round the button.\n   *\n   * Every app writes the pair by hand. lenkbank's nine icon actions all carry\n   * `aria-label={t(x)} title={t(x)}` (shared/lib/table-columns.tsx:103,\n   * projects-page.tsx:83, setpoint/segment-list.tsx:198/207, profile-bar.tsx:128/142,\n   * shortcut-dialog.tsx:815/857/1007) — and `title` is the browser's own tooltip,\n   * which shows late, never on focus and never on touch, and looks like no other\n   * label in the kit. kastlan's RowAction (shared/components/data-table/row-action.tsx)\n   * and keksdose's icon wrappers each exist to put a Tooltip round an IconButton.\n   *\n   * A caller's own `aria-label` still wins, for the rare name that should be longer\n   * than the bubble. The bubble is visual only: it would otherwise describe the button\n   * with its own name, and a screen reader would read the same word twice. Tooltip's\n   * default placement applies — in place, or portalled inside a scroll container —\n   * unless `tooltipPortal` says otherwise.\n   */\n  label?: string;\n  /** Show `label` as a tooltip. Default `true`; `false` keeps `label` as the\n   *  accessible name only — for a button whose glyph is universally read (a close ✕ in\n   *  a dialog header) or that already sits under a tooltip of its own. */\n  tooltip?: boolean;\n  /** Where the `label` tooltip opens. See {@link Tooltip}'s `side`. */\n  tooltipSide?: TooltipSide;\n  /** Passed to the `label` tooltip's `portal`. Left out, Tooltip decides (see there). */\n  tooltipPortal?: boolean;\n  /**\n   * Mount the `label` bubble only while it is up — {@link Tooltip}'s `lazy`. Default\n   * `true` since 0.16.0; `false` is the always-mounted in-place bubble of before.\n   *\n   * Why the label bubble can be lazy when Tooltip's default is not: this bubble\n   * describes nothing. It is wrapped round the button in a fragment precisely so that\n   * it is NOT the button's `aria-describedby` (it would repeat the button's own name),\n   * so there is no description for a lazy mount to take away — the name is the\n   * `aria-label` either way, read in browse mode and on focus alike. What the\n   * always-mounted bubble did do was sit in the DOM as a `role=\"tooltip\"` node full of\n   * text: every IconButton in a row added one to `getAllByRole(\"tooltip\")` and its label\n   * to the row's `textContent`, and two keksdose tests tripped over that (0.15.5 P6).\n   * The cost is the one {@link Tooltip}'s \"Lazy in place\" note names — a test that\n   * looked the bubble up without hovering now has to hover (or focus) first; pass\n   * `false` while it is migrated. A `disabledReason` bubble is unaffected: that one\n   * stays mounted as it was.\n   */\n  tooltipLazy?: boolean;\n  /**\n   * Busy — the action is in flight: the glyph is swapped for a spinner of the same\n   * size, the button is `aria-busy`, and clicks (and the Enter/Space and form\n   * submission they stand for) are swallowed, so a second press cannot start the\n   * action twice. {@link Button}'s `pending`, with the same contract: `aria-disabled`\n   * rather than `disabled`, so the button that was pressed keeps its focus. The name\n   * (`label` / `aria-label`) stays — `aria-busy` is what says it is working. A SWAP\n   * rather than Button's overlay: the box is square and fixed, so there is no width\n   * for the glyph to hold, and a spinner drawn over a glyph would be two marks in one\n   * 20px square.\n   */\n  pending?: boolean;\n  /**\n   * Why the action is not available — {@link Button}'s `disabledReason`, on the icon\n   * button: keksdose's accounts page cannot hide an account with a balance or delete\n   * one with bookings (accounts-page:879/913 — \"hide requires zero\", \"delete blocked\"),\n   * nor its budgets page delete the only budget (budgets-page:330), and each wrapped a\n   * natively disabled IconButton in a Tooltip that swaps its label for the reason — a\n   * bubble a keyboard never opens, since `disabled` leaves the tab order, and a reason\n   * a screen reader never hears.\n   *\n   * The same contract as Button's: `aria-disabled` instead of `disabled`, so it stays\n   * focusable and hoverable; clicks (and the Enter/Space they stand for) are swallowed\n   * — `stopPropagation` still applies, so a locked action in a clickable row does not\n   * open the row either; the reason shows in the kit {@link Tooltip} and is attached\n   * through `aria-describedby` as a `hidden` copy. The NAME stays `aria-label` /\n   * `label` — \"Delete\", described by \"The active budget cannot be deleted\" — and the\n   * bubble shows the reason in place of the label, since the glyph already says what\n   * the button is and the reason is the news. Shown even with `tooltip={false}`: a\n   * reason nobody can see is not one. Wins over `disabled`, as on Button.\n   */\n  disabledReason?: ReactNode;\n  /** This action COMMITS — {@link Button}'s `commit`: under a locked\n   *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n   *  reason. No effect without a lock. */\n  commit?: boolean;\n  /** The `<button>` element — a prop in React 19, as on {@link Button}. */\n  ref?: Ref<HTMLButtonElement>;\n  /** Only on the link form — see {@link IconButtonLinkProps}. */\n  href?: never;\n  renderLink?: never;\n  external?: never;\n  replace?: never;\n  reloadDocument?: never;\n}\n\n/**\n * `<IconButton href>`: an icon-only LINK — keksdose F2 and kastlan 45, whose icon\n * actions that navigate (a row's \"open\", a card's \"edit\" that goes to the edit page, a\n * top bar's settings cog) were `<IconButton onClick={() => navigate(…)}>`: a button that\n * changes the page, with no middle click, no \"open in new tab\" and no URL on hover.\n *\n * The same rule as {@link Button}'s `href` (see {@link ButtonLinkProps}): an in-app\n * `href` goes through `renderLink`, else the provider's `linkComponent`; an external one\n * or an in-page `#anchor` stays a plain `<a>`; `external` opens a new tab and says so to\n * a screen reader; `replace` and `reloadDocument` as on Button. The look, the `label` →\n * `aria-label` + Tooltip, the badge, `toneColor` and `stopPropagation` are the button's.\n *\n * `disabled` renders an inert `<a>` with no `href` — `role=\"link\"`, `aria-disabled`, out\n * of the tab order, dimmed — like Button's disabled link. `pressed`, `disabledReason` and\n * `disabledStyle` are a button's and are typed out: a link is not a toggle, and a link\n * that explains why it cannot be followed is a job for a disabled BUTTON.\n */\nexport interface IconButtonLinkProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"type\" | \"href\">,\n    Pick<\n      IconButtonProps,\n      | \"variant\"\n      | \"size\"\n      | \"glyphSize\"\n      | \"badge\"\n      | \"stretch\"\n      | \"shape\"\n      | \"toneColor\"\n      | \"tone\"\n      | \"quiet\"\n      | \"stopPropagation\"\n      | \"label\"\n      | \"tooltip\"\n      | \"tooltipSide\"\n      | \"tooltipPortal\"\n      | \"tooltipLazy\"\n    > {\n  href: string;\n  /** See {@link ButtonLinkProps.renderLink}. */\n  renderLink?: KitLinkComponent;\n  /** See {@link ButtonLinkProps.external}. */\n  external?: boolean;\n  /** See {@link ButtonLinkProps.replace}. */\n  replace?: boolean;\n  /** See {@link ButtonLinkProps.reloadDocument}. */\n  reloadDocument?: boolean;\n  /** See {@link ButtonLinkProps.disabled}. */\n  disabled?: boolean;\n  ref?: Ref<HTMLAnchorElement>;\n  type?: never;\n  form?: never;\n  pressed?: never;\n  disabledReason?: never;\n  commit?: never;\n  disabledStyle?: never;\n  pending?: never;\n}\n\n/**\n * `toneColor`: one CSS colour, or one per theme.\n *\n * The pair is two custom properties on the element — `--icon-button-tone-light` and\n * `--icon-button-tone-dark` — and a class that points `--icon-button-tone` at one or the\n * other by the kit's `dark` variant (`.dark` on an ancestor, tokens.css), so the colour\n * follows a theme switch in CSS alone, with no re-render and no JS reading the theme.\n * Both values are any CSS colour; a token that already flips (`var(--warning)`) needs no\n * pair.\n */\nexport type IconButtonToneColor = string | { light: string; dark: string };\n\nconst ICON_BUTTON_TONE_PAIR =\n  \"[--icon-button-tone:var(--icon-button-tone-light)] dark:[--icon-button-tone:var(--icon-button-tone-dark)]\";\n\n/** The inline custom properties `toneColor` sets over the caller's `style`. */\nfunction toneColorStyle(toneColor: IconButtonToneColor | undefined, style: CSSProperties | undefined) {\n  if (toneColor === undefined) return style;\n  const vars: Record<string, string> =\n    typeof toneColor === \"string\"\n      ? { \"--icon-button-tone\": toneColor }\n      : { \"--icon-button-tone-light\": toneColor.light, \"--icon-button-tone-dark\": toneColor.dark };\n  return { ...style, ...vars } as CSSProperties;\n}\n\n/** Everything but the element: the look both forms of IconButton share. */\nfunction iconButtonLook({\n  variant,\n  size,\n  stretch,\n  glyphSize,\n  shape,\n  tone,\n  quiet,\n  toneColor,\n}: {\n  variant: IconButtonVariant;\n  size: IconButtonSize;\n  stretch: boolean | undefined;\n  glyphSize: IconButtonGlyphSize | undefined;\n  shape: \"square\" | \"round\";\n  tone: IconButtonTone;\n  quiet: boolean | undefined;\n  toneColor: IconButtonToneColor | undefined;\n}) {\n  return cn(\n    ICON_BUTTON_BASE,\n    stretch ? ICON_BUTTON_STRETCH_SIZES[size] : ICON_BUTTON_SIZES[size],\n    glyphSize !== undefined && ICON_BUTTON_GLYPH_SIZES[glyphSize],\n    // After the size, so the overlay's `rounded-full` beats the small sizes' `rounded`.\n    variant === \"overlay\"\n      ? ICON_BUTTON_OVERLAY\n      : variant === \"shutter\"\n        ? ICON_BUTTON_SHUTTER\n        : buttonVariantClasses[variant],\n    shape === \"round\" && \"rounded-full\",\n    ICON_BUTTON_DISABLED_REST[variant],\n    iconButtonToneClass(tone, quiet),\n    toneColor !== undefined && typeof toneColor !== \"string\" && ICON_BUTTON_TONE_PAIR,\n  );\n}\n\n/** The badge beside the control, not in it — see `badge`. The wrapper is only a\n *  positioning box: the control inside it keeps its own focus ring and hit area. */\nfunction withIconButtonBadge(control: ReactElement, badge: ReactNode, stretch: boolean | undefined) {\n  if (!hasContent(badge)) return control;\n  return (\n    <span className={cn(\"relative inline-flex shrink-0\", stretch && \"self-stretch\")}>\n      {control}\n      <span\n        aria-hidden\n        data-slot=\"icon-button-badge\"\n        className=\"pointer-events-none absolute -end-0.5 -bottom-0.5 inline-flex rounded-full bg-[var(--bg-surface)] [&_svg]:size-3\"\n      >\n        {badge}\n      </span>\n    </span>\n  );\n}\n\n// Declared link-first, as Button is, so `<IconButton href>` picks the link props and\n// `ComponentProps<typeof IconButton>` (the LAST signature) is still the button's.\nexport function IconButton(props: IconButtonLinkProps): ReactElement;\nexport function IconButton(props: IconButtonProps): ReactElement;\nexport function IconButton(props: IconButtonProps | IconButtonLinkProps): ReactElement {\n  if (props.href !== undefined) return <IconButtonLink {...(props as IconButtonLinkProps)} />;\n  return <IconButtonElement {...(props as IconButtonProps)} />;\n}\nIconButton.displayName = \"IconButton\";\n\nfunction IconButtonLink({\n  href,\n  renderLink,\n  external,\n  replace,\n  reloadDocument,\n  disabled,\n  variant = \"ghost\",\n  size = \"md\",\n  tone: toneProp,\n  quiet,\n  stopPropagation,\n  stretch,\n  shape = \"square\",\n  toneColor,\n  label,\n  tooltip = true,\n  tooltipSide,\n  tooltipPortal,\n  tooltipLazy = true,\n  glyphSize,\n  badge,\n  className,\n  style,\n  target,\n  rel,\n  onClick,\n  onKeyDown,\n  children,\n  ref,\n  ...rest\n}: IconButtonLinkProps) {\n  const kitLink = useKitLink();\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const tone = toneProp ?? (toneColor !== undefined ? \"custom\" : \"default\");\n  // Button's rule, word for word: `reloadDocument` bypasses the router, an external\n  // href or an in-page `#anchor` never reaches it.\n  const Link = reloadDocument ? undefined : pickLinkRenderer<KitLinkProps>(renderLink, kitLink, href);\n  const newTab = !disabled && (external || target === \"_blank\");\n  const name = rest[\"aria-label\"] ?? label;\n  // \"(opens in a new tab)\" joins the NAME here, not the body: an icon link has no text\n  // for an sr-only span to follow, and `aria-label` would override one anyway.\n  const ariaLabel = name !== undefined && newTab ? `${name} (${common.opensInNewTab})` : name;\n  const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {\n    if (stopPropagation) e.stopPropagation();\n    onClick?.(e);\n  };\n  const handleKeyDown = (e: KeyboardEvent<HTMLAnchorElement>) => {\n    // A link activates on Enter only; that key still bubbles to a clickable row.\n    if (stopPropagation && e.key === \"Enter\") e.stopPropagation();\n    onKeyDown?.(e);\n  };\n  const cls = cn(\n    iconButtonLook({ variant, size, stretch, glyphSize, shape, tone, quiet, toneColor }),\n    // BASE's `disabled:` classes never match an `<a>` — Button's disabled link look.\n    disabled && \"pointer-events-none cursor-not-allowed opacity-50\",\n    className,\n  );\n  const look = { style: toneColorStyle(toneColor, style), className: cls };\n  let control: ReactElement;\n  if (disabled) {\n    control = (\n      <a {...rest} {...look} ref={ref} role=\"link\" aria-disabled=\"true\" aria-label={ariaLabel}>\n        {children}\n      </a>\n    );\n  } else if (external || !Link) {\n    control = (\n      <a\n        {...rest}\n        {...look}\n        ref={ref}\n        href={href}\n        aria-label={ariaLabel}\n        target={external ? \"_blank\" : target}\n        rel={external ? (rel ?? \"noopener noreferrer\") : rel}\n        onClick={external ? handleClick : replacingClick(handleClick, href, replace, target)}\n        onKeyDown={handleKeyDown}\n      >\n        {children}\n      </a>\n    );\n  } else {\n    control = (\n      <RenderedButtonLink\n        render={Link}\n        {...rest}\n        {...look}\n        {...routerLinkNavigation(replace)}\n        ref={ref}\n        href={href}\n        aria-label={ariaLabel}\n        target={target}\n        rel={rel}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n      >\n        {children}\n      </RenderedButtonLink>\n    );\n  }\n  control = withIconButtonBadge(control, badge, stretch);\n  if (!tooltip || label === undefined || label === \"\") return control;\n  return (\n    // A fragment, as on the button: the bubble says what `aria-label` already does.\n    <Tooltip\n      label={label}\n      side={tooltipSide}\n      portal={tooltipPortal}\n      lazy={tooltipLazy}\n      className={stretch ? \"self-stretch\" : undefined}\n    >\n      <>{control}</>\n    </Tooltip>\n  );\n}\n\nfunction IconButtonElement(\n  {\n    variant = \"ghost\",\n    size = \"md\",\n    tone: toneProp,\n    quiet,\n    pressed,\n    stopPropagation,\n    stretch,\n    shape = \"square\",\n    toneColor,\n    label,\n    tooltip = true,\n    tooltipSide,\n    tooltipPortal,\n    tooltipLazy = true,\n    disabledReason: ownDisabledReason,\n    commit,\n    pending,\n    glyphSize,\n    badge,\n    disabledStyle = \"dim\",\n    className,\n    style,\n    onClick,\n    onKeyDown,\n    children,\n    href: _href,\n    renderLink: _renderLink,\n    external: _external,\n    replace: _replace,\n    reloadDocument: _reloadDocument,\n    ref,\n    ...rest\n  }: IconButtonProps,\n) {\n  const tone = toneProp ?? (toneColor !== undefined ? \"custom\" : \"default\");\n  const keep = disabledStyle === \"keep\";\n  const reasonId = useId();\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  // Pending is inert like a locked button — focusable, every activation swallowed —\n  // without the locked look: the spinner is the state.\n  const inert = locked || Boolean(pending);\n  const ownDescribedBy = rest[\"aria-describedby\"];\n  const button = (\n    <button\n      ref={ref}\n      {...rest}\n      disabled={inert ? undefined : rest.disabled}\n      aria-disabled={inert || rest[\"aria-disabled\"]}\n      aria-busy={pending || rest[\"aria-busy\"]}\n      aria-describedby={locked ? (ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId) : ownDescribedBy}\n      aria-label={rest[\"aria-label\"] ?? label}\n      aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n      style={toneColorStyle(toneColor, style)}\n      onClick={(e) => {\n        if (stopPropagation) e.stopPropagation();\n        // `preventDefault` too: a locked (or pending) submit must not submit its form.\n        if (inert) {\n          e.preventDefault();\n          return;\n        }\n        onClick?.(e);\n      }}\n      onKeyDown={(e) => {\n        // A button turns Enter/Space into a click of its own, but the KEY still\n        // bubbles — and a clickable row listening for Enter would act on it too.\n        if (stopPropagation && (e.key === \"Enter\" || e.key === \" \")) e.stopPropagation();\n        onKeyDown?.(e);\n      }}\n      className={cn(\n        iconButtonLook({ variant, size, stretch, glyphSize, shape, tone, quiet, toneColor }),\n        pressed && ICON_BUTTON_PRESSED,\n        // The disabled look for the focusable kind of disabled, as on Button.\n        locked && (keep ? \"cursor-default\" : \"cursor-not-allowed opacity-50\"),\n        keep && \"disabled:cursor-default disabled:opacity-100\",\n        pending && \"cursor-progress\",\n        className,\n      )}\n    >\n      {pending ? (\n        // Decorative, as on Button: `aria-busy` says it. Sized to the glyph it stands\n        // in for, in the glyph's colour, so the swap does not change the button's look.\n        <Spinner\n          label={null}\n          className={cn(\n            \"border-current/30 border-t-current\",\n            glyphSize !== undefined ? ICON_BUTTON_SPINNER_GLYPH[glyphSize] : ICON_BUTTON_SPINNER[size],\n          )}\n        />\n      ) : (\n        children\n      )}\n    </button>\n  );\n  const control = withIconButtonBadge(button, badge, stretch);\n  if (locked) {\n    return (\n      // Button's shape: the button and the hidden reason in a FRAGMENT, so Tooltip does\n      // not add its bubble to the description as well.\n      <Tooltip\n        label={disabledReason}\n        side={tooltipSide}\n        portal={tooltipPortal}\n        className={stretch ? \"self-stretch\" : undefined}\n      >\n        <>\n          {control}\n          <span id={reasonId} hidden>\n            {disabledReason}\n          </span>\n        </>\n      </Tooltip>\n    );\n  }\n  if (!tooltip || label === undefined || label === \"\") return control;\n  return (\n    // A fragment, so Tooltip leaves the button's description alone: the bubble says\n    // exactly what `aria-label` already does. Lazy by default — see `tooltipLazy`.\n    <Tooltip\n      label={label}\n      side={tooltipSide}\n      portal={tooltipPortal}\n      lazy={tooltipLazy}\n      className={stretch ? \"self-stretch\" : undefined}\n    >\n      <>{control}</>\n    </Tooltip>\n  );\n}\n\nexport const FIELD_BASE =\n  \"block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-3 py-2 text-sm text-[var(--text-primary)] shadow-sm placeholder:text-[var(--text-placeholder)] focus:border-[var(--brand)] focus:ring-[var(--brand)] \" +\n  // A field the user cannot change has to LOOK settled. Without this, `disabled`\n  // dimmed the floating label and nothing else — FIELD_BASE's own\n  // `text-[var(--text-primary)]` overrides the browser's grey — so a read-only value\n  // sat there at full body-text strength, indistinguishable from one you could retype\n  // (Keksdose dev#455/#474).\n  \"disabled:cursor-default disabled:bg-[var(--bg-surface-2)] disabled:text-[var(--text-muted)] \" +\n  // Same for a field that takes focus but refuses keys: `readOnly` is not\n  // `disabled`, and a value that cannot be edited should not claim it can be. Opt\n  // OUT with {@link FIELD_WRITABLE_LOOK} in the one case where `readOnly` does not\n  // mean that — see the two-factor code field, which uses it to block an autofill\n  // and drops it the moment you focus the field.\n  //\n  // ⚠️ The ATTRIBUTE, never the `:read-only` pseudo-class (Keksdose dev#477).\n  // `:read-only` does not mean \"was marked readonly\" — per Selectors 4 it matches\n  // everything that is not `:read-write`, and only editable inputs/textareas and\n  // contenteditable elements are `:read-write`. So `read-only:` matched every\n  // `<select>` in the app and every field-styled `<button>` built on this base —\n  // the native selects, the date trigger, the entity/currency/multi pickers — and\n  // painted them all in the \"you may not edit this\" grey. On one transaction form\n  // that made three different-looking families out of one field style: plain\n  // inputs, grey selects, grey trigger buttons.\n  \"[&[readonly]]:bg-[var(--bg-surface-2)] [&[readonly]]:text-[var(--text-muted)]\";\n\n/** Cancels FIELD_BASE's read-only treatment for a field that is `readOnly` for a\n *  reason other than \"you may not edit this\". Attribute-scoped for the same reason\n *  FIELD_BASE is — the two have to cancel on the identical selector or twMerge\n *  cannot make the later one win. */\nexport const FIELD_WRITABLE_LOOK =\n  \"[&[readonly]]:bg-[var(--bg-surface)] [&[readonly]]:text-[var(--text-primary)]\";\n\n// Extra top padding leaves room for a label that floats INSIDE the field (the\n// \"filled\" pattern) — the label sits in the top strip, the value below it. Used by\n// every labelled field (native + custom-dropdown triggers). twMerge lets pt/pb win\n// over FIELD_BASE's py-2.\nexport const FIELD_FLOATING_PAD = \"pt-4 pb-1\";\n\n// Error/required highlight for a field that is missing a value — a `--danger`\n// border and matching focus ring so the control itself shows what's wrong, not just\n// a note beside it (feedback #235). Layered after FIELD_BASE so twMerge wins.\n//\n// The `ring-1` is not decoration; it is what makes the highlight SURVIVE display\n// scaling (Keksdose live #295 — *\"Account select boundary. It is not highlighted on\n// the sides.\"*). At 125%, the browser's usual setting on a 2560px screen, a 1px CSS\n// border is 1.25 device pixels: the horizontal edges land on whole rows and paint\n// solid, while one of the two VERTICAL edges lands across a pixel boundary and is\n// spread over two columns at partial coverage. Measured on the receipt's required\n// account field, dark theme, back when this was a hard-coded rose (full =\n// rgb(208,30,78)): left/top/bottom all 208, right 160 then 115 — the side that is\n// supposed to shout, at 55–77% of the others. A border plus a ring is 2 CSS px, so\n// whatever the fraction there is always one fully covered device pixel on every side\n// (re-measured: worst side 241). It is the GEOMETRY that carries that, not the hue,\n// so the fix survives a consumer re-pointing `--danger-border`.\n//\n// A ring rather than `border-2`: a box-shadow adds no layout, so an invalid field\n// stays exactly the size of a valid one and nothing beside it moves when the value\n// arrives.\nexport const FIELD_INVALID =\n  \"border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] focus:border-[var(--danger)] focus:ring-[var(--danger)]\";\n\nexport const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, \"peer placeholder:text-transparent\");\n\n/** The phone breakpoint the display treatment below keys off — the same one the\n *  numpad sheet uses, kept in one place so the two can't drift apart. */\nexport const PHONE_QUERY = \"(max-width: 767px)\";\n\n/**\n * The PHONE display treatment (Keksdose feedback #176, carried across the entry\n * forms by #179): the field chrome removed so the ONE input a form is actually\n * about reads as the thing itself, not as another boxed row in a stack.\n *\n * Every control that takes `variant=\"display\"` — {@link Input}, `NumberInput`,\n * `AmountInput` — means exactly the same thing by it: the treatment applies below\n * {@link PHONE_QUERY} and the field is untouched above it, so a caller never has\n * to ask the viewport, and a form can't end up half-treated across breakpoints.\n *\n * What stays, deliberately:\n *  - A hairline baseline. With the box gone something still has to say \"you can\n *    type here\"; it takes the brand colour on focus, where a bordered field would\n *    light its whole outline. Each edge is set exactly once (`border-x-0\n *    border-t-0 border-b`) so the rule can't hinge on utility order.\n *  - The muted placeholder colour, because a display field is usually empty at\n *    the moment it matters most and has nothing else to show.\n *  - The label, moved to `sr-only` rather than dropped: display type is legible\n *    to the eye, not to a screen reader.\n *\n * Size and weight are NOT here — an amount wants display type, a subject line\n * wants a heading — so each control adds its own on top.\n */\nexport const FIELD_DISPLAY =\n  \"block w-full border-x-0 border-t-0 border-b border-[var(--border)] bg-transparent px-0 pt-0 pb-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:border-[var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60\";\n\n// A field-styled button trigger for the custom dropdown controls (MultiSelect,\n// CurrencySelect) — the field look (border/bg) as a flex row for the value + chevron,\n// so they don't hand-copy the field classes. Add FIELD_FLOATING_PAD only when the\n// trigger carries a label (unlabelled triggers stay normal height to match buttons /\n// adjacent controls). Pair the labelled case with a static FieldLabel.\n// `relative` so the trigger can host an absolutely-centred FieldChevron / clear\n// button the way the native Select does.\n//\n// `[&>:first-child]:min-h-[1lh]` holds one line box open whatever the value is. A\n// trigger with nothing chosen and no placeholder renders an EMPTY value span, an\n// empty span has no line box, and the trigger collapsed to its padding — 18px\n// tall in a stack of 38px fields (an RhfCombobox without a placeholder; DatePicker\n// and MonthPicker had met the same thing as Keksdose live #294 and patched their\n// own span with a U+00A0). Here, on the shared class, it covers every trigger\n// built on it, including a `renderTrigger` one. `1lh` rather than a fixed height\n// so it tracks whatever type the trigger is set in; the first child is the value\n// in every trigger here (the chevron and the clear button are absolute).\nexport const FIELD_TRIGGER = cn(\n  FIELD_BASE,\n  \"relative flex items-center justify-between gap-2 text-start hover:bg-[var(--bg-hover)]\",\n  \"[&>:first-child]:min-h-[1lh]\",\n);\n\n/** An alias rather than an interface: the chevron adds nothing of its own to an\n *  `<svg>`'s props, and an interface declaring no members is the same type wearing a\n *  name that suggests otherwise. */\nexport type FieldChevronProps = Omit<ComponentPropsWithoutRef<\"svg\">, \"children\">;\n\n/** The dropdown chevron, shared by the native {@link Select} and every custom\n * {@link FIELD_TRIGGER} control.\n *\n * Absolutely positioned and centred on the FIELD box. As an ordinary flex child\n * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)\n * pushes that box's midline down — so a labelled currency/multi-select chevron\n * sat visibly lower than the native select's right beside it (feedback #400).\n * Pair it with `pe-9` on the trigger so the value can't run underneath. At the\n * inline END, not the right: a right-to-left form reads the value from the right,\n * and a chevron parked on top of its first word hid exactly the part that says\n * what was picked. */\nexport function FieldChevron({ className, ...rest }: FieldChevronProps) {\n  return (\n    <ChevronDown\n      {...rest}\n      // After the spread: the chevron is decoration beside a control that already has\n      // a name, and an `aria-hidden` a caller could switch off by accident is a second\n      // announcement of the same field.\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\",\n        className,\n      )}\n    />\n  );\n}\n\n// Animated label that starts centred (as a placeholder) in an empty field and\n// floats up INSIDE the top strip on focus or once the field has a value. Sits on\n// the field's own surface, so no background chip and nothing to mismatch the card.\nexport const FLOATING_LABEL_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 text-sm text-[var(--text-placeholder)] transition-all\",\n  \"max-w-[calc(100%-1.5rem)] truncate\",\n  \"peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-[var(--text-secondary)]\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-[var(--text-secondary)]\",\n  \"peer-disabled:opacity-50\",\n);\n\n// The animated label again, as a ROW that the label and its \"?\" share — same\n// placement, same float, same type, but with the type on the row so the label\n// INHERITS it. It has to be that way round: `peer-focus:` compiles to a sibling\n// selector, so the classes have to sit on the element that is actually a sibling\n// of the input, and a label nested inside a wrapper is not one.\n//\n// Wider end clearance than the label alone takes (`3rem` rather than `1.5rem`),\n// because the controls that carry an animated label are the ones with something\n// at the end edge of the field — NumberInput's calculator is the case this was\n// written for. The label truncates a little sooner; the alternative was the \"?\"\n// sitting on top of a button (steering-design feedback #48).\nconst FLOATING_ROW_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 flex items-center gap-1 transition-all\",\n  \"max-w-[calc(100%-3rem)] text-sm text-[var(--text-placeholder)]\",\n  \"peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-[var(--text-secondary)]\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-[var(--text-secondary)]\",\n  \"peer-disabled:opacity-50\",\n);\n\n/**\n * The one place that assembles a labelled field: a `relative` wrapper around the\n * control (`children`) plus a floating label inside the top strip. Pass `staticLabel`\n * for controls that always have a value (selects); omit it for free-text fields whose\n * label animates from centred→up. Used by Input/Select/Textarea/NumberInput; the\n * dropdown controls that need a ref + menu keep their own wrapper but the same label\n * (via {@link FieldLabel}) and trigger ({@link FIELD_TRIGGER}) styles.\n */\nexport interface FloatingFieldProps extends ComponentPropsWithoutRef<\"div\"> {\n  htmlFor?: string;\n  label?: ReactNode;\n  staticLabel?: boolean;\n  /** Keep the label in the accessibility tree but out of the layout — what\n   *  {@link FIELD_DISPLAY} needs, since a floating label inside a field with no\n   *  field left would have nothing to float in. */\n  srOnlyLabel?: boolean;\n  /** Something interactive that belongs to the LABEL rather than to the value —\n   *  in practice a {@link FieldHint} \"?\" (dev#468). It is rendered in a flex row\n   *  with the label, so it is centred on the label's line by the layout instead\n   *  of by a hand-tuned `top-…`, and it can never drift when the type changes.\n   *\n   *  It rides an ANIMATED label too, and the two cases place it differently on\n   *  purpose. A static label has a field-wide strip to itself, so the hint sits\n   *  at the far end of it and a long label truncates into the gap. An animated\n   *  one belongs to a control with something at the end edge of the field — a\n   *  calculator, a stepper — so the hint follows the label instead, and it is\n   *  the label that gives way (steering-design feedback #48). */\n  hint?: ReactNode;\n  children: ReactNode;\n}\n\nexport function FloatingField({\n  className,\n  htmlFor,\n  label,\n  staticLabel,\n  srOnlyLabel,\n  hint,\n  children,\n  ...rest\n}: FloatingFieldProps) {\n  const withHint = hint !== undefined && !srOnlyLabel;\n  const atEnd = withHint && staticLabel;\n  const labelEl = label !== undefined && (\n    <label\n      htmlFor={htmlFor}\n      className={\n        srOnlyLabel\n          ? \"sr-only\"\n          : atEnd\n            ? cn(\"pointer-events-none min-w-0 truncate\", STATIC_LABEL_TYPE)\n            : withHint\n              ? \"pointer-events-none min-w-0 truncate\"\n              : staticLabel\n                ? FLOATING_LABEL_STATIC\n                : FLOATING_LABEL_CLASS\n      }\n    >\n      {label}\n    </label>\n  );\n  return (\n    // `relative` is the whole contract of this wrapper — the floating label and every\n    // control that hangs off it (a reveal toggle, a chevron) are positioned against\n    // this box — so it is merged through `cn` after the spread rather than left where\n    // a caller's stray `className` or `style` could unset it.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {children}\n      {withHint ? (\n        // Static: `inset-x-3` rather than `start-3`, so a long label truncates at\n        // the field's own end padding instead of running under the chevron.\n        // Animated: the row floats with the label and is only as wide as it needs\n        // to be. Either way the hint keeps its width (`shrink-0`) and the label\n        // is the one that gives way.\n        <div\n          className={\n            atEnd\n              ? \"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\"\n              : FLOATING_ROW_CLASS\n          }\n        >\n          {labelEl}\n          <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n        </div>\n      ) : (\n        labelEl\n      )}\n    </div>\n  );\n}\n\n/**\n * The \"?\" that explains a field, on the field's own label line (dev#468).\n *\n * Pass it to a labelled {@link Select} / {@link Input} as `hint`. It exists as a\n * component rather than as a snippet each form repeats because the previous\n * version was exactly that snippet — an absolutely-positioned button whose\n * `top-1.5` was one guess at where an 11px label sits — and the reporter's\n * follow-up was *\"question mark is not centered. Is it part of the hoc?\n * positioning problems seem quite frequently.\"* It was not part of the HOC. Now\n * it is, and there is one place left where the answer can be wrong.\n *\n * A `<button>` rather than a bare icon: hover alone puts the explanation out of\n * reach of a keyboard and of every touch device, and the tooltip shows on focus\n * too. The text is also its accessible name, so a screen reader gets it without\n * the bubble ever opening.\n */\nexport interface FieldHintProps extends Omit<ComponentPropsWithoutRef<\"button\">, \"children\"> {\n  /** The explanation. It is both the tooltip's text and, by default, the button's\n   *  accessible name, so a screen reader gets it without the bubble ever opening. */\n  label: string;\n  /** Default `\"start\"`: before the hint in the reading direction (the left in LTR, the\n   *  right in RTL). `left` / `right` stay physical. */\n  side?: TooltipSide;\n}\n\nexport function FieldHint({\n  label,\n  side = \"start\",\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: FieldHintProps) {\n  return (\n    <Tooltip label={label} side={side} portal>\n      <button\n        {...rest}\n        // `type` after the spread, not before. These render inside forms — that is the\n        // only place a field has a label line — and a hint that defaulted to `submit`\n        // because a caller spread a props object at it would save the form on a click\n        // meant to explain a field.\n        type=\"button\"\n        // The explanation names the button unless the caller says otherwise; passing\n        // `aria-label` is how you shorten it for a screen reader without shortening\n        // what the bubble shows.\n        aria-label={ariaLabel ?? label}\n        // Nothing to activate: the tooltip opens on hover and on focus, and a\n        // click that did something as well would be a second, undiscoverable\n        // behaviour on the same target.\n        onClick={(e) => e.preventDefault()}\n        className={cn(\n          \"flex text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)]\",\n          className,\n        )}\n      >\n        <HelpCircle className=\"size-3.5\" />\n      </button>\n    </Tooltip>\n  );\n}\n\nexport interface LabelProps extends ComponentPropsWithoutRef<\"label\"> {\n  /** Draw the required mark after the text. The mark is `aria-hidden`: what a\n   *  screen reader hears is the control's own `required` / `aria-required`, which\n   *  the caller still sets — a \"star\" read out as the last word of every name is\n   *  noise, and a control that is not marked required is not required however its\n   *  label looks. */\n  required?: boolean;\n  /** `sm` for a toolbar or a dense filter row (12px), `md` otherwise (14px). */\n  size?: \"sm\" | \"md\";\n  /** Dim the label with its control. A label ABOVE its field is not the field's\n   *  `peer`, so `peer-disabled:` cannot reach it the way it reaches a floating one. */\n  disabled?: boolean;\n}\n\n/**\n * The label ABOVE a field, for the places a floating label does not fit: a control\n * the kit did not render (a third-party picker, a range slider, a group of radios),\n * a filter bar whose fields are unlabelled {@link Select}s, a form that sets labels\n * above its fields throughout.\n *\n * A new component rather than a mode of {@link FieldLabel}, because the two share\n * nothing but the word. `FieldLabel` is an absolutely positioned `<span>` inside a\n * trigger's `relative` box and has to stay exactly that for every dropdown that\n * already lines up with it; this is a real `<label>` in normal flow, with `htmlFor`,\n * that a click focuses the control through. Spacing below it belongs to the caller's\n * layout (`space-y-1.5` on the pair, typically), as it would for any block.\n */\nexport function Label({ required, size = \"md\", disabled, className, children, ...rest }: LabelProps) {\n  return (\n    <label\n      {...rest}\n      className={cn(\n        \"inline-flex items-center gap-0.5 font-medium leading-none text-[var(--text-primary)]\",\n        size === \"sm\" ? \"text-xs\" : \"text-sm\",\n        disabled && \"cursor-default opacity-50\",\n        className,\n      )}\n    >\n      {children}\n      {required && (\n        <span aria-hidden className=\"text-[var(--danger)]\">\n          *\n        </span>\n      )}\n    </label>\n  );\n}\n\n/**\n * The message under a field that is wrong, and the wiring that attaches it.\n *\n * `invalid` paints the field ({@link FIELD_INVALID}) and sets `aria-invalid`, and\n * there it stopped: a field that announces \"invalid\" and nothing else has told a\n * screen-reader user only that they are stuck. The message was always on screen —\n * a sibling `<p>` beside the field — and never in the accessibility tree, because\n * attaching it needs an id on the message and an `aria-describedby` on the control,\n * and no caller was going to mint one by hand for every field on a form.\n *\n * Two rules the wiring has to keep:\n *\n *  - **Merge, never replace.** A field may already point at a hint (\"at least twelve\n *    characters\"). Overwriting that reference to say the field is wrong trades one\n *    half of the answer for the other — and it keeps the half the user has already\n *    read. The hint stays first: it is the standing advice, the error is the news.\n *  - **`invalid` keeps working alone**, for the forms whose message lives somewhere\n *    else entirely (a summary at the top of a dialog). There is nothing to point at\n *    then, and a dangling id describes the field as nothing at all.\n *\n * Deliberately NOT `role=\"alert\"`. `aria-describedby` is read when focus reaches the\n * control, which is where a field's own error is wanted; an alert would also interrupt\n * whatever is being read at the time, on every keystroke of a form that re-validates\n * as you type.\n */\nconst FIELD_ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\n\nfunction useFieldError(\n  error: ReactNode,\n  invalid: boolean | undefined,\n  describedBy: string | undefined,\n  /** The caller's own `aria-invalid`. A form library sets THIS (see `@eifi1/ui-kit/rhf`\n   *  `FormControl`), not our `invalid` prop — and a field that announces invalid should\n   *  look it too, as NumberField and the pickers already did. */\n  ariaInvalid?: unknown,\n) {\n  const errorId = useId();\n  // `null`, `false` and `\"\"` are what a caller's `touched && errors.iban` evaluates to\n  // on the happy path. None of them is a message, and pointing the control at one\n  // would describe it with an empty node.\n  const hasError = error !== undefined && error !== null && error !== false && error !== \"\";\n  return {\n    /** A field carrying a message that says what is wrong with it IS wrong. */\n    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === \"true\",\n    describedBy: hasError ? (describedBy ? `${describedBy} ${errorId}` : errorId) : describedBy,\n    errorEl: hasError ? (\n      <p id={errorId} className={FIELD_ERROR_CLASS}>\n        {error}\n      </p>\n    ) : null,\n  };\n}\n\n/**\n * A field and its message as one box.\n *\n * The message cannot go INSIDE the field's own `relative` box. The password reveal\n * toggle is `inset-y-0` and the select chevron is `top-1/2`, so both centre on\n * whatever that box contains — put two lines of message in it and the chevron drifts\n * down out of the field, between the value and the text. So the field keeps its box\n * and this wraps the pair.\n *\n * WHEN IT WRAPS. A field that never takes `error` renders nothing of its own here,\n * which is what keeps the prop additive: it is exactly the DOM it was before the prop\n * existed, down to the bare `<input>` an unlabelled {@link Input} drops straight into a\n * caller's flex row. A field that DOES take `error` — the key is passed, whatever its\n * value — is wrapped for as long as it is mounted, message or not (`reserve`).\n *\n * It used to wrap only while a message showed, and that cost the control its\n * identity: a fragment and a `<div>` are different elements at the same spot in the\n * tree, so React threw the `<input>` away and mounted a new one every time the message\n * came or went. Focus fell to `<body>`, the caret went with it, and an uncontrolled\n * field lost what had been typed — Kurvenschmiede's confirm-password dialog clears its\n * \"Wrong password\" on change, so the first keystroke of the retry dropped the user out\n * of the field. Keeping the box stops that; the field is never reparented.\n *\n * The other ways to keep it stable were worse. A box on EVERY field changes what every\n * flex row and grid in three apps lays out (`flex-1`, `w-56`, `col-span-2` on the\n * field would land on a child of the item instead of the item). A `display: contents`\n * box would keep the flex/grid item, but a contents box takes no margin, so a parent's\n * `space-y-*` stops spacing the field — the shape of Kurvenschmiede's reset-password\n * form and gear wizard, both `space-y-*` stacks of fields with `error` — and it moves\n * `first:`/`last:`/`> *` matches. A field passing `error` already took this plain box\n * whenever its message showed, so what changes is only that it keeps it while none\n * does; every such call site in the three apps sits in a block or a `space-y`/grid\n * stack where a full-width block box is the field's own size. The case it does change\n * is a field passing `error` whose `className` sizes it as a flex item (`flex-1` in a\n * row): that caller already lost the sizing while a message showed, and now sees the\n * same box without one. Pass `error` only where a message can actually appear.\n *\n * `className` is NOT moved out here, for the same reason — it goes on the field, as it\n * always has, so the box cannot silently change what that prop styles.\n */\nfunction FieldGroup({\n  errorEl,\n  reserve = false,\n  children,\n}: {\n  errorEl: ReactNode;\n  /** The caller passed `error`: keep the box even while there is no message. */\n  reserve?: boolean;\n  children: ReactNode;\n}) {\n  if (errorEl === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {errorEl}\n    </div>\n  );\n}\n\n/** The two names the password reveal toggle can wear. See {@link Input}. */\nexport interface PasswordRevealLabels {\n  /** While the value is hidden — activating the toggle will show it. */\n  show: string;\n  /** While the value is shown. */\n  hide: string;\n}\n\nexport const DEFAULT_PASSWORD_REVEAL_LABELS: PasswordRevealLabels = {\n  show: \"Show password\",\n  hide: \"Hide password\",\n};\n\n/** Caller's labels over the English defaults — the same shape as\n *  `resolveDataTableLabels`, so a consumer translates every kit string one way. */\nexport function resolvePasswordRevealLabels(\n  partial?: Partial<PasswordRevealLabels>,\n): PasswordRevealLabels {\n  if (!partial) return DEFAULT_PASSWORD_REVEAL_LABELS;\n  return { ...DEFAULT_PASSWORD_REVEAL_LABELS, ...partial };\n}\n\n/**\n * What the character counter of {@link Input} and {@link Textarea} (`showCount`) says.\n * The visible \"12/80\" is digits and a slash and is not translated; these are the words\n * a screen reader gets instead of it.\n */\nexport interface CharacterCountLabels {\n  /** The counter as part of the field's description, read when focus reaches the\n   *  field: \"12 of 80 characters\". */\n  count: (used: number, max: number) => string;\n  /** Said once, politely, on entering the last stretch before the limit: \"8\n   *  characters left\". */\n  remaining: (left: number) => string;\n  /** Said once, politely, on reaching the limit. */\n  limitReached: string;\n}\n\nexport const DEFAULT_CHARACTER_COUNT_LABELS: CharacterCountLabels = {\n  count: (used, max) => `${used} of ${max} characters`,\n  remaining: (left) => (left === 1 ? \"1 character left\" : `${left} characters left`),\n  limitReached: \"Character limit reached\",\n};\n\n/** The length the browser's own `maxLength` counts — UTF-16 code units — so the counter\n *  and the limit can never disagree about whether a field is full. */\nfunction textLength(value: unknown): number {\n  return value === undefined || value === null ? 0 : String(value).length;\n}\n\n/** The counter's length: the controlled `value`'s, else what the field has been typed\n *  to (from `defaultValue` on). `track` is called from the field's change handler. */\nfunction useTypedLength(value: unknown, defaultValue: unknown) {\n  const [typed, setTyped] = useState(() => textLength(defaultValue));\n  return { used: value !== undefined ? textLength(value) : typed, track: (text: string) => setTyped(text.length) };\n}\n\ntype CountZone = \"ok\" | \"near\" | \"limit\";\n\n/** The last stretch before the limit: a tenth of it, at least 1 and at most 20 — \"8\n *  left\" of 80, and 20 of 2,000 rather than 200, which is not \"near\" in any sense a\n *  person typing means. */\nfunction nearLimitAt(max: number): number {\n  return Math.min(20, Math.max(1, Math.ceil(max * 0.1)));\n}\n\nfunction countZone(used: number, max: number): CountZone {\n  if (used >= max) return \"limit\";\n  return max - used <= nearLimitAt(max) ? \"near\" : \"ok\";\n}\n\n/**\n * The live \"12/80\" under a field with `showCount` (keksdose K11: the admin broadcast,\n * support replies, canned replies and the handoff note each counted by hand, and one\n * announced every keystroke).\n *\n * Three channels, each saying only what it should:\n *  - the digits, `aria-hidden` — \"12 slash 80\" is not a sentence;\n *  - a `hidden` \"12 of 80 characters\" on the field's `aria-describedby`, so the count is\n *    read with the field when focus reaches it, and never while typing;\n *  - a polite live region that speaks ONCE per stretch: on entering the last tenth\n *    (\"8 characters left\") and on reaching the limit. A region that changed on every\n *    keystroke would talk over the user's own typing echo for the whole message.\n *    Nothing is said on mount: a stored note already near its limit is not news.\n */\nfunction CharacterCount({\n  id,\n  used,\n  max,\n  labels,\n  caption,\n}: {\n  id: string;\n  used: number;\n  max: number;\n  labels: CharacterCountLabels;\n  caption: ReactNode;\n}) {\n  const zone = countZone(used, max);\n  // What the live region holds, re-set only when the stretch changes — the previous\n  // render's zone kept in state, the pattern React documents for \"adjusting state when\n  // a prop changes\", so the region's text (and so the announcement) changes at most\n  // once per crossing.\n  const [said, setSaid] = useState<{ zone: CountZone; text: string }>({ zone, text: \"\" });\n  if (said.zone !== zone) {\n    setSaid({\n      zone,\n      text: zone === \"near\" ? labels.remaining(max - used) : zone === \"limit\" ? labels.limitReached : \"\",\n    });\n  }\n  return (\n    // `relative` holds the sr-only region (see sr-only-containment.test).\n    <div className=\"relative mt-1 flex items-start gap-2\">\n      <div className=\"min-w-0 flex-1\">{caption}</div>\n      <span\n        aria-hidden\n        className={cn(\n          \"shrink-0 text-[11px] leading-tight tabular-nums\",\n          zone === \"limit\"\n            ? \"text-[var(--danger)]\"\n            : zone === \"near\"\n              ? \"text-[var(--warning)]\"\n              : \"text-[var(--text-muted)]\",\n        )}\n      >\n        {used}/{max}\n      </span>\n      <span id={id} hidden>\n        {labels.count(used, max)}\n      </span>\n      <span role=\"status\" className=\"sr-only\">\n        {said.text}\n      </span>\n    </div>\n  );\n}\n\n/** What goes under a text field: the caption (beside the counter, when there is one),\n *  then the error. `null` when there is nothing, so a field with none keeps exactly the\n *  DOM it had (see {@link FieldGroup}). */\nfunction fieldBelow(hint: FieldHintParts, counter: ReactNode, errorEl: ReactNode): ReactNode {\n  if (counter === null && hint.captionText === undefined && errorEl === null) return null;\n  return (\n    <>\n      {counter ?? <FieldCaption parts={hint} />}\n      {errorEl}\n    </>\n  );\n}\n\n/**\n * kastlan 8: a caller's placeholder on a LABELLED field, shown once the label has\n * floated out of its way — on focus — and transparent until then, while the label sits\n * where the placeholder would be. Without it the field forced `placeholder=\" \"` for the\n * float trick and dropped the caller's text without a word (kastlan's \"note\" field lost\n * its hint). `:placeholder-shown` still drives the float: it matches an empty field\n * whatever the placeholder's text is.\n */\nconst FLOATING_PLACEHOLDER_ON_FOCUS = \"focus:placeholder:text-[var(--text-placeholder)]\";\n\n/** A placeholder with something to show. `\"\"` and blanks are the float trick's own\n *  `\" \"`, never the caller's hint. */\nconst hasPlaceholderText = (placeholder: string | undefined): placeholder is string =>\n  placeholder !== undefined && placeholder.trim() !== \"\";\n\n// Native date/time inputs only reveal the calendar via the tiny trailing icon;\n// open the picker on a click anywhere in the field instead (feedback #224).\nconst PICKER_TYPES = new Set([\"date\", \"datetime-local\", \"month\", \"time\", \"week\"]);\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: ReactNode;\n  /** Classes for the `<input>` itself, as distinct from `className`, which\n   *  styles the field WRAPPER once a `label` turns this into a FloatingField.\n   *  Without it a labelled Input had no way to reach its own element — so\n   *  `tabular-nums` on a numeric text field, which NumberInput has supported\n   *  all along through the identically named prop, was simply unavailable. */\n  inputClassName?: string;\n  /** {@link FIELD_DISPLAY} — on a phone, drop the chrome and set the value as a\n   *  heading. For the one field a form is about (a feedback subject, an account\n   *  name), never for a stack of them. Labelled fields only: the label is what\n   *  the placeholder falls back to once it goes `sr-only`. */\n  variant?: \"field\" | \"display\";\n  /** The field is required and unanswered, or holds something that cannot be\n   *  saved — {@link FIELD_INVALID}, the same rose border/ring `Select` has worn\n   *  since feedback #235.\n   *\n   *  It exists here because writing `aria-invalid` by hand did NOT do this. The\n   *  attribute spreads onto the element and nothing styles it — there is no\n   *  `[aria-invalid]` rule in this package or in either consumer's stylesheet —\n   *  so three Keksdose dialogs flagged a mismatched passphrase to a screen reader\n   *  and painted the field exactly as if it were fine. Setting the prop sets the\n   *  attribute too, so the two can no longer be spelled separately. */\n  invalid?: boolean;\n  /** What is wrong with the value, in the caller's own words (\"That IBAN has 21\n   *  digits\"). Rendered under the field, pointed at by the control's\n   *  `aria-describedby` — MERGED with any the caller already passed — and implies\n   *  `invalid`, so the field paints as well as announces. `invalid` alone still\n   *  covers the case where the message lives elsewhere. See {@link useFieldError}. */\n  error?: ReactNode;\n  /**\n   * Standing advice for the field (keksdose K4: Input had `error` but no `hint`, so the\n   * app built the caption by hand under each field, and half of those never reached a\n   * screen reader). The {@link Select} rule, so every field reads alike:\n   *  - plain TEXT (a string or a number) is a caption UNDER the field, attached with\n   *    `aria-describedby` — after the caller's own ids, before the error's;\n   *  - anything else (a {@link FieldHint} \"?\") rides the label line beside the\n   *    animated label, as NumberInput's does — or, on a field with no label, sits at the\n   *    field's end edge outside the box, and `className` then styles that row.\n   */\n  hint?: ReactNode;\n  /**\n   * A live \"12/80\" under the field, with `maxLength` (keksdose K11 — the broadcast,\n   * support and handoff-note fields counted by hand). Read with the field as \"12 of 80\n   * characters\", and announced politely only on entering the last stretch and on\n   * reaching the limit — never on every keystroke. See {@link CharacterCount}. Ignored\n   * without a `maxLength`: a count with no limit is not what this answers. Counts\n   * UTF-16 code units, as `maxLength` itself does. Controlled, it counts `value`;\n   * uncontrolled, `defaultValue` and then every change event — a value written from\n   * outside without one (a form library's `reset`) shows from the next keystroke.\n   */\n  showCount?: boolean;\n  /** The counter's words. See {@link CharacterCountLabels}. */\n  countLabels?: Partial<CharacterCountLabels>;\n  /** Names for the password reveal toggle, English by default — it is the one\n   *  string this component renders on its own behalf, and a German form was\n   *  reading it out in English. See {@link PasswordRevealLabels}. */\n  passwordLabels?: Partial<PasswordRevealLabels>;\n}\n\n/** The counter's words: the `characterCount` namespace — prop > `<UiKitProvider\n *  labels>` > English. One place, so the namespace is named once. */\nfunction useCharacterCountLabels(prop: Partial<CharacterCountLabels> | undefined): CharacterCountLabels {\n  return useKitLabels(\"characterCount\", DEFAULT_CHARACTER_COUNT_LABELS, prop);\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(props, ref) {\n  const {\n    className,\n    inputClassName,\n    label,\n    id,\n    placeholder,\n    type,\n    variant = \"field\",\n    invalid,\n    error,\n    hint,\n    showCount,\n    countLabels,\n    passwordLabels,\n    ...rest\n  } = props;\n  // Passed at all — even as `undefined` — the field keeps its box; see FieldGroup. The\n  // same for `hint` and `showCount` (keksdose, 0.22): a caption coming and going under\n  // the control must not rebuild it, or focus and the caret are lost mid-edit.\n  const reserve = \"error\" in props || \"hint\" in props || \"showCount\" in props;\n  const generated = useId();\n  const fieldId = id ?? generated;\n  const countId = useId();\n  const hintParts = useFieldHint(hint, rest[\"aria-describedby\"]);\n  const maxLength = rest.maxLength;\n  const counting = Boolean(showCount) && typeof maxLength === \"number\" && maxLength > 0;\n  const length = useTypedLength(rest.value, rest.defaultValue);\n  const countText = useCharacterCountLabels(countLabels);\n  const { isInvalid, describedBy, errorEl } = useFieldError(\n    error,\n    invalid,\n    // Caller's, caption, count — then the error, appended by the hook.\n    mergeDescribedBy(hintParts.describedBy, counting && countId),\n    rest[\"aria-invalid\"],\n  );\n  const counter = counting ? (\n    <CharacterCount\n      id={countId}\n      used={length.used}\n      max={maxLength}\n      labels={countText}\n      caption={<FieldCaption parts={hintParts} className=\"mt-0\" />}\n    />\n  ) : null;\n  const below = fieldBelow(hintParts, counter, errorEl);\n  const onChange = counting\n    ? (e: ChangeEvent<HTMLInputElement>) => {\n        length.track(e.target.value);\n        rest.onChange?.(e);\n      }\n    : rest.onChange;\n  const asDisplay = useMediaQuery(PHONE_QUERY, false) && variant === \"display\";\n  // Password fields get a reveal toggle so users can check what they typed.\n  const isPassword = type === \"password\";\n  const [revealed, setRevealed] = useState(false);\n  const effectiveType = isPassword && revealed ? \"text\" : type;\n  const handleClick = PICKER_TYPES.has(type ?? \"\")\n    ? (e: MouseEvent<HTMLInputElement>) => {\n        rest.onClick?.(e);\n        try {\n          // showPicker throws if unsupported or not user-activated — a click is\n          // a valid activation, so this is safe; guard for older browsers.\n          (e.currentTarget as HTMLInputElement & { showPicker?: () => void }).showPicker?.();\n        } catch {\n          /* ignore */\n        }\n      }\n    : rest.onClick;\n  const passwordText = useKitLabels(\"passwordReveal\", DEFAULT_PASSWORD_REVEAL_LABELS, passwordLabels);\n  const revealToggle = isPassword ? (\n    <button\n      type=\"button\"\n      // `tabIndex={-1}` sat here, which made this a painted, clickable control that\n      // Tab stepped straight over — on the one field whose value cannot be checked by\n      // looking at it. There is no mouse-only case for a reveal toggle; the people who\n      // cannot see what they typed are exactly who it is for. It is a tab stop now,\n      // and it needs a focus ring of its own, because FIELD_BASE's ring belongs to the\n      // input underneath and stays put while focus moves onto the button on top of it.\n      onClick={() => setRevealed((v) => !v)}\n      // …and since it is a tab stop, a field the user may not edit must not hand the\n      // keyboard a control that shows what is in it.\n      disabled={rest.disabled}\n      aria-label={revealed ? passwordText.hide : passwordText.show}\n      aria-pressed={revealed}\n      className=\"absolute inset-y-0 end-0 flex items-center rounded-e-md px-2.5 text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--brand)] disabled:cursor-default disabled:opacity-50\"\n    >\n      {revealed ? <EyeOff className=\"size-4\" /> : <Eye className=\"size-4\" />}\n    </button>\n  ) : null;\n  if (label === undefined) {\n    // A \"?\" with no label line to ride goes at the end edge, outside the box, and\n    // `className` moves to that row (see `hint`); without one nothing moves.\n    const endHint = hintParts.labelHint;\n    const ownClass = endHint === undefined ? className : undefined;\n    if (!isPassword) {\n      return (\n        <FieldGroup errorEl={below} reserve={reserve}>\n          <EndHintRow hint={endHint} className={className}>\n            <input\n              ref={ref}\n              id={id}\n              type={type}\n              placeholder={placeholder}\n              {...rest}\n              // AFTER the spread, so the prop wins — but OR-ed with whatever the spread\n              // carried, or setting `invalid` would have quietly deleted a caller's own\n              // `aria-invalid`. The prop is the one that also paints; a bare attribute\n              // still announces, which is all it ever did.\n              aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n              // Likewise merged rather than replaced — see {@link useFieldError}.\n              aria-describedby={describedBy}\n              onClick={handleClick}\n              onChange={onChange}\n              className={cn(FIELD_BASE, ownClass, inputClassName, isInvalid && FIELD_INVALID)}\n            />\n          </EndHintRow>\n        </FieldGroup>\n      );\n    }\n    return (\n      <FieldGroup errorEl={below} reserve={reserve}>\n        <EndHintRow hint={endHint} className={className}>\n          <div className={cn(\"relative\", ownClass)}>\n            <input\n              ref={ref}\n              id={id}\n              type={effectiveType}\n              placeholder={placeholder}\n              {...rest}\n              aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n              aria-describedby={describedBy}\n              onChange={onChange}\n              className={cn(FIELD_BASE, \"pe-9\", inputClassName, isInvalid && FIELD_INVALID)}\n            />\n            {revealToggle}\n          </div>\n        </EndHintRow>\n      </FieldGroup>\n    );\n  }\n  const ownPlaceholder = hasPlaceholderText(placeholder);\n  return (\n    <FieldGroup errorEl={below} reserve={reserve}>\n      <FloatingField\n        className={className}\n        htmlFor={fieldId}\n        label={label}\n        srOnlyLabel={asDisplay}\n        hint={hintParts.labelHint}\n      >\n        <input\n          ref={ref}\n          id={fieldId}\n          type={effectiveType}\n          // A labelled field with no placeholder of its own gets a single space, which\n          // feeds the floating label's peer-placeholder-shown trick. A caller's own is\n          // kept and shown on focus, once the label has floated out of its way (kastlan\n          // 8) — see FLOATING_PLACEHOLDER_ON_FOCUS. With the label sr-only there is no\n          // float left to drive, and an empty borderless line would say nothing at all\n          // — so there the label text is the placeholder when the caller gave none.\n          placeholder={\n            asDisplay\n              ? (placeholder ?? (typeof label === \"string\" ? label : \" \"))\n              : ownPlaceholder\n                ? placeholder\n                : \" \"\n          }\n          {...rest}\n          aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n          aria-describedby={describedBy}\n          onClick={handleClick}\n          onChange={onChange}\n          className={cn(\n            asDisplay\n              ? cn(FIELD_DISPLAY, \"text-xl font-semibold leading-snug\")\n              : cn(FLOATING_INPUT_CLASS, ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS),\n            isPassword && \"pe-9\",\n            inputClassName,\n            isInvalid && FIELD_INVALID,\n          )}\n        />\n        {revealToggle}\n      </FloatingField>\n    </FieldGroup>\n  );\n});\nInput.displayName = \"Input\";\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, \"size\"> {\n  label?: ReactNode;\n  /** See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** See {@link Input}'s `error`. */\n  error?: ReactNode;\n  /** A {@link FieldHint} for the label line — see {@link FloatingField}. Plain\n   *  TEXT (a string or a number) is a caption instead, and goes UNDER the field\n   *  like every other field's hint, attached through `aria-describedby`: the label\n   *  line is 11px of strip shared with the label, and a sentence placed there was\n   *  set in the value's type on top of both the label and the value. On an\n   *  UNLABELLED Select (no label line) a FieldHint sits at the field's end edge,\n   *  outside the box. */\n  hint?: ReactNode;\n  /**\n   * `\"sm\"`: a 28px, 12px-type select for a toolbar or a table header, where the\n   * 36px field stands a head taller than the buttons beside it. `\"md\"` (default)\n   * is the field every form uses. Unlabelled selects only — a floating label needs\n   * the tall box to float in, so a labelled Select ignores `\"sm\"`.\n   *\n   * A NUMBER is still the native attribute (the rows of a list box) and is passed\n   * straight through, so the one HTML meaning of `size` keeps working. Above 1 (as\n   * with `multiple`) the browser draws a list box, and the Select drops its chevron\n   * and the end padding reserved for it.\n   */\n  size?: \"sm\" | \"md\" | number;\n  /** Classes for the `<select>` itself. `className` styles the WRAPPER — the box\n   *  the chevron is positioned against — so it could set a width and nothing\n   *  else; this is the way to the element. See {@link Input}'s `inputClassName`. */\n  selectClassName?: string;\n  /**\n   * Why the choice cannot be changed — {@link Button}'s `disabledReason`, for a select\n   * that SAVES on change (a role picker in a members table, a status in a row). keksdose\n   * K3: those sat inside a hand-rolled `SaveGuard` that forced a native `disabled`, which\n   * took the field out of the tab order so the reason never reached a keyboard.\n   *\n   * With a reason the select is `aria-disabled` instead — still focusable, still showing\n   * its value — its list does not open (pointer and keys are swallowed, Tab and Escape\n   * excepted), `onChange` is never called, and the reason is in the kit {@link Tooltip}\n   * and on `aria-describedby`. It wears the settled look of a disabled field and drops\n   * its chevron, as a disabled Select does (dev#474). It wins over `disabled`.\n   *\n   * Use it CONTROLLED (`value` + `onChange`): React puts a controlled value back after\n   * the swallowed change. A touch platform's own picker may still open; nothing it picks\n   * is kept or reported.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This select COMMITS — choosing saves. Under a locked {@link WriteLockProvider} it is\n   * locked the `disabledReason` way with the lock's reason (which wins over its own).\n   * No provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3.\n   */\n  commit?: boolean;\n}\n\n// The compact select: the field's colours, a toolbar button's height. `py-0` and a\n// fixed height rather than a smaller padding, so the box is 28px whatever line\n// height the caller's type brings with it.\nconst SELECT_SM = \"h-7 py-0 ps-2 pe-7 text-xs\";\n\n/** Keys a locked select still answers: leaving it, and dismissing its tooltip. Every\n *  other key would open the list or step the value. */\nconst LOCKED_SELECT_KEYS = new Set([\"Tab\", \"Escape\", \"Shift\"]);\n\n/** FIELD_BASE's `disabled:` look, for a select that is locked without being `disabled`\n *  (the `:disabled` variants cannot match it). */\nconst FIELD_LOCKED = \"cursor-not-allowed bg-[var(--bg-surface-2)] text-[var(--text-muted)]\";\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(props, ref) {\n  const {\n    className,\n    label,\n    id,\n    children,\n    invalid,\n    error,\n    hint,\n    size,\n    selectClassName,\n    disabledReason,\n    commit,\n    onMouseDown,\n    onKeyDown,\n    onChange,\n    ...rest\n  } = props;\n  // See Input's `reserve`.\n  const reserve = \"error\" in props || \"hint\" in props || \"showCount\" in props;\n  const generated = useId();\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  // Only a number reaches the DOM; the two words are this component's own.\n  const nativeSize = typeof size === \"number\" ? size : undefined;\n  // A numeric size above 1 (or `multiple`) makes the browser draw a LIST BOX — all\n  // the rows in the field, no menu to drop. The dropdown dress did not fit it: the\n  // chevron was centred on a box several rows tall, sat on top of the rows' text\n  // at the end edge, and `pe-9` clipped every option nine units early. A list box\n  // gets the plain field instead — its own native scroll, no chevron, even padding.\n  const listBox = (nativeSize !== undefined && nativeSize > 1) || Boolean(rest.multiple);\n  const small = size === \"sm\" && label === undefined;\n  const fieldId = id ?? generated;\n  const hintId = useId();\n  // Text is a caption under the field; anything else (a FieldHint) rides the label\n  // line. See `hint` above. An empty string is no caption at all.\n  const textHint = (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n  const { isInvalid, describedBy, errorEl } = useFieldError(\n    error,\n    invalid,\n    // The caption goes in BEFORE the error — the standing advice first, the news\n    // second, the order useFieldError keeps for a caller's own description. A lock's\n    // reason sits between the two.\n    mergeDescribedBy(rest[\"aria-describedby\"], textHint && hintId, locked && lock.reasonId),\n    rest[\"aria-invalid\"],\n  );\n  const below =\n    textHint || errorEl !== null ? (\n      <>\n        {textHint && (\n          <p id={hintId} className=\"mt-1 text-[11px] leading-tight text-[var(--text-muted)]\">\n            {hint}\n          </p>\n        )}\n        {errorEl}\n      </>\n    ) : null;\n  // Custom chevron (native arrow hidden via appearance-none) so it sits a touch\n  // in from the end border and matches both themes — feedback #223. A DISABLED\n  // select has no menu to drop, so it drops the chevron too: the arrow is the one\n  // thing on the control that promises a choice (Keksdose dev#474, where the\n  // account type became read-only and still looked exactly like a picker). A locked\n  // one has no menu either.\n  const chevron =\n    rest.disabled || listBox || locked ? null : (\n      <FieldChevron className={small ? \"end-1.5 size-3.5\" : undefined} />\n    );\n  // `pe-9` is the room the chevron takes; a list box has none to make room for.\n  //\n  // A list box's height is `size` rows plus its padding, but its rows are clipped at\n  // the PADDING edge, not the content edge — so FIELD_BASE's `pb-2` showed the next\n  // row through the bottom padding: `size={4}` drew four and a half. The vertical room\n  // moves onto the rows instead (option padding counts toward the row height the\n  // browser sizes the box by), and the box keeps no bottom padding: exactly `size`\n  // whole rows, at any width.\n  const dress = listBox ? \"overflow-y-auto [&_option]:py-1\" : \"appearance-none pe-9\";\n  // Locked: focusable, but nothing opens the list or moves the value, and nothing is\n  // reported. The no-op `onChange` keeps a controlled select's value where React put\n  // it (and keeps React from warning about a `value` with no handler).\n  const interaction = locked\n    ? {\n        disabled: undefined,\n        \"aria-disabled\": true as const,\n        onMouseDown: (e: MouseEvent<HTMLSelectElement>) => e.preventDefault(),\n        onKeyDown: (e: KeyboardEvent<HTMLSelectElement>) => {\n          if (!LOCKED_SELECT_KEYS.has(e.key) && !e.ctrlKey && !e.metaKey) e.preventDefault();\n        },\n        onChange: () => {},\n      }\n    : { onMouseDown, onKeyDown, onChange };\n  // While locked the field sits in the reason's Tooltip, which becomes the outermost\n  // box — so `className` (a width, a grid cell) moves onto it, and the form keeps its\n  // layout. `block` so a full-width field stays full width inside it.\n  const boxClass = locked ? undefined : className;\n  const withReason = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} className={cn(\"block\", className)}>\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n  if (label === undefined) {\n    const select = (\n      <select\n        ref={ref}\n        // `id` is destructured out of the props to feed `fieldId`, and this branch\n        // never put it back — so an UNLABELLED Select swallowed it and the\n        // consumer's own `<label for=\"…\">` pointed at nothing. The control stayed\n        // in the tab order with no accessible name at all: reachable, and silent\n        // when it was reached. Input and Textarea both forward it here; this is\n        // the third one doing the same thing.\n        id={id}\n        size={nativeSize}\n        {...rest}\n        {...interaction}\n        // OR-ed with the spread for the reason spelled out on Input's copy: this\n        // branch wrote `invalid || undefined`, so passing `aria-invalid` by hand\n        // to a Select — which is what a caller does when the validity is\n        // `\"grammar\"` or `\"spelling\"`, or when the paint is not wanted — had the\n        // attribute silently dropped. Input has never done that.\n        aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n        aria-describedby={describedBy}\n        className={cn(\n          FIELD_BASE,\n          dress,\n          listBox && \"py-0\",\n          small && SELECT_SM,\n          locked && FIELD_LOCKED,\n          selectClassName,\n          isInvalid && FIELD_INVALID,\n        )}\n      >\n        {children}\n      </select>\n    );\n    // A FieldHint with no label line to ride (0.15.5 P8): an unlabelled Select — named\n    // by `aria-label` or a `<label>` of the caller's — dropped a non-text `hint`\n    // without a trace, so the \"?\" a caller passed never rendered and a test looking\n    // for its button found none. It goes at the end of the field instead, outside the\n    // box, as the label line's own hint goes at the end of the label.\n    if (hasContent(hint) && !textHint) {\n      return (\n        <FieldGroup errorEl={below} reserve={reserve}>\n          {withReason(\n            <div className={cn(\"flex items-center gap-1.5\", boxClass)}>\n              <div className=\"relative min-w-0 flex-1\">\n                {select}\n                {chevron}\n              </div>\n              <span className=\"flex shrink-0 items-center\">{hint}</span>\n            </div>,\n          )}\n        </FieldGroup>\n      );\n    }\n    return (\n      <FieldGroup errorEl={below} reserve={reserve}>\n        {withReason(\n          <div className={cn(\"relative\", boxClass)}>\n            {select}\n            {chevron}\n          </div>,\n        )}\n      </FieldGroup>\n    );\n  }\n  return (\n    <FieldGroup errorEl={below} reserve={reserve}>\n      {withReason(\n        <FloatingField\n          className={boxClass}\n          htmlFor={fieldId}\n          label={label}\n          staticLabel\n          hint={textHint ? undefined : hint}\n        >\n          <select\n            ref={ref}\n            id={fieldId}\n            size={nativeSize}\n            {...rest}\n            {...interaction}\n            aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n            aria-describedby={describedBy}\n            className={cn(\n              FIELD_BASE,\n              // The floated label takes the top strip of a list box too, so its first\n              // row starts under the label rather than behind it. No bottom padding — see\n              // `dress`.\n              listBox ? \"pt-5 pb-0\" : FIELD_FLOATING_PAD,\n              \"peer\",\n              dress,\n              locked && FIELD_LOCKED,\n              selectClassName,\n              isInvalid && FIELD_INVALID,\n            )}\n          >\n            {children}\n          </select>\n          {chevron}\n        </FloatingField>,\n      )}\n    </FieldGroup>\n  );\n});\nSelect.displayName = \"Select\";\n\n/**\n * The backdrop of a labelled {@link Textarea}'s label strip (Kurvenschmiede, 0.24).\n *\n * The report: paste a long table into ColumnMapper, the field scrolls, and the floated\n * \"Paste a table\" / \"Tabelle einfügen\" sits ON the first visible line of text — on\n * desktop and on a phone. Not a ColumnMapper bug: every labelled textarea that scrolls\n * did it. An `<input>` has one line that never moves, so the strip FIELD_FLOATING_PAD\n * leaves for the label is always empty there; a textarea's top padding is part of its\n * SCROLLING area, and once the content scrolls the lines travel up through the strip\n * and under the label.\n *\n * The fix makes that padding stay put: this layer is a later sibling of the textarea\n * (so `peer-*` reaches it, and as a positioned box it paints above the textarea's\n * text), the label paints above it in turn, and it covers exactly the top padding —\n * `top-px` / `inset-x-px` inside the 1px border, `h-4` = `pt-4`. At rest it covers\n * padding and nothing else, so no pixel of an unscrolled line is ever hidden; scrolled\n * text slides out of sight under it instead of through the label.\n *\n * Why a layer and not \"start the scrolling area below the strip\" (a wrapper that draws\n * the border and background, the textarea transparent inside it): the box would stop\n * being the textarea. Its focus outline, its brand border on focus, the invalid ring,\n * the disabled and read-only greys and every caller's `[&_textarea]:…` would all have\n * to be rebuilt on the wrapper with `focus-within:` / `has-[…]:`, and a caller's\n * `style={{ height }}` would size the scroller rather than the field. The layer leaves\n * all of that exactly where it was.\n *\n * What it has to match, it matches from the same tokens the field uses: the surface is\n * FIELD_BASE's `--bg-surface`, and `--bg-surface-2` for `disabled` and `[readonly]` —\n * on the same ATTRIBUTE selector FIELD_BASE uses, for the reason given there. Focus and\n * `invalid` change only the border and the ring, which are outside the layer, so they\n * need nothing. Both themes come with the variables. The inner corners are the field's\n * radius (`rounded-md`, 6px) less the 1px border, so the rounded border is never cut\n * into — a literal 5px rather than `var(--radius-md)`, which Tailwind emits only where\n * a utility uses it and the kit's token check refuses (token-vars-declared).\n *\n * Hidden (`display: none`) until the label floats: an empty, unfocused field has\n * nothing that could scroll, and it renders exactly as it did before 0.24. Pointer\n * events pass through, so a click on the strip still lands in the field.\n *\n * The one thing CSS cannot know is a classic scrollbar's width, and a strip across the\n * whole inner width would hide the scrollbar's top arrow — see {@link TextareaLabelStrip}.\n */\nconst TEXTAREA_LABEL_STRIP = cn(\n  \"pointer-events-none absolute inset-x-px top-px hidden h-4 rounded-t-[5px] bg-[var(--bg-surface)]\",\n  \"peer-focus:block peer-[:not(:placeholder-shown)]:block\",\n  \"peer-disabled:bg-[var(--bg-surface-2)] peer-[[readonly]]:bg-[var(--bg-surface-2)]\",\n);\n\n/**\n * {@link TEXTAREA_LABEL_STRIP}, stopped short of a classic scrollbar.\n *\n * A Windows / Linux desktop draws a textarea's vertical scrollbar INSIDE the border, in\n * a gutter it takes from the content box (15px in Chromium); a strip across the full\n * inner width would sit on top of the scrollbar's up arrow. So the gutter is measured —\n * border box less client width less the borders — and the strip ends where it begins.\n * On whichever side it is: `clientLeft` includes a gutter on the LEFT, which is where\n * Chromium and Firefox put it in a right-to-left field. The side is applied as an\n * inline-start / inline-end inset, so when `dir` flips afterwards and the scrollbar\n * follows it to the other edge, the strip does too without a re-measure. That corner\n * also loses its rounding, since it no longer meets the border.\n *\n * Overlay scrollbars (macOS, phones) take no gutter: the measurement is zero and the\n * strip spans the field. A ResizeObserver on the textarea re-measures when the\n * scrollbar comes or goes (it takes the content box with it) and when the field is\n * resized by hand. Not laid out — hidden in a closed panel, or jsdom — the CSS insets\n * stand until it is.\n */\nfunction TextareaLabelStrip() {\n  const ref = useRef<HTMLSpanElement>(null);\n  useLayoutEffect(() => {\n    const strip = ref.current;\n    const field = strip?.previousElementSibling;\n    if (!strip || !(field instanceof HTMLTextAreaElement)) return;\n    const fit = () => {\n      if (field.offsetWidth === 0) return;\n      const style = getComputedStyle(field);\n      const borderLeft = parseFloat(style.borderLeftWidth) || 0;\n      const borderRight = parseFloat(style.borderRightWidth) || 0;\n      const gutter = field.offsetWidth - field.clientWidth - borderLeft - borderRight;\n      // offsetWidth and clientWidth are whole pixels, so a field with no scrollbar can\n      // read ±1 here; no scrollbar is that thin.\n      const bar = gutter > 1.5;\n      const onLeft = field.clientLeft - borderLeft > 1.5;\n      // Kept as a LOGICAL side: a `dir` flipped later (a language switch) moves the\n      // scrollbar across without resizing anything, so nothing would re-measure —\n      // but it stays at the inline end, and so does an inline-end inset.\n      const rtl = style.direction === \"rtl\";\n      const atEnd = onLeft === rtl;\n      const border = (end: boolean) => (end === rtl ? borderLeft : borderRight);\n      strip.style.insetInlineEnd = bar && atEnd ? `${border(true) + gutter}px` : \"\";\n      strip.style.insetInlineStart = bar && !atEnd ? `${border(false) + gutter}px` : \"\";\n      strip.style.borderStartEndRadius = bar && atEnd ? \"0\" : \"\";\n      strip.style.borderStartStartRadius = bar && !atEnd ? \"0\" : \"\";\n    };\n    fit();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(fit);\n    observer.observe(field);\n    return () => observer.disconnect();\n  }, []);\n  return <span ref={ref} aria-hidden data-slot=\"label-strip\" className={TEXTAREA_LABEL_STRIP} />;\n}\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  label?: ReactNode;\n  /** See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** See {@link Input}'s `error`. */\n  error?: ReactNode;\n  /** See {@link Input}'s `hint` (keksdose K4): text is a caption under the field, a\n   *  {@link FieldHint} rides the label line (or, unlabelled, the end edge). */\n  hint?: ReactNode;\n  /** See {@link Input}'s `showCount` (keksdose K11): a live \"12/80\" under the field,\n   *  with `maxLength`, announced only near and at the limit. */\n  showCount?: boolean;\n  /** The counter's words. See {@link CharacterCountLabels}. */\n  countLabels?: Partial<CharacterCountLabels>;\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(props, ref) {\n  const { className, label, id, placeholder, invalid, error, hint, showCount, countLabels, ...rest } = props;\n  // See Input's `reserve`.\n  const reserve = \"error\" in props || \"hint\" in props || \"showCount\" in props;\n  const generated = useId();\n  const fieldId = id ?? generated;\n  const countId = useId();\n  const hintParts = useFieldHint(hint, rest[\"aria-describedby\"]);\n  const maxLength = rest.maxLength;\n  const counting = Boolean(showCount) && typeof maxLength === \"number\" && maxLength > 0;\n  const length = useTypedLength(rest.value, rest.defaultValue);\n  const countText = useCharacterCountLabels(countLabels);\n  const { isInvalid, describedBy, errorEl } = useFieldError(\n    error,\n    invalid,\n    mergeDescribedBy(hintParts.describedBy, counting && countId),\n    rest[\"aria-invalid\"],\n  );\n  const counter = counting ? (\n    <CharacterCount\n      id={countId}\n      used={length.used}\n      max={maxLength}\n      labels={countText}\n      caption={<FieldCaption parts={hintParts} className=\"mt-0\" />}\n    />\n  ) : null;\n  const below = fieldBelow(hintParts, counter, errorEl);\n  const onChange = counting\n    ? (e: ChangeEvent<HTMLTextAreaElement>) => {\n        length.track(e.target.value);\n        rest.onChange?.(e);\n      }\n    : rest.onChange;\n  if (label === undefined) {\n    const endHint = hintParts.labelHint;\n    return (\n      <FieldGroup errorEl={below} reserve={reserve}>\n        <EndHintRow hint={endHint} className={className}>\n          <textarea\n            ref={ref}\n            id={id}\n            placeholder={placeholder}\n            {...rest}\n            aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n            aria-describedby={describedBy}\n            onChange={onChange}\n            className={cn(FIELD_BASE, endHint === undefined && className, isInvalid && FIELD_INVALID)}\n          />\n        </EndHintRow>\n      </FieldGroup>\n    );\n  }\n  const ownPlaceholder = hasPlaceholderText(placeholder);\n  return (\n    <FieldGroup errorEl={below} reserve={reserve}>\n      <FloatingField className={className} htmlFor={fieldId} label={label} hint={hintParts.labelHint}>\n        <textarea\n          ref={ref}\n          id={fieldId}\n          // The float trick's single space, unless the caller has a placeholder of its\n          // own — then that, shown on focus once the label is out of its way (kastlan\n          // 8, see FLOATING_PLACEHOLDER_ON_FOCUS).\n          placeholder={ownPlaceholder ? placeholder : \" \"}\n          {...rest}\n          aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n          aria-describedby={describedBy}\n          onChange={onChange}\n          className={cn(\n            FLOATING_INPUT_CLASS,\n            ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS,\n            isInvalid && FIELD_INVALID,\n          )}\n        />\n        {/* Between the textarea and the label, on purpose: after the textarea so it\n            is its `peer` and paints over its text, before the label so the label\n            paints over it. See TEXTAREA_LABEL_STRIP. */}\n        <TextareaLabelStrip />\n      </FloatingField>\n    </FieldGroup>\n  );\n});\nTextarea.displayName = \"Textarea\";\n\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  children: ReactNode;\n  /**\n   * When true, drop the card chrome (border, rounded corners, shadow) on mobile so the\n   * card spans edge-to-edge. Chrome reappears at the `md` breakpoint. Use for primary\n   * content cards on data pages; leave off for centered dialog/panel cards.\n   */\n  flush?: boolean;\n  /**\n   * `inset`: a panel INSIDE a card rather than a card on the page — the raised\n   * `--bg-surface-2`, a small radius, `p-3` of its own and no border or shadow, since\n   * it is already sitting on the card that has them. Lenkbank's results blocks and\n   * corner panels write this by hand (`rounded-md bg-surface-2 p-3`) under a Card of\n   * their own. Unlike the default card it carries its padding, because every one of\n   * those copies wanted the same one; a caller's `p-*` still wins. `flush` is ignored:\n   * an inset panel never runs edge to edge.\n   */\n  variant?: \"default\" | \"inset\" | \"outline\";\n  /**\n   * The card's own padding: `none`, `sm` (`p-3`) or `md` (`p-4`).\n   *\n   * `outline` is the bordered box with no shadow — a row or a block INSIDE a section\n   * rather than a card on the page: kastlan's rent breakdown rows\n   * (tenancy/components/breakdown-row.tsx, `rounded-lg border p-4`) and the meters\n   * list's inline add row (meters/components/meter-add-row.tsx). It takes `md` by\n   * default, as every one of those copies does; `sm` is the dense row.\n   *\n   * Left out, the default card keeps no padding (its CardHeader / CardContent own the\n   * rhythm) and `inset` keeps its `p-3`; passing it sets theirs too. A caller's `p-*`\n   * in `className` still wins.\n   *\n   * Whenever the card carries a padding — this prop, or the `inset` / `outline` one —\n   * CardHeader, CardContent and CardFooter drop their own `px-6` / `pt-6` / `pb-6`, so\n   * the card's padding is the only one. Before 0.16 they kept it regardless and a\n   * `padding=\"md\"` card with parts was padded twice (40px a side); keksdose's settings\n   * cards zeroed all three parts by hand (`<CardHeader className=\"p-0\">`). A padding set\n   * only through `className` cannot be seen from the parts: use the prop.\n   */\n  padding?: \"none\" | \"sm\" | \"md\";\n  /**\n   * A card that is a WARNING (or other status) as a whole: the border in the tone's\n   * `-border` colour and the {@link CardTitle} in the tone's text colour. kastlan's\n   * dunning summary (invoice-detail-page.tsx:231-235) writes both by hand —\n   * `border-[var(--warning-border)]` on the Card, `text-[var(--warning)]` on the title\n   * — and the next status card would copy the pair (`outline` takes it the same way).\n   * An `inset` panel has no border, so it takes the tone's quiet `-bg` fill instead.\n   * `data-tone` is set for a caller's own\n   * selectors.\n   */\n  tone?: CardTone;\n  /**\n   * How loud the `tone` frame is. `\"strong\"`: a 2px border in the tone's strong\n   * colour — `--danger-border-strong` for `danger`, the tone's own text colour\n   * (`--warning`, `--info`, `--success`) for the others, which have no\n   * `-border-strong` token of their own. For the one tile on a page that guards\n   * something destructive or security-relevant: keksdose's password / delete-account\n   * tile (shared/components/password-danger-card.tsx) wrote `toneFrameClass(tone)` over\n   * the Card by hand for the 2px rule, and `p-[15px]` under it so the content did not\n   * move. Here the extra pixel comes off the padding the same way (`padding` or the\n   * variant's own), so a strong card's content sits exactly where a soft one's does.\n   *\n   * Default `\"soft\"`: the 1px `-border` it has always been. No effect without `tone`,\n   * nor on `inset`, which has no border to make louder (its tone is a fill).\n   */\n  toneStrength?: \"soft\" | \"strong\";\n  /**\n   * Wash the card in the tone's quiet `-bg` surface as well as framing it. A toned\n   * card is a border and a title colour, at either strength — the wash belongs to\n   * `AlertBanner`, the message, not to a card that holds a form — so it stays\n   * off by default. Some tiles want both: keksdose's password / delete-account tile\n   * was `toneFrameClass(tone)` (border AND wash) before 0.16, and after moving to\n   * `toneStrength=\"strong\"` it re-added `bg-[var(--danger-bg)]` by hand. The wash is\n   * layered OVER the card's own `--bg-surface` (as AlertBanner's `elevated` does), so\n   * the dark theme's translucent tints stay a card, not a hole to the page below.\n   *\n   * No effect without `tone`, nor on `inset`, whose tone is already the fill.\n   */\n  toneFill?: boolean;\n  /**\n   * The parts' type scale. `\"compact\"`: CardTitle `text-sm font-medium`,\n   * CardDescription `text-xs` and the CardHeader's title-to-description gap\n   * `gap-0.5` — the small settings / admin card. keksdose wrote those three classes by\n   * hand on ~25 cards. Set here, they reach the parts through context; a class on a\n   * part still wins, and a Card nested inside starts again from its own density.\n   *\n   * Default `\"comfortable\"`: the parts as they have always been.\n   */\n  density?: CardDensity;\n}\n\nexport type CardDensity = \"comfortable\" | \"compact\";\n\nexport type CardTone = \"warning\" | \"danger\" | \"info\" | \"success\";\n\n// The title is reached through its `data-slot`, so the tone needs no context and a\n// caller's `className` on CardTitle still wins (it is on the element itself).\nconst CARD_TONES: Record<CardTone, { border: string; fill: string; title: string }> = {\n  warning: {\n    border: \"border-[var(--warning-border)]\",\n    fill: \"bg-[var(--warning-bg)]\",\n    title: \"[&_[data-slot=card-title]]:text-[var(--warning)]\",\n  },\n  danger: {\n    border: \"border-[var(--danger-border)]\",\n    fill: \"bg-[var(--danger-bg)]\",\n    title: \"[&_[data-slot=card-title]]:text-[var(--danger)]\",\n  },\n  info: {\n    border: \"border-[var(--info-border)]\",\n    fill: \"bg-[var(--info-bg)]\",\n    title: \"[&_[data-slot=card-title]]:text-[var(--info)]\",\n  },\n  success: {\n    border: \"border-[var(--success-border)]\",\n    fill: \"bg-[var(--success-bg)]\",\n    title: \"[&_[data-slot=card-title]]:text-[var(--success)]\",\n  },\n};\n\nconst CARD_PADDING: Record<NonNullable<CardProps[\"padding\"]>, string> = {\n  none: \"p-0\",\n  sm: \"p-3\",\n  md: \"p-4\",\n};\n\n// The same padding one pixel short, for a 2px `toneStrength=\"strong\"` frame: the\n// border grows inwards by that pixel, so the content stays where the 1px card had it.\nconst CARD_PADDING_STRONG: Record<NonNullable<CardProps[\"padding\"]>, string> = {\n  none: \"p-0\",\n  sm: \"p-[11px]\",\n  md: \"p-[15px]\",\n};\n\n// The wash as a background IMAGE over the card's opaque `--bg-surface` — see\n// `toneFill`. A plain `bg-[var(--danger-bg)]` would REPLACE the surface, and the dark\n// theme's washes are a translucent tint.\nconst CARD_TONE_WASH: Record<CardTone, string> = {\n  warning: \"bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]\",\n  danger: \"bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]\",\n  info: \"bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]\",\n  success: \"bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]\",\n};\n\nconst CARD_TONES_STRONG: Record<CardTone, string> = {\n  warning: \"border-2 border-[var(--warning)]\",\n  danger: \"border-2 border-[var(--danger-border-strong)]\",\n  info: \"border-2 border-[var(--info)]\",\n  success: \"border-2 border-[var(--success)]\",\n};\n\n/**\n * Whether the {@link Card} round the parts carries the padding itself — so CardHeader,\n * CardContent and CardFooter must not add theirs on top. `false` (no Card, or a default\n * card with no `padding`) keeps the parts' own `px-6` rhythm, as it always was.\n */\nconst CardPaddedContext = createContext(false);\n\n/** The {@link CardProps.density} of the nearest Card — the parts' type scale. */\nconst CardDensityContext = createContext<CardDensity>(\"comfortable\");\n\nexport function Card({\n  className,\n  children,\n  flush,\n  variant = \"default\",\n  tone,\n  toneStrength = \"soft\",\n  toneFill = false,\n  density = \"comfortable\",\n  padding,\n  ...rest\n}: CardProps) {\n  const toned = tone ? CARD_TONES[tone] : undefined;\n  // An outline card is bordered like the default one, so a tone recolours its border.\n  const bordered = variant !== \"inset\";\n  const strong = toned !== undefined && bordered && toneStrength === \"strong\";\n  // The padding the card itself carries: the prop, else the variant's own (`inset`\n  // p-3, `outline` p-4). A default card with no prop carries none — its parts do.\n  const ownPadding = padding ?? (variant === \"inset\" ? \"sm\" : variant === \"outline\" ? \"md\" : undefined);\n  return (\n    <div\n      data-tone={tone}\n      data-tone-strength={strong ? \"strong\" : undefined}\n      data-density={density === \"compact\" ? \"compact\" : undefined}\n      {...rest}\n      className={cn(\n        variant === \"inset\"\n          ? \"rounded-md bg-[var(--bg-surface-2)] p-3\"\n          : variant === \"outline\"\n            ? // No shadow and no `flush`: it sits on a surface that already has both.\n              \"rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-4\"\n            : cn(\n              // Surface + border are theme tokens so the palette switcher (feedback\n              // #307) can re-skin every card; a caller's own bg-*/border-* override\n              // still wins via tailwind-merge.\n              \"bg-[var(--bg-surface)]\",\n              flush\n                ? \"border-y border-[var(--border)] md:rounded-lg md:border md:shadow-sm\"\n                : \"rounded-lg border border-[var(--border)] shadow-sm\",\n            ),\n        toned && (bordered ? toned.border : toned.fill),\n        strong && tone && CARD_TONES_STRONG[tone],\n        toneFill && bordered && tone && CARD_TONE_WASH[tone],\n        toned?.title,\n        ownPadding && (strong ? CARD_PADDING_STRONG : CARD_PADDING)[ownPadding],\n        className,\n      )}\n    >\n      <CardPaddedContext.Provider value={ownPadding !== undefined}>\n        <CardDensityContext.Provider value={density}>{children}</CardDensityContext.Provider>\n      </CardPaddedContext.Provider>\n    </div>\n  );\n}\n\n// Composed shadcn-style Card sub-parts. A default `Card` with no `padding` stays\n// padding-less, so these own the padding/rhythm (`px-6`, the header's `pt-6`, the\n// last part's `pb-6`). A Card that carries a padding of its own — the `padding` prop,\n// or `inset` / `outline`, which have one built in — tells them so through context and\n// they add none on top (see CardPaddedContext). Token-driven so they re-skin with the\n// palette. Use CardHeader → CardTitle/CardDescription (+ optional CardAction,\n// top-right) → CardContent → CardFooter.\n/** The sub-parts add nothing to a `<div>`'s props — they are the SAME element with a\n *  `data-slot` and a padding rhythm — so most names are aliases rather than an empty\n *  interface pretending to be more. They exist so a consumer's own wrapper can say\n *  `CardHeaderProps` instead of `ComponentProps<typeof CardHeader>`. */\nexport interface CardHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Below the `sm` breakpoint, put the {@link CardAction} UNDER the title and\n   * description instead of beside them. For an action that is wider than an icon —\n   * a \"Set up two-factor\" button, a checkbox and a filter — which, kept in the\n   * top-end column on a 390px phone, squeezed the title into a ribbon two words wide\n   * (keksdose's settings cards). Off by default: an icon action (the wizard summary's\n   * pencil) is narrow enough to stay beside the title at every width.\n   */\n  stackAction?: boolean;\n}\nexport type CardTitleLevel = \"div\" | \"h2\" | \"h3\" | \"h4\";\nexport interface CardTitleProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The element the title is: `\"div\"` (default) or a heading level. Five of keksdose's\n   * settings cards nested their own `<h2>` / `<h3>` INSIDE CardTitle to put the card in\n   * the page's outline — a heading in a div that looks like a heading. The heading\n   * takes the title's look unchanged (the reset leaves `h2`–`h4` at inherited size and\n   * weight), so only the outline changes.\n   */\n  as?: CardTitleLevel;\n}\nexport type CardDescriptionProps = ComponentPropsWithoutRef<\"div\">;\nexport type CardActionProps = ComponentPropsWithoutRef<\"div\">;\nexport type CardContentProps = ComponentPropsWithoutRef<\"div\">;\nexport type CardFooterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport function CardHeader({ className, stackAction = false, ...props }: CardHeaderProps) {\n  const padded = useContext(CardPaddedContext);\n  const compact = useContext(CardDensityContext) === \"compact\";\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        // Grid (not flex) so CardAction can occupy a top-right column; with no\n        // action it collapses to one column and title/description stack.\n        //\n        // The two-column switch sets a VARIABLE, not `grid-template-columns`. As\n        // `has-data-[slot=card-action]:grid-cols-[1fr_auto]` it was two classes of\n        // specificity (the class plus the attribute inside `:has()`), and a caller's\n        // `max-sm:grid-cols-1` — one class inside a media query — lost to it at every\n        // width, so the action could never be stacked on a phone from outside. Now the\n        // property itself is set by a plain one-class utility that any `grid-cols-*`\n        // variant of the caller's outranks by coming later in the sheet; the `:has()`\n        // rule only picks the value. The base `1fr` resets the variable so a header\n        // never inherits an ancestor header's two columns.\n        \"grid auto-rows-min items-start gap-1.5 [--card-header-cols:1fr] has-data-[slot=card-action]:[--card-header-cols:1fr_auto] grid-cols-[var(--card-header-cols,1fr)]\",\n        padded ? \"px-0 pt-0\" : \"px-6 pt-6\",\n        compact && \"gap-0.5\",\n        // One column under `sm`, and the action back into the flow (DOM order, so\n        // after the description when it is written after it), at the start edge.\n        // The descendant selector outranks CardAction's own placement classes.\n        stackAction &&\n          \"max-sm:grid-cols-1 max-sm:[&>[data-slot=card-action]]:col-start-1 max-sm:[&>[data-slot=card-action]]:row-span-1 max-sm:[&>[data-slot=card-action]]:row-start-auto max-sm:[&>[data-slot=card-action]]:justify-self-start\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CardTitle({ className, as: Tag = \"div\", ...props }: CardTitleProps) {\n  const compact = useContext(CardDensityContext) === \"compact\";\n  return (\n    <Tag\n      data-slot=\"card-title\"\n      // Compact is `leading-snug`, not `leading-none`: there the title sits on a\n      // 12px description `gap-0.5` below, and a line box exactly the cap height left\n      // the hint hugging the title's descenders (every keksdose admin card added\n      // `leading-normal` by hand). Comfortable keeps `leading-none` — its 14px\n      // description is `gap-1.5` away and has always read right.\n      className={cn(compact ? \"text-sm font-medium leading-snug\" : \"font-semibold leading-none\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CardDescription({ className, ...props }: CardDescriptionProps) {\n  const compact = useContext(CardDensityContext) === \"compact\";\n  return (\n    <div\n      data-slot=\"card-description\"\n      // `--text-muted`, the kit's secondary-line colour (StatTile's description, the\n      // field captions). It was `--money-neutral`, a MONEY token that happened to be\n      // a similar grey — and a palette that re-tunes the money colours moved every\n      // card's description with them.\n      className={cn(compact ? \"text-xs\" : \"text-sm\", \"text-[var(--text-muted)]\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CardAction({ className, ...props }: CardActionProps) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\"col-start-2 row-start-1 row-span-2 self-start justify-self-end\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CardContent({ className, ...props }: CardContentProps) {\n  const padded = useContext(CardPaddedContext);\n  // `last:pb-6`, not a plain `pb-6`: CardHeader owns the top padding and CardFooter\n  // owns the bottom one, so a card WITHOUT a footer had nothing closing it off and\n  // its last field sat flush against the card edge (kastlan feedback: the language\n  // input touching the card bottom on /profile). Scoping to `:last-child` fixes that\n  // case and leaves a footered card's rhythm exactly as it was. Inside a padded Card\n  // the card closes itself off, so there is nothing to add.\n  return <div data-slot=\"card-content\" className={cn(!padded && \"px-6 last:pb-6\", className)} {...props} />;\n}\n\nexport function CardFooter({ className, ...props }: CardFooterProps) {\n  const padded = useContext(CardPaddedContext);\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center\", !padded && \"px-6 pb-6\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A `<span>`'s props plus the words a reader hears — see {@link CardHeaderProps}.\n *  The ring is drawn with a border, so there is nothing inside it to put children in. */\nexport interface SpinnerProps extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> {\n  /**\n   * What the spinner means, for a screen reader. Default: `common.loading` from the\n   * {@link UiKitProvider}, else \"Loading…\".\n   *\n   * `null` makes it DECORATIVE — no role, no text, hidden from assistive tech. Use it\n   * whenever words are already there: beside visible \"Loading…\" text (otherwise it is\n   * announced twice), inside a labelled button (otherwise its text joins the button's\n   * name), or inside a live region of the app's own (otherwise that region and this\n   * one both announce).\n   */\n  label?: string | null;\n  /**\n   * Show the label as TEXT beside the ring, not only to a screen reader. kastlan's\n   * LoadingState (feedback/loading-state.tsx:14) builds exactly this by hand — a\n   * `role=\"status\"` wrapper, the spinner at `label={null}`, a `<p>` of text — so it\n   * has to get the three-part aria arrangement right itself. Here the visible text IS\n   * the live region's content (the label stays the accessible name, said once), and\n   * the ring is decorative. `className` still sizes the ring; the other props go on\n   * the wrapper. Ignored with `label={null}`: there are no words to show.\n   */\n  showLabel?: boolean;\n  /** Where the shown label sits: `end` (default) — beside the ring, for a row or a\n   *  button; `below` — under it, centred, for a panel's loading state. */\n  labelPosition?: \"end\" | \"below\";\n}\n\n/**\n * A spinning ring that also SAYS it is loading.\n *\n * It used to be a bordered span and nothing else, so a reader met no element at all\n * where a sighted user saw the page working — or, beside an emptied list, met the\n * empty list and concluded there was nothing there. `role=\"status\"` makes it a polite\n * live region, and the text inside is what that region announces. Text rather than\n * `aria-label`: a live region's announcement is its CONTENT, and several readers\n * ignore a name on one.\n *\n * `relative` so the `sr-only` text has a local containing block (see\n * sr-only-containment.test). Where the words are already on screen, pass\n * `label={null}`: announcing is right for a spinner standing alone and wrong for one\n * beside text, inside a button, or inside the app's own live region.\n */\nexport function Spinner({ className, label, showLabel, labelPosition = \"end\", ...rest }: SpinnerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, {\n    loading: label ?? undefined,\n  });\n  const ring = cn(\n    \"relative inline-block h-5 w-5 animate-spin rounded-full border-2 border-[var(--border)] border-t-[var(--text-primary)]\",\n    className,\n  );\n  if (label === null) return <span aria-hidden {...rest} className={ring} />;\n  if (showLabel) {\n    return (\n      <span\n        role=\"status\"\n        {...rest}\n        className={cn(\n          \"inline-flex items-center text-sm text-[var(--text-secondary)]\",\n          labelPosition === \"below\" ? \"flex-col gap-2 text-center\" : \"gap-2\",\n        )}\n      >\n        <span aria-hidden className={ring} />\n        <span>{common.loading}</span>\n      </span>\n    );\n  }\n  return (\n    <span role=\"status\" {...rest} className={ring}>\n      {/* The trailing space is a separator for the case the caller forgot `label={null}`\n          inside a button: a name is the concatenation of its text, and without it the\n          spinner's word ran straight into the button's — \"Loadingconfirm\". */}\n      <span className=\"sr-only\">{common.loading} </span>\n    </span>\n  );\n}\n\nexport interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"title\"> {\n  /** The box renders `title` and `hint` in its own two-line rhythm, which is what makes\n   *  every empty state in three apps look like the same thing — so there is no\n   *  `children` slot to put arbitrary content in. The two slots below are the only\n   *  other things an empty state has turned out to need, and each has a fixed place. */\n  /** Nodes rather than strings, so a title can carry a code, a link or an emphasised\n   *  word — keksdose's error boundary shows the error's name in `<code>` — while the\n   *  box still sets the type. */\n  title: ReactNode;\n  hint?: ReactNode;\n  /**\n   * Render the title as a heading of this level. Left out it is a `<div>`, as before:\n   * most empty states are a message inside a section that already has its heading.\n   * keksdose's error boundary IS the page when it trips, and its `<h2>` went missing\n   * when it moved onto EmptyState — so the page's heading outline lost the one line\n   * that says what happened. Only the element changes; the look is the box's.\n   */\n  headingAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /** A glyph ABOVE the title — kastlan's InboxEmptyState (an inbox), keksdose's\n   *  offline card (a cloud with a slash). Sized by the box (`[&_svg]:size-8`) and\n   *  muted, so five call sites cannot pick five sizes; hidden from assistive tech,\n   *  because the title already says what it shows. */\n  icon?: ReactNode;\n  /** What to do about it, BELOW the hint: keksdose's query-state cards (Retry), its\n   *  error boundary (Retry / Reload / Go home — pass all three in a fragment, they\n   *  wrap and centre as one row), kastlan's \"Create a rule\". Buttons or links the\n   *  caller renders; the box only places them. */\n  action?: ReactNode;\n  /**\n   * `box` (default): the dashed, padded card that stands in for a whole section.\n   * `inline`: one quiet line with no box — for the empty state INSIDE something that\n   * already has its own frame, where a dashed card would be a box in a box. keksdose\n   * writes that line by hand five times as a muted `<p className=\"py-6 text-center\">`:\n   * the notification inbox (notification-inbox:140), a support thread\n   * (support-thread:144), the assistant (assistant-page:321), the admin support panel\n   * (support-panel:265) and the funding dialog (funding-dialog:89). The icon shrinks\n   * to the text's size and sits before the title, the hint follows on the same line,\n   * and the row wraps only when it must. Centred like the box; `className=\"justify-start\"`\n   * for a list that reads from the start edge (funding-dialog).\n   */\n  variant?: \"box\" | \"inline\";\n  /**\n   * Colour the icon and the title: `danger` for an error standing where the content\n   * should be — kastlan's ErrorState (shared/components/feedback/error-state.tsx) and\n   * its error boundary's fallback (error-boundary.tsx:16), both a red triangle over a\n   * message — and `success` for an empty state that is GOOD news, kastlan's \"No defects\n   * recorded for this room\" (handover defects-step.tsx:142, a green check). Left out,\n   * both stay muted. The hint stays muted either way: it is the explanation, not the\n   * verdict.\n   */\n  tone?: \"danger\" | \"success\";\n  /**\n   * `inline` only (0.11.0). `sm`: 12px, start-aligned and tight (`py-1`) — the empty\n   * line INSIDE a detail panel, under a panel heading and among `text-xs` rows, where\n   * the default's 14px centred line with `py-4` read as a section of its own.\n   * keksdose's holdings panel (holdings-panel:563), asset-loan panel\n   * (asset-loan-panel:108) and loan-payment panel (loan-payment-panel:191) each wrote\n   * `className=\"justify-start py-1\"` over it and still got body-size text. Default `md`,\n   * the look it had. Ignored by the box.\n   */\n  size?: \"sm\" | \"md\";\n}\n\nconst EMPTY_STATE_TONE: Record<\"danger\" | \"success\", string> = {\n  danger: \"text-[var(--danger)]\",\n  success: \"text-[var(--success)]\",\n};\n\nexport function EmptyState({\n  title,\n  hint,\n  icon,\n  action,\n  headingAs,\n  variant = \"box\",\n  tone,\n  size = \"md\",\n  className,\n  ...rest\n}: EmptyStateProps) {\n  const Title = headingAs ?? \"div\";\n  const toneClass = tone ? EMPTY_STATE_TONE[tone] : undefined;\n  const hasHint = hint != null && hint !== false && hint !== \"\";\n  if (variant === \"inline\") {\n    const sm = size === \"sm\";\n    return (\n      <div\n        {...rest}\n        className={cn(\n          \"flex flex-wrap items-center text-[var(--text-muted)]\",\n          sm\n            ? \"justify-start gap-x-1.5 gap-y-0.5 py-1 text-start text-xs\"\n            : \"justify-center gap-x-2 gap-y-1 py-4 text-center text-sm\",\n          className,\n        )}\n      >\n        {icon != null && (\n          <span\n            aria-hidden\n            className={cn(\"flex text-[var(--text-placeholder)]\", sm ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\", toneClass)}\n          >\n            {icon}\n          </span>\n        )}\n        {/* No weight of its own: one muted line is what these sites were, and a\n            bold title would turn a quiet \"nothing here\" into a heading. */}\n        <Title className={cn(sm ? \"text-xs\" : \"text-sm\", toneClass)}>{title}</Title>\n        {hasHint && <span className=\"text-xs\">{hint}</span>}\n        {action != null && <span className=\"flex flex-wrap items-center gap-2\">{action}</span>}\n      </div>\n    );\n  }\n  return (\n    <div\n      {...rest}\n      className={cn(\n        \"flex flex-col items-center justify-center rounded-lg border border-dashed border-[var(--border-strong)] bg-[var(--bg-surface-2)] px-4 py-10 text-center text-sm text-[var(--text-muted)]\",\n        className,\n      )}\n    >\n      {icon != null && (\n        <div aria-hidden className={cn(\"mb-3 text-[var(--text-placeholder)] [&_svg]:size-8\", toneClass)}>\n          {icon}\n        </div>\n      )}\n      {/* `text-sm`: a heading keeps the box's size, not whatever a stylesheet gives h2. */}\n      <Title className={cn(\"text-sm font-medium text-[var(--text-secondary)]\", toneClass)}>{title}</Title>\n      {hasHint && <div className=\"mt-1 text-xs\">{hint}</div>}\n      {action != null && (\n        <div className=\"mt-4 flex flex-wrap items-center justify-center gap-2\">{action}</div>\n      )}\n    </div>\n  );\n}\n\n/** One tab of a {@link Tabs} strip. */\nexport interface TabItem<T extends string> {\n  id: T;\n  /** A ReactNode so a tab can pair an icon with text. */\n  label: ReactNode;\n  /** Optional trailing node (e.g. a count pill). */\n  badge?: ReactNode;\n  /** Marks a tab that IS a route — see {@link TabsProps}. */\n  href?: string;\n  /** Leading decoration: an icon, or the colour swatches of the lines this tab\n   *  draws in a chart above the strip. Hidden from assistive tech — it repeats\n   *  what the label says, or it says something the label must say instead. */\n  icon?: ReactNode;\n  /** A second, smaller line under the label — the one fact that tells two tabs\n   *  with similar labels apart (\"80 km/h\", \"Level 3\"). Part of the tab's name. */\n  detail?: ReactNode;\n  /** A tab that exists as a slot with nothing in it yet, drawn with a dashed\n   *  outline so a gap in a sequence looks like a gap. Visual only: say \"empty\" in\n   *  the label or `detail` if a screen reader needs to know. */\n  empty?: boolean;\n  /** `false` keeps this one tab when the strip has `onRemove` — the one sheet a\n   *  workbook cannot be without. Default: removable. */\n  removable?: boolean;\n  /** Plain-text name for the labels the strip composes about this tab (\"Remove\n   *  …\"), for when `label` is not a string. Default: `label` if it is a string,\n   *  else the id. */\n  name?: string;\n}\n\n/** The strings the strip renders on its own behalf — only when it can add or\n *  remove tabs. */\nexport interface TabsLabels {\n  /** The \"add\" button's visible text when the caller gives no `addLabel`. */\n  add: string;\n  /** Accessible name of a tab's × — \"Remove <tab>\". */\n  remove: (tab: string) => string;\n}\n\nexport const DEFAULT_TABS_LABELS: TabsLabels = {\n  add: \"Add tab\",\n  remove: (tab) => `Remove ${tab}`,\n};\n\n/**\n * The strip's own props sit on a `<div>`: the tablist IS the root element, so anything\n * a caller hangs on it — a `data-tour` anchor for the kit's guided tour, a test id, an\n * `aria-describedby` — lands there. `onChange` is omitted from the div's props because\n * this component's `onChange` hands over the chosen TAB ID, not a DOM event, and\n * `children` because the strip renders `tabs` — a caller who wants a PANEL wires it up\n * through `panelId`, which is the whole point of that prop.\n */\nexport interface TabsProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\"> {\n  /** `label` is a ReactNode so tabs can pair an icon with text; `badge` is an\n   *  optional trailing node (e.g. a count pill). `href` marks a tab that IS a route:\n   *  it renders as an anchor so it can be middle-/⌘-clicked into a new tab (Keksdose\n   *  feedback #451), while a plain click still goes through `onChange` and stays\n   *  client-side. Tabs that only flip local state leave it unset — a link to a URL\n   *  that does not select the tab would be worse than no link. */\n  tabs: TabItem<T>[];\n  active: T;\n  onChange: (id: T) => void;\n  className?: string;\n  /** Let the strip WRAP onto as many rows as it needs below `md`, instead of\n   *  scrolling sideways — for a strip carrying more tabs than fit on a phone row.\n   *  Keksdose live #262: ten reports on a 406px screen showed about three, and the\n   *  round-2 answer (a <select> below `md`) cost a tap to open and a tap to choose.\n   *  *\"I would rather keep the tabs but have multirow tabs depending on the screen\n   *  size, I will not loose the function to see all reports at once and navigate by\n   *  single click rather by double click.\"*\n   *\n   *  The active MARKER has to change with the layout, which is why this cannot be\n   *  done from a call site with a `className`: the default marker is a `border-b-2`\n   *  underline riding the container's own bottom rule, and a tab sitting in a row\n   *  that does not touch that rule cannot wear it — every row but the last would\n   *  show a stray line floating mid-strip, and `-mb-px` would pull each chip a\n   *  pixel into the row beneath it. A wrapped strip marks the active tab with a\n   *  filled brand chip instead, which is also the only thing findable at a glance\n   *  among ten same-weight labels on three rows.\n   *\n   *  From `md` up NOTHING changes: same single-line underline strip, same paddings,\n   *  same colours as every other strip in the app.\n   *\n   *  Opt-in on purpose. The three-tab strips (invoices, statements, bank imports)\n   *  already fit a phone row, and turning those into chips would be an unrequested\n   *  redesign of three other pages. */\n  wrap?: boolean;\n  /**\n   * Accessible name for the `role=\"tablist\"` container. Every tab carries its own\n   * text, so this names the GROUP, not the tabs; leave it unset where a visible\n   * heading immediately above already does that job.\n   *\n   * @deprecated Pass `aria-label` instead. This kit had three spellings for one idea\n   * — `ariaLabel`, `aria-label` and this `label` — and settled on the DOM one, which\n   * is also the one that arrives for free now that the strip spreads its rest props.\n   * `label` still works and is unchanged; it names the strip only when `aria-label`\n   * is absent.\n   */\n  label?: string;\n  /**\n   * `id` of the element the caller renders the open tab's content into — the missing\n   * half of `role=\"tab\"`. A tab that controls nothing is a tab in name only: a screen\n   * reader announces \"tab, 2 of 5\" and then has no way to take the user to what it\n   * opened, and no way back.\n   *\n   * **This component does not render the panel, on purpose.** `Tabs` is the STRIP; the\n   * content lives wherever the caller put it — three Keksdose pages render it in a\n   * sibling `<Card>`, one renders it through a router outlet, and a tab can BE a route\n   * (`href`), in which case the panel is a whole page this component never sees.\n   * Wrapping `children` here would mean either moving that content into the strip's\n   * subtree — a layout change on every page that uses tabs — or shipping a wrapper\n   * that only some callers could use. So the two halves are joined by an id instead.\n   *\n   * Wire the other end yourself:\n   *\n   * ```tsx\n   * <Tabs tabs={tabs} active={active} onChange={setActive} panelId=\"report-panel\" />\n   * <div id=\"report-panel\" role=\"tabpanel\" aria-labelledby=\"report-panel-tab\" tabIndex={-1}>\n   * ```\n   *\n   * `aria-controls` goes on the OPEN tab only, and `${panelId}-tab` is its id — the\n   * closed tabs' panels are not in the document, and a dangling `aria-controls`\n   * describes a tab as opening something that is not there.\n   */\n  panelId?: string;\n  /**\n   * Makes the tabs removable: an × on the OPEN tab, and Delete on a focused tab\n   * (only on the open one with `removeOn=\"active\"`).\n   *\n   * The × is on the open tab only — a row of tabs each carrying one is a row of\n   * things to hit by accident, and the tab you can remove should be the one you\n   * are looking at — but its room is reserved on every removable tab, so opening a\n   * tab never widens it and never pushes the rest of the strip along (lenkbank\n   * feedback #72). It is named \"Remove <tab>\" and is not a tab stop of its own: the\n   * strip stays one stop, and the keyboard path is Delete (announced through\n   * `aria-keyshortcuts`), which removes whichever tab has focus (see `removeOn`).\n   *\n   * The strip only ASKS: it calls this, and the tab goes when the caller drops it\n   * from `tabs` — after a confirmation, a request, whatever it needs. When it does,\n   * focus that was on the removed tab (or its ×) moves to the open tab if the\n   * removed one was open, else to its neighbour, instead of falling to the page.\n   */\n  onRemove?: (id: T) => void;\n  /**\n   * Which tabs the Delete key removes.\n   *\n   * - `\"every\"` (default): any focused removable tab — the ARIA pattern's reading.\n   * - `\"active\"`: only the OPEN tab, the same one that wears the ×. For a strip whose\n   *   remove is immediate and unconfirmed (lenkbank's sheet tabs delete a measurement\n   *   sheet at once), so arrowing across the strip and pressing Delete cannot take\n   *   out a sheet the user is not looking at. Delete on a closed tab does nothing,\n   *   and only the open tab announces the shortcut (`aria-keyshortcuts`).\n   *\n   * Either way the × is drawn on the open tab only and its room stays reserved on\n   * every removable tab, so the strip never relayouts when the selection moves.\n   */\n  removeOn?: \"every\" | \"active\";\n  /** Renders an \"add\" button after the last tab, outside the tablist — it is an\n   *  action, not a tab, and a tablist may own only tabs. */\n  onAdd?: () => void;\n  /** The add button's text. Say what is added — \"Add loop\", \"Add report\" says\n   *  more than \"Add\". Default: `tabs.add` from the {@link UiKitProvider}. */\n  addLabel?: string;\n  /** Overrides for this strip's strings. See {@link TabsLabels}. */\n  labels?: Partial<TabsLabels>;\n  /** An add or a remove is in flight: the × and the add button are disabled and\n   *  Delete is ignored, so a double click cannot remove two tabs. Nothing moves. */\n  busy?: boolean;\n  /**\n   * `\"vertical\"`: the same strip as a SIDE NAV — one item per row, the open one\n   * filled, ↑/↓ walking it (Home/End as before) and `aria-orientation=\"vertical\"` on\n   * the tablist. For keksdose's admin page and settings page, which each hand-built\n   * the identical sidebar with none of this strip's keyboard, roving tab stop or\n   * routed-`href` handling. Everything else — `href` tabs, `badge`, `panelId`,\n   * `onRemove`, `onAdd` — means exactly what it means on the horizontal strip; the\n   * badge moves to the row's end.\n   *\n   * **On a phone ({@link PHONE_QUERY}) it becomes the horizontal strip**, `wrap` and\n   * all, rather than staying a column. A side nav only works beside its content; on\n   * a phone it has to go ABOVE it, and eight full-width rows there push the panel\n   * the user picked below the fold on every visit — the two keksdose pages both\n   * collapsed theirs into a scrolling row by hand for exactly that reason. The\n   * orientation is switched in JavaScript, not with `md:` classes, so the\n   * `aria-orientation` a screen reader hears and the arrow keys that work always\n   * match the layout on screen. The caller's own two-column layout has to stack at\n   * the same breakpoint (`md:grid-cols-[14rem_1fr]`).\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\n// The two shapes are written out as whole strings rather than as one base plus a\n// pile of `md:` overrides. The unwrapped pair is character-for-character what the\n// three strips that do not opt in get, so those cannot drift; the wrapped pair is\n// authored from scratch, so no unprefixed utility has to be beaten by its own `md:`\n// twin through tailwind-merge. The only ordering this relies on is Tailwind's own:\n// unprefixed utilities are emitted first, then `md:` — so from 768px up the wrapped\n// strip resolves to exactly the paint of the default one. Both themes come free now\n// that the colours are tokens: there is no `md:dark:` tier left to keep in step.\nconst TABLIST_CLASSES =\n  \"flex gap-1 overflow-x-auto overflow-y-hidden border-b border-[var(--border)]\";\n// The side nav. A column of full-width rows with the open one FILLED rather than\n// underlined: an underline under one row of a list reads as a separator, not as a\n// selection. `--bg-active` is the kit's own selected-row fill (the sidebar's), so the\n// admin page's nav and the app's own sidebar mark \"you are here\" the same way.\nconst TABLIST_VERTICAL_CLASSES = \"flex flex-col gap-0.5\";\nconst TAB_VERTICAL_CLASSES =\n  \"flex w-full items-center rounded-md px-3 py-2 text-start text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]\";\nconst TAB_VERTICAL_ACTIVE_CLASSES = \"bg-[var(--bg-active)] text-[var(--text-primary)]\";\nconst TAB_VERTICAL_INACTIVE_CLASSES =\n  \"text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]\";\n\nconst TABLIST_WRAP_CLASSES =\n  \"flex flex-wrap gap-1.5 md:flex-nowrap md:gap-1 md:overflow-x-auto md:overflow-y-hidden md:border-b md:border-[var(--border)]\";\n\n// `max-w-full`: no tab outgrows its strip. A sheet's `detail` line (\"Spurstangenkraft\n// links · … · 31 Punkte\") made one tab 448px wide in a 390px strip, and a tab wider\n// than the strip cannot be scrolled into view — its end was simply off screen\n// (lenkbank L3). The label and detail truncate inside it instead; see `inner`.\nconst TAB_CLASSES =\n  \"max-w-full whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]\";\nconst TAB_ACTIVE_CLASSES = \"border-[var(--text-primary)] text-[var(--text-primary)]\";\nconst TAB_INACTIVE_CLASSES =\n  \"border-transparent text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:border-[var(--border-strong)]\";\n\n// Below `md`, a chip: `py-2` on `text-xs` is exactly 32px tall, and ten German\n// report labels then land in three rows on a 406px screen (four at `text-sm`). The\n// active fill is the app's own selected pair, `--brand` / `--brand-contrast`: the\n// palette store writes both halves of it together for every preset and both themes,\n// so the contrast holds everywhere (5.1:1 at its worst preset) without a hard-coded\n// colour. Inactive chips take the raised card surface with full-strength body text —\n// all ten have to stay readable; it is the FILL, not the text weight, that says\n// which one is open.\nconst TAB_WRAP_CLASSES =\n  \"max-w-full whitespace-nowrap rounded-md px-2.5 py-2 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)] md:rounded-none md:border-b-2 md:-mb-px md:bg-transparent md:px-3 md:py-2 md:text-sm\";\nconst TAB_WRAP_ACTIVE_CLASSES =\n  \"bg-[var(--brand)] text-[var(--brand-contrast)] md:border-[var(--text-primary)] md:text-[var(--text-primary)]\";\nconst TAB_WRAP_INACTIVE_CLASSES =\n  \"bg-[var(--bg-surface)] text-[var(--text-primary)] md:border-transparent md:text-[var(--text-muted)] md:hover:border-[var(--border-strong)] md:hover:text-[var(--text-secondary)]\";\n\n// The add/remove chrome. The × reserves its gutter on every removable tab (see\n// `onRemove`); `md:pe-8` is spelled out because the wrapped chip's `md:px-3` would\n// otherwise hand the gutter back from 768px up.\nconst TAB_REMOVABLE_CLASSES = \"pe-8 md:pe-8\";\nconst TAB_EMPTY_CLASSES = \"-mx-1.5 rounded border border-dashed border-[var(--border-strong)] px-1.5\";\nconst TAB_ADD_CLASSES =\n  \"inline-flex items-center gap-1 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium text-[var(--text-muted)] transition-colors hover:text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)] disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4\";\nconst TAB_ADD_WRAP_CLASSES = \"px-2.5 text-xs md:px-3 md:text-sm\";\n// `relative`: the phone's visually hidden label needs a positioned ancestor (see the\n// sr-only rule in CONTRIBUTING); `max-md:px-2` squares the lone \"+\".\nconst TAB_ADD_PHONE_CLASSES = \"relative max-md:px-2\";\n\n\nexport function Tabs<T extends string>({\n  tabs,\n  active,\n  onChange,\n  className,\n  wrap = false,\n  label,\n  panelId,\n  onRemove,\n  removeOn = \"every\",\n  onAdd,\n  addLabel,\n  labels,\n  busy = false,\n  orientation = \"horizontal\",\n  \"aria-label\": ariaLabel,\n  ...rest\n}: TabsProps<T>) {\n  const text = useKitLabels(\"tabs\", DEFAULT_TABS_LABELS, labels);\n  // See `orientation`: a vertical strip is the horizontal one on a phone.\n  const phone = useMediaQuery(PHONE_QUERY, false);\n  const vertical = orientation === \"vertical\" && !phone;\n  const stripRef = useRef<HTMLDivElement>(null);\n  const fade = useStripFade(stripRef);\n  // The OPEN tab is scrolled into the strip whenever it changes — on mount too, for a\n  // deep link to the seventh report. A selection behind the cut edge was the worst\n  // case of the overflow above: the one tab the panel below belongs to, sliced to\n  // \"80 km,\" under the add button. Only the strip scrolls (`scrollBy` on it, not\n  // `scrollIntoView`, which would scroll the page as well), and only as far as needed\n  // to clear the fade.\n  useLayoutEffect(() => {\n    const strip = stripRef.current;\n    const tab = strip?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]');\n    if (strip && tab) scrollIntoStrip(strip, tab);\n  }, [active]);\n  const isRemovable = (tab: TabItem<T>) => onRemove !== undefined && tab.removable !== false;\n  // Whether Delete reaches this tab: every removable tab, or only the open one.\n  const deletesOnKey = (tab: TabItem<T>) =>\n    isRemovable(tab) && (removeOn === \"every\" || tab.id === active);\n  const nameOf = (tab: TabItem<T>) =>\n    tab.name ?? (typeof tab.label === \"string\" ? tab.label : tab.id);\n\n  // Where focus goes once a removal the strip asked for has happened. The caller\n  // owns `tabs` and may take its time (a confirmation, a request), so this waits\n  // for the id to actually leave the list rather than guessing at the moment.\n  const pendingFocus = useRef<{ removed: T; wasActive: boolean; neighbour?: T } | null>(null);\n  const requestRemove = (id: T) => {\n    const index = tabs.findIndex((t) => t.id === id);\n    pendingFocus.current = {\n      removed: id,\n      wasActive: id === active,\n      neighbour: (tabs[index + 1] ?? tabs[index - 1])?.id,\n    };\n    onRemove?.(id);\n  };\n  useLayoutEffect(() => {\n    const pending = pendingFocus.current;\n    if (!pending || tabs.some((t) => t.id === pending.removed)) return;\n    pendingFocus.current = null;\n    const strip = stripRef.current;\n    if (!strip) return;\n    // Only focus that fell out of the strip with the removed tab is ours to place.\n    // If the user has moved on — into the panel, into a dialog — leave it there.\n    const focused = document.activeElement;\n    if (focused && focused !== document.body && !strip.contains(focused)) return;\n    // The removed tab was open: focus follows the caller's new selection, which is\n    // also the strip's tab stop. It was not: its neighbour, as the ARIA pattern has it.\n    const target =\n      !pending.wasActive && tabs.some((t) => t.id === pending.neighbour)\n        ? pending.neighbour\n        : active;\n    const index = tabs.findIndex((t) => t.id === target);\n    strip.querySelectorAll<HTMLElement>('[role=\"tab\"]')[index]?.focus();\n  }, [tabs, active]);\n\n  // Arrow keys walk the strip in DOM order (ARIA tabs pattern), which is what keeps\n  // a WRAPPED strip navigable: the rows flow in DOM order too, so Right off the end\n  // of row one lands on the first chip of row two rather than nowhere. Home/End jump\n  // to the ends. Focus only — activation stays on click/Enter/Space, because a tab\n  // here can be a real route and moving focus must not navigate.\n  //\n  // On the TABS, not on the tablist. The container carried it, which left a `<div>`\n  // wearing an interactive role and a key handler while being unfocusable —\n  // `jsx-a11y/interactive-supports-focus`, and the only instance of it left in `src/`.\n  // The fix that rule wants is `tabIndex` on the div; the fix the pattern wants is\n  // the handler on the elements that are natively focusable and actually receive the\n  // keystroke. Those are the tabs, so the warning goes away by being right rather\n  // than by being satisfied.\n  const onTabKeyDown = (e: KeyboardEvent<HTMLElement>, tab: TabItem<T>) => {\n    // Delete removes the FOCUSED tab (the ARIA pattern's optional key for deletable\n    // tabs) — the keyboard's way to the × that is not a tab stop. `busy` swallows it\n    // rather than letting it fall through to the page. With `removeOn=\"active\"` only\n    // the open tab answers; a closed one lets the key pass untouched.\n    if (e.key === \"Delete\" && deletesOnKey(tab)) {\n      e.preventDefault();\n      if (!busy) requestRemove(tab.id);\n      return;\n    }\n    // Along the reading direction: the strip is a flex row, so in RTL the NEXT tab sits\n    // to the left, and ArrowLeft has to reach it. A vertical strip answers ↑/↓ instead\n    // — and ONLY those, as the pattern has it: ←/→ are left to the page, where a side\n    // nav's neighbour (the panel) may well want them.\n    const step: 1 | -1 | 0 = vertical\n      ? e.key === \"ArrowDown\"\n        ? 1\n        : e.key === \"ArrowUp\"\n          ? -1\n          : 0\n      : horizontalStep(e.key, e.currentTarget);\n    if (step === 0 && e.key !== \"Home\" && e.key !== \"End\") return;\n    const strip = e.currentTarget.closest('[role=\"tablist\"]');\n    if (!strip) return;\n    const items = Array.from(strip.querySelectorAll<HTMLElement>('[role=\"tab\"]'));\n    const from = items.indexOf(e.currentTarget);\n    if (from === -1) return;\n    e.preventDefault();\n    const to =\n      e.key === \"Home\"\n        ? 0\n        : e.key === \"End\"\n          ? items.length - 1\n          : (from + step + items.length) % items.length;\n    items[to]?.focus();\n  };\n  const tablist = (\n    <div\n      // Before the role and the name: a caller's arbitrary attribute is welcome on the\n      // strip, but a `role` or an `aria-label` arriving through a spread props object\n      // must not be able to unmake the tablist the tabs below are registered against.\n      {...rest}\n      ref={stripRef}\n      role=\"tablist\"\n      // The DOM spelling wins over the deprecated `label`; see {@link TabsProps}.\n      aria-label={ariaLabel ?? label}\n      // Only when vertical: `horizontal` is the tablist's implicit value, and the\n      // attribute on every existing strip would be noise in every snapshot of them.\n      aria-orientation={vertical ? \"vertical\" : undefined}\n      // Merged over a caller's own style rather than replacing it; see useStripFade.\n      // `data-overflow` names the cut ends in reading-direction terms, for a caller's\n      // own affordance (a scroll button) and for tests, which cannot read the mask.\n      style={fade.mask ? { ...rest.style, maskImage: fade.mask, WebkitMaskImage: fade.mask } : rest.style}\n      data-overflow={fade.overflow}\n      // With an add button the strip gains an outer box, and `className` goes there\n      // — it is the box a caller's margin or width is meant for.\n      className={cn(\n        vertical ? TABLIST_VERTICAL_CLASSES : wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES,\n        onAdd ? \"min-w-0\" : className,\n      )}\n    >\n      {tabs.map((tab) => {\n        const isActive = tab.id === active;\n        const removable = isRemovable(tab);\n        // Written once and worn by either tag below, so a routed tab and a\n        // state-only tab stay indistinguishable to the eye and to a screen reader.\n        const shared = {\n          role: \"tab\" as const,\n          \"aria-selected\": isActive,\n          // Roving tabindex: the whole strip is ONE stop in the page's tab order, and\n          // it is the open tab. Ten report tabs otherwise cost ten Tab presses to step\n          // over on the way to the table below them (live #262's strip is the extreme\n          // case, but every strip in the app paid it).\n          //\n          // The stop follows the SELECTION, not the focus. Arrowing is a look around —\n          // activation here is manual, because a tab can be a real route — so re-\n          // pointing the stop at a report the user only arrowed past would hand the\n          // strip back on the next visit in a state they never chose. The cost is that\n          // Tab out and back returns to the open tab rather than to the last one\n          // looked at; the ARIA pattern allows either, and this one needs no second\n          // piece of state shadowing `active`.\n          tabIndex: isActive ? 0 : -1,\n          // Only the open tab: see `panelId`.\n          \"aria-controls\": isActive ? panelId : undefined,\n          id: isActive && panelId ? `${panelId}-tab` : undefined,\n          \"aria-keyshortcuts\": deletesOnKey(tab) ? \"Delete\" : undefined,\n          onKeyDown: (e: KeyboardEvent<HTMLElement>) => onTabKeyDown(e, tab),\n          className: vertical\n            ? cn(\n                TAB_VERTICAL_CLASSES,\n                isActive ? TAB_VERTICAL_ACTIVE_CLASSES : TAB_VERTICAL_INACTIVE_CLASSES,\n                removable && \"pe-8\",\n              )\n            : cn(\n                wrap ? TAB_WRAP_CLASSES : TAB_CLASSES,\n                wrap\n                  ? isActive\n                    ? TAB_WRAP_ACTIVE_CLASSES\n                    : TAB_WRAP_INACTIVE_CLASSES\n                  : isActive\n                    ? TAB_ACTIVE_CLASSES\n                    : TAB_INACTIVE_CLASSES,\n                removable && TAB_REMOVABLE_CLASSES,\n              ),\n        };\n        const inner = (\n          <span\n            className={cn(\n              // In a side nav the row is the full width, so the label takes it and a\n              // badge lands at the row's end, where a column of counts lines up.\n              vertical ? \"flex min-w-0 flex-1 items-center gap-1.5\" : \"inline-flex max-w-full min-w-0 items-center gap-1.5\",\n              tab.empty && TAB_EMPTY_CLASSES,\n            )}\n          >\n            {tab.icon != null && (\n              <span aria-hidden className=\"inline-flex shrink-0 items-center gap-0.5\">\n                {tab.icon}\n              </span>\n            )}\n            {tab.detail != null ? (\n              // `min-w-0` + `truncate` on each line: capped by the tab's `max-w-full`, a\n              // long detail ends in an ellipsis. The whole text stays the tab's name.\n              <span className=\"flex min-w-0 flex-col items-start text-start\">\n                <span className=\"max-w-full truncate\">{tab.label}</span>\n                {/* A separator for the NAME only — whitespace between flex items is\n                    not drawn, and without it the two lines ran together into one\n                    word for a screen reader (\"80 km/hloop 2\"). */}{\" \"}\n                <span\n                  className={cn(\n                    \"max-w-full truncate text-[11px] font-normal leading-tight text-[var(--text-muted)]\",\n                    // On a wrapped strip's filled chip (below `md`) the muted grey\n                    // was dark text on the brand fill — \"loop 2\" all but vanished\n                    // under the one label that most needed reading. It takes the\n                    // chip's own ink instead, as the label and the × already do.\n                    wrap && isActive && !vertical && \"text-[var(--brand-contrast)] md:text-[var(--text-muted)]\",\n                  )}\n                >\n                  {tab.detail}\n                </span>\n              </span>\n            ) : (\n              tab.label\n            )}\n            {tab.badge != null ? (\n              vertical ? <span className=\"ms-auto flex shrink-0 items-center\">{tab.badge}</span> : tab.badge\n            ) : null}\n          </span>\n        );\n        const element = tab.href ? (\n          <a\n            key={tab.id}\n            {...shared}\n            href={tab.href}\n            draggable={false}\n            onClick={(e) => {\n              // Middle-, ⌘/Ctrl-, Shift- and Alt-click belong to the browser\n              // (feedback #451); only the plain left click is ours to cancel and\n              // route through `onChange`, which keeps the switch client-side.\n              if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n              e.preventDefault();\n              onChange(tab.id);\n            }}\n            // A <button> tab activated on Space; an anchor does not, so becoming a\n            // link (feedback #451) would have quietly cost keyboard users the tab\n            // strip. Enter is deliberately untouched — it is the anchor's own\n            // default and already arrives at `onChange` through the click handler\n            // above, so handling it here too would switch tabs twice. Same three\n            // lines the mobile row card carries, for the same reason; the rejected\n            // alternative — keeping a button and faking the middle click with\n            // window.open — is what the whole item is moving away from.\n            //\n            // Composed with the strip's arrow-key walk rather than replacing it: this\n            // prop overrides the one in `shared`, and an anchor tab that lost the\n            // arrows would be a strip that is navigable only where it is not a link.\n            onKeyDown={(e) => {\n              onTabKeyDown(e, tab);\n              if (e.defaultPrevented || e.key !== \" \") return;\n              e.preventDefault();\n              onChange(tab.id);\n            }}\n          >\n            {inner}\n          </a>\n        ) : (\n          <button key={tab.id} {...shared} onClick={() => onChange(tab.id)}>\n            {inner}\n          </button>\n        );\n        if (!removable) return element;\n        return (\n          // The × cannot go INSIDE the tab: a button in a button is invalid HTML, and\n          // a tab's children are presentational, so a reader would flatten it into the\n          // tab's name. It sits beside the tab, over the gutter the tab reserves.\n          <div key={tab.id} className={cn(\"relative flex max-w-full\", !vertical && \"shrink-0\")}>\n            {element}\n            {isActive && (\n              <IconButton\n                size=\"2xs\"\n                tone=\"danger\"\n                // Not a tab stop: the strip is one, and Delete is the keyboard's path.\n                // Still a named button, so a screen reader's cursor and a touch\n                // reader's swipe both reach it.\n                tabIndex={-1}\n                type=\"button\"\n                aria-label={text.remove(nameOf(tab))}\n                disabled={busy}\n                onClick={() => requestRemove(tab.id)}\n                className={cn(\n                  \"absolute inset-y-0 end-1 my-auto\",\n                  // On a wrapped strip's filled chip the quiet grey would vanish into\n                  // the brand fill below `md`.\n                  wrap && \"text-[var(--brand-contrast)] md:text-[var(--text-placeholder)]\",\n                )}\n              >\n                <X />\n              </IconButton>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n  if (!onAdd) return tablist;\n  if (vertical) {\n    // Under the column, not beside it, and with no rule to carry on: a side nav has none.\n    return (\n      <div className={cn(\"flex flex-col gap-0.5\", className)}>\n        {tablist}\n        <button type=\"button\" onClick={onAdd} disabled={busy} className={TAB_ADD_CLASSES}>\n          <Plus aria-hidden />\n          {addLabel ?? text.add}\n        </button>\n      </div>\n    );\n  }\n  return (\n    <div\n      className={cn(\n        wrap ? \"flex flex-wrap items-end gap-1.5 md:flex-nowrap md:gap-0\" : \"flex items-end\",\n        className,\n      )}\n    >\n      {tablist}\n      {/* Outside the tablist: an action, not a tab — and a tablist may own only\n          tabs. The rule under the strip carries on beneath it. */}\n      <div\n        className={cn(\n          \"flex flex-1 items-center\",\n          wrap\n            ? \"md:self-stretch md:border-b md:border-[var(--border)]\"\n            : \"self-stretch border-b border-[var(--border)]\",\n        )}\n      >\n        <button\n          type=\"button\"\n          onClick={onAdd}\n          disabled={busy}\n          className={cn(TAB_ADD_CLASSES, wrap ? TAB_ADD_WRAP_CLASSES : TAB_ADD_PHONE_CLASSES)}\n        >\n          <Plus aria-hidden />\n          {/* Below md a scrolling strip keeps the room for tabs: the label is visually\n              hidden and the \"+\" carries it as its name. Beside \"+ Add loop\" a 390px strip\n              showed the open tab and a sliver of the next (showcase audit). A wrapping\n              strip has its own row there, so it keeps the label. */}\n          <span className={wrap ? undefined : \"max-md:sr-only\"}>{addLabel ?? text.add}</span>\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["FLOATING_LABEL_STATIC","Input","Select","Textarea"]}
+{"version":3,"sources":["../../src/components/ui.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { ChevronDown, Eye, EyeOff, HelpCircle, Plus, X } from \"lucide-react\";\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, ChangeEvent, ComponentPropsWithoutRef, CSSProperties, InputHTMLAttributes, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref, SelectHTMLAttributes, TextareaHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { scrollIntoStrip, useStripFade } from \"../lib/strip-fade\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { Tooltip, type TooltipSide } from \"./tooltip\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, replacingClick, routerLinkNavigation } from \"./text-link\";\nimport { useCommitReason } from \"./write-lock\";\nimport { mergeDescribedBy } from \"./choice-parts\";\nimport {\n  EndHintRow,\n  FieldCaption,\n  LockedReason,\n  useFieldHint,\n  useLockReason,\n  FLOATING_LABEL_STATIC,\n  STATIC_LABEL_TYPE,\n  type FieldHintParts,\n} from \"./field-parts\";\n\n// The static label lives in field-parts since 0.23 (it is what the field anatomy\n// there draws, and field-parts must not import this file); public from here as before.\nexport { FieldLabel, FLOATING_LABEL_STATIC } from \"./field-parts\";\nexport type { FieldLabelProps } from \"./field-parts\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\" | \"brand\" | \"link\";\n\n// Shared base ring for every button-styled element. Kept as a named const so the\n// <Button> component and the {@link buttonClasses} helper draw from one source and\n// can never drift apart.\nconst BUTTON_BASE =\n  \"inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed\";\n\nexport type ButtonSize = \"sm\" | \"md\";\n\n// Box geometry per size, split out of the base so the two cannot be merged into one\n// string that a size then has to fight. `md` is the pre-0.8.0 look, unchanged. `sm` is\n// the compact secondary action keksdose repeats by hand as `px-2 py-1 text-xs` (and\n// `px-2 py-0.5 text-xs`) on the buttons in a toolbar or a table header; one rung is\n// enough, so the two spellings meet at `py-1`. There is no `lg`: no app has asked for\n// a bigger text button (IconButton's `lg` is a touch target, not a text size). The\n// variant map comes AFTER the size, so `link`'s `p-0` still wins at either size.\nconst BUTTON_SIZES: Record<ButtonSize, string> = {\n  md: \"gap-2 px-3 py-2 text-sm\",\n  sm: \"gap-1.5 px-2 py-1 text-xs\",\n};\n\n// Warm, palette-token-driven so buttons blend with the fields + cards in every theme.\n// Actions default to a warm bordered look (primary = filled warm chip, secondary =\n// outline); `brand` stays the solid accent for the rare strong CTA; `danger` takes the\n// semantic `--danger` family (destructive semantics), so a consumer can re-point the\n// destructive hue instead of inheriting a hard-coded red. Focus rings follow each\n// variant's own accent: brand for the four neutral ones, danger for `danger`.\nconst buttonVariantClasses: Record<ButtonVariant, string> = {\n  primary:\n    \"border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-primary)] hover:bg-[var(--border)] focus:ring-[var(--brand)]\",\n  secondary:\n    \"border border-[var(--border)] bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus:ring-[var(--brand)]\",\n  ghost:\n    \"bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus:ring-[var(--brand)]\",\n  danger:\n    \"bg-[var(--danger)] text-[var(--danger-contrast)] hover:bg-[var(--danger-hover)] focus:ring-[var(--danger-border-strong)]\",\n  brand:\n    \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)] focus:ring-[var(--brand)]\",\n  // A text link that is still a `<button>` — keksdose's six hand-rolled\n  // `<button className=\"text-brand underline\">` sites (\"Resend code\", \"Show all\",\n  // \"Undo\" in a toast…), which act rather than navigate and so must not be anchors.\n  // The box padding goes (`p-0`) so it sits in a sentence at the text's own size, but\n  // the base's `focus:ring-2` stays: those copies had `outline-none` and no ring, so\n  // a keyboard user tabbing onto them saw nothing at all. `rounded-sm` keeps that\n  // ring hugging the word instead of drawing a pill round it.\n  link:\n    \"rounded-sm p-0 bg-transparent text-[var(--brand)] underline-offset-4 hover:underline focus:ring-[var(--brand)]\",\n};\n\n/**\n * The text colour of a `link` or `ghost` button, over the variant's own.\n *\n * `muted` is the QUIET link keksdose hand-rolls in six places (tours-page:321's \"Mark\n * undone\", transaction-fields:176/215's \"Add line\" / \"Fill total\",\n * invoice-lines-table:376, invoice-review:464): secondary text that darkens to the\n * body colour under the pointer, for an action that must be findable but not compete\n * with the brand-coloured one beside it. `danger` is the same quiet look turning\n * `--danger` on hover — transaction-editor:401's \"Remove split\", which is a text\n * action that destroys something.\n *\n * A `tone` rather than a `link-muted` variant, because it is the axis IconButton\n * already has (`tone=\"muted\"`, `tone=\"danger\"`, same quiet-until-hover meaning), and\n * because the same two looks are wanted on `ghost`.\n *\n * `danger` also reaches the two NEUTRAL boxed variants, where the box carries it:\n * `secondary` becomes an outlined destructive button (`--danger` text and a\n * `--danger-border` outline, the quiet danger fill on hover) and `primary` a soft one\n * (the quiet fill at rest, solid `--danger` on hover). kastlan's meeting-invitations-\n * tab.tsx \"Remove all\" is `variant=\"secondary\" className=\"text-destructive\"` — a\n * destructive action that must sit in a row of secondary buttons without shouting\n * like the solid `variant=\"danger\"` would, and whose red text alone left the border\n * and hover saying \"neutral\". `muted` stays a text look and does nothing on a box, and\n * `danger`, `brand` and `link`'s own colours are left alone: a tone that recoloured a\n * solid danger or brand button would be a second variant under another name.\n */\nexport type ButtonTone = \"default\" | \"muted\" | \"danger\";\n\nconst BUTTON_TONES: Record<Exclude<ButtonTone, \"default\">, string> = {\n  muted:\n    \"text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:hover:text-[var(--text-secondary)]\",\n  danger:\n    \"text-[var(--text-secondary)] hover:text-[var(--danger)] focus:ring-[var(--danger-border-strong)] disabled:hover:text-[var(--text-secondary)]\",\n};\n\n/** Only the two transparent variants take every tone; see {@link ButtonTone}. */\nconst TONED_VARIANTS = new Set<ButtonVariant>([\"link\", \"ghost\"]);\n\n// `tone=\"danger\"` on the neutral boxed variants — see {@link ButtonTone}. Each string\n// restates every colour the variant sets (border, fill, text, hover, ring) so none of\n// the neutral ones survives the merge.\nconst BUTTON_BOXED_DANGER: Partial<Record<ButtonVariant, string>> = {\n  secondary:\n    \"border-[var(--danger-border)] bg-transparent text-[var(--danger)] hover:bg-[var(--danger-bg)] focus:ring-[var(--danger-border-strong)]\",\n  primary:\n    \"border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)] hover:border-[var(--danger)] hover:bg-[var(--danger)] hover:text-[var(--danger-contrast)] focus:ring-[var(--danger-border-strong)] disabled:hover:border-[var(--danger-border)] disabled:hover:bg-[var(--danger-bg)] disabled:hover:text-[var(--danger)]\",\n};\n\n// `pressed` on a `link`: the brand colour and a heavier weight, which is exactly what\n// lenkbank's \"All speeds\" toggle paints by hand (gear/hysteresis-charts.tsx:482). After\n// the tone, so a pressed muted link is brand, and an unpressed one is quiet grey.\nconst BUTTON_LINK_PRESSED =\n  \"font-medium text-[var(--brand)] hover:text-[var(--brand)] disabled:hover:text-[var(--brand)]\";\n\n/** The second argument of {@link buttonClasses} in its options form. */\nexport interface ButtonClassesOptions {\n  /** See {@link ButtonProps.size}. */\n  size?: ButtonSize;\n  className?: string;\n}\n\n/**\n * Button classes for the rare case where the styling must land on a non-`<button>`\n * element that {@link Button} can't render — e.g. a router `<Link>` or a Radix\n * AlertDialog Action/Cancel (which must stay the Radix element). Everywhere a real\n * button works, prefer `<Button>`. Draws from the same base, size and variant maps as\n * `<Button>`, so the two stay in lockstep.\n *\n * The second argument is either the extra classes (the pre-0.8.0 form) or\n * `{ size, className }` — `buttonClasses(\"secondary\", { size: \"sm\" })` for keksdose's\n * compact toolbar links.\n */\nexport function buttonClasses(\n  variant: ButtonVariant = \"primary\",\n  classNameOrOptions?: string | ButtonClassesOptions,\n): string {\n  const { size = \"md\", className } =\n    typeof classNameOrOptions === \"object\" ? classNameOrOptions : { className: classNameOrOptions };\n  return cn(BUTTON_BASE, BUTTON_SIZES[size], buttonVariantClasses[variant], className);\n}\n\n/**\n * ⚠️ No default `type`: like a native `<button>`, a `Button` inside a `<form>` SUBMITS\n * it unless you pass `type=\"button\"`. Kept native on purpose — a form's own submit\n * button relies on it, and changing the default would silently stop those forms from\n * submitting. Pass `type=\"button\"` for every other action in a form (keksdose had six\n * link buttons submitting their form).\n */\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  /** `md` (default) is the page's action button. `sm` is the compact one — 12px text\n   *  and `px-2 py-1` — for the secondary actions in a toolbar, a card header or a\n   *  table's header row (keksdose writes `px-2 py-1 text-xs` over `secondary` by hand\n   *  there). Every variant takes either size. */\n  size?: ButtonSize;\n  /** In a flex row next to a taller labelled field, fill the field's height so the\n   *  two line up. No effect outside a flex row. */\n  stretch?: boolean;\n  /** The `<button>` element. React 19 passes `ref` to a function component as an\n   *  ordinary prop, so it rides `...rest` onto the element with no `forwardRef` —\n   *  declared here only because `ButtonHTMLAttributes` does not carry it. */\n  ref?: Ref<HTMLButtonElement>;\n  /** Text colour for `link` and `ghost`: `muted` (quiet, body colour on hover) or\n   *  `danger` (quiet, `--danger` on hover). `danger` also makes `secondary` an\n   *  outlined destructive button and `primary` a soft one; ignored by the other\n   *  variants. See {@link ButtonTone}. */\n  tone?: ButtonTone;\n  /**\n   * Make it a toggle button, as {@link IconButton}'s `pressed` does. `true` sets\n   * `aria-pressed=\"true\"` and draws the \"on\" look — on a `link`, the brand colour and a\n   * medium weight; on the boxed variants, the quiet brand fill IconButton uses — and\n   * `false` sets `aria-pressed=\"false\"` with the ordinary look. Left out, no\n   * `aria-pressed` (or the caller's own). For lenkbank's \"All speeds\" text toggle\n   * (gear/hysteresis-charts.tsx:482), which is a hand-rolled `<button aria-pressed>`\n   * swapping two class strings; with `variant=\"link\" tone=\"muted\"` it is this.\n   */\n  pressed?: boolean;\n  /**\n   * Why the action is not available — the button's half of DangerConfirm's\n   * `lockedReason` (kastlan handover-detail-page.tsx:197 locks a signed handover).\n   *\n   * A disabled button that cannot say why is a dead end: the native `disabled` takes it\n   * out of the tab order, so a keyboard user never lands on it, and a pointer gets a\n   * `not-allowed` cursor and nothing else. With a reason the button is `aria-disabled`\n   * instead — still focusable, still hoverable — clicks (and the Enter/Space and form\n   * submission they stand for) do nothing, and the reason is shown in the kit\n   * {@link Tooltip} and attached with `aria-describedby`, so a screen reader hears it\n   * on focus. It wins over `disabled`: passing both keeps the button reachable, which is\n   * the point of giving a reason.\n   *\n   * The description is a `hidden` copy of the reason rather than the bubble itself: the\n   * bubble exists only while hovered or focused once it is portalled, and a description\n   * that comes and goes is read inconsistently. The bubble is kept visual, the way\n   * DangerConfirm keeps its own.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This button COMMITS — it saves, creates, deletes. Under a locked\n   * {@link WriteLockProvider} it is disabled the `disabledReason` way, with the lock's\n   * reason (which wins over a `disabledReason` of its own). No provider, or an\n   * unlocked one: no effect. See {@link WriteLockProvider}.\n   */\n  commit?: boolean;\n  /**\n   * Busy — the save is in flight: a spinner, `aria-busy`, and no second submit.\n   *\n   * kastlan's FormActions (form-actions.tsx:50) disables its submit and swaps in a\n   * `submittingLabel`, so the button jumps width mid-click and a screen reader hears\n   * the name change instead of \"busy\". Here the label STAYS — it is still the\n   * accessible name and still holds the button's width — and the spinner is drawn over\n   * it in the text colour, so nothing beside the button moves.\n   *\n   * The same prop {@link FileButton} has (`pending`), with one difference: this one is\n   * `aria-disabled`, not `disabled`. The button being pressed is the one that has focus,\n   * and a native `disabled` drops that focus to `<body>` the moment the save starts;\n   * clicks, and the Enter that submits a form through it, are swallowed instead.\n   */\n  pending?: boolean;\n  /** Only on the link form — see {@link ButtonLinkProps}. */\n  href?: never;\n  renderLink?: never;\n  external?: never;\n  replace?: never;\n  reloadDocument?: never;\n}\n\n/**\n * `<Button href>`: a link that looks like a button — for an action that NAVIGATES.\n *\n * kastlan paints `buttonClasses(…)` onto router Links by hand in six places (the\n * invoice / lease / unit preview dialogs' \"Open\" at invoice-preview-dialog.tsx:36,\n * platform-companies-page.tsx:111, verify-email-page.tsx:86's \"Log in\",\n * billing-history-page.tsx:85's PDF download), and has 26 `<Button onClick={() =>\n * navigate(…)}>` that are links in all but markup: no middle-click, no \"open in new\n * tab\", no URL on hover, and a screen reader announces a button that then changes the\n * page. With `href` it is an `<a>`: the provider's router link\n * ({@link UiKitProvider}'s `linkComponent`), or `renderLink` if given, else a plain one.\n *\n * `type` and `form` are typed out: they are a `<button>`'s, and a link never submits.\n */\nexport interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"type\" | \"href\"> {\n  href: string;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  stretch?: boolean;\n  tone?: ButtonTone;\n  /** The in-app router link, over the provider's `linkComponent` (see\n   *  {@link KitLinkComponent}). Ignored when `external`. */\n  renderLink?: KitLinkComponent;\n  /** Leaves the app: a plain `<a target=\"_blank\" rel=\"noopener noreferrer\">`, never the\n   *  router link, and \"(opens in a new tab)\" read after the label — billing-history's\n   *  Stripe PDF. A `target=\"_blank\"` of your own is announced the same way. */\n  external?: boolean;\n  /**\n   * Navigate by replacing the current history entry, so Back does not return here —\n   * keksdose F1: the \"Continue\" out of a one-shot page (an emailed confirmation link, a\n   * payment return URL) that must not be landed on again. Handed to the router link as\n   * `replace` (see `KitLinkProps.replace` for mapping it); on a plain `<a>` a plain click\n   * becomes `location.replace(href)`. Ignored when `external`.\n   */\n  replace?: boolean;\n  /**\n   * A plain `<a>` for an in-app `href`, so the browser loads the whole document instead\n   * of the router swapping the view — keksdose F1: a route the SPA does not own (a\n   * server-rendered export, a logout that must drop every in-memory cache). Wins over\n   * `renderLink` and the provider's `linkComponent`.\n   */\n  reloadDocument?: boolean;\n  /** A link cannot be `disabled`, so this renders an `<a>` with NO `href` —\n   *  `role=\"link\"` and `aria-disabled`, out of the tab order like a disabled button,\n   *  with the disabled look. The router link is not used: it needs somewhere to go. */\n  disabled?: boolean;\n  ref?: Ref<HTMLAnchorElement>;\n  type?: never;\n  form?: never;\n  pending?: never;\n  pressed?: never;\n  disabledReason?: never;\n  commit?: never;\n}\n\nfunction hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== \"\";\n}\n\n/** The button look shared by the `<button>` and the `<a>` form. */\nfunction buttonLook(variant: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone) {\n  return cn(\n    BUTTON_BASE,\n    BUTTON_SIZES[size],\n    // In a flex row next to a taller labelled field, `stretch` makes the button\n    // fill the field's height so the two line up (self-stretch overrides the row's\n    // align-items). No effect outside a flex row / when it's already the tallest.\n    stretch && \"self-stretch\",\n    buttonVariantClasses[variant],\n    tone !== \"default\" && TONED_VARIANTS.has(variant) && BUTTON_TONES[tone],\n    tone === \"danger\" && BUTTON_BOXED_DANGER[variant],\n  );\n}\n\n// Declared link-first so `<Button href>` picks the link props; the LAST signature is\n// what `ComponentProps<typeof Button>` reads, so wrappers (FileButton) still see the\n// `<button>` props they always did.\nexport function Button(props: ButtonLinkProps): ReactElement;\nexport function Button(props: ButtonProps): ReactElement;\nexport function Button(props: ButtonProps | ButtonLinkProps): ReactElement {\n  if (props.href !== undefined) return <ButtonLink {...(props as ButtonLinkProps)} />;\n  return <ButtonElement {...(props as ButtonProps)} />;\n}\n\n/** Calls a `renderLink` / provider link as a function, as ListItem and Chip do — an\n *  inline `renderLink` arrow would otherwise be a new component type every render. */\nfunction RenderedButtonLink({ render, ...props }: KitLinkProps & { render: KitLinkComponent }) {\n  return render(props);\n}\n\nfunction ButtonLink({\n  href,\n  renderLink,\n  external,\n  replace,\n  reloadDocument,\n  disabled,\n  variant = \"primary\",\n  size = \"md\",\n  stretch,\n  tone = \"default\",\n  className,\n  children,\n  target,\n  rel,\n  onClick,\n  ...rest\n}: ButtonLinkProps) {\n  const kitLink = useKitLink();\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  // The same rule as every kit link (`pickLinkRenderer`): an external `href` or an\n  // in-page `#anchor` is never handed to the provider's router link, even without\n  // `external`.\n  // `reloadDocument` is the caller saying \"not the router\" for this one link.\n  const Link = reloadDocument ? undefined : pickLinkRenderer<KitLinkProps>(renderLink, kitLink, href);\n  const newTab = !disabled && (external || target === \"_blank\");\n  const cls = cn(\n    buttonLook(variant, size, stretch, tone),\n    // `relative` holds the sr-only note (see sr-only-containment.test).\n    newTab && \"relative\",\n    // BUTTON_BASE's `disabled:` classes never match an `<a>`; no pointer events also\n    // keeps the hover fill from lighting up on something that refuses the click.\n    disabled && \"pointer-events-none cursor-not-allowed opacity-50\",\n    className,\n  );\n  const body = (\n    <>\n      {children}\n      {/* The space OUTSIDE the sr-only span: a name computation trims each child's\n          text, so one inside it was lost (\"Download(opens…\"). In a flex box a bare\n          space draws nothing. */}\n      {newTab && \" \"}\n      {newTab && <span className=\"sr-only\">({common.opensInNewTab})</span>}\n    </>\n  );\n  if (disabled) {\n    return (\n      <a {...rest} role=\"link\" aria-disabled=\"true\" className={cls}>\n        {body}\n      </a>\n    );\n  }\n  if (external || !Link) {\n    return (\n      <a\n        {...rest}\n        href={href}\n        target={external ? \"_blank\" : target}\n        rel={external ? (rel ?? \"noopener noreferrer\") : rel}\n        onClick={external ? onClick : replacingClick(onClick, href, replace, target)}\n        className={cls}\n      >\n        {body}\n      </a>\n    );\n  }\n  return (\n    <RenderedButtonLink\n      render={Link}\n      {...rest}\n      {...routerLinkNavigation(replace)}\n      href={href}\n      target={target}\n      rel={rel}\n      onClick={onClick}\n      className={cls}\n    >\n      {body}\n    </RenderedButtonLink>\n  );\n}\n\nfunction ButtonElement({\n  variant = \"primary\",\n  size = \"md\",\n  stretch,\n  tone = \"default\",\n  pressed,\n  disabledReason: ownDisabledReason,\n  commit,\n  pending,\n  className,\n  onClick,\n  children,\n  href: _href,\n  renderLink: _renderLink,\n  external: _external,\n  replace: _replace,\n  reloadDocument: _reloadDocument,\n  ...rest\n}: ButtonProps) {\n  const reasonId = useId();\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  const inert = locked || Boolean(pending);\n  const ownDescribedBy = rest[\"aria-describedby\"];\n  const button = (\n    <button\n      {...rest}\n      disabled={inert ? undefined : rest.disabled}\n      aria-disabled={inert || rest[\"aria-disabled\"]}\n      aria-busy={pending || rest[\"aria-busy\"]}\n      aria-describedby={locked ? (ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId) : ownDescribedBy}\n      aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n      onClick={(e) => {\n        // `preventDefault` as well as not calling through: a locked submit button must\n        // not submit its form, and the browser does that after this handler returns.\n        if (inert) {\n          e.preventDefault();\n          return;\n        }\n        onClick?.(e);\n      }}\n      className={cn(\n        buttonLook(variant, size, stretch, tone),\n        pressed && (variant === \"link\" ? BUTTON_LINK_PRESSED : ICON_BUTTON_PRESSED),\n        // The disabled look for the focusable kind of disabled.\n        locked && \"cursor-not-allowed opacity-50\",\n        // No dimming while pending: the spinner IS the state, and at half opacity it\n        // would be the faintest thing on the button. `relative` anchors it.\n        pending && \"relative cursor-progress\",\n        className,\n      )}\n    >\n      {pending ? (\n        <>\n          {/* Transparent, not hidden: it keeps the width AND stays the accessible\n              name (`visibility: hidden` would drop it from the name). `gap-[inherit]`\n              keeps an icon + text spaced as the button spaces them. */}\n          <span className=\"inline-flex items-center justify-center gap-[inherit] opacity-0\">{children}</span>\n          {/* Decorative: `aria-busy` says it, as on FileButton. */}\n          <Spinner\n            label={null}\n            className=\"absolute inset-0 m-auto size-4 border-current/30 border-t-current\"\n          />\n        </>\n      ) : (\n        children\n      )}\n    </button>\n  );\n  if (!locked) return button;\n  return (\n    // The button in a FRAGMENT so Tooltip does not clone its bubble into the\n    // description as well — the hidden copy below already describes it, and the same\n    // sentence twice would be read on every focus. `stretch` moves to the wrapper,\n    // which is now the flex item.\n    <Tooltip label={disabledReason} className={stretch ? \"self-stretch\" : undefined}>\n      <>\n        {button}\n        <span id={reasonId} hidden>\n          {disabledReason}\n        </span>\n      </>\n    </Tooltip>\n  );\n}\n\n// Canonical square icon-only button. <Button> carries TEXT geometry — px-3 py-2\n// gap-2 — so rendering a bare glyph through it gives a small icon in a wide,\n// text-shaped box. This fixes a square box instead and, crucially, forces the\n// child icon to a size set by the BOX (20px at md/sm) via `[&_svg]:size-*` so a\n// caller cannot under-size it. Use it wherever an action is a bare icon\n// (edit/delete/tools) so they all match the top-bar icon buttons and can never\n// drift apart again.\n//\n// Draws its colours from the same `buttonVariantClasses` map as <Button>, so the\n// two re-skin together with the palette.\nconst ICON_BUTTON_BASE =\n  \"inline-flex items-center justify-center rounded-md transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed\";\n\nexport type IconButtonSize = \"2xl\" | \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\" | \"2xs\";\n\n// Box and glyph together, so a 24px chip action cannot end up holding a 20px icon\n// that touches its edges. The two small steps are lenkbank's list-row (28px) and\n// chip (24px) actions, which it had hand-rolled beside the kit's 32/36px ones.\nconst ICON_BUTTON_SIZES: Record<IconButtonSize, string> = {\n  // 64px with a 28px glyph: a camera's shutter (keksdose invoices/camera-capture.tsx:248,\n  // `size-16` by hand) — the one control of a full-screen capture view, thumb-sized.\n  \"2xl\": \"size-16 [&_svg]:size-7\",\n  // 48px with a 24px glyph: the one primary action of a phone screen or sheet, a step\n  // past the 44px minimum rather than on it.\n  xl: \"size-12 [&_svg]:size-6\",\n  // The 44px touch target (WCAG 2.5.5's size) with the same 20px glyph — keksdose's\n  // bulk-action bars write `size-11` by hand over an `md` button to get it on phones.\n  lg: \"size-11 [&_svg]:size-5\",\n  md: \"size-9 [&_svg]:size-5\",\n  sm: \"size-8 [&_svg]:size-5\",\n  xs: \"size-7 rounded [&_svg]:size-4\",\n  \"2xs\": \"size-6 rounded [&_svg]:size-3.5\",\n};\n\n// `stretch`: the same WIDTH and glyph, and a height taken from the row instead of\n// stated — `size-*` sets a height that `self-stretch` cannot override, so the box is\n// written as a width plus a minimum height (the square it would otherwise be).\nconst ICON_BUTTON_STRETCH_SIZES: Record<IconButtonSize, string> = {\n  \"2xl\": \"w-16 min-h-16 self-stretch [&_svg]:size-7\",\n  xl: \"w-12 min-h-12 self-stretch [&_svg]:size-6\",\n  lg: \"w-11 min-h-11 self-stretch [&_svg]:size-5\",\n  md: \"w-9 min-h-9 self-stretch [&_svg]:size-5\",\n  sm: \"w-8 min-h-8 self-stretch [&_svg]:size-5\",\n  xs: \"w-7 min-h-7 self-stretch rounded [&_svg]:size-4\",\n  \"2xs\": \"w-6 min-h-6 self-stretch rounded [&_svg]:size-3.5\",\n};\n\n// A tone re-colours the glyph without changing what the variant draws around it.\n// Each coloured tone comes in two resting looks, picked by `quiet` (see the prop):\n// QUIET is placeholder grey until the pointer or focus arrives, then the tone's\n// family; TONED wears the tone's colour at rest. The defaults are the looks each tone\n// had before `quiet` existed: `danger` is quiet — an action in every row of a list\n// must not shout from every row, so the red arrives only on the one row you are about\n// to act on — while `warning` and `info` are toned, because they mark the ONE thing\n// on the row to notice (keksdose's \"needs review\" flag, its reconcile action at\n// accounts-page:867), and quiet grey would hide the very thing they point out.\n// `muted` is quiet by definition and has no toned look; `default` has no tone.\n//\n// `success` is toned at rest too: the green is the news (keksdose's \"in sync\" chip).\n// `custom` paints from `--icon-button-tone`, which `toneColor` sets — for a glyph whose\n// colour FOLLOWS STATE across tones (keksdose's sync chip: rose, amber, sky, green as\n// the sync moves), where swapping `tone` would do but the colour is one variable.\nexport type IconButtonTone = \"default\" | \"muted\" | \"danger\" | \"warning\" | \"info\" | \"success\" | \"custom\";\n\ntype ColouredTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"custom\";\n\nconst ICON_BUTTON_TONES: Record<ColouredTone, { quiet: string; toned: string }> = {\n  danger: {\n    quiet:\n      \"text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border-strong)]\",\n    toned: \"text-[var(--danger)] hover:bg-[var(--danger-bg)] focus:ring-[var(--danger-border-strong)]\",\n  },\n  warning: {\n    quiet:\n      \"text-[var(--text-placeholder)] hover:bg-[var(--warning-bg)] hover:text-[var(--warning)] focus:ring-[var(--warning-border)]\",\n    toned: \"text-[var(--warning)] hover:bg-[var(--warning-bg)] focus:ring-[var(--warning-border)]\",\n  },\n  info: {\n    quiet:\n      \"text-[var(--text-placeholder)] hover:bg-[var(--info-bg)] hover:text-[var(--info)] focus:ring-[var(--info-border)]\",\n    toned: \"text-[var(--info)] hover:bg-[var(--info-bg)] focus:ring-[var(--info-border)]\",\n  },\n  success: {\n    quiet:\n      \"text-[var(--text-placeholder)] hover:bg-[var(--success-bg)] hover:text-[var(--success)] focus:ring-[var(--success-border)]\",\n    toned: \"text-[var(--success)] hover:bg-[var(--success-bg)] focus:ring-[var(--success-border)]\",\n  },\n  // The hover fill and the ring are MIXED from the one colour, since a custom tone\n  // brings no `-bg` / `-border` pair of its own. The fallback is the body colour, so a\n  // `custom` tone with no colour set is the default look rather than invisible.\n  custom: {\n    quiet:\n      \"text-[var(--text-placeholder)] hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] hover:text-[var(--icon-button-tone,var(--text-primary))] focus:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]\",\n    toned:\n      \"text-[var(--icon-button-tone,var(--text-primary))] hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] focus:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]\",\n  },\n};\n\nconst ICON_BUTTON_MUTED =\n  \"text-[var(--text-placeholder)] hover:bg-[var(--bg-surface-2)] hover:text-[var(--text-primary)]\";\n\n/** Which tones sit quiet at rest when `quiet` is left out. */\nconst QUIET_BY_DEFAULT: Record<ColouredTone, boolean> = {\n  danger: true,\n  warning: false,\n  info: false,\n  success: false,\n  custom: false,\n};\n\nfunction iconButtonToneClass(tone: IconButtonTone, quiet: boolean | undefined): string {\n  if (tone === \"default\") return \"\";\n  if (tone === \"muted\") return cn(ICON_BUTTON_MUTED, ICON_BUTTON_QUIET_DISABLED_REST);\n  const isQuiet = quiet ?? QUIET_BY_DEFAULT[tone];\n  const look = ICON_BUTTON_TONES[tone];\n  return isQuiet ? cn(look.quiet, ICON_BUTTON_QUIET_DISABLED_REST) : look.toned;\n}\n\n// A disabled button must not answer the pointer. The hover classes above are plain\n// `hover:` (so a caller's `className=\"hover:…\"` still replaces them through\n// tailwind-merge), which means they fire on a disabled button too — the old grey\n// icon lit up on hover while refusing the click. Rather than rewrite every hover as\n// `enabled:hover:` (which never matches the `<a>` that `buttonClasses` also styles,\n// and would out-rank a caller's plain `hover:` override), each variant pins its\n// RESTING look under `disabled:hover:`, which out-ranks any `hover:` by specificity\n// and only ever matches a disabled button.\nconst ICON_BUTTON_DISABLED_REST: Record<IconButtonVariant, string> = {\n  primary: \"disabled:hover:bg-[var(--bg-surface-2)]\",\n  secondary: \"disabled:hover:bg-transparent\",\n  ghost: \"disabled:hover:bg-transparent\",\n  danger: \"disabled:hover:bg-[var(--danger)]\",\n  brand: \"disabled:hover:bg-[var(--brand)]\",\n  link: \"disabled:hover:bg-transparent disabled:hover:no-underline\",\n  overlay: \"disabled:hover:bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)]\",\n  shutter: \"disabled:hover:bg-[var(--media-scrim)]\",\n};\n\n// The quiet looks change the glyph on hover, so they pin their resting glyph the\n// same way. A toned look keeps its glyph on hover and needs no pin.\nconst ICON_BUTTON_QUIET_DISABLED_REST = \"disabled:hover:text-[var(--text-placeholder)]\";\n\n// `pressed`: a toggle that is on. The brand glyph on the quiet brand fill — the\n// \"selected\" look of a Chip or a SegmentedControl option, so an on toggle reads as on\n// beside them. After the tone, so a pressed `muted` button is brand, not grey.\nconst ICON_BUTTON_PRESSED =\n  \"bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)] hover:text-[var(--brand)] disabled:hover:bg-[var(--brand-bg)] disabled:hover:text-[var(--brand)]\";\n\n// `variant=\"overlay\"`: a round, translucent disc for a control that sits ON a photo\n// (keksdose's receipt-scan preview: close, rotate, retake over the camera image).\n// The inverse pair, not the surface one: what has to hold is the contrast between the\n// disc and its glyph, whatever the picture underneath is, and `--bg-inverse` /\n// `--text-inverse` are the one token pair defined as each other's opposite in both\n// themes. The disc is the inverse at 60% (`color-mix`, so it stays a token a palette\n// can re-point); the blur keeps a busy background from breaking the glyph's edge.\nconst ICON_BUTTON_OVERLAY =\n  \"rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)] text-[var(--text-inverse)] backdrop-blur-sm hover:bg-[color-mix(in_srgb,var(--bg-inverse)_75%,transparent)] focus:ring-[var(--text-inverse)]\";\n\n// `variant=\"shutter\"`: the camera's release — keksdose's camera-capture.tsx:248 draws\n// it by hand as a 64px circle with a thick white ring round a translucent fill. It sits\n// on a live camera picture, which is dark whatever the theme, so it uses the MEDIA\n// tokens (tokens.css), white ink on a dark scrim in both themes — the inverse pair\n// `overlay` uses would give a dark ring on a dark viewfinder in dark mode. The focus ring stands off by 2px, or it would\n// merge into the ring that is part of the look.\nconst ICON_BUTTON_SHUTTER =\n  \"rounded-full border-4 border-[var(--media-ink)] bg-[var(--media-scrim)] text-[var(--media-ink)] backdrop-blur-sm hover:bg-[var(--media-scrim-hover)] focus:ring-[var(--media-ink)] focus:ring-offset-2 focus:ring-offset-[var(--media-scrim-hover)]\";\n\nexport type IconButtonVariant = ButtonVariant | \"overlay\" | \"shutter\";\n\n/**\n * The glyph's size in px, over the one the box size implies — see\n * {@link IconButtonProps.glyphSize}.\n */\nexport type IconButtonGlyphSize = 12 | 14 | 16 | 20 | 24 | 28;\n\nconst ICON_BUTTON_GLYPH_SIZES: Record<IconButtonGlyphSize, string> = {\n  12: \"[&_svg]:size-3\",\n  14: \"[&_svg]:size-3.5\",\n  16: \"[&_svg]:size-4\",\n  20: \"[&_svg]:size-5\",\n  24: \"[&_svg]:size-6\",\n  28: \"[&_svg]:size-7\",\n};\n\n// `pending`'s spinner, the size of the glyph it replaces (the `[&_svg]` rules above\n// size only an svg, and the spinner is a bordered span).\nconst ICON_BUTTON_SPINNER: Record<IconButtonSize, string> = {\n  \"2xl\": \"size-7\",\n  xl: \"size-6\",\n  lg: \"size-5\",\n  md: \"size-5\",\n  sm: \"size-5\",\n  xs: \"size-4\",\n  \"2xs\": \"size-3.5\",\n};\nconst ICON_BUTTON_SPINNER_GLYPH: Record<IconButtonGlyphSize, string> = {\n  12: \"size-3\",\n  14: \"size-3.5\",\n  16: \"size-4\",\n  20: \"size-5\",\n  24: \"size-6\",\n  28: \"size-7\",\n};\n\nexport interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Any {@link ButtonVariant}; `overlay` — a round translucent disc for use over\n   *  an image (see `ICON_BUTTON_OVERLAY`); or `shutter` — a camera's release, a ringed\n   *  disc over the viewfinder (see `ICON_BUTTON_SHUTTER`; pair it with `size=\"2xl\"`). */\n  variant?: IconButtonVariant;\n  /** Box size: 2xl = 64px with a 28px icon (a camera shutter), xl = 48px with a 24px\n   *  icon, lg = 44px (a phone's touch target), md = 36px (matches the top bar),\n   *  sm = 32px — all three with a 20px icon;\n   *  xs = 28px with a 16px icon (an action in a list row), 2xs = 24px with a 14px\n   *  icon (an action on a chip or a tab). `glyphSize` overrides the icon. */\n  size?: IconButtonSize;\n  /**\n   * The icon's size in px, when the box's own is not the one wanted. keksdose's sync\n   * chip (app/sync-status-indicator.tsx:142) is a 24px round chip round a 20px cloud —\n   * `size=\"2xs\" glyphSize={20} shape=\"round\"` — where `2xs` alone draws 14px. A number\n   * over a new size step because the box and the glyph are two independent choices; a\n   * step per combination (`\"sm-lg\"`) would have to be named for every one.\n   */\n  glyphSize?: IconButtonGlyphSize;\n  /**\n   * A small mark on the button's corner — the sync chip's 12px check over its cloud\n   * (\"all good\", feedback #67). Rendered OUTSIDE the `<button>`, in a wrapper beside\n   * it, so the box's `[&_svg]:size-*` rule that sizes the glyph does not blow the badge\n   * up to the glyph's size; a bare `<Check />` comes out 12px, on a\n   * `--bg-surface` disc that keeps it legible over the glyph. Decorative\n   * (`aria-hidden`): the name (`label` / `aria-label`) must already carry the state.\n   * With a badge, `className` still lands on the button; the wrapper is the flex item.\n   */\n  badge?: ReactNode;\n  /**\n   * `keep`: a disabled button keeps its full colour (no 50% drop) and an ordinary\n   * cursor. For a STATUS that is also an action — the sync chip shows \"in sync\" in\n   * green and refreshes on click, and is disabled while offline or syncing, when the\n   * state it shows matters most; dimmed it read as broken (keksdose wrote\n   * `disabled:cursor-default` by hand and left out the dimming). Default `dim`.\n   */\n  disabledStyle?: \"dim\" | \"keep\";\n  /**\n   * Fill the height of the flex row it stands in, keeping its width — the delete at\n   * the end of keksdose's split line (transaction-fields:162), level with the labelled\n   * fields beside it rather than floating at half their height. {@link Button}'s\n   * `stretch`; no effect outside a flex row. With a `label`, the tooltip's wrapper is\n   * what stretches.\n   */\n  stretch?: boolean;\n  /** `round`: a circle instead of the rounded square — a compact status chip in a top\n   *  bar (keksdose's sync indicator). `overlay` is always round. */\n  shape?: \"square\" | \"round\";\n  /**\n   * The colour of `tone=\"custom\"`, as any CSS colour — a token (`var(--warning)`),\n   * ideally. Sets `--icon-button-tone` on the button, so passing a different one per\n   * state re-colours the glyph, its hover fill and its focus ring together. Passing it\n   * implies `tone=\"custom\"`. Or leave it out and set the variable yourself from a class\n   * (`className=\"[--icon-button-tone:var(--success)]\"`).\n   *\n   * Or a `{ light, dark }` pair, one colour per theme — keksdose: a raw colour that reads\n   * on the light surface (`#be123c`) is too dark on the dark one, and an inline style\n   * cannot say \"in dark mode\". See {@link IconButtonToneColor}.\n   */\n  toneColor?: IconButtonToneColor;\n  /** Glyph colour over the variant. `muted`: placeholder grey, full text colour on\n   *  hover. `danger`: the same grey at rest, `--danger` on hover and focus — for a\n   *  remove/delete that repeats down a list. `warning`: amber at rest — a flag that\n   *  wants attention. `info`: sky at rest — a notice-worthy but harmless action\n   *  (keksdose's reconcile). `success`: green at rest — a good state worth seeing.\n   *  `custom`: the colour of `toneColor` (see there). Default: the variant's own colours. See `quiet` for\n   *  turning a coloured tone's resting look the other way. */\n  tone?: IconButtonTone;\n  /**\n   * Whether a coloured tone (`danger`, `warning`, `info`) waits for the pointer:\n   * `true` is placeholder grey at rest and the tone's colour on hover and focus;\n   * `false` wears the tone's colour at rest. Left out, each tone keeps its own\n   * default — `danger` quiet, `warning` and `info` not. Ignored for `muted` (quiet by\n   * definition) and `default` (no tone).\n   *\n   * `quiet={false}` on `danger` is for a destructive action that stands ALONE, where\n   * hover-to-reveal hides it: keksdose's phone bulk bar (mobile-bulk-bar.tsx) has one\n   * \"delete all\" and a touch screen that never hovers, so it painted rose by hand.\n   * `quiet` on `warning`/`info` is the same switch the other way, for a flag repeated\n   * down a list. A boolean over the tone rather than a new tone (`danger-solid`) or an\n   * `emphasis` scale: there are exactly two resting looks, every coloured tone has\n   * both, and which one fits is a question about the SITE (alone or repeated, touch or\n   * pointer), not about the tone — so it is one switch the family shares.\n   */\n  quiet?: boolean;\n  /**\n   * Make it a toggle button. `true` sets `aria-pressed=\"true\"` and draws the \"on\" look\n   * (brand glyph on the quiet brand fill); `false` sets `aria-pressed=\"false\"` with the\n   * normal look, so a screen reader still hears a toggle that is off. Left out, it is\n   * an ordinary button with no `aria-pressed` — or whatever `aria-pressed` the caller\n   * passes. For keksdose's budget share toggle (budgets-page:291), which paints its own\n   * brand colour over a ghost button today. Keep the `aria-label` the same in both\n   * states (\"Share budget\"): the pressed state already says whether it is on.\n   */\n  pressed?: boolean;\n  /** Keep the click (and the Enter/Space that produces it) from reaching an\n   *  ancestor's handler — for an action inside a clickable table row or card.\n   *\n   *  **Not a licence to put this inside another `<button>`.** HTML forbids any\n   *  interactive content, and any element with a `tabindex`, inside a button — so\n   *  the `<span role=\"button\" tabIndex={0}>` workaround is invalid too — and ARIA\n   *  makes a button's children presentational, so a screen reader flattens the\n   *  inner one into the outer one's name and it cannot be reached at all. Make the\n   *  row's main action a button that fills the row and put this one BESIDE it, on\n   *  top:\n   *\n   *  ```tsx\n   *  <div className=\"relative\">\n   *    <button className=\"w-full pe-16 …\" onClick={open}>…row…</button>\n   *    <div className=\"absolute inset-y-0 end-2 flex items-center gap-0.5\">\n   *      <IconButton size=\"xs\" tone=\"danger\" aria-label=\"Delete\" onClick={remove}>\n   *        <Trash2 />\n   *      </IconButton>\n   *    </div>\n   *  </div>\n   *  ```\n   *\n   *  The pair look exactly like the nested version, click exactly like it, and\n   *  are two tab stops a screen reader can tell apart. */\n  stopPropagation?: boolean;\n  /**\n   * The button's name, said once: it becomes the `aria-label` AND the text of a kit\n   * {@link Tooltip} round the button.\n   *\n   * Every app writes the pair by hand. lenkbank's nine icon actions all carry\n   * `aria-label={t(x)} title={t(x)}` (shared/lib/table-columns.tsx:103,\n   * projects-page.tsx:83, setpoint/segment-list.tsx:198/207, profile-bar.tsx:128/142,\n   * shortcut-dialog.tsx:815/857/1007) — and `title` is the browser's own tooltip,\n   * which shows late, never on focus and never on touch, and looks like no other\n   * label in the kit. kastlan's RowAction (shared/components/data-table/row-action.tsx)\n   * and keksdose's icon wrappers each exist to put a Tooltip round an IconButton.\n   *\n   * A caller's own `aria-label` still wins, for the rare name that should be longer\n   * than the bubble. The bubble is visual only: it would otherwise describe the button\n   * with its own name, and a screen reader would read the same word twice. Tooltip's\n   * default placement applies — in place, or portalled inside a scroll container —\n   * unless `tooltipPortal` says otherwise.\n   */\n  label?: string;\n  /** Show `label` as a tooltip. Default `true`; `false` keeps `label` as the\n   *  accessible name only — for a button whose glyph is universally read (a close ✕ in\n   *  a dialog header) or that already sits under a tooltip of its own. */\n  tooltip?: boolean;\n  /** Where the `label` tooltip opens. See {@link Tooltip}'s `side`. */\n  tooltipSide?: TooltipSide;\n  /** Passed to the `label` tooltip's `portal`. Left out, Tooltip decides (see there). */\n  tooltipPortal?: boolean;\n  /**\n   * Mount the `label` bubble only while it is up — {@link Tooltip}'s `lazy`. Default\n   * `true` since 0.16.0; `false` is the always-mounted in-place bubble of before.\n   *\n   * Why the label bubble can be lazy when Tooltip's default is not: this bubble\n   * describes nothing. It is wrapped round the button in a fragment precisely so that\n   * it is NOT the button's `aria-describedby` (it would repeat the button's own name),\n   * so there is no description for a lazy mount to take away — the name is the\n   * `aria-label` either way, read in browse mode and on focus alike. What the\n   * always-mounted bubble did do was sit in the DOM as a `role=\"tooltip\"` node full of\n   * text: every IconButton in a row added one to `getAllByRole(\"tooltip\")` and its label\n   * to the row's `textContent`, and two keksdose tests tripped over that (0.15.5 P6).\n   * The cost is the one {@link Tooltip}'s \"Lazy in place\" note names — a test that\n   * looked the bubble up without hovering now has to hover (or focus) first; pass\n   * `false` while it is migrated. A `disabledReason` bubble is unaffected: that one\n   * stays mounted as it was.\n   */\n  tooltipLazy?: boolean;\n  /**\n   * Busy — the action is in flight: the glyph is swapped for a spinner of the same\n   * size, the button is `aria-busy`, and clicks (and the Enter/Space and form\n   * submission they stand for) are swallowed, so a second press cannot start the\n   * action twice. {@link Button}'s `pending`, with the same contract: `aria-disabled`\n   * rather than `disabled`, so the button that was pressed keeps its focus. The name\n   * (`label` / `aria-label`) stays — `aria-busy` is what says it is working. A SWAP\n   * rather than Button's overlay: the box is square and fixed, so there is no width\n   * for the glyph to hold, and a spinner drawn over a glyph would be two marks in one\n   * 20px square.\n   */\n  pending?: boolean;\n  /**\n   * Why the action is not available — {@link Button}'s `disabledReason`, on the icon\n   * button: keksdose's accounts page cannot hide an account with a balance or delete\n   * one with bookings (accounts-page:879/913 — \"hide requires zero\", \"delete blocked\"),\n   * nor its budgets page delete the only budget (budgets-page:330), and each wrapped a\n   * natively disabled IconButton in a Tooltip that swaps its label for the reason — a\n   * bubble a keyboard never opens, since `disabled` leaves the tab order, and a reason\n   * a screen reader never hears.\n   *\n   * The same contract as Button's: `aria-disabled` instead of `disabled`, so it stays\n   * focusable and hoverable; clicks (and the Enter/Space they stand for) are swallowed\n   * — `stopPropagation` still applies, so a locked action in a clickable row does not\n   * open the row either; the reason shows in the kit {@link Tooltip} and is attached\n   * through `aria-describedby` as a `hidden` copy. The NAME stays `aria-label` /\n   * `label` — \"Delete\", described by \"The active budget cannot be deleted\" — and the\n   * bubble shows the reason in place of the label, since the glyph already says what\n   * the button is and the reason is the news. Shown even with `tooltip={false}`: a\n   * reason nobody can see is not one. Wins over `disabled`, as on Button.\n   */\n  disabledReason?: ReactNode;\n  /** This action COMMITS — {@link Button}'s `commit`: under a locked\n   *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n   *  reason. No effect without a lock. */\n  commit?: boolean;\n  /** The `<button>` element — a prop in React 19, as on {@link Button}. */\n  ref?: Ref<HTMLButtonElement>;\n  /** Only on the link form — see {@link IconButtonLinkProps}. */\n  href?: never;\n  renderLink?: never;\n  external?: never;\n  replace?: never;\n  reloadDocument?: never;\n}\n\n/**\n * `<IconButton href>`: an icon-only LINK — keksdose F2 and kastlan 45, whose icon\n * actions that navigate (a row's \"open\", a card's \"edit\" that goes to the edit page, a\n * top bar's settings cog) were `<IconButton onClick={() => navigate(…)}>`: a button that\n * changes the page, with no middle click, no \"open in new tab\" and no URL on hover.\n *\n * The same rule as {@link Button}'s `href` (see {@link ButtonLinkProps}): an in-app\n * `href` goes through `renderLink`, else the provider's `linkComponent`; an external one\n * or an in-page `#anchor` stays a plain `<a>`; `external` opens a new tab and says so to\n * a screen reader; `replace` and `reloadDocument` as on Button. The look, the `label` →\n * `aria-label` + Tooltip, the badge, `toneColor` and `stopPropagation` are the button's.\n *\n * `disabled` renders an inert `<a>` with no `href` — `role=\"link\"`, `aria-disabled`, out\n * of the tab order, dimmed — like Button's disabled link. `pressed`, `disabledReason` and\n * `disabledStyle` are a button's and are typed out: a link is not a toggle, and a link\n * that explains why it cannot be followed is a job for a disabled BUTTON.\n */\nexport interface IconButtonLinkProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"type\" | \"href\">,\n    Pick<\n      IconButtonProps,\n      | \"variant\"\n      | \"size\"\n      | \"glyphSize\"\n      | \"badge\"\n      | \"stretch\"\n      | \"shape\"\n      | \"toneColor\"\n      | \"tone\"\n      | \"quiet\"\n      | \"stopPropagation\"\n      | \"label\"\n      | \"tooltip\"\n      | \"tooltipSide\"\n      | \"tooltipPortal\"\n      | \"tooltipLazy\"\n    > {\n  href: string;\n  /** See {@link ButtonLinkProps.renderLink}. */\n  renderLink?: KitLinkComponent;\n  /** See {@link ButtonLinkProps.external}. */\n  external?: boolean;\n  /** See {@link ButtonLinkProps.replace}. */\n  replace?: boolean;\n  /** See {@link ButtonLinkProps.reloadDocument}. */\n  reloadDocument?: boolean;\n  /** See {@link ButtonLinkProps.disabled}. */\n  disabled?: boolean;\n  ref?: Ref<HTMLAnchorElement>;\n  type?: never;\n  form?: never;\n  pressed?: never;\n  disabledReason?: never;\n  commit?: never;\n  disabledStyle?: never;\n  pending?: never;\n}\n\n/**\n * `toneColor`: one CSS colour, or one per theme.\n *\n * The pair is two custom properties on the element — `--icon-button-tone-light` and\n * `--icon-button-tone-dark` — and a class that points `--icon-button-tone` at one or the\n * other by the kit's `dark` variant (`.dark` on an ancestor, tokens.css), so the colour\n * follows a theme switch in CSS alone, with no re-render and no JS reading the theme.\n * Both values are any CSS colour; a token that already flips (`var(--warning)`) needs no\n * pair.\n */\nexport type IconButtonToneColor = string | { light: string; dark: string };\n\nconst ICON_BUTTON_TONE_PAIR =\n  \"[--icon-button-tone:var(--icon-button-tone-light)] dark:[--icon-button-tone:var(--icon-button-tone-dark)]\";\n\n/** The inline custom properties `toneColor` sets over the caller's `style`. */\nfunction toneColorStyle(toneColor: IconButtonToneColor | undefined, style: CSSProperties | undefined) {\n  if (toneColor === undefined) return style;\n  const vars: Record<string, string> =\n    typeof toneColor === \"string\"\n      ? { \"--icon-button-tone\": toneColor }\n      : { \"--icon-button-tone-light\": toneColor.light, \"--icon-button-tone-dark\": toneColor.dark };\n  return { ...style, ...vars } as CSSProperties;\n}\n\n/** Everything but the element: the look both forms of IconButton share. */\nfunction iconButtonLook({\n  variant,\n  size,\n  stretch,\n  glyphSize,\n  shape,\n  tone,\n  quiet,\n  toneColor,\n}: {\n  variant: IconButtonVariant;\n  size: IconButtonSize;\n  stretch: boolean | undefined;\n  glyphSize: IconButtonGlyphSize | undefined;\n  shape: \"square\" | \"round\";\n  tone: IconButtonTone;\n  quiet: boolean | undefined;\n  toneColor: IconButtonToneColor | undefined;\n}) {\n  return cn(\n    ICON_BUTTON_BASE,\n    stretch ? ICON_BUTTON_STRETCH_SIZES[size] : ICON_BUTTON_SIZES[size],\n    glyphSize !== undefined && ICON_BUTTON_GLYPH_SIZES[glyphSize],\n    // After the size, so the overlay's `rounded-full` beats the small sizes' `rounded`.\n    variant === \"overlay\"\n      ? ICON_BUTTON_OVERLAY\n      : variant === \"shutter\"\n        ? ICON_BUTTON_SHUTTER\n        : buttonVariantClasses[variant],\n    shape === \"round\" && \"rounded-full\",\n    ICON_BUTTON_DISABLED_REST[variant],\n    iconButtonToneClass(tone, quiet),\n    toneColor !== undefined && typeof toneColor !== \"string\" && ICON_BUTTON_TONE_PAIR,\n  );\n}\n\n/** The badge beside the control, not in it — see `badge`. The wrapper is only a\n *  positioning box: the control inside it keeps its own focus ring and hit area. */\nfunction withIconButtonBadge(control: ReactElement, badge: ReactNode, stretch: boolean | undefined) {\n  if (!hasContent(badge)) return control;\n  return (\n    <span className={cn(\"relative inline-flex shrink-0\", stretch && \"self-stretch\")}>\n      {control}\n      <span\n        aria-hidden\n        data-slot=\"icon-button-badge\"\n        className=\"pointer-events-none absolute -end-0.5 -bottom-0.5 inline-flex rounded-full bg-[var(--bg-surface)] [&_svg]:size-3\"\n      >\n        {badge}\n      </span>\n    </span>\n  );\n}\n\n// Declared link-first, as Button is, so `<IconButton href>` picks the link props and\n// `ComponentProps<typeof IconButton>` (the LAST signature) is still the button's.\nexport function IconButton(props: IconButtonLinkProps): ReactElement;\nexport function IconButton(props: IconButtonProps): ReactElement;\nexport function IconButton(props: IconButtonProps | IconButtonLinkProps): ReactElement {\n  if (props.href !== undefined) return <IconButtonLink {...(props as IconButtonLinkProps)} />;\n  return <IconButtonElement {...(props as IconButtonProps)} />;\n}\nIconButton.displayName = \"IconButton\";\n\nfunction IconButtonLink({\n  href,\n  renderLink,\n  external,\n  replace,\n  reloadDocument,\n  disabled,\n  variant = \"ghost\",\n  size = \"md\",\n  tone: toneProp,\n  quiet,\n  stopPropagation,\n  stretch,\n  shape = \"square\",\n  toneColor,\n  label,\n  tooltip = true,\n  tooltipSide,\n  tooltipPortal,\n  tooltipLazy = true,\n  glyphSize,\n  badge,\n  className,\n  style,\n  target,\n  rel,\n  onClick,\n  onKeyDown,\n  children,\n  ref,\n  ...rest\n}: IconButtonLinkProps) {\n  const kitLink = useKitLink();\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const tone = toneProp ?? (toneColor !== undefined ? \"custom\" : \"default\");\n  // Button's rule, word for word: `reloadDocument` bypasses the router, an external\n  // href or an in-page `#anchor` never reaches it.\n  const Link = reloadDocument ? undefined : pickLinkRenderer<KitLinkProps>(renderLink, kitLink, href);\n  const newTab = !disabled && (external || target === \"_blank\");\n  const name = rest[\"aria-label\"] ?? label;\n  // \"(opens in a new tab)\" joins the NAME here, not the body: an icon link has no text\n  // for an sr-only span to follow, and `aria-label` would override one anyway.\n  const ariaLabel = name !== undefined && newTab ? `${name} (${common.opensInNewTab})` : name;\n  const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {\n    if (stopPropagation) e.stopPropagation();\n    onClick?.(e);\n  };\n  const handleKeyDown = (e: KeyboardEvent<HTMLAnchorElement>) => {\n    // A link activates on Enter only; that key still bubbles to a clickable row.\n    if (stopPropagation && e.key === \"Enter\") e.stopPropagation();\n    onKeyDown?.(e);\n  };\n  const cls = cn(\n    iconButtonLook({ variant, size, stretch, glyphSize, shape, tone, quiet, toneColor }),\n    // BASE's `disabled:` classes never match an `<a>` — Button's disabled link look.\n    disabled && \"pointer-events-none cursor-not-allowed opacity-50\",\n    className,\n  );\n  const look = { style: toneColorStyle(toneColor, style), className: cls };\n  let control: ReactElement;\n  if (disabled) {\n    control = (\n      <a {...rest} {...look} ref={ref} role=\"link\" aria-disabled=\"true\" aria-label={ariaLabel}>\n        {children}\n      </a>\n    );\n  } else if (external || !Link) {\n    control = (\n      <a\n        {...rest}\n        {...look}\n        ref={ref}\n        href={href}\n        aria-label={ariaLabel}\n        target={external ? \"_blank\" : target}\n        rel={external ? (rel ?? \"noopener noreferrer\") : rel}\n        onClick={external ? handleClick : replacingClick(handleClick, href, replace, target)}\n        onKeyDown={handleKeyDown}\n      >\n        {children}\n      </a>\n    );\n  } else {\n    control = (\n      <RenderedButtonLink\n        render={Link}\n        {...rest}\n        {...look}\n        {...routerLinkNavigation(replace)}\n        ref={ref}\n        href={href}\n        aria-label={ariaLabel}\n        target={target}\n        rel={rel}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n      >\n        {children}\n      </RenderedButtonLink>\n    );\n  }\n  control = withIconButtonBadge(control, badge, stretch);\n  if (!tooltip || label === undefined || label === \"\") return control;\n  return (\n    // A fragment, as on the button: the bubble says what `aria-label` already does.\n    <Tooltip\n      label={label}\n      side={tooltipSide}\n      portal={tooltipPortal}\n      lazy={tooltipLazy}\n      className={stretch ? \"self-stretch\" : undefined}\n    >\n      <>{control}</>\n    </Tooltip>\n  );\n}\n\nfunction IconButtonElement(\n  {\n    variant = \"ghost\",\n    size = \"md\",\n    tone: toneProp,\n    quiet,\n    pressed,\n    stopPropagation,\n    stretch,\n    shape = \"square\",\n    toneColor,\n    label,\n    tooltip = true,\n    tooltipSide,\n    tooltipPortal,\n    tooltipLazy = true,\n    disabledReason: ownDisabledReason,\n    commit,\n    pending,\n    glyphSize,\n    badge,\n    disabledStyle = \"dim\",\n    className,\n    style,\n    onClick,\n    onKeyDown,\n    children,\n    href: _href,\n    renderLink: _renderLink,\n    external: _external,\n    replace: _replace,\n    reloadDocument: _reloadDocument,\n    ref,\n    ...rest\n  }: IconButtonProps,\n) {\n  const tone = toneProp ?? (toneColor !== undefined ? \"custom\" : \"default\");\n  const keep = disabledStyle === \"keep\";\n  const reasonId = useId();\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  // Pending is inert like a locked button — focusable, every activation swallowed —\n  // without the locked look: the spinner is the state.\n  const inert = locked || Boolean(pending);\n  const ownDescribedBy = rest[\"aria-describedby\"];\n  const button = (\n    <button\n      ref={ref}\n      {...rest}\n      disabled={inert ? undefined : rest.disabled}\n      aria-disabled={inert || rest[\"aria-disabled\"]}\n      aria-busy={pending || rest[\"aria-busy\"]}\n      aria-describedby={locked ? (ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId) : ownDescribedBy}\n      aria-label={rest[\"aria-label\"] ?? label}\n      aria-pressed={pressed ?? rest[\"aria-pressed\"]}\n      style={toneColorStyle(toneColor, style)}\n      onClick={(e) => {\n        if (stopPropagation) e.stopPropagation();\n        // `preventDefault` too: a locked (or pending) submit must not submit its form.\n        if (inert) {\n          e.preventDefault();\n          return;\n        }\n        onClick?.(e);\n      }}\n      onKeyDown={(e) => {\n        // A button turns Enter/Space into a click of its own, but the KEY still\n        // bubbles — and a clickable row listening for Enter would act on it too.\n        if (stopPropagation && (e.key === \"Enter\" || e.key === \" \")) e.stopPropagation();\n        onKeyDown?.(e);\n      }}\n      className={cn(\n        iconButtonLook({ variant, size, stretch, glyphSize, shape, tone, quiet, toneColor }),\n        pressed && ICON_BUTTON_PRESSED,\n        // The disabled look for the focusable kind of disabled, as on Button.\n        locked && (keep ? \"cursor-default\" : \"cursor-not-allowed opacity-50\"),\n        keep && \"disabled:cursor-default disabled:opacity-100\",\n        pending && \"cursor-progress\",\n        className,\n      )}\n    >\n      {pending ? (\n        // Decorative, as on Button: `aria-busy` says it. Sized to the glyph it stands\n        // in for, in the glyph's colour, so the swap does not change the button's look.\n        <Spinner\n          label={null}\n          className={cn(\n            \"border-current/30 border-t-current\",\n            glyphSize !== undefined ? ICON_BUTTON_SPINNER_GLYPH[glyphSize] : ICON_BUTTON_SPINNER[size],\n          )}\n        />\n      ) : (\n        children\n      )}\n    </button>\n  );\n  const control = withIconButtonBadge(button, badge, stretch);\n  if (locked) {\n    return (\n      // Button's shape: the button and the hidden reason in a FRAGMENT, so Tooltip does\n      // not add its bubble to the description as well.\n      <Tooltip\n        label={disabledReason}\n        side={tooltipSide}\n        portal={tooltipPortal}\n        className={stretch ? \"self-stretch\" : undefined}\n      >\n        <>\n          {control}\n          <span id={reasonId} hidden>\n            {disabledReason}\n          </span>\n        </>\n      </Tooltip>\n    );\n  }\n  if (!tooltip || label === undefined || label === \"\") return control;\n  return (\n    // A fragment, so Tooltip leaves the button's description alone: the bubble says\n    // exactly what `aria-label` already does. Lazy by default — see `tooltipLazy`.\n    <Tooltip\n      label={label}\n      side={tooltipSide}\n      portal={tooltipPortal}\n      lazy={tooltipLazy}\n      className={stretch ? \"self-stretch\" : undefined}\n    >\n      <>{control}</>\n    </Tooltip>\n  );\n}\n\nexport const FIELD_BASE =\n  \"block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-3 py-2 text-sm text-[var(--text-primary)] shadow-sm placeholder:text-[var(--text-placeholder)] focus:border-[var(--brand)] focus:ring-[var(--brand)] \" +\n  // A field the user cannot change has to LOOK settled. Without this, `disabled`\n  // dimmed the floating label and nothing else — FIELD_BASE's own\n  // `text-[var(--text-primary)]` overrides the browser's grey — so a read-only value\n  // sat there at full body-text strength, indistinguishable from one you could retype\n  // (Keksdose dev#455/#474).\n  \"disabled:cursor-default disabled:bg-[var(--bg-surface-2)] disabled:text-[var(--text-muted)] \" +\n  // Same for a field that takes focus but refuses keys: `readOnly` is not\n  // `disabled`, and a value that cannot be edited should not claim it can be. Opt\n  // OUT with {@link FIELD_WRITABLE_LOOK} in the one case where `readOnly` does not\n  // mean that — see the two-factor code field, which uses it to block an autofill\n  // and drops it the moment you focus the field.\n  //\n  // ⚠️ The ATTRIBUTE, never the `:read-only` pseudo-class (Keksdose dev#477).\n  // `:read-only` does not mean \"was marked readonly\" — per Selectors 4 it matches\n  // everything that is not `:read-write`, and only editable inputs/textareas and\n  // contenteditable elements are `:read-write`. So `read-only:` matched every\n  // `<select>` in the app and every field-styled `<button>` built on this base —\n  // the native selects, the date trigger, the entity/currency/multi pickers — and\n  // painted them all in the \"you may not edit this\" grey. On one transaction form\n  // that made three different-looking families out of one field style: plain\n  // inputs, grey selects, grey trigger buttons.\n  \"[&[readonly]]:bg-[var(--bg-surface-2)] [&[readonly]]:text-[var(--text-muted)]\";\n\n/** Cancels FIELD_BASE's read-only treatment for a field that is `readOnly` for a\n *  reason other than \"you may not edit this\". Attribute-scoped for the same reason\n *  FIELD_BASE is — the two have to cancel on the identical selector or twMerge\n *  cannot make the later one win. */\nexport const FIELD_WRITABLE_LOOK =\n  \"[&[readonly]]:bg-[var(--bg-surface)] [&[readonly]]:text-[var(--text-primary)]\";\n\n// Extra top padding leaves room for a label that floats INSIDE the field (the\n// \"filled\" pattern) — the label sits in the top strip, the value below it. Used by\n// every labelled field (native + custom-dropdown triggers). twMerge lets pt/pb win\n// over FIELD_BASE's py-2.\nexport const FIELD_FLOATING_PAD = \"pt-4 pb-1\";\n\n// Error/required highlight for a field that is missing a value — a `--danger`\n// border and matching focus ring so the control itself shows what's wrong, not just\n// a note beside it (feedback #235). Layered after FIELD_BASE so twMerge wins.\n//\n// The `ring-1` is not decoration; it is what makes the highlight SURVIVE display\n// scaling (Keksdose live #295 — *\"Account select boundary. It is not highlighted on\n// the sides.\"*). At 125%, the browser's usual setting on a 2560px screen, a 1px CSS\n// border is 1.25 device pixels: the horizontal edges land on whole rows and paint\n// solid, while one of the two VERTICAL edges lands across a pixel boundary and is\n// spread over two columns at partial coverage. Measured on the receipt's required\n// account field, dark theme, back when this was a hard-coded rose (full =\n// rgb(208,30,78)): left/top/bottom all 208, right 160 then 115 — the side that is\n// supposed to shout, at 55–77% of the others. A border plus a ring is 2 CSS px, so\n// whatever the fraction there is always one fully covered device pixel on every side\n// (re-measured: worst side 241). It is the GEOMETRY that carries that, not the hue,\n// so the fix survives a consumer re-pointing `--danger-border`.\n//\n// A ring rather than `border-2`: a box-shadow adds no layout, so an invalid field\n// stays exactly the size of a valid one and nothing beside it moves when the value\n// arrives.\nexport const FIELD_INVALID =\n  \"border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] focus:border-[var(--danger)] focus:ring-[var(--danger)]\";\n\nexport const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, \"peer placeholder:text-transparent\");\n\n/** The phone breakpoint the display treatment below keys off — the same one the\n *  numpad sheet uses, kept in one place so the two can't drift apart. */\nexport const PHONE_QUERY = \"(max-width: 767px)\";\n\n/**\n * The PHONE display treatment (Keksdose feedback #176, carried across the entry\n * forms by #179): the field chrome removed so the ONE input a form is actually\n * about reads as the thing itself, not as another boxed row in a stack.\n *\n * Every control that takes `variant=\"display\"` — {@link Input}, `NumberInput`,\n * `AmountInput` — means exactly the same thing by it: the treatment applies below\n * {@link PHONE_QUERY} and the field is untouched above it, so a caller never has\n * to ask the viewport, and a form can't end up half-treated across breakpoints.\n *\n * What stays, deliberately:\n *  - A hairline baseline. With the box gone something still has to say \"you can\n *    type here\"; it takes the brand colour on focus, where a bordered field would\n *    light its whole outline. Each edge is set exactly once (`border-x-0\n *    border-t-0 border-b`) so the rule can't hinge on utility order.\n *  - The muted placeholder colour, because a display field is usually empty at\n *    the moment it matters most and has nothing else to show.\n *  - The label, moved to `sr-only` rather than dropped: display type is legible\n *    to the eye, not to a screen reader.\n *\n * Size and weight are NOT here — an amount wants display type, a subject line\n * wants a heading — so each control adds its own on top.\n */\nexport const FIELD_DISPLAY =\n  \"block w-full border-x-0 border-t-0 border-b border-[var(--border)] bg-transparent px-0 pt-0 pb-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:border-[var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60\";\n\n// A field-styled button trigger for the custom dropdown controls (MultiSelect,\n// CurrencySelect) — the field look (border/bg) as a flex row for the value + chevron,\n// so they don't hand-copy the field classes. Add FIELD_FLOATING_PAD only when the\n// trigger carries a label (unlabelled triggers stay normal height to match buttons /\n// adjacent controls). Pair the labelled case with a static FieldLabel.\n// `relative` so the trigger can host an absolutely-centred FieldChevron / clear\n// button the way the native Select does.\n//\n// `[&>:first-child]:min-h-[1lh]` holds one line box open whatever the value is. A\n// trigger with nothing chosen and no placeholder renders an EMPTY value span, an\n// empty span has no line box, and the trigger collapsed to its padding — 18px\n// tall in a stack of 38px fields (an RhfCombobox without a placeholder; DatePicker\n// and MonthPicker had met the same thing as Keksdose live #294 and patched their\n// own span with a U+00A0). Here, on the shared class, it covers every trigger\n// built on it, including a `renderTrigger` one. `1lh` rather than a fixed height\n// so it tracks whatever type the trigger is set in; the first child is the value\n// in every trigger here (the chevron and the clear button are absolute).\nexport const FIELD_TRIGGER = cn(\n  FIELD_BASE,\n  \"relative flex items-center justify-between gap-2 text-start hover:bg-[var(--bg-hover)]\",\n  \"[&>:first-child]:min-h-[1lh]\",\n);\n\n/** An alias rather than an interface: the chevron adds nothing of its own to an\n *  `<svg>`'s props, and an interface declaring no members is the same type wearing a\n *  name that suggests otherwise. */\nexport type FieldChevronProps = Omit<ComponentPropsWithoutRef<\"svg\">, \"children\">;\n\n/** The dropdown chevron, shared by the native {@link Select} and every custom\n * {@link FIELD_TRIGGER} control.\n *\n * Absolutely positioned and centred on the FIELD box. As an ordinary flex child\n * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)\n * pushes that box's midline down — so a labelled currency/multi-select chevron\n * sat visibly lower than the native select's right beside it (feedback #400).\n * Pair it with `pe-9` on the trigger so the value can't run underneath. At the\n * inline END, not the right: a right-to-left form reads the value from the right,\n * and a chevron parked on top of its first word hid exactly the part that says\n * what was picked. */\nexport function FieldChevron({ className, ...rest }: FieldChevronProps) {\n  return (\n    <ChevronDown\n      {...rest}\n      // After the spread: the chevron is decoration beside a control that already has\n      // a name, and an `aria-hidden` a caller could switch off by accident is a second\n      // announcement of the same field.\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\",\n        className,\n      )}\n    />\n  );\n}\n\n// Animated label that starts centred (as a placeholder) in an empty field and\n// floats up INSIDE the top strip on focus or once the field has a value. Sits on\n// the field's own surface, so no background chip and nothing to mismatch the card.\nexport const FLOATING_LABEL_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 text-sm text-[var(--text-placeholder)] transition-all\",\n  \"max-w-[calc(100%-1.5rem)] truncate\",\n  \"peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-[var(--text-secondary)]\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-[var(--text-secondary)]\",\n  \"peer-disabled:opacity-50\",\n);\n\n// The animated label again, as a ROW that the label and its \"?\" share — same\n// placement, same float, same type, but with the type on the row so the label\n// INHERITS it. It has to be that way round: `peer-focus:` compiles to a sibling\n// selector, so the classes have to sit on the element that is actually a sibling\n// of the input, and a label nested inside a wrapper is not one.\n//\n// Wider end clearance than the label alone takes (`3rem` rather than `1.5rem`),\n// because the controls that carry an animated label are the ones with something\n// at the end edge of the field — NumberInput's calculator is the case this was\n// written for. The label truncates a little sooner; the alternative was the \"?\"\n// sitting on top of a button (steering-design feedback #48).\nconst FLOATING_ROW_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 flex items-center gap-1 transition-all\",\n  \"max-w-[calc(100%-3rem)] text-sm text-[var(--text-placeholder)]\",\n  \"peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-[var(--text-secondary)]\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-[var(--text-secondary)]\",\n  \"peer-disabled:opacity-50\",\n);\n\n/**\n * The one place that assembles a labelled field: a `relative` wrapper around the\n * control (`children`) plus a floating label inside the top strip. Pass `staticLabel`\n * for controls that always have a value (selects); omit it for free-text fields whose\n * label animates from centred→up. Used by Input/Select/Textarea/NumberInput; the\n * dropdown controls that need a ref + menu keep their own wrapper but the same label\n * (via {@link FieldLabel}) and trigger ({@link FIELD_TRIGGER}) styles.\n */\nexport interface FloatingFieldProps extends ComponentPropsWithoutRef<\"div\"> {\n  htmlFor?: string;\n  label?: ReactNode;\n  staticLabel?: boolean;\n  /** Keep the label in the accessibility tree but out of the layout — what\n   *  {@link FIELD_DISPLAY} needs, since a floating label inside a field with no\n   *  field left would have nothing to float in. */\n  srOnlyLabel?: boolean;\n  /** Something interactive that belongs to the LABEL rather than to the value —\n   *  in practice a {@link FieldHint} \"?\" (dev#468). It is rendered in a flex row\n   *  with the label, so it is centred on the label's line by the layout instead\n   *  of by a hand-tuned `top-…`, and it can never drift when the type changes.\n   *\n   *  It rides an ANIMATED label too, and the two cases place it differently on\n   *  purpose. A static label has a field-wide strip to itself, so the hint sits\n   *  at the far end of it and a long label truncates into the gap. An animated\n   *  one belongs to a control with something at the end edge of the field — a\n   *  calculator, a stepper — so the hint follows the label instead, and it is\n   *  the label that gives way (steering-design feedback #48). */\n  hint?: ReactNode;\n  children: ReactNode;\n}\n\nexport function FloatingField({\n  className,\n  htmlFor,\n  label,\n  staticLabel,\n  srOnlyLabel,\n  hint,\n  children,\n  ...rest\n}: FloatingFieldProps) {\n  const withHint = hint !== undefined && !srOnlyLabel;\n  const atEnd = withHint && staticLabel;\n  const labelEl = label !== undefined && (\n    <label\n      htmlFor={htmlFor}\n      className={\n        srOnlyLabel\n          ? \"sr-only\"\n          : atEnd\n            ? cn(\"pointer-events-none min-w-0 truncate\", STATIC_LABEL_TYPE)\n            : withHint\n              ? \"pointer-events-none min-w-0 truncate\"\n              : staticLabel\n                ? FLOATING_LABEL_STATIC\n                : FLOATING_LABEL_CLASS\n      }\n    >\n      {label}\n    </label>\n  );\n  return (\n    // `relative` is the whole contract of this wrapper — the floating label and every\n    // control that hangs off it (a reveal toggle, a chevron) are positioned against\n    // this box — so it is merged through `cn` after the spread rather than left where\n    // a caller's stray `className` or `style` could unset it.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {children}\n      {withHint ? (\n        // Static: `inset-x-3` rather than `start-3`, so a long label truncates at\n        // the field's own end padding instead of running under the chevron.\n        // Animated: the row floats with the label and is only as wide as it needs\n        // to be. Either way the hint keeps its width (`shrink-0`) and the label\n        // is the one that gives way.\n        <div\n          className={\n            atEnd\n              ? \"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\"\n              : FLOATING_ROW_CLASS\n          }\n        >\n          {labelEl}\n          <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n        </div>\n      ) : (\n        labelEl\n      )}\n    </div>\n  );\n}\n\n/**\n * The \"?\" that explains a field, on the field's own label line (dev#468).\n *\n * Pass it to a labelled {@link Select} / {@link Input} as `hint`. It exists as a\n * component rather than as a snippet each form repeats because the previous\n * version was exactly that snippet — an absolutely-positioned button whose\n * `top-1.5` was one guess at where an 11px label sits — and the reporter's\n * follow-up was *\"question mark is not centered. Is it part of the hoc?\n * positioning problems seem quite frequently.\"* It was not part of the HOC. Now\n * it is, and there is one place left where the answer can be wrong.\n *\n * A `<button>` rather than a bare icon: hover alone puts the explanation out of\n * reach of a keyboard and of every touch device, and the tooltip shows on focus\n * too. The text is also its accessible name, so a screen reader gets it without\n * the bubble ever opening.\n */\nexport interface FieldHintProps extends Omit<ComponentPropsWithoutRef<\"button\">, \"children\"> {\n  /** The explanation. It is both the tooltip's text and, by default, the button's\n   *  accessible name, so a screen reader gets it without the bubble ever opening. */\n  label: string;\n  /** Default `\"start\"`: before the hint in the reading direction (the left in LTR, the\n   *  right in RTL). `left` / `right` stay physical. */\n  side?: TooltipSide;\n}\n\nexport function FieldHint({\n  label,\n  side = \"start\",\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: FieldHintProps) {\n  return (\n    // `tap=\"toggle\"` (0.25): the \"?\" exists only to explain, so a tap on a phone shows\n    // the bubble and the next tap hides it — the touch rule (no bubble left behind by a\n    // tap) would otherwise make it show nothing at all.\n    <Tooltip label={label} side={side} portal tap=\"toggle\">\n      <button\n        {...rest}\n        // `type` after the spread, not before. These render inside forms — that is the\n        // only place a field has a label line — and a hint that defaulted to `submit`\n        // because a caller spread a props object at it would save the form on a click\n        // meant to explain a field.\n        type=\"button\"\n        // The explanation names the button unless the caller says otherwise; passing\n        // `aria-label` is how you shorten it for a screen reader without shortening\n        // what the bubble shows.\n        aria-label={ariaLabel ?? label}\n        // Nothing to activate: the tooltip opens on hover and on focus, and a\n        // click that did something as well would be a second, undiscoverable\n        // behaviour on the same target.\n        onClick={(e) => e.preventDefault()}\n        className={cn(\n          \"flex text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)]\",\n          className,\n        )}\n      >\n        <HelpCircle className=\"size-3.5\" />\n      </button>\n    </Tooltip>\n  );\n}\n\nexport interface LabelProps extends ComponentPropsWithoutRef<\"label\"> {\n  /** Draw the required mark after the text. The mark is `aria-hidden`: what a\n   *  screen reader hears is the control's own `required` / `aria-required`, which\n   *  the caller still sets — a \"star\" read out as the last word of every name is\n   *  noise, and a control that is not marked required is not required however its\n   *  label looks. */\n  required?: boolean;\n  /** `sm` for a toolbar or a dense filter row (12px), `md` otherwise (14px). */\n  size?: \"sm\" | \"md\";\n  /** Dim the label with its control. A label ABOVE its field is not the field's\n   *  `peer`, so `peer-disabled:` cannot reach it the way it reaches a floating one. */\n  disabled?: boolean;\n}\n\n/**\n * The label ABOVE a field, for the places a floating label does not fit: a control\n * the kit did not render (a third-party picker, a range slider, a group of radios),\n * a filter bar whose fields are unlabelled {@link Select}s, a form that sets labels\n * above its fields throughout.\n *\n * A new component rather than a mode of {@link FieldLabel}, because the two share\n * nothing but the word. `FieldLabel` is an absolutely positioned `<span>` inside a\n * trigger's `relative` box and has to stay exactly that for every dropdown that\n * already lines up with it; this is a real `<label>` in normal flow, with `htmlFor`,\n * that a click focuses the control through. Spacing below it belongs to the caller's\n * layout (`space-y-1.5` on the pair, typically), as it would for any block.\n */\nexport function Label({ required, size = \"md\", disabled, className, children, ...rest }: LabelProps) {\n  return (\n    <label\n      {...rest}\n      className={cn(\n        \"inline-flex items-center gap-0.5 font-medium leading-none text-[var(--text-primary)]\",\n        size === \"sm\" ? \"text-xs\" : \"text-sm\",\n        disabled && \"cursor-default opacity-50\",\n        className,\n      )}\n    >\n      {children}\n      {required && (\n        <span aria-hidden className=\"text-[var(--danger)]\">\n          *\n        </span>\n      )}\n    </label>\n  );\n}\n\n/**\n * The message under a field that is wrong, and the wiring that attaches it.\n *\n * `invalid` paints the field ({@link FIELD_INVALID}) and sets `aria-invalid`, and\n * there it stopped: a field that announces \"invalid\" and nothing else has told a\n * screen-reader user only that they are stuck. The message was always on screen —\n * a sibling `<p>` beside the field — and never in the accessibility tree, because\n * attaching it needs an id on the message and an `aria-describedby` on the control,\n * and no caller was going to mint one by hand for every field on a form.\n *\n * Two rules the wiring has to keep:\n *\n *  - **Merge, never replace.** A field may already point at a hint (\"at least twelve\n *    characters\"). Overwriting that reference to say the field is wrong trades one\n *    half of the answer for the other — and it keeps the half the user has already\n *    read. The hint stays first: it is the standing advice, the error is the news.\n *  - **`invalid` keeps working alone**, for the forms whose message lives somewhere\n *    else entirely (a summary at the top of a dialog). There is nothing to point at\n *    then, and a dangling id describes the field as nothing at all.\n *\n * Deliberately NOT `role=\"alert\"`. `aria-describedby` is read when focus reaches the\n * control, which is where a field's own error is wanted; an alert would also interrupt\n * whatever is being read at the time, on every keystroke of a form that re-validates\n * as you type.\n */\nconst FIELD_ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\n\nfunction useFieldError(\n  error: ReactNode,\n  invalid: boolean | undefined,\n  describedBy: string | undefined,\n  /** The caller's own `aria-invalid`. A form library sets THIS (see `@eifi1/ui-kit/rhf`\n   *  `FormControl`), not our `invalid` prop — and a field that announces invalid should\n   *  look it too, as NumberField and the pickers already did. */\n  ariaInvalid?: unknown,\n) {\n  const errorId = useId();\n  // `null`, `false` and `\"\"` are what a caller's `touched && errors.iban` evaluates to\n  // on the happy path. None of them is a message, and pointing the control at one\n  // would describe it with an empty node.\n  const hasError = error !== undefined && error !== null && error !== false && error !== \"\";\n  return {\n    /** A field carrying a message that says what is wrong with it IS wrong. */\n    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === \"true\",\n    describedBy: hasError ? (describedBy ? `${describedBy} ${errorId}` : errorId) : describedBy,\n    errorEl: hasError ? (\n      <p id={errorId} className={FIELD_ERROR_CLASS}>\n        {error}\n      </p>\n    ) : null,\n  };\n}\n\n/**\n * A field and its message as one box.\n *\n * The message cannot go INSIDE the field's own `relative` box. The password reveal\n * toggle is `inset-y-0` and the select chevron is `top-1/2`, so both centre on\n * whatever that box contains — put two lines of message in it and the chevron drifts\n * down out of the field, between the value and the text. So the field keeps its box\n * and this wraps the pair.\n *\n * WHEN IT WRAPS. A field that never takes `error` renders nothing of its own here,\n * which is what keeps the prop additive: it is exactly the DOM it was before the prop\n * existed, down to the bare `<input>` an unlabelled {@link Input} drops straight into a\n * caller's flex row. A field that DOES take `error` — the key is passed, whatever its\n * value — is wrapped for as long as it is mounted, message or not (`reserve`).\n *\n * It used to wrap only while a message showed, and that cost the control its\n * identity: a fragment and a `<div>` are different elements at the same spot in the\n * tree, so React threw the `<input>` away and mounted a new one every time the message\n * came or went. Focus fell to `<body>`, the caret went with it, and an uncontrolled\n * field lost what had been typed — Kurvenschmiede's confirm-password dialog clears its\n * \"Wrong password\" on change, so the first keystroke of the retry dropped the user out\n * of the field. Keeping the box stops that; the field is never reparented.\n *\n * The other ways to keep it stable were worse. A box on EVERY field changes what every\n * flex row and grid in three apps lays out (`flex-1`, `w-56`, `col-span-2` on the\n * field would land on a child of the item instead of the item). A `display: contents`\n * box would keep the flex/grid item, but a contents box takes no margin, so a parent's\n * `space-y-*` stops spacing the field — the shape of Kurvenschmiede's reset-password\n * form and gear wizard, both `space-y-*` stacks of fields with `error` — and it moves\n * `first:`/`last:`/`> *` matches. A field passing `error` already took this plain box\n * whenever its message showed, so what changes is only that it keeps it while none\n * does; every such call site in the three apps sits in a block or a `space-y`/grid\n * stack where a full-width block box is the field's own size. The case it does change\n * is a field passing `error` whose `className` sizes it as a flex item (`flex-1` in a\n * row): that caller already lost the sizing while a message showed, and now sees the\n * same box without one. Pass `error` only where a message can actually appear.\n *\n * `className` is NOT moved out here, for the same reason — it goes on the field, as it\n * always has, so the box cannot silently change what that prop styles.\n */\nfunction FieldGroup({\n  errorEl,\n  reserve = false,\n  children,\n}: {\n  errorEl: ReactNode;\n  /** The caller passed `error`: keep the box even while there is no message. */\n  reserve?: boolean;\n  children: ReactNode;\n}) {\n  if (errorEl === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {errorEl}\n    </div>\n  );\n}\n\n/** The two names the password reveal toggle can wear. See {@link Input}. */\nexport interface PasswordRevealLabels {\n  /** While the value is hidden — activating the toggle will show it. */\n  show: string;\n  /** While the value is shown. */\n  hide: string;\n}\n\nexport const DEFAULT_PASSWORD_REVEAL_LABELS: PasswordRevealLabels = {\n  show: \"Show password\",\n  hide: \"Hide password\",\n};\n\n/** Caller's labels over the English defaults — the same shape as\n *  `resolveDataTableLabels`, so a consumer translates every kit string one way. */\nexport function resolvePasswordRevealLabels(\n  partial?: Partial<PasswordRevealLabels>,\n): PasswordRevealLabels {\n  if (!partial) return DEFAULT_PASSWORD_REVEAL_LABELS;\n  return { ...DEFAULT_PASSWORD_REVEAL_LABELS, ...partial };\n}\n\n/**\n * What the character counter of {@link Input} and {@link Textarea} (`showCount`) says.\n * The visible \"12/80\" is digits and a slash and is not translated; these are the words\n * a screen reader gets instead of it.\n */\nexport interface CharacterCountLabels {\n  /** The counter as part of the field's description, read when focus reaches the\n   *  field: \"12 of 80 characters\". */\n  count: (used: number, max: number) => string;\n  /** Said once, politely, on entering the last stretch before the limit: \"8\n   *  characters left\". */\n  remaining: (left: number) => string;\n  /** Said once, politely, on reaching the limit. */\n  limitReached: string;\n}\n\nexport const DEFAULT_CHARACTER_COUNT_LABELS: CharacterCountLabels = {\n  count: (used, max) => `${used} of ${max} characters`,\n  remaining: (left) => (left === 1 ? \"1 character left\" : `${left} characters left`),\n  limitReached: \"Character limit reached\",\n};\n\n/** The length the browser's own `maxLength` counts — UTF-16 code units — so the counter\n *  and the limit can never disagree about whether a field is full. */\nfunction textLength(value: unknown): number {\n  return value === undefined || value === null ? 0 : String(value).length;\n}\n\n/** The counter's length: the controlled `value`'s, else what the field has been typed\n *  to (from `defaultValue` on). `track` is called from the field's change handler. */\nfunction useTypedLength(value: unknown, defaultValue: unknown) {\n  const [typed, setTyped] = useState(() => textLength(defaultValue));\n  return { used: value !== undefined ? textLength(value) : typed, track: (text: string) => setTyped(text.length) };\n}\n\ntype CountZone = \"ok\" | \"near\" | \"limit\";\n\n/** The last stretch before the limit: a tenth of it, at least 1 and at most 20 — \"8\n *  left\" of 80, and 20 of 2,000 rather than 200, which is not \"near\" in any sense a\n *  person typing means. */\nfunction nearLimitAt(max: number): number {\n  return Math.min(20, Math.max(1, Math.ceil(max * 0.1)));\n}\n\nfunction countZone(used: number, max: number): CountZone {\n  if (used >= max) return \"limit\";\n  return max - used <= nearLimitAt(max) ? \"near\" : \"ok\";\n}\n\n/**\n * The live \"12/80\" under a field with `showCount` (keksdose K11: the admin broadcast,\n * support replies, canned replies and the handoff note each counted by hand, and one\n * announced every keystroke).\n *\n * Three channels, each saying only what it should:\n *  - the digits, `aria-hidden` — \"12 slash 80\" is not a sentence;\n *  - a `hidden` \"12 of 80 characters\" on the field's `aria-describedby`, so the count is\n *    read with the field when focus reaches it, and never while typing;\n *  - a polite live region that speaks ONCE per stretch: on entering the last tenth\n *    (\"8 characters left\") and on reaching the limit. A region that changed on every\n *    keystroke would talk over the user's own typing echo for the whole message.\n *    Nothing is said on mount: a stored note already near its limit is not news.\n */\nfunction CharacterCount({\n  id,\n  used,\n  max,\n  labels,\n  caption,\n}: {\n  id: string;\n  used: number;\n  max: number;\n  labels: CharacterCountLabels;\n  caption: ReactNode;\n}) {\n  const zone = countZone(used, max);\n  // What the live region holds, re-set only when the stretch changes — the previous\n  // render's zone kept in state, the pattern React documents for \"adjusting state when\n  // a prop changes\", so the region's text (and so the announcement) changes at most\n  // once per crossing.\n  const [said, setSaid] = useState<{ zone: CountZone; text: string }>({ zone, text: \"\" });\n  if (said.zone !== zone) {\n    setSaid({\n      zone,\n      text: zone === \"near\" ? labels.remaining(max - used) : zone === \"limit\" ? labels.limitReached : \"\",\n    });\n  }\n  return (\n    // `relative` holds the sr-only region (see sr-only-containment.test).\n    <div className=\"relative mt-1 flex items-start gap-2\">\n      <div className=\"min-w-0 flex-1\">{caption}</div>\n      <span\n        aria-hidden\n        className={cn(\n          \"shrink-0 text-[11px] leading-tight tabular-nums\",\n          zone === \"limit\"\n            ? \"text-[var(--danger)]\"\n            : zone === \"near\"\n              ? \"text-[var(--warning)]\"\n              : \"text-[var(--text-muted)]\",\n        )}\n      >\n        {used}/{max}\n      </span>\n      <span id={id} hidden>\n        {labels.count(used, max)}\n      </span>\n      <span role=\"status\" className=\"sr-only\">\n        {said.text}\n      </span>\n    </div>\n  );\n}\n\n/** What goes under a text field: the caption (beside the counter, when there is one),\n *  then the error. `null` when there is nothing, so a field with none keeps exactly the\n *  DOM it had (see {@link FieldGroup}). */\nfunction fieldBelow(hint: FieldHintParts, counter: ReactNode, errorEl: ReactNode): ReactNode {\n  if (counter === null && hint.captionText === undefined && errorEl === null) return null;\n  return (\n    <>\n      {counter ?? <FieldCaption parts={hint} />}\n      {errorEl}\n    </>\n  );\n}\n\n/**\n * kastlan 8: a caller's placeholder on a LABELLED field, shown once the label has\n * floated out of its way — on focus — and transparent until then, while the label sits\n * where the placeholder would be. Without it the field forced `placeholder=\" \"` for the\n * float trick and dropped the caller's text without a word (kastlan's \"note\" field lost\n * its hint). `:placeholder-shown` still drives the float: it matches an empty field\n * whatever the placeholder's text is.\n */\nconst FLOATING_PLACEHOLDER_ON_FOCUS = \"focus:placeholder:text-[var(--text-placeholder)]\";\n\n/** A placeholder with something to show. `\"\"` and blanks are the float trick's own\n *  `\" \"`, never the caller's hint. */\nconst hasPlaceholderText = (placeholder: string | undefined): placeholder is string =>\n  placeholder !== undefined && placeholder.trim() !== \"\";\n\n// Native date/time inputs only reveal the calendar via the tiny trailing icon;\n// open the picker on a click anywhere in the field instead (feedback #224).\nconst PICKER_TYPES = new Set([\"date\", \"datetime-local\", \"month\", \"time\", \"week\"]);\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: ReactNode;\n  /** Classes for the `<input>` itself, as distinct from `className`, which\n   *  styles the field WRAPPER once a `label` turns this into a FloatingField.\n   *  Without it a labelled Input had no way to reach its own element — so\n   *  `tabular-nums` on a numeric text field, which NumberInput has supported\n   *  all along through the identically named prop, was simply unavailable. */\n  inputClassName?: string;\n  /** {@link FIELD_DISPLAY} — on a phone, drop the chrome and set the value as a\n   *  heading. For the one field a form is about (a feedback subject, an account\n   *  name), never for a stack of them. Labelled fields only: the label is what\n   *  the placeholder falls back to once it goes `sr-only`. */\n  variant?: \"field\" | \"display\";\n  /** The field is required and unanswered, or holds something that cannot be\n   *  saved — {@link FIELD_INVALID}, the same rose border/ring `Select` has worn\n   *  since feedback #235.\n   *\n   *  It exists here because writing `aria-invalid` by hand did NOT do this. The\n   *  attribute spreads onto the element and nothing styles it — there is no\n   *  `[aria-invalid]` rule in this package or in either consumer's stylesheet —\n   *  so three Keksdose dialogs flagged a mismatched passphrase to a screen reader\n   *  and painted the field exactly as if it were fine. Setting the prop sets the\n   *  attribute too, so the two can no longer be spelled separately. */\n  invalid?: boolean;\n  /** What is wrong with the value, in the caller's own words (\"That IBAN has 21\n   *  digits\"). Rendered under the field, pointed at by the control's\n   *  `aria-describedby` — MERGED with any the caller already passed — and implies\n   *  `invalid`, so the field paints as well as announces. `invalid` alone still\n   *  covers the case where the message lives elsewhere. See {@link useFieldError}. */\n  error?: ReactNode;\n  /**\n   * Standing advice for the field (keksdose K4: Input had `error` but no `hint`, so the\n   * app built the caption by hand under each field, and half of those never reached a\n   * screen reader). The {@link Select} rule, so every field reads alike:\n   *  - plain TEXT (a string or a number) is a caption UNDER the field, attached with\n   *    `aria-describedby` — after the caller's own ids, before the error's;\n   *  - anything else (a {@link FieldHint} \"?\") rides the label line beside the\n   *    animated label, as NumberInput's does — or, on a field with no label, sits at the\n   *    field's end edge outside the box, and `className` then styles that row.\n   */\n  hint?: ReactNode;\n  /**\n   * A live \"12/80\" under the field, with `maxLength` (keksdose K11 — the broadcast,\n   * support and handoff-note fields counted by hand). Read with the field as \"12 of 80\n   * characters\", and announced politely only on entering the last stretch and on\n   * reaching the limit — never on every keystroke. See {@link CharacterCount}. Ignored\n   * without a `maxLength`: a count with no limit is not what this answers. Counts\n   * UTF-16 code units, as `maxLength` itself does. Controlled, it counts `value`;\n   * uncontrolled, `defaultValue` and then every change event — a value written from\n   * outside without one (a form library's `reset`) shows from the next keystroke.\n   */\n  showCount?: boolean;\n  /** The counter's words. See {@link CharacterCountLabels}. */\n  countLabels?: Partial<CharacterCountLabels>;\n  /** Names for the password reveal toggle, English by default — it is the one\n   *  string this component renders on its own behalf, and a German form was\n   *  reading it out in English. See {@link PasswordRevealLabels}. */\n  passwordLabels?: Partial<PasswordRevealLabels>;\n}\n\n/** The counter's words: the `characterCount` namespace — prop > `<UiKitProvider\n *  labels>` > English. One place, so the namespace is named once. */\nfunction useCharacterCountLabels(prop: Partial<CharacterCountLabels> | undefined): CharacterCountLabels {\n  return useKitLabels(\"characterCount\", DEFAULT_CHARACTER_COUNT_LABELS, prop);\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(props, ref) {\n  const {\n    className,\n    inputClassName,\n    label,\n    id,\n    placeholder,\n    type,\n    variant = \"field\",\n    invalid,\n    error,\n    hint,\n    showCount,\n    countLabels,\n    passwordLabels,\n    ...rest\n  } = props;\n  // Passed at all — even as `undefined` — the field keeps its box; see FieldGroup. The\n  // same for `hint` and `showCount` (keksdose, 0.22): a caption coming and going under\n  // the control must not rebuild it, or focus and the caret are lost mid-edit.\n  const reserve = \"error\" in props || \"hint\" in props || \"showCount\" in props;\n  const generated = useId();\n  const fieldId = id ?? generated;\n  const countId = useId();\n  const hintParts = useFieldHint(hint, rest[\"aria-describedby\"]);\n  const maxLength = rest.maxLength;\n  const counting = Boolean(showCount) && typeof maxLength === \"number\" && maxLength > 0;\n  const length = useTypedLength(rest.value, rest.defaultValue);\n  const countText = useCharacterCountLabels(countLabels);\n  const { isInvalid, describedBy, errorEl } = useFieldError(\n    error,\n    invalid,\n    // Caller's, caption, count — then the error, appended by the hook.\n    mergeDescribedBy(hintParts.describedBy, counting && countId),\n    rest[\"aria-invalid\"],\n  );\n  const counter = counting ? (\n    <CharacterCount\n      id={countId}\n      used={length.used}\n      max={maxLength}\n      labels={countText}\n      caption={<FieldCaption parts={hintParts} className=\"mt-0\" />}\n    />\n  ) : null;\n  const below = fieldBelow(hintParts, counter, errorEl);\n  const onChange = counting\n    ? (e: ChangeEvent<HTMLInputElement>) => {\n        length.track(e.target.value);\n        rest.onChange?.(e);\n      }\n    : rest.onChange;\n  const asDisplay = useMediaQuery(PHONE_QUERY, false) && variant === \"display\";\n  // Password fields get a reveal toggle so users can check what they typed.\n  const isPassword = type === \"password\";\n  const [revealed, setRevealed] = useState(false);\n  const effectiveType = isPassword && revealed ? \"text\" : type;\n  const handleClick = PICKER_TYPES.has(type ?? \"\")\n    ? (e: MouseEvent<HTMLInputElement>) => {\n        rest.onClick?.(e);\n        try {\n          // showPicker throws if unsupported or not user-activated — a click is\n          // a valid activation, so this is safe; guard for older browsers.\n          (e.currentTarget as HTMLInputElement & { showPicker?: () => void }).showPicker?.();\n        } catch {\n          /* ignore */\n        }\n      }\n    : rest.onClick;\n  const passwordText = useKitLabels(\"passwordReveal\", DEFAULT_PASSWORD_REVEAL_LABELS, passwordLabels);\n  const revealToggle = isPassword ? (\n    <button\n      type=\"button\"\n      // `tabIndex={-1}` sat here, which made this a painted, clickable control that\n      // Tab stepped straight over — on the one field whose value cannot be checked by\n      // looking at it. There is no mouse-only case for a reveal toggle; the people who\n      // cannot see what they typed are exactly who it is for. It is a tab stop now,\n      // and it needs a focus ring of its own, because FIELD_BASE's ring belongs to the\n      // input underneath and stays put while focus moves onto the button on top of it.\n      onClick={() => setRevealed((v) => !v)}\n      // …and since it is a tab stop, a field the user may not edit must not hand the\n      // keyboard a control that shows what is in it.\n      disabled={rest.disabled}\n      aria-label={revealed ? passwordText.hide : passwordText.show}\n      aria-pressed={revealed}\n      className=\"absolute inset-y-0 end-0 flex items-center rounded-e-md px-2.5 text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--brand)] disabled:cursor-default disabled:opacity-50\"\n    >\n      {revealed ? <EyeOff className=\"size-4\" /> : <Eye className=\"size-4\" />}\n    </button>\n  ) : null;\n  if (label === undefined) {\n    // A \"?\" with no label line to ride goes at the end edge, outside the box, and\n    // `className` moves to that row (see `hint`); without one nothing moves.\n    const endHint = hintParts.labelHint;\n    const ownClass = endHint === undefined ? className : undefined;\n    if (!isPassword) {\n      return (\n        <FieldGroup errorEl={below} reserve={reserve}>\n          <EndHintRow hint={endHint} className={className}>\n            <input\n              ref={ref}\n              id={id}\n              type={type}\n              placeholder={placeholder}\n              {...rest}\n              // AFTER the spread, so the prop wins — but OR-ed with whatever the spread\n              // carried, or setting `invalid` would have quietly deleted a caller's own\n              // `aria-invalid`. The prop is the one that also paints; a bare attribute\n              // still announces, which is all it ever did.\n              aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n              // Likewise merged rather than replaced — see {@link useFieldError}.\n              aria-describedby={describedBy}\n              onClick={handleClick}\n              onChange={onChange}\n              className={cn(FIELD_BASE, ownClass, inputClassName, isInvalid && FIELD_INVALID)}\n            />\n          </EndHintRow>\n        </FieldGroup>\n      );\n    }\n    return (\n      <FieldGroup errorEl={below} reserve={reserve}>\n        <EndHintRow hint={endHint} className={className}>\n          <div className={cn(\"relative\", ownClass)}>\n            <input\n              ref={ref}\n              id={id}\n              type={effectiveType}\n              placeholder={placeholder}\n              {...rest}\n              aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n              aria-describedby={describedBy}\n              onChange={onChange}\n              className={cn(FIELD_BASE, \"pe-9\", inputClassName, isInvalid && FIELD_INVALID)}\n            />\n            {revealToggle}\n          </div>\n        </EndHintRow>\n      </FieldGroup>\n    );\n  }\n  const ownPlaceholder = hasPlaceholderText(placeholder);\n  return (\n    <FieldGroup errorEl={below} reserve={reserve}>\n      <FloatingField\n        className={className}\n        htmlFor={fieldId}\n        label={label}\n        srOnlyLabel={asDisplay}\n        hint={hintParts.labelHint}\n      >\n        <input\n          ref={ref}\n          id={fieldId}\n          type={effectiveType}\n          // A labelled field with no placeholder of its own gets a single space, which\n          // feeds the floating label's peer-placeholder-shown trick. A caller's own is\n          // kept and shown on focus, once the label has floated out of its way (kastlan\n          // 8) — see FLOATING_PLACEHOLDER_ON_FOCUS. With the label sr-only there is no\n          // float left to drive, and an empty borderless line would say nothing at all\n          // — so there the label text is the placeholder when the caller gave none.\n          placeholder={\n            asDisplay\n              ? (placeholder ?? (typeof label === \"string\" ? label : \" \"))\n              : ownPlaceholder\n                ? placeholder\n                : \" \"\n          }\n          {...rest}\n          aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n          aria-describedby={describedBy}\n          onClick={handleClick}\n          onChange={onChange}\n          className={cn(\n            asDisplay\n              ? cn(FIELD_DISPLAY, \"text-xl font-semibold leading-snug\")\n              : cn(FLOATING_INPUT_CLASS, ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS),\n            isPassword && \"pe-9\",\n            inputClassName,\n            isInvalid && FIELD_INVALID,\n          )}\n        />\n        {revealToggle}\n      </FloatingField>\n    </FieldGroup>\n  );\n});\nInput.displayName = \"Input\";\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, \"size\"> {\n  label?: ReactNode;\n  /** See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** See {@link Input}'s `error`. */\n  error?: ReactNode;\n  /** A {@link FieldHint} for the label line — see {@link FloatingField}. Plain\n   *  TEXT (a string or a number) is a caption instead, and goes UNDER the field\n   *  like every other field's hint, attached through `aria-describedby`: the label\n   *  line is 11px of strip shared with the label, and a sentence placed there was\n   *  set in the value's type on top of both the label and the value. On an\n   *  UNLABELLED Select (no label line) a FieldHint sits at the field's end edge,\n   *  outside the box. */\n  hint?: ReactNode;\n  /**\n   * `\"sm\"`: a 28px, 12px-type select for a toolbar or a table header, where the\n   * 36px field stands a head taller than the buttons beside it. `\"md\"` (default)\n   * is the field every form uses. Unlabelled selects only — a floating label needs\n   * the tall box to float in, so a labelled Select ignores `\"sm\"`.\n   *\n   * A NUMBER is still the native attribute (the rows of a list box) and is passed\n   * straight through, so the one HTML meaning of `size` keeps working. Above 1 (as\n   * with `multiple`) the browser draws a list box, and the Select drops its chevron\n   * and the end padding reserved for it.\n   */\n  size?: \"sm\" | \"md\" | number;\n  /** Classes for the `<select>` itself. `className` styles the WRAPPER — the box\n   *  the chevron is positioned against — so it could set a width and nothing\n   *  else; this is the way to the element. See {@link Input}'s `inputClassName`. */\n  selectClassName?: string;\n  /**\n   * Why the choice cannot be changed — {@link Button}'s `disabledReason`, for a select\n   * that SAVES on change (a role picker in a members table, a status in a row). keksdose\n   * K3: those sat inside a hand-rolled `SaveGuard` that forced a native `disabled`, which\n   * took the field out of the tab order so the reason never reached a keyboard.\n   *\n   * With a reason the select is `aria-disabled` instead — still focusable, still showing\n   * its value — its list does not open (pointer and keys are swallowed, Tab and Escape\n   * excepted), `onChange` is never called, and the reason is in the kit {@link Tooltip}\n   * and on `aria-describedby`. It wears the settled look of a disabled field and drops\n   * its chevron, as a disabled Select does (dev#474). It wins over `disabled`.\n   *\n   * Use it CONTROLLED (`value` + `onChange`): React puts a controlled value back after\n   * the swallowed change. A touch platform's own picker may still open; nothing it picks\n   * is kept or reported.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This select COMMITS — choosing saves. Under a locked {@link WriteLockProvider} it is\n   * locked the `disabledReason` way with the lock's reason (which wins over its own).\n   * No provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3.\n   */\n  commit?: boolean;\n}\n\n// The compact select: the field's colours, a toolbar button's height. `py-0` and a\n// fixed height rather than a smaller padding, so the box is 28px whatever line\n// height the caller's type brings with it.\nconst SELECT_SM = \"h-7 py-0 ps-2 pe-7 text-xs\";\n\n/** Keys a locked select still answers: leaving it, and dismissing its tooltip. Every\n *  other key would open the list or step the value. */\nconst LOCKED_SELECT_KEYS = new Set([\"Tab\", \"Escape\", \"Shift\"]);\n\n/** FIELD_BASE's `disabled:` look, for a select that is locked without being `disabled`\n *  (the `:disabled` variants cannot match it). */\nconst FIELD_LOCKED = \"cursor-not-allowed bg-[var(--bg-surface-2)] text-[var(--text-muted)]\";\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(props, ref) {\n  const {\n    className,\n    label,\n    id,\n    children,\n    invalid,\n    error,\n    hint,\n    size,\n    selectClassName,\n    disabledReason,\n    commit,\n    onMouseDown,\n    onKeyDown,\n    onChange,\n    ...rest\n  } = props;\n  // See Input's `reserve`.\n  const reserve = \"error\" in props || \"hint\" in props || \"showCount\" in props;\n  const generated = useId();\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  // Only a number reaches the DOM; the two words are this component's own.\n  const nativeSize = typeof size === \"number\" ? size : undefined;\n  // A numeric size above 1 (or `multiple`) makes the browser draw a LIST BOX — all\n  // the rows in the field, no menu to drop. The dropdown dress did not fit it: the\n  // chevron was centred on a box several rows tall, sat on top of the rows' text\n  // at the end edge, and `pe-9` clipped every option nine units early. A list box\n  // gets the plain field instead — its own native scroll, no chevron, even padding.\n  const listBox = (nativeSize !== undefined && nativeSize > 1) || Boolean(rest.multiple);\n  const small = size === \"sm\" && label === undefined;\n  const fieldId = id ?? generated;\n  const hintId = useId();\n  // Text is a caption under the field; anything else (a FieldHint) rides the label\n  // line. See `hint` above. An empty string is no caption at all.\n  const textHint = (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n  const { isInvalid, describedBy, errorEl } = useFieldError(\n    error,\n    invalid,\n    // The caption goes in BEFORE the error — the standing advice first, the news\n    // second, the order useFieldError keeps for a caller's own description. A lock's\n    // reason sits between the two.\n    mergeDescribedBy(rest[\"aria-describedby\"], textHint && hintId, locked && lock.reasonId),\n    rest[\"aria-invalid\"],\n  );\n  const below =\n    textHint || errorEl !== null ? (\n      <>\n        {textHint && (\n          <p id={hintId} className=\"mt-1 text-[11px] leading-tight text-[var(--text-muted)]\">\n            {hint}\n          </p>\n        )}\n        {errorEl}\n      </>\n    ) : null;\n  // Custom chevron (native arrow hidden via appearance-none) so it sits a touch\n  // in from the end border and matches both themes — feedback #223. A DISABLED\n  // select has no menu to drop, so it drops the chevron too: the arrow is the one\n  // thing on the control that promises a choice (Keksdose dev#474, where the\n  // account type became read-only and still looked exactly like a picker). A locked\n  // one has no menu either.\n  const chevron =\n    rest.disabled || listBox || locked ? null : (\n      <FieldChevron className={small ? \"end-1.5 size-3.5\" : undefined} />\n    );\n  // `pe-9` is the room the chevron takes; a list box has none to make room for.\n  //\n  // A list box's height is `size` rows plus its padding, but its rows are clipped at\n  // the PADDING edge, not the content edge — so FIELD_BASE's `pb-2` showed the next\n  // row through the bottom padding: `size={4}` drew four and a half. The vertical room\n  // moves onto the rows instead (option padding counts toward the row height the\n  // browser sizes the box by), and the box keeps no bottom padding: exactly `size`\n  // whole rows, at any width.\n  const dress = listBox ? \"overflow-y-auto [&_option]:py-1\" : \"appearance-none pe-9\";\n  // Locked: focusable, but nothing opens the list or moves the value, and nothing is\n  // reported. The no-op `onChange` keeps a controlled select's value where React put\n  // it (and keeps React from warning about a `value` with no handler).\n  const interaction = locked\n    ? {\n        disabled: undefined,\n        \"aria-disabled\": true as const,\n        onMouseDown: (e: MouseEvent<HTMLSelectElement>) => e.preventDefault(),\n        onKeyDown: (e: KeyboardEvent<HTMLSelectElement>) => {\n          if (!LOCKED_SELECT_KEYS.has(e.key) && !e.ctrlKey && !e.metaKey) e.preventDefault();\n        },\n        onChange: () => {},\n      }\n    : { onMouseDown, onKeyDown, onChange };\n  // While locked the field sits in the reason's Tooltip, which becomes the outermost\n  // box — so `className` (a width, a grid cell) moves onto it, and the form keeps its\n  // layout. `block` so a full-width field stays full width inside it.\n  const boxClass = locked ? undefined : className;\n  const withReason = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} className={cn(\"block\", className)}>\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n  if (label === undefined) {\n    const select = (\n      <select\n        ref={ref}\n        // `id` is destructured out of the props to feed `fieldId`, and this branch\n        // never put it back — so an UNLABELLED Select swallowed it and the\n        // consumer's own `<label for=\"…\">` pointed at nothing. The control stayed\n        // in the tab order with no accessible name at all: reachable, and silent\n        // when it was reached. Input and Textarea both forward it here; this is\n        // the third one doing the same thing.\n        id={id}\n        size={nativeSize}\n        {...rest}\n        {...interaction}\n        // OR-ed with the spread for the reason spelled out on Input's copy: this\n        // branch wrote `invalid || undefined`, so passing `aria-invalid` by hand\n        // to a Select — which is what a caller does when the validity is\n        // `\"grammar\"` or `\"spelling\"`, or when the paint is not wanted — had the\n        // attribute silently dropped. Input has never done that.\n        aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n        aria-describedby={describedBy}\n        className={cn(\n          FIELD_BASE,\n          dress,\n          listBox && \"py-0\",\n          small && SELECT_SM,\n          locked && FIELD_LOCKED,\n          selectClassName,\n          isInvalid && FIELD_INVALID,\n        )}\n      >\n        {children}\n      </select>\n    );\n    // A FieldHint with no label line to ride (0.15.5 P8): an unlabelled Select — named\n    // by `aria-label` or a `<label>` of the caller's — dropped a non-text `hint`\n    // without a trace, so the \"?\" a caller passed never rendered and a test looking\n    // for its button found none. It goes at the end of the field instead, outside the\n    // box, as the label line's own hint goes at the end of the label.\n    if (hasContent(hint) && !textHint) {\n      return (\n        <FieldGroup errorEl={below} reserve={reserve}>\n          {withReason(\n            <div className={cn(\"flex items-center gap-1.5\", boxClass)}>\n              <div className=\"relative min-w-0 flex-1\">\n                {select}\n                {chevron}\n              </div>\n              <span className=\"flex shrink-0 items-center\">{hint}</span>\n            </div>,\n          )}\n        </FieldGroup>\n      );\n    }\n    return (\n      <FieldGroup errorEl={below} reserve={reserve}>\n        {withReason(\n          <div className={cn(\"relative\", boxClass)}>\n            {select}\n            {chevron}\n          </div>,\n        )}\n      </FieldGroup>\n    );\n  }\n  return (\n    <FieldGroup errorEl={below} reserve={reserve}>\n      {withReason(\n        <FloatingField\n          className={boxClass}\n          htmlFor={fieldId}\n          label={label}\n          staticLabel\n          hint={textHint ? undefined : hint}\n        >\n          <select\n            ref={ref}\n            id={fieldId}\n            size={nativeSize}\n            {...rest}\n            {...interaction}\n            aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n            aria-describedby={describedBy}\n            className={cn(\n              FIELD_BASE,\n              // The floated label takes the top strip of a list box too, so its first\n              // row starts under the label rather than behind it. No bottom padding — see\n              // `dress`.\n              listBox ? \"pt-5 pb-0\" : FIELD_FLOATING_PAD,\n              \"peer\",\n              dress,\n              locked && FIELD_LOCKED,\n              selectClassName,\n              isInvalid && FIELD_INVALID,\n            )}\n          >\n            {children}\n          </select>\n          {chevron}\n        </FloatingField>,\n      )}\n    </FieldGroup>\n  );\n});\nSelect.displayName = \"Select\";\n\n/**\n * The lower edge of {@link TEXTAREA_LABEL_STRIP} (0.25, Kurvenschmiede).\n *\n * The 0.24 strip ends on a hard line, and a line of text scrolled most of the way under\n * it left its lower edge showing below that line: in a pasted table, a row of comma\n * tails between the strip and the first whole line (`0,5;1,9` cut above its baseline is\n * `, ,`). This layer, hung under the strip, closes that gap. What it draws depends on\n * how much of the line on its way out is still below the strip ({@link labelEdge}):\n *\n * - **Half a line or less** — its descenders, the feet of its letters: covered, solid,\n *   down to exactly where that line's box ends. The strip's bottom snaps to the line\n *   box, so the row of tails is gone and the next line, which starts there, is not\n *   touched.\n * - **More than half** — a line you can still read: a soft edge, the strip's surface\n *   fading into it over {@link LABEL_EDGE_SOFT_PX}, where 0.24 cut it hard. Never taller\n *   than the part of that line already gone, so it grows from nothing as a line starts\n *   to move and never reaches the next one.\n * - **Nothing to cover** — at rest, or a line boundary right on the strip's edge:\n *   nothing drawn. An unscrolled first line is never covered (at rest the strip covers\n *   the top padding and nothing else, as in 0.24), and neither is any whole line.\n *\n * Why not one of the two alone. A plain fade under the strip, as tall as the tails,\n * dims the top of the first WHOLE line whenever it sits right under the strip (its\n * capitals start about 4px into a 20px line), and only half-hides the tails, which sit\n * in its fading part. A plain snap to the line box would hide a whole line the moment\n * one starts to scroll. The half-line threshold keeps what is shown legible: a line is\n * either hidden or shown with most of its letters, never as a row of stray marks.\n *\n * Its height and solid part are `--label-strip-edge` / `--label-strip-edge-solid`,\n * written by {@link TextareaLabelStrip} from the textarea's `scrollTop` and line height\n * on every scroll; unset (no layout, no script yet) the height is 0 and nothing shows.\n * A pseudo-element of the strip, so it inherits everything the strip already gets\n * right: shown only while the label is floated, the same horizontal insets (stopped\n * short of a classic scrollbar, on either side — RTL included), painted under the\n * label. Its colour is INHERITED from the strip (`bg-inherit`): `--bg-surface`, and the\n * disabled / `[readonly]` `--bg-surface-2`, in both themes, with no second copy of\n * those selectors to keep in step. The soft part is a mask over that colour (alpha\n * only — the `#000` is the mask's opacity, not a colour on screen).\n */\nconst TEXTAREA_LABEL_EDGE = cn(\n  \"after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--label-strip-edge,0px)] after:content-['']\",\n  \"after:bg-inherit after:[mask-image:linear-gradient(#000_var(--label-strip-edge-solid,0px),transparent)]\",\n);\n\n/** The soft edge over a line still more than half in view, in px: \"a few pixels\" —\n *  enough to take the cut off its letters, little enough to leave them legible. */\nconst LABEL_EDGE_SOFT_PX = 3;\n\n/**\n * {@link TEXTAREA_LABEL_EDGE}'s height and solid part, in px, for a field scrolled\n * `scrollTop` with lines `lineHeight` tall.\n *\n * The strip covers the top padding exactly, so line boxes meet its lower edge whenever\n * `scrollTop` is a whole number of lines; `gone` is how far the line now on its way out\n * has passed under it, `left` how much of it is still below. A line height that is not\n * a length (`normal`) gives no line boxes to snap to: only the soft edge then.\n */\nfunction labelEdge(scrollTop: number, lineHeight: number): { height: number; solid: number } {\n  if (!(scrollTop > 0)) return { height: 0, solid: 0 };\n  if (!(lineHeight > 0)) return { height: Math.min(scrollTop, LABEL_EDGE_SOFT_PX), solid: 0 };\n  const gone = scrollTop % lineHeight;\n  const left = gone === 0 ? 0 : lineHeight - gone;\n  if (left > 0 && left <= lineHeight / 2) return { height: left, solid: left };\n  return { height: Math.min(gone, LABEL_EDGE_SOFT_PX), solid: 0 };\n}\n\n/**\n * The backdrop of a labelled {@link Textarea}'s label strip (Kurvenschmiede, 0.24).\n *\n * The report: paste a long table into ColumnMapper, the field scrolls, and the floated\n * \"Paste a table\" / \"Tabelle einfügen\" sits ON the first visible line of text — on\n * desktop and on a phone. Not a ColumnMapper bug: every labelled textarea that scrolls\n * did it. An `<input>` has one line that never moves, so the strip FIELD_FLOATING_PAD\n * leaves for the label is always empty there; a textarea's top padding is part of its\n * SCROLLING area, and once the content scrolls the lines travel up through the strip\n * and under the label.\n *\n * The fix makes that padding stay put: this layer is a later sibling of the textarea\n * (so `peer-*` reaches it, and as a positioned box it paints above the textarea's\n * text), the label paints above it in turn, and it covers exactly the top padding —\n * `top-px` / `inset-x-px` inside the 1px border, `h-4` = `pt-4`. At rest it covers\n * padding and nothing else, so no pixel of an unscrolled line is ever hidden; scrolled\n * text slides out of sight under it instead of through the label.\n *\n * Why a layer and not \"start the scrolling area below the strip\" (a wrapper that draws\n * the border and background, the textarea transparent inside it): the box would stop\n * being the textarea. Its focus outline, its brand border on focus, the invalid ring,\n * the disabled and read-only greys and every caller's `[&_textarea]:…` would all have\n * to be rebuilt on the wrapper with `focus-within:` / `has-[…]:`, and a caller's\n * `style={{ height }}` would size the scroller rather than the field. The layer leaves\n * all of that exactly where it was.\n *\n * What it has to match, it matches from the same tokens the field uses: the surface is\n * FIELD_BASE's `--bg-surface`, and `--bg-surface-2` for `disabled` and `[readonly]` —\n * on the same ATTRIBUTE selector FIELD_BASE uses, for the reason given there. Focus and\n * `invalid` change only the border and the ring, which are outside the layer, so they\n * need nothing. Both themes come with the variables. The inner corners are the field's\n * radius (`rounded-md`, 6px) less the 1px border, so the rounded border is never cut\n * into — a literal 5px rather than `var(--radius-md)`, which Tailwind emits only where\n * a utility uses it and the kit's token check refuses (token-vars-declared).\n *\n * Hidden (`display: none`) until the label floats: an empty, unfocused field has\n * nothing that could scroll, and it renders exactly as it did before 0.24. Pointer\n * events pass through, so a click on the strip still lands in the field.\n *\n * The one thing CSS cannot know is a classic scrollbar's width, and a strip across the\n * whole inner width would hide the scrollbar's top arrow — see {@link TextareaLabelStrip}.\n *\n * Its lower edge, where a line scrolled half under it used to leave its tails showing,\n * is {@link TEXTAREA_LABEL_EDGE} (0.25).\n */\nconst TEXTAREA_LABEL_STRIP = cn(\n  \"pointer-events-none absolute inset-x-px top-px hidden h-4 rounded-t-[5px] bg-[var(--bg-surface)]\",\n  \"peer-focus:block peer-[:not(:placeholder-shown)]:block\",\n  \"peer-disabled:bg-[var(--bg-surface-2)] peer-[[readonly]]:bg-[var(--bg-surface-2)]\",\n  TEXTAREA_LABEL_EDGE,\n);\n\n/**\n * {@link TEXTAREA_LABEL_STRIP}, stopped short of a classic scrollbar.\n *\n * A Windows / Linux desktop draws a textarea's vertical scrollbar INSIDE the border, in\n * a gutter it takes from the content box (15px in Chromium); a strip across the full\n * inner width would sit on top of the scrollbar's up arrow. So the gutter is measured —\n * border box less client width less the borders — and the strip ends where it begins.\n * On whichever side it is: `clientLeft` includes a gutter on the LEFT, which is where\n * Chromium and Firefox put it in a right-to-left field. The side is applied as an\n * inline-start / inline-end inset, so when `dir` flips afterwards and the scrollbar\n * follows it to the other edge, the strip does too without a re-measure. That corner\n * also loses its rounding, since it no longer meets the border.\n *\n * Overlay scrollbars (macOS, phones) take no gutter: the measurement is zero and the\n * strip spans the field. A ResizeObserver on the textarea re-measures when the\n * scrollbar comes or goes (it takes the content box with it) and when the field is\n * resized by hand. Not laid out — hidden in a closed panel, or jsdom — the CSS insets\n * stand until it is.\n *\n * It also writes the strip's lower edge (0.25, {@link TEXTAREA_LABEL_EDGE}) from the\n * textarea's scroll position: a passive `scroll` listener, plus the same observer, since\n * a resize can move the scroll without the user scrolling.\n */\nfunction TextareaLabelStrip() {\n  const ref = useRef<HTMLSpanElement>(null);\n  useLayoutEffect(() => {\n    const strip = ref.current;\n    const field = strip?.previousElementSibling;\n    if (!strip || !(field instanceof HTMLTextAreaElement)) return;\n    const fit = () => {\n      if (field.offsetWidth === 0) return;\n      const style = getComputedStyle(field);\n      const borderLeft = parseFloat(style.borderLeftWidth) || 0;\n      const borderRight = parseFloat(style.borderRightWidth) || 0;\n      const gutter = field.offsetWidth - field.clientWidth - borderLeft - borderRight;\n      // offsetWidth and clientWidth are whole pixels, so a field with no scrollbar can\n      // read ±1 here; no scrollbar is that thin.\n      const bar = gutter > 1.5;\n      const onLeft = field.clientLeft - borderLeft > 1.5;\n      // Kept as a LOGICAL side: a `dir` flipped later (a language switch) moves the\n      // scrollbar across without resizing anything, so nothing would re-measure —\n      // but it stays at the inline end, and so does an inline-end inset.\n      const rtl = style.direction === \"rtl\";\n      const atEnd = onLeft === rtl;\n      const border = (end: boolean) => (end === rtl ? borderLeft : borderRight);\n      strip.style.insetInlineEnd = bar && atEnd ? `${border(true) + gutter}px` : \"\";\n      strip.style.insetInlineStart = bar && !atEnd ? `${border(false) + gutter}px` : \"\";\n      strip.style.borderStartEndRadius = bar && atEnd ? \"0\" : \"\";\n      strip.style.borderStartStartRadius = bar && !atEnd ? \"0\" : \"\";\n    };\n    // The edge under the strip follows the scroll — see TEXTAREA_LABEL_EDGE. The line\n    // height is read each time, since a caller's class can change the type. Nothing to\n    // draw is no property at all (the CSS default is a 0px edge), so a field at rest\n    // carries exactly the strip it did in 0.24.\n    const follow = () => {\n      const edge = labelEdge(field.scrollTop, parseFloat(getComputedStyle(field).lineHeight));\n      if (edge.height > 0) {\n        strip.style.setProperty(\"--label-strip-edge\", `${edge.height}px`);\n        strip.style.setProperty(\"--label-strip-edge-solid\", `${edge.solid}px`);\n      } else {\n        strip.style.removeProperty(\"--label-strip-edge\");\n        strip.style.removeProperty(\"--label-strip-edge-solid\");\n      }\n    };\n    fit();\n    follow();\n    field.addEventListener(\"scroll\", follow, { passive: true });\n    if (typeof ResizeObserver === \"undefined\") return () => field.removeEventListener(\"scroll\", follow);\n    // A resize can move the scroll too (a taller field clamps it).\n    const observer = new ResizeObserver(() => {\n      fit();\n      follow();\n    });\n    observer.observe(field);\n    return () => {\n      field.removeEventListener(\"scroll\", follow);\n      observer.disconnect();\n    };\n  }, []);\n  return <span ref={ref} aria-hidden data-slot=\"label-strip\" className={TEXTAREA_LABEL_STRIP} />;\n}\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  label?: ReactNode;\n  /** See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** See {@link Input}'s `error`. */\n  error?: ReactNode;\n  /** See {@link Input}'s `hint` (keksdose K4): text is a caption under the field, a\n   *  {@link FieldHint} rides the label line (or, unlabelled, the end edge). */\n  hint?: ReactNode;\n  /** See {@link Input}'s `showCount` (keksdose K11): a live \"12/80\" under the field,\n   *  with `maxLength`, announced only near and at the limit. */\n  showCount?: boolean;\n  /** The counter's words. See {@link CharacterCountLabels}. */\n  countLabels?: Partial<CharacterCountLabels>;\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(props, ref) {\n  const { className, label, id, placeholder, invalid, error, hint, showCount, countLabels, ...rest } = props;\n  // See Input's `reserve`.\n  const reserve = \"error\" in props || \"hint\" in props || \"showCount\" in props;\n  const generated = useId();\n  const fieldId = id ?? generated;\n  const countId = useId();\n  const hintParts = useFieldHint(hint, rest[\"aria-describedby\"]);\n  const maxLength = rest.maxLength;\n  const counting = Boolean(showCount) && typeof maxLength === \"number\" && maxLength > 0;\n  const length = useTypedLength(rest.value, rest.defaultValue);\n  const countText = useCharacterCountLabels(countLabels);\n  const { isInvalid, describedBy, errorEl } = useFieldError(\n    error,\n    invalid,\n    mergeDescribedBy(hintParts.describedBy, counting && countId),\n    rest[\"aria-invalid\"],\n  );\n  const counter = counting ? (\n    <CharacterCount\n      id={countId}\n      used={length.used}\n      max={maxLength}\n      labels={countText}\n      caption={<FieldCaption parts={hintParts} className=\"mt-0\" />}\n    />\n  ) : null;\n  const below = fieldBelow(hintParts, counter, errorEl);\n  const onChange = counting\n    ? (e: ChangeEvent<HTMLTextAreaElement>) => {\n        length.track(e.target.value);\n        rest.onChange?.(e);\n      }\n    : rest.onChange;\n  if (label === undefined) {\n    const endHint = hintParts.labelHint;\n    return (\n      <FieldGroup errorEl={below} reserve={reserve}>\n        <EndHintRow hint={endHint} className={className}>\n          <textarea\n            ref={ref}\n            id={id}\n            placeholder={placeholder}\n            {...rest}\n            aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n            aria-describedby={describedBy}\n            onChange={onChange}\n            className={cn(FIELD_BASE, endHint === undefined && className, isInvalid && FIELD_INVALID)}\n          />\n        </EndHintRow>\n      </FieldGroup>\n    );\n  }\n  const ownPlaceholder = hasPlaceholderText(placeholder);\n  return (\n    <FieldGroup errorEl={below} reserve={reserve}>\n      <FloatingField className={className} htmlFor={fieldId} label={label} hint={hintParts.labelHint}>\n        <textarea\n          ref={ref}\n          id={fieldId}\n          // The float trick's single space, unless the caller has a placeholder of its\n          // own — then that, shown on focus once the label is out of its way (kastlan\n          // 8, see FLOATING_PLACEHOLDER_ON_FOCUS).\n          placeholder={ownPlaceholder ? placeholder : \" \"}\n          {...rest}\n          aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n          aria-describedby={describedBy}\n          onChange={onChange}\n          className={cn(\n            FLOATING_INPUT_CLASS,\n            ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS,\n            isInvalid && FIELD_INVALID,\n          )}\n        />\n        {/* Between the textarea and the label, on purpose: after the textarea so it\n            is its `peer` and paints over its text, before the label so the label\n            paints over it. See TEXTAREA_LABEL_STRIP. */}\n        <TextareaLabelStrip />\n      </FloatingField>\n    </FieldGroup>\n  );\n});\nTextarea.displayName = \"Textarea\";\n\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  children: ReactNode;\n  /**\n   * When true, drop the card chrome (border, rounded corners, shadow) on mobile so the\n   * card spans edge-to-edge. Chrome reappears at the `md` breakpoint. Use for primary\n   * content cards on data pages; leave off for centered dialog/panel cards.\n   */\n  flush?: boolean;\n  /**\n   * `inset`: a panel INSIDE a card rather than a card on the page — the raised\n   * `--bg-surface-2`, a small radius, `p-3` of its own and no border or shadow, since\n   * it is already sitting on the card that has them. Lenkbank's results blocks and\n   * corner panels write this by hand (`rounded-md bg-surface-2 p-3`) under a Card of\n   * their own. Unlike the default card it carries its padding, because every one of\n   * those copies wanted the same one; a caller's `p-*` still wins. `flush` is ignored:\n   * an inset panel never runs edge to edge.\n   */\n  variant?: \"default\" | \"inset\" | \"outline\";\n  /**\n   * The card's own padding: `none`, `sm` (`p-3`) or `md` (`p-4`).\n   *\n   * `outline` is the bordered box with no shadow — a row or a block INSIDE a section\n   * rather than a card on the page: kastlan's rent breakdown rows\n   * (tenancy/components/breakdown-row.tsx, `rounded-lg border p-4`) and the meters\n   * list's inline add row (meters/components/meter-add-row.tsx). It takes `md` by\n   * default, as every one of those copies does; `sm` is the dense row.\n   *\n   * Left out, the default card keeps no padding (its CardHeader / CardContent own the\n   * rhythm) and `inset` keeps its `p-3`; passing it sets theirs too. A caller's `p-*`\n   * in `className` still wins.\n   *\n   * Whenever the card carries a padding — this prop, or the `inset` / `outline` one —\n   * CardHeader, CardContent and CardFooter drop their own `px-6` / `pt-6` / `pb-6`, so\n   * the card's padding is the only one. Before 0.16 they kept it regardless and a\n   * `padding=\"md\"` card with parts was padded twice (40px a side); keksdose's settings\n   * cards zeroed all three parts by hand (`<CardHeader className=\"p-0\">`). A padding set\n   * only through `className` cannot be seen from the parts: use the prop.\n   */\n  padding?: \"none\" | \"sm\" | \"md\";\n  /**\n   * A card that is a WARNING (or other status) as a whole: the border in the tone's\n   * `-border` colour and the {@link CardTitle} in the tone's text colour. kastlan's\n   * dunning summary (invoice-detail-page.tsx:231-235) writes both by hand —\n   * `border-[var(--warning-border)]` on the Card, `text-[var(--warning)]` on the title\n   * — and the next status card would copy the pair (`outline` takes it the same way).\n   * An `inset` panel has no border, so it takes the tone's quiet `-bg` fill instead.\n   * `data-tone` is set for a caller's own\n   * selectors.\n   */\n  tone?: CardTone;\n  /**\n   * How loud the `tone` frame is. `\"strong\"`: a 2px border in the tone's strong\n   * colour — `--danger-border-strong` for `danger`, the tone's own text colour\n   * (`--warning`, `--info`, `--success`) for the others, which have no\n   * `-border-strong` token of their own. For the one tile on a page that guards\n   * something destructive or security-relevant: keksdose's password / delete-account\n   * tile (shared/components/password-danger-card.tsx) wrote `toneFrameClass(tone)` over\n   * the Card by hand for the 2px rule, and `p-[15px]` under it so the content did not\n   * move. Here the extra pixel comes off the padding the same way (`padding` or the\n   * variant's own), so a strong card's content sits exactly where a soft one's does.\n   *\n   * Default `\"soft\"`: the 1px `-border` it has always been. No effect without `tone`,\n   * nor on `inset`, which has no border to make louder (its tone is a fill).\n   */\n  toneStrength?: \"soft\" | \"strong\";\n  /**\n   * Wash the card in the tone's quiet `-bg` surface as well as framing it. A toned\n   * card is a border and a title colour, at either strength — the wash belongs to\n   * `AlertBanner`, the message, not to a card that holds a form — so it stays\n   * off by default. Some tiles want both: keksdose's password / delete-account tile\n   * was `toneFrameClass(tone)` (border AND wash) before 0.16, and after moving to\n   * `toneStrength=\"strong\"` it re-added `bg-[var(--danger-bg)]` by hand. The wash is\n   * layered OVER the card's own `--bg-surface` (as AlertBanner's `elevated` does), so\n   * the dark theme's translucent tints stay a card, not a hole to the page below.\n   *\n   * No effect without `tone`, nor on `inset`, whose tone is already the fill.\n   */\n  toneFill?: boolean;\n  /**\n   * The parts' type scale. `\"compact\"`: CardTitle `text-sm font-medium`,\n   * CardDescription `text-xs` and the CardHeader's title-to-description gap\n   * `gap-0.5` — the small settings / admin card. keksdose wrote those three classes by\n   * hand on ~25 cards. Set here, they reach the parts through context; a class on a\n   * part still wins, and a Card nested inside starts again from its own density.\n   *\n   * Default `\"comfortable\"`: the parts as they have always been.\n   */\n  density?: CardDensity;\n}\n\nexport type CardDensity = \"comfortable\" | \"compact\";\n\nexport type CardTone = \"warning\" | \"danger\" | \"info\" | \"success\";\n\n// The title is reached through its `data-slot`, so the tone needs no context and a\n// caller's `className` on CardTitle still wins (it is on the element itself).\nconst CARD_TONES: Record<CardTone, { border: string; fill: string; title: string }> = {\n  warning: {\n    border: \"border-[var(--warning-border)]\",\n    fill: \"bg-[var(--warning-bg)]\",\n    title: \"[&_[data-slot=card-title]]:text-[var(--warning)]\",\n  },\n  danger: {\n    border: \"border-[var(--danger-border)]\",\n    fill: \"bg-[var(--danger-bg)]\",\n    title: \"[&_[data-slot=card-title]]:text-[var(--danger)]\",\n  },\n  info: {\n    border: \"border-[var(--info-border)]\",\n    fill: \"bg-[var(--info-bg)]\",\n    title: \"[&_[data-slot=card-title]]:text-[var(--info)]\",\n  },\n  success: {\n    border: \"border-[var(--success-border)]\",\n    fill: \"bg-[var(--success-bg)]\",\n    title: \"[&_[data-slot=card-title]]:text-[var(--success)]\",\n  },\n};\n\nconst CARD_PADDING: Record<NonNullable<CardProps[\"padding\"]>, string> = {\n  none: \"p-0\",\n  sm: \"p-3\",\n  md: \"p-4\",\n};\n\n// The same padding one pixel short, for a 2px `toneStrength=\"strong\"` frame: the\n// border grows inwards by that pixel, so the content stays where the 1px card had it.\nconst CARD_PADDING_STRONG: Record<NonNullable<CardProps[\"padding\"]>, string> = {\n  none: \"p-0\",\n  sm: \"p-[11px]\",\n  md: \"p-[15px]\",\n};\n\n// The wash as a background IMAGE over the card's opaque `--bg-surface` — see\n// `toneFill`. A plain `bg-[var(--danger-bg)]` would REPLACE the surface, and the dark\n// theme's washes are a translucent tint.\nconst CARD_TONE_WASH: Record<CardTone, string> = {\n  warning: \"bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]\",\n  danger: \"bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]\",\n  info: \"bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]\",\n  success: \"bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]\",\n};\n\nconst CARD_TONES_STRONG: Record<CardTone, string> = {\n  warning: \"border-2 border-[var(--warning)]\",\n  danger: \"border-2 border-[var(--danger-border-strong)]\",\n  info: \"border-2 border-[var(--info)]\",\n  success: \"border-2 border-[var(--success)]\",\n};\n\n/**\n * Whether the {@link Card} round the parts carries the padding itself — so CardHeader,\n * CardContent and CardFooter must not add theirs on top. `false` (no Card, or a default\n * card with no `padding`) keeps the parts' own `px-6` rhythm, as it always was.\n */\nconst CardPaddedContext = createContext(false);\n\n/** The {@link CardProps.density} of the nearest Card — the parts' type scale. */\nconst CardDensityContext = createContext<CardDensity>(\"comfortable\");\n\nexport function Card({\n  className,\n  children,\n  flush,\n  variant = \"default\",\n  tone,\n  toneStrength = \"soft\",\n  toneFill = false,\n  density = \"comfortable\",\n  padding,\n  ...rest\n}: CardProps) {\n  const toned = tone ? CARD_TONES[tone] : undefined;\n  // An outline card is bordered like the default one, so a tone recolours its border.\n  const bordered = variant !== \"inset\";\n  const strong = toned !== undefined && bordered && toneStrength === \"strong\";\n  // The padding the card itself carries: the prop, else the variant's own (`inset`\n  // p-3, `outline` p-4). A default card with no prop carries none — its parts do.\n  const ownPadding = padding ?? (variant === \"inset\" ? \"sm\" : variant === \"outline\" ? \"md\" : undefined);\n  return (\n    <div\n      data-tone={tone}\n      data-tone-strength={strong ? \"strong\" : undefined}\n      data-density={density === \"compact\" ? \"compact\" : undefined}\n      {...rest}\n      className={cn(\n        variant === \"inset\"\n          ? \"rounded-md bg-[var(--bg-surface-2)] p-3\"\n          : variant === \"outline\"\n            ? // No shadow and no `flush`: it sits on a surface that already has both.\n              \"rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-4\"\n            : cn(\n              // Surface + border are theme tokens so the palette switcher (feedback\n              // #307) can re-skin every card; a caller's own bg-*/border-* override\n              // still wins via tailwind-merge.\n              \"bg-[var(--bg-surface)]\",\n              flush\n                ? \"border-y border-[var(--border)] md:rounded-lg md:border md:shadow-sm\"\n                : \"rounded-lg border border-[var(--border)] shadow-sm\",\n            ),\n        toned && (bordered ? toned.border : toned.fill),\n        strong && tone && CARD_TONES_STRONG[tone],\n        toneFill && bordered && tone && CARD_TONE_WASH[tone],\n        toned?.title,\n        ownPadding && (strong ? CARD_PADDING_STRONG : CARD_PADDING)[ownPadding],\n        className,\n      )}\n    >\n      <CardPaddedContext.Provider value={ownPadding !== undefined}>\n        <CardDensityContext.Provider value={density}>{children}</CardDensityContext.Provider>\n      </CardPaddedContext.Provider>\n    </div>\n  );\n}\n\n// Composed shadcn-style Card sub-parts. A default `Card` with no `padding` stays\n// padding-less, so these own the padding/rhythm (`px-6`, the header's `pt-6`, the\n// last part's `pb-6`). A Card that carries a padding of its own — the `padding` prop,\n// or `inset` / `outline`, which have one built in — tells them so through context and\n// they add none on top (see CardPaddedContext). Token-driven so they re-skin with the\n// palette. Use CardHeader → CardTitle/CardDescription (+ optional CardAction,\n// top-right) → CardContent → CardFooter.\n/** The sub-parts add nothing to a `<div>`'s props — they are the SAME element with a\n *  `data-slot` and a padding rhythm — so most names are aliases rather than an empty\n *  interface pretending to be more. They exist so a consumer's own wrapper can say\n *  `CardHeaderProps` instead of `ComponentProps<typeof CardHeader>`. */\nexport interface CardHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Below the `sm` breakpoint, put the {@link CardAction} UNDER the title and\n   * description instead of beside them. For an action that is wider than an icon —\n   * a \"Set up two-factor\" button, a checkbox and a filter — which, kept in the\n   * top-end column on a 390px phone, squeezed the title into a ribbon two words wide\n   * (keksdose's settings cards). Off by default: an icon action (the wizard summary's\n   * pencil) is narrow enough to stay beside the title at every width.\n   */\n  stackAction?: boolean;\n}\nexport type CardTitleLevel = \"div\" | \"h2\" | \"h3\" | \"h4\";\nexport interface CardTitleProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The element the title is: `\"div\"` (default) or a heading level. Five of keksdose's\n   * settings cards nested their own `<h2>` / `<h3>` INSIDE CardTitle to put the card in\n   * the page's outline — a heading in a div that looks like a heading. The heading\n   * takes the title's look unchanged (the reset leaves `h2`–`h4` at inherited size and\n   * weight), so only the outline changes.\n   */\n  as?: CardTitleLevel;\n}\nexport type CardDescriptionProps = ComponentPropsWithoutRef<\"div\">;\nexport type CardActionProps = ComponentPropsWithoutRef<\"div\">;\nexport type CardContentProps = ComponentPropsWithoutRef<\"div\">;\nexport type CardFooterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport function CardHeader({ className, stackAction = false, ...props }: CardHeaderProps) {\n  const padded = useContext(CardPaddedContext);\n  const compact = useContext(CardDensityContext) === \"compact\";\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        // Grid (not flex) so CardAction can occupy a top-right column; with no\n        // action it collapses to one column and title/description stack.\n        //\n        // The two-column switch sets a VARIABLE, not `grid-template-columns`. As\n        // `has-data-[slot=card-action]:grid-cols-[1fr_auto]` it was two classes of\n        // specificity (the class plus the attribute inside `:has()`), and a caller's\n        // `max-sm:grid-cols-1` — one class inside a media query — lost to it at every\n        // width, so the action could never be stacked on a phone from outside. Now the\n        // property itself is set by a plain one-class utility that any `grid-cols-*`\n        // variant of the caller's outranks by coming later in the sheet; the `:has()`\n        // rule only picks the value. The base `1fr` resets the variable so a header\n        // never inherits an ancestor header's two columns.\n        \"grid auto-rows-min items-start gap-1.5 [--card-header-cols:1fr] has-data-[slot=card-action]:[--card-header-cols:1fr_auto] grid-cols-[var(--card-header-cols,1fr)]\",\n        padded ? \"px-0 pt-0\" : \"px-6 pt-6\",\n        compact && \"gap-0.5\",\n        // One column under `sm`, and the action back into the flow (DOM order, so\n        // after the description when it is written after it), at the start edge.\n        // The descendant selector outranks CardAction's own placement classes.\n        stackAction &&\n          \"max-sm:grid-cols-1 max-sm:[&>[data-slot=card-action]]:col-start-1 max-sm:[&>[data-slot=card-action]]:row-span-1 max-sm:[&>[data-slot=card-action]]:row-start-auto max-sm:[&>[data-slot=card-action]]:justify-self-start\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CardTitle({ className, as: Tag = \"div\", ...props }: CardTitleProps) {\n  const compact = useContext(CardDensityContext) === \"compact\";\n  return (\n    <Tag\n      data-slot=\"card-title\"\n      // Compact is `leading-snug`, not `leading-none`: there the title sits on a\n      // 12px description `gap-0.5` below, and a line box exactly the cap height left\n      // the hint hugging the title's descenders (every keksdose admin card added\n      // `leading-normal` by hand). Comfortable keeps `leading-none` — its 14px\n      // description is `gap-1.5` away and has always read right.\n      className={cn(compact ? \"text-sm font-medium leading-snug\" : \"font-semibold leading-none\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CardDescription({ className, ...props }: CardDescriptionProps) {\n  const compact = useContext(CardDensityContext) === \"compact\";\n  return (\n    <div\n      data-slot=\"card-description\"\n      // `--text-muted`, the kit's secondary-line colour (StatTile's description, the\n      // field captions). It was `--money-neutral`, a MONEY token that happened to be\n      // a similar grey — and a palette that re-tunes the money colours moved every\n      // card's description with them.\n      className={cn(compact ? \"text-xs\" : \"text-sm\", \"text-[var(--text-muted)]\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CardAction({ className, ...props }: CardActionProps) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\"col-start-2 row-start-1 row-span-2 self-start justify-self-end\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CardContent({ className, ...props }: CardContentProps) {\n  const padded = useContext(CardPaddedContext);\n  // `last:pb-6`, not a plain `pb-6`: CardHeader owns the top padding and CardFooter\n  // owns the bottom one, so a card WITHOUT a footer had nothing closing it off and\n  // its last field sat flush against the card edge (kastlan feedback: the language\n  // input touching the card bottom on /profile). Scoping to `:last-child` fixes that\n  // case and leaves a footered card's rhythm exactly as it was. Inside a padded Card\n  // the card closes itself off, so there is nothing to add.\n  return <div data-slot=\"card-content\" className={cn(!padded && \"px-6 last:pb-6\", className)} {...props} />;\n}\n\nexport function CardFooter({ className, ...props }: CardFooterProps) {\n  const padded = useContext(CardPaddedContext);\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center\", !padded && \"px-6 pb-6\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A `<span>`'s props plus the words a reader hears — see {@link CardHeaderProps}.\n *  The ring is drawn with a border, so there is nothing inside it to put children in. */\nexport interface SpinnerProps extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> {\n  /**\n   * What the spinner means, for a screen reader. Default: `common.loading` from the\n   * {@link UiKitProvider}, else \"Loading…\".\n   *\n   * `null` makes it DECORATIVE — no role, no text, hidden from assistive tech. Use it\n   * whenever words are already there: beside visible \"Loading…\" text (otherwise it is\n   * announced twice), inside a labelled button (otherwise its text joins the button's\n   * name), or inside a live region of the app's own (otherwise that region and this\n   * one both announce).\n   */\n  label?: string | null;\n  /**\n   * Show the label as TEXT beside the ring, not only to a screen reader. kastlan's\n   * LoadingState (feedback/loading-state.tsx:14) builds exactly this by hand — a\n   * `role=\"status\"` wrapper, the spinner at `label={null}`, a `<p>` of text — so it\n   * has to get the three-part aria arrangement right itself. Here the visible text IS\n   * the live region's content (the label stays the accessible name, said once), and\n   * the ring is decorative. `className` still sizes the ring; the other props go on\n   * the wrapper. Ignored with `label={null}`: there are no words to show.\n   */\n  showLabel?: boolean;\n  /** Where the shown label sits: `end` (default) — beside the ring, for a row or a\n   *  button; `below` — under it, centred, for a panel's loading state. */\n  labelPosition?: \"end\" | \"below\";\n}\n\n/**\n * A spinning ring that also SAYS it is loading.\n *\n * It used to be a bordered span and nothing else, so a reader met no element at all\n * where a sighted user saw the page working — or, beside an emptied list, met the\n * empty list and concluded there was nothing there. `role=\"status\"` makes it a polite\n * live region, and the text inside is what that region announces. Text rather than\n * `aria-label`: a live region's announcement is its CONTENT, and several readers\n * ignore a name on one.\n *\n * `relative` so the `sr-only` text has a local containing block (see\n * sr-only-containment.test). Where the words are already on screen, pass\n * `label={null}`: announcing is right for a spinner standing alone and wrong for one\n * beside text, inside a button, or inside the app's own live region.\n */\nexport function Spinner({ className, label, showLabel, labelPosition = \"end\", ...rest }: SpinnerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, {\n    loading: label ?? undefined,\n  });\n  const ring = cn(\n    \"relative inline-block h-5 w-5 animate-spin rounded-full border-2 border-[var(--border)] border-t-[var(--text-primary)]\",\n    className,\n  );\n  if (label === null) return <span aria-hidden {...rest} className={ring} />;\n  if (showLabel) {\n    return (\n      <span\n        role=\"status\"\n        {...rest}\n        className={cn(\n          \"inline-flex items-center text-sm text-[var(--text-secondary)]\",\n          labelPosition === \"below\" ? \"flex-col gap-2 text-center\" : \"gap-2\",\n        )}\n      >\n        <span aria-hidden className={ring} />\n        <span>{common.loading}</span>\n      </span>\n    );\n  }\n  return (\n    <span role=\"status\" {...rest} className={ring}>\n      {/* The trailing space is a separator for the case the caller forgot `label={null}`\n          inside a button: a name is the concatenation of its text, and without it the\n          spinner's word ran straight into the button's — \"Loadingconfirm\". */}\n      <span className=\"sr-only\">{common.loading} </span>\n    </span>\n  );\n}\n\nexport interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"title\"> {\n  /** The box renders `title` and `hint` in its own two-line rhythm, which is what makes\n   *  every empty state in three apps look like the same thing — so there is no\n   *  `children` slot to put arbitrary content in. The two slots below are the only\n   *  other things an empty state has turned out to need, and each has a fixed place. */\n  /** Nodes rather than strings, so a title can carry a code, a link or an emphasised\n   *  word — keksdose's error boundary shows the error's name in `<code>` — while the\n   *  box still sets the type. */\n  title: ReactNode;\n  hint?: ReactNode;\n  /**\n   * Render the title as a heading of this level. Left out it is a `<div>`, as before:\n   * most empty states are a message inside a section that already has its heading.\n   * keksdose's error boundary IS the page when it trips, and its `<h2>` went missing\n   * when it moved onto EmptyState — so the page's heading outline lost the one line\n   * that says what happened. Only the element changes; the look is the box's.\n   */\n  headingAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /** A glyph ABOVE the title — kastlan's InboxEmptyState (an inbox), keksdose's\n   *  offline card (a cloud with a slash). Sized by the box (`[&_svg]:size-8`) and\n   *  muted, so five call sites cannot pick five sizes; hidden from assistive tech,\n   *  because the title already says what it shows. */\n  icon?: ReactNode;\n  /** What to do about it, BELOW the hint: keksdose's query-state cards (Retry), its\n   *  error boundary (Retry / Reload / Go home — pass all three in a fragment, they\n   *  wrap and centre as one row), kastlan's \"Create a rule\". Buttons or links the\n   *  caller renders; the box only places them. */\n  action?: ReactNode;\n  /**\n   * `box` (default): the dashed, padded card that stands in for a whole section.\n   * `inline`: one quiet line with no box — for the empty state INSIDE something that\n   * already has its own frame, where a dashed card would be a box in a box. keksdose\n   * writes that line by hand five times as a muted `<p className=\"py-6 text-center\">`:\n   * the notification inbox (notification-inbox:140), a support thread\n   * (support-thread:144), the assistant (assistant-page:321), the admin support panel\n   * (support-panel:265) and the funding dialog (funding-dialog:89). The icon shrinks\n   * to the text's size and sits before the title, the hint follows on the same line,\n   * and the row wraps only when it must. Centred like the box; `className=\"justify-start\"`\n   * for a list that reads from the start edge (funding-dialog).\n   */\n  variant?: \"box\" | \"inline\";\n  /**\n   * Colour the icon and the title: `danger` for an error standing where the content\n   * should be — kastlan's ErrorState (shared/components/feedback/error-state.tsx) and\n   * its error boundary's fallback (error-boundary.tsx:16), both a red triangle over a\n   * message — and `success` for an empty state that is GOOD news, kastlan's \"No defects\n   * recorded for this room\" (handover defects-step.tsx:142, a green check). Left out,\n   * both stay muted. The hint stays muted either way: it is the explanation, not the\n   * verdict.\n   */\n  tone?: \"danger\" | \"success\";\n  /**\n   * `inline` only (0.11.0). `sm`: 12px, start-aligned and tight (`py-1`) — the empty\n   * line INSIDE a detail panel, under a panel heading and among `text-xs` rows, where\n   * the default's 14px centred line with `py-4` read as a section of its own.\n   * keksdose's holdings panel (holdings-panel:563), asset-loan panel\n   * (asset-loan-panel:108) and loan-payment panel (loan-payment-panel:191) each wrote\n   * `className=\"justify-start py-1\"` over it and still got body-size text. Default `md`,\n   * the look it had. Ignored by the box.\n   */\n  size?: \"sm\" | \"md\";\n}\n\nconst EMPTY_STATE_TONE: Record<\"danger\" | \"success\", string> = {\n  danger: \"text-[var(--danger)]\",\n  success: \"text-[var(--success)]\",\n};\n\nexport function EmptyState({\n  title,\n  hint,\n  icon,\n  action,\n  headingAs,\n  variant = \"box\",\n  tone,\n  size = \"md\",\n  className,\n  ...rest\n}: EmptyStateProps) {\n  const Title = headingAs ?? \"div\";\n  const toneClass = tone ? EMPTY_STATE_TONE[tone] : undefined;\n  const hasHint = hint != null && hint !== false && hint !== \"\";\n  if (variant === \"inline\") {\n    const sm = size === \"sm\";\n    return (\n      <div\n        {...rest}\n        className={cn(\n          \"flex flex-wrap items-center text-[var(--text-muted)]\",\n          sm\n            ? \"justify-start gap-x-1.5 gap-y-0.5 py-1 text-start text-xs\"\n            : \"justify-center gap-x-2 gap-y-1 py-4 text-center text-sm\",\n          className,\n        )}\n      >\n        {icon != null && (\n          <span\n            aria-hidden\n            className={cn(\"flex text-[var(--text-placeholder)]\", sm ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\", toneClass)}\n          >\n            {icon}\n          </span>\n        )}\n        {/* No weight of its own: one muted line is what these sites were, and a\n            bold title would turn a quiet \"nothing here\" into a heading. */}\n        <Title className={cn(sm ? \"text-xs\" : \"text-sm\", toneClass)}>{title}</Title>\n        {hasHint && <span className=\"text-xs\">{hint}</span>}\n        {action != null && <span className=\"flex flex-wrap items-center gap-2\">{action}</span>}\n      </div>\n    );\n  }\n  return (\n    <div\n      {...rest}\n      className={cn(\n        \"flex flex-col items-center justify-center rounded-lg border border-dashed border-[var(--border-strong)] bg-[var(--bg-surface-2)] px-4 py-10 text-center text-sm text-[var(--text-muted)]\",\n        className,\n      )}\n    >\n      {icon != null && (\n        <div aria-hidden className={cn(\"mb-3 text-[var(--text-placeholder)] [&_svg]:size-8\", toneClass)}>\n          {icon}\n        </div>\n      )}\n      {/* `text-sm`: a heading keeps the box's size, not whatever a stylesheet gives h2. */}\n      <Title className={cn(\"text-sm font-medium text-[var(--text-secondary)]\", toneClass)}>{title}</Title>\n      {hasHint && <div className=\"mt-1 text-xs\">{hint}</div>}\n      {action != null && (\n        <div className=\"mt-4 flex flex-wrap items-center justify-center gap-2\">{action}</div>\n      )}\n    </div>\n  );\n}\n\n/** One tab of a {@link Tabs} strip. */\nexport interface TabItem<T extends string> {\n  id: T;\n  /** A ReactNode so a tab can pair an icon with text. */\n  label: ReactNode;\n  /** Optional trailing node (e.g. a count pill). */\n  badge?: ReactNode;\n  /** Marks a tab that IS a route — see {@link TabsProps}. */\n  href?: string;\n  /** Leading decoration: an icon, or the colour swatches of the lines this tab\n   *  draws in a chart above the strip. Hidden from assistive tech — it repeats\n   *  what the label says, or it says something the label must say instead. */\n  icon?: ReactNode;\n  /** A second, smaller line under the label — the one fact that tells two tabs\n   *  with similar labels apart (\"80 km/h\", \"Level 3\"). Part of the tab's name. */\n  detail?: ReactNode;\n  /** A tab that exists as a slot with nothing in it yet, drawn with a dashed\n   *  outline so a gap in a sequence looks like a gap. Visual only: say \"empty\" in\n   *  the label or `detail` if a screen reader needs to know. */\n  empty?: boolean;\n  /** `false` keeps this one tab when the strip has `onRemove` — the one sheet a\n   *  workbook cannot be without. Default: removable. */\n  removable?: boolean;\n  /** Plain-text name for the labels the strip composes about this tab (\"Remove\n   *  …\"), for when `label` is not a string. Default: `label` if it is a string,\n   *  else the id. */\n  name?: string;\n}\n\n/** The strings the strip renders on its own behalf — only when it can add or\n *  remove tabs. */\nexport interface TabsLabels {\n  /** The \"add\" button's visible text when the caller gives no `addLabel`. */\n  add: string;\n  /** Accessible name of a tab's × — \"Remove <tab>\". */\n  remove: (tab: string) => string;\n}\n\nexport const DEFAULT_TABS_LABELS: TabsLabels = {\n  add: \"Add tab\",\n  remove: (tab) => `Remove ${tab}`,\n};\n\n/**\n * The strip's own props sit on a `<div>`: the tablist IS the root element, so anything\n * a caller hangs on it — a `data-tour` anchor for the kit's guided tour, a test id, an\n * `aria-describedby` — lands there. `onChange` is omitted from the div's props because\n * this component's `onChange` hands over the chosen TAB ID, not a DOM event, and\n * `children` because the strip renders `tabs` — a caller who wants a PANEL wires it up\n * through `panelId`, which is the whole point of that prop.\n */\nexport interface TabsProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\"> {\n  /** `label` is a ReactNode so tabs can pair an icon with text; `badge` is an\n   *  optional trailing node (e.g. a count pill). `href` marks a tab that IS a route:\n   *  it renders as an anchor so it can be middle-/⌘-clicked into a new tab (Keksdose\n   *  feedback #451), while a plain click still goes through `onChange` and stays\n   *  client-side. Tabs that only flip local state leave it unset — a link to a URL\n   *  that does not select the tab would be worse than no link. */\n  tabs: TabItem<T>[];\n  active: T;\n  onChange: (id: T) => void;\n  className?: string;\n  /** Let the strip WRAP onto as many rows as it needs below `md`, instead of\n   *  scrolling sideways — for a strip carrying more tabs than fit on a phone row.\n   *  Keksdose live #262: ten reports on a 406px screen showed about three, and the\n   *  round-2 answer (a <select> below `md`) cost a tap to open and a tap to choose.\n   *  *\"I would rather keep the tabs but have multirow tabs depending on the screen\n   *  size, I will not loose the function to see all reports at once and navigate by\n   *  single click rather by double click.\"*\n   *\n   *  The active MARKER has to change with the layout, which is why this cannot be\n   *  done from a call site with a `className`: the default marker is a `border-b-2`\n   *  underline riding the container's own bottom rule, and a tab sitting in a row\n   *  that does not touch that rule cannot wear it — every row but the last would\n   *  show a stray line floating mid-strip, and `-mb-px` would pull each chip a\n   *  pixel into the row beneath it. A wrapped strip marks the active tab with a\n   *  filled brand chip instead, which is also the only thing findable at a glance\n   *  among ten same-weight labels on three rows.\n   *\n   *  From `md` up NOTHING changes: same single-line underline strip, same paddings,\n   *  same colours as every other strip in the app.\n   *\n   *  Opt-in on purpose. The three-tab strips (invoices, statements, bank imports)\n   *  already fit a phone row, and turning those into chips would be an unrequested\n   *  redesign of three other pages. */\n  wrap?: boolean;\n  /**\n   * Accessible name for the `role=\"tablist\"` container. Every tab carries its own\n   * text, so this names the GROUP, not the tabs; leave it unset where a visible\n   * heading immediately above already does that job.\n   *\n   * @deprecated Pass `aria-label` instead. This kit had three spellings for one idea\n   * — `ariaLabel`, `aria-label` and this `label` — and settled on the DOM one, which\n   * is also the one that arrives for free now that the strip spreads its rest props.\n   * `label` still works and is unchanged; it names the strip only when `aria-label`\n   * is absent.\n   */\n  label?: string;\n  /**\n   * `id` of the element the caller renders the open tab's content into — the missing\n   * half of `role=\"tab\"`. A tab that controls nothing is a tab in name only: a screen\n   * reader announces \"tab, 2 of 5\" and then has no way to take the user to what it\n   * opened, and no way back.\n   *\n   * **This component does not render the panel, on purpose.** `Tabs` is the STRIP; the\n   * content lives wherever the caller put it — three Keksdose pages render it in a\n   * sibling `<Card>`, one renders it through a router outlet, and a tab can BE a route\n   * (`href`), in which case the panel is a whole page this component never sees.\n   * Wrapping `children` here would mean either moving that content into the strip's\n   * subtree — a layout change on every page that uses tabs — or shipping a wrapper\n   * that only some callers could use. So the two halves are joined by an id instead.\n   *\n   * Wire the other end yourself:\n   *\n   * ```tsx\n   * <Tabs tabs={tabs} active={active} onChange={setActive} panelId=\"report-panel\" />\n   * <div id=\"report-panel\" role=\"tabpanel\" aria-labelledby=\"report-panel-tab\" tabIndex={-1}>\n   * ```\n   *\n   * `aria-controls` goes on the OPEN tab only, and `${panelId}-tab` is its id — the\n   * closed tabs' panels are not in the document, and a dangling `aria-controls`\n   * describes a tab as opening something that is not there.\n   */\n  panelId?: string;\n  /**\n   * Makes the tabs removable: an × on the OPEN tab, and Delete on a focused tab\n   * (only on the open one with `removeOn=\"active\"`).\n   *\n   * The × is on the open tab only — a row of tabs each carrying one is a row of\n   * things to hit by accident, and the tab you can remove should be the one you\n   * are looking at — but its room is reserved on every removable tab, so opening a\n   * tab never widens it and never pushes the rest of the strip along (lenkbank\n   * feedback #72). It is named \"Remove <tab>\" and is not a tab stop of its own: the\n   * strip stays one stop, and the keyboard path is Delete (announced through\n   * `aria-keyshortcuts`), which removes whichever tab has focus (see `removeOn`).\n   *\n   * The strip only ASKS: it calls this, and the tab goes when the caller drops it\n   * from `tabs` — after a confirmation, a request, whatever it needs. When it does,\n   * focus that was on the removed tab (or its ×) moves to the open tab if the\n   * removed one was open, else to its neighbour, instead of falling to the page.\n   */\n  onRemove?: (id: T) => void;\n  /**\n   * Which tabs the Delete key removes.\n   *\n   * - `\"every\"` (default): any focused removable tab — the ARIA pattern's reading.\n   * - `\"active\"`: only the OPEN tab, the same one that wears the ×. For a strip whose\n   *   remove is immediate and unconfirmed (lenkbank's sheet tabs delete a measurement\n   *   sheet at once), so arrowing across the strip and pressing Delete cannot take\n   *   out a sheet the user is not looking at. Delete on a closed tab does nothing,\n   *   and only the open tab announces the shortcut (`aria-keyshortcuts`).\n   *\n   * Either way the × is drawn on the open tab only and its room stays reserved on\n   * every removable tab, so the strip never relayouts when the selection moves.\n   */\n  removeOn?: \"every\" | \"active\";\n  /** Renders an \"add\" button after the last tab, outside the tablist — it is an\n   *  action, not a tab, and a tablist may own only tabs. */\n  onAdd?: () => void;\n  /** The add button's text. Say what is added — \"Add loop\", \"Add report\" says\n   *  more than \"Add\". Default: `tabs.add` from the {@link UiKitProvider}. */\n  addLabel?: string;\n  /** Overrides for this strip's strings. See {@link TabsLabels}. */\n  labels?: Partial<TabsLabels>;\n  /** An add or a remove is in flight: the × and the add button are disabled and\n   *  Delete is ignored, so a double click cannot remove two tabs. Nothing moves. */\n  busy?: boolean;\n  /**\n   * `\"vertical\"`: the same strip as a SIDE NAV — one item per row, the open one\n   * filled, ↑/↓ walking it (Home/End as before) and `aria-orientation=\"vertical\"` on\n   * the tablist. For keksdose's admin page and settings page, which each hand-built\n   * the identical sidebar with none of this strip's keyboard, roving tab stop or\n   * routed-`href` handling. Everything else — `href` tabs, `badge`, `panelId`,\n   * `onRemove`, `onAdd` — means exactly what it means on the horizontal strip; the\n   * badge moves to the row's end.\n   *\n   * **On a phone ({@link PHONE_QUERY}) it becomes the horizontal strip**, `wrap` and\n   * all, rather than staying a column. A side nav only works beside its content; on\n   * a phone it has to go ABOVE it, and eight full-width rows there push the panel\n   * the user picked below the fold on every visit — the two keksdose pages both\n   * collapsed theirs into a scrolling row by hand for exactly that reason. The\n   * orientation is switched in JavaScript, not with `md:` classes, so the\n   * `aria-orientation` a screen reader hears and the arrow keys that work always\n   * match the layout on screen. The caller's own two-column layout has to stack at\n   * the same breakpoint (`md:grid-cols-[14rem_1fr]`).\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\n// The two shapes are written out as whole strings rather than as one base plus a\n// pile of `md:` overrides. The unwrapped pair is character-for-character what the\n// three strips that do not opt in get, so those cannot drift; the wrapped pair is\n// authored from scratch, so no unprefixed utility has to be beaten by its own `md:`\n// twin through tailwind-merge. The only ordering this relies on is Tailwind's own:\n// unprefixed utilities are emitted first, then `md:` — so from 768px up the wrapped\n// strip resolves to exactly the paint of the default one. Both themes come free now\n// that the colours are tokens: there is no `md:dark:` tier left to keep in step.\nconst TABLIST_CLASSES =\n  \"flex gap-1 overflow-x-auto overflow-y-hidden border-b border-[var(--border)]\";\n// The side nav. A column of full-width rows with the open one FILLED rather than\n// underlined: an underline under one row of a list reads as a separator, not as a\n// selection. `--bg-active` is the kit's own selected-row fill (the sidebar's), so the\n// admin page's nav and the app's own sidebar mark \"you are here\" the same way.\nconst TABLIST_VERTICAL_CLASSES = \"flex flex-col gap-0.5\";\nconst TAB_VERTICAL_CLASSES =\n  \"flex w-full items-center rounded-md px-3 py-2 text-start text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]\";\nconst TAB_VERTICAL_ACTIVE_CLASSES = \"bg-[var(--bg-active)] text-[var(--text-primary)]\";\nconst TAB_VERTICAL_INACTIVE_CLASSES =\n  \"text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]\";\n\nconst TABLIST_WRAP_CLASSES =\n  \"flex flex-wrap gap-1.5 md:flex-nowrap md:gap-1 md:overflow-x-auto md:overflow-y-hidden md:border-b md:border-[var(--border)]\";\n\n// `max-w-full`: no tab outgrows its strip. A sheet's `detail` line (\"Spurstangenkraft\n// links · … · 31 Punkte\") made one tab 448px wide in a 390px strip, and a tab wider\n// than the strip cannot be scrolled into view — its end was simply off screen\n// (lenkbank L3). The label and detail truncate inside it instead; see `inner`.\nconst TAB_CLASSES =\n  \"max-w-full whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]\";\nconst TAB_ACTIVE_CLASSES = \"border-[var(--text-primary)] text-[var(--text-primary)]\";\nconst TAB_INACTIVE_CLASSES =\n  \"border-transparent text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:border-[var(--border-strong)]\";\n\n// Below `md`, a chip: `py-2` on `text-xs` is exactly 32px tall, and ten German\n// report labels then land in three rows on a 406px screen (four at `text-sm`). The\n// active fill is the app's own selected pair, `--brand` / `--brand-contrast`: the\n// palette store writes both halves of it together for every preset and both themes,\n// so the contrast holds everywhere (5.1:1 at its worst preset) without a hard-coded\n// colour. Inactive chips take the raised card surface with full-strength body text —\n// all ten have to stay readable; it is the FILL, not the text weight, that says\n// which one is open.\nconst TAB_WRAP_CLASSES =\n  \"max-w-full whitespace-nowrap rounded-md px-2.5 py-2 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)] md:rounded-none md:border-b-2 md:-mb-px md:bg-transparent md:px-3 md:py-2 md:text-sm\";\nconst TAB_WRAP_ACTIVE_CLASSES =\n  \"bg-[var(--brand)] text-[var(--brand-contrast)] md:border-[var(--text-primary)] md:text-[var(--text-primary)]\";\nconst TAB_WRAP_INACTIVE_CLASSES =\n  \"bg-[var(--bg-surface)] text-[var(--text-primary)] md:border-transparent md:text-[var(--text-muted)] md:hover:border-[var(--border-strong)] md:hover:text-[var(--text-secondary)]\";\n\n// The add/remove chrome. The × reserves its gutter on every removable tab (see\n// `onRemove`); `md:pe-8` is spelled out because the wrapped chip's `md:px-3` would\n// otherwise hand the gutter back from 768px up.\nconst TAB_REMOVABLE_CLASSES = \"pe-8 md:pe-8\";\nconst TAB_EMPTY_CLASSES = \"-mx-1.5 rounded border border-dashed border-[var(--border-strong)] px-1.5\";\nconst TAB_ADD_CLASSES =\n  \"inline-flex items-center gap-1 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium text-[var(--text-muted)] transition-colors hover:text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)] disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4\";\nconst TAB_ADD_WRAP_CLASSES = \"px-2.5 text-xs md:px-3 md:text-sm\";\n// `relative`: the phone's visually hidden label needs a positioned ancestor (see the\n// sr-only rule in CONTRIBUTING); `max-md:px-2` squares the lone \"+\".\nconst TAB_ADD_PHONE_CLASSES = \"relative max-md:px-2\";\n\n\nexport function Tabs<T extends string>({\n  tabs,\n  active,\n  onChange,\n  className,\n  wrap = false,\n  label,\n  panelId,\n  onRemove,\n  removeOn = \"every\",\n  onAdd,\n  addLabel,\n  labels,\n  busy = false,\n  orientation = \"horizontal\",\n  \"aria-label\": ariaLabel,\n  ...rest\n}: TabsProps<T>) {\n  const text = useKitLabels(\"tabs\", DEFAULT_TABS_LABELS, labels);\n  // See `orientation`: a vertical strip is the horizontal one on a phone.\n  const phone = useMediaQuery(PHONE_QUERY, false);\n  const vertical = orientation === \"vertical\" && !phone;\n  const stripRef = useRef<HTMLDivElement>(null);\n  const fade = useStripFade(stripRef);\n  // The OPEN tab is scrolled into the strip whenever it changes — on mount too, for a\n  // deep link to the seventh report. A selection behind the cut edge was the worst\n  // case of the overflow above: the one tab the panel below belongs to, sliced to\n  // \"80 km,\" under the add button. Only the strip scrolls (`scrollBy` on it, not\n  // `scrollIntoView`, which would scroll the page as well), and only as far as needed\n  // to clear the fade.\n  useLayoutEffect(() => {\n    const strip = stripRef.current;\n    const tab = strip?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]');\n    if (strip && tab) scrollIntoStrip(strip, tab);\n  }, [active]);\n  const isRemovable = (tab: TabItem<T>) => onRemove !== undefined && tab.removable !== false;\n  // Whether Delete reaches this tab: every removable tab, or only the open one.\n  const deletesOnKey = (tab: TabItem<T>) =>\n    isRemovable(tab) && (removeOn === \"every\" || tab.id === active);\n  const nameOf = (tab: TabItem<T>) =>\n    tab.name ?? (typeof tab.label === \"string\" ? tab.label : tab.id);\n\n  // Where focus goes once a removal the strip asked for has happened. The caller\n  // owns `tabs` and may take its time (a confirmation, a request), so this waits\n  // for the id to actually leave the list rather than guessing at the moment.\n  const pendingFocus = useRef<{ removed: T; wasActive: boolean; neighbour?: T } | null>(null);\n  const requestRemove = (id: T) => {\n    const index = tabs.findIndex((t) => t.id === id);\n    pendingFocus.current = {\n      removed: id,\n      wasActive: id === active,\n      neighbour: (tabs[index + 1] ?? tabs[index - 1])?.id,\n    };\n    onRemove?.(id);\n  };\n  useLayoutEffect(() => {\n    const pending = pendingFocus.current;\n    if (!pending || tabs.some((t) => t.id === pending.removed)) return;\n    pendingFocus.current = null;\n    const strip = stripRef.current;\n    if (!strip) return;\n    // Only focus that fell out of the strip with the removed tab is ours to place.\n    // If the user has moved on — into the panel, into a dialog — leave it there.\n    const focused = document.activeElement;\n    if (focused && focused !== document.body && !strip.contains(focused)) return;\n    // The removed tab was open: focus follows the caller's new selection, which is\n    // also the strip's tab stop. It was not: its neighbour, as the ARIA pattern has it.\n    const target =\n      !pending.wasActive && tabs.some((t) => t.id === pending.neighbour)\n        ? pending.neighbour\n        : active;\n    const index = tabs.findIndex((t) => t.id === target);\n    strip.querySelectorAll<HTMLElement>('[role=\"tab\"]')[index]?.focus();\n  }, [tabs, active]);\n\n  // Arrow keys walk the strip in DOM order (ARIA tabs pattern), which is what keeps\n  // a WRAPPED strip navigable: the rows flow in DOM order too, so Right off the end\n  // of row one lands on the first chip of row two rather than nowhere. Home/End jump\n  // to the ends. Focus only — activation stays on click/Enter/Space, because a tab\n  // here can be a real route and moving focus must not navigate.\n  //\n  // On the TABS, not on the tablist. The container carried it, which left a `<div>`\n  // wearing an interactive role and a key handler while being unfocusable —\n  // `jsx-a11y/interactive-supports-focus`, and the only instance of it left in `src/`.\n  // The fix that rule wants is `tabIndex` on the div; the fix the pattern wants is\n  // the handler on the elements that are natively focusable and actually receive the\n  // keystroke. Those are the tabs, so the warning goes away by being right rather\n  // than by being satisfied.\n  const onTabKeyDown = (e: KeyboardEvent<HTMLElement>, tab: TabItem<T>) => {\n    // Delete removes the FOCUSED tab (the ARIA pattern's optional key for deletable\n    // tabs) — the keyboard's way to the × that is not a tab stop. `busy` swallows it\n    // rather than letting it fall through to the page. With `removeOn=\"active\"` only\n    // the open tab answers; a closed one lets the key pass untouched.\n    if (e.key === \"Delete\" && deletesOnKey(tab)) {\n      e.preventDefault();\n      if (!busy) requestRemove(tab.id);\n      return;\n    }\n    // Along the reading direction: the strip is a flex row, so in RTL the NEXT tab sits\n    // to the left, and ArrowLeft has to reach it. A vertical strip answers ↑/↓ instead\n    // — and ONLY those, as the pattern has it: ←/→ are left to the page, where a side\n    // nav's neighbour (the panel) may well want them.\n    const step: 1 | -1 | 0 = vertical\n      ? e.key === \"ArrowDown\"\n        ? 1\n        : e.key === \"ArrowUp\"\n          ? -1\n          : 0\n      : horizontalStep(e.key, e.currentTarget);\n    if (step === 0 && e.key !== \"Home\" && e.key !== \"End\") return;\n    const strip = e.currentTarget.closest('[role=\"tablist\"]');\n    if (!strip) return;\n    const items = Array.from(strip.querySelectorAll<HTMLElement>('[role=\"tab\"]'));\n    const from = items.indexOf(e.currentTarget);\n    if (from === -1) return;\n    e.preventDefault();\n    const to =\n      e.key === \"Home\"\n        ? 0\n        : e.key === \"End\"\n          ? items.length - 1\n          : (from + step + items.length) % items.length;\n    items[to]?.focus();\n  };\n  const tablist = (\n    <div\n      // Before the role and the name: a caller's arbitrary attribute is welcome on the\n      // strip, but a `role` or an `aria-label` arriving through a spread props object\n      // must not be able to unmake the tablist the tabs below are registered against.\n      {...rest}\n      ref={stripRef}\n      role=\"tablist\"\n      // The DOM spelling wins over the deprecated `label`; see {@link TabsProps}.\n      aria-label={ariaLabel ?? label}\n      // Only when vertical: `horizontal` is the tablist's implicit value, and the\n      // attribute on every existing strip would be noise in every snapshot of them.\n      aria-orientation={vertical ? \"vertical\" : undefined}\n      // Merged over a caller's own style rather than replacing it; see useStripFade.\n      // `data-overflow` names the cut ends in reading-direction terms, for a caller's\n      // own affordance (a scroll button) and for tests, which cannot read the mask.\n      style={fade.mask ? { ...rest.style, maskImage: fade.mask, WebkitMaskImage: fade.mask } : rest.style}\n      data-overflow={fade.overflow}\n      // With an add button the strip gains an outer box, and `className` goes there\n      // — it is the box a caller's margin or width is meant for.\n      className={cn(\n        vertical ? TABLIST_VERTICAL_CLASSES : wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES,\n        onAdd ? \"min-w-0\" : className,\n      )}\n    >\n      {tabs.map((tab) => {\n        const isActive = tab.id === active;\n        const removable = isRemovable(tab);\n        // Written once and worn by either tag below, so a routed tab and a\n        // state-only tab stay indistinguishable to the eye and to a screen reader.\n        const shared = {\n          role: \"tab\" as const,\n          \"aria-selected\": isActive,\n          // Roving tabindex: the whole strip is ONE stop in the page's tab order, and\n          // it is the open tab. Ten report tabs otherwise cost ten Tab presses to step\n          // over on the way to the table below them (live #262's strip is the extreme\n          // case, but every strip in the app paid it).\n          //\n          // The stop follows the SELECTION, not the focus. Arrowing is a look around —\n          // activation here is manual, because a tab can be a real route — so re-\n          // pointing the stop at a report the user only arrowed past would hand the\n          // strip back on the next visit in a state they never chose. The cost is that\n          // Tab out and back returns to the open tab rather than to the last one\n          // looked at; the ARIA pattern allows either, and this one needs no second\n          // piece of state shadowing `active`.\n          tabIndex: isActive ? 0 : -1,\n          // Only the open tab: see `panelId`.\n          \"aria-controls\": isActive ? panelId : undefined,\n          id: isActive && panelId ? `${panelId}-tab` : undefined,\n          \"aria-keyshortcuts\": deletesOnKey(tab) ? \"Delete\" : undefined,\n          onKeyDown: (e: KeyboardEvent<HTMLElement>) => onTabKeyDown(e, tab),\n          className: vertical\n            ? cn(\n                TAB_VERTICAL_CLASSES,\n                isActive ? TAB_VERTICAL_ACTIVE_CLASSES : TAB_VERTICAL_INACTIVE_CLASSES,\n                removable && \"pe-8\",\n              )\n            : cn(\n                wrap ? TAB_WRAP_CLASSES : TAB_CLASSES,\n                wrap\n                  ? isActive\n                    ? TAB_WRAP_ACTIVE_CLASSES\n                    : TAB_WRAP_INACTIVE_CLASSES\n                  : isActive\n                    ? TAB_ACTIVE_CLASSES\n                    : TAB_INACTIVE_CLASSES,\n                removable && TAB_REMOVABLE_CLASSES,\n              ),\n        };\n        const inner = (\n          <span\n            className={cn(\n              // In a side nav the row is the full width, so the label takes it and a\n              // badge lands at the row's end, where a column of counts lines up.\n              vertical ? \"flex min-w-0 flex-1 items-center gap-1.5\" : \"inline-flex max-w-full min-w-0 items-center gap-1.5\",\n              tab.empty && TAB_EMPTY_CLASSES,\n            )}\n          >\n            {tab.icon != null && (\n              <span aria-hidden className=\"inline-flex shrink-0 items-center gap-0.5\">\n                {tab.icon}\n              </span>\n            )}\n            {tab.detail != null ? (\n              // `min-w-0` + `truncate` on each line: capped by the tab's `max-w-full`, a\n              // long detail ends in an ellipsis. The whole text stays the tab's name.\n              <span className=\"flex min-w-0 flex-col items-start text-start\">\n                <span className=\"max-w-full truncate\">{tab.label}</span>\n                {/* A separator for the NAME only — whitespace between flex items is\n                    not drawn, and without it the two lines ran together into one\n                    word for a screen reader (\"80 km/hloop 2\"). */}{\" \"}\n                <span\n                  className={cn(\n                    \"max-w-full truncate text-[11px] font-normal leading-tight text-[var(--text-muted)]\",\n                    // On a wrapped strip's filled chip (below `md`) the muted grey\n                    // was dark text on the brand fill — \"loop 2\" all but vanished\n                    // under the one label that most needed reading. It takes the\n                    // chip's own ink instead, as the label and the × already do.\n                    wrap && isActive && !vertical && \"text-[var(--brand-contrast)] md:text-[var(--text-muted)]\",\n                  )}\n                >\n                  {tab.detail}\n                </span>\n              </span>\n            ) : (\n              tab.label\n            )}\n            {tab.badge != null ? (\n              vertical ? <span className=\"ms-auto flex shrink-0 items-center\">{tab.badge}</span> : tab.badge\n            ) : null}\n          </span>\n        );\n        const element = tab.href ? (\n          <a\n            key={tab.id}\n            {...shared}\n            href={tab.href}\n            draggable={false}\n            onClick={(e) => {\n              // Middle-, ⌘/Ctrl-, Shift- and Alt-click belong to the browser\n              // (feedback #451); only the plain left click is ours to cancel and\n              // route through `onChange`, which keeps the switch client-side.\n              if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n              e.preventDefault();\n              onChange(tab.id);\n            }}\n            // A <button> tab activated on Space; an anchor does not, so becoming a\n            // link (feedback #451) would have quietly cost keyboard users the tab\n            // strip. Enter is deliberately untouched — it is the anchor's own\n            // default and already arrives at `onChange` through the click handler\n            // above, so handling it here too would switch tabs twice. Same three\n            // lines the mobile row card carries, for the same reason; the rejected\n            // alternative — keeping a button and faking the middle click with\n            // window.open — is what the whole item is moving away from.\n            //\n            // Composed with the strip's arrow-key walk rather than replacing it: this\n            // prop overrides the one in `shared`, and an anchor tab that lost the\n            // arrows would be a strip that is navigable only where it is not a link.\n            onKeyDown={(e) => {\n              onTabKeyDown(e, tab);\n              if (e.defaultPrevented || e.key !== \" \") return;\n              e.preventDefault();\n              onChange(tab.id);\n            }}\n          >\n            {inner}\n          </a>\n        ) : (\n          <button key={tab.id} {...shared} onClick={() => onChange(tab.id)}>\n            {inner}\n          </button>\n        );\n        if (!removable) return element;\n        return (\n          // The × cannot go INSIDE the tab: a button in a button is invalid HTML, and\n          // a tab's children are presentational, so a reader would flatten it into the\n          // tab's name. It sits beside the tab, over the gutter the tab reserves.\n          <div key={tab.id} className={cn(\"relative flex max-w-full\", !vertical && \"shrink-0\")}>\n            {element}\n            {isActive && (\n              <IconButton\n                size=\"2xs\"\n                tone=\"danger\"\n                // Not a tab stop: the strip is one, and Delete is the keyboard's path.\n                // Still a named button, so a screen reader's cursor and a touch\n                // reader's swipe both reach it.\n                tabIndex={-1}\n                type=\"button\"\n                aria-label={text.remove(nameOf(tab))}\n                disabled={busy}\n                onClick={() => requestRemove(tab.id)}\n                className={cn(\n                  \"absolute inset-y-0 end-1 my-auto\",\n                  // On a wrapped strip's filled chip the quiet grey would vanish into\n                  // the brand fill below `md`.\n                  wrap && \"text-[var(--brand-contrast)] md:text-[var(--text-placeholder)]\",\n                )}\n              >\n                <X />\n              </IconButton>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n  if (!onAdd) return tablist;\n  if (vertical) {\n    // Under the column, not beside it, and with no rule to carry on: a side nav has none.\n    return (\n      <div className={cn(\"flex flex-col gap-0.5\", className)}>\n        {tablist}\n        <button type=\"button\" onClick={onAdd} disabled={busy} className={TAB_ADD_CLASSES}>\n          <Plus aria-hidden />\n          {addLabel ?? text.add}\n        </button>\n      </div>\n    );\n  }\n  return (\n    <div\n      className={cn(\n        wrap ? \"flex flex-wrap items-end gap-1.5 md:flex-nowrap md:gap-0\" : \"flex items-end\",\n        className,\n      )}\n    >\n      {tablist}\n      {/* Outside the tablist: an action, not a tab — and a tablist may own only\n          tabs. The rule under the strip carries on beneath it. */}\n      <div\n        className={cn(\n          \"flex flex-1 items-center\",\n          wrap\n            ? \"md:self-stretch md:border-b md:border-[var(--border)]\"\n            : \"self-stretch border-b border-[var(--border)]\",\n        )}\n      >\n        <button\n          type=\"button\"\n          onClick={onAdd}\n          disabled={busy}\n          className={cn(TAB_ADD_CLASSES, wrap ? TAB_ADD_WRAP_CLASSES : TAB_ADD_PHONE_CLASSES)}\n        >\n          <Plus aria-hidden />\n          {/* Below md a scrolling strip keeps the room for tabs: the label is visually\n              hidden and the \"+\" carries it as its name. Beside \"+ Add loop\" a 390px strip\n              showed the open tab and a sliver of the next (showcase audit). A wrapping\n              strip has its own row there, so it keeps the label. */}\n          <span className={wrap ? undefined : \"max-md:sr-only\"}>{addLabel ?? text.add}</span>\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["FLOATING_LABEL_STATIC","Input","Select","Textarea"]}