@eifi1/ui-kit 0.50.0 → 0.51.0

package/dist/components/alert-banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from \"react\";\nimport { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's\n *  preview and beta-performance banners, which borrowed `warning` for want of it and\n *  so told every user of the preview build that something was wrong. */\nexport type AlertTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"neutral\";\n\n/** `sm` (0.10.0): 12px type and a 14px glyph — the hint line under a field or a total\n *  that keksdose spells `text-xs text-amber-700 dark:text-amber-400` by hand\n *  (accounts-page's missing-rate note, import-map-step, guest-key-control's two\n *  key states, goal-form). At body size those read as a second heading. */\nexport type AlertSize = \"sm\" | \"md\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-danger-strong bg-danger-soft\",\n  warning: \"border-2 border-warning bg-warning-soft\",\n  info: \"border-2 border-info bg-info-soft\",\n  success: \"border-2 border-success bg-success-soft\",\n  neutral: \"border border-subtle\",\n};\n\n/** `elevated`: the same frame on an OPAQUE surface. The dark tone washes are\n *  translucent (a 20–25 % tint), which is right on a page and wrong on anything that\n *  floats over one — keksdose's server-wake notice (#209) let the page's own text\n *  show through the one message whose job is to be read when nothing else makes\n *  sense. So the surface becomes `--bg-surface` and the tone's wash is layered on it\n *  as a background IMAGE (a flat gradient), which keeps the exact tint in both themes\n *  without a second, opaque copy of every `-bg` token. */\nconst TONE_ELEVATED: Record<AlertTone, string> = {\n  danger: \"bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]\",\n  warning: \"bg-[image:linear-gradient(var(--warning-bg),var(--warning-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  neutral: \"\",\n};\nconst ELEVATED = \"bg-surface shadow-lg\";\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout.\n *\n * The compensation is `calc(<the neutral padding in rem> - 1px)`, not a px figure\n * (0.32, docs/text-size-harmonization.md §3.2): the padding grows with the text size,\n * the 1px it gives back to the border does not — an 11 px padding stopped matching `p-3`\n * at 125 %, and toggling the tone shifted the layout again. */\nexport function alertFrameClass(tone: AlertTone, size: AlertSize = \"md\"): string {\n  const box =\n    size === \"sm\"\n      ? tone === \"neutral\"\n        ? \"rounded-md px-2.5 py-1.5\"\n        : \"rounded-md px-[calc(0.625rem-1px)] py-[calc(0.375rem-1px)]\"\n      : tone === \"neutral\"\n        ? \"rounded-md p-3\"\n        : \"rounded-md p-[calc(0.75rem-1px)]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\n/** The `strip` frame: the tone's surface edge to edge, no radius, and only the BOTTOM\n *  border, 1px — a strip is a band across the top of a page, and its one visible edge\n *  is the line it draws under itself. kastlan's trial, past-due and tour banners. */\nfunction stripFrameClass(tone: AlertTone, size: AlertSize): string {\n  return cn(\n    TONE_FRAME[tone],\n    \"rounded-none border-0 border-b\",\n    size === \"sm\" ? \"px-4 py-1.5\" : \"px-4 py-2\",\n  );\n}\n\nconst TONE_TEXT: Record<AlertTone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n  neutral: \"text-secondary\",\n};\n\nconst TONE_ICON: Record<AlertTone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n  neutral: \"text-muted\",\n};\n\n/** Which glyph a tone draws when the caller names none. The triangle belongs to the\n *  two tones that mean \"something is wrong\"; `info` and `neutral` get the ⓘ. That is\n *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a\n *  triangle with no colour is a warning that looks like a note — and a neutral note\n *  that draws no triangle is simply a note (lenkbank's \"values are rounded\"). */\nconst TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {\n  danger: AlertTriangle,\n  warning: AlertTriangle,\n  info: Info,\n  success: CheckCircle2,\n  neutral: Info,\n};\n\ninterface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onClick\"> {\n  /** Default `danger`. `info` for news, `neutral` for a plain note — see\n   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */\n  tone?: AlertTone;\n  /**\n   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role\n   * and NOTHING else — no border, no surface, no padding — so it fits inside a\n   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar\n   * shows \"Radius below the minimum\" and \"Solving…\" there; a box would have doubled\n   * the row's height every time either appeared.\n   *\n   * The inline variant is also a LIVE REGION by default — `role=\"alert\"` for\n   * `danger`, `role=\"status\"` for the rest — because a message that appears in a\n   * toolbar in answer to what the user just did is exactly the kind a screen reader\n   * otherwise never hears. The box stays role-less as it always was: it is usually\n   * page furniture present at load, and an alert that fires on every navigation is\n   * noise. Either way a `role` you pass wins.\n   *\n   * `strip` (0.10.0): a band across the top of a page or a panel — edge to edge, no\n   * radius, only a bottom border, content centred on one line, and usually an\n   * {@link action}. kastlan's billing trial-banner and past-due-banner and its tours\n   * tour-banner each built this by hand in amber or red Tailwind classes, with a\n   * separate dark: spelling apiece. Role-less like the box: it is page furniture.\n   */\n  variant?: \"box\" | \"inline\" | \"strip\";\n  /** See {@link AlertSize}. Default `md`. */\n  size?: AlertSize;\n  /**\n   * `inline` only (0.11.0): lay the message out as a BLOCK — a full-width `flex` row,\n   * the glyph on the text's FIRST line when it wraps — instead of the `inline-flex`,\n   * centred line it is by default. keksdose writes `className=\"flex\"` on nearly every\n   * inline banner it has (accounts-page:564, holdings-panel:631, import-map-step:66/314,\n   * guest-key-control:84) to get a line of its own under a total or a field, and a\n   * two-line hint there then centres its glyph between the lines.\n   *\n   * An option rather than the new default, because the inline-flex is load-bearing for\n   * the callers the variant was made for: lenkbank's corner-motion toolbar\n   * (corner-motion.tsx:178) sets it as a `shrink-0` item beside the controls, kastlan's\n   * import page and keksdose's rules page place it in a run of content — a block would\n   * take the whole row in the second kind, and top-align the first against a taller\n   * control. Ignored by `box` and `strip`, which are blocks already.\n   */\n  block?: boolean;\n  /**\n   * `false` opts an inline banner out of its live region (no `role=\"alert\"` /\n   * `role=\"status\"`), for a message that is static page content rather than the answer\n   * to something the user just did: keksdose's CAMT review step (camt-review-step:214)\n   * renders \"unresolved rows block the import\" as part of the step, and as\n   * `role=\"alert\"` a screen reader interrupted with it on every mount. A `role` you pass\n   * still wins. Default `true`; the box and the strip are role-less either way.\n   */\n  live?: boolean;\n  /**\n   * An opaque, raised surface (a shadow, and no translucency in dark mode) for a\n   * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`\n   * only; an inline message has no surface to raise.\n   */\n  elevated?: boolean;\n  /**\n   * A trailing control — the \"Update payment method\" button on kastlan's trial and\n   * past-due strips, the \"Exit\" on its tour strip. Sits at the end of the row,\n   * vertically centred, and never shrinks. On a whole-row banner (`href`/`onClick`)\n   * it is rendered BESIDE the row's own link or button, as the × is, because\n   * interactive content may not nest.\n   */\n  action?: ReactNode;\n  /** Replaces the tone's glyph — a `<Spinner label={null} />` for \"Solving…\", say.\n   *  `null` draws none. Always decorative; the text carries the message. */\n  icon?: ReactNode;\n  /** Renders an × at the end that calls this. The banner does not hide itself — the\n   *  caller removes it (and remembers that it did), as with every other kit control\n   *  whose state is app state. */\n  onDismiss?: () => void;\n  /** Accessible name of the ×. Default: `common.dismiss` from the\n   *  {@link UiKitProvider}, else \"Dismiss\". */\n  dismissLabel?: string;\n  /**\n   * 0.48: on a phone (below the kit's text-size-aware `md`) hold the message to ONE line,\n   * with a \"More\" / \"Less\" toggle after it (`aria-expanded`, `aria-controls` the message;\n   * `common.showMore` / `common.showLess`). From `md` up nothing changes. The toggle only\n   * shows while the line actually cuts the message off.\n   *\n   * keksdose dev#611 (UX-1.2): its beta notice took three to four lines (~100px) above\n   * every phone screen, and the app built the clamp and the button around the banner's\n   * children by hand. Ignored on a whole-row banner (`href` / `onClick`): a toggle cannot\n   * sit inside the row's own link or button.\n   */\n  clampMobile?: boolean;\n  /**\n   * Where a box's {@link action} goes on a phone (below `sm`). 0.48.\n   *\n   * `own-line` (default): a line of its own under the message, lined up with it\n   * (kastlan 53 — a long message beside a long button squeezed into a column).\n   *\n   * `flow`: on the message's line while the message (with its glyph) keeps 10rem, else at the END of the\n   * next line — for a short message and a short action, which a line of their own each\n   * would stack for nothing. keksdose dev #623: the budget card's \"5 underfunded\n   * categories\" + \"Assign\" built this with descendant overrides on the kit's classes.\n   * The basis is in rem, so it grows with the text size: at Large the action drops a\n   * line sooner, by itself. The × stays at the top end either way; `clampMobile` works\n   * alongside. From `sm` up nothing changes. Ignored by `strip` (which flows like this\n   * already) and `inline`.\n   */\n  actionPlacement?: \"own-line\" | \"flow\";\n  children: ReactNode;\n  /**\n   * The banner's frame — where the rest of the props go (0.34, API-2, refactor audit\n   * 2026-10). Which element that is depends on the mode: the `<div>`; with `href` or\n   * `onClick` the `<a>` or `<button>` that IS the row; with an × or an `action` beside\n   * that row, the `<div>` holding the two. Hence `HTMLElement`.\n   */\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * The whole-row modes. keksdose's budget-summary card is a banner you tap to open\n * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a\n * banner with a link inside it was a small target inside a big one that looked like\n * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one\n * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.\n *\n * With `onDismiss` as well, the × cannot go inside the button (interactive content\n * may not nest), so the frame becomes a wrapper holding two siblings: the row's\n * button, stretched over the whole frame, and the × on top of it. It still looks and\n * clicks like one banner with an × in its corner, and the two are separate tab stops.\n */\nexport type AlertBannerProps = AlertBannerBaseProps &\n  (\n    | {\n        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */\n        href?: string;\n        onClick?: never;\n      }\n    | {\n        href?: never;\n        /** Makes the whole banner one button. Mutually exclusive with `href`. The\n         *  event's element is the `<button>`, not a `<div>`. */\n        onClick?: (event: MouseEvent<HTMLElement>) => void;\n      }\n  );\n\n/** Warning/danger/info callout box with the shared frame and an icon — or, with\n *  `variant=\"inline\"`, the same message as a frameless line of toned text. */\nexport function AlertBanner({\n  tone = \"danger\",\n  variant = \"box\",\n  size = \"md\",\n  block = false,\n  live = true,\n  elevated = false,\n  action,\n  icon,\n  onDismiss,\n  dismissLabel,\n  clampMobile = false,\n  actionPlacement = \"own-line\",\n  href,\n  onClick,\n  className,\n  children,\n  role,\n  ref,\n  ...rest\n}: AlertBannerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });\n  const inline = variant === \"inline\";\n  const strip = variant === \"strip\";\n  const sm = size === \"sm\";\n  const interactive = href !== undefined || onClick !== undefined;\n  // A block-laid inline banner behaves like a box for layout: a row that may wrap.\n  const inlineRow = inline && !block;\n  const resolvedRole = role ?? (inline && live ? (tone === \"danger\" ? \"alert\" : \"status\") : undefined);\n\n  // `clampMobile`: the message's one-line clamp below `md`, and whether that line holds\n  // it all (then there is nothing to show \"More\" of). Measured while collapsed — the\n  // clamp is what makes `scrollHeight` exceed the box — and again whenever its box\n  // changes size, which a rotation or crossing `md` does. With no layout (a test, the\n  // server) the box is 0 tall, which reads as \"may not fit\": the toggle stays.\n  const clamp = clampMobile && !interactive;\n  const bodyId = useId();\n  const bodyRef = useRef<HTMLSpanElement>(null);\n  const [expanded, setExpanded] = useState(false);\n  const [fits, setFits] = useState(false);\n  useLayoutEffect(() => {\n    const el = bodyRef.current;\n    if (!clamp || expanded || !el) return;\n    const check = () => setFits(el.clientHeight > 0 && el.scrollHeight <= el.clientHeight + 1);\n    check();\n    const ro = typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(check);\n    ro?.observe(el);\n    return () => ro?.disconnect();\n  }, [clamp, expanded, children]);\n\n  const Glyph = TONE_GLYPH[tone];\n  // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.\n  const nudge = inlineRow || strip ? undefined : sm ? \"mt-px\" : \"mt-0.5\";\n  const glyph =\n    icon === null ? null : icon !== undefined ? (\n      <span\n        aria-hidden\n        className={cn(\"flex shrink-0\", sm ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\", nudge, TONE_ICON[tone])}\n      >\n        {icon}\n      </span>\n    ) : (\n      <Glyph aria-hidden className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0\", nudge, TONE_ICON[tone])} />\n    );\n\n  // The row layout, shared by every shape below. A strip centres, and WRAPS: on a\n  // phone a long message plus an action would otherwise squeeze the text into a narrow\n  // column, so the action drops under it instead. A box may wrap its text, so it\n  // top-aligns and nudges the glyph onto the first line.\n  // A BOX with an action wraps too, below sm only (kastlan 53): the verify-email box\n  // squeezed \"Please confirm your email address…\" into a ~100px column beside a\n  // \"Resend verification email\" button. There the action takes a line of its own under\n  // the message, and the × stays at the top end; from sm up the box is one row as before.\n  const boxAction = !inline && !strip && action !== undefined && action !== null;\n  // `flow` (0.48): glyph + message and the action in a row of their own that wraps\n  // below sm; the × stays outside it, at the top end.\n  const flow = boxAction && actionPlacement === \"flow\";\n  const boxWraps = boxAction && !flow;\n  const flowRow = cn(\"flex min-w-0 flex-1 items-center max-sm:flex-wrap\", sm ? \"gap-1.5\" : \"gap-2\");\n  // The 10rem the message keeps beside the action before the action wraps.\n  const flowBasis = flow ? \"max-sm:basis-40\" : undefined;\n  const row = cn(\n    inlineRow\n      ? \"inline-flex items-center\"\n      : strip\n        ? \"flex flex-wrap items-center gap-y-1\"\n        : cn(\"flex items-start\", boxWraps && \"max-sm:flex-wrap max-sm:gap-y-2\"),\n    sm ? \"gap-1.5 text-xs\" : inline ? \"gap-1.5 text-sm\" : \"gap-2 text-sm\",\n  );\n  // The strip's message claims 12rem before anything shrinks. `flex-1` is a 0 basis,\n  // which never makes a wrapping row wrap — the action and the × squeezed the message\n  // into a three-word column on a phone instead. With a real basis the action drops to\n  // a second line once message + action no longer fit, and the message keeps the width.\n  const grow = strip ? \"flex-[1_1_12rem]\" : \"flex-1\";\n  // Inside a whole-row banner's button or link, which then carries `grow` itself.\n  const nested = interactive && (onDismiss !== undefined || (action !== undefined && action !== null));\n  const frame = inline\n    ? \"\"\n    : cn(\n        strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),\n        elevated && cn(ELEVATED, TONE_ELEVATED[tone]),\n      );\n  const focusRing = cn(FOCUS_RING, \"focus-visible:ring-offset-1 focus-visible:ring-offset-surface\");\n\n  const contentBody = clamp ? (\n    // Below `md` a row: the message, clamped, then the toggle on its baseline. From\n    // `md` up a plain span with the message in it, as without the prop.\n    <span\n      className={cn(\n        !inlineRow && grow,\n        \"min-w-0 text-start max-md:flex max-md:items-baseline max-md:gap-2\",\n      )}\n    >\n      {/* The clamp is deliberate: the rest is one tap away behind More, so the size sweep's\n          truncation gate (scripts/screenshot-sizes.mjs) leaves it alone. */}\n      <span\n        id={bodyId}\n        ref={bodyRef}\n        data-truncate-ok=\"\"\n        className={cn(\"max-md:min-w-0\", !expanded && \"max-md:line-clamp-1\")}\n      >\n        {children}\n      </span>\n      {(expanded || !fits) && (\n        <button\n          type=\"button\"\n          aria-expanded={expanded}\n          aria-controls={bodyId}\n          onClick={() => setExpanded((v) => !v)}\n          className={cn(\n            \"relative z-10 shrink-0 rounded-sm font-medium underline underline-offset-2 md:hidden\",\n            focusRing,\n          )}\n        >\n          {expanded ? common.showLess : common.showMore}\n        </button>\n      )}\n    </span>\n  ) : (\n    <span className={cn(!inlineRow && (nested ? \"flex-1\" : grow), \"min-w-0 text-start\")}>\n      {children}\n    </span>\n  );\n  const content = (\n    <>\n      {glyph}\n      {contentBody}\n      {interactive && (\n        <ChevronRight\n          aria-hidden\n          className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0 opacity-70 rtl:-scale-x-100\", nudge)}\n        />\n      )}\n    </>\n  );\n\n  const dismiss = onDismiss ? (\n    <button\n      type=\"button\"\n      aria-label={common.dismiss}\n      onClick={(e) => {\n        // A dismiss inside a whole-row banner must not also follow the row.\n        e.preventDefault();\n        e.stopPropagation();\n        onDismiss();\n      }}\n      className={cn(\n        // Negative margins so the × does not make the box taller than its text; the\n        // hover wash takes the tone's own hue, so it works on every tone.\n        \"relative z-10 -my-0.5 -me-0.5 flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-current/10\",\n        focusRing,\n      )}\n    >\n      <X aria-hidden className=\"size-4\" />\n    </button>\n  ) : null;\n\n  // `relative z-10` so it stays clickable over a whole-row banner's stretched target.\n  // `max-w-full flex-wrap`: on a line of its own, two actions side by side ran 57 px\n  // past a 360 px phone at Extra large (the demo strip's \"Request access\" and \"Sign in\",\n  // 0.32.1); held to the line, they wrap there instead. Where they fit in one row,\n  // nothing changes.\n  const trailing =\n    action !== undefined && action !== null ? (\n      <div\n        className={cn(\n          \"relative z-10 flex max-w-full shrink-0 flex-wrap items-center gap-2\",\n          !strip && !inlineRow && \"self-center\",\n          (strip || flow) && \"ms-auto\",\n          // Last, on a line of its own, lined up with the message (past the glyph).\n          boxWraps && cn(\"max-sm:order-last max-sm:basis-full\", glyph && (sm ? \"max-sm:ps-5\" : \"max-sm:ps-6\")),\n        )}\n      >\n        {action}\n      </div>\n    ) : null;\n\n  if (!interactive) {\n    return (\n      <div\n        // The tone as data (0.34, refactor audit 2026-10, TST-9): a stable hook for a\n        // test or a caller's selector, where the frame classes are the kit's to change.\n        data-tone={tone}\n        // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n        // `aria-describedby` — then the layout and tone classes, which are merged\n        // through `cn` rather than spread so a caller's `className` refines the box\n        // instead of replacing it.\n        {...rest}\n        ref={ref as Ref<HTMLDivElement>}\n        role={resolvedRole}\n        className={cn(row, frame, TONE_TEXT[tone], className)}\n      >\n        {flow ? (\n          <>\n            <div className={flowRow} data-action-flow=\"\">\n              {/* The glyph rides with the message, on its first line; the two are\n                  centred against the action as one, as the whole-row button is. */}\n              <span className={cn(\"flex min-w-0 flex-1 items-start\", flowBasis, sm ? \"gap-1.5\" : \"gap-2\")}>\n                {glyph}\n                {contentBody}\n              </span>\n              {trailing}\n            </div>\n          </>\n        ) : (\n          <>\n            {content}\n            {trailing}\n          </>\n        )}\n        {dismiss}\n      </div>\n    );\n  }\n\n  const hover = \"cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110\";\n  // With a dismiss the frame is a wrapper and the row element is stretched over it;\n  // without one the row element IS the frame.\n  const split = dismiss !== null || trailing !== null;\n  const actionClass = split\n    ? cn(\n        \"flex min-w-0 text-start\",\n        grow,\n        flowBasis,\n        sm ? \"gap-1.5\" : \"gap-2\",\n        inlineRow || strip ? \"items-center\" : \"items-start\",\n        \"outline-none after:absolute after:inset-0 after:content-['']\",\n        strip ? \"after:rounded-none\" : \"after:rounded-md\",\n        \"focus-visible:after:ring-focus focus-visible:after:ring-brand\",\n      )\n    : cn(row, !inlineRow && \"w-full\", frame, TONE_TEXT[tone], hover, focusRing, className);\n  // The div's attributes are the row element's: an `id`, a test id or an\n  // `aria-describedby` belongs on the thing that takes focus. The live-region role is\n  // NOT carried over — a button or a link that is also a `status` is neither.\n  const actionRest = split ? {} : rest;\n  // The `ref` goes with the rest: to the row element when it is the frame.\n  const rowRef = split ? undefined : ref;\n\n  const rowAction =\n    href !== undefined ? (\n      <a\n        data-tone={split ? undefined : tone}\n        {...(actionRest as ComponentPropsWithoutRef<\"a\">)}\n        ref={rowRef as Ref<HTMLAnchorElement> | undefined}\n        href={href}\n        className={actionClass}\n      >\n        {content}\n      </a>\n    ) : (\n      <button\n        data-tone={split ? undefined : tone}\n        {...(actionRest as ComponentPropsWithoutRef<\"button\">)}\n        ref={rowRef as Ref<HTMLButtonElement> | undefined}\n        type=\"button\"\n        onClick={onClick}\n        className={actionClass}\n      >\n        {content}\n      </button>\n    );\n\n  if (!split) return rowAction;\n  return (\n    <div\n      data-tone={tone}\n      {...rest}\n      ref={ref as Ref<HTMLDivElement>}\n      role={resolvedRole}\n      className={cn(\"relative\", row, frame, TONE_TEXT[tone], hover, className)}\n    >\n      {flow ? (\n        // Not positioned: the row's stretched `after:` target must still cover the frame.\n        <div className={flowRow} data-action-flow=\"\">\n          {rowAction}\n          {trailing}\n        </div>\n      ) : (\n        <>\n          {rowAction}\n          {trailing}\n        </>\n      )}\n      {dismiss}\n    </div>\n  );\n}\n"],"mappings":";AAgUM,SAyFF,UAzFE,KAoDF,YApDE;AAhUN,SAAS,OAAO,iBAAiB,QAAQ,gBAAgB;AAEzD,SAAS,eAAe,cAAc,cAAc,MAAM,SAAS;AACnE,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB,oBAAoB;AA0BpD,MAAM,aAAwC;AAAA,EAC5C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AACX;AASA,MAAM,gBAA2C;AAAA,EAC/C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AACX;AACA,MAAM,WAAW;AAKV,SAAS,eAAe,MAAyB;AACtD,SAAO,WAAW,IAAI;AACxB;AAUO,SAAS,gBAAgB,MAAiB,OAAkB,MAAc;AAC/E,QAAM,MACJ,SAAS,OACL,SAAS,YACP,6BACA,+DACF,SAAS,YACP,mBACA;AACR,SAAO,GAAG,GAAG,IAAI,WAAW,IAAI,CAAC;AACnC;AAKA,SAAS,gBAAgB,MAAiB,MAAyB;AACjE,SAAO;AAAA,IACL,WAAW,IAAI;AAAA,IACf;AAAA,IACA,SAAS,OAAO,gBAAgB;AAAA,EAClC;AACF;AAEA,MAAM,YAAuC;AAAA,EAC3C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,YAAuC;AAAA,EAC3C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AACX;AAOA,MAAM,aAAsD;AAAA,EAC1D,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AACX;AAiJO,SAAS,YAAY;AAAA,EAC1B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,aAAa,UAAU,uBAAuB,EAAE,SAAS,aAAa,CAAC;AACtF,QAAM,SAAS,YAAY;AAC3B,QAAM,QAAQ,YAAY;AAC1B,QAAM,KAAK,SAAS;AACpB,QAAM,cAAc,SAAS,UAAa,YAAY;AAEtD,QAAM,YAAY,UAAU,CAAC;AAC7B,QAAM,eAAe,SAAS,UAAU,OAAQ,SAAS,WAAW,UAAU,WAAY;AAO1F,QAAM,QAAQ,eAAe,CAAC;AAC9B,QAAM,SAAS,MAAM;AACrB,QAAM,UAAU,OAAwB,IAAI;AAC5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,kBAAgB,MAAM;AACpB,UAAM,KAAK,QAAQ;AACnB,QAAI,CAAC,SAAS,YAAY,CAAC,GAAI;AAC/B,UAAM,QAAQ,MAAM,QAAQ,GAAG,eAAe,KAAK,GAAG,gBAAgB,GAAG,eAAe,CAAC;AACzF,UAAM;AACN,UAAM,KAAK,OAAO,mBAAmB,cAAc,OAAO,IAAI,eAAe,KAAK;AAClF,QAAI,QAAQ,EAAE;AACd,WAAO,MAAM,IAAI,WAAW;AAAA,EAC9B,GAAG,CAAC,OAAO,UAAU,QAAQ,CAAC;AAE9B,QAAM,QAAQ,WAAW,IAAI;AAE7B,QAAM,QAAQ,aAAa,QAAQ,SAAY,KAAK,UAAU;AAC9D,QAAM,QACJ,SAAS,OAAO,OAAO,SAAS,SAC9B;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW,GAAG,iBAAiB,KAAK,qBAAqB,kBAAkB,OAAO,UAAU,IAAI,CAAC;AAAA,MAEhG;AAAA;AAAA,EACH,IAEA,oBAAC,SAAM,eAAW,MAAC,WAAW,GAAG,KAAK,aAAa,UAAU,YAAY,OAAO,UAAU,IAAI,CAAC,GAAG;AAWtG,QAAM,YAAY,CAAC,UAAU,CAAC,SAAS,WAAW,UAAa,WAAW;AAG1E,QAAM,OAAO,aAAa,oBAAoB;AAC9C,QAAM,WAAW,aAAa,CAAC;AAC/B,QAAM,UAAU,GAAG,qDAAqD,KAAK,YAAY,OAAO;AAEhG,QAAM,YAAY,OAAO,oBAAoB;AAC7C,QAAM,MAAM;AAAA,IACV,YACI,6BACA,QACE,wCACA,GAAG,oBAAoB,YAAY,iCAAiC;AAAA,IAC1E,KAAK,oBAAoB,SAAS,oBAAoB;AAAA,EACxD;AAKA,QAAM,OAAO,QAAQ,qBAAqB;AAE1C,QAAM,SAAS,gBAAgB,cAAc,UAAc,WAAW,UAAa,WAAW;AAC9F,QAAM,QAAQ,SACV,KACA;AAAA,IACE,QAAQ,gBAAgB,MAAM,IAAI,IAAI,gBAAgB,MAAM,IAAI;AAAA,IAChE,YAAY,GAAG,UAAU,cAAc,IAAI,CAAC;AAAA,EAC9C;AACJ,QAAM,YAAY,GAAG,YAAY,+DAA+D;AAEhG,QAAM,cAAc;AAAA;AAAA;AAAA,IAGlB;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT,CAAC,aAAa;AAAA,UACd;AAAA,QACF;AAAA,QAIA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,KAAK;AAAA,cACL,oBAAiB;AAAA,cACjB,WAAW,GAAG,kBAAkB,CAAC,YAAY,qBAAqB;AAAA,cAEjE;AAAA;AAAA,UACH;AAAA,WACE,YAAY,CAAC,SACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,iBAAe;AAAA,cACf,iBAAe;AAAA,cACf,SAAS,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC;AAAA,cACpC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA,cAEC,qBAAW,OAAO,WAAW,OAAO;AAAA;AAAA,UACvC;AAAA;AAAA;AAAA,IAEJ;AAAA,MAEA,oBAAC,UAAK,WAAW,GAAG,CAAC,cAAc,SAAS,WAAW,OAAO,oBAAoB,GAC/E,UACH;AAEF,QAAM,UACJ,iCACG;AAAA;AAAA,IACA;AAAA,IACA,eACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW,GAAG,KAAK,aAAa,UAAU,wCAAwC,KAAK;AAAA;AAAA,IACzF;AAAA,KAEJ;AAGF,QAAM,UAAU,YACd;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY,OAAO;AAAA,MACnB,SAAS,CAAC,MAAM;AAEd,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,kBAAU;AAAA,MACZ;AAAA,MACA,WAAW;AAAA;AAAA;AAAA,QAGT;AAAA,QACA;AAAA,MACF;AAAA,MAEA,8BAAC,KAAE,eAAW,MAAC,WAAU,UAAS;AAAA;AAAA,EACpC,IACE;AAOJ,QAAM,WACJ,WAAW,UAAa,WAAW,OACjC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,CAAC,SAAS,CAAC,aAAa;AAAA,SACvB,SAAS,SAAS;AAAA;AAAA,QAEnB,YAAY,GAAG,uCAAuC,UAAU,KAAK,gBAAgB,cAAc;AAAA,MACrG;AAAA,MAEC;AAAA;AAAA,EACH,IACE;AAEN,MAAI,CAAC,aAAa;AAChB,WACE;AAAA,MAAC;AAAA;AAAA,QAGC,aAAW;AAAA,QAKV,GAAG;AAAA,QACJ;AAAA,QACA,MAAM;AAAA,QACN,WAAW,GAAG,KAAK,OAAO,UAAU,IAAI,GAAG,SAAS;AAAA,QAEnD;AAAA,iBACC,gCACE,+BAAC,SAAI,WAAW,SAAS,oBAAiB,IAGxC;AAAA,iCAAC,UAAK,WAAW,GAAG,mCAAmC,WAAW,KAAK,YAAY,OAAO,GACvF;AAAA;AAAA,cACA;AAAA,eACH;AAAA,YACC;AAAA,aACH,GACF,IAEA,iCACG;AAAA;AAAA,YACA;AAAA,aACH;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,QAAQ;AAGd,QAAM,QAAQ,YAAY,QAAQ,aAAa;AAC/C,QAAM,cAAc,QAChB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK,YAAY;AAAA,IACjB,aAAa,QAAQ,iBAAiB;AAAA,IACtC;AAAA,IACA,QAAQ,uBAAuB;AAAA,IAC/B;AAAA,EACF,IACA,GAAG,KAAK,CAAC,aAAa,UAAU,OAAO,UAAU,IAAI,GAAG,OAAO,WAAW,SAAS;AAIvF,QAAM,aAAa,QAAQ,CAAC,IAAI;AAEhC,QAAM,SAAS,QAAQ,SAAY;AAEnC,QAAM,YACJ,SAAS,SACP;AAAA,IAAC;AAAA;AAAA,MACC,aAAW,QAAQ,SAAY;AAAA,MAC9B,GAAI;AAAA,MACL,KAAK;AAAA,MACL;AAAA,MACA,WAAW;AAAA,MAEV;AAAA;AAAA,EACH,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,aAAW,QAAQ,SAAY;AAAA,MAC9B,GAAI;AAAA,MACL,KAAK;AAAA,MACL,MAAK;AAAA,MACL;AAAA,MACA,WAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAGJ,MAAI,CAAC,MAAO,QAAO;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACV,GAAG;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN,WAAW,GAAG,YAAY,KAAK,OAAO,UAAU,IAAI,GAAG,OAAO,SAAS;AAAA,MAEtE;AAAA;AAAA;AAAA,UAEC,qBAAC,SAAI,WAAW,SAAS,oBAAiB,IACvC;AAAA;AAAA,YACA;AAAA,aACH;AAAA,YAEA,iCACG;AAAA;AAAA,UACA;AAAA,WACH;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from \"react\";\nimport { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's\n *  preview and beta-performance banners, which borrowed `warning` for want of it and\n *  so told every user of the preview build that something was wrong. */\nexport type AlertTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"neutral\";\n\n/** `sm` (0.10.0): 12px type and a 14px glyph — the hint line under a field or a total\n *  that keksdose spells `text-xs text-amber-700 dark:text-amber-400` by hand\n *  (accounts-page's missing-rate note, import-map-step, guest-key-control's two\n *  key states, goal-form). At body size those read as a second heading. */\nexport type AlertSize = \"sm\" | \"md\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-danger-strong bg-danger-soft\",\n  warning: \"border-2 border-warning bg-warning-soft\",\n  info: \"border-2 border-info bg-info-soft\",\n  success: \"border-2 border-success bg-success-soft\",\n  neutral: \"border border-subtle\",\n};\n\n/** `elevated`: the same frame on an OPAQUE surface. The dark tone washes are\n *  translucent (a 20–25 % tint), which is right on a page and wrong on anything that\n *  floats over one — keksdose's server-wake notice (#209) let the page's own text\n *  show through the one message whose job is to be read when nothing else makes\n *  sense. So the surface becomes `--bg-surface` and the tone's wash is layered on it\n *  as a background IMAGE (a flat gradient), which keeps the exact tint in both themes\n *  without a second, opaque copy of every `-bg` token. */\nconst TONE_ELEVATED: Record<AlertTone, string> = {\n  danger: \"bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]\",\n  warning: \"bg-[image:linear-gradient(var(--warning-bg),var(--warning-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  neutral: \"\",\n};\nconst ELEVATED = \"bg-surface shadow-lg\";\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout.\n *\n * The compensation is `calc(<the neutral padding in rem> - 1px)`, not a px figure\n * (0.32, docs/text-size-harmonization.md §3.2): the padding grows with the text size,\n * the 1px it gives back to the border does not — an 11 px padding stopped matching `p-3`\n * at 125 %, and toggling the tone shifted the layout again. */\nexport function alertFrameClass(tone: AlertTone, size: AlertSize = \"md\"): string {\n  const box =\n    size === \"sm\"\n      ? tone === \"neutral\"\n        ? \"rounded-md px-2.5 py-1.5\"\n        : \"rounded-md px-[calc(0.625rem-1px)] py-[calc(0.375rem-1px)]\"\n      : tone === \"neutral\"\n        ? \"rounded-md p-3\"\n        : \"rounded-md p-[calc(0.75rem-1px)]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\n/** The `strip` frame: the tone's surface edge to edge, no radius, and only the BOTTOM\n *  border, 1px — a strip is a band across the top of a page, and its one visible edge\n *  is the line it draws under itself. kastlan's trial, past-due and tour banners. */\nfunction stripFrameClass(tone: AlertTone, size: AlertSize): string {\n  return cn(\n    TONE_FRAME[tone],\n    \"rounded-none border-0 border-b\",\n    size === \"sm\" ? \"px-4 py-1.5\" : \"px-4 py-2\",\n  );\n}\n\nconst TONE_TEXT: Record<AlertTone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n  neutral: \"text-secondary\",\n};\n\nconst TONE_ICON: Record<AlertTone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n  neutral: \"text-muted\",\n};\n\n/** Which glyph a tone draws when the caller names none. The triangle belongs to the\n *  two tones that mean \"something is wrong\"; `info` and `neutral` get the ⓘ. That is\n *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a\n *  triangle with no colour is a warning that looks like a note — and a neutral note\n *  that draws no triangle is simply a note (lenkbank's \"values are rounded\"). */\nconst TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {\n  danger: AlertTriangle,\n  warning: AlertTriangle,\n  info: Info,\n  success: CheckCircle2,\n  neutral: Info,\n};\n\ninterface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onClick\"> {\n  /** Default `danger`. `info` for news, `neutral` for a plain note — see\n   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */\n  tone?: AlertTone;\n  /**\n   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role\n   * and NOTHING else — no border, no surface, no padding — so it fits inside a\n   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar\n   * shows \"Radius below the minimum\" and \"Solving…\" there; a box would have doubled\n   * the row's height every time either appeared.\n   *\n   * The inline variant is also a LIVE REGION by default — `role=\"alert\"` for\n   * `danger`, `role=\"status\"` for the rest — because a message that appears in a\n   * toolbar in answer to what the user just did is exactly the kind a screen reader\n   * otherwise never hears. The box stays role-less as it always was: it is usually\n   * page furniture present at load, and an alert that fires on every navigation is\n   * noise. Either way a `role` you pass wins.\n   *\n   * `strip` (0.10.0): a band across the top of a page or a panel — edge to edge, no\n   * radius, only a bottom border, content centred on one line, and usually an\n   * {@link action}. kastlan's billing trial-banner and past-due-banner and its tours\n   * tour-banner each built this by hand in amber or red Tailwind classes, with a\n   * separate dark: spelling apiece. Role-less like the box: it is page furniture.\n   */\n  variant?: \"box\" | \"inline\" | \"strip\";\n  /** See {@link AlertSize}. Default `md`. */\n  size?: AlertSize;\n  /**\n   * `inline` only (0.11.0): lay the message out as a BLOCK — a full-width `flex` row,\n   * the glyph on the text's FIRST line when it wraps — instead of the `inline-flex`,\n   * centred line it is by default. keksdose writes `className=\"flex\"` on nearly every\n   * inline banner it has (accounts-page:564, holdings-panel:631, import-map-step:66/314,\n   * guest-key-control:84) to get a line of its own under a total or a field, and a\n   * two-line hint there then centres its glyph between the lines.\n   *\n   * An option rather than the new default, because the inline-flex is load-bearing for\n   * the callers the variant was made for: lenkbank's corner-motion toolbar\n   * (corner-motion.tsx:178) sets it as a `shrink-0` item beside the controls, kastlan's\n   * import page and keksdose's rules page place it in a run of content — a block would\n   * take the whole row in the second kind, and top-align the first against a taller\n   * control. Ignored by `box` and `strip`, which are blocks already.\n   */\n  block?: boolean;\n  /**\n   * `false` opts an inline banner out of its live region (no `role=\"alert\"` /\n   * `role=\"status\"`), for a message that is static page content rather than the answer\n   * to something the user just did: keksdose's CAMT review step (camt-review-step:214)\n   * renders \"unresolved rows block the import\" as part of the step, and as\n   * `role=\"alert\"` a screen reader interrupted with it on every mount. A `role` you pass\n   * still wins. Default `true`; the box and the strip are role-less either way.\n   */\n  live?: boolean;\n  /**\n   * An opaque, raised surface (a shadow, and no translucency in dark mode) for a\n   * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`\n   * only; an inline message has no surface to raise.\n   */\n  elevated?: boolean;\n  /**\n   * A trailing control — the \"Update payment method\" button on kastlan's trial and\n   * past-due strips, the \"Exit\" on its tour strip. Sits at the end of the row,\n   * vertically centred, and never shrinks. On a whole-row banner (`href`/`onClick`)\n   * it is rendered BESIDE the row's own link or button, as the × is, because\n   * interactive content may not nest.\n   */\n  action?: ReactNode;\n  /** Replaces the tone's glyph — a `<Spinner label={null} />` for \"Solving…\", say.\n   *  `null` draws none. Always decorative; the text carries the message. */\n  icon?: ReactNode;\n  /** Renders an × at the end that calls this. The banner does not hide itself — the\n   *  caller removes it (and remembers that it did), as with every other kit control\n   *  whose state is app state. */\n  onDismiss?: () => void;\n  /** Accessible name of the ×. Default: `common.dismiss` from the\n   *  {@link UiKitProvider}, else \"Dismiss\". */\n  dismissLabel?: string;\n  /**\n   * 0.48: on a phone (below the kit's text-size-aware `md`) hold the message to ONE line,\n   * with a \"More\" / \"Less\" toggle after it (`aria-expanded`, `aria-controls` the message;\n   * `common.showMore` / `common.showLess`). From `md` up nothing changes. The toggle only\n   * shows while the line actually cuts the message off.\n   *\n   * keksdose dev#611 (UX-1.2): its beta notice took three to four lines (~100px) above\n   * every phone screen, and the app built the clamp and the button around the banner's\n   * children by hand. Ignored on a whole-row banner (`href` / `onClick`): a toggle cannot\n   * sit inside the row's own link or button.\n   *\n   * 0.51 (kastlan K1): on a `strip` the clamped message claims 7rem instead of 12rem below\n   * `md`, so the {@link action} stays on its line rather than taking one of its own.\n   *\n   * For a one-line MESSAGE (a sentence or two). Not for a body with a list or a control in\n   * it: the clamp cuts the box to its first line, so a Disclosure's or a link's trigger\n   * past it is clipped out of sight and still takes the keyboard's focus, and \"More\" gives\n   * back the whole body at once. Shorten such a banner instead — one sentence, its action,\n   * and the rest behind a Disclosure of its own (keksdose's agree-again notice, 0.51).\n   */\n  clampMobile?: boolean;\n  /**\n   * Where a box's {@link action} goes on a phone (below `sm`). 0.48.\n   *\n   * `own-line` (default): a line of its own under the message, lined up with it\n   * (kastlan 53 — a long message beside a long button squeezed into a column).\n   *\n   * `flow`: on the message's line while the message (with its glyph) keeps 10rem, else at the END of the\n   * next line — for a short message and a short action, which a line of their own each\n   * would stack for nothing. keksdose dev #623: the budget card's \"5 underfunded\n   * categories\" + \"Assign\" built this with descendant overrides on the kit's classes.\n   * The basis is in rem, so it grows with the text size: at Large the action drops a\n   * line sooner, by itself. The × stays at the top end either way; `clampMobile` works\n   * alongside. From `sm` up nothing changes. Ignored by `strip` (which flows like this\n   * already) and `inline`.\n   */\n  actionPlacement?: \"own-line\" | \"flow\";\n  children: ReactNode;\n  /**\n   * The banner's frame — where the rest of the props go (0.34, API-2, refactor audit\n   * 2026-10). Which element that is depends on the mode: the `<div>`; with `href` or\n   * `onClick` the `<a>` or `<button>` that IS the row; with an × or an `action` beside\n   * that row, the `<div>` holding the two. Hence `HTMLElement`.\n   */\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * The whole-row modes. keksdose's budget-summary card is a banner you tap to open\n * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a\n * banner with a link inside it was a small target inside a big one that looked like\n * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one\n * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.\n *\n * With `onDismiss` as well, the × cannot go inside the button (interactive content\n * may not nest), so the frame becomes a wrapper holding two siblings: the row's\n * button, stretched over the whole frame, and the × on top of it. It still looks and\n * clicks like one banner with an × in its corner, and the two are separate tab stops.\n */\nexport type AlertBannerProps = AlertBannerBaseProps &\n  (\n    | {\n        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */\n        href?: string;\n        onClick?: never;\n      }\n    | {\n        href?: never;\n        /** Makes the whole banner one button. Mutually exclusive with `href`. The\n         *  event's element is the `<button>`, not a `<div>`. */\n        onClick?: (event: MouseEvent<HTMLElement>) => void;\n      }\n  );\n\n/** Warning/danger/info callout box with the shared frame and an icon — or, with\n *  `variant=\"inline\"`, the same message as a frameless line of toned text. */\nexport function AlertBanner({\n  tone = \"danger\",\n  variant = \"box\",\n  size = \"md\",\n  block = false,\n  live = true,\n  elevated = false,\n  action,\n  icon,\n  onDismiss,\n  dismissLabel,\n  clampMobile = false,\n  actionPlacement = \"own-line\",\n  href,\n  onClick,\n  className,\n  children,\n  role,\n  ref,\n  ...rest\n}: AlertBannerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });\n  const inline = variant === \"inline\";\n  const strip = variant === \"strip\";\n  const sm = size === \"sm\";\n  const interactive = href !== undefined || onClick !== undefined;\n  // A block-laid inline banner behaves like a box for layout: a row that may wrap.\n  const inlineRow = inline && !block;\n  const resolvedRole = role ?? (inline && live ? (tone === \"danger\" ? \"alert\" : \"status\") : undefined);\n\n  // `clampMobile`: the message's one-line clamp below `md`, and whether that line holds\n  // it all (then there is nothing to show \"More\" of). Measured while collapsed — the\n  // clamp is what makes `scrollHeight` exceed the box — and again whenever its box\n  // changes size, which a rotation or crossing `md` does. With no layout (a test, the\n  // server) the box is 0 tall, which reads as \"may not fit\": the toggle stays.\n  const clamp = clampMobile && !interactive;\n  const bodyId = useId();\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const [expanded, setExpanded] = useState(false);\n  const [fits, setFits] = useState(false);\n  useLayoutEffect(() => {\n    const el = bodyRef.current;\n    if (!clamp || expanded || !el) return;\n    const check = () => setFits(el.clientHeight > 0 && el.scrollHeight <= el.clientHeight + 1);\n    check();\n    const ro = typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(check);\n    ro?.observe(el);\n    return () => ro?.disconnect();\n  }, [clamp, expanded, children]);\n\n  const Glyph = TONE_GLYPH[tone];\n  // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.\n  const nudge = inlineRow || strip ? undefined : sm ? \"mt-px\" : \"mt-0.5\";\n  const glyph =\n    icon === null ? null : icon !== undefined ? (\n      <span\n        aria-hidden\n        className={cn(\"flex shrink-0\", sm ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\", nudge, TONE_ICON[tone])}\n      >\n        {icon}\n      </span>\n    ) : (\n      <Glyph aria-hidden className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0\", nudge, TONE_ICON[tone])} />\n    );\n\n  // The row layout, shared by every shape below. A strip centres, and WRAPS: on a\n  // phone a long message plus an action would otherwise squeeze the text into a narrow\n  // column, so the action drops under it instead. A box may wrap its text, so it\n  // top-aligns and nudges the glyph onto the first line.\n  // A BOX with an action wraps too, below sm only (kastlan 53): the verify-email box\n  // squeezed \"Please confirm your email address…\" into a ~100px column beside a\n  // \"Resend verification email\" button. There the action takes a line of its own under\n  // the message, and the × stays at the top end; from sm up the box is one row as before.\n  const boxAction = !inline && !strip && action !== undefined && action !== null;\n  // `flow` (0.48): glyph + message and the action in a row of their own that wraps\n  // below sm; the × stays outside it, at the top end.\n  const flow = boxAction && actionPlacement === \"flow\";\n  const boxWraps = boxAction && !flow;\n  const flowRow = cn(\"flex min-w-0 flex-1 items-center max-sm:flex-wrap\", sm ? \"gap-1.5\" : \"gap-2\");\n  // The 10rem the message keeps beside the action before the action wraps.\n  const flowBasis = flow ? \"max-sm:basis-40\" : undefined;\n  const row = cn(\n    inlineRow\n      ? \"inline-flex items-center\"\n      : strip\n        ? \"flex flex-wrap items-center gap-y-1\"\n        : cn(\"flex items-start\", boxWraps && \"max-sm:flex-wrap max-sm:gap-y-2\"),\n    sm ? \"gap-1.5 text-xs\" : inline ? \"gap-1.5 text-sm\" : \"gap-2 text-sm\",\n  );\n  // The strip's message claims 12rem before anything shrinks. `flex-1` is a 0 basis,\n  // which never makes a wrapping row wrap — the action and the × squeezed the message\n  // into a three-word column on a phone instead. With a real basis the action drops to\n  // a second line once message + action no longer fit, and the message keeps the width.\n  const grow = strip ? \"flex-[1_1_12rem]\" : \"flex-1\";\n  // …except a CLAMPED strip on a phone (0.51, kastlan K1 / prod #22, KX-5). There the\n  // message is one line whatever its width (the rest is behind \"More\"), so the 12rem only\n  // pushed the action under it: \"Erneut senden\" took a line of its own on a 390px phone,\n  // and kastlan's banner stood 71px where one line is 43. The clamp needs its \"More\" and\n  // the first words beside it, so below `md` the basis is 7rem (~4rem of text). Measured\n  // in Chromium at 390 × 844, kastlan's `mx-4` strip (326px inside): one line, 43px, in\n  // all seven catalogues, with Roboto and with the wider DejaVu Sans; French, the longest\n  // \"Send again\", keeps 8px. At 360px French (and Spanish in DejaVu) still drop a line.\n  // A rem basis like the 12rem, so at Large the action drops a line sooner, by itself.\n  // From `md` up the clamp is off and the 12rem holds; without `clampMobile` nothing moves.\n  const clampBasis = strip && clamp ? \"max-md:basis-28\" : undefined;\n  // Inside a whole-row banner's button or link, which then carries `grow` itself.\n  const nested = interactive && (onDismiss !== undefined || (action !== undefined && action !== null));\n  const frame = inline\n    ? \"\"\n    : cn(\n        strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),\n        elevated && cn(ELEVATED, TONE_ELEVATED[tone]),\n      );\n  const focusRing = cn(FOCUS_RING, \"focus-visible:ring-offset-1 focus-visible:ring-offset-surface\");\n\n  // The message's box: a `<div>` (0.51), so a banner may hold block content — keksdose's\n  // agree-again notice has a list and a Disclosure in it, which inside the `<span>` this was\n  // were block elements in phrasing content. A `<span>` still in a whole-row banner, whose\n  // `<a>` / `<button>` takes phrasing content only.\n  const Body = interactive ? \"span\" : \"div\";\n  const contentBody = clamp ? (\n    // Below `md` a row: the message, clamped, then the toggle on its baseline. From\n    // `md` up a plain box with the message in it, as without the prop. (Never a whole-row\n    // banner, so always a `<div>`.)\n    <div\n      className={cn(\n        !inlineRow && grow,\n        clampBasis,\n        \"min-w-0 text-start max-md:flex max-md:items-baseline max-md:gap-2\",\n      )}\n    >\n      {/* The clamp is deliberate: the rest is one tap away behind More, so the size sweep's\n          truncation gate (scripts/screenshot-sizes.mjs) leaves it alone. */}\n      <div\n        id={bodyId}\n        ref={bodyRef}\n        data-truncate-ok=\"\"\n        className={cn(\"max-md:min-w-0\", !expanded && \"max-md:line-clamp-1\")}\n      >\n        {children}\n      </div>\n      {(expanded || !fits) && (\n        <button\n          type=\"button\"\n          aria-expanded={expanded}\n          aria-controls={bodyId}\n          onClick={() => setExpanded((v) => !v)}\n          className={cn(\n            \"relative z-10 shrink-0 rounded-sm font-medium underline underline-offset-2 md:hidden\",\n            focusRing,\n          )}\n        >\n          {expanded ? common.showLess : common.showMore}\n        </button>\n      )}\n    </div>\n  ) : (\n    <Body className={cn(!inlineRow && (nested ? \"flex-1\" : grow), \"min-w-0 text-start\")}>\n      {children}\n    </Body>\n  );\n  const content = (\n    <>\n      {glyph}\n      {contentBody}\n      {interactive && (\n        <ChevronRight\n          aria-hidden\n          className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0 opacity-70 rtl:-scale-x-100\", nudge)}\n        />\n      )}\n    </>\n  );\n\n  const dismiss = onDismiss ? (\n    <button\n      type=\"button\"\n      aria-label={common.dismiss}\n      onClick={(e) => {\n        // A dismiss inside a whole-row banner must not also follow the row.\n        e.preventDefault();\n        e.stopPropagation();\n        onDismiss();\n      }}\n      className={cn(\n        // Negative margins so the × does not make the box taller than its text; the\n        // hover wash takes the tone's own hue, so it works on every tone.\n        \"relative z-10 -my-0.5 -me-0.5 flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-current/10\",\n        focusRing,\n      )}\n    >\n      <X aria-hidden className=\"size-4\" />\n    </button>\n  ) : null;\n\n  // `relative z-10` so it stays clickable over a whole-row banner's stretched target.\n  // `max-w-full flex-wrap`: on a line of its own, two actions side by side ran 57 px\n  // past a 360 px phone at Extra large (the demo strip's \"Request access\" and \"Sign in\",\n  // 0.32.1); held to the line, they wrap there instead. Where they fit in one row,\n  // nothing changes.\n  const trailing =\n    action !== undefined && action !== null ? (\n      <div\n        className={cn(\n          \"relative z-10 flex max-w-full shrink-0 flex-wrap items-center gap-2\",\n          !strip && !inlineRow && \"self-center\",\n          (strip || flow) && \"ms-auto\",\n          // Last, on a line of its own, lined up with the message (past the glyph).\n          boxWraps && cn(\"max-sm:order-last max-sm:basis-full\", glyph && (sm ? \"max-sm:ps-5\" : \"max-sm:ps-6\")),\n        )}\n      >\n        {action}\n      </div>\n    ) : null;\n\n  if (!interactive) {\n    return (\n      <div\n        // The tone as data (0.34, refactor audit 2026-10, TST-9): a stable hook for a\n        // test or a caller's selector, where the frame classes are the kit's to change.\n        data-tone={tone}\n        // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n        // `aria-describedby` — then the layout and tone classes, which are merged\n        // through `cn` rather than spread so a caller's `className` refines the box\n        // instead of replacing it.\n        {...rest}\n        ref={ref as Ref<HTMLDivElement>}\n        role={resolvedRole}\n        className={cn(row, frame, TONE_TEXT[tone], className)}\n      >\n        {flow ? (\n          <>\n            <div className={flowRow} data-action-flow=\"\">\n              {/* The glyph rides with the message, on its first line; the two are\n                  centred against the action as one, as the whole-row button is. */}\n              <div className={cn(\"flex min-w-0 flex-1 items-start\", flowBasis, sm ? \"gap-1.5\" : \"gap-2\")}>\n                {glyph}\n                {contentBody}\n              </div>\n              {trailing}\n            </div>\n          </>\n        ) : (\n          <>\n            {content}\n            {trailing}\n          </>\n        )}\n        {dismiss}\n      </div>\n    );\n  }\n\n  const hover = \"cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110\";\n  // With a dismiss the frame is a wrapper and the row element is stretched over it;\n  // without one the row element IS the frame.\n  const split = dismiss !== null || trailing !== null;\n  const actionClass = split\n    ? cn(\n        \"flex min-w-0 text-start\",\n        grow,\n        flowBasis,\n        sm ? \"gap-1.5\" : \"gap-2\",\n        inlineRow || strip ? \"items-center\" : \"items-start\",\n        \"outline-none after:absolute after:inset-0 after:content-['']\",\n        strip ? \"after:rounded-none\" : \"after:rounded-md\",\n        \"focus-visible:after:ring-focus focus-visible:after:ring-brand\",\n      )\n    : cn(row, !inlineRow && \"w-full\", frame, TONE_TEXT[tone], hover, focusRing, className);\n  // The div's attributes are the row element's: an `id`, a test id or an\n  // `aria-describedby` belongs on the thing that takes focus. The live-region role is\n  // NOT carried over — a button or a link that is also a `status` is neither.\n  const actionRest = split ? {} : rest;\n  // The `ref` goes with the rest: to the row element when it is the frame.\n  const rowRef = split ? undefined : ref;\n\n  const rowAction =\n    href !== undefined ? (\n      <a\n        data-tone={split ? undefined : tone}\n        {...(actionRest as ComponentPropsWithoutRef<\"a\">)}\n        ref={rowRef as Ref<HTMLAnchorElement> | undefined}\n        href={href}\n        className={actionClass}\n      >\n        {content}\n      </a>\n    ) : (\n      <button\n        data-tone={split ? undefined : tone}\n        {...(actionRest as ComponentPropsWithoutRef<\"button\">)}\n        ref={rowRef as Ref<HTMLButtonElement> | undefined}\n        type=\"button\"\n        onClick={onClick}\n        className={actionClass}\n      >\n        {content}\n      </button>\n    );\n\n  if (!split) return rowAction;\n  return (\n    <div\n      data-tone={tone}\n      {...rest}\n      ref={ref as Ref<HTMLDivElement>}\n      role={resolvedRole}\n      className={cn(\"relative\", row, frame, TONE_TEXT[tone], hover, className)}\n    >\n      {flow ? (\n        // Not positioned: the row's stretched `after:` target must still cover the frame.\n        <div className={flowRow} data-action-flow=\"\">\n          {rowAction}\n          {trailing}\n        </div>\n      ) : (\n        <>\n          {rowAction}\n          {trailing}\n        </>\n      )}\n      {dismiss}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/autocomplete.js

@@ -8,6 +8,7 @@ import { Spinner } from "./spinner.js";
 import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
 import { takeEscape, useDismissLayer } from "../hooks/use-dismiss.js";
 import { isImeEnter } from "../lib/ime.js";
+import { isQuietFocus } from "../lib/quiet-focus.js";
 import { useAnchorDir } from "./use-anchor-dir.js";
 import {
   ComboboxFieldLabel,
@@ -87,6 +88,7 @@ function Autocomplete(props) {
   const field = useFieldError(error, invalid, hintParts.describedBy, rest["aria-invalid"]);
   const [ownOpen, setOwnOpen] = useState(false);
   const open = openProp ?? ownOpen;
+  const quietRef = useRef(false);
   const setOpen = (next) => {
     setOwnOpen(next);
     if (next !== open) onOpenChange?.(next);
@@ -180,9 +182,20 @@ function Autocomplete(props) {
               onFocus: (e) => {
                 onFocus?.(e);
                 if (locked) return;
+                if (isQuietFocus(e.currentTarget)) {
+                  quietRef.current = true;
+                  return;
+                }
+                setOpen(true);
+              },
+              onClick: (e) => {
+                rest.onClick?.(e);
+                if (!quietRef.current || locked) return;
+                quietRef.current = false;
                 setOpen(true);
               },
               onBlur: (e) => {
+                quietRef.current = false;
                 onBlur?.(e);
                 close();
               },

package/dist/components/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["import { Fragment, useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./field-base\";\nimport { Spinner } from \"./spinner\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\nimport { isImeEnter } from \"../lib/ime\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport {\n  ComboboxFieldLabel,\n  DISABLED_ROW_CLASS,\n  endHintRowProps,\n  GROUP_HEADING_STICKY,\n  isOptionEnabled,\n  stepEnabled,\n  SUGGESTION_LIST_CLASS,\n  suggestionRowClass,\n  useActiveOptionScroll,\n  useOptionSource,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  EndHintRow,\n  FieldCaption,\n  LABEL_IN_ROW,\n  LockedReason,\n  mergeDescribedBy,\n  StaticLabelRow,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n} from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\n\n/**\n * `value`/`onChange` are the TEXT's, and `onSelect` is \"a suggestion was taken\" —\n * not the DOM's text-selection event — so the input's own spellings of those three\n * are omitted. Everything else reaches the `<input>`, the way it does on {@link Input}.\n */\nexport interface AutocompleteProps<V extends string | number = string>\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"onSelect\" | \"children\" | \"type\" | \"size\"\n  >,\n    FieldHelpProps {\n  /** What is in the field. Controlled, and never reset by the component: opening,\n   *  closing and a failed lookup all leave it exactly as typed. */\n  value: string;\n  /** Every keystroke — and, with `fillOnSelect`, the label of a taken suggestion. */\n  onChange: (text: string) => void;\n  /** Suggestions the caller already has (e.g. from its own query hook). Narrowed by\n   *  the text unless `filter={false}`. An option with `disabled: true` is listed but\n   *  cannot be taken — see {@link ComboOption.disabled}. */\n  options?: ComboOption<V>[];\n  /** Or: fetch them. Debounced (`debounceMs`), race-safe, only at `minChars` and up,\n   *  never while the field is idle; a rejection shows `loadErrorLabel` and empties\n   *  the list rather than leaving the previous text's rows under it. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** Narrow `options` by label/sublabel substring. Default `true`. Pass `false` for\n   *  a list a server has already searched and ranked — it is shown as given. */\n  filter?: boolean;\n  /** External loading flag (a caller-side fetch), OR-ed with `loadOptions`'. */\n  loading?: boolean;\n  /** Below this many characters nothing is offered or fetched. Default 1: an empty\n   *  field asks nothing — focusing it is not a search. */\n  minChars?: number;\n  /** Quiet time before `loadOptions` runs. Default 300 ms — an ordinary typist's\n   *  inter-key interval is 150–250 ms, so the pickers' 150 fires on nearly every\n   *  letter, which a rate-limited geocoder cannot afford. */\n  debounceMs?: number;\n  /**\n   * Whether the list MAY show — controlled. Omit (or pass `undefined`) and the field\n   * decides: open while focused, until Escape, Tab or a taken row. `false` keeps it\n   * shut whatever the user does, and stops `loadOptions` asking — keksdose's address\n   * search, with its confirm map up, where it used to pass `minChars={Infinity}`.\n   * `true` shows it even unfocused.\n   *\n   * Even open, the list only APPEARS when it has something to show (rows, or a\n   * status line); `aria-expanded` follows what appears, not this flag.\n   */\n  open?: boolean;\n  /** The field wants the list open or shut — focus, typing, ↓/↑ open it; blur,\n   *  Escape, Tab and taking a row shut it. Called on every change, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `\"sm\"`: the 28px, 12px-type field of {@link Select}'s `size=\"sm\"`, with the icon,\n   * spinner and list rows scaled to match — for a card or toolbar whose buttons are\n   * small. `\"md\"` (default) is the form field. Unlabelled only, as on `Select`: a\n   * floating label needs the tall box, so a labelled field ignores `\"sm\"`.\n   *\n   * A NUMBER is still the native `size` attribute (the width in characters), passed\n   * straight through.\n   */\n  size?: \"sm\" | \"md\" | number;\n  /** A suggestion was taken (click, or Enter on the highlighted row). */\n  onSelect?: (option: ComboOption<V>) => void;\n  /**\n   * Put the taken suggestion's label into the field (`onChange(label)`). Default\n   * `true` — the free-text case, where the text IS the value and a suggestion only\n   * completes it (an address field). Pass `false` where taking a row is an ACTION\n   * and the field is only the search that found it; the text then stays as typed.\n   */\n  fillOnSelect?: boolean;\n  /** A floating label, as on {@link Combobox} — a real `<label for>` on the input.\n   *  Names the field (`aria-labelledby`) unless an `aria-label` is given. */\n  label?: ReactNode;\n  /** Leading decoration inside the field (a pin, a magnifier). Decorative: the\n   *  label names the field. An `<svg>` child is sized by the field — 16px, or 14px\n   *  at `size=\"sm\"` — so a lucide icon needs no class of its own. */\n  icon?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. */\n  invalid?: boolean;\n  /** What is wrong with the VALUE, as {@link Input}'s `error`: under the field, on\n   *  its `aria-describedby`, implies `invalid`. Not a failed lookup — that is\n   *  `loadErrorLabel`, shown in the list. */\n  error?: ReactNode;\n  /**\n   * Standing advice — {@link Combobox}'s `hint`, so this field reads like every other\n   * (keksdose K4): plain TEXT is a caption under the field on the input's\n   * `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the label line,\n   * or with no label sits at the field's end edge, outside the box. Not the list's\n   * `status` line, which talks about the lookup, not the field.\n   *\n   * Pass it — even as `undefined` — on a field whose hint comes and goes (0.24): the\n   * unlabelled field then keeps its end-hint row whether or not a \"?\" is in it, so the\n   * `<input>` is never re-parented, and focus and caret survive the toggle. The rule\n   * the rest of the family has had since 0.23 (and the fields since 0.22).\n   */\n  hint?: ReactNode;\n  /**\n   * The caller's own line in the list, replacing the automatic one (loading / failed\n   * / no results). For what only the caller knows: \"offline\", \"the address service\n   * is switched off\", a privacy note, the hint a caller-fetched list needs below its\n   * own minimum. While set, the list opens even with no rows. Announced politely.\n   */\n  status?: ReactNode;\n  /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */\n  emptyLabel?: string;\n  /** Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n  /** Classes for the `<input>` itself; `className` styles the wrapper. */\n  inputClassName?: string;\n  /**\n   * Why the field cannot be changed — {@link Button}'s `disabledReason`, the Combobox\n   * family's write lock (keksdose G2, 0.23), for a field whose pick SAVES: an address\n   * search whose taken row writes the address, a lookup that links a record.\n   *\n   * With a reason the input stays focusable and `aria-disabled`, is `readOnly` (the\n   * settled grey FIELD_BASE gives a `[readonly]` field), opens no list and asks no\n   * `loadOptions` — whatever `open` says — and nothing reaches `onChange`, `onSelect` or\n   * `onOpenChange(true)`. Enter is swallowed, so a locked field does not submit the form\n   * around it, and a caller's `onKeyDown` does not hear it; every other key still\n   * reaches the caller (an Escape that closes its panel) and the caret. The reason is in\n   * the kit {@link Tooltip} and on the input's `aria-describedby`. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This field COMMITS. Under a locked {@link WriteLockProvider} it is locked the\n   * `disabledReason` way with the lock's reason (which wins over its own). A search\n   * whose result is only draft state — the form's Save writes it — leaves this off and\n   * stays live under the lock. No provider, or an unlocked one: no effect.\n   */\n  commit?: CommitScope;\n  /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the\n   *  field at Large and on a touch screen by default, the tooltip otherwise (DUP-3). */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10): it was\n   *  `forwardRef`, cast back to a generic function, with a `displayName` line beside it. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * An inline, async-capable text field with a suggestion list under it — the\n * WAI-ARIA APG \"editable combobox with list autocomplete\".\n *\n * Two jobs, one control:\n *  - **free text** (kastlan's address field): the text is the value, the list only\n *    offers completions, and taking one fills the field (`fillOnSelect`, default);\n *  - **search-then-act** (keksdose's address search): the text is a query, taking a\n *    row calls `onSelect` and nothing is held (`fillOnSelect={false}`).\n *\n * How it differs from its siblings: {@link Combobox} is free text over a STATIC\n * string pool and opens on focus; {@link EntityCombobox} is a trigger holding an id.\n * This one keeps no value of its own, never resets the text, asks nothing below\n * `minChars`, and reports a failed lookup instead of showing stale rows.\n *\n * Focus never leaves the `<input>`: `aria-activedescendant` names the highlighted\n * row, `aria-controls` the list, and a polite live region says what the list now\n * holds. Keyboard: ↓/↑ move (↓ opens) over every row but a `disabled` one, Enter\n * takes the highlighted row (with none,\n * Enter is left to the form), Escape closes, Tab closes and moves on; Home/End stay\n * with the caret. An Escape that closes an open list is consumed and never reaches the\n * caller; with the list closed it does. For every other key a caller's `onKeyDown`\n * runs first and may `preventDefault()` to\n * keep a key for itself.\n *\n * The list is portalled and anchored under the field on every screen size: the\n * field already carries the keyboard, and `useAnchoredPanel` keeps the list clear\n * of it on a phone. There is no full-screen sheet as {@link Combobox} has.\n *\n * Generic over the option value (`ComboOption<V>`); the ref is the `<input>`'s.\n */\nexport function Autocomplete<V extends string | number = string>(props: AutocompleteProps<V>) {\n  const {\n    ref,\n    value,\n    onChange,\n    options,\n    loadOptions,\n    filter,\n    loading,\n    minChars = 1,\n    debounceMs = 300,\n    onSelect,\n    fillOnSelect = true,\n    label,\n    icon,\n    invalid,\n    error,\n    hint,\n    help,\n    status,\n    emptyLabel,\n    loadErrorLabel,\n    open: openProp,\n    onOpenChange,\n    size,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...rest\n  } = props;\n  const generated = useId();\n  const fieldId = id ?? generated;\n  // Off the GENERATED id: a caller's `id` is theirs to collide with.\n  const listboxId = `${generated}-listbox`;\n  const labelId = `${generated}-label`;\n  const optionId = (index: number) => `${generated}-option-${index}`;\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    noResults: emptyLabel,\n    loadError: loadErrorLabel,\n  });\n  const hintParts = useFieldHint(hint, ariaDescribedBy, { help, name: label ?? ariaLabel });\n  // A form library's `aria-invalid` paints as well as announces (DUP-8: it only\n  // announced, through the spread below).\n  const field = useFieldError(error, invalid, hintParts.describedBy, rest[\"aria-invalid\"]);\n\n  /** The user's intent: the field is focused and the list has not been dismissed.\n   *  Whether anything SHOWS is decided below, from what there is to show. */\n  const [ownOpen, setOwnOpen] = useState(false);\n  // Controlled when the caller passes a boolean. The own state is kept up to date\n  // either way, so a caller that controls only SOMETIMES (`open={confirming ? false :\n  // undefined}`) hands back a field that is exactly as open as focus says it is.\n  const open = openProp ?? ownOpen;\n  const setOpen = (next: boolean) => {\n    setOwnOpen(next);\n    if (next !== open) onOpenChange?.(next);\n  };\n  const [active, setActive] = useState(-1);\n  // The lock: focusable, `readOnly`, no list — see `disabledReason`. Folded into `live`,\n  // so a locked field asks nothing and shows nothing even with `open` held true.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const live = open && !disabled && !locked;\n  const { results, busy, failed, tooShort } = useOptionSource<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n    query: value,\n    active: live,\n  });\n\n  const hasStatus = status !== undefined && status !== null && status !== false && status !== \"\";\n  // The visible line under the rows. Nothing below `minChars` unless the caller has\n  // something to say — an empty field opening a box that says \"type more\" is noise.\n  const statusLine: ReactNode = hasStatus\n    ? status\n    : tooShort\n      ? null\n      : busy && results.length === 0\n        ? labels.loading\n        : failed\n          ? labels.loadError\n          : !busy && results.length === 0\n            ? labels.noResults\n            : null;\n  const expanded = live && (results.length > 0 || statusLine !== null);\n  // A disabled row is never the keyboard's — not even when a list that changed under\n  // the highlight put one there.\n  const activeId = expanded && isOptionEnabled(results[active]) ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n  const { rect, top, bottom, maxHeight, above } = useAnchoredPanel(fieldRef, expanded, { preferredHeight: 256 });\n  const dir = useAnchorDir(fieldRef, expanded);\n\n  const close = () => {\n    setOpen(false);\n    setActive(-1);\n  };\n  // The list is a layer on the kit's Escape stack while it shows (Wave 2, DUP-1).\n  useDismissLayer(expanded, close);\n  const take = (o: ComboOption<V>) => {\n    if (o.disabled || locked) return;\n    if (fillOnSelect) onChange(o.label);\n    onSelect?.(o);\n    close();\n  };\n\n  const hasLabel = label !== undefined;\n  // `size=\"sm\"` is for an UNLABELLED field, as on Select: the floating label needs the\n  // tall box. A number is the native attribute.\n  const small = size === \"sm\" && !hasLabel;\n  const nativeSize = typeof size === \"number\" ? size : undefined;\n  // The caller's name wins; else the floating label, by reference so a non-string\n  // label still names the field.\n  const labelledBy =\n    ariaLabel === undefined ? (ariaLabelledBy ?? (hasLabel ? labelId : undefined)) : undefined;\n  // While locked the field sits in the reason's Tooltip — in a fragment with a hidden\n  // copy of the reason, Button's anatomy; `block` so a full-width field stays full width.\n  const withLock = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className=\"block\">\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n\n  return (\n    // `relative`: the floating label and the live region's `sr-only` both need a\n    // local containing block.\n    <div className={cn(\"relative\", className)}>\n      {/* A real <label for> (lenkbank), and still `aria-labelledby`'s target, so the\n          name — and the listbox's, which borrows it — is exactly what it was. */}\n      {hasLabel && hintParts.labelHint === undefined && (\n        <ComboboxFieldLabel id={labelId} htmlFor={fieldId}>\n          {label}\n        </ComboboxFieldLabel>\n      )}\n      {/* `\"hint\" in props`: the family's 0.22 rule (see `endHintRowProps`) — passed at\n          all, even as `undefined`, a hint keeps the unlabelled field's end-hint row, so\n          a \"?\" coming and going never re-parents the <input> under the caret (0.24, the\n          last of the family to get it; the siblings had it in 0.23). */}\n      <EndHintRow {...endHintRowProps(\"hint\" in props, hasLabel, hintParts.labelHint)}>\n        {withLock(\n          <div ref={fieldRef} className={cn(\"relative\", locked && \"cursor-not-allowed\")}>\n            {icon && (\n              <span\n                aria-hidden\n                className={cn(\n                  \"pointer-events-none absolute flex text-muted\",\n                  small ? \"start-2 [&>svg]:size-3.5\" : \"start-2.5 [&>svg]:size-4\",\n                  // Labelled, the icon sits on the VALUE's line — the one line box below\n                  // FIELD_FLOATING_PAD's `pt-4` and the 1px border — not on the middle of\n                  // the box. Centred on the box it rose into the top strip and sat on the\n                  // label's first letters, which float at the same start inset. On the\n                  // value line it is beside what it describes, and the label keeps the\n                  // start edge every other label in the form's column shares.\n                  // At Large the label stands above the field and the strip is gone\n                  // (0.33, §10.17): the value's line is under FIELD_BASE's `py-2`.\n                  hasLabel\n                    ? \"top-[calc(1rem+1px)] h-5 items-center large:top-[calc(0.5rem+1px)]\"\n                    : \"top-1/2 -translate-y-1/2\",\n                )}\n              >\n                {icon}\n              </span>\n            )}\n            <input\n              {...rest}\n              ref={ref}\n              id={fieldId}\n              size={nativeSize}\n              type=\"text\"\n              value={value}\n              // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.\n              disabled={locked ? undefined : disabled}\n              readOnly={locked || rest.readOnly}\n              aria-disabled={locked || rest[\"aria-disabled\"]}\n              role=\"combobox\"\n              aria-autocomplete=\"list\"\n              aria-expanded={expanded}\n              // Required by the role, and set while closed too, as on the siblings.\n              aria-controls={listboxId}\n              aria-activedescendant={activeId}\n              aria-label={ariaLabel}\n              aria-labelledby={labelledBy}\n              aria-invalid={field.isInvalid || rest[\"aria-invalid\"] || undefined}\n              aria-describedby={mergeDescribedBy(field.describedBy, locked && lock.reasonId)}\n              autoComplete=\"off\"\n              onFocus={(e) => {\n                onFocus?.(e);\n                // A locked field takes focus to say why, and opens nothing.\n                if (locked) return;\n                // A seeded field (keksdose's `initialQuery`) is looked up as it is\n                // focused; an empty one asks nothing, because of `minChars`.\n                setOpen(true);\n              }}\n              onBlur={(e) => {\n                onBlur?.(e);\n                close();\n              }}\n              onChange={(e) => {\n                if (locked) return;\n                onChange(e.target.value);\n                setOpen(true);\n                setActive(-1);\n              }}\n              onKeyDown={(e) => {\n                // Locked: Enter is swallowed (no form submit, no caller's \"search now\");\n                // every other key is the caller's and the caret's. No list to drive.\n                if (locked) {\n                  if (e.key === \"Enter\") e.preventDefault();\n                  else onKeyDown?.(e);\n                  return;\n                }\n                // An Escape that closes the OPEN list is the list's, and is consumed before\n                // the caller sees it. A caller whose Escape means \"close the panel\" (keksdose's\n                // address search) otherwise closed the whole panel when the user only meant\n                // to dismiss the suggestions — the opposite of what the docs promised.\n                if (e.key === \"Escape\" && expanded && takeEscape(e)) return;\n                onKeyDown?.(e);\n                if (e.defaultPrevented) return;\n                // Disabled rows are passed over; at either end the highlight stays put.\n                if (e.key === \"ArrowDown\") {\n                  e.preventDefault();\n                  if (!open) setOpen(true);\n                  else setActive((i) => stepEnabled(results, i, 1));\n                } else if (e.key === \"ArrowUp\") {\n                  e.preventDefault();\n                  if (!open) setOpen(true);\n                  // From \"nothing highlighted\", Up goes to the bottom, as the APG has it.\n                  else setActive((i) => stepEnabled(results, i < 0 ? results.length : i, -1));\n                } else if (e.key === \"Enter\") {\n                  // No row highlighted: the text is the answer, and a form's own submit\n                  // is left alone. Nor is a row taken by the Enter that confirms an IME\n                  // composition, which is the IME's (BUG-9).\n                  if (expanded && activeId && !isImeEnter(e)) {\n                    e.preventDefault();\n                    take(results[active]);\n                  }\n                } else if (e.key === \"Tab\") {\n                  close();\n                }\n              }}\n              className={cn(\n                FIELD_BASE,\n                hasLabel && FIELD_FLOATING_PAD,\n                // Select's `SELECT_SM` box: a fixed 28px, so the caller's line height\n                // cannot grow it.\n                small && \"h-7 py-0 pe-2 ps-2 text-xs\",\n                icon ? (small ? \"ps-7\" : \"ps-8\") : undefined,\n                busy && (small ? \"pe-7\" : \"pe-9\"),\n                field.isInvalid && FIELD_INVALID,\n                inputClassName,\n              )}\n            />\n            {busy && live && (\n              // Decorative: the live region below already says \"Loading…\".\n              <span\n                className={cn(\n                  \"pointer-events-none absolute top-1/2 flex -translate-y-1/2\",\n                  small ? \"end-2\" : \"end-2.5\",\n                )}\n              >\n                <Spinner label={null} className={small ? \"h-3.5 w-3.5\" : \"h-4 w-4\"} />\n              </span>\n            )}\n          </div>,\n        )}\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it, after the field so the \"?\"\n          follows the control in the tab order (as on Input and Select). */}\n      {hasLabel && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <ComboboxFieldLabel id={labelId} htmlFor={fieldId} className={LABEL_IN_ROW}>\n            {label}\n          </ComboboxFieldLabel>\n        </StaticLabelRow>\n      )}\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n      {/* The live region, kept mounted so a change IS an announcement: focus stays\n          in the field, and without it a reader typed into a geocoder and heard only\n          their own letters. The panel's visible line is aria-hidden in favour of\n          this, which also carries the row count the eye reads off the list. */}\n      <div role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {!live\n          ? null\n          : statusLine !== null\n            ? statusLine\n            : results.length > 0\n              ? labels.resultCount(results.length)\n              : null}\n      </div>\n      {expanded &&\n        rect &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            // Every press inside the list keeps focus in the field — rows, the status\n            // line, the scrollbar — or the input's blur would close the list first.\n            role=\"presentation\"\n            // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).\n            data-kit-layer=\"\"\n            // Portalled out of the form's `dir`; the field's is put back. The list is\n            // exactly the field's width, so `left` places it in either direction.\n            dir={dir}\n            onMouseDown={(e) => e.preventDefault()}\n            // The family's suggestion box (DUP-4), as a column: the list scrolls inside\n            // it and the status line stays under the rows.\n            className={cn(SUGGESTION_LIST_CLASS, \"fixed z-50 flex flex-col overflow-hidden py-0\")}\n            // Flipped above, the list hangs from its bottom edge: three rows under a\n            // 256 px cap, placed by `top`, floated ~176 px above the field (keksdose K1),\n            // and the rows come and go as the user types.\n            style={{ ...(above ? { bottom } : { top }), left: rect.left, width: rect.width, maxHeight }}\n          >\n            {results.length > 0 && (\n              <ul\n                id={listboxId}\n                role=\"listbox\"\n                aria-label={ariaLabel}\n                aria-labelledby={labelledBy}\n                className=\"min-h-0 flex-1 overflow-y-auto py-1\"\n              >\n                {results.map((o, i) => {\n                  const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n                  return (\n                    // Keyed by group AND value, as in the core panel: an option may\n                    // appear once per group.\n                    <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n                      {startsGroup && (\n                        <li\n                          role=\"presentation\"\n                          className={cn(\n                            GROUP_HEADING_STICKY,\n                            \"px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-muted first:pt-1\",\n                          )}\n                        >\n                          {o.group}\n                        </li>\n                      )}\n                      <li role=\"presentation\">\n                        <button\n                          type=\"button\"\n                          id={optionId(i)}\n                          role=\"option\"\n                          // CHOSEN, never \"highlighted\" — the family's rule. This\n                          // field holds no value, so the only row that can be chosen\n                          // is the one whose label the text already is.\n                          aria-selected={fillOnSelect && o.label === value}\n                          // Listed, announced as unavailable, never taken: `take`\n                          // refuses it and the arrows pass it over.\n                          aria-disabled={o.disabled || undefined}\n                          tabIndex={-1}\n                          onClick={() => take(o)}\n                          onMouseEnter={() => {\n                            if (!o.disabled) setActive(i);\n                          }}\n                          className={cn(\n                            // The family's suggestion row (DUP-4): it hand-rolled its\n                            // own with a plain `truncate`, so a long address was cut at\n                            // Large, where Combobox's rows wrap (text size §10.17, T1).\n                            // A flex row here, for the icon and the two lines.\n                            suggestionRowClass(i === active && !o.disabled),\n                            \"flex items-center gap-2\",\n                            small && \"py-1 text-xs\",\n                            o.disabled && DISABLED_ROW_CLASS,\n                            o.group != null && \"ps-6\",\n                          )}\n                        >\n                          {o.icon && (\n                            <span aria-hidden className=\"shrink-0 text-muted\">\n                              {o.icon}\n                            </span>\n                          )}\n                          <span className=\"min-w-0 flex-1\">\n                            <span className=\"block truncate-until-large text-primary\">\n                              {o.label}\n                            </span>\n                            {o.sublabel && (\n                              <span\n                                className={cn(\n                                  \"block truncate-until-large text-placeholder\",\n                                  small ? \"text-caption\" : \"text-xs\",\n                                )}\n                              >\n                                {o.sublabel}\n                              </span>\n                            )}\n                          </span>\n                        </button>\n                      </li>\n                    </Fragment>\n                  );\n                })}\n              </ul>\n            )}\n            {statusLine !== null && (\n              // Visible, not live — the region above speaks for it.\n              <div\n                aria-hidden\n                className={cn(\n                  small ? \"px-3 py-1.5 text-xs\" : \"px-3 py-2 text-sm\",\n                  failed && !hasStatus ? \"text-danger\" : \"text-muted\",\n                  results.length > 0 && \"border-t border-subtle text-xs\",\n                )}\n              >\n                {statusLine}\n              </div>\n            )}\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["import { Fragment, useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./field-base\";\nimport { Spinner } from \"./spinner\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\nimport { isImeEnter } from \"../lib/ime\";\nimport { isQuietFocus } from \"../lib/quiet-focus\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport {\n  ComboboxFieldLabel,\n  DISABLED_ROW_CLASS,\n  endHintRowProps,\n  GROUP_HEADING_STICKY,\n  isOptionEnabled,\n  stepEnabled,\n  SUGGESTION_LIST_CLASS,\n  suggestionRowClass,\n  useActiveOptionScroll,\n  useOptionSource,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  EndHintRow,\n  FieldCaption,\n  LABEL_IN_ROW,\n  LockedReason,\n  mergeDescribedBy,\n  StaticLabelRow,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n} from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\n\n/**\n * `value`/`onChange` are the TEXT's, and `onSelect` is \"a suggestion was taken\" —\n * not the DOM's text-selection event — so the input's own spellings of those three\n * are omitted. Everything else reaches the `<input>`, the way it does on {@link Input}.\n */\nexport interface AutocompleteProps<V extends string | number = string>\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"onSelect\" | \"children\" | \"type\" | \"size\"\n  >,\n    FieldHelpProps {\n  /** What is in the field. Controlled, and never reset by the component: opening,\n   *  closing and a failed lookup all leave it exactly as typed. */\n  value: string;\n  /** Every keystroke — and, with `fillOnSelect`, the label of a taken suggestion. */\n  onChange: (text: string) => void;\n  /** Suggestions the caller already has (e.g. from its own query hook). Narrowed by\n   *  the text unless `filter={false}`. An option with `disabled: true` is listed but\n   *  cannot be taken — see {@link ComboOption.disabled}. */\n  options?: ComboOption<V>[];\n  /** Or: fetch them. Debounced (`debounceMs`), race-safe, only at `minChars` and up,\n   *  never while the field is idle; a rejection shows `loadErrorLabel` and empties\n   *  the list rather than leaving the previous text's rows under it. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** Narrow `options` by label/sublabel substring. Default `true`. Pass `false` for\n   *  a list a server has already searched and ranked — it is shown as given. */\n  filter?: boolean;\n  /** External loading flag (a caller-side fetch), OR-ed with `loadOptions`'. */\n  loading?: boolean;\n  /** Below this many characters nothing is offered or fetched. Default 1: an empty\n   *  field asks nothing — focusing it is not a search. */\n  minChars?: number;\n  /** Quiet time before `loadOptions` runs. Default 300 ms — an ordinary typist's\n   *  inter-key interval is 150–250 ms, so the pickers' 150 fires on nearly every\n   *  letter, which a rate-limited geocoder cannot afford. */\n  debounceMs?: number;\n  /**\n   * Whether the list MAY show — controlled. Omit (or pass `undefined`) and the field\n   * decides: open while focused, until Escape, Tab or a taken row. `false` keeps it\n   * shut whatever the user does, and stops `loadOptions` asking — keksdose's address\n   * search, with its confirm map up, where it used to pass `minChars={Infinity}`.\n   * `true` shows it even unfocused.\n   *\n   * Even open, the list only APPEARS when it has something to show (rows, or a\n   * status line); `aria-expanded` follows what appears, not this flag.\n   */\n  open?: boolean;\n  /** The field wants the list open or shut — focus, typing, ↓/↑ open it; blur,\n   *  Escape, Tab and taking a row shut it. Called on every change, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `\"sm\"`: the 28px, 12px-type field of {@link Select}'s `size=\"sm\"`, with the icon,\n   * spinner and list rows scaled to match — for a card or toolbar whose buttons are\n   * small. `\"md\"` (default) is the form field. Unlabelled only, as on `Select`: a\n   * floating label needs the tall box, so a labelled field ignores `\"sm\"`.\n   *\n   * A NUMBER is still the native `size` attribute (the width in characters), passed\n   * straight through.\n   */\n  size?: \"sm\" | \"md\" | number;\n  /** A suggestion was taken (click, or Enter on the highlighted row). */\n  onSelect?: (option: ComboOption<V>) => void;\n  /**\n   * Put the taken suggestion's label into the field (`onChange(label)`). Default\n   * `true` — the free-text case, where the text IS the value and a suggestion only\n   * completes it (an address field). Pass `false` where taking a row is an ACTION\n   * and the field is only the search that found it; the text then stays as typed.\n   */\n  fillOnSelect?: boolean;\n  /** A floating label, as on {@link Combobox} — a real `<label for>` on the input.\n   *  Names the field (`aria-labelledby`) unless an `aria-label` is given. */\n  label?: ReactNode;\n  /** Leading decoration inside the field (a pin, a magnifier). Decorative: the\n   *  label names the field. An `<svg>` child is sized by the field — 16px, or 14px\n   *  at `size=\"sm\"` — so a lucide icon needs no class of its own. */\n  icon?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. */\n  invalid?: boolean;\n  /** What is wrong with the VALUE, as {@link Input}'s `error`: under the field, on\n   *  its `aria-describedby`, implies `invalid`. Not a failed lookup — that is\n   *  `loadErrorLabel`, shown in the list. */\n  error?: ReactNode;\n  /**\n   * Standing advice — {@link Combobox}'s `hint`, so this field reads like every other\n   * (keksdose K4): plain TEXT is a caption under the field on the input's\n   * `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the label line,\n   * or with no label sits at the field's end edge, outside the box. Not the list's\n   * `status` line, which talks about the lookup, not the field.\n   *\n   * Pass it — even as `undefined` — on a field whose hint comes and goes (0.24): the\n   * unlabelled field then keeps its end-hint row whether or not a \"?\" is in it, so the\n   * `<input>` is never re-parented, and focus and caret survive the toggle. The rule\n   * the rest of the family has had since 0.23 (and the fields since 0.22).\n   */\n  hint?: ReactNode;\n  /**\n   * The caller's own line in the list, replacing the automatic one (loading / failed\n   * / no results). For what only the caller knows: \"offline\", \"the address service\n   * is switched off\", a privacy note, the hint a caller-fetched list needs below its\n   * own minimum. While set, the list opens even with no rows. Announced politely.\n   */\n  status?: ReactNode;\n  /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */\n  emptyLabel?: string;\n  /** Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n  /** Classes for the `<input>` itself; `className` styles the wrapper. */\n  inputClassName?: string;\n  /**\n   * Why the field cannot be changed — {@link Button}'s `disabledReason`, the Combobox\n   * family's write lock (keksdose G2, 0.23), for a field whose pick SAVES: an address\n   * search whose taken row writes the address, a lookup that links a record.\n   *\n   * With a reason the input stays focusable and `aria-disabled`, is `readOnly` (the\n   * settled grey FIELD_BASE gives a `[readonly]` field), opens no list and asks no\n   * `loadOptions` — whatever `open` says — and nothing reaches `onChange`, `onSelect` or\n   * `onOpenChange(true)`. Enter is swallowed, so a locked field does not submit the form\n   * around it, and a caller's `onKeyDown` does not hear it; every other key still\n   * reaches the caller (an Escape that closes its panel) and the caret. The reason is in\n   * the kit {@link Tooltip} and on the input's `aria-describedby`. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This field COMMITS. Under a locked {@link WriteLockProvider} it is locked the\n   * `disabledReason` way with the lock's reason (which wins over its own). A search\n   * whose result is only draft state — the form's Save writes it — leaves this off and\n   * stays live under the lock. No provider, or an unlocked one: no effect.\n   */\n  commit?: CommitScope;\n  /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the\n   *  field at Large and on a touch screen by default, the tooltip otherwise (DUP-3). */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10): it was\n   *  `forwardRef`, cast back to a generic function, with a `displayName` line beside it. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * An inline, async-capable text field with a suggestion list under it — the\n * WAI-ARIA APG \"editable combobox with list autocomplete\".\n *\n * Two jobs, one control:\n *  - **free text** (kastlan's address field): the text is the value, the list only\n *    offers completions, and taking one fills the field (`fillOnSelect`, default);\n *  - **search-then-act** (keksdose's address search): the text is a query, taking a\n *    row calls `onSelect` and nothing is held (`fillOnSelect={false}`).\n *\n * How it differs from its siblings: {@link Combobox} is free text over a STATIC\n * string pool and opens on focus; {@link EntityCombobox} is a trigger holding an id.\n * This one keeps no value of its own, never resets the text, asks nothing below\n * `minChars`, and reports a failed lookup instead of showing stale rows.\n *\n * Focus never leaves the `<input>`: `aria-activedescendant` names the highlighted\n * row, `aria-controls` the list, and a polite live region says what the list now\n * holds. Keyboard: ↓/↑ move (↓ opens) over every row but a `disabled` one, Enter\n * takes the highlighted row (with none,\n * Enter is left to the form), Escape closes, Tab closes and moves on; Home/End stay\n * with the caret. An Escape that closes an open list is consumed and never reaches the\n * caller; with the list closed it does. For every other key a caller's `onKeyDown`\n * runs first and may `preventDefault()` to\n * keep a key for itself.\n *\n * The list is portalled and anchored under the field on every screen size: the\n * field already carries the keyboard, and `useAnchoredPanel` keeps the list clear\n * of it on a phone. There is no full-screen sheet as {@link Combobox} has.\n *\n * Generic over the option value (`ComboOption<V>`); the ref is the `<input>`'s.\n */\nexport function Autocomplete<V extends string | number = string>(props: AutocompleteProps<V>) {\n  const {\n    ref,\n    value,\n    onChange,\n    options,\n    loadOptions,\n    filter,\n    loading,\n    minChars = 1,\n    debounceMs = 300,\n    onSelect,\n    fillOnSelect = true,\n    label,\n    icon,\n    invalid,\n    error,\n    hint,\n    help,\n    status,\n    emptyLabel,\n    loadErrorLabel,\n    open: openProp,\n    onOpenChange,\n    size,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...rest\n  } = props;\n  const generated = useId();\n  const fieldId = id ?? generated;\n  // Off the GENERATED id: a caller's `id` is theirs to collide with.\n  const listboxId = `${generated}-listbox`;\n  const labelId = `${generated}-label`;\n  const optionId = (index: number) => `${generated}-option-${index}`;\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    noResults: emptyLabel,\n    loadError: loadErrorLabel,\n  });\n  const hintParts = useFieldHint(hint, ariaDescribedBy, { help, name: label ?? ariaLabel });\n  // A form library's `aria-invalid` paints as well as announces (DUP-8: it only\n  // announced, through the spread below).\n  const field = useFieldError(error, invalid, hintParts.describedBy, rest[\"aria-invalid\"]);\n\n  /** The user's intent: the field is focused and the list has not been dismissed.\n   *  Whether anything SHOWS is decided below, from what there is to show. */\n  const [ownOpen, setOwnOpen] = useState(false);\n  // Controlled when the caller passes a boolean. The own state is kept up to date\n  // either way, so a caller that controls only SOMETIMES (`open={confirming ? false :\n  // undefined}`) hands back a field that is exactly as open as focus says it is.\n  const open = openProp ?? ownOpen;\n  // The field took the tour's quiet focus (§11.8) and has not opened since.\n  const quietRef = useRef(false);\n  const setOpen = (next: boolean) => {\n    setOwnOpen(next);\n    if (next !== open) onOpenChange?.(next);\n  };\n  const [active, setActive] = useState(-1);\n  // The lock: focusable, `readOnly`, no list — see `disabledReason`. Folded into `live`,\n  // so a locked field asks nothing and shows nothing even with `open` held true.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const live = open && !disabled && !locked;\n  const { results, busy, failed, tooShort } = useOptionSource<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n    query: value,\n    active: live,\n  });\n\n  const hasStatus = status !== undefined && status !== null && status !== false && status !== \"\";\n  // The visible line under the rows. Nothing below `minChars` unless the caller has\n  // something to say — an empty field opening a box that says \"type more\" is noise.\n  const statusLine: ReactNode = hasStatus\n    ? status\n    : tooShort\n      ? null\n      : busy && results.length === 0\n        ? labels.loading\n        : failed\n          ? labels.loadError\n          : !busy && results.length === 0\n            ? labels.noResults\n            : null;\n  const expanded = live && (results.length > 0 || statusLine !== null);\n  // A disabled row is never the keyboard's — not even when a list that changed under\n  // the highlight put one there.\n  const activeId = expanded && isOptionEnabled(results[active]) ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n  const { rect, top, bottom, maxHeight, above } = useAnchoredPanel(fieldRef, expanded, { preferredHeight: 256 });\n  const dir = useAnchorDir(fieldRef, expanded);\n\n  const close = () => {\n    setOpen(false);\n    setActive(-1);\n  };\n  // The list is a layer on the kit's Escape stack while it shows (Wave 2, DUP-1).\n  useDismissLayer(expanded, close);\n  const take = (o: ComboOption<V>) => {\n    if (o.disabled || locked) return;\n    if (fillOnSelect) onChange(o.label);\n    onSelect?.(o);\n    close();\n  };\n\n  const hasLabel = label !== undefined;\n  // `size=\"sm\"` is for an UNLABELLED field, as on Select: the floating label needs the\n  // tall box. A number is the native attribute.\n  const small = size === \"sm\" && !hasLabel;\n  const nativeSize = typeof size === \"number\" ? size : undefined;\n  // The caller's name wins; else the floating label, by reference so a non-string\n  // label still names the field.\n  const labelledBy =\n    ariaLabel === undefined ? (ariaLabelledBy ?? (hasLabel ? labelId : undefined)) : undefined;\n  // While locked the field sits in the reason's Tooltip — in a fragment with a hidden\n  // copy of the reason, Button's anatomy; `block` so a full-width field stays full width.\n  const withLock = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className=\"block\">\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n\n  return (\n    // `relative`: the floating label and the live region's `sr-only` both need a\n    // local containing block.\n    <div className={cn(\"relative\", className)}>\n      {/* A real <label for> (lenkbank), and still `aria-labelledby`'s target, so the\n          name — and the listbox's, which borrows it — is exactly what it was. */}\n      {hasLabel && hintParts.labelHint === undefined && (\n        <ComboboxFieldLabel id={labelId} htmlFor={fieldId}>\n          {label}\n        </ComboboxFieldLabel>\n      )}\n      {/* `\"hint\" in props`: the family's 0.22 rule (see `endHintRowProps`) — passed at\n          all, even as `undefined`, a hint keeps the unlabelled field's end-hint row, so\n          a \"?\" coming and going never re-parents the <input> under the caret (0.24, the\n          last of the family to get it; the siblings had it in 0.23). */}\n      <EndHintRow {...endHintRowProps(\"hint\" in props, hasLabel, hintParts.labelHint)}>\n        {withLock(\n          <div ref={fieldRef} className={cn(\"relative\", locked && \"cursor-not-allowed\")}>\n            {icon && (\n              <span\n                aria-hidden\n                className={cn(\n                  \"pointer-events-none absolute flex text-muted\",\n                  small ? \"start-2 [&>svg]:size-3.5\" : \"start-2.5 [&>svg]:size-4\",\n                  // Labelled, the icon sits on the VALUE's line — the one line box below\n                  // FIELD_FLOATING_PAD's `pt-4` and the 1px border — not on the middle of\n                  // the box. Centred on the box it rose into the top strip and sat on the\n                  // label's first letters, which float at the same start inset. On the\n                  // value line it is beside what it describes, and the label keeps the\n                  // start edge every other label in the form's column shares.\n                  // At Large the label stands above the field and the strip is gone\n                  // (0.33, §10.17): the value's line is under FIELD_BASE's `py-2`.\n                  hasLabel\n                    ? \"top-[calc(1rem+1px)] h-5 items-center large:top-[calc(0.5rem+1px)]\"\n                    : \"top-1/2 -translate-y-1/2\",\n                )}\n              >\n                {icon}\n              </span>\n            )}\n            <input\n              {...rest}\n              ref={ref}\n              id={fieldId}\n              size={nativeSize}\n              type=\"text\"\n              value={value}\n              // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.\n              disabled={locked ? undefined : disabled}\n              readOnly={locked || rest.readOnly}\n              aria-disabled={locked || rest[\"aria-disabled\"]}\n              role=\"combobox\"\n              aria-autocomplete=\"list\"\n              aria-expanded={expanded}\n              // Required by the role, and set while closed too, as on the siblings.\n              aria-controls={listboxId}\n              aria-activedescendant={activeId}\n              aria-label={ariaLabel}\n              aria-labelledby={labelledBy}\n              aria-invalid={field.isInvalid || rest[\"aria-invalid\"] || undefined}\n              aria-describedby={mergeDescribedBy(field.describedBy, locked && lock.reasonId)}\n              autoComplete=\"off\"\n              onFocus={(e) => {\n                onFocus?.(e);\n                // A locked field takes focus to say why, and opens nothing.\n                if (locked) return;\n                // The tour's focus on arrival (§11.8) looks nothing up: the list would\n                // cover its card (0.50.1). A click, ArrowDown or typing opens it.\n                if (isQuietFocus(e.currentTarget)) {\n                  quietRef.current = true;\n                  return;\n                }\n                // A seeded field (keksdose's `initialQuery`) is looked up as it is\n                // focused; an empty one asks nothing, because of `minChars`.\n                setOpen(true);\n              }}\n              // After a quiet focus, the person's click on the already-focused field\n              // fires no `focus`: the click is their \"open\" instead.\n              onClick={(e) => {\n                rest.onClick?.(e);\n                if (!quietRef.current || locked) return;\n                quietRef.current = false;\n                setOpen(true);\n              }}\n              onBlur={(e) => {\n                quietRef.current = false;\n                onBlur?.(e);\n                close();\n              }}\n              onChange={(e) => {\n                if (locked) return;\n                onChange(e.target.value);\n                setOpen(true);\n                setActive(-1);\n              }}\n              onKeyDown={(e) => {\n                // Locked: Enter is swallowed (no form submit, no caller's \"search now\");\n                // every other key is the caller's and the caret's. No list to drive.\n                if (locked) {\n                  if (e.key === \"Enter\") e.preventDefault();\n                  else onKeyDown?.(e);\n                  return;\n                }\n                // An Escape that closes the OPEN list is the list's, and is consumed before\n                // the caller sees it. A caller whose Escape means \"close the panel\" (keksdose's\n                // address search) otherwise closed the whole panel when the user only meant\n                // to dismiss the suggestions — the opposite of what the docs promised.\n                if (e.key === \"Escape\" && expanded && takeEscape(e)) return;\n                onKeyDown?.(e);\n                if (e.defaultPrevented) return;\n                // Disabled rows are passed over; at either end the highlight stays put.\n                if (e.key === \"ArrowDown\") {\n                  e.preventDefault();\n                  if (!open) setOpen(true);\n                  else setActive((i) => stepEnabled(results, i, 1));\n                } else if (e.key === \"ArrowUp\") {\n                  e.preventDefault();\n                  if (!open) setOpen(true);\n                  // From \"nothing highlighted\", Up goes to the bottom, as the APG has it.\n                  else setActive((i) => stepEnabled(results, i < 0 ? results.length : i, -1));\n                } else if (e.key === \"Enter\") {\n                  // No row highlighted: the text is the answer, and a form's own submit\n                  // is left alone. Nor is a row taken by the Enter that confirms an IME\n                  // composition, which is the IME's (BUG-9).\n                  if (expanded && activeId && !isImeEnter(e)) {\n                    e.preventDefault();\n                    take(results[active]);\n                  }\n                } else if (e.key === \"Tab\") {\n                  close();\n                }\n              }}\n              className={cn(\n                FIELD_BASE,\n                hasLabel && FIELD_FLOATING_PAD,\n                // Select's `SELECT_SM` box: a fixed 28px, so the caller's line height\n                // cannot grow it.\n                small && \"h-7 py-0 pe-2 ps-2 text-xs\",\n                icon ? (small ? \"ps-7\" : \"ps-8\") : undefined,\n                busy && (small ? \"pe-7\" : \"pe-9\"),\n                field.isInvalid && FIELD_INVALID,\n                inputClassName,\n              )}\n            />\n            {busy && live && (\n              // Decorative: the live region below already says \"Loading…\".\n              <span\n                className={cn(\n                  \"pointer-events-none absolute top-1/2 flex -translate-y-1/2\",\n                  small ? \"end-2\" : \"end-2.5\",\n                )}\n              >\n                <Spinner label={null} className={small ? \"h-3.5 w-3.5\" : \"h-4 w-4\"} />\n              </span>\n            )}\n          </div>,\n        )}\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it, after the field so the \"?\"\n          follows the control in the tab order (as on Input and Select). */}\n      {hasLabel && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <ComboboxFieldLabel id={labelId} htmlFor={fieldId} className={LABEL_IN_ROW}>\n            {label}\n          </ComboboxFieldLabel>\n        </StaticLabelRow>\n      )}\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n      {/* The live region, kept mounted so a change IS an announcement: focus stays\n          in the field, and without it a reader typed into a geocoder and heard only\n          their own letters. The panel's visible line is aria-hidden in favour of\n          this, which also carries the row count the eye reads off the list. */}\n      <div role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {!live\n          ? null\n          : statusLine !== null\n            ? statusLine\n            : results.length > 0\n              ? labels.resultCount(results.length)\n              : null}\n      </div>\n      {expanded &&\n        rect &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            // Every press inside the list keeps focus in the field — rows, the status\n            // line, the scrollbar — or the input's blur would close the list first.\n            role=\"presentation\"\n            // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).\n            data-kit-layer=\"\"\n            // Portalled out of the form's `dir`; the field's is put back. The list is\n            // exactly the field's width, so `left` places it in either direction.\n            dir={dir}\n            onMouseDown={(e) => e.preventDefault()}\n            // The family's suggestion box (DUP-4), as a column: the list scrolls inside\n            // it and the status line stays under the rows.\n            className={cn(SUGGESTION_LIST_CLASS, \"fixed z-50 flex flex-col overflow-hidden py-0\")}\n            // Flipped above, the list hangs from its bottom edge: three rows under a\n            // 256 px cap, placed by `top`, floated ~176 px above the field (keksdose K1),\n            // and the rows come and go as the user types.\n            style={{ ...(above ? { bottom } : { top }), left: rect.left, width: rect.width, maxHeight }}\n          >\n            {results.length > 0 && (\n              <ul\n                id={listboxId}\n                role=\"listbox\"\n                aria-label={ariaLabel}\n                aria-labelledby={labelledBy}\n                className=\"min-h-0 flex-1 overflow-y-auto py-1\"\n              >\n                {results.map((o, i) => {\n                  const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n                  return (\n                    // Keyed by group AND value, as in the core panel: an option may\n                    // appear once per group.\n                    <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n                      {startsGroup && (\n                        <li\n                          role=\"presentation\"\n                          className={cn(\n                            GROUP_HEADING_STICKY,\n                            \"px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-muted first:pt-1\",\n                          )}\n                        >\n                          {o.group}\n                        </li>\n                      )}\n                      <li role=\"presentation\">\n                        <button\n                          type=\"button\"\n                          id={optionId(i)}\n                          role=\"option\"\n                          // CHOSEN, never \"highlighted\" — the family's rule. This\n                          // field holds no value, so the only row that can be chosen\n                          // is the one whose label the text already is.\n                          aria-selected={fillOnSelect && o.label === value}\n                          // Listed, announced as unavailable, never taken: `take`\n                          // refuses it and the arrows pass it over.\n                          aria-disabled={o.disabled || undefined}\n                          tabIndex={-1}\n                          onClick={() => take(o)}\n                          onMouseEnter={() => {\n                            if (!o.disabled) setActive(i);\n                          }}\n                          className={cn(\n                            // The family's suggestion row (DUP-4): it hand-rolled its\n                            // own with a plain `truncate`, so a long address was cut at\n                            // Large, where Combobox's rows wrap (text size §10.17, T1).\n                            // A flex row here, for the icon and the two lines.\n                            suggestionRowClass(i === active && !o.disabled),\n                            \"flex items-center gap-2\",\n                            small && \"py-1 text-xs\",\n                            o.disabled && DISABLED_ROW_CLASS,\n                            o.group != null && \"ps-6\",\n                          )}\n                        >\n                          {o.icon && (\n                            <span aria-hidden className=\"shrink-0 text-muted\">\n                              {o.icon}\n                            </span>\n                          )}\n                          <span className=\"min-w-0 flex-1\">\n                            <span className=\"block truncate-until-large text-primary\">\n                              {o.label}\n                            </span>\n                            {o.sublabel && (\n                              <span\n                                className={cn(\n                                  \"block truncate-until-large text-placeholder\",\n                                  small ? \"text-caption\" : \"text-xs\",\n                                )}\n                              >\n                                {o.sublabel}\n                              </span>\n                            )}\n                          </span>\n                        </button>\n                      </li>\n                    </Fragment>\n                  );\n                })}\n              </ul>\n            )}\n            {statusLine !== null && (\n              // Visible, not live — the region above speaks for it.\n              <div\n                aria-hidden\n                className={cn(\n                  small ? \"px-3 py-1.5 text-xs\" : \"px-3 py-2 text-sm\",\n                  failed && !hasStatus ? \"text-danger\" : \"text-muted\",\n                  results.length > 0 && \"border-t border-subtle text-xs\",\n                )}\n              >\n                {statusLine}\n              </div>\n            )}\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/button-look.d.ts

@@ -24,22 +24,7 @@ import type { KitLinkComponent, KitLinkProps } from "../i18n/kit-labels.js";
  *   same look; a development build warns once per name). They are removed in 0.51, and
  *   `primary` will not come back with another meaning.
  */
-export type ButtonVariant = "default" | "accent" | "secondary" | "ghost" | "danger" | "link"
-/** @deprecated 0.49 — use `default` (same look); removed in 0.51. */
- | "primary"
-/** @deprecated 0.49 — use `accent` (same look); removed in 0.51. */
- | "brand";
-/** @internal A {@link ButtonVariant} without the deprecated aliases. */
-export type CanonicalButtonVariant = Exclude<ButtonVariant, "primary" | "brand">;
-/**
- * @internal A deprecated variant name warns once (per `component` and name) in a
- * development build, then reads as the name it stands for. `component` is the prop's
- * owner in the message ("Button variant", "FormActions submitVariant", …).
- */
-export declare function warnDeprecatedVariant(component: string, name: string, replacement: string): void;
-/** @internal `primary` → `default`, `brand` → `accent` (warning once in development);
- *  every other variant as it is. Runs before every lookup keyed by the variant. */
-export declare function resolveButtonVariant(variant: ButtonVariant, component?: string): CanonicalButtonVariant;
+export type ButtonVariant = "default" | "accent" | "secondary" | "ghost" | "danger" | "link";
 /**
  * The touch target at Large and Extra large (docs/text-size-harmonization.md §4): at
  * least 48 px, the size a finger needs whatever the type. In px on purpose, like the
@@ -64,7 +49,7 @@ export type ButtonSize = "sm" | "md";
  * recipe at 12 %.
  */
 export declare const HOVER_INK = "hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]";
-export declare const buttonVariantClasses: Record<CanonicalButtonVariant, string>;
+export declare const buttonVariantClasses: Record<ButtonVariant, string>;
 /**
  * The text colour of a `link` or `ghost` button, over the variant's own.
  *
@@ -110,10 +95,10 @@ export interface ButtonClassesOptions {
  * `{ size, className }` — `buttonClasses("secondary", { size: "sm" })` for keksdose's
  * compact toolbar links.
  */
-export declare function buttonClasses(given?: ButtonVariant, classNameOrOptions?: string | ButtonClassesOptions): string;
+export declare function buttonClasses(variant?: ButtonVariant, classNameOrOptions?: string | ButtonClassesOptions): string;
 export declare const ICON_BUTTON_PRESSED = "bg-brand-soft text-brand hover:bg-brand-soft-hover hover:text-brand-muted disabled:hover:bg-brand-soft disabled:hover:text-brand";
 /** @internal The button look shared by the `<button>` and the `<a>` form. */
-export declare function buttonLook(given: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone): string;
+export declare function buttonLook(variant: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone): string;
 /** @internal Calls a `renderLink` / provider link as a function, as ListItem and Chip
  *  do — an inline `renderLink` arrow would otherwise be a new component type every
  *  render. Both buttons' link forms render through it. */

package/dist/components/button-look.js

@@ -1,29 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { FOCUS_RING_WIDTH } from "./focus-ring.js";
-const DEPRECATED_BUTTON_VARIANTS = {
-  primary: "default",
-  brand: "accent"
-};
-function devWarnings() {
-  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;
-}
-const warnedVariants = /* @__PURE__ */ new Set();
-function warnDeprecatedVariant(component, name, replacement) {
-  if (!devWarnings()) return;
-  const key = `${component}|${name}`;
-  if (warnedVariants.has(key)) return;
-  warnedVariants.add(key);
-  console.warn(
-    `[ui-kit] ${component}="${name}" is deprecated: use "${replacement}" (same look). "${name}" is removed in 0.51.`
-  );
-}
-function resolveButtonVariant(variant, component = "Button variant") {
-  const replacement = DEPRECATED_BUTTON_VARIANTS[variant];
-  if (replacement === void 0) return variant;
-  warnDeprecatedVariant(component, variant, replacement);
-  return replacement;
-}
 const BUTTON_BASE = cn(
   "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:shrink-0",
   FOCUS_RING_WIDTH
@@ -77,9 +54,8 @@ const BUTTON_BOXED_DANGER = {
   default: "border-danger bg-danger-soft text-danger hover:border-[var(--danger)] hover:bg-danger hover:text-danger-contrast focus-visible:ring-danger-strong disabled:hover:border-danger disabled:hover:bg-danger-soft disabled:hover:text-danger"
 };
 const BUTTON_LINK_PRESSED = "font-medium text-brand hover:text-brand disabled:hover:text-brand contrast:text-brand-muted contrast:hover:text-brand-muted contrast:disabled:hover:text-brand-muted";
-function buttonClasses(given = "default", classNameOrOptions) {
+function buttonClasses(variant = "default", classNameOrOptions) {
   const { size = "md", className } = typeof classNameOrOptions === "object" ? classNameOrOptions : { className: classNameOrOptions };
-  const variant = resolveButtonVariant(given, "buttonClasses variant");
   return cn(
     BUTTON_BASE,
     BUTTON_SIZES[size],
@@ -89,8 +65,7 @@ function buttonClasses(given = "default", classNameOrOptions) {
   );
 }
 const ICON_BUTTON_PRESSED = "bg-brand-soft text-brand hover:bg-brand-soft-hover hover:text-brand-muted disabled:hover:bg-brand-soft disabled:hover:text-brand";
-function buttonLook(given, size, stretch, tone) {
-  const variant = resolveButtonVariant(given);
+function buttonLook(variant, size, stretch, tone) {
   return cn(
     BUTTON_BASE,
     BUTTON_SIZES[size],
@@ -118,8 +93,6 @@ export {
   TOUCH_TARGET_LARGE,
   buttonClasses,
   buttonLook,
-  buttonVariantClasses,
-  resolveButtonVariant,
-  warnDeprecatedVariant
+  buttonVariantClasses
 };
 //# sourceMappingURL=button-look.js.map

package/dist/components/button-look.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/button-look.ts"],"sourcesContent":["import { cn } from \"../lib/cn\";\nimport { FOCUS_RING_WIDTH } from \"./focus-ring\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\n\n/**\n * The button look, which {@link Button} and {@link IconButton} share (0.34, MOD-2, refactor\n * audit 2026-10). In ui.tsx it was the one knot in an otherwise one-way graph: Button drew\n * IconButton's pressed look, and IconButton drew Button's variant colours, its hover ink\n * and its router link. Both now draw from this module, which renders nothing, so neither\n * imports the other.\n *\n * Public through ./ui by name: `buttonClasses`, `TOUCH_TARGET_LARGE` and the four types.\n * The other exports are the two buttons' shared parts (`@internal`).\n */\n\n/**\n * A button's look.\n *\n * - `default`: the quiet action — a warm filled chip with a hairline border. What a\n *   Button with no `variant` draws.\n * - `accent`: the strong one, solid `--brand` with `--brand-contrast` text — the one\n *   call to action a view leads with. \"Accent\" is the button's role here, painted in\n *   `--brand`; it is not the palette's second anchor colour, also called `accent`\n *   (theme/palette-derive.ts), which no button paints.\n * - `secondary`: an outline. `ghost`: text or glyph only. `danger`: solid `--danger`,\n *   for an action that destroys something. `link`: a text link that acts (a `<button>`).\n * - `primary` and `brand` are **deprecated** aliases of `default` and `accent` (0.49,\n *   same look; a development build warns once per name). They are removed in 0.51, and\n *   `primary` will not come back with another meaning.\n */\nexport type ButtonVariant =\n  | \"default\"\n  | \"accent\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"danger\"\n  | \"link\"\n  /** @deprecated 0.49 — use `default` (same look); removed in 0.51. */\n  | \"primary\"\n  /** @deprecated 0.49 — use `accent` (same look); removed in 0.51. */\n  | \"brand\";\n\n/** @internal A {@link ButtonVariant} without the deprecated aliases. */\nexport type CanonicalButtonVariant = Exclude<ButtonVariant, \"primary\" | \"brand\">;\n\n/** The deprecated names and what they stand for — see {@link ButtonVariant}. */\nconst DEPRECATED_BUTTON_VARIANTS: Readonly<Record<string, CanonicalButtonVariant>> = {\n  primary: \"default\",\n  brand: \"accent\",\n};\n\n/** The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a\n *  production one (the consumer's bundler makes `import.meta.env.DEV` false) and never\n *  under vitest. Read per call so a test can switch it on with `vi.stubEnv`. */\nfunction devWarnings(): boolean {\n  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;\n}\n\nconst warnedVariants = new Set<string>();\n\n/**\n * @internal A deprecated variant name warns once (per `component` and name) in a\n * development build, then reads as the name it stands for. `component` is the prop's\n * owner in the message (\"Button variant\", \"FormActions submitVariant\", …).\n */\nexport function warnDeprecatedVariant(component: string, name: string, replacement: string): void {\n  if (!devWarnings()) return;\n  const key = `${component}|${name}`;\n  if (warnedVariants.has(key)) return;\n  warnedVariants.add(key);\n  console.warn(\n    `[ui-kit] ${component}=\"${name}\" is deprecated: use \"${replacement}\" (same look). ` +\n      `\"${name}\" is removed in 0.51.`,\n  );\n}\n\n/** @internal `primary` → `default`, `brand` → `accent` (warning once in development);\n *  every other variant as it is. Runs before every lookup keyed by the variant. */\nexport function resolveButtonVariant(variant: ButtonVariant, component = \"Button variant\"): CanonicalButtonVariant {\n  const replacement = DEPRECATED_BUTTON_VARIANTS[variant];\n  if (replacement === undefined) return variant as CanonicalButtonVariant;\n  warnDeprecatedVariant(component, variant, replacement);\n  return replacement;\n}\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.\n//\n// The ring is the kit's focus frame (§5): {@link FOCUS_RING_WIDTH} wide, on keyboard focus\n// (`focus-visible`) — a tap or a click no longer leaves a ring on the button — in each\n// variant's own colour below.\n//\n// `[&_svg]:shrink-0` (0.32.2, kastlan's 0.32.1 report): an icon beside a label keeps its\n// size when the label wraps at Large. Without it the svg was a flex item like the text,\n// and a two-line label squeezed it to a sliver (\"New invoice\" in a page header at 360 px\n// / Extra large).\nconst BUTTON_BASE = cn(\n  \"inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:shrink-0\",\n  FOCUS_RING_WIDTH,\n);\n\n/**\n * The touch target at Large and Extra large (docs/text-size-harmonization.md §4): at\n * least 48 px, the size a finger needs whatever the type. In px on purpose, like the\n * field floor ({@link FIELD_TOUCH_TEXT}): it is a physical threshold, not a size that\n * follows the text. Normal keeps the kit's own heights; a `large:` variant, so it costs\n * no render and is right on the first paint.\n */\nexport const TOUCH_TARGET_LARGE = \"large:min-h-[48px] large:min-w-[48px]\";\n\n/** The 48 px target at Large for a control whose BOX cannot grow (a chip's or a tab's\n *  action, IconButton `2xs`; Tabs' overflow cues, 0.48 KS N3): an invisible `::after`\n *  centred on it takes the taps a finger lands round the glyph. Not public. */\nexport const HIT_AREA_LARGE =\n  \"relative large:after:absolute large:after:inset-[calc((100%-48px)/2)] large:after:content-['']\";\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.\n//\n// At Large and above (§4) `sm` grows to `md`'s height — the padding that makes its\n// 1rem line as tall as `md`'s 1.25rem one — and both reach the 48 px touch target. The\n// type stays `sm`'s: the compact button is still the quieter one. Not on `link`, which\n// is a word in a sentence and has no box to grow (see `buttonLook`).\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};\nconst BUTTON_SIZES_LARGE: Record<ButtonSize, string> = {\n  md: \"large:min-h-[48px]\",\n  sm: \"large:min-h-[48px] large:py-2.5\",\n};\n\n/**\n * The hover of a control that may sit on the page, a card or a well (0.33, B′ —\n * docs/colour-roles-harmonization.md §12.1, §12.10): the body ink at 7 %, TRANSLUCENT,\n * so it darkens (in dark, lightens) whatever is under it by the same step — 1.11:1 or\n * more on all three surfaces, both themes, with the label at 7:1 and up. It was\n * `--bg-surface-2`, which since 0.33 is the page itself in light: a ghost button on the\n * page would not have moved at all. Not `--bg-hover` either, which is mixed against the\n * CARD and stands only 1.04:1 from the page. IconButton's `custom` tone uses the same\n * recipe at 12 %.\n */\nexport const HOVER_INK = \"hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]\";\n\n// Warm, palette-token-driven so buttons blend with the fields + cards in every theme.\n// Actions default to a warm bordered look (`default` = filled warm chip, secondary =\n// outline); `accent` is the solid brand fill 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`. Keyed by\n// the canonical names: {@link resolveButtonVariant} maps the deprecated ones first.\nexport const buttonVariantClasses: Record<CanonicalButtonVariant, string> = {\n  default:\n    // Hovers onto `--bg-active`, not `--border` (0.33, §12.9): More contrast steps the\n    // border until it is a 3:1 LINE, and as a fill under the label that left 2.7:1.\n    \"border border-subtle bg-surface-2 text-primary hover:bg-active focus-visible:ring-brand\",\n  secondary: `border border-subtle bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,\n  ghost: `bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,\n  danger:\n    \"bg-danger text-danger-contrast hover:bg-danger-hover focus-visible:ring-danger-strong\",\n  accent:\n    \"bg-brand text-brand-contrast hover:bg-brand-hover focus-visible:ring-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 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  //\n  // Under More contrast the word reads `--brand-muted`, the brand AS TEXT (0.36,\n  // colour-roles §13.3 decision 8): `--brand` is solved as a mark (3:1), and on More\n  // contrast's darker light well Moss's read 3.68:1; the derived dark brands sit at 3.0\n  // as text too. Both modes, since `contrast:` does not split them.\n  link:\n    \"rounded-sm p-0 bg-transparent text-brand underline-offset-4 hover:underline focus-visible:ring-brand contrast:text-brand-muted\",\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 `default` 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`, `accent` and `link`'s own colours are left alone: a tone that recoloured a\n * solid danger or accent button would be a second variant under another name.\n */\nexport type ButtonTone = \"default\" | \"muted\" | \"danger\";\n\n// `contrast:text-secondary` restates the tone's own colour under the `contrast:` variant,\n// so tailwind-merge drops the link's `contrast:text-brand-muted` (0.36): a quiet link\n// stays quiet under More contrast. On `ghost` it reads the same either way.\nconst BUTTON_TONES: Record<Exclude<ButtonTone, \"default\">, string> = {\n  muted:\n    \"text-secondary hover:text-primary disabled:hover:text-secondary contrast:text-secondary\",\n  danger:\n    \"text-secondary hover:text-danger focus-visible:ring-danger-strong disabled:hover:text-secondary contrast:text-secondary\",\n};\n\n/** Only the two transparent variants take every tone; see {@link ButtonTone}. */\nconst TONED_VARIANTS = new Set<CanonicalButtonVariant>([\"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<CanonicalButtonVariant, string>> = {\n  // Not boxed, but its hover is a fill: the danger wash under the danger text, as\n  // IconButton's danger tone (0.33). On B′'s translucent ink `--danger` fell to 4.2:1\n  // over a light page.\n  ghost: \"hover:bg-danger-soft\",\n  secondary:\n    \"border-danger bg-transparent text-danger hover:bg-danger-soft focus-visible:ring-danger-strong\",\n  default:\n    \"border-danger bg-danger-soft text-danger hover:border-[var(--danger)] hover:bg-danger hover:text-danger-contrast focus-visible:ring-danger-strong disabled:hover:border-danger disabled:hover:bg-danger-soft disabled:hover:text-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. Under\n// More contrast the brand as text, `--brand-muted`, at rest and hovered (0.36, as the\n// `link` variant), whatever the tone.\nexport const BUTTON_LINK_PRESSED =\n  \"font-medium text-brand hover:text-brand disabled:hover:text-brand contrast:text-brand-muted contrast:hover:text-brand-muted contrast:disabled:hover:text-brand-muted\";\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  given: ButtonVariant = \"default\",\n  classNameOrOptions?: string | ButtonClassesOptions,\n): string {\n  const { size = \"md\", className } =\n    typeof classNameOrOptions === \"object\" ? classNameOrOptions : { className: classNameOrOptions };\n  const variant = resolveButtonVariant(given, \"buttonClasses variant\");\n  return cn(\n    BUTTON_BASE,\n    BUTTON_SIZES[size],\n    variant !== \"link\" && BUTTON_SIZES_LARGE[size],\n    buttonVariantClasses[variant],\n    className,\n  );\n}\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. On hover\n// the glyph turns brand-muted: `--brand` on `--brand-bg-hover` is 2.69–2.80 in four dark\n// presets, under an icon's 3:1 (colour-roles §12.12). Button's `pressed` draws it on its\n// boxed variants too, which is why it lives here and not in ./icon-button.\nexport const ICON_BUTTON_PRESSED =\n  \"bg-brand-soft text-brand hover:bg-brand-soft-hover hover:text-brand-muted disabled:hover:bg-brand-soft disabled:hover:text-brand\";\n\n/** @internal The button look shared by the `<button>` and the `<a>` form. */\nexport function buttonLook(given: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone) {\n  const variant = resolveButtonVariant(given);\n  return cn(\n    BUTTON_BASE,\n    BUTTON_SIZES[size],\n    // §4: `sm` at `md`'s height and the 48 px target at Large — not on a `link`. In the\n    // order `buttonClasses` has it, so the two strings stay identical.\n    variant !== \"link\" && BUTTON_SIZES_LARGE[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/** @internal Calls a `renderLink` / provider link as a function, as ListItem and Chip\n *  do — an inline `renderLink` arrow would otherwise be a new component type every\n *  render. Both buttons' link forms render through it. */\nexport function RenderedButtonLink({ render, ...props }: KitLinkProps & { render: KitLinkComponent }) {\n  return render(props);\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,wBAAwB;AA6CjC,MAAM,6BAA+E;AAAA,EACnF,SAAS;AAAA,EACT,OAAO;AACT;AAKA,SAAS,cAAuB;AAC9B,SAAO,QAAQ,YAAY,KAAK,GAAG,KAAK,CAAC,YAAY,KAAK;AAC5D;AAEA,MAAM,iBAAiB,oBAAI,IAAY;AAOhC,SAAS,sBAAsB,WAAmB,MAAc,aAA2B;AAChG,MAAI,CAAC,YAAY,EAAG;AACpB,QAAM,MAAM,GAAG,SAAS,IAAI,IAAI;AAChC,MAAI,eAAe,IAAI,GAAG,EAAG;AAC7B,iBAAe,IAAI,GAAG;AACtB,UAAQ;AAAA,IACN,YAAY,SAAS,KAAK,IAAI,yBAAyB,WAAW,mBAC5D,IAAI;AAAA,EACZ;AACF;AAIO,SAAS,qBAAqB,SAAwB,YAAY,kBAA0C;AACjH,QAAM,cAAc,2BAA2B,OAAO;AACtD,MAAI,gBAAgB,OAAW,QAAO;AACtC,wBAAsB,WAAW,SAAS,WAAW;AACrD,SAAO;AACT;AAcA,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AACF;AASO,MAAM,qBAAqB;AAK3B,MAAM,iBACX;AAgBF,MAAM,eAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AACN;AACA,MAAM,qBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AACN;AAYO,MAAM,YAAY;AASlB,MAAM,uBAA+D;AAAA,EAC1E;AAAA;AAAA;AAAA,IAGE;AAAA;AAAA,EACF,WAAW,oDAAoD,SAAS;AAAA,EACxE,OAAO,+BAA+B,SAAS;AAAA,EAC/C,QACE;AAAA,EACF,QACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaF,MACE;AACJ;AAiCA,MAAM,eAA+D;AAAA,EACnE,OACE;AAAA,EACF,QACE;AACJ;AAGA,MAAM,iBAAiB,oBAAI,IAA4B,CAAC,QAAQ,OAAO,CAAC;AAKxE,MAAM,sBAAuE;AAAA;AAAA;AAAA;AAAA,EAI3E,OAAO;AAAA,EACP,WACE;AAAA,EACF,SACE;AACJ;AAOO,MAAM,sBACX;AAoBK,SAAS,cACd,QAAuB,WACvB,oBACQ;AACR,QAAM,EAAE,OAAO,MAAM,UAAU,IAC7B,OAAO,uBAAuB,WAAW,qBAAqB,EAAE,WAAW,mBAAmB;AAChG,QAAM,UAAU,qBAAqB,OAAO,uBAAuB;AACnE,SAAO;AAAA,IACL;AAAA,IACA,aAAa,IAAI;AAAA,IACjB,YAAY,UAAU,mBAAmB,IAAI;AAAA,IAC7C,qBAAqB,OAAO;AAAA,IAC5B;AAAA,EACF;AACF;AAQO,MAAM,sBACX;AAGK,SAAS,WAAW,OAAsB,MAAkB,SAA8B,MAAkB;AACjH,QAAM,UAAU,qBAAqB,KAAK;AAC1C,SAAO;AAAA,IACL;AAAA,IACA,aAAa,IAAI;AAAA;AAAA;AAAA,IAGjB,YAAY,UAAU,mBAAmB,IAAI;AAAA;AAAA;AAAA;AAAA,IAI7C,WAAW;AAAA,IACX,qBAAqB,OAAO;AAAA,IAC5B,SAAS,aAAa,eAAe,IAAI,OAAO,KAAK,aAAa,IAAI;AAAA,IACtE,SAAS,YAAY,oBAAoB,OAAO;AAAA,EAClD;AACF;AAKO,SAAS,mBAAmB,EAAE,QAAQ,GAAG,MAAM,GAAgD;AACpG,SAAO,OAAO,KAAK;AACrB;","names":[]}
+{"version":3,"sources":["../../src/components/button-look.ts"],"sourcesContent":["import { cn } from \"../lib/cn\";\nimport { FOCUS_RING_WIDTH } from \"./focus-ring\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\n\n/**\n * The button look, which {@link Button} and {@link IconButton} share (0.34, MOD-2, refactor\n * audit 2026-10). In ui.tsx it was the one knot in an otherwise one-way graph: Button drew\n * IconButton's pressed look, and IconButton drew Button's variant colours, its hover ink\n * and its router link. Both now draw from this module, which renders nothing, so neither\n * imports the other.\n *\n * Public through ./ui by name: `buttonClasses`, `TOUCH_TARGET_LARGE` and the four types.\n * The other exports are the two buttons' shared parts (`@internal`).\n */\n\n/**\n * A button's look.\n *\n * - `default`: the quiet action — a warm filled chip with a hairline border. What a\n *   Button with no `variant` draws.\n * - `accent`: the strong one, solid `--brand` with `--brand-contrast` text — the one\n *   call to action a view leads with. \"Accent\" is the button's role here, painted in\n *   `--brand`; it is not the palette's second anchor colour, also called `accent`\n *   (theme/palette-derive.ts), which no button paints.\n * - `secondary`: an outline. `ghost`: text or glyph only. `danger`: solid `--danger`,\n *   for an action that destroys something. `link`: a text link that acts (a `<button>`).\n * - `primary` and `brand` are **deprecated** aliases of `default` and `accent` (0.49,\n *   same look; a development build warns once per name). They are removed in 0.51, and\n *   `primary` will not come back with another meaning.\n */\nexport type ButtonVariant =\n  | \"default\"\n  | \"accent\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"danger\"\n  | \"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.\n//\n// The ring is the kit's focus frame (§5): {@link FOCUS_RING_WIDTH} wide, on keyboard focus\n// (`focus-visible`) — a tap or a click no longer leaves a ring on the button — in each\n// variant's own colour below.\n//\n// `[&_svg]:shrink-0` (0.32.2, kastlan's 0.32.1 report): an icon beside a label keeps its\n// size when the label wraps at Large. Without it the svg was a flex item like the text,\n// and a two-line label squeezed it to a sliver (\"New invoice\" in a page header at 360 px\n// / Extra large).\nconst BUTTON_BASE = cn(\n  \"inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:shrink-0\",\n  FOCUS_RING_WIDTH,\n);\n\n/**\n * The touch target at Large and Extra large (docs/text-size-harmonization.md §4): at\n * least 48 px, the size a finger needs whatever the type. In px on purpose, like the\n * field floor ({@link FIELD_TOUCH_TEXT}): it is a physical threshold, not a size that\n * follows the text. Normal keeps the kit's own heights; a `large:` variant, so it costs\n * no render and is right on the first paint.\n */\nexport const TOUCH_TARGET_LARGE = \"large:min-h-[48px] large:min-w-[48px]\";\n\n/** The 48 px target at Large for a control whose BOX cannot grow (a chip's or a tab's\n *  action, IconButton `2xs`; Tabs' overflow cues, 0.48 KS N3): an invisible `::after`\n *  centred on it takes the taps a finger lands round the glyph. Not public. */\nexport const HIT_AREA_LARGE =\n  \"relative large:after:absolute large:after:inset-[calc((100%-48px)/2)] large:after:content-['']\";\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.\n//\n// At Large and above (§4) `sm` grows to `md`'s height — the padding that makes its\n// 1rem line as tall as `md`'s 1.25rem one — and both reach the 48 px touch target. The\n// type stays `sm`'s: the compact button is still the quieter one. Not on `link`, which\n// is a word in a sentence and has no box to grow (see `buttonLook`).\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};\nconst BUTTON_SIZES_LARGE: Record<ButtonSize, string> = {\n  md: \"large:min-h-[48px]\",\n  sm: \"large:min-h-[48px] large:py-2.5\",\n};\n\n/**\n * The hover of a control that may sit on the page, a card or a well (0.33, B′ —\n * docs/colour-roles-harmonization.md §12.1, §12.10): the body ink at 7 %, TRANSLUCENT,\n * so it darkens (in dark, lightens) whatever is under it by the same step — 1.11:1 or\n * more on all three surfaces, both themes, with the label at 7:1 and up. It was\n * `--bg-surface-2`, which since 0.33 is the page itself in light: a ghost button on the\n * page would not have moved at all. Not `--bg-hover` either, which is mixed against the\n * CARD and stands only 1.04:1 from the page. IconButton's `custom` tone uses the same\n * recipe at 12 %.\n */\nexport const HOVER_INK = \"hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]\";\n\n// Warm, palette-token-driven so buttons blend with the fields + cards in every theme.\n// Actions default to a warm bordered look (`default` = filled warm chip, secondary =\n// outline); `accent` is the solid brand fill 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`.\nexport const buttonVariantClasses: Record<ButtonVariant, string> = {\n  default:\n    // Hovers onto `--bg-active`, not `--border` (0.33, §12.9): More contrast steps the\n    // border until it is a 3:1 LINE, and as a fill under the label that left 2.7:1.\n    \"border border-subtle bg-surface-2 text-primary hover:bg-active focus-visible:ring-brand\",\n  secondary: `border border-subtle bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,\n  ghost: `bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,\n  danger:\n    \"bg-danger text-danger-contrast hover:bg-danger-hover focus-visible:ring-danger-strong\",\n  accent:\n    \"bg-brand text-brand-contrast hover:bg-brand-hover focus-visible:ring-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 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  //\n  // Under More contrast the word reads `--brand-muted`, the brand AS TEXT (0.36,\n  // colour-roles §13.3 decision 8): `--brand` is solved as a mark (3:1), and on More\n  // contrast's darker light well Moss's read 3.68:1; the derived dark brands sit at 3.0\n  // as text too. Both modes, since `contrast:` does not split them.\n  link:\n    \"rounded-sm p-0 bg-transparent text-brand underline-offset-4 hover:underline focus-visible:ring-brand contrast:text-brand-muted\",\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 `default` 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`, `accent` and `link`'s own colours are left alone: a tone that recoloured a\n * solid danger or accent button would be a second variant under another name.\n */\nexport type ButtonTone = \"default\" | \"muted\" | \"danger\";\n\n// `contrast:text-secondary` restates the tone's own colour under the `contrast:` variant,\n// so tailwind-merge drops the link's `contrast:text-brand-muted` (0.36): a quiet link\n// stays quiet under More contrast. On `ghost` it reads the same either way.\nconst BUTTON_TONES: Record<Exclude<ButtonTone, \"default\">, string> = {\n  muted:\n    \"text-secondary hover:text-primary disabled:hover:text-secondary contrast:text-secondary\",\n  danger:\n    \"text-secondary hover:text-danger focus-visible:ring-danger-strong disabled:hover:text-secondary contrast: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  // Not boxed, but its hover is a fill: the danger wash under the danger text, as\n  // IconButton's danger tone (0.33). On B′'s translucent ink `--danger` fell to 4.2:1\n  // over a light page.\n  ghost: \"hover:bg-danger-soft\",\n  secondary:\n    \"border-danger bg-transparent text-danger hover:bg-danger-soft focus-visible:ring-danger-strong\",\n  default:\n    \"border-danger bg-danger-soft text-danger hover:border-[var(--danger)] hover:bg-danger hover:text-danger-contrast focus-visible:ring-danger-strong disabled:hover:border-danger disabled:hover:bg-danger-soft disabled:hover:text-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. Under\n// More contrast the brand as text, `--brand-muted`, at rest and hovered (0.36, as the\n// `link` variant), whatever the tone.\nexport const BUTTON_LINK_PRESSED =\n  \"font-medium text-brand hover:text-brand disabled:hover:text-brand contrast:text-brand-muted contrast:hover:text-brand-muted contrast:disabled:hover:text-brand-muted\";\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 = \"default\",\n  classNameOrOptions?: string | ButtonClassesOptions,\n): string {\n  const { size = \"md\", className } =\n    typeof classNameOrOptions === \"object\" ? classNameOrOptions : { className: classNameOrOptions };\n  return cn(\n    BUTTON_BASE,\n    BUTTON_SIZES[size],\n    variant !== \"link\" && BUTTON_SIZES_LARGE[size],\n    buttonVariantClasses[variant],\n    className,\n  );\n}\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. On hover\n// the glyph turns brand-muted: `--brand` on `--brand-bg-hover` is 2.69–2.80 in four dark\n// presets, under an icon's 3:1 (colour-roles §12.12). Button's `pressed` draws it on its\n// boxed variants too, which is why it lives here and not in ./icon-button.\nexport const ICON_BUTTON_PRESSED =\n  \"bg-brand-soft text-brand hover:bg-brand-soft-hover hover:text-brand-muted disabled:hover:bg-brand-soft disabled:hover:text-brand\";\n\n/** @internal The button look shared by the `<button>` and the `<a>` form. */\nexport function buttonLook(variant: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone) {\n  return cn(\n    BUTTON_BASE,\n    BUTTON_SIZES[size],\n    // §4: `sm` at `md`'s height and the 48 px target at Large — not on a `link`. In the\n    // order `buttonClasses` has it, so the two strings stay identical.\n    variant !== \"link\" && BUTTON_SIZES_LARGE[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/** @internal Calls a `renderLink` / provider link as a function, as ListItem and Chip\n *  do — an inline `renderLink` arrow would otherwise be a new component type every\n *  render. Both buttons' link forms render through it. */\nexport function RenderedButtonLink({ render, ...props }: KitLinkProps & { render: KitLinkComponent }) {\n  return render(props);\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,wBAAwB;AAiDjC,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AACF;AASO,MAAM,qBAAqB;AAK3B,MAAM,iBACX;AAgBF,MAAM,eAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AACN;AACA,MAAM,qBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AACN;AAYO,MAAM,YAAY;AAQlB,MAAM,uBAAsD;AAAA,EACjE;AAAA;AAAA;AAAA,IAGE;AAAA;AAAA,EACF,WAAW,oDAAoD,SAAS;AAAA,EACxE,OAAO,+BAA+B,SAAS;AAAA,EAC/C,QACE;AAAA,EACF,QACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaF,MACE;AACJ;AAiCA,MAAM,eAA+D;AAAA,EACnE,OACE;AAAA,EACF,QACE;AACJ;AAGA,MAAM,iBAAiB,oBAAI,IAAmB,CAAC,QAAQ,OAAO,CAAC;AAK/D,MAAM,sBAA8D;AAAA;AAAA;AAAA;AAAA,EAIlE,OAAO;AAAA,EACP,WACE;AAAA,EACF,SACE;AACJ;AAOO,MAAM,sBACX;AAoBK,SAAS,cACd,UAAyB,WACzB,oBACQ;AACR,QAAM,EAAE,OAAO,MAAM,UAAU,IAC7B,OAAO,uBAAuB,WAAW,qBAAqB,EAAE,WAAW,mBAAmB;AAChG,SAAO;AAAA,IACL;AAAA,IACA,aAAa,IAAI;AAAA,IACjB,YAAY,UAAU,mBAAmB,IAAI;AAAA,IAC7C,qBAAqB,OAAO;AAAA,IAC5B;AAAA,EACF;AACF;AAQO,MAAM,sBACX;AAGK,SAAS,WAAW,SAAwB,MAAkB,SAA8B,MAAkB;AACnH,SAAO;AAAA,IACL;AAAA,IACA,aAAa,IAAI;AAAA;AAAA;AAAA,IAGjB,YAAY,UAAU,mBAAmB,IAAI;AAAA;AAAA;AAAA;AAAA,IAI7C,WAAW;AAAA,IACX,qBAAqB,OAAO;AAAA,IAC5B,SAAS,aAAa,eAAe,IAAI,OAAO,KAAK,aAAa,IAAI;AAAA,IACtE,SAAS,YAAY,oBAAoB,OAAO;AAAA,EAClD;AACF;AAKO,SAAS,mBAAmB,EAAE,QAAQ,GAAG,MAAM,GAAgD;AACpG,SAAO,OAAO,KAAK;AACrB;","names":[]}