@eifi1/ui-kit 0.53.0 → 0.55.0

package/dist/components/stat-tile.d.ts

@@ -186,8 +186,27 @@ export interface StatTileProps extends Omit<ComponentPropsWithRef<"div">, "child
     /** Anything below the rest — a progress bar, a link row. */
     footer?: ReactNode;
     /** Tag every figure `data-private`, so the host's demo-mode rule blurs it — the
-     *  same attribute `Tooltip redact` and the chart tooltip's value cell carry. */
+     *  same attribute `Tooltip redact` and the chart tooltip's value cell carry.
+     *  The figures are the tile's own: value, delta, projection, sub-values and the
+     *  trend. The `description` and `footer` are the app's nodes and stay readable;
+     *  see {@link StatTileProps.descriptionSensitive} for the ones that carry an amount. */
     sensitive?: boolean;
+    /**
+     * Tag the `description` line `data-private` too, as `sensitive` tags the figures.
+     * For a description that names an amount: keksdose's tax reserve tile states its
+     * basis there ("…applied to €42,000"), and its report KpiCard puts a `hintSensitive`
+     * hint there — both tag their own `<span data-private>` today
+     * (reports/tabs/tax-tab.tsx, reports/charts/kpi-card.tsx). Separate from
+     * `sensitive`, so a description of words ("Last 12 months") on a money tile stays
+     * readable in demo mode. keksdose audit follow-up, 2026-11-01.
+     */
+    descriptionSensitive?: boolean;
+    /**
+     * Tag the `footer` `data-private`, as `sensitive` tags the figures — for a footer
+     * that carries an amount: keksdose's tax reserve tile's shortfall line ("Set aside
+     * €1,200 more…"), which it tags by hand. keksdose audit follow-up, 2026-11-01.
+     */
+    footerSensitive?: boolean;
     /** Skeleton in place of the value; delta, sub-values and trend are withheld. */
     loading?: boolean;
     /** `"sm"` for dense grids (a metrics wall); `"md"` the default KPI. */
@@ -227,7 +246,7 @@ export interface StatTileProps extends Omit<ComponentPropsWithRef<"div">, "child
  * the hint sits above the overlay and stays its own tab stop. The link's name is the
  * label, and it is described by the value and the delta.
  */
-export declare function StatTile({ label, value, currency, compact, numberFormat, format, locale, unit, valueLabel, tone, delta, goodDirection, hint, truncateLabel, name, description, projection, subValues, trend, sparkline, icon, footer, sensitive, loading, size, variant, href, renderLink, onClick, labels, className, ...rest }: StatTileProps): import("react").JSX.Element;
+export declare function StatTile({ label, value, currency, compact, numberFormat, format, locale, unit, valueLabel, tone, delta, goodDirection, hint, truncateLabel, name, description, projection, subValues, trend, sparkline, icon, footer, sensitive, descriptionSensitive, footerSensitive, loading, size, variant, href, renderLink, onClick, labels, className, ...rest }: StatTileProps): import("react").JSX.Element;
 export interface StatTileGridProps extends ComponentPropsWithRef<"div"> {
     /** The narrowest a tile may get before the grid drops a column. The default fits
      *  two tiles on a 320px phone. */

package/dist/components/stat-tile.js

@@ -69,6 +69,8 @@ function StatTile({
   icon,
   footer,
   sensitive = false,
+  descriptionSensitive = false,
+  footerSensitive = false,
   loading = false,
   size = "md",
   variant = "card",
@@ -232,14 +234,14 @@ function StatTile({
         ) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: headline }),
         !large && !loading && projections.length > 0 && /* @__PURE__ */ jsx("dl", { className: "mt-0.5 space-y-0.5", children: projections.map((p, i) => /* @__PURE__ */ jsx(FigureRow, { figure: p, tileTone: tone, show, priv }, i)) }),
         deltaNode,
-        description != null && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-muted", children: description }),
+        description != null && /* @__PURE__ */ jsx("div", { "data-private": descriptionSensitive ? "" : void 0, className: "mt-1 text-xs text-muted", children: description }),
         !large && graphic && /* @__PURE__ */ jsx("div", { className: "mt-2", children: graphic }),
         !loading && (large && projections.length > 0 || subValues && subValues.length > 0) && /* @__PURE__ */ jsxs("dl", { "data-slot": "stat-tile-figures", className: cn("mt-1.5", large ? "space-y-1.5" : "space-y-0.5"), children: [
           large && projections.map((p, i) => /* @__PURE__ */ jsx(FigureRow, { figure: p, tileTone: tone, show, priv, stacked: true }, `projection-${i}`)),
           subValues?.map((sv, i) => /* @__PURE__ */ jsx(FigureRow, { figure: sv, tileTone: tone, show, priv, stacked: large }, i))
         ] }),
         large && graphic && /* @__PURE__ */ jsx("div", { "data-slot": "stat-tile-graphic", className: "mt-2", children: graphic }),
-        footer != null && /* @__PURE__ */ jsx("div", { className: "mt-2", children: footer })
+        footer != null && /* @__PURE__ */ jsx("div", { "data-private": footerSensitive ? "" : void 0, className: "mt-2", children: footer })
       ]
     }
   );

package/dist/components/stat-tile.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/stat-tile.tsx"],"sourcesContent":["import { createContext, useContext, useId, useLayoutEffect, useState } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactElement, ReactNode } from \"react\";\nimport { ArrowDown, ArrowUp, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\n// The sparkline's name: the label's text (lib since 0.36, which a field's `help` \"?\" shares).\nimport { plainText } from \"../lib/plain-text\";\nimport { useKitLabels, useKitLink, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\nimport { Card } from \"./card\";\nimport { FieldHint } from \"./field-parts\";\nimport { useInlineFacts, useLargeText } from \"../hooks/use-large-text\";\nimport { Sparkline } from \"./sparkline\";\nimport { Tooltip } from \"./tooltip\";\n// The kit's one placeholder look, so a loading tile and the Skeleton list beside it\n// shimmer as one surface — and both stop under `prefers-reduced-motion`, which this\n// tile's private copy of the string did not.\nimport { SKELETON_CLASS } from \"./skeleton\";\nimport { DEFAULT_STAT_TILE_LABELS } from \"./stat-tile-labels\";\nimport { formatWithMinus } from \"../lib/minus\";\n\n/**\n * The words a stat tile speaks. The delta's arrow is an icon, and an icon is not a\n * sentence: a screen reader gets the direction (and, under `goodDirection`, the\n * verdict) as words, and a sighted reader who cannot tell the two delta colours apart\n * still has the arrow — neither judgement rides on colour alone.\n */\nexport interface StatTileLabels {\n  /** The delta, rising. `amount` is already formatted and unsigned. */\n  increase: (amount: string) => string;\n  decrease: (amount: string) => string;\n  unchanged: string;\n  /** Wraps the direction sentence when `goodDirection` says the change is good. */\n  better: (change: string) => string;\n  worse: (change: string) => string;\n  /** Spoken in place of a missing value (the tile shows a dash). */\n  noValue: string;\n  /** Spoken while `loading`. */\n  loading: string;\n}\n\n// Defined in ./stat-tile-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_STAT_TILE_LABELS };\n\n/**\n * What colours a figure. Token-backed like everything else in the kit.\n *\n *  - `income` / `expense` / `net` — the money trio (teal / amber / violet, CVD-safe).\n *  - `signed` — a money figure read by its own sign: above zero `income`, below zero\n *    `expense`, exactly zero neutral (a zero balance is neither news). Needs a NUMBER\n *    value; a pre-formatted string cannot be read and stays neutral.\n *  - `success` / `warning` / `danger` / `info` — a threshold verdict (\"phase margin\n *    below 30°\"). Say it in the hint or description as well; colour alone is not one.\n */\nexport type StatTileTone =\n  \"neutral\" | \"brand\" | \"income\" | \"expense\" | \"net\" | \"signed\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nconst TONE_CLASS: Record<Exclude<StatTileTone, \"signed\">, string> = {\n  neutral: \"text-primary\",\n  brand: \"text-brand\",\n  income: \"text-money-income\",\n  expense: \"text-money-expense\",\n  net: \"text-money-net\",\n  success: \"text-success\",\n  warning: \"text-warning\",\n  danger: \"text-danger\",\n  info: \"text-info\",\n};\n\nfunction toneClass(tone: StatTileTone, value: unknown): string {\n  if (tone !== \"signed\") return TONE_CLASS[tone];\n  if (typeof value !== \"number\" || value === 0) return TONE_CLASS.neutral;\n  return value < 0 ? TONE_CLASS.expense : TONE_CLASS.income;\n}\n\n/** A change since the previous period. A bare number is shorthand for `{ value }`. */\nexport interface StatTileDelta {\n  /** Signed: above zero is \"up\". */\n  value: number;\n  /** `\"value\"` (default) formats it like the headline — same currency, same\n   *  notation. `\"percent\"` reads it as a RATIO: `0.12` is shown as 12 %. */\n  unit?: \"value\" | \"percent\";\n  /** What it is measured against, shown after it: \"vs last month\". */\n  label?: ReactNode;\n}\n\n/** A smaller figure under the headline — a prior period, a projection, a split. */\nexport interface StatTileSubValue {\n  label: ReactNode;\n  /** A number is formatted like the headline; anything else is rendered as given. */\n  value: ReactNode;\n  /** Defaults to the tile's own `tone`, read per figure (so a `signed` tile shows a\n   *  teal September above an amber August). Sub-values are always the muted weight\n   *  of their tone: they are history, and must not outshout the figure above them.\n   *\n   *  `\"none\"` leaves the figure untinted — the row's own muted text, like its label —\n   *  even on a toned tile: keksdose's report KpiCard (reports/charts/kpi-card.tsx),\n   *  whose `negative` convention tints only a figure below zero and leaves the rest\n   *  plain. (`\"neutral\"` is not that: it is the headline's full text colour, at the\n   *  sub-value's 75 %.) */\n  tone?: StatTileTone | \"none\";\n}\n\n/** What {@link StatTileProps.renderLink} is handed. Spread it onto your router's\n *  link: the class is what stretches the link over the whole tile. */\nexport interface StatTileLinkProps {\n  href: string;\n  className: string;\n  \"aria-describedby\": string;\n  children: ReactNode;\n}\n\n/**\n * A `div`'s props, `ref` included since 0.35 (round 0.35 R4, the follow-up to API-2): they\n * ride on to the {@link Card} that is the tile, so the ref is the tile's own `<div>` — the\n * one to scroll into view or measure. `ComponentPropsWithoutRef` only kept it out of the\n * type; at runtime `{...rest}` already carried it there.\n */\nexport interface StatTileProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"onClick\"> {\n  /** What is measured. Also the tile's accessible name when it is a link/button. */\n  label: ReactNode;\n  /**\n   * The headline. A number is formatted with `Intl.NumberFormat` in the kit's locale\n   * (see `currency`, `compact`, `numberFormat`, `format`); a string or element is\n   * rendered as given. `null`/`undefined` shows a dash and says \"No data\".\n   */\n  value?: ReactNode;\n  /** ISO 4217 code — formats a number value (and a `\"value\"` delta, and numeric\n   *  sub-values) as money. */\n  currency?: string;\n  /** Compact notation: 12 400 → \"12K\". */\n  compact?: boolean;\n  /** Any further `Intl.NumberFormat` options, merged over the two above. */\n  numberFormat?: Intl.NumberFormatOptions;\n  /** Formats every NUMBER the tile shows, replacing the `Intl` default outright. */\n  format?: (value: number) => string;\n  locale?: string;\n  /** A short unit after the value that `Intl` has no name for: \"ms\", \"dB\", \"Hz\". */\n  unit?: ReactNode;\n  /** The period the headline belongs to, shown to its left (\"SEP\"). */\n  valueLabel?: ReactNode;\n  tone?: StatTileTone;\n  delta?: number | StatTileDelta;\n  /** Which way is good news. Unset, the delta is stated and not judged (users up and\n   *  cost up are the same arrow); set, it is coloured and its sentence says so. */\n  goodDirection?: \"up\" | \"down\";\n  /** The explanation behind a \"?\" beside the label (a {@link FieldHint}) — hidden\n   *  until asked for, so it is for what a reader MIGHT want to know (\"excludes\n   *  transfers between your own accounts\"). For a line everyone should read, use\n   *  {@link StatTileProps.description} instead.\n   *\n   *  0.32 (docs/text-size-harmonization.md §4 \"No fact only in a tooltip\"): at Large\n   *  and Extra large, and on a touch screen, the words are shown under the label\n   *  instead of behind the \"?\". */\n  hint?: string;\n  /**\n   * Keep the label to ONE line, cut with an ellipsis, and show the whole of it in a\n   * {@link Tooltip} on hover and focus — but only while it is actually cut, so a\n   * label that fits shows no bubble repeating itself. keksdose's admin MetricTile\n   * wall: twenty tiles whose German labels (\"Aktive Abonnements (30 Tage)\") wrapped\n   * onto two or three lines and pushed each tile's figure to a different height.\n   *\n   * The label element keeps the FULL text — the ellipsis is paint — so it is still\n   * the tile's accessible name (and the stretched link's, on a link tile) exactly as\n   * without this. Off by default: a wrapping label is what every existing tile does,\n   * and a tile standing alone has room to.\n   *\n   * This is the tooltip: pass the label as a plain STRING rather than wrapping it in\n   * your own `<Tooltip>` for the full text (keksdose's admin metrics-panel.tsx:134\n   * does, from before this prop). A wrapped label shows a bubble even when nothing is\n   * cut, and nests its trigger inside this one's.\n   *\n   * Ignored at Large and Extra large (0.32, §4): nothing truncates there, and the full\n   * label would otherwise be a fact only in a tooltip.\n   */\n  truncateLabel?: boolean;\n  /**\n   * The tile's name as plain text, for the places that need a string rather than a\n   * node — today the {@link StatTileProps.trend} sparkline's accessible name. Only\n   * needed when `label` is not a string AND its text cannot be read from it: a label\n   * element's text children are found on their own (a `<Tooltip label=\"…\">Spend\n   * </Tooltip>` label still names its sparkline \"Spend\"), an icon or a formatted\n   * message component's are not.\n   */\n  name?: string;\n  /** A visible line under the value: \"Last 12 months\", \"3 estates / 9 buildings\" —\n   *  always shown, so it is for what every reader needs. An explanation only some\n   *  will want belongs in {@link StatTileProps.hint}, the \"?\" beside the label. */\n  description?: ReactNode;\n  /**\n   * One figure that belongs WITH the headline rather than under it: keksdose's\n   * \"Projected €1,850\" under a to-date \"€420\" (KpiCard, feedback #51), which it\n   * currently smuggles into `description` with hand-set margins so the prior-month\n   * sub-values do not come between the two. It is drawn directly under the value\n   * (before the delta, the description and the sparkline) as a sub-value row, with\n   * only a hair of space above it.\n   *\n   * A slot of its own rather than a placement switch for `subValues`: the history\n   * rows (last month, last year) should stay at the bottom where they are, and moving\n   * the whole list up to bring one row with it would put them between the headline\n   * and its delta. Same shape as a sub-value, so the `tone` rules are the same.\n   * Withheld while `loading`, like the sub-values.\n   *\n   * 0.51: or several, in order (keksdose #633). Its figure tiles carry two forward rows,\n   * \"Committed <date>\" (today plus what is scheduled) and \"Projected <date>\" (that plus the\n   * usual variable money), both of which belong with the headline and neither with the\n   * history below. The tile draws what it is given; which rows to give is the app's rule\n   * (keksdose shows both on every tile, live #455, even where Committed equals the figure\n   * so far).\n   */\n  projection?: StatTileSubValue | readonly StatTileSubValue[];\n  /**\n   * Smaller figures under the headline, label left and figure right.\n   *\n   * At Large and Extra large (0.32, §4 \"StatTile shows its one big number; the sparkline\n   * and sub-values move below\"): the tile leads with the headline and its delta, and the\n   * projection, these rows and the sparkline follow beneath the description, each row's\n   * label over its figure — a 2-up tile at 150 % is 120 px of text wide, and a label\n   * beside a figure there squeezed both.\n   */\n  subValues?: StatTileSubValue[];\n  /** Shorthand for a fluid {@link Sparkline} named after the tile and speaking in\n   *  the tile's number format. The name is the label's text; see\n   *  {@link StatTileProps.name} for a label that has none. */\n  trend?: ReadonlyArray<number | null | undefined>;\n  /** A custom sparkline (or any small graphic) in the same place. Wins over `trend`. */\n  sparkline?: ReactNode;\n  /** A decorative icon at the top end of the tile. */\n  icon?: ReactNode;\n  /** Anything below the rest — a progress bar, a link row. */\n  footer?: ReactNode;\n  /** Tag every figure `data-private`, so the host's demo-mode rule blurs it — the\n   *  same attribute `Tooltip redact` and the chart tooltip's value cell carry. */\n  sensitive?: boolean;\n  /** Skeleton in place of the value; delta, sub-values and trend are withheld. */\n  loading?: boolean;\n  /** `\"sm\"` for dense grids (a metrics wall); `\"md\"` the default KPI. */\n  size?: \"sm\" | \"md\";\n  /**\n   * The tile's frame. `\"card\"` (default) is the bordered, shadowed card on the page.\n   * `\"inset\"` is a tile INSIDE a card: {@link Card}'s `inset` — the raised\n   * `--bg-surface-2`, a small radius, no border or shadow, since the card round it\n   * already has them. `\"plain\"` drops the frame altogether — no fill and no padding —\n   * for figures set straight into a card's content (a summary row under a card title),\n   * where any box would be a box in a box. keksdose wrote both by hand over the card\n   * tile (`border-0 shadow-none bg-transparent p-0`) for its tiles inside a card.\n   */\n  variant?: \"card\" | \"inset\" | \"plain\";\n  /** Makes the tile a link. See {@link renderLink} for a router. */\n  href?: string;\n  /** Renders the link for `href` — pass your router's `<Link>` here, since a plain\n   *  `<a>` reloads a single-page app. Default: the `<UiKitProvider linkComponent>`\n   *  (for an in-app `href`), then `<a>`. */\n  renderLink?: (props: StatTileLinkProps) => ReactElement;\n  /** Makes the tile a button (ignored when `href` is given). */\n  onClick?: () => void;\n  labels?: LabelOverride<StatTileLabels>;\n}\n\n// One formatter per option set: a metrics wall is twenty of these.\nconst formatters = new Map<string, Intl.NumberFormat>();\nfunction numberFormatter(locale: string | undefined, options: Intl.NumberFormatOptions): Intl.NumberFormat {\n  const key = `${locale ?? \"\"}|${JSON.stringify(options)}`;\n  let f = formatters.get(key);\n  if (!f) {\n    f = new Intl.NumberFormat(locale, options);\n    formatters.set(key, f);\n  }\n  return f;\n}\n\n// The headline sizes are keyed on the TILE's width (it is a @container), not the\n// viewport: a grid beside a sidebar makes tiles narrowest exactly where a viewport\n// breakpoint would hand them the larger font. `sm` is keksdose's compact headline,\n// sized so a worst-case \"CHF 123,456.78\" still fits a 320px phone's 2-up tiles.\nconst VALUE_TEXT = {\n  md: \"text-xl @[13rem]:text-2xl\",\n  sm: \"text-xs @[8.5rem]:text-sm @[13rem]:text-base\",\n} as const;\nconst PADDING = { md: \"p-3 sm:p-4\", sm: \"px-2.5 py-2\" } as const;\n\n/**\n * The KPI card: a label, one number, and optionally how it moved, what it is made of\n * and which way it has been going.\n *\n * Replaces keksdose's `KpiCard` and admin `Tile`, lenkbank's metrics tiles and\n * kastlan's `KpiCard` — the same card four times, with four answers to the same\n * questions (how a currency is formatted, whether a delta is judged, what happens to\n * the figures in demo mode).\n *\n * Interactive tiles use a STRETCHED link: the label is the `<a>`/`<button>`, and its\n * `::after` covers the card. Making the card itself the link would nest the hint's\n * `<button>` inside it, which is invalid HTML and an unreachable control; this way\n * the hint sits above the overlay and stays its own tab stop. The link's name is the\n * label, and it is described by the value and the delta.\n */\nexport function StatTile({\n  label,\n  value,\n  currency,\n  compact = false,\n  numberFormat,\n  format,\n  locale,\n  unit,\n  valueLabel,\n  tone = \"neutral\",\n  delta,\n  goodDirection,\n  hint,\n  truncateLabel = false,\n  name,\n  description,\n  projection,\n  subValues,\n  trend,\n  sparkline,\n  icon,\n  footer,\n  sensitive = false,\n  loading = false,\n  size = \"md\",\n  variant = \"card\",\n  href,\n  renderLink,\n  onClick,\n  labels,\n  className,\n  ...rest\n}: StatTileProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  // §4: at Large the one big number leads and the rest follows below it; the label\n  // never truncates; on touch or at Large the hint is words, not a \"?\".\n  const large = useLargeText();\n  const inlineHint = useInlineFacts() && !!hint;\n  if (large) truncateLabel = false;\n  // A loading StatTileGrid puts every tile in it into the loading state and says\n  // \"Loading…\" ONCE for all of them; the tile then keeps its own sentence to itself\n  // (see StatTileGrid's `loading`).\n  const gridLoading = useContext(StatTileGridLoadingContext);\n  loading = loading || gridLoading;\n  const kitLink = useKitLink();\n  const [labelEl, setLabelEl] = useState<HTMLElement | null>(null);\n  const labelCut = useIsTruncated(truncateLabel ? labelEl : null);\n  const kitLocale = useKitLocale(locale);\n  const id = useId();\n  const valueId = `${id}-value`;\n  const deltaId = `${id}-delta`;\n  const priv = sensitive ? \"\" : undefined;\n  // One projection or several (0.51), as a list either way.\n  const projections: readonly StatTileSubValue[] =\n    projection === undefined ? [] : isFigureList(projection) ? projection : [projection];\n\n  const fmt =\n    format ??\n    ((n: number) =>\n      // U+2212 for a negative headline (0.49, KIT-1).\n      formatWithMinus(\n        numberFormatter(kitLocale, {\n          ...(currency ? { style: \"currency\", currency } : null),\n          ...(compact ? { notation: \"compact\" } : null),\n          ...numberFormat,\n        }),\n        n,\n      ));\n  const show = (v: ReactNode) => (typeof v === \"number\" ? fmt(v) : v);\n\n  const d = typeof delta === \"number\" ? { value: delta } : delta;\n  const hasValue = value !== null && value !== undefined && value !== \"\";\n  const labelText = name ?? plainText(label);\n\n  // ── The label, which is also the link/button when the tile is interactive ──\n  const stretched = cn(\n    \"text-start uppercase tracking-wide\",\n    \"after:absolute after:inset-0 after:rounded-lg after:content-['']\",\n    // The kit's focus frame (0.32, §5), on the overlay — `FOCUS_RING`'s classes cannot\n    // carry the `after:`, so its width is spelt out.\n    \"focus-visible:outline-none focus-visible:after:ring-focus focus-visible:after:ring-inset focus-visible:after:ring-brand\",\n  );\n  const describedBy = d ? `${valueId} ${deltaId}` : valueId;\n  let labelNode: ReactNode = label;\n  if (href !== undefined) {\n    const linkProps: StatTileLinkProps = {\n      href,\n      className: stretched,\n      \"aria-describedby\": describedBy,\n      children: label,\n    };\n    const kit = pickLinkRenderer<StatTileLinkProps>(undefined, kitLink, href);\n    labelNode = renderLink ? (\n      renderLink(linkProps)\n    ) : kit ? (\n      <RenderedKitLink render={kit} props={linkProps} />\n    ) : (\n      <a href={href} className={stretched} aria-describedby={describedBy}>\n        {label}\n      </a>\n    );\n  } else if (onClick) {\n    labelNode = (\n      <button type=\"button\" onClick={onClick} aria-describedby={describedBy} className={stretched}>\n        {label}\n      </button>\n    );\n  }\n  const interactive = href !== undefined || onClick !== undefined;\n\n  // ── Delta ──\n  let deltaNode: ReactNode = null;\n  if (d && !loading && Number.isFinite(d.value)) {\n    const magnitude = Math.abs(d.value);\n    const amount =\n      d.unit === \"percent\"\n        ? numberFormatter(kitLocale, { style: \"percent\", maximumFractionDigits: 1 }).format(magnitude)\n        : fmt(magnitude);\n    const dir = d.value > 0 ? \"up\" : d.value < 0 ? \"down\" : \"flat\";\n    const Icon = dir === \"up\" ? ArrowUp : dir === \"down\" ? ArrowDown : Minus;\n    let spoken = dir === \"up\" ? text.increase(amount) : dir === \"down\" ? text.decrease(amount) : text.unchanged;\n    let deltaTone = \"text-muted\";\n    if (goodDirection && dir !== \"flat\") {\n      const good = dir === goodDirection;\n      spoken = good ? text.better(spoken) : text.worse(spoken);\n      deltaTone = good ? \"text-success\" : \"text-danger\";\n    }\n    deltaNode = (\n      // `relative`: the containing block for the sr-only sentence (see the\n      // sr-only-containment test for what an escaped one does to the page).\n      <div className=\"relative mt-1 flex flex-wrap items-center gap-x-1.5 text-xs tabular-nums\">\n        <span\n          id={deltaId}\n          data-private={priv}\n          className={cn(\"inline-flex items-center gap-0.5 font-medium\", deltaTone)}\n        >\n          <Icon className=\"size-3 shrink-0\" aria-hidden />\n          {/* The figure at zero too, like Delta (kastlan 48): \"0 %\" says the change was\n              measured; a bare dash reads like a missing value. */}\n          <span aria-hidden>{amount}</span>\n          <span className=\"sr-only\">{spoken}</span>\n        </span>\n        {d.label != null && <span className=\"text-muted\">{d.label}</span>}\n      </div>\n    );\n  }\n\n  // ── Headline ──\n  const valueClass = cn(\"whitespace-nowrap font-semibold tabular-nums\", VALUE_TEXT[size], toneClass(tone, value));\n  const headline = loading ? (\n    <span id={valueId} className=\"relative block py-0.5\">\n      <span aria-hidden className={cn(SKELETON_CLASS, \"block h-6 w-24 max-w-full\")} />\n      {!gridLoading && <span className=\"sr-only\">{text.loading}</span>}\n    </span>\n  ) : hasValue ? (\n    <span id={valueId} data-private={priv} className={cn(valueClass, valueLabel != null && !large && \"ms-auto\")}>\n      {show(value)}\n      {unit != null && <span className=\"ms-1 text-[0.7em] font-medium text-muted\">{unit}</span>}\n    </span>\n  ) : (\n    <span id={valueId} className={cn(\"relative\", valueClass, \"text-muted\")}>\n      <span aria-hidden>—</span>\n      <span className=\"sr-only\">{text.noValue}</span>\n    </span>\n  );\n\n  const graphic = loading\n    ? null\n    : (sparkline ??\n      (trend && (\n        <Sparkline\n          data={trend}\n          fluid\n          height={size === \"sm\" ? 20 : 28}\n          label={labelText}\n          formatValue={fmt}\n          locale={kitLocale}\n          tone={tone === \"signed\" ? \"signed\" : tone === \"neutral\" ? \"chart\" : tone}\n          data-private={priv}\n        />\n      )));\n\n  return (\n    <Card\n      {...rest}\n      variant={variant === \"card\" ? \"default\" : \"inset\"}\n      data-variant={variant === \"card\" ? undefined : variant}\n      aria-busy={loading || undefined}\n      className={cn(\n        // @container: the headline sizes read the tile's width. relative: the stretched\n        // link's overlay. overflow-hidden: at pathological widths a figure clips inside\n        // the border instead of painting over the neighbouring tile.\n        \"@container relative flex min-w-0 flex-col overflow-hidden\",\n        // `plain` is the inset card with its fill and padding taken away — the figures\n        // align with the content edge of the card they sit in. (Not `p-0` over the\n        // padding: the padding's `sm:p-4` would still win from `sm` up.)\n        variant === \"plain\" ? \"rounded-none bg-transparent p-0\" : PADDING[size],\n        interactive && \"transition-colors hover:border-strong hover:bg-hover\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start gap-2\">\n        <div className=\"flex min-w-0 flex-1 items-center gap-1 break-words text-xs uppercase tracking-wide text-muted\">\n          {truncateLabel && labelCut ? (\n            // Portalled: the tile is `overflow-hidden`, and a bubble inside it would be\n            // clipped by the very box whose edge cut the label.\n            <Tooltip label={label} side=\"top\" portal className=\"flex min-w-0\">\n              <span ref={setLabelEl} className=\"block min-w-0 truncate\">\n                {labelNode}\n              </span>\n            </Tooltip>\n          ) : (\n            <span ref={setLabelEl} className={cn(\"min-w-0\", truncateLabel && \"block truncate\")}>\n              {labelNode}\n            </span>\n          )}\n          {/* Above the stretched link's overlay, so it stays hoverable and focusable. */}\n          {hint && !inlineHint && <FieldHint label={hint} side=\"top\" className=\"relative z-10 shrink-0\" />}\n        </div>\n        {icon != null && (\n          <span aria-hidden className=\"shrink-0 text-muted [&_svg]:size-4\">\n            {icon}\n          </span>\n        )}\n      </div>\n\n      {inlineHint && (\n        // §4: the hint as words under the label — the same muted type as `description`,\n        // in the reading case of a sentence rather than the label's capitals.\n        <p data-slot=\"stat-tile-hint\" className=\"mt-0.5 text-xs text-muted\">\n          {hint}\n        </p>\n      )}\n\n      {valueLabel != null ? (\n        // Period-left / value-right, matching the sub-rows below it. flex-wrap lets a\n        // too-long amount drop to its own end-aligned line instead of overflowing. At\n        // Large the period goes over the figure, which then has the tile's width.\n        <div className={cn(\"mt-1 flex items-baseline gap-x-1.5\", large ? \"flex-col items-start\" : \"flex-wrap\")}>\n          <span className=\"shrink-0 text-xs uppercase tracking-wide text-muted\">{valueLabel}</span>\n          {headline}\n        </div>\n      ) : (\n        <div className=\"mt-1\">{headline}</div>\n      )}\n\n      {/* At Large the delta and description follow the figure at once, and the\n          projection moves down with the other figures (see `subValues`). */}\n      {!large && !loading && projections.length > 0 && (\n        <dl className=\"mt-0.5 space-y-0.5\">\n          {projections.map((p, i) => (\n            <FigureRow key={i} figure={p} tileTone={tone} show={show} priv={priv} />\n          ))}\n        </dl>\n      )}\n\n      {deltaNode}\n      {description != null && <div className=\"mt-1 text-xs text-muted\">{description}</div>}\n      {!large && graphic && <div className=\"mt-2\">{graphic}</div>}\n\n      {!loading && ((large && projections.length > 0) || (subValues && subValues.length > 0)) && (\n        <dl data-slot=\"stat-tile-figures\" className={cn(\"mt-1.5\", large ? \"space-y-1.5\" : \"space-y-0.5\")}>\n          {large &&\n            projections.map((p, i) => (\n              <FigureRow key={`projection-${i}`} figure={p} tileTone={tone} show={show} priv={priv} stacked />\n            ))}\n          {subValues?.map((sv, i) => (\n            <FigureRow key={i} figure={sv} tileTone={tone} show={show} priv={priv} stacked={large} />\n          ))}\n        </dl>\n      )}\n\n      {large && graphic && (\n        <div data-slot=\"stat-tile-graphic\" className=\"mt-2\">\n          {graphic}\n        </div>\n      )}\n\n      {footer != null && <div className=\"mt-2\">{footer}</div>}\n    </Card>\n  );\n}\n\n/** `Array.isArray` narrows a readonly array to `any[]`; this keeps the element type. */\nfunction isFigureList(p: StatTileSubValue | readonly StatTileSubValue[]): p is readonly StatTileSubValue[] {\n  return Array.isArray(p);\n}\n\n/** One label/value row of a `<dl>`: a sub-value, or a projection. */\nfunction FigureRow({\n  figure,\n  tileTone,\n  show,\n  priv,\n  stacked = false,\n}: {\n  figure: StatTileSubValue;\n  tileTone: StatTileTone;\n  show: (v: ReactNode) => ReactNode;\n  priv: \"\" | undefined;\n  /** The label over the figure (Large, §4) instead of beside it. */\n  stacked?: boolean;\n}) {\n  const own = figure.tone ?? (tileTone === \"neutral\" ? undefined : tileTone);\n  const svTone = own === \"none\" ? undefined : own;\n  // The LABEL gives way, never the figure. This row used to wrap, so on a narrow tile a\n  // long label (\"AUG (SIGNED)\") dropped its amount onto a line of its own while the\n  // next row stayed on one — two layouts in one list, and a figure no longer beside\n  // the period it belongs to. Now the label breaks within itself and the amount stays\n  // on the label's first line, end-aligned like every other row.\n  //\n  // 0.49: between WORDS only. `overflow-wrap:anywhere` (with `min-w-0`) cut a single\n  // word at any letter — \"PROJECT|ED\" in a 160px KPI tile at 360px. The label now keeps\n  // a flex item's own floor, its longest word; only a word that cannot share the line\n  // with the figure sends the figure to the next line, still end-aligned. `break-word`\n  // is the last resort for a word wider than the whole tile, and does not lower that\n  // floor the way `anywhere` did.\n  return (\n    <div\n      className={cn(\n        \"flex text-xs tabular-nums text-muted\",\n        stacked ? \"flex-col items-start\" : \"flex-wrap items-baseline gap-x-2\",\n      )}\n    >\n      <dt className=\"max-w-full uppercase tracking-wide [overflow-wrap:break-word]\">{figure.label}</dt>\n      <dd\n        data-private={priv}\n        className={cn(\n          \"shrink-0 whitespace-nowrap\",\n          !stacked && \"ms-auto\",\n          svTone && [toneClass(svTone, figure.value), \"opacity-75\"],\n        )}\n      >\n        {show(figure.value)}\n      </dd>\n    </div>\n  );\n}\n\n/**\n * Whether `el`'s text is wider than its box — i.e. whether `truncate` is cutting it.\n * Re-measured whenever the box resizes (a grid reflowing, a translation loading), not\n * only on mount. Keyed on the ELEMENT (a callback ref), because wrapping the label in\n * its tooltip remounts it, and an observer on the old node would watch nothing.\n */\nfunction useIsTruncated(el: HTMLElement | null): boolean {\n  const [cut, setCut] = useState(false);\n  useLayoutEffect(() => {\n    // No reset while there is no node: between the unwrapped label unmounting and the\n    // wrapped one mounting there is none, and a reset there would unwrap it again.\n    if (!el) return;\n    const measure = () => setCut(el.scrollWidth > el.clientWidth);\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [el]);\n  return cut;\n}\n\nexport interface StatTileGridProps extends ComponentPropsWithRef<\"div\"> {\n  /** The narrowest a tile may get before the grid drops a column. The default fits\n   *  two tiles on a 320px phone. */\n  minTileWidth?: string;\n  /**\n   * Let a row that is not full stretch its tiles across the whole width. Default\n   * `true` (CSS `auto-fit`): one or two tiles fill the row, as they always have.\n   * `false` (`auto-fill`): the empty columns are kept, so every tile is the width of\n   * a column whatever the count — a lone \"Balance\" tile in a card stays tile-sized\n   * instead of becoming a banner the width of the card, and the tiles of a short row\n   * line up with the columns of a full one above it.\n   */\n  stretch?: boolean;\n  /**\n   * Every tile in the grid is loading: each shows its skeleton (as with its own\n   * `loading`), and the grid says \"Loading…\" ONCE, in a polite status region, instead\n   * of each tile carrying its own sr-only \"Loading…\" — a wall of eight tiles was read\n   * as eight \"Loading…\"s in a row. The grid is `aria-busy` meanwhile. A tile's own\n   * `loading` inside a grid that is not loading still speaks for itself.\n   */\n  loading?: boolean;\n  /** The grid's one sentence — `loading` from {@link StatTileLabels}. */\n  labels?: LabelOverride<Pick<StatTileLabels, \"loading\">>;\n}\n\n/** Set by a loading {@link StatTileGrid}; read by each tile in it. */\nconst StatTileGridLoadingContext = createContext(false);\n\n/**\n * The row of tiles every dashboard in the three apps lays out by hand, each with its\n * own breakpoint ladder (`grid-cols-2 md:grid-cols-4 min-[2400px]:grid-cols-8` …).\n * Those ladders read the VIEWPORT and so ignored the sidebar: 6-up tiles at 155px in\n * the band where the sidebar was open. This fits as many columns as `minTileWidth`\n * allows in the space the grid actually has, and needs no breakpoint at all.\n */\nexport function StatTileGrid({\n  minTileWidth = \"9rem\",\n  stretch = true,\n  loading = false,\n  labels,\n  className,\n  style,\n  children,\n  ...rest\n}: StatTileGridProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  const columns: CSSProperties = {\n    gridTemplateColumns: `repeat(${stretch ? \"auto-fit\" : \"auto-fill\"}, minmax(min(100%, ${minTileWidth}), 1fr))`,\n  };\n  return (\n    <div\n      {...rest}\n      aria-busy={loading || rest[\"aria-busy\"] || undefined}\n      // `relative`: the containing block for the sr-only status, which is absolutely\n      // positioned and so also takes no grid cell.\n      className={cn(\"relative grid gap-3\", className)}\n      style={{ ...columns, ...style }}\n    >\n      {/* Always mounted, filled while loading: a live region announces a CHANGE of\n          its content, so one that appeared already holding the sentence might say\n          nothing. */}\n      <span role=\"status\" className=\"sr-only\">\n        {loading ? text.loading : \"\"}\n      </span>\n      <StatTileGridLoadingContext.Provider value={loading}>{children}</StatTileGridLoadingContext.Provider>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/stat-tile.tsx"],"sourcesContent":["import { createContext, useContext, useId, useLayoutEffect, useState } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactElement, ReactNode } from \"react\";\nimport { ArrowDown, ArrowUp, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\n// The sparkline's name: the label's text (lib since 0.36, which a field's `help` \"?\" shares).\nimport { plainText } from \"../lib/plain-text\";\nimport { useKitLabels, useKitLink, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\nimport { Card } from \"./card\";\nimport { FieldHint } from \"./field-parts\";\nimport { useInlineFacts, useLargeText } from \"../hooks/use-large-text\";\nimport { Sparkline } from \"./sparkline\";\nimport { Tooltip } from \"./tooltip\";\n// The kit's one placeholder look, so a loading tile and the Skeleton list beside it\n// shimmer as one surface — and both stop under `prefers-reduced-motion`, which this\n// tile's private copy of the string did not.\nimport { SKELETON_CLASS } from \"./skeleton\";\nimport { DEFAULT_STAT_TILE_LABELS } from \"./stat-tile-labels\";\nimport { formatWithMinus } from \"../lib/minus\";\n\n/**\n * The words a stat tile speaks. The delta's arrow is an icon, and an icon is not a\n * sentence: a screen reader gets the direction (and, under `goodDirection`, the\n * verdict) as words, and a sighted reader who cannot tell the two delta colours apart\n * still has the arrow — neither judgement rides on colour alone.\n */\nexport interface StatTileLabels {\n  /** The delta, rising. `amount` is already formatted and unsigned. */\n  increase: (amount: string) => string;\n  decrease: (amount: string) => string;\n  unchanged: string;\n  /** Wraps the direction sentence when `goodDirection` says the change is good. */\n  better: (change: string) => string;\n  worse: (change: string) => string;\n  /** Spoken in place of a missing value (the tile shows a dash). */\n  noValue: string;\n  /** Spoken while `loading`. */\n  loading: string;\n}\n\n// Defined in ./stat-tile-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_STAT_TILE_LABELS };\n\n/**\n * What colours a figure. Token-backed like everything else in the kit.\n *\n *  - `income` / `expense` / `net` — the money trio (teal / amber / violet, CVD-safe).\n *  - `signed` — a money figure read by its own sign: above zero `income`, below zero\n *    `expense`, exactly zero neutral (a zero balance is neither news). Needs a NUMBER\n *    value; a pre-formatted string cannot be read and stays neutral.\n *  - `success` / `warning` / `danger` / `info` — a threshold verdict (\"phase margin\n *    below 30°\"). Say it in the hint or description as well; colour alone is not one.\n */\nexport type StatTileTone =\n  \"neutral\" | \"brand\" | \"income\" | \"expense\" | \"net\" | \"signed\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nconst TONE_CLASS: Record<Exclude<StatTileTone, \"signed\">, string> = {\n  neutral: \"text-primary\",\n  brand: \"text-brand\",\n  income: \"text-money-income\",\n  expense: \"text-money-expense\",\n  net: \"text-money-net\",\n  success: \"text-success\",\n  warning: \"text-warning\",\n  danger: \"text-danger\",\n  info: \"text-info\",\n};\n\nfunction toneClass(tone: StatTileTone, value: unknown): string {\n  if (tone !== \"signed\") return TONE_CLASS[tone];\n  if (typeof value !== \"number\" || value === 0) return TONE_CLASS.neutral;\n  return value < 0 ? TONE_CLASS.expense : TONE_CLASS.income;\n}\n\n/** A change since the previous period. A bare number is shorthand for `{ value }`. */\nexport interface StatTileDelta {\n  /** Signed: above zero is \"up\". */\n  value: number;\n  /** `\"value\"` (default) formats it like the headline — same currency, same\n   *  notation. `\"percent\"` reads it as a RATIO: `0.12` is shown as 12 %. */\n  unit?: \"value\" | \"percent\";\n  /** What it is measured against, shown after it: \"vs last month\". */\n  label?: ReactNode;\n}\n\n/** A smaller figure under the headline — a prior period, a projection, a split. */\nexport interface StatTileSubValue {\n  label: ReactNode;\n  /** A number is formatted like the headline; anything else is rendered as given. */\n  value: ReactNode;\n  /** Defaults to the tile's own `tone`, read per figure (so a `signed` tile shows a\n   *  teal September above an amber August). Sub-values are always the muted weight\n   *  of their tone: they are history, and must not outshout the figure above them.\n   *\n   *  `\"none\"` leaves the figure untinted — the row's own muted text, like its label —\n   *  even on a toned tile: keksdose's report KpiCard (reports/charts/kpi-card.tsx),\n   *  whose `negative` convention tints only a figure below zero and leaves the rest\n   *  plain. (`\"neutral\"` is not that: it is the headline's full text colour, at the\n   *  sub-value's 75 %.) */\n  tone?: StatTileTone | \"none\";\n}\n\n/** What {@link StatTileProps.renderLink} is handed. Spread it onto your router's\n *  link: the class is what stretches the link over the whole tile. */\nexport interface StatTileLinkProps {\n  href: string;\n  className: string;\n  \"aria-describedby\": string;\n  children: ReactNode;\n}\n\n/**\n * A `div`'s props, `ref` included since 0.35 (round 0.35 R4, the follow-up to API-2): they\n * ride on to the {@link Card} that is the tile, so the ref is the tile's own `<div>` — the\n * one to scroll into view or measure. `ComponentPropsWithoutRef` only kept it out of the\n * type; at runtime `{...rest}` already carried it there.\n */\nexport interface StatTileProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"onClick\"> {\n  /** What is measured. Also the tile's accessible name when it is a link/button. */\n  label: ReactNode;\n  /**\n   * The headline. A number is formatted with `Intl.NumberFormat` in the kit's locale\n   * (see `currency`, `compact`, `numberFormat`, `format`); a string or element is\n   * rendered as given. `null`/`undefined` shows a dash and says \"No data\".\n   */\n  value?: ReactNode;\n  /** ISO 4217 code — formats a number value (and a `\"value\"` delta, and numeric\n   *  sub-values) as money. */\n  currency?: string;\n  /** Compact notation: 12 400 → \"12K\". */\n  compact?: boolean;\n  /** Any further `Intl.NumberFormat` options, merged over the two above. */\n  numberFormat?: Intl.NumberFormatOptions;\n  /** Formats every NUMBER the tile shows, replacing the `Intl` default outright. */\n  format?: (value: number) => string;\n  locale?: string;\n  /** A short unit after the value that `Intl` has no name for: \"ms\", \"dB\", \"Hz\". */\n  unit?: ReactNode;\n  /** The period the headline belongs to, shown to its left (\"SEP\"). */\n  valueLabel?: ReactNode;\n  tone?: StatTileTone;\n  delta?: number | StatTileDelta;\n  /** Which way is good news. Unset, the delta is stated and not judged (users up and\n   *  cost up are the same arrow); set, it is coloured and its sentence says so. */\n  goodDirection?: \"up\" | \"down\";\n  /** The explanation behind a \"?\" beside the label (a {@link FieldHint}) — hidden\n   *  until asked for, so it is for what a reader MIGHT want to know (\"excludes\n   *  transfers between your own accounts\"). For a line everyone should read, use\n   *  {@link StatTileProps.description} instead.\n   *\n   *  0.32 (docs/text-size-harmonization.md §4 \"No fact only in a tooltip\"): at Large\n   *  and Extra large, and on a touch screen, the words are shown under the label\n   *  instead of behind the \"?\". */\n  hint?: string;\n  /**\n   * Keep the label to ONE line, cut with an ellipsis, and show the whole of it in a\n   * {@link Tooltip} on hover and focus — but only while it is actually cut, so a\n   * label that fits shows no bubble repeating itself. keksdose's admin MetricTile\n   * wall: twenty tiles whose German labels (\"Aktive Abonnements (30 Tage)\") wrapped\n   * onto two or three lines and pushed each tile's figure to a different height.\n   *\n   * The label element keeps the FULL text — the ellipsis is paint — so it is still\n   * the tile's accessible name (and the stretched link's, on a link tile) exactly as\n   * without this. Off by default: a wrapping label is what every existing tile does,\n   * and a tile standing alone has room to.\n   *\n   * This is the tooltip: pass the label as a plain STRING rather than wrapping it in\n   * your own `<Tooltip>` for the full text (keksdose's admin metrics-panel.tsx:134\n   * does, from before this prop). A wrapped label shows a bubble even when nothing is\n   * cut, and nests its trigger inside this one's.\n   *\n   * Ignored at Large and Extra large (0.32, §4): nothing truncates there, and the full\n   * label would otherwise be a fact only in a tooltip.\n   */\n  truncateLabel?: boolean;\n  /**\n   * The tile's name as plain text, for the places that need a string rather than a\n   * node — today the {@link StatTileProps.trend} sparkline's accessible name. Only\n   * needed when `label` is not a string AND its text cannot be read from it: a label\n   * element's text children are found on their own (a `<Tooltip label=\"…\">Spend\n   * </Tooltip>` label still names its sparkline \"Spend\"), an icon or a formatted\n   * message component's are not.\n   */\n  name?: string;\n  /** A visible line under the value: \"Last 12 months\", \"3 estates / 9 buildings\" —\n   *  always shown, so it is for what every reader needs. An explanation only some\n   *  will want belongs in {@link StatTileProps.hint}, the \"?\" beside the label. */\n  description?: ReactNode;\n  /**\n   * One figure that belongs WITH the headline rather than under it: keksdose's\n   * \"Projected €1,850\" under a to-date \"€420\" (KpiCard, feedback #51), which it\n   * currently smuggles into `description` with hand-set margins so the prior-month\n   * sub-values do not come between the two. It is drawn directly under the value\n   * (before the delta, the description and the sparkline) as a sub-value row, with\n   * only a hair of space above it.\n   *\n   * A slot of its own rather than a placement switch for `subValues`: the history\n   * rows (last month, last year) should stay at the bottom where they are, and moving\n   * the whole list up to bring one row with it would put them between the headline\n   * and its delta. Same shape as a sub-value, so the `tone` rules are the same.\n   * Withheld while `loading`, like the sub-values.\n   *\n   * 0.51: or several, in order (keksdose #633). Its figure tiles carry two forward rows,\n   * \"Committed <date>\" (today plus what is scheduled) and \"Projected <date>\" (that plus the\n   * usual variable money), both of which belong with the headline and neither with the\n   * history below. The tile draws what it is given; which rows to give is the app's rule\n   * (keksdose shows both on every tile, live #455, even where Committed equals the figure\n   * so far).\n   */\n  projection?: StatTileSubValue | readonly StatTileSubValue[];\n  /**\n   * Smaller figures under the headline, label left and figure right.\n   *\n   * At Large and Extra large (0.32, §4 \"StatTile shows its one big number; the sparkline\n   * and sub-values move below\"): the tile leads with the headline and its delta, and the\n   * projection, these rows and the sparkline follow beneath the description, each row's\n   * label over its figure — a 2-up tile at 150 % is 120 px of text wide, and a label\n   * beside a figure there squeezed both.\n   */\n  subValues?: StatTileSubValue[];\n  /** Shorthand for a fluid {@link Sparkline} named after the tile and speaking in\n   *  the tile's number format. The name is the label's text; see\n   *  {@link StatTileProps.name} for a label that has none. */\n  trend?: ReadonlyArray<number | null | undefined>;\n  /** A custom sparkline (or any small graphic) in the same place. Wins over `trend`. */\n  sparkline?: ReactNode;\n  /** A decorative icon at the top end of the tile. */\n  icon?: ReactNode;\n  /** Anything below the rest — a progress bar, a link row. */\n  footer?: ReactNode;\n  /** Tag every figure `data-private`, so the host's demo-mode rule blurs it — the\n   *  same attribute `Tooltip redact` and the chart tooltip's value cell carry.\n   *  The figures are the tile's own: value, delta, projection, sub-values and the\n   *  trend. The `description` and `footer` are the app's nodes and stay readable;\n   *  see {@link StatTileProps.descriptionSensitive} for the ones that carry an amount. */\n  sensitive?: boolean;\n  /**\n   * Tag the `description` line `data-private` too, as `sensitive` tags the figures.\n   * For a description that names an amount: keksdose's tax reserve tile states its\n   * basis there (\"…applied to €42,000\"), and its report KpiCard puts a `hintSensitive`\n   * hint there — both tag their own `<span data-private>` today\n   * (reports/tabs/tax-tab.tsx, reports/charts/kpi-card.tsx). Separate from\n   * `sensitive`, so a description of words (\"Last 12 months\") on a money tile stays\n   * readable in demo mode. keksdose audit follow-up, 2026-11-01.\n   */\n  descriptionSensitive?: boolean;\n  /**\n   * Tag the `footer` `data-private`, as `sensitive` tags the figures — for a footer\n   * that carries an amount: keksdose's tax reserve tile's shortfall line (\"Set aside\n   * €1,200 more…\"), which it tags by hand. keksdose audit follow-up, 2026-11-01.\n   */\n  footerSensitive?: boolean;\n  /** Skeleton in place of the value; delta, sub-values and trend are withheld. */\n  loading?: boolean;\n  /** `\"sm\"` for dense grids (a metrics wall); `\"md\"` the default KPI. */\n  size?: \"sm\" | \"md\";\n  /**\n   * The tile's frame. `\"card\"` (default) is the bordered, shadowed card on the page.\n   * `\"inset\"` is a tile INSIDE a card: {@link Card}'s `inset` — the raised\n   * `--bg-surface-2`, a small radius, no border or shadow, since the card round it\n   * already has them. `\"plain\"` drops the frame altogether — no fill and no padding —\n   * for figures set straight into a card's content (a summary row under a card title),\n   * where any box would be a box in a box. keksdose wrote both by hand over the card\n   * tile (`border-0 shadow-none bg-transparent p-0`) for its tiles inside a card.\n   */\n  variant?: \"card\" | \"inset\" | \"plain\";\n  /** Makes the tile a link. See {@link renderLink} for a router. */\n  href?: string;\n  /** Renders the link for `href` — pass your router's `<Link>` here, since a plain\n   *  `<a>` reloads a single-page app. Default: the `<UiKitProvider linkComponent>`\n   *  (for an in-app `href`), then `<a>`. */\n  renderLink?: (props: StatTileLinkProps) => ReactElement;\n  /** Makes the tile a button (ignored when `href` is given). */\n  onClick?: () => void;\n  labels?: LabelOverride<StatTileLabels>;\n}\n\n// One formatter per option set: a metrics wall is twenty of these.\nconst formatters = new Map<string, Intl.NumberFormat>();\nfunction numberFormatter(locale: string | undefined, options: Intl.NumberFormatOptions): Intl.NumberFormat {\n  const key = `${locale ?? \"\"}|${JSON.stringify(options)}`;\n  let f = formatters.get(key);\n  if (!f) {\n    f = new Intl.NumberFormat(locale, options);\n    formatters.set(key, f);\n  }\n  return f;\n}\n\n// The headline sizes are keyed on the TILE's width (it is a @container), not the\n// viewport: a grid beside a sidebar makes tiles narrowest exactly where a viewport\n// breakpoint would hand them the larger font. `sm` is keksdose's compact headline,\n// sized so a worst-case \"CHF 123,456.78\" still fits a 320px phone's 2-up tiles.\nconst VALUE_TEXT = {\n  md: \"text-xl @[13rem]:text-2xl\",\n  sm: \"text-xs @[8.5rem]:text-sm @[13rem]:text-base\",\n} as const;\nconst PADDING = { md: \"p-3 sm:p-4\", sm: \"px-2.5 py-2\" } as const;\n\n/**\n * The KPI card: a label, one number, and optionally how it moved, what it is made of\n * and which way it has been going.\n *\n * Replaces keksdose's `KpiCard` and admin `Tile`, lenkbank's metrics tiles and\n * kastlan's `KpiCard` — the same card four times, with four answers to the same\n * questions (how a currency is formatted, whether a delta is judged, what happens to\n * the figures in demo mode).\n *\n * Interactive tiles use a STRETCHED link: the label is the `<a>`/`<button>`, and its\n * `::after` covers the card. Making the card itself the link would nest the hint's\n * `<button>` inside it, which is invalid HTML and an unreachable control; this way\n * the hint sits above the overlay and stays its own tab stop. The link's name is the\n * label, and it is described by the value and the delta.\n */\nexport function StatTile({\n  label,\n  value,\n  currency,\n  compact = false,\n  numberFormat,\n  format,\n  locale,\n  unit,\n  valueLabel,\n  tone = \"neutral\",\n  delta,\n  goodDirection,\n  hint,\n  truncateLabel = false,\n  name,\n  description,\n  projection,\n  subValues,\n  trend,\n  sparkline,\n  icon,\n  footer,\n  sensitive = false,\n  descriptionSensitive = false,\n  footerSensitive = false,\n  loading = false,\n  size = \"md\",\n  variant = \"card\",\n  href,\n  renderLink,\n  onClick,\n  labels,\n  className,\n  ...rest\n}: StatTileProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  // §4: at Large the one big number leads and the rest follows below it; the label\n  // never truncates; on touch or at Large the hint is words, not a \"?\".\n  const large = useLargeText();\n  const inlineHint = useInlineFacts() && !!hint;\n  if (large) truncateLabel = false;\n  // A loading StatTileGrid puts every tile in it into the loading state and says\n  // \"Loading…\" ONCE for all of them; the tile then keeps its own sentence to itself\n  // (see StatTileGrid's `loading`).\n  const gridLoading = useContext(StatTileGridLoadingContext);\n  loading = loading || gridLoading;\n  const kitLink = useKitLink();\n  const [labelEl, setLabelEl] = useState<HTMLElement | null>(null);\n  const labelCut = useIsTruncated(truncateLabel ? labelEl : null);\n  const kitLocale = useKitLocale(locale);\n  const id = useId();\n  const valueId = `${id}-value`;\n  const deltaId = `${id}-delta`;\n  const priv = sensitive ? \"\" : undefined;\n  // One projection or several (0.51), as a list either way.\n  const projections: readonly StatTileSubValue[] =\n    projection === undefined ? [] : isFigureList(projection) ? projection : [projection];\n\n  const fmt =\n    format ??\n    ((n: number) =>\n      // U+2212 for a negative headline (0.49, KIT-1).\n      formatWithMinus(\n        numberFormatter(kitLocale, {\n          ...(currency ? { style: \"currency\", currency } : null),\n          ...(compact ? { notation: \"compact\" } : null),\n          ...numberFormat,\n        }),\n        n,\n      ));\n  const show = (v: ReactNode) => (typeof v === \"number\" ? fmt(v) : v);\n\n  const d = typeof delta === \"number\" ? { value: delta } : delta;\n  const hasValue = value !== null && value !== undefined && value !== \"\";\n  const labelText = name ?? plainText(label);\n\n  // ── The label, which is also the link/button when the tile is interactive ──\n  const stretched = cn(\n    \"text-start uppercase tracking-wide\",\n    \"after:absolute after:inset-0 after:rounded-lg after:content-['']\",\n    // The kit's focus frame (0.32, §5), on the overlay — `FOCUS_RING`'s classes cannot\n    // carry the `after:`, so its width is spelt out.\n    \"focus-visible:outline-none focus-visible:after:ring-focus focus-visible:after:ring-inset focus-visible:after:ring-brand\",\n  );\n  const describedBy = d ? `${valueId} ${deltaId}` : valueId;\n  let labelNode: ReactNode = label;\n  if (href !== undefined) {\n    const linkProps: StatTileLinkProps = {\n      href,\n      className: stretched,\n      \"aria-describedby\": describedBy,\n      children: label,\n    };\n    const kit = pickLinkRenderer<StatTileLinkProps>(undefined, kitLink, href);\n    labelNode = renderLink ? (\n      renderLink(linkProps)\n    ) : kit ? (\n      <RenderedKitLink render={kit} props={linkProps} />\n    ) : (\n      <a href={href} className={stretched} aria-describedby={describedBy}>\n        {label}\n      </a>\n    );\n  } else if (onClick) {\n    labelNode = (\n      <button type=\"button\" onClick={onClick} aria-describedby={describedBy} className={stretched}>\n        {label}\n      </button>\n    );\n  }\n  const interactive = href !== undefined || onClick !== undefined;\n\n  // ── Delta ──\n  let deltaNode: ReactNode = null;\n  if (d && !loading && Number.isFinite(d.value)) {\n    const magnitude = Math.abs(d.value);\n    const amount =\n      d.unit === \"percent\"\n        ? numberFormatter(kitLocale, { style: \"percent\", maximumFractionDigits: 1 }).format(magnitude)\n        : fmt(magnitude);\n    const dir = d.value > 0 ? \"up\" : d.value < 0 ? \"down\" : \"flat\";\n    const Icon = dir === \"up\" ? ArrowUp : dir === \"down\" ? ArrowDown : Minus;\n    let spoken = dir === \"up\" ? text.increase(amount) : dir === \"down\" ? text.decrease(amount) : text.unchanged;\n    let deltaTone = \"text-muted\";\n    if (goodDirection && dir !== \"flat\") {\n      const good = dir === goodDirection;\n      spoken = good ? text.better(spoken) : text.worse(spoken);\n      deltaTone = good ? \"text-success\" : \"text-danger\";\n    }\n    deltaNode = (\n      // `relative`: the containing block for the sr-only sentence (see the\n      // sr-only-containment test for what an escaped one does to the page).\n      <div className=\"relative mt-1 flex flex-wrap items-center gap-x-1.5 text-xs tabular-nums\">\n        <span\n          id={deltaId}\n          data-private={priv}\n          className={cn(\"inline-flex items-center gap-0.5 font-medium\", deltaTone)}\n        >\n          <Icon className=\"size-3 shrink-0\" aria-hidden />\n          {/* The figure at zero too, like Delta (kastlan 48): \"0 %\" says the change was\n              measured; a bare dash reads like a missing value. */}\n          <span aria-hidden>{amount}</span>\n          <span className=\"sr-only\">{spoken}</span>\n        </span>\n        {d.label != null && <span className=\"text-muted\">{d.label}</span>}\n      </div>\n    );\n  }\n\n  // ── Headline ──\n  const valueClass = cn(\"whitespace-nowrap font-semibold tabular-nums\", VALUE_TEXT[size], toneClass(tone, value));\n  const headline = loading ? (\n    <span id={valueId} className=\"relative block py-0.5\">\n      <span aria-hidden className={cn(SKELETON_CLASS, \"block h-6 w-24 max-w-full\")} />\n      {!gridLoading && <span className=\"sr-only\">{text.loading}</span>}\n    </span>\n  ) : hasValue ? (\n    <span id={valueId} data-private={priv} className={cn(valueClass, valueLabel != null && !large && \"ms-auto\")}>\n      {show(value)}\n      {unit != null && <span className=\"ms-1 text-[0.7em] font-medium text-muted\">{unit}</span>}\n    </span>\n  ) : (\n    <span id={valueId} className={cn(\"relative\", valueClass, \"text-muted\")}>\n      <span aria-hidden>—</span>\n      <span className=\"sr-only\">{text.noValue}</span>\n    </span>\n  );\n\n  const graphic = loading\n    ? null\n    : (sparkline ??\n      (trend && (\n        <Sparkline\n          data={trend}\n          fluid\n          height={size === \"sm\" ? 20 : 28}\n          label={labelText}\n          formatValue={fmt}\n          locale={kitLocale}\n          tone={tone === \"signed\" ? \"signed\" : tone === \"neutral\" ? \"chart\" : tone}\n          data-private={priv}\n        />\n      )));\n\n  return (\n    <Card\n      {...rest}\n      variant={variant === \"card\" ? \"default\" : \"inset\"}\n      data-variant={variant === \"card\" ? undefined : variant}\n      aria-busy={loading || undefined}\n      className={cn(\n        // @container: the headline sizes read the tile's width. relative: the stretched\n        // link's overlay. overflow-hidden: at pathological widths a figure clips inside\n        // the border instead of painting over the neighbouring tile.\n        \"@container relative flex min-w-0 flex-col overflow-hidden\",\n        // `plain` is the inset card with its fill and padding taken away — the figures\n        // align with the content edge of the card they sit in. (Not `p-0` over the\n        // padding: the padding's `sm:p-4` would still win from `sm` up.)\n        variant === \"plain\" ? \"rounded-none bg-transparent p-0\" : PADDING[size],\n        interactive && \"transition-colors hover:border-strong hover:bg-hover\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start gap-2\">\n        <div className=\"flex min-w-0 flex-1 items-center gap-1 break-words text-xs uppercase tracking-wide text-muted\">\n          {truncateLabel && labelCut ? (\n            // Portalled: the tile is `overflow-hidden`, and a bubble inside it would be\n            // clipped by the very box whose edge cut the label.\n            <Tooltip label={label} side=\"top\" portal className=\"flex min-w-0\">\n              <span ref={setLabelEl} className=\"block min-w-0 truncate\">\n                {labelNode}\n              </span>\n            </Tooltip>\n          ) : (\n            <span ref={setLabelEl} className={cn(\"min-w-0\", truncateLabel && \"block truncate\")}>\n              {labelNode}\n            </span>\n          )}\n          {/* Above the stretched link's overlay, so it stays hoverable and focusable. */}\n          {hint && !inlineHint && <FieldHint label={hint} side=\"top\" className=\"relative z-10 shrink-0\" />}\n        </div>\n        {icon != null && (\n          <span aria-hidden className=\"shrink-0 text-muted [&_svg]:size-4\">\n            {icon}\n          </span>\n        )}\n      </div>\n\n      {inlineHint && (\n        // §4: the hint as words under the label — the same muted type as `description`,\n        // in the reading case of a sentence rather than the label's capitals.\n        <p data-slot=\"stat-tile-hint\" className=\"mt-0.5 text-xs text-muted\">\n          {hint}\n        </p>\n      )}\n\n      {valueLabel != null ? (\n        // Period-left / value-right, matching the sub-rows below it. flex-wrap lets a\n        // too-long amount drop to its own end-aligned line instead of overflowing. At\n        // Large the period goes over the figure, which then has the tile's width.\n        <div className={cn(\"mt-1 flex items-baseline gap-x-1.5\", large ? \"flex-col items-start\" : \"flex-wrap\")}>\n          <span className=\"shrink-0 text-xs uppercase tracking-wide text-muted\">{valueLabel}</span>\n          {headline}\n        </div>\n      ) : (\n        <div className=\"mt-1\">{headline}</div>\n      )}\n\n      {/* At Large the delta and description follow the figure at once, and the\n          projection moves down with the other figures (see `subValues`). */}\n      {!large && !loading && projections.length > 0 && (\n        <dl className=\"mt-0.5 space-y-0.5\">\n          {projections.map((p, i) => (\n            <FigureRow key={i} figure={p} tileTone={tone} show={show} priv={priv} />\n          ))}\n        </dl>\n      )}\n\n      {deltaNode}\n      {description != null && (\n        <div data-private={descriptionSensitive ? \"\" : undefined} className=\"mt-1 text-xs text-muted\">\n          {description}\n        </div>\n      )}\n      {!large && graphic && <div className=\"mt-2\">{graphic}</div>}\n\n      {!loading && ((large && projections.length > 0) || (subValues && subValues.length > 0)) && (\n        <dl data-slot=\"stat-tile-figures\" className={cn(\"mt-1.5\", large ? \"space-y-1.5\" : \"space-y-0.5\")}>\n          {large &&\n            projections.map((p, i) => (\n              <FigureRow key={`projection-${i}`} figure={p} tileTone={tone} show={show} priv={priv} stacked />\n            ))}\n          {subValues?.map((sv, i) => (\n            <FigureRow key={i} figure={sv} tileTone={tone} show={show} priv={priv} stacked={large} />\n          ))}\n        </dl>\n      )}\n\n      {large && graphic && (\n        <div data-slot=\"stat-tile-graphic\" className=\"mt-2\">\n          {graphic}\n        </div>\n      )}\n\n      {footer != null && (\n        <div data-private={footerSensitive ? \"\" : undefined} className=\"mt-2\">\n          {footer}\n        </div>\n      )}\n    </Card>\n  );\n}\n\n/** `Array.isArray` narrows a readonly array to `any[]`; this keeps the element type. */\nfunction isFigureList(p: StatTileSubValue | readonly StatTileSubValue[]): p is readonly StatTileSubValue[] {\n  return Array.isArray(p);\n}\n\n/** One label/value row of a `<dl>`: a sub-value, or a projection. */\nfunction FigureRow({\n  figure,\n  tileTone,\n  show,\n  priv,\n  stacked = false,\n}: {\n  figure: StatTileSubValue;\n  tileTone: StatTileTone;\n  show: (v: ReactNode) => ReactNode;\n  priv: \"\" | undefined;\n  /** The label over the figure (Large, §4) instead of beside it. */\n  stacked?: boolean;\n}) {\n  const own = figure.tone ?? (tileTone === \"neutral\" ? undefined : tileTone);\n  const svTone = own === \"none\" ? undefined : own;\n  // The LABEL gives way, never the figure. This row used to wrap, so on a narrow tile a\n  // long label (\"AUG (SIGNED)\") dropped its amount onto a line of its own while the\n  // next row stayed on one — two layouts in one list, and a figure no longer beside\n  // the period it belongs to. Now the label breaks within itself and the amount stays\n  // on the label's first line, end-aligned like every other row.\n  //\n  // 0.49: between WORDS only. `overflow-wrap:anywhere` (with `min-w-0`) cut a single\n  // word at any letter — \"PROJECT|ED\" in a 160px KPI tile at 360px. The label now keeps\n  // a flex item's own floor, its longest word; only a word that cannot share the line\n  // with the figure sends the figure to the next line, still end-aligned. `break-word`\n  // is the last resort for a word wider than the whole tile, and does not lower that\n  // floor the way `anywhere` did.\n  return (\n    <div\n      className={cn(\n        \"flex text-xs tabular-nums text-muted\",\n        stacked ? \"flex-col items-start\" : \"flex-wrap items-baseline gap-x-2\",\n      )}\n    >\n      <dt className=\"max-w-full uppercase tracking-wide [overflow-wrap:break-word]\">{figure.label}</dt>\n      <dd\n        data-private={priv}\n        className={cn(\n          \"shrink-0 whitespace-nowrap\",\n          !stacked && \"ms-auto\",\n          svTone && [toneClass(svTone, figure.value), \"opacity-75\"],\n        )}\n      >\n        {show(figure.value)}\n      </dd>\n    </div>\n  );\n}\n\n/**\n * Whether `el`'s text is wider than its box — i.e. whether `truncate` is cutting it.\n * Re-measured whenever the box resizes (a grid reflowing, a translation loading), not\n * only on mount. Keyed on the ELEMENT (a callback ref), because wrapping the label in\n * its tooltip remounts it, and an observer on the old node would watch nothing.\n */\nfunction useIsTruncated(el: HTMLElement | null): boolean {\n  const [cut, setCut] = useState(false);\n  useLayoutEffect(() => {\n    // No reset while there is no node: between the unwrapped label unmounting and the\n    // wrapped one mounting there is none, and a reset there would unwrap it again.\n    if (!el) return;\n    const measure = () => setCut(el.scrollWidth > el.clientWidth);\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [el]);\n  return cut;\n}\n\nexport interface StatTileGridProps extends ComponentPropsWithRef<\"div\"> {\n  /** The narrowest a tile may get before the grid drops a column. The default fits\n   *  two tiles on a 320px phone. */\n  minTileWidth?: string;\n  /**\n   * Let a row that is not full stretch its tiles across the whole width. Default\n   * `true` (CSS `auto-fit`): one or two tiles fill the row, as they always have.\n   * `false` (`auto-fill`): the empty columns are kept, so every tile is the width of\n   * a column whatever the count — a lone \"Balance\" tile in a card stays tile-sized\n   * instead of becoming a banner the width of the card, and the tiles of a short row\n   * line up with the columns of a full one above it.\n   */\n  stretch?: boolean;\n  /**\n   * Every tile in the grid is loading: each shows its skeleton (as with its own\n   * `loading`), and the grid says \"Loading…\" ONCE, in a polite status region, instead\n   * of each tile carrying its own sr-only \"Loading…\" — a wall of eight tiles was read\n   * as eight \"Loading…\"s in a row. The grid is `aria-busy` meanwhile. A tile's own\n   * `loading` inside a grid that is not loading still speaks for itself.\n   */\n  loading?: boolean;\n  /** The grid's one sentence — `loading` from {@link StatTileLabels}. */\n  labels?: LabelOverride<Pick<StatTileLabels, \"loading\">>;\n}\n\n/** Set by a loading {@link StatTileGrid}; read by each tile in it. */\nconst StatTileGridLoadingContext = createContext(false);\n\n/**\n * The row of tiles every dashboard in the three apps lays out by hand, each with its\n * own breakpoint ladder (`grid-cols-2 md:grid-cols-4 min-[2400px]:grid-cols-8` …).\n * Those ladders read the VIEWPORT and so ignored the sidebar: 6-up tiles at 155px in\n * the band where the sidebar was open. This fits as many columns as `minTileWidth`\n * allows in the space the grid actually has, and needs no breakpoint at all.\n */\nexport function StatTileGrid({\n  minTileWidth = \"9rem\",\n  stretch = true,\n  loading = false,\n  labels,\n  className,\n  style,\n  children,\n  ...rest\n}: StatTileGridProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  const columns: CSSProperties = {\n    gridTemplateColumns: `repeat(${stretch ? \"auto-fit\" : \"auto-fill\"}, minmax(min(100%, ${minTileWidth}), 1fr))`,\n  };\n  return (\n    <div\n      {...rest}\n      aria-busy={loading || rest[\"aria-busy\"] || undefined}\n      // `relative`: the containing block for the sr-only status, which is absolutely\n      // positioned and so also takes no grid cell.\n      className={cn(\"relative grid gap-3\", className)}\n      style={{ ...columns, ...style }}\n    >\n      {/* Always mounted, filled while loading: a live region announces a CHANGE of\n          its content, so one that appeared already holding the sentence might say\n          nothing. */}\n      <span role=\"status\" className=\"sr-only\">\n        {loading ? text.loading : \"\"}\n      </span>\n      <StatTileGridLoadingContext.Provider value={loading}>{children}</StatTileGridLoadingContext.Provider>\n    </div>\n  );\n}\n"],"mappings":";AA4ZM,cAoCE,YApCF;AA5ZN,SAAS,eAAe,YAAY,OAAO,iBAAiB,gBAAgB;AAE5E,SAAS,WAAW,SAAS,aAAa;AAC1C,SAAS,UAAU;AAEnB,SAAS,iBAAiB;AAC1B,SAAS,cAAc,YAAY,oBAAwC;AAC3E,SAAS,kBAAkB,uBAAuB;AAClD,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB,oBAAoB;AAC7C,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAIxB,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AACzC,SAAS,uBAAuB;AAsChC,MAAM,aAA8D;AAAA,EAClE,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,KAAK;AAAA,EACL,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR;AAEA,SAAS,UAAU,MAAoB,OAAwB;AAC7D,MAAI,SAAS,SAAU,QAAO,WAAW,IAAI;AAC7C,MAAI,OAAO,UAAU,YAAY,UAAU,EAAG,QAAO,WAAW;AAChE,SAAO,QAAQ,IAAI,WAAW,UAAU,WAAW;AACrD;AA8MA,MAAM,aAAa,oBAAI,IAA+B;AACtD,SAAS,gBAAgB,QAA4B,SAAsD;AACzG,QAAM,MAAM,GAAG,UAAU,EAAE,IAAI,KAAK,UAAU,OAAO,CAAC;AACtD,MAAI,IAAI,WAAW,IAAI,GAAG;AAC1B,MAAI,CAAC,GAAG;AACN,QAAI,IAAI,KAAK,aAAa,QAAQ,OAAO;AACzC,eAAW,IAAI,KAAK,CAAC;AAAA,EACvB;AACA,SAAO;AACT;AAMA,MAAM,aAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AACN;AACA,MAAM,UAAU,EAAE,IAAI,cAAc,IAAI,cAAc;AAiB/C,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,uBAAuB;AAAA,EACvB,kBAAkB;AAAA,EAClB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,OAAO,aAAa,YAAY,0BAA0B,MAAM;AAGtE,QAAM,QAAQ,aAAa;AAC3B,QAAM,aAAa,eAAe,KAAK,CAAC,CAAC;AACzC,MAAI,MAAO,iBAAgB;AAI3B,QAAM,cAAc,WAAW,0BAA0B;AACzD,YAAU,WAAW;AACrB,QAAM,UAAU,WAAW;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAA6B,IAAI;AAC/D,QAAM,WAAW,eAAe,gBAAgB,UAAU,IAAI;AAC9D,QAAM,YAAY,aAAa,MAAM;AACrC,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,GAAG,EAAE;AACrB,QAAM,UAAU,GAAG,EAAE;AACrB,QAAM,OAAO,YAAY,KAAK;AAE9B,QAAM,cACJ,eAAe,SAAY,CAAC,IAAI,aAAa,UAAU,IAAI,aAAa,CAAC,UAAU;AAErF,QAAM,MACJ,WACC,CAAC;AAAA;AAAA,IAEA;AAAA,MACE,gBAAgB,WAAW;AAAA,QACzB,GAAI,WAAW,EAAE,OAAO,YAAY,SAAS,IAAI;AAAA,QACjD,GAAI,UAAU,EAAE,UAAU,UAAU,IAAI;AAAA,QACxC,GAAG;AAAA,MACL,CAAC;AAAA,MACD;AAAA,IACF;AAAA;AACJ,QAAM,OAAO,CAAC,MAAkB,OAAO,MAAM,WAAW,IAAI,CAAC,IAAI;AAEjE,QAAM,IAAI,OAAO,UAAU,WAAW,EAAE,OAAO,MAAM,IAAI;AACzD,QAAM,WAAW,UAAU,QAAQ,UAAU,UAAa,UAAU;AACpE,QAAM,YAAY,QAAQ,UAAU,KAAK;AAGzC,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,EACF;AACA,QAAM,cAAc,IAAI,GAAG,OAAO,IAAI,OAAO,KAAK;AAClD,MAAI,YAAuB;AAC3B,MAAI,SAAS,QAAW;AACtB,UAAM,YAA+B;AAAA,MACnC;AAAA,MACA,WAAW;AAAA,MACX,oBAAoB;AAAA,MACpB,UAAU;AAAA,IACZ;AACA,UAAM,MAAM,iBAAoC,QAAW,SAAS,IAAI;AACxE,gBAAY,aACV,WAAW,SAAS,IAClB,MACF,oBAAC,mBAAgB,QAAQ,KAAK,OAAO,WAAW,IAEhD,oBAAC,OAAE,MAAY,WAAW,WAAW,oBAAkB,aACpD,iBACH;AAAA,EAEJ,WAAW,SAAS;AAClB,gBACE,oBAAC,YAAO,MAAK,UAAS,SAAkB,oBAAkB,aAAa,WAAW,WAC/E,iBACH;AAAA,EAEJ;AACA,QAAM,cAAc,SAAS,UAAa,YAAY;AAGtD,MAAI,YAAuB;AAC3B,MAAI,KAAK,CAAC,WAAW,OAAO,SAAS,EAAE,KAAK,GAAG;AAC7C,UAAM,YAAY,KAAK,IAAI,EAAE,KAAK;AAClC,UAAM,SACJ,EAAE,SAAS,YACP,gBAAgB,WAAW,EAAE,OAAO,WAAW,uBAAuB,EAAE,CAAC,EAAE,OAAO,SAAS,IAC3F,IAAI,SAAS;AACnB,UAAM,MAAM,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,IAAI,SAAS;AACxD,UAAM,OAAO,QAAQ,OAAO,UAAU,QAAQ,SAAS,YAAY;AACnE,QAAI,SAAS,QAAQ,OAAO,KAAK,SAAS,MAAM,IAAI,QAAQ,SAAS,KAAK,SAAS,MAAM,IAAI,KAAK;AAClG,QAAI,YAAY;AAChB,QAAI,iBAAiB,QAAQ,QAAQ;AACnC,YAAM,OAAO,QAAQ;AACrB,eAAS,OAAO,KAAK,OAAO,MAAM,IAAI,KAAK,MAAM,MAAM;AACvD,kBAAY,OAAO,iBAAiB;AAAA,IACtC;AACA;AAAA;AAAA,IAGE,qBAAC,SAAI,WAAU,4EACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,gBAAc;AAAA,UACd,WAAW,GAAG,gDAAgD,SAAS;AAAA,UAEvE;AAAA,gCAAC,QAAK,WAAU,mBAAkB,eAAW,MAAC;AAAA,YAG9C,oBAAC,UAAK,eAAW,MAAE,kBAAO;AAAA,YAC1B,oBAAC,UAAK,WAAU,WAAW,kBAAO;AAAA;AAAA;AAAA,MACpC;AAAA,MACC,EAAE,SAAS,QAAQ,oBAAC,UAAK,WAAU,cAAc,YAAE,OAAM;AAAA,OAC5D;AAAA,EAEJ;AAGA,QAAM,aAAa,GAAG,gDAAgD,WAAW,IAAI,GAAG,UAAU,MAAM,KAAK,CAAC;AAC9G,QAAM,WAAW,UACf,qBAAC,UAAK,IAAI,SAAS,WAAU,yBAC3B;AAAA,wBAAC,UAAK,eAAW,MAAC,WAAW,GAAG,gBAAgB,2BAA2B,GAAG;AAAA,IAC7E,CAAC,eAAe,oBAAC,UAAK,WAAU,WAAW,eAAK,SAAQ;AAAA,KAC3D,IACE,WACF,qBAAC,UAAK,IAAI,SAAS,gBAAc,MAAM,WAAW,GAAG,YAAY,cAAc,QAAQ,CAAC,SAAS,SAAS,GACvG;AAAA,SAAK,KAAK;AAAA,IACV,QAAQ,QAAQ,oBAAC,UAAK,WAAU,4CAA4C,gBAAK;AAAA,KACpF,IAEA,qBAAC,UAAK,IAAI,SAAS,WAAW,GAAG,YAAY,YAAY,YAAY,GACnE;AAAA,wBAAC,UAAK,eAAW,MAAC,oBAAC;AAAA,IACnB,oBAAC,UAAK,WAAU,WAAW,eAAK,SAAQ;AAAA,KAC1C;AAGF,QAAM,UAAU,UACZ,OACC,cACA,SACC;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,OAAK;AAAA,MACL,QAAQ,SAAS,OAAO,KAAK;AAAA,MAC7B,OAAO;AAAA,MACP,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,MAAM,SAAS,WAAW,WAAW,SAAS,YAAY,UAAU;AAAA,MACpE,gBAAc;AAAA;AAAA,EAChB;AAGN,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,SAAS,YAAY,SAAS,YAAY;AAAA,MAC1C,gBAAc,YAAY,SAAS,SAAY;AAAA,MAC/C,aAAW,WAAW;AAAA,MACtB,WAAW;AAAA;AAAA;AAAA;AAAA,QAIT;AAAA;AAAA;AAAA;AAAA,QAIA,YAAY,UAAU,oCAAoC,QAAQ,IAAI;AAAA,QACtE,eAAe;AAAA,QACf;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,0BACb;AAAA,+BAAC,SAAI,WAAU,iGACZ;AAAA,6BAAiB;AAAA;AAAA;AAAA,cAGhB,oBAAC,WAAQ,OAAc,MAAK,OAAM,QAAM,MAAC,WAAU,gBACjD,8BAAC,UAAK,KAAK,YAAY,WAAU,0BAC9B,qBACH,GACF;AAAA,gBAEA,oBAAC,UAAK,KAAK,YAAY,WAAW,GAAG,WAAW,iBAAiB,gBAAgB,GAC9E,qBACH;AAAA,YAGD,QAAQ,CAAC,cAAc,oBAAC,aAAU,OAAO,MAAM,MAAK,OAAM,WAAU,0BAAyB;AAAA,aAChG;AAAA,UACC,QAAQ,QACP,oBAAC,UAAK,eAAW,MAAC,WAAU,sCACzB,gBACH;AAAA,WAEJ;AAAA,QAEC;AAAA;AAAA,QAGC,oBAAC,OAAE,aAAU,kBAAiB,WAAU,6BACrC,gBACH;AAAA,QAGD,cAAc;AAAA;AAAA;AAAA;AAAA,UAIb,qBAAC,SAAI,WAAW,GAAG,sCAAsC,QAAQ,yBAAyB,WAAW,GACnG;AAAA,gCAAC,UAAK,WAAU,uDAAuD,sBAAW;AAAA,YACjF;AAAA,aACH;AAAA,YAEA,oBAAC,SAAI,WAAU,QAAQ,oBAAS;AAAA,QAKjC,CAAC,SAAS,CAAC,WAAW,YAAY,SAAS,KAC1C,oBAAC,QAAG,WAAU,sBACX,sBAAY,IAAI,CAAC,GAAG,MACnB,oBAAC,aAAkB,QAAQ,GAAG,UAAU,MAAM,MAAY,QAA1C,CAAsD,CACvE,GACH;AAAA,QAGD;AAAA,QACA,eAAe,QACd,oBAAC,SAAI,gBAAc,uBAAuB,KAAK,QAAW,WAAU,2BACjE,uBACH;AAAA,QAED,CAAC,SAAS,WAAW,oBAAC,SAAI,WAAU,QAAQ,mBAAQ;AAAA,QAEpD,CAAC,YAAa,SAAS,YAAY,SAAS,KAAO,aAAa,UAAU,SAAS,MAClF,qBAAC,QAAG,aAAU,qBAAoB,WAAW,GAAG,UAAU,QAAQ,gBAAgB,aAAa,GAC5F;AAAA,mBACC,YAAY,IAAI,CAAC,GAAG,MAClB,oBAAC,aAAkC,QAAQ,GAAG,UAAU,MAAM,MAAY,MAAY,SAAO,QAA7E,cAAc,CAAC,EAA+D,CAC/F;AAAA,UACF,WAAW,IAAI,CAAC,IAAI,MACnB,oBAAC,aAAkB,QAAQ,IAAI,UAAU,MAAM,MAAY,MAAY,SAAS,SAAhE,CAAuE,CACxF;AAAA,WACH;AAAA,QAGD,SAAS,WACR,oBAAC,SAAI,aAAU,qBAAoB,WAAU,QAC1C,mBACH;AAAA,QAGD,UAAU,QACT,oBAAC,SAAI,gBAAc,kBAAkB,KAAK,QAAW,WAAU,QAC5D,kBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAGA,SAAS,aAAa,GAAqF;AACzG,SAAO,MAAM,QAAQ,CAAC;AACxB;AAGA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAOG;AACD,QAAM,MAAM,OAAO,SAAS,aAAa,YAAY,SAAY;AACjE,QAAM,SAAS,QAAQ,SAAS,SAAY;AAa5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,UAAU,yBAAyB;AAAA,MACrC;AAAA,MAEA;AAAA,4BAAC,QAAG,WAAU,iEAAiE,iBAAO,OAAM;AAAA,QAC5F;AAAA,UAAC;AAAA;AAAA,YACC,gBAAc;AAAA,YACd,WAAW;AAAA,cACT;AAAA,cACA,CAAC,WAAW;AAAA,cACZ,UAAU,CAAC,UAAU,QAAQ,OAAO,KAAK,GAAG,YAAY;AAAA,YAC1D;AAAA,YAEC,eAAK,OAAO,KAAK;AAAA;AAAA,QACpB;AAAA;AAAA;AAAA,EACF;AAEJ;AAQA,SAAS,eAAe,IAAiC;AACvD,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,KAAK;AACpC,kBAAgB,MAAM;AAGpB,QAAI,CAAC,GAAI;AACT,UAAM,UAAU,MAAM,OAAO,GAAG,cAAc,GAAG,WAAW;AAC5D,YAAQ;AACR,QAAI,OAAO,mBAAmB,YAAa;AAC3C,UAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,EAAE,CAAC;AACP,SAAO;AACT;AA4BA,MAAM,6BAA6B,cAAc,KAAK;AAS/C,SAAS,aAAa;AAAA,EAC3B,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,OAAO,aAAa,YAAY,0BAA0B,MAAM;AACtE,QAAM,UAAyB;AAAA,IAC7B,qBAAqB,UAAU,UAAU,aAAa,WAAW,sBAAsB,YAAY;AAAA,EACrG;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAW,WAAW,KAAK,WAAW,KAAK;AAAA,MAG3C,WAAW,GAAG,uBAAuB,SAAS;AAAA,MAC9C,OAAO,EAAE,GAAG,SAAS,GAAG,MAAM;AAAA,MAK9B;AAAA,4BAAC,UAAK,MAAK,UAAS,WAAU,WAC3B,oBAAU,KAAK,UAAU,IAC5B;AAAA,QACA,oBAAC,2BAA2B,UAA3B,EAAoC,OAAO,SAAU,UAAS;AAAA;AAAA;AAAA,EACjE;AAEJ;","names":[]}

package/dist/components/toggle-group.js

@@ -13,6 +13,7 @@ import {
   FIELD_CAPTION_CLASS,
   FIELD_ERROR_CLASS,
   fieldHelpMark,
+  isSuggestionHint,
   isTextHint,
   LabelStrip,
   useDisabledReasonLine,
@@ -68,8 +69,8 @@ function ToggleGroup(props) {
   const reasonLine = useDisabledReasonLine(disabledReasonDisplay) && locked;
   const helpMark = fieldHelpMark(hasContent(label) ? help : void 0, label);
   const withHelp = helpMark !== void 0;
-  const inlineHint = useInlineHint(hint, withHelp);
-  const hintAsCaption = withHelp ? hasContent(inlineHint) ? inlineHint : void 0 : isTextHint(hint) ? hint : inlineHint !== hint ? inlineHint : void 0;
+  const inlineHint = useInlineHint(hint, withHelp, label);
+  const hintAsCaption = withHelp ? hasContent(inlineHint) ? inlineHint : void 0 : isTextHint(hint) ? hint : isSuggestionHint(hint) || inlineHint !== hint ? inlineHint : void 0;
   const labelHint = helpMark ?? (hintAsCaption === void 0 ? hint : void 0);
   const dimmed = disabled || locked;
   const labelled = hasContent(label);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import { useCallback, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { FIELD_INVALID, FloatingField, Label } from \"./field-base\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport { hasContent } from \"../lib/presence\";\nimport {\n  assignRef,\n  DISABLED_REASON_LINE_CLASS,\n  FIELD_CAPTION_CLASS,\n  FIELD_ERROR_CLASS,\n  fieldHelpMark,\n  isTextHint,\n  LabelStrip,\n  useDisabledReasonLine,\n  useInlineHint,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n} from \"./field-parts\";\nimport { FOCUS_RING_WIDTH } from \"./focus-ring\";\n\nexport interface ToggleOption<T extends string> {\n  value: T;\n  label: string;\n  className?: string;\n}\n\n/**\n * `onChange` is the group's own — the chosen VALUE, not a DOM event — so the div's\n * `onChange` is omitted rather than shadowed: leaving both in scope would give the\n * prop two incompatible meanings depending on which overload TypeScript picked.\n *\n * `children` is omitted too: this renders its `options` and nothing else, so a `children` the type\n * accepted and the component ignored would be a prop that silently does nothing —\n * worse than one that does not compile.\n */\nexport interface ToggleGroupBaseProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\">, FieldHelpProps {\n  options: ToggleOption<T>[];\n  className?: string;\n  /** Applied to every option button (e.g. to tune height/rounding to match\n   *  adjacent fields). Per-option `className` still wins over this. */\n  optionClassName?: string;\n  /**\n   * What happens when the options do not fit the group's width. `\"truncate\"`\n   * (default): one row, and the labels that do not fit end in an ellipsis — the height\n   * never changes. `\"wrap\"`: the segments flow onto a second row and every label stays\n   * whole (\"Bewegung\", not \"Beweg…\"), at the price of a taller group on a narrow\n   * screen (lenkbank L4: five signal types on a 390px control page). From the width\n   * where they fit, both look the same.\n   *\n   * Since 0.32 a group in the field chrome (`label`, the default placement) with four or\n   * more options wraps at Large and Extra large under `\"truncate\"` too, inside its frame:\n   * the type is bigger there and the field would otherwise run past a phone's edge\n   * (docs/text-size-harmonization.md §4). The keyboard is the same either way.\n   */\n  overflow?: \"truncate\" | \"wrap\";\n  /**\n   * Show, refuse the change (Keksdose live #288: a payment dated in the future has no\n   * state to set).\n   *\n   * Whatever `value` says stays pressed and keeps its own fill rather than going grey\n   * with the rest — a reader who cannot see WHICH option is chosen has been told less\n   * than before it was disabled. A caller with nothing to show passes no value, and\n   * the group renders dimmed with nothing pressed, which is the shape Keksdose's\n   * status picker uses for a row whose status does not exist yet.\n   *\n   * On the whole GROUP, not per option: a segmented control where some segments are\n   * live and others are not is a menu with holes in it, and no caller here wants one.\n   */\n  disabled?: boolean;\n  /**\n   * `sm`: 12px options with `px-2 py-1` — the compact group keksdose's rule editor\n   * (rule-editor:204) writes as `optionClassName=\"px-2 py-1 text-xs\"` beside a small\n   * caption. `md` (default) is the size every other group has.\n   *\n   * Honoured inside the field chrome and the strip too (keksdose K1): the 12px type\n   * stays, and the field is still 42px — see `CHROME_PAD`.\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Stand in a form row as a FIELD: with a label the group wears the field's chrome —\n   * border, surface, the top strip with a small static label in it, a labelled\n   * {@link Select}'s height — so beside an Input or a Select it reads as one of them\n   * rather than as a control with a caption over it. lenkbank builds exactly this by\n   * hand as `ToggleField` (features/gear/common.tsx:97, feedback #69), and its notes\n   * are why the chrome STRETCHES to its row as well as matching the select's padding:\n   * a native select's height is the browser's, so a toggle a few pixels short of it\n   * is levelled up by the row rather than by arithmetic.\n   *\n   * The label names the group (`aria-labelledby`), so `aria-label` is not needed. With\n   * a label, `className` styles the field's wrapper — as on {@link Select} — and the\n   * group's own box is dropped: two nested borders read as a control in a control.\n   */\n  label?: ReactNode;\n  /**\n   * Where `label` goes. `\"field\"` (default): the field chrome described under `label`.\n   * `\"above\"`: the kit's {@link Label} over the bare group — the shape of a {@link Field}\n   * — with `hint` beside the label and `error` under the group, for a form that sets\n   * its labels above its fields (kastlan's international-rent-calculator.tsx, whose DE\n   * cap pair sits in a `Field` column between two labelled-above inputs, where the\n   * chrome's inner label would be the only one of its kind).\n   *\n   * `\"strip\"`: the 11px static label (and `hint`) in a strip OVER the bare group, for a\n   * group that stands in a row of fields but is not one (keksdose K2 — the transaction\n   * row's cleared-status picker, live #288 / #431 / dev#468). No field border: the group\n   * keeps its own box, and its segments drop their vertical padding and set a 16px line,\n   * so the 20px strip plus the 22px group is exactly a labelled {@link Input}'s 42px,\n   * the label on the same line as theirs and clear of the group's border (keksdose\n   * dev#593 — see `STRIP_SEGMENT`). `error` and `caption` go under the group, as in the\n   * other two.\n   *\n   * Inside a `Field`, pass no `label` at all and spread the render-prop instead —\n   * `{(ids, { labelId }) => <ToggleGroup {...ids} aria-labelledby={labelId} … />}` —\n   * so the Field's label names the group and its hint and error describe it.\n   */\n  labelPlacement?: \"field\" | \"above\" | \"strip\";\n  /**\n   * Classes for the field chrome's own box — the bordered, padded box round the\n   * segments — merged last, so they win. `className` styles the wrapper the chrome sits\n   * in; this reaches the box itself. Only with `label` in the `\"field\"` placement.\n   *\n   * For a field JOINED flush to a neighbour (keksdose K1): reports-filters.tsx joins its\n   * \"group by\" field to the range select on its start edge from `md` up, and squares the\n   * shared corners by hand chrome today — here that is\n   * `chromeClassName=\"md:rounded-s-none\"` with `className=\"md:-ms-px\"` (the wrapper\n   * overlaps the neighbour by the one border they share). A class rather than a\n   * `joined=\"start\"` because every such join keksdose has is responsive: on a phone the\n   * two stack and both keep their corners.\n   */\n  chromeClassName?: string;\n  /**\n   * As on a labelled {@link Select}: a {@link FieldHint} \"?\" on the label line, and plain\n   * text (a string) as a caption under the group. Only with `label`.\n   *\n   * 0.32.1 (keksdose's 0.32 report): text went on the label line in every placement, so\n   * `TextSizeSetting`'s hint with `labelPlacement=\"above\"` sat beside the label in body\n   * type, and at Extra large became a column one word wide — on the setting a reader who\n   * needs large text opens first. The label line holds the \"?\" only (`isTextHint`).\n   */\n  hint?: ReactNode;\n  /** The message under the field when it is wrong: paints the field's border with\n   *  `--danger`, marks the group `aria-invalid` and describes it with the message, as\n   *  {@link Select}'s `error` does. Only with `label`. */\n  error?: ReactNode;\n  /**\n   * Why the group cannot be changed right now — {@link Button}'s `disabledReason`, for\n   * a group that saves itself on change (keksdose K3: the last `SaveGuard` sites are\n   * self-committing controls like this one, and SaveGuard's native `disabled` took\n   * them out of the tab order so the reason never reached a keyboard).\n   *\n   * The group stays reachable — its segments are `aria-disabled`, not `disabled`, and\n   * a radio group's arrow keys still walk them — but nothing reaches `onChange`, and\n   * the reason shows in the kit {@link Tooltip} over the segments on hover or focus and\n   * describes each segment. The chosen option keeps its fill, as under `disabled`.\n   * Wins over `disabled`, as on Button: passing both keeps the group reachable.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where `disabledReason` shows (0.32, §4 \"No fact only in a tooltip\"): by default, at\n   * Large and on a touch screen, as a line under the group (where its caption goes), and\n   * in the tooltip over the segments otherwise. See {@link DisabledReasonDisplay}.\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This group COMMITS — choosing an option saves it. Under a locked\n   * {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n   * reason (which wins over a `disabledReason` of its own): *\"everything renders; only\n   * the commit is locked\"* (keksdose dev#496/#497), and a control that is its own commit\n   * must render refused, never live-and-discarding. No provider, or an unlocked one:\n   * no effect.\n   */\n  commit?: CommitScope;\n  /**\n   * The group — the `radiogroup` (or the pressed shape's `group`) the rest of the props go\n   * on — as a React 19 ref prop (0.34, API-3, refactor audit 2026-10). The group itself\n   * takes no focus, so its `focus()` lands where a keyboard would: the radio shape's one\n   * tab stop (the checked option, else the first), or in the pressed shape the pressed\n   * button, else the first. That is react-hook-form's focus-on-error, which /rhf's\n   * adapter reached by an id lookup carrying this same rule until now.\n   */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The field chrome's vertical geometry — keksdose K1, the kit reintroducing feedback\n * #117 that keksdose's hand-built chrome had fixed.\n *\n * In px at Normal, as measured; since 0.32 every term but the two borders is rem\n * (§3.2), so the sum stays a labelled Select's at 125 and 150 % too — the Select's own\n * `pt-4 pb-1` and 1.25rem line grow by the same factor (52 px at Large, 62 at Extra\n * large). The md line was `leading-[18px]` and is `leading-[1.125rem]`.\n *\n * The label is the field's static label: `top-1` and 11px in a `leading-tight` line, so\n * its line box runs from 4px to 17.75px. Until 0.22 the chrome was `pt-4` over a 20px\n * (`leading-5`) segment, so the ACTIVE segment's fill — painted from the top of the\n * segment — started at 17px (1px border + 16px), 0.75px INSIDE the label's line box:\n * the highlight touched the word above it, exactly what #117's rework had measured and\n * cured with `pt-5`.\n *\n * Now the strip is `pt-5` and the fill starts at 21px, 3.25px clear, and the segment\n * gives the 4px back so the field stays a labelled Select's 42px: `md` sets its 14px\n * text in an 18px line with a 2px moat under it (the bare group's own `p-0.5` moat),\n * `sm` sets 12px text in a 16px line over `pb-1` — keksdose's measured chrome\n * (price-level-picker, reports-filters: `pt-5 pb-1`, `text-xs md:py-0`), byte for byte.\n * Before, `size=\"sm\"` inside the chrome was overridden to the md 20px line.\n *\n *     md: 1 + 20 + 18 + 2 + 1 = 42        sm: 1 + 20 + 16 + 4 + 1 = 42\n */\n// At Large the chrome's label stands above it (0.33, §10.17): no strip, the same moat top\n// and bottom.\nconst CHROME_PAD: Record<\"sm\" | \"md\", string> = { md: \"pt-5 pb-0.5 large:pt-0.5\", sm: \"pt-5 pb-1 large:pt-1\" };\nconst CHROME_SEGMENT: Record<\"sm\" | \"md\", string> = { md: \"py-0 leading-[1.125rem]\", sm: \"py-0 leading-4\" };\n\n/**\n * A group at Large and Extra large (0.32,\n * docs/text-size-harmonization.md §4 \"nothing truncates\", §3.3): the segments flow onto a\n * second row inside the group's frame instead of overflowing it. At 125 % a 390 px phone\n * is 312 px of Normal type, and \"Month / Quarter / Half-year / Year\" in one row of the\n * field ran 7 px past it: a one-row flex group is as wide as all its labels end to end\n * when a grid or a stretched column asks how small it can get, however its segments\n * truncate. Wrapped, it is as wide as its longest label.\n *\n * Wrap, not a stacked select-like list: a wrapped radio group is the same radio group —\n * one Tab stop, and the arrow keys walk the options in reading order whichever row\n * they are on (←/↑ back, →/↓ on, Home/End) — so nothing about the keyboard changes with\n * the text size. A list in its place would be a second widget with its own keys.\n *\n * Only where it has to: `flex-wrap` breaks a row only when the segments do not fit, so\n * a wide field at Large stays one row, and a segment shares out what its row leaves\n * (`flex-1`); a label wider than the whole row still truncates as the last resort.\n * A `large:` class, so it costs no render and is right on the first paint.\n * `overflow=\"wrap\"` wraps at every size already.\n *\n * 0.32.1 (Kurvenschmiede's 0.32 report): every count and every placement, not only a\n * field of four or more. Since a row breaks only where its labels do not fit, a wrap\n * only ever replaces a truncation — and three options in a card at Extra large on a\n * 360 px phone read \"Syst… Li… D…\".\n *\n * 0.34 (round 0.34 T1, text size §10.17): the strip too, which 0.32.1 kept to one row so\n * its 26 px group lined up with the 42 px fields beside it (`STRIP_SEGMENT`). The size\n * sweep read \"Op…\" in its segments at 360 px / Extra large — the same \"Syst… Li… D…\" —\n * and a row of fields that grows to a taller cell (keksdose's status strip sits in an\n * `items-start` grid) is the smaller loss. At Normal, and wherever it fits, it is the\n * one row it was.\n */\nconst WRAP_AT_LARGE = \"large:flex-wrap\";\n\n/**\n * The strip placement's segments (keksdose dev#593, kk K4): a 22px group under the 20px\n * strip, which is a labelled Input's 42px at Normal —\n *\n *     strip 20 + group (1 + 2 + 16 + 2 + 1) 22 = 42 = Input (1 + 16 + 20 + 4 + 1)\n *\n * — both sizes setting their text in a 16px line with no padding (`md`'s 14px, `sm`'s\n * 12px). Until 0.34 the strip was 16px over a 26px group (a 20px line), and the label\n * row, which ends 18px down, crossed the group's top border by 2px; see\n * `LABEL_STRIP_PAD` in field-parts.tsx for the label row's sum. keksdose had the same\n * fix locally: `pt-5` and `@3xl:leading-4`.\n *\n * At Large and Extra large the label stands above the group and there is no strip to\n * share out, so the segments keep the line they had: `md` its text-sm line\n * (`large:leading-5` — a label that wraps there, WRAP_AT_LARGE, needs it), `sm` its 2px\n * either side.\n */\nconst STRIP_SEGMENT: Record<\"sm\" | \"md\", string> = {\n  md: \"py-0 leading-4 large:leading-5\",\n  sm: \"py-0 leading-4 large:py-0.5\",\n};\n\n/**\n * The strip placement's group is BLOCK-level (keksdose dev#593). Drawn `inline-flex`, it\n * sat on a line box of the strip's own line height, and a 22px box on a taller line\n * gained a pixel of leading above and below — 44px, not 42. Block-level, the group is\n * exactly its box. keksdose wrote it as `[&>[role=radiogroup]]:flex` on the strip.\n */\nconst STRIP_GROUP = \"flex\";\n\n/**\n * Where the group's `focus()` lands (see {@link ToggleGroupBaseProps.ref}): the radio\n * shape's one tab stop, or the pressed shape's pressed button — else the first option a\n * keyboard can reach. The rule /rhf's ToggleGroup adapter applied by id until 0.34.\n */\nfunction groupFocusTarget(group: HTMLElement): HTMLElement | null {\n  return (\n    group.querySelector<HTMLElement>('button[tabindex=\"0\"], button[aria-pressed=\"true\"]') ??\n    group.querySelector<HTMLElement>(\"button:not(:disabled)\")\n  );\n}\n\n/**\n * A line under the group saying what the CHOSEN option means — lenkbank's ToggleField\n * `hint` (features/gear/common.tsx:97): not help behind a \"?\" but a caption, and one\n * that changes as the choice does. Pass a function of the value for that; it is\n * attached with `aria-describedby`, and a function caption is also a polite live\n * region, because a description is read when the group is entered and not again when\n * an arrow key changes the choice underneath it.\n *\n * In muted caption-size text under the field (or the bare group), above an `error`.\n */\ntype ToggleGroupCaption<V> = ReactNode | ((value: V) => ReactNode);\n\n/** The group as it has always been: one option is always the answer. */\nexport interface ToggleGroupRequiredProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty?: false;\n  /**\n   * What the options ARE to a screen reader, separately from whether the group can be\n   * emptied (kastlan feedback #47).\n   *\n   *  - `\"radio\"` (default) — a `radiogroup` of radios: one Tab stop, arrow keys MOVE the\n   *    choice. Right for a choice between answers (\"Monthly / Yearly\").\n   *  - `\"pressed\"` — a `group` of toggle buttons (`aria-pressed`), each its own Tab stop,\n   *    Space/Enter to press; still one option always pressed. Right for a row that reads\n   *    as a set of switches — a view mode, a toolbar-like filter — where arrows moving the\n   *    selection on focus would be a surprise.\n   *\n   * Before this the only way to `aria-pressed` was `allowEmpty`, which also let a second\n   * press clear the choice — so kastlan took the clearable shape and threw the `null`\n   * away in `onChange` (`(v) => v && setMode(v)`), a group announcing that a press would\n   * unpress what it would not. Here a press on the pressed option re-sends its value, as\n   * the radio shape does, and nothing is ever unpressed. A clearable group\n   * (`allowEmpty`) is always `\"pressed\"`: a radio cannot be unchecked by activating it.\n   */\n  semantics?: \"radio\" | \"pressed\";\n  value: T;\n  onChange: (value: T) => void;\n  /** See {@link ToggleGroupCaption}. */\n  caption?: ToggleGroupCaption<T>;\n}\n\n/**\n * A group that can be emptied: clicking the active option clears it, and `onChange`\n * receives `null` (Keksdose's support-panel filters, where \"no filter\" is reached by\n * clicking the filter that is on).\n *\n * The options become TOGGLE BUTTONS (`aria-pressed`, in a `role=\"group\"`) rather than\n * radios. A radio cannot be unchecked by activating it — no screen reader user expects\n * a second press on \"Open, radio, checked\" to leave nothing checked, and nothing would\n * tell them it had. \"Open, toggle button, pressed\" says exactly what a press will do.\n */\nexport interface ToggleGroupClearableProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty: true;\n  /** Always toggle buttons — see {@link ToggleGroupRequiredProps.semantics}. Accepted so\n   *  a wrapper can forward one `semantics` to either shape. */\n  semantics?: \"pressed\";\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** See {@link ToggleGroupCaption}. `null` while nothing is chosen. */\n  caption?: ToggleGroupCaption<T | null>;\n}\n\n/** `allowEmpty` picks the shape, so `onChange` is typed `(T) => void` unless the group\n *  can actually emit `null` — no existing caller has a `null` to handle. */\nexport type ToggleGroupProps<T extends string> = ToggleGroupRequiredProps<T> | ToggleGroupClearableProps<T>;\n\n/**\n * Overloaded rather than typed by the union alone (keksdose, \"Gaps found adopting\n * 0.6.0\" #7). Inferring `T` through a union of prop shapes let TypeScript settle on\n * `string`, so `<ToggleGroup allowEmpty value={filter} onChange={setFilter} />` over a\n * `useState<Status | null>` did not compile unless the caller spelled\n * `<ToggleGroup<Status>>`. One signature per mode lets each infer `T` from its own\n * `value`/`onChange`/`options`; the third keeps a caller that forwards a\n * {@link ToggleGroupProps} union (a wrapper component) compiling.\n */\nexport function ToggleGroup<T extends string>(props: ToggleGroupClearableProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupRequiredProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement {\n  const {\n    value,\n    options,\n    className,\n    optionClassName,\n    overflow = \"truncate\",\n    disabled = false,\n    size = \"md\",\n    label,\n    labelPlacement = \"field\",\n    chromeClassName,\n    hint,\n    help,\n    error,\n    disabledReason: ownDisabledReason,\n    disabledReasonDisplay,\n    commit,\n    \"aria-label\": ariaLabelAttr,\n    ref,\n    ...restWithMode\n  } = props;\n  const labelId = useId();\n  const errorId = useId();\n  const reasonId = useId();\n  const hintCaptionId = useId();\n  // The group's `focus()` is a no-op on a div with no tabindex; the caller's ref gets one\n  // that lands where the keyboard would (see `ref`).\n  const setGroup = useCallback(\n    (el: HTMLDivElement | null) => {\n      if (el) el.focus = (options?: FocusOptions) => groupFocusTarget(el)?.focus(options);\n      assignRef(ref, el);\n    },\n    [ref],\n  );\n  // The lock's reason under a locked provider (with `commit`), else the group's own.\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  // §4: at Large and on touch the reason is a line under the group, not a bubble.\n  const reasonLine = useDisabledReasonLine(disabledReasonDisplay) && locked;\n  // §4: likewise a FieldHint \"?\" on the label line becomes a caption under the group at\n  // Large and on touch; text is a caption at every size, as Select's (see `hint`). With\n  // a `help` (0.36, only with `label`, as `hint`), its \"?\" is the label line's only one,\n  // and the hint — a FieldHint's words included — is the caption at every size.\n  const helpMark = fieldHelpMark(hasContent(label) ? help : undefined, label);\n  const withHelp = helpMark !== undefined;\n  const inlineHint = useInlineHint(hint, withHelp);\n  const hintAsCaption = withHelp\n    ? hasContent(inlineHint)\n      ? inlineHint\n      : undefined\n    : isTextHint(hint)\n      ? hint\n      : inlineHint !== hint\n        ? inlineHint\n        : undefined;\n  const labelHint = helpMark ?? (hintAsCaption === undefined ? hint : undefined);\n  // Locked looks disabled — the dimmed group, the not-allowed cursor, no hover offer —\n  // but stays focusable; `disabled` alone also takes the segments out of the tab order.\n  const dimmed = disabled || locked;\n  const labelled = hasContent(label);\n  // `field` is the chrome; a label placed above or in a strip keeps the bare group's\n  // own box.\n  const field = labelled && labelPlacement === \"field\";\n  const above = labelled && labelPlacement === \"above\";\n  const strip = labelled && labelPlacement === \"strip\";\n  // At Large and Extra large a truncating group wraps instead, the strip too since 0.34\n  // (see WRAP_AT_LARGE).\n  const wrapAtLarge = overflow === \"truncate\";\n  const hasError = labelled && hasContent(error);\n  // Taken off the rest so neither reaches the DOM; `props` keeps them paired, which is\n  // what lets the `onChange` below be called with `null` only in the mode that allows it.\n  const { allowEmpty: _allowEmpty, onChange: _onChange, caption, semantics: _semantics, ...rest } = restWithMode;\n  // Invalid from outside too: a `Field` hands the bare group `aria-invalid`, and the\n  // border has to say what the attribute says.\n  const outsideInvalid = rest[\"aria-invalid\"] === true || rest[\"aria-invalid\"] === \"true\";\n  const captionId = useId();\n  const captionIsLive = typeof caption === \"function\";\n  const captionNode = captionIsLive ? (caption as (v: T | null) => ReactNode)(value) : caption;\n  const hasCaption = hasContent(captionNode);\n  const choose = (next: T) => {\n    // A locked group swallows the change: it saves on change, and a lock that let the\n    // value move and then discarded it would show a state that was never stored.\n    if (locked) return;\n    if (props.allowEmpty) props.onChange(next === value ? null : next);\n    else props.onChange(next);\n  };\n  // `pressed`: toggle buttons. Every clearable group is; a required one is when it asks\n  // (kastlan #47) — the role, and not whether a second press clears, is what this flag\n  // decides from here on, so `choose` above still keys off `allowEmpty` alone.\n  const pressed = props.allowEmpty === true || props.semantics === \"pressed\";\n  // A radio group is ONE tab stop (the checked radio, else the first) and arrows move\n  // the choice — the pattern `role=\"radiogroup\"` promises a screen-reader user. Before\n  // 0.7.0 each segment was its own tab stop with no arrow keys. The toggle-button shape\n  // is a row of buttons, where separate tab stops are the pattern.\n  const tabStop = options.some((o) => o.value === value) ? value : options[0]?.value;\n  const onRadioKey = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const last = options.length - 1;\n    let next: number | null = null;\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step !== 0) next = index + step;\n    else if (e.key === \"ArrowDown\") next = index + 1;\n    else if (e.key === \"ArrowUp\") next = index - 1;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = last;\n    if (next === null) return;\n    e.preventDefault();\n    next = next < 0 ? last : next > last ? 0 : next;\n    // The segments' own parent: the group, or under a lock the tooltip's row inside it.\n    const buttons = e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\":scope > button\");\n    buttons?.[next]?.focus();\n    // Locked: the focus walks (each segment says why on arrival), the choice does not.\n    choose(options[next].value);\n  };\n  const segments = options.map((opt, index) => {\n    const active = opt.value === value;\n    return (\n      <button\n        key={opt.value}\n        type=\"button\"\n        role={pressed ? undefined : \"radio\"}\n        aria-checked={pressed ? undefined : active}\n        aria-pressed={pressed ? active : undefined}\n        // A reason wins over `disabled` (as on Button): reachable, and refusing.\n        disabled={disabled && !locked}\n        aria-disabled={locked || undefined}\n        // On each segment rather than the group: the segment is what takes focus, and\n        // a group's description is not read reliably when focus lands inside it.\n        aria-describedby={locked ? reasonId : undefined}\n        tabIndex={pressed ? undefined : opt.value === tabStop ? 0 : -1}\n        onKeyDown={pressed ? undefined : (e) => onRadioKey(e, index)}\n        onClick={() => choose(opt.value)}\n        className={cn(\n          // `truncate` (which carries whitespace-nowrap) rather than letting a\n          // label wrap: a segmented control sizes its whole row to the tallest\n          // option, so one two-word option — Keksdose feedback #147's \"Where I\n          // am\" — silently doubles the height of every segment beside it.\n          //\n          // `basis-auto` is what keeps that ellipsis a LAST resort rather than\n          // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a\n          // shrink-to-fit group (`w-auto`) still resolves to the sum of the\n          // labels' widths — and then splits it EQUALLY, so the short option\n          // got 66px it did not need and \"Where I am\" got 66 of the 81 it did:\n          // truncated at 1778px of free screen. Basing each segment on its own\n          // content and sharing only the LEFTOVER space keeps a full-width\n          // group's segments near-equal and an auto-width group's exact.\n          //\n          // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring\n          // is a box-shadow that spreads OUTWARD, so on a flush group it painted\n          // 2px of ring over both neighbours and over the container's own border\n          // — and on a phone it appeared on every TAP, because a tap focuses the\n          // button. That is the other half of what live #268's rework saw\n          // overlaying the selected segment's boundary. Inset keeps the ring\n          // inside the segment it belongs to; focus-visible keeps it for the\n          // keyboard, which is the only input that needs it.\n          //\n          // The ring is the kit's focus frame (0.32, §5): `--focus-ring-width` wide.\n          //\n          // From Large up the group wraps its ROW first (WRAP_AT_LARGE), so a segment's\n          // own text breaks only when one label is wider than a whole row — and then it\n          // wraps rather than ending in an ellipsis (`truncate-until-large`, text size\n          // §10.17; round 0.34 T1: the sweep read 'confirmVariant=\"da…' at 360 px).\n          overflow === \"wrap\" ? \"whitespace-nowrap\" : \"min-w-0 truncate-until-large\",\n          \"flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-inset focus-visible:ring-strong\",\n          FOCUS_RING_WIDTH,\n          size === \"sm\" && \"px-2 py-1 text-xs\",\n          // In the field chrome: no vertical padding, and the line that makes the\n          // field 42px under a strip that clears the label — see CHROME_PAD. `sm`\n          // keeps its 12px type here (it used to be overridden to the md line).\n          field && CHROME_SEGMENT[size],\n          // In the strip placement: a 22px group under a 20px strip — STRIP_SEGMENT.\n          strip && STRIP_SEGMENT[size],\n          active ? \"bg-inverse text-inverse\" : \"text-secondary hover:bg-hover\",\n          // No hover fill on a group that cannot be changed — a segment that\n          // lights up under the pointer is an offer, and there is none here. Not on\n          // the chosen segment: its fill IS its state, and its inverse text would\n          // vanish on a transparent hover.\n          dimmed && \"cursor-not-allowed\",\n          dimmed && !active && \"hover:bg-transparent dark:hover:bg-transparent\",\n          optionClassName,\n          opt.className,\n        )}\n      >\n        {opt.label}\n      </button>\n    );\n  });\n  const group = (\n    <div\n      // The audit's named example of a closed prop list (§\"Public API design\"): the\n      // tour locates a step by CSS SELECTOR, so a component that drops every attribute\n      // it was not expecting cannot be spotlighted at all — and Keksdose's rule editor\n      // carries a comment explaining that it wraps this group in a bare <div> for\n      // exactly that reason.\n      //\n      // `...rest` first, then the attributes the group cannot do without: a caller\n      // hanging an anchor or a test id on the group must not be able to overwrite the\n      // radiogroup role or the disabled state by accident. `className` is destructured\n      // out entirely and merged through `cn`, so it is never in here.\n      {...rest}\n      ref={setGroup}\n      role={pressed ? \"group\" : \"radiogroup\"}\n      aria-label={ariaLabelAttr}\n      aria-labelledby={labelled && ariaLabelAttr === undefined ? labelId : rest[\"aria-labelledby\"]}\n      aria-invalid={hasError || rest[\"aria-invalid\"] || undefined}\n      aria-describedby={\n        [\n          rest[\"aria-describedby\"],\n          hintAsCaption !== undefined && hintCaptionId,\n          hasCaption && captionId,\n          hasError && errorId,\n        ]\n          .filter(Boolean)\n          .join(\" \") || undefined\n      }\n      // `aria-disabled` on the group as well as on (or `disabled` on) each button: a\n      // radio group is what the user is being refused, and a screen reader announcing\n      // three separately-disabled radios does not say that.\n      aria-disabled={dimmed || undefined}\n      className={cn(\n        // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment\n        // sits in a uniform 2px moat and no two fills ever touch. Flush segments were\n        // Keksdose live #268's rework: the pressed segment wears a saturated fill and\n        // an unpressed neighbour wears a pale hover fill, and with a shared edge the\n        // two rectangles read as one smeared shape — *\"the boundary of the selected\n        // option and hovering next to it overlays the boundary of the selected\n        // button\"*. A gap is what makes each segment its own chip; it cannot be\n        // undone by a caller's per-option colour, which a hover-only fix could.\n        //\n        // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every\n        // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a\n        // phone does see is the focus ring — see the segment's own note below.)\n        \"inline-flex w-full gap-0.5 rounded-md border border-strong bg-surface p-0.5 shadow-sm\",\n        // Block-level under the strip, so it adds no line box's leading — STRIP_GROUP.\n        strip && STRIP_GROUP,\n        overflow === \"wrap\" && \"flex-wrap\",\n        wrapAtLarge && WRAP_AT_LARGE,\n        // The whole group fades, the way every other disabled control in this\n        // package does; `cursor-not-allowed` is on the buttons, which is what a\n        // pointer is actually over.\n        dimmed && \"opacity-60\",\n        // The bare group (no chrome to paint) wears the invalid border itself.\n        !field && (outsideInvalid || ((above || strip) && hasError)) && FIELD_INVALID,\n        // Inside the field's chrome the group is only a row of segments: no border, no\n        // surface, no padding of its own, and the field (not the group) is what dims.\n        field && \"border-0 bg-transparent p-0 shadow-none opacity-100\",\n        !labelled && className,\n      )}\n    >\n      {locked && !reasonLine ? (\n        // The reason's bubble wraps the SEGMENTS, inside the group, not the group: a\n        // wrapper outside it would become the flex or grid item in the caller's row in\n        // the group's place, and a `w-full` / `md:w-auto` on the group would size the\n        // wrong box. This row inherits the group's gap and wrap, so the segments lay out\n        // exactly as they do unlocked, and `:scope > button` above still finds them. A\n        // fragment child, so the Tooltip describes nothing itself — each segment points\n        // at the hidden copy, the way a locked Button does.\n        <Tooltip label={disabledReason} className=\"flex min-w-0 flex-1 gap-[inherit] [flex-wrap:inherit]\">\n          <>\n            {segments}\n            <span id={reasonId} hidden>\n              {disabledReason}\n            </span>\n          </>\n        </Tooltip>\n      ) : (\n        segments\n      )}\n    </div>\n  );\n  // Rendered whenever the caption is — `aria-live` must be on the element BEFORE its\n  // text changes, or the change is not announced — but empty (no height, no margin)\n  // when there is nothing to say, so a function caption that returns null for some\n  // options leaves no gap. Empty rather than `hidden`: some readers do not announce\n  // text that appears inside an element coming back from `display: none`.\n  const captionEl =\n    hasCaption || captionIsLive ? (\n      <p\n        id={captionId}\n        aria-live={captionIsLive ? \"polite\" : undefined}\n        className={cn(\"text-caption leading-snug text-muted\", hasCaption && \"mt-1\")}\n      >\n        {hasCaption ? captionNode : null}\n      </p>\n    ) : null;\n  const errorEl = hasError ? (\n    <p id={errorId} className={FIELD_ERROR_CLASS}>\n      {error}\n    </p>\n  ) : null;\n  // §4: the FieldHint's words and the lock's reason, under the group, before the caption\n  // (standing advice first) and the error (the news). The reason line IS what each\n  // segment's `aria-describedby` names.\n  const belowEl =\n    hintAsCaption !== undefined || reasonLine ? (\n      <>\n        {hintAsCaption !== undefined && (\n          <p id={hintCaptionId} className={FIELD_CAPTION_CLASS}>\n            {hintAsCaption}\n          </p>\n        )}\n        {reasonLine && (\n          <p id={reasonId} className={DISABLED_REASON_LINE_CLASS}>\n            {disabledReason}\n          </p>\n        )}\n      </>\n    ) : null;\n  if (above) {\n    // `relative` so a caller's `sr-only` label cannot escape (sr-only-containment).\n    return (\n      <div className={cn(\"relative grid min-w-0 gap-1.5\", className)}>\n        <div className=\"flex items-center gap-1\">\n          {/* A `<label>` with no `htmlFor`: a group is not labelable, so it is named\n              by `aria-labelledby` on the group; the element keeps the Field look. */}\n          <Label\n            id={labelId}\n            disabled={dimmed}\n            data-error={hasError || undefined}\n            className=\"data-[error=true]:text-danger\"\n          >\n            {label}\n          </Label>\n          {labelHint}\n        </div>\n        <div className=\"min-w-0\">\n          {group}\n          {belowEl}\n          {captionEl}\n          {errorEl}\n        </div>\n      </div>\n    );\n  }\n  if (strip) {\n    return (\n      <LabelStrip labelId={labelId} label={label} hint={labelHint} disabled={dimmed} className={className}>\n        {group}\n        {belowEl}\n        {captionEl}\n        {errorEl}\n      </LabelStrip>\n    );\n  }\n  if (!field) {\n    if (!captionEl && !belowEl) return group;\n    // The group keeps its `className`, as without a caption; the wrapper only stacks.\n    return (\n      <div className=\"min-w-0\">\n        {group}\n        {belowEl}\n        {captionEl}\n      </div>\n    );\n  }\n  return (\n    // `h-full` + `flex-1`: the chrome fills a grid or stretched flex row, which is what\n    // levels it with a select beside it whatever the browser makes of the select.\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <FloatingField\n        className=\"flex flex-1 flex-col\"\n        label={<span id={labelId}>{label}</span>}\n        staticLabel\n        hint={labelHint}\n      >\n        <div\n          className={cn(\n            \"flex flex-1 flex-col justify-center rounded-md border border-subtle bg-surface px-1 shadow-sm\",\n            CHROME_PAD[size],\n            dimmed && \"bg-surface-2 opacity-60\",\n            hasError && FIELD_INVALID,\n            chromeClassName,\n          )}\n        >\n          {group}\n        </div>\n      </FloatingField>\n      {belowEl}\n      {captionEl}\n      {errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":["options"]}
+{"version":3,"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import { useCallback, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { FIELD_INVALID, FloatingField, Label } from \"./field-base\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport { hasContent } from \"../lib/presence\";\nimport {\n  assignRef,\n  DISABLED_REASON_LINE_CLASS,\n  FIELD_CAPTION_CLASS,\n  FIELD_ERROR_CLASS,\n  fieldHelpMark,\n  isSuggestionHint,\n  isTextHint,\n  LabelStrip,\n  useDisabledReasonLine,\n  useInlineHint,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n} from \"./field-parts\";\nimport { FOCUS_RING_WIDTH } from \"./focus-ring\";\n\nexport interface ToggleOption<T extends string> {\n  value: T;\n  label: string;\n  className?: string;\n}\n\n/**\n * `onChange` is the group's own — the chosen VALUE, not a DOM event — so the div's\n * `onChange` is omitted rather than shadowed: leaving both in scope would give the\n * prop two incompatible meanings depending on which overload TypeScript picked.\n *\n * `children` is omitted too: this renders its `options` and nothing else, so a `children` the type\n * accepted and the component ignored would be a prop that silently does nothing —\n * worse than one that does not compile.\n */\nexport interface ToggleGroupBaseProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\">, FieldHelpProps {\n  options: ToggleOption<T>[];\n  className?: string;\n  /** Applied to every option button (e.g. to tune height/rounding to match\n   *  adjacent fields). Per-option `className` still wins over this. */\n  optionClassName?: string;\n  /**\n   * What happens when the options do not fit the group's width. `\"truncate\"`\n   * (default): one row, and the labels that do not fit end in an ellipsis — the height\n   * never changes. `\"wrap\"`: the segments flow onto a second row and every label stays\n   * whole (\"Bewegung\", not \"Beweg…\"), at the price of a taller group on a narrow\n   * screen (lenkbank L4: five signal types on a 390px control page). From the width\n   * where they fit, both look the same.\n   *\n   * Since 0.32 a group in the field chrome (`label`, the default placement) with four or\n   * more options wraps at Large and Extra large under `\"truncate\"` too, inside its frame:\n   * the type is bigger there and the field would otherwise run past a phone's edge\n   * (docs/text-size-harmonization.md §4). The keyboard is the same either way.\n   */\n  overflow?: \"truncate\" | \"wrap\";\n  /**\n   * Show, refuse the change (Keksdose live #288: a payment dated in the future has no\n   * state to set).\n   *\n   * Whatever `value` says stays pressed and keeps its own fill rather than going grey\n   * with the rest — a reader who cannot see WHICH option is chosen has been told less\n   * than before it was disabled. A caller with nothing to show passes no value, and\n   * the group renders dimmed with nothing pressed, which is the shape Keksdose's\n   * status picker uses for a row whose status does not exist yet.\n   *\n   * On the whole GROUP, not per option: a segmented control where some segments are\n   * live and others are not is a menu with holes in it, and no caller here wants one.\n   */\n  disabled?: boolean;\n  /**\n   * `sm`: 12px options with `px-2 py-1` — the compact group keksdose's rule editor\n   * (rule-editor:204) writes as `optionClassName=\"px-2 py-1 text-xs\"` beside a small\n   * caption. `md` (default) is the size every other group has.\n   *\n   * Honoured inside the field chrome and the strip too (keksdose K1): the 12px type\n   * stays, and the field is still 42px — see `CHROME_PAD`.\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Stand in a form row as a FIELD: with a label the group wears the field's chrome —\n   * border, surface, the top strip with a small static label in it, a labelled\n   * {@link Select}'s height — so beside an Input or a Select it reads as one of them\n   * rather than as a control with a caption over it. lenkbank builds exactly this by\n   * hand as `ToggleField` (features/gear/common.tsx:97, feedback #69), and its notes\n   * are why the chrome STRETCHES to its row as well as matching the select's padding:\n   * a native select's height is the browser's, so a toggle a few pixels short of it\n   * is levelled up by the row rather than by arithmetic.\n   *\n   * The label names the group (`aria-labelledby`), so `aria-label` is not needed. With\n   * a label, `className` styles the field's wrapper — as on {@link Select} — and the\n   * group's own box is dropped: two nested borders read as a control in a control.\n   */\n  label?: ReactNode;\n  /**\n   * Where `label` goes. `\"field\"` (default): the field chrome described under `label`.\n   * `\"above\"`: the kit's {@link Label} over the bare group — the shape of a {@link Field}\n   * — with `hint` beside the label and `error` under the group, for a form that sets\n   * its labels above its fields (kastlan's international-rent-calculator.tsx, whose DE\n   * cap pair sits in a `Field` column between two labelled-above inputs, where the\n   * chrome's inner label would be the only one of its kind).\n   *\n   * `\"strip\"`: the 11px static label (and `hint`) in a strip OVER the bare group, for a\n   * group that stands in a row of fields but is not one (keksdose K2 — the transaction\n   * row's cleared-status picker, live #288 / #431 / dev#468). No field border: the group\n   * keeps its own box, and its segments drop their vertical padding and set a 16px line,\n   * so the 20px strip plus the 22px group is exactly a labelled {@link Input}'s 42px,\n   * the label on the same line as theirs and clear of the group's border (keksdose\n   * dev#593 — see `STRIP_SEGMENT`). `error` and `caption` go under the group, as in the\n   * other two.\n   *\n   * Inside a `Field`, pass no `label` at all and spread the render-prop instead —\n   * `{(ids, { labelId }) => <ToggleGroup {...ids} aria-labelledby={labelId} … />}` —\n   * so the Field's label names the group and its hint and error describe it.\n   */\n  labelPlacement?: \"field\" | \"above\" | \"strip\";\n  /**\n   * Classes for the field chrome's own box — the bordered, padded box round the\n   * segments — merged last, so they win. `className` styles the wrapper the chrome sits\n   * in; this reaches the box itself. Only with `label` in the `\"field\"` placement.\n   *\n   * For a field JOINED flush to a neighbour (keksdose K1): reports-filters.tsx joins its\n   * \"group by\" field to the range select on its start edge from `md` up, and squares the\n   * shared corners by hand chrome today — here that is\n   * `chromeClassName=\"md:rounded-s-none\"` with `className=\"md:-ms-px\"` (the wrapper\n   * overlaps the neighbour by the one border they share). A class rather than a\n   * `joined=\"start\"` because every such join keksdose has is responsive: on a phone the\n   * two stack and both keep their corners.\n   */\n  chromeClassName?: string;\n  /**\n   * As on a labelled {@link Select}: a {@link FieldHint} \"?\" on the label line, and plain\n   * text (a string) as a caption under the group. Only with `label`.\n   *\n   * 0.32.1 (keksdose's 0.32 report): text went on the label line in every placement, so\n   * `TextSizeSetting`'s hint with `labelPlacement=\"above\"` sat beside the label in body\n   * type, and at Extra large became a column one word wide — on the setting a reader who\n   * needs large text opens first. The label line holds the \"?\" only (`isTextHint`).\n   */\n  hint?: ReactNode;\n  /** The message under the field when it is wrong: paints the field's border with\n   *  `--danger`, marks the group `aria-invalid` and describes it with the message, as\n   *  {@link Select}'s `error` does. Only with `label`. */\n  error?: ReactNode;\n  /**\n   * Why the group cannot be changed right now — {@link Button}'s `disabledReason`, for\n   * a group that saves itself on change (keksdose K3: the last `SaveGuard` sites are\n   * self-committing controls like this one, and SaveGuard's native `disabled` took\n   * them out of the tab order so the reason never reached a keyboard).\n   *\n   * The group stays reachable — its segments are `aria-disabled`, not `disabled`, and\n   * a radio group's arrow keys still walk them — but nothing reaches `onChange`, and\n   * the reason shows in the kit {@link Tooltip} over the segments on hover or focus and\n   * describes each segment. The chosen option keeps its fill, as under `disabled`.\n   * Wins over `disabled`, as on Button: passing both keeps the group reachable.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where `disabledReason` shows (0.32, §4 \"No fact only in a tooltip\"): by default, at\n   * Large and on a touch screen, as a line under the group (where its caption goes), and\n   * in the tooltip over the segments otherwise. See {@link DisabledReasonDisplay}.\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This group COMMITS — choosing an option saves it. Under a locked\n   * {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n   * reason (which wins over a `disabledReason` of its own): *\"everything renders; only\n   * the commit is locked\"* (keksdose dev#496/#497), and a control that is its own commit\n   * must render refused, never live-and-discarding. No provider, or an unlocked one:\n   * no effect.\n   */\n  commit?: CommitScope;\n  /**\n   * The group — the `radiogroup` (or the pressed shape's `group`) the rest of the props go\n   * on — as a React 19 ref prop (0.34, API-3, refactor audit 2026-10). The group itself\n   * takes no focus, so its `focus()` lands where a keyboard would: the radio shape's one\n   * tab stop (the checked option, else the first), or in the pressed shape the pressed\n   * button, else the first. That is react-hook-form's focus-on-error, which /rhf's\n   * adapter reached by an id lookup carrying this same rule until now.\n   */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The field chrome's vertical geometry — keksdose K1, the kit reintroducing feedback\n * #117 that keksdose's hand-built chrome had fixed.\n *\n * In px at Normal, as measured; since 0.32 every term but the two borders is rem\n * (§3.2), so the sum stays a labelled Select's at 125 and 150 % too — the Select's own\n * `pt-4 pb-1` and 1.25rem line grow by the same factor (52 px at Large, 62 at Extra\n * large). The md line was `leading-[18px]` and is `leading-[1.125rem]`.\n *\n * The label is the field's static label: `top-1` and 11px in a `leading-tight` line, so\n * its line box runs from 4px to 17.75px. Until 0.22 the chrome was `pt-4` over a 20px\n * (`leading-5`) segment, so the ACTIVE segment's fill — painted from the top of the\n * segment — started at 17px (1px border + 16px), 0.75px INSIDE the label's line box:\n * the highlight touched the word above it, exactly what #117's rework had measured and\n * cured with `pt-5`.\n *\n * Now the strip is `pt-5` and the fill starts at 21px, 3.25px clear, and the segment\n * gives the 4px back so the field stays a labelled Select's 42px: `md` sets its 14px\n * text in an 18px line with a 2px moat under it (the bare group's own `p-0.5` moat),\n * `sm` sets 12px text in a 16px line over `pb-1` — keksdose's measured chrome\n * (price-level-picker, reports-filters: `pt-5 pb-1`, `text-xs md:py-0`), byte for byte.\n * Before, `size=\"sm\"` inside the chrome was overridden to the md 20px line.\n *\n *     md: 1 + 20 + 18 + 2 + 1 = 42        sm: 1 + 20 + 16 + 4 + 1 = 42\n */\n// At Large the chrome's label stands above it (0.33, §10.17): no strip, the same moat top\n// and bottom.\nconst CHROME_PAD: Record<\"sm\" | \"md\", string> = { md: \"pt-5 pb-0.5 large:pt-0.5\", sm: \"pt-5 pb-1 large:pt-1\" };\nconst CHROME_SEGMENT: Record<\"sm\" | \"md\", string> = { md: \"py-0 leading-[1.125rem]\", sm: \"py-0 leading-4\" };\n\n/**\n * A group at Large and Extra large (0.32,\n * docs/text-size-harmonization.md §4 \"nothing truncates\", §3.3): the segments flow onto a\n * second row inside the group's frame instead of overflowing it. At 125 % a 390 px phone\n * is 312 px of Normal type, and \"Month / Quarter / Half-year / Year\" in one row of the\n * field ran 7 px past it: a one-row flex group is as wide as all its labels end to end\n * when a grid or a stretched column asks how small it can get, however its segments\n * truncate. Wrapped, it is as wide as its longest label.\n *\n * Wrap, not a stacked select-like list: a wrapped radio group is the same radio group —\n * one Tab stop, and the arrow keys walk the options in reading order whichever row\n * they are on (←/↑ back, →/↓ on, Home/End) — so nothing about the keyboard changes with\n * the text size. A list in its place would be a second widget with its own keys.\n *\n * Only where it has to: `flex-wrap` breaks a row only when the segments do not fit, so\n * a wide field at Large stays one row, and a segment shares out what its row leaves\n * (`flex-1`); a label wider than the whole row still truncates as the last resort.\n * A `large:` class, so it costs no render and is right on the first paint.\n * `overflow=\"wrap\"` wraps at every size already.\n *\n * 0.32.1 (Kurvenschmiede's 0.32 report): every count and every placement, not only a\n * field of four or more. Since a row breaks only where its labels do not fit, a wrap\n * only ever replaces a truncation — and three options in a card at Extra large on a\n * 360 px phone read \"Syst… Li… D…\".\n *\n * 0.34 (round 0.34 T1, text size §10.17): the strip too, which 0.32.1 kept to one row so\n * its 26 px group lined up with the 42 px fields beside it (`STRIP_SEGMENT`). The size\n * sweep read \"Op…\" in its segments at 360 px / Extra large — the same \"Syst… Li… D…\" —\n * and a row of fields that grows to a taller cell (keksdose's status strip sits in an\n * `items-start` grid) is the smaller loss. At Normal, and wherever it fits, it is the\n * one row it was.\n */\nconst WRAP_AT_LARGE = \"large:flex-wrap\";\n\n/**\n * The strip placement's segments (keksdose dev#593, kk K4): a 22px group under the 20px\n * strip, which is a labelled Input's 42px at Normal —\n *\n *     strip 20 + group (1 + 2 + 16 + 2 + 1) 22 = 42 = Input (1 + 16 + 20 + 4 + 1)\n *\n * — both sizes setting their text in a 16px line with no padding (`md`'s 14px, `sm`'s\n * 12px). Until 0.34 the strip was 16px over a 26px group (a 20px line), and the label\n * row, which ends 18px down, crossed the group's top border by 2px; see\n * `LABEL_STRIP_PAD` in field-parts.tsx for the label row's sum. keksdose had the same\n * fix locally: `pt-5` and `@3xl:leading-4`.\n *\n * At Large and Extra large the label stands above the group and there is no strip to\n * share out, so the segments keep the line they had: `md` its text-sm line\n * (`large:leading-5` — a label that wraps there, WRAP_AT_LARGE, needs it), `sm` its 2px\n * either side.\n */\nconst STRIP_SEGMENT: Record<\"sm\" | \"md\", string> = {\n  md: \"py-0 leading-4 large:leading-5\",\n  sm: \"py-0 leading-4 large:py-0.5\",\n};\n\n/**\n * The strip placement's group is BLOCK-level (keksdose dev#593). Drawn `inline-flex`, it\n * sat on a line box of the strip's own line height, and a 22px box on a taller line\n * gained a pixel of leading above and below — 44px, not 42. Block-level, the group is\n * exactly its box. keksdose wrote it as `[&>[role=radiogroup]]:flex` on the strip.\n */\nconst STRIP_GROUP = \"flex\";\n\n/**\n * Where the group's `focus()` lands (see {@link ToggleGroupBaseProps.ref}): the radio\n * shape's one tab stop, or the pressed shape's pressed button — else the first option a\n * keyboard can reach. The rule /rhf's ToggleGroup adapter applied by id until 0.34.\n */\nfunction groupFocusTarget(group: HTMLElement): HTMLElement | null {\n  return (\n    group.querySelector<HTMLElement>('button[tabindex=\"0\"], button[aria-pressed=\"true\"]') ??\n    group.querySelector<HTMLElement>(\"button:not(:disabled)\")\n  );\n}\n\n/**\n * A line under the group saying what the CHOSEN option means — lenkbank's ToggleField\n * `hint` (features/gear/common.tsx:97): not help behind a \"?\" but a caption, and one\n * that changes as the choice does. Pass a function of the value for that; it is\n * attached with `aria-describedby`, and a function caption is also a polite live\n * region, because a description is read when the group is entered and not again when\n * an arrow key changes the choice underneath it.\n *\n * In muted caption-size text under the field (or the bare group), above an `error`.\n */\ntype ToggleGroupCaption<V> = ReactNode | ((value: V) => ReactNode);\n\n/** The group as it has always been: one option is always the answer. */\nexport interface ToggleGroupRequiredProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty?: false;\n  /**\n   * What the options ARE to a screen reader, separately from whether the group can be\n   * emptied (kastlan feedback #47).\n   *\n   *  - `\"radio\"` (default) — a `radiogroup` of radios: one Tab stop, arrow keys MOVE the\n   *    choice. Right for a choice between answers (\"Monthly / Yearly\").\n   *  - `\"pressed\"` — a `group` of toggle buttons (`aria-pressed`), each its own Tab stop,\n   *    Space/Enter to press; still one option always pressed. Right for a row that reads\n   *    as a set of switches — a view mode, a toolbar-like filter — where arrows moving the\n   *    selection on focus would be a surprise.\n   *\n   * Before this the only way to `aria-pressed` was `allowEmpty`, which also let a second\n   * press clear the choice — so kastlan took the clearable shape and threw the `null`\n   * away in `onChange` (`(v) => v && setMode(v)`), a group announcing that a press would\n   * unpress what it would not. Here a press on the pressed option re-sends its value, as\n   * the radio shape does, and nothing is ever unpressed. A clearable group\n   * (`allowEmpty`) is always `\"pressed\"`: a radio cannot be unchecked by activating it.\n   */\n  semantics?: \"radio\" | \"pressed\";\n  value: T;\n  onChange: (value: T) => void;\n  /** See {@link ToggleGroupCaption}. */\n  caption?: ToggleGroupCaption<T>;\n}\n\n/**\n * A group that can be emptied: clicking the active option clears it, and `onChange`\n * receives `null` (Keksdose's support-panel filters, where \"no filter\" is reached by\n * clicking the filter that is on).\n *\n * The options become TOGGLE BUTTONS (`aria-pressed`, in a `role=\"group\"`) rather than\n * radios. A radio cannot be unchecked by activating it — no screen reader user expects\n * a second press on \"Open, radio, checked\" to leave nothing checked, and nothing would\n * tell them it had. \"Open, toggle button, pressed\" says exactly what a press will do.\n */\nexport interface ToggleGroupClearableProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty: true;\n  /** Always toggle buttons — see {@link ToggleGroupRequiredProps.semantics}. Accepted so\n   *  a wrapper can forward one `semantics` to either shape. */\n  semantics?: \"pressed\";\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** See {@link ToggleGroupCaption}. `null` while nothing is chosen. */\n  caption?: ToggleGroupCaption<T | null>;\n}\n\n/** `allowEmpty` picks the shape, so `onChange` is typed `(T) => void` unless the group\n *  can actually emit `null` — no existing caller has a `null` to handle. */\nexport type ToggleGroupProps<T extends string> = ToggleGroupRequiredProps<T> | ToggleGroupClearableProps<T>;\n\n/**\n * Overloaded rather than typed by the union alone (keksdose, \"Gaps found adopting\n * 0.6.0\" #7). Inferring `T` through a union of prop shapes let TypeScript settle on\n * `string`, so `<ToggleGroup allowEmpty value={filter} onChange={setFilter} />` over a\n * `useState<Status | null>` did not compile unless the caller spelled\n * `<ToggleGroup<Status>>`. One signature per mode lets each infer `T` from its own\n * `value`/`onChange`/`options`; the third keeps a caller that forwards a\n * {@link ToggleGroupProps} union (a wrapper component) compiling.\n */\nexport function ToggleGroup<T extends string>(props: ToggleGroupClearableProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupRequiredProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement {\n  const {\n    value,\n    options,\n    className,\n    optionClassName,\n    overflow = \"truncate\",\n    disabled = false,\n    size = \"md\",\n    label,\n    labelPlacement = \"field\",\n    chromeClassName,\n    hint,\n    help,\n    error,\n    disabledReason: ownDisabledReason,\n    disabledReasonDisplay,\n    commit,\n    \"aria-label\": ariaLabelAttr,\n    ref,\n    ...restWithMode\n  } = props;\n  const labelId = useId();\n  const errorId = useId();\n  const reasonId = useId();\n  const hintCaptionId = useId();\n  // The group's `focus()` is a no-op on a div with no tabindex; the caller's ref gets one\n  // that lands where the keyboard would (see `ref`).\n  const setGroup = useCallback(\n    (el: HTMLDivElement | null) => {\n      if (el) el.focus = (options?: FocusOptions) => groupFocusTarget(el)?.focus(options);\n      assignRef(ref, el);\n    },\n    [ref],\n  );\n  // The lock's reason under a locked provider (with `commit`), else the group's own.\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  // §4: at Large and on touch the reason is a line under the group, not a bubble.\n  const reasonLine = useDisabledReasonLine(disabledReasonDisplay) && locked;\n  // §4: likewise a FieldHint \"?\" on the label line becomes a caption under the group at\n  // Large and on touch; text is a caption at every size, as Select's (see `hint`). With\n  // a `help` (0.36, only with `label`, as `hint`), its \"?\" is the label line's only one,\n  // and the hint — a FieldHint's words included — is the caption at every size.\n  const helpMark = fieldHelpMark(hasContent(label) ? help : undefined, label);\n  const withHelp = helpMark !== undefined;\n  const inlineHint = useInlineHint(hint, withHelp, label);\n  // A FieldSuggestion (0.55) is a caption at every size, as text is.\n  const hintAsCaption = withHelp\n    ? hasContent(inlineHint)\n      ? inlineHint\n      : undefined\n    : isTextHint(hint)\n      ? hint\n      : isSuggestionHint(hint) || inlineHint !== hint\n        ? inlineHint\n        : undefined;\n  const labelHint = helpMark ?? (hintAsCaption === undefined ? hint : undefined);\n  // Locked looks disabled — the dimmed group, the not-allowed cursor, no hover offer —\n  // but stays focusable; `disabled` alone also takes the segments out of the tab order.\n  const dimmed = disabled || locked;\n  const labelled = hasContent(label);\n  // `field` is the chrome; a label placed above or in a strip keeps the bare group's\n  // own box.\n  const field = labelled && labelPlacement === \"field\";\n  const above = labelled && labelPlacement === \"above\";\n  const strip = labelled && labelPlacement === \"strip\";\n  // At Large and Extra large a truncating group wraps instead, the strip too since 0.34\n  // (see WRAP_AT_LARGE).\n  const wrapAtLarge = overflow === \"truncate\";\n  const hasError = labelled && hasContent(error);\n  // Taken off the rest so neither reaches the DOM; `props` keeps them paired, which is\n  // what lets the `onChange` below be called with `null` only in the mode that allows it.\n  const { allowEmpty: _allowEmpty, onChange: _onChange, caption, semantics: _semantics, ...rest } = restWithMode;\n  // Invalid from outside too: a `Field` hands the bare group `aria-invalid`, and the\n  // border has to say what the attribute says.\n  const outsideInvalid = rest[\"aria-invalid\"] === true || rest[\"aria-invalid\"] === \"true\";\n  const captionId = useId();\n  const captionIsLive = typeof caption === \"function\";\n  const captionNode = captionIsLive ? (caption as (v: T | null) => ReactNode)(value) : caption;\n  const hasCaption = hasContent(captionNode);\n  const choose = (next: T) => {\n    // A locked group swallows the change: it saves on change, and a lock that let the\n    // value move and then discarded it would show a state that was never stored.\n    if (locked) return;\n    if (props.allowEmpty) props.onChange(next === value ? null : next);\n    else props.onChange(next);\n  };\n  // `pressed`: toggle buttons. Every clearable group is; a required one is when it asks\n  // (kastlan #47) — the role, and not whether a second press clears, is what this flag\n  // decides from here on, so `choose` above still keys off `allowEmpty` alone.\n  const pressed = props.allowEmpty === true || props.semantics === \"pressed\";\n  // A radio group is ONE tab stop (the checked radio, else the first) and arrows move\n  // the choice — the pattern `role=\"radiogroup\"` promises a screen-reader user. Before\n  // 0.7.0 each segment was its own tab stop with no arrow keys. The toggle-button shape\n  // is a row of buttons, where separate tab stops are the pattern.\n  const tabStop = options.some((o) => o.value === value) ? value : options[0]?.value;\n  const onRadioKey = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const last = options.length - 1;\n    let next: number | null = null;\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step !== 0) next = index + step;\n    else if (e.key === \"ArrowDown\") next = index + 1;\n    else if (e.key === \"ArrowUp\") next = index - 1;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = last;\n    if (next === null) return;\n    e.preventDefault();\n    next = next < 0 ? last : next > last ? 0 : next;\n    // The segments' own parent: the group, or under a lock the tooltip's row inside it.\n    const buttons = e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\":scope > button\");\n    buttons?.[next]?.focus();\n    // Locked: the focus walks (each segment says why on arrival), the choice does not.\n    choose(options[next].value);\n  };\n  const segments = options.map((opt, index) => {\n    const active = opt.value === value;\n    return (\n      <button\n        key={opt.value}\n        type=\"button\"\n        role={pressed ? undefined : \"radio\"}\n        aria-checked={pressed ? undefined : active}\n        aria-pressed={pressed ? active : undefined}\n        // A reason wins over `disabled` (as on Button): reachable, and refusing.\n        disabled={disabled && !locked}\n        aria-disabled={locked || undefined}\n        // On each segment rather than the group: the segment is what takes focus, and\n        // a group's description is not read reliably when focus lands inside it.\n        aria-describedby={locked ? reasonId : undefined}\n        tabIndex={pressed ? undefined : opt.value === tabStop ? 0 : -1}\n        onKeyDown={pressed ? undefined : (e) => onRadioKey(e, index)}\n        onClick={() => choose(opt.value)}\n        className={cn(\n          // `truncate` (which carries whitespace-nowrap) rather than letting a\n          // label wrap: a segmented control sizes its whole row to the tallest\n          // option, so one two-word option — Keksdose feedback #147's \"Where I\n          // am\" — silently doubles the height of every segment beside it.\n          //\n          // `basis-auto` is what keeps that ellipsis a LAST resort rather than\n          // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a\n          // shrink-to-fit group (`w-auto`) still resolves to the sum of the\n          // labels' widths — and then splits it EQUALLY, so the short option\n          // got 66px it did not need and \"Where I am\" got 66 of the 81 it did:\n          // truncated at 1778px of free screen. Basing each segment on its own\n          // content and sharing only the LEFTOVER space keeps a full-width\n          // group's segments near-equal and an auto-width group's exact.\n          //\n          // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring\n          // is a box-shadow that spreads OUTWARD, so on a flush group it painted\n          // 2px of ring over both neighbours and over the container's own border\n          // — and on a phone it appeared on every TAP, because a tap focuses the\n          // button. That is the other half of what live #268's rework saw\n          // overlaying the selected segment's boundary. Inset keeps the ring\n          // inside the segment it belongs to; focus-visible keeps it for the\n          // keyboard, which is the only input that needs it.\n          //\n          // The ring is the kit's focus frame (0.32, §5): `--focus-ring-width` wide.\n          //\n          // From Large up the group wraps its ROW first (WRAP_AT_LARGE), so a segment's\n          // own text breaks only when one label is wider than a whole row — and then it\n          // wraps rather than ending in an ellipsis (`truncate-until-large`, text size\n          // §10.17; round 0.34 T1: the sweep read 'confirmVariant=\"da…' at 360 px).\n          overflow === \"wrap\" ? \"whitespace-nowrap\" : \"min-w-0 truncate-until-large\",\n          \"flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-inset focus-visible:ring-strong\",\n          FOCUS_RING_WIDTH,\n          size === \"sm\" && \"px-2 py-1 text-xs\",\n          // In the field chrome: no vertical padding, and the line that makes the\n          // field 42px under a strip that clears the label — see CHROME_PAD. `sm`\n          // keeps its 12px type here (it used to be overridden to the md line).\n          field && CHROME_SEGMENT[size],\n          // In the strip placement: a 22px group under a 20px strip — STRIP_SEGMENT.\n          strip && STRIP_SEGMENT[size],\n          active ? \"bg-inverse text-inverse\" : \"text-secondary hover:bg-hover\",\n          // No hover fill on a group that cannot be changed — a segment that\n          // lights up under the pointer is an offer, and there is none here. Not on\n          // the chosen segment: its fill IS its state, and its inverse text would\n          // vanish on a transparent hover.\n          dimmed && \"cursor-not-allowed\",\n          dimmed && !active && \"hover:bg-transparent dark:hover:bg-transparent\",\n          optionClassName,\n          opt.className,\n        )}\n      >\n        {opt.label}\n      </button>\n    );\n  });\n  const group = (\n    <div\n      // The audit's named example of a closed prop list (§\"Public API design\"): the\n      // tour locates a step by CSS SELECTOR, so a component that drops every attribute\n      // it was not expecting cannot be spotlighted at all — and Keksdose's rule editor\n      // carries a comment explaining that it wraps this group in a bare <div> for\n      // exactly that reason.\n      //\n      // `...rest` first, then the attributes the group cannot do without: a caller\n      // hanging an anchor or a test id on the group must not be able to overwrite the\n      // radiogroup role or the disabled state by accident. `className` is destructured\n      // out entirely and merged through `cn`, so it is never in here.\n      {...rest}\n      ref={setGroup}\n      role={pressed ? \"group\" : \"radiogroup\"}\n      aria-label={ariaLabelAttr}\n      aria-labelledby={labelled && ariaLabelAttr === undefined ? labelId : rest[\"aria-labelledby\"]}\n      aria-invalid={hasError || rest[\"aria-invalid\"] || undefined}\n      aria-describedby={\n        [\n          rest[\"aria-describedby\"],\n          hintAsCaption !== undefined && hintCaptionId,\n          hasCaption && captionId,\n          hasError && errorId,\n        ]\n          .filter(Boolean)\n          .join(\" \") || undefined\n      }\n      // `aria-disabled` on the group as well as on (or `disabled` on) each button: a\n      // radio group is what the user is being refused, and a screen reader announcing\n      // three separately-disabled radios does not say that.\n      aria-disabled={dimmed || undefined}\n      className={cn(\n        // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment\n        // sits in a uniform 2px moat and no two fills ever touch. Flush segments were\n        // Keksdose live #268's rework: the pressed segment wears a saturated fill and\n        // an unpressed neighbour wears a pale hover fill, and with a shared edge the\n        // two rectangles read as one smeared shape — *\"the boundary of the selected\n        // option and hovering next to it overlays the boundary of the selected\n        // button\"*. A gap is what makes each segment its own chip; it cannot be\n        // undone by a caller's per-option colour, which a hover-only fix could.\n        //\n        // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every\n        // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a\n        // phone does see is the focus ring — see the segment's own note below.)\n        \"inline-flex w-full gap-0.5 rounded-md border border-strong bg-surface p-0.5 shadow-sm\",\n        // Block-level under the strip, so it adds no line box's leading — STRIP_GROUP.\n        strip && STRIP_GROUP,\n        overflow === \"wrap\" && \"flex-wrap\",\n        wrapAtLarge && WRAP_AT_LARGE,\n        // The whole group fades, the way every other disabled control in this\n        // package does; `cursor-not-allowed` is on the buttons, which is what a\n        // pointer is actually over.\n        dimmed && \"opacity-60\",\n        // The bare group (no chrome to paint) wears the invalid border itself.\n        !field && (outsideInvalid || ((above || strip) && hasError)) && FIELD_INVALID,\n        // Inside the field's chrome the group is only a row of segments: no border, no\n        // surface, no padding of its own, and the field (not the group) is what dims.\n        field && \"border-0 bg-transparent p-0 shadow-none opacity-100\",\n        !labelled && className,\n      )}\n    >\n      {locked && !reasonLine ? (\n        // The reason's bubble wraps the SEGMENTS, inside the group, not the group: a\n        // wrapper outside it would become the flex or grid item in the caller's row in\n        // the group's place, and a `w-full` / `md:w-auto` on the group would size the\n        // wrong box. This row inherits the group's gap and wrap, so the segments lay out\n        // exactly as they do unlocked, and `:scope > button` above still finds them. A\n        // fragment child, so the Tooltip describes nothing itself — each segment points\n        // at the hidden copy, the way a locked Button does.\n        <Tooltip label={disabledReason} className=\"flex min-w-0 flex-1 gap-[inherit] [flex-wrap:inherit]\">\n          <>\n            {segments}\n            <span id={reasonId} hidden>\n              {disabledReason}\n            </span>\n          </>\n        </Tooltip>\n      ) : (\n        segments\n      )}\n    </div>\n  );\n  // Rendered whenever the caption is — `aria-live` must be on the element BEFORE its\n  // text changes, or the change is not announced — but empty (no height, no margin)\n  // when there is nothing to say, so a function caption that returns null for some\n  // options leaves no gap. Empty rather than `hidden`: some readers do not announce\n  // text that appears inside an element coming back from `display: none`.\n  const captionEl =\n    hasCaption || captionIsLive ? (\n      <p\n        id={captionId}\n        aria-live={captionIsLive ? \"polite\" : undefined}\n        className={cn(\"text-caption leading-snug text-muted\", hasCaption && \"mt-1\")}\n      >\n        {hasCaption ? captionNode : null}\n      </p>\n    ) : null;\n  const errorEl = hasError ? (\n    <p id={errorId} className={FIELD_ERROR_CLASS}>\n      {error}\n    </p>\n  ) : null;\n  // §4: the FieldHint's words and the lock's reason, under the group, before the caption\n  // (standing advice first) and the error (the news). The reason line IS what each\n  // segment's `aria-describedby` names.\n  const belowEl =\n    hintAsCaption !== undefined || reasonLine ? (\n      <>\n        {hintAsCaption !== undefined && (\n          <p id={hintCaptionId} className={FIELD_CAPTION_CLASS}>\n            {hintAsCaption}\n          </p>\n        )}\n        {reasonLine && (\n          <p id={reasonId} className={DISABLED_REASON_LINE_CLASS}>\n            {disabledReason}\n          </p>\n        )}\n      </>\n    ) : null;\n  if (above) {\n    // `relative` so a caller's `sr-only` label cannot escape (sr-only-containment).\n    return (\n      <div className={cn(\"relative grid min-w-0 gap-1.5\", className)}>\n        <div className=\"flex items-center gap-1\">\n          {/* A `<label>` with no `htmlFor`: a group is not labelable, so it is named\n              by `aria-labelledby` on the group; the element keeps the Field look. */}\n          <Label\n            id={labelId}\n            disabled={dimmed}\n            data-error={hasError || undefined}\n            className=\"data-[error=true]:text-danger\"\n          >\n            {label}\n          </Label>\n          {labelHint}\n        </div>\n        <div className=\"min-w-0\">\n          {group}\n          {belowEl}\n          {captionEl}\n          {errorEl}\n        </div>\n      </div>\n    );\n  }\n  if (strip) {\n    return (\n      <LabelStrip labelId={labelId} label={label} hint={labelHint} disabled={dimmed} className={className}>\n        {group}\n        {belowEl}\n        {captionEl}\n        {errorEl}\n      </LabelStrip>\n    );\n  }\n  if (!field) {\n    if (!captionEl && !belowEl) return group;\n    // The group keeps its `className`, as without a caption; the wrapper only stacks.\n    return (\n      <div className=\"min-w-0\">\n        {group}\n        {belowEl}\n        {captionEl}\n      </div>\n    );\n  }\n  return (\n    // `h-full` + `flex-1`: the chrome fills a grid or stretched flex row, which is what\n    // levels it with a select beside it whatever the browser makes of the select.\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <FloatingField\n        className=\"flex flex-1 flex-col\"\n        label={<span id={labelId}>{label}</span>}\n        staticLabel\n        hint={labelHint}\n      >\n        <div\n          className={cn(\n            \"flex flex-1 flex-col justify-center rounded-md border border-subtle bg-surface px-1 shadow-sm\",\n            CHROME_PAD[size],\n            dimmed && \"bg-surface-2 opacity-60\",\n            hasError && FIELD_INVALID,\n            chromeClassName,\n          )}\n        >\n          {group}\n        </div>\n      </FloatingField>\n      {belowEl}\n      {captionEl}\n      {errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":["options"]}

package/dist/components/treemap-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/treemap-layout.ts"],"sourcesContent":["// Where `Treemap` draws each node — a pure function of the nodes, the chart's size and the\n// text size, with no recharts in it (0.52 code review of treemap.tsx, findings 1 and 8).\n//\n// recharts lays nested data out itself, edge to edge, and 0.52 first made the groups' room\n// afterwards: a group's cell took its band and margin out of its rectangle and each child's\n// cell SQUEEZED the rectangle recharts gave it into what was left. Two faults followed.\n// A fixed 23px is a different share of every group, so a €100 tile in a 61px group was\n// drawn at two thirds of a €100 tile in a 300px one — in a chart whose one promise is that\n// area is share. And the squeeze ran through a cache the group's cell wrote during render\n// for its children's cells to read, which held only because recharts renders a group\n// before its children.\n//\n// So the layout is made here, up front: squarified as recharts does it, with each group\n// asking for its tiles' area PLUS its frame's, and its tiles laid out in its body. A\n// frame's area depends on the rectangle it gets, so the layout is run again with each\n// group's frame as measured until no frame moves by a pixel — two or three rounds.\n\nexport interface Box {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\n/** What the layout needs of a node: its key, its value, and a group's nodes. */\nexport interface LayoutNode {\n  path: string;\n  size: number;\n  children?: readonly LayoutNode[];\n}\n\n/** A node as drawn: its rectangle, and for a group the body its nodes fill and whether\n *  its band is drawn. Whole pixels, on shared edges, so neighbours meet without a seam. */\nexport interface Placed {\n  box: Box;\n  body?: Box;\n  banded?: boolean;\n}\n\nconst PHI = (1 + Math.sqrt(5)) / 2;\n\n/**\n * A group's band, in px at Normal, × the text size's scale: the 20px floor a tile keeps\n * for its own name, so the group's name sits in it as a tile's does in a tile.\n */\nexport const BAND = 20;\n/**\n * The frame's margin round its body, in px. Each tile keeps its 2px gutter, half of it\n * inside the tile, so 3 leaves one pixel of the frame's own colour between the group's\n * gutter and its tiles' — the frame reads as one outline round the group, not as a gutter\n * that happens to be wider.\n */\nexport const FRAME_MARGIN = 3;\n/**\n * The least of a group's height its body keeps under the band: 1/φ. At Normal that is a\n * group of 61px (20 band + 3 margin = 0.382 of it), whose body of 38px still holds a\n * tile's name and its second line (the note's 36px floor) — so a single row of tiles under\n * the band keeps both. A smaller group draws no band, and its name is in its tiles'\n * accessible names and its tooltip rather than over their area. Since the frame's area is\n * given to the group (above), this bounds the frame's share of the picture, not the tiles'.\n */\nexport const BODY_SHARE = 1 / PHI;\n\n/** A group drawn at `box`: whether it has the room for its band (see {@link BODY_SHARE};\n *  and 44px across, the floor of a word), and the body its nodes are drawn into. */\nexport function groupBody(box: Box, scale: number): { banded: boolean; body: Box } {\n  const band = BAND * scale;\n  const margin = Math.min(FRAME_MARGIN, Math.floor(box.width / 4), Math.floor(box.height / 4));\n  const banded = box.width >= 44 * scale && box.height - band - margin >= box.height * BODY_SHARE;\n  const top = banded ? band : margin;\n  return {\n    banded,\n    body: {\n      x: box.x + margin,\n      y: box.y + top,\n      width: Math.max(0, box.width - 2 * margin),\n      height: Math.max(0, box.height - top - margin),\n    },\n  };\n}\n\n/** The worst aspect ratio in a row of `area` along `side`, against the target `ratio`. */\nfunction worst(area: number, min: number, max: number, side: number, ratio: number): number {\n  const along = side * side;\n  const across = area * area;\n  if (across === 0 || min === 0) return Infinity;\n  return Math.max((along * max * ratio) / across, across / (along * min * ratio));\n}\n\n/**\n * Bruls, Huizing and van Wijk's squarified layout, as recharts runs it: `weights` share\n * out `rect` in order, a row at a time along its shorter side, and a row closes when the\n * next node would make its worst tile further from φ:1 (recharts' default ratio). Returns\n * one rectangle per weight, in order, in fractional pixels.\n */\nexport function squarify(weights: readonly number[], rect: Box, ratio = PHI): Box[] {\n  const out: Box[] = weights.map(() => ({ x: rect.x, y: rect.y, width: 0, height: 0 }));\n  const sum = weights.reduce((acc, w) => acc + Math.max(0, w), 0);\n  if (!(sum > 0) || rect.width <= 0 || rect.height <= 0) return out;\n  const areas = weights.map((w) => (Math.max(0, w) * rect.width * rect.height) / sum);\n  let { x, y, width, height } = rect;\n  let i = 0;\n  while (i < areas.length) {\n    const side = Math.min(width, height);\n    let rowArea = 0;\n    let min = Infinity;\n    let max = 0;\n    let best = Infinity;\n    let j = i;\n    while (j < areas.length) {\n      const a = areas[j]!;\n      const score = worst(rowArea + a, Math.min(min, a), Math.max(max, a), side, ratio);\n      if (j > i && score > best) break;\n      rowArea += a;\n      min = Math.min(min, a);\n      max = Math.max(max, a);\n      best = score;\n      j += 1;\n    }\n    // The last row takes what is left, so rounding never leaves a sliver unpainted.\n    const last = j === areas.length;\n    if (side === width) {\n      // A row along the top, as wide as the space.\n      const thick = last ? height : rowArea / width;\n      let at = x;\n      for (let k = i; k < j; k++) {\n        const len = k === j - 1 ? x + width - at : (areas[k]! / rowArea) * width;\n        out[k] = { x: at, y, width: len, height: thick };\n        at += len;\n      }\n      y += thick;\n      height -= thick;\n    } else {\n      // A column at the left, as tall as the space.\n      const thick = last ? width : rowArea / height;\n      let at = y;\n      for (let k = i; k < j; k++) {\n        const len = k === j - 1 ? y + height - at : (areas[k]! / rowArea) * height;\n        out[k] = { x, y: at, width: thick, height: len };\n        at += len;\n      }\n      x += thick;\n      width -= thick;\n    }\n    i = j;\n  }\n  return out;\n}\n\n/** Whole pixels on the EDGES: neighbours share an edge, so they round it alike. */\nfunction snap(b: Box): Box {\n  const x = Math.round(b.x);\n  const y = Math.round(b.y);\n  return { x, y, width: Math.round(b.x + b.width) - x, height: Math.round(b.y + b.height) - y };\n}\n\n/** The rounds the frames get to settle; three is usual, more only when a band switches. */\nconst ROUNDS = 8;\n\n/**\n * Every node of `nodes` placed in a `width` × `height` chart, by path.\n *\n * Each tile's area is its value's share of what is left for tiles once the frames have\n * theirs — the same density in every group and at the top. A group asks for its tiles'\n * area and its own frame's (band and margin, as {@link groupBody} measures them on the\n * rectangle it got last round), so its body holds exactly its tiles.\n */\nexport function layoutTreemap(\n  nodes: readonly LayoutNode[],\n  width: number,\n  height: number,\n  scale: number,\n): Map<string, Placed> {\n  const total = nodes.reduce((acc, n) => acc + n.size, 0);\n  const frames = new Map<string, number>();\n  let placed = new Map<string, Placed>();\n  for (let round = 0; round < ROUNDS; round++) {\n    const framed = [...frames.values()].reduce((acc, a) => acc + a, 0);\n    const spare = width * height - framed;\n    // Frames that would take the whole chart (a tiny chart of many groups) leave nothing\n    // to share; the tiles then take the density they would have without frames.\n    const density = total > 0 ? (spare > 0 ? spare : width * height) / total : 0;\n    const need = (n: LayoutNode): number =>\n      n.children ? (frames.get(n.path) ?? 0) + n.children.reduce((acc, c) => acc + need(c), 0) : n.size * density;\n    let moved = 0;\n    placed = new Map();\n    const place = (list: readonly LayoutNode[], rect: Box) => {\n      const boxes = squarify(\n        list.map((n) => need(n)),\n        rect,\n      );\n      list.forEach((n, i) => {\n        const box = snap(boxes[i]!);\n        if (!n.children) {\n          placed.set(n.path, { box });\n          return;\n        }\n        const { banded, body } = groupBody(box, scale);\n        placed.set(n.path, { box, body, banded });\n        const frame = box.width * box.height - body.width * body.height;\n        moved = Math.max(moved, Math.abs(frame - (frames.get(n.path) ?? 0)));\n        frames.set(n.path, frame);\n        place(n.children, body);\n      });\n    };\n    place(nodes, { x: 0, y: 0, width, height });\n    if (moved < 1) break;\n  }\n  return placed;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/treemap-layout.ts"],"sourcesContent":["// Where `Treemap` draws each node — a pure function of the nodes, the chart's size and the\n// text size, with no recharts in it (0.52 code review of treemap.tsx, findings 1 and 8).\n//\n// recharts lays nested data out itself, edge to edge, and 0.52 first made the groups' room\n// afterwards: a group's cell took its band and margin out of its rectangle and each child's\n// cell SQUEEZED the rectangle recharts gave it into what was left. Two faults followed.\n// A fixed 23px is a different share of every group, so a €100 tile in a 61px group was\n// drawn at two thirds of a €100 tile in a 300px one — in a chart whose one promise is that\n// area is share. And the squeeze ran through a cache the group's cell wrote during render\n// for its children's cells to read, which held only because recharts renders a group\n// before its children.\n//\n// So the layout is made here, up front: squarified as recharts does it, with each group\n// asking for its tiles' area PLUS its frame's, and its tiles laid out in its body. A\n// frame's area depends on the rectangle it gets, so the layout is run again with each\n// group's frame as measured until no frame moves by a pixel — two or three rounds.\n//\n// Since 0.55 it is the only layout the map has: the map draws its nodes itself, where this\n// puts them (treemap.tsx, \"The picture\"), and recharts lays nothing out for it any more.\n\nexport interface Box {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\n/** What the layout needs of a node: its key, its value, and a group's nodes. */\nexport interface LayoutNode {\n  path: string;\n  size: number;\n  children?: readonly LayoutNode[];\n}\n\n/** A node as drawn: its rectangle, and for a group the body its nodes fill and whether\n *  its band is drawn. Whole pixels, on shared edges, so neighbours meet without a seam. */\nexport interface Placed {\n  box: Box;\n  body?: Box;\n  banded?: boolean;\n}\n\nconst PHI = (1 + Math.sqrt(5)) / 2;\n\n/**\n * A group's band, in px at Normal, × the text size's scale: the 20px floor a tile keeps\n * for its own name, so the group's name sits in it as a tile's does in a tile.\n */\nexport const BAND = 20;\n/**\n * The frame's margin round its body, in px. Each tile keeps its 2px gutter, half of it\n * inside the tile, so 3 leaves one pixel of the frame's own colour between the group's\n * gutter and its tiles' — the frame reads as one outline round the group, not as a gutter\n * that happens to be wider.\n */\nexport const FRAME_MARGIN = 3;\n/**\n * The least of a group's height its body keeps under the band: 1/φ. At Normal that is a\n * group of 61px (20 band + 3 margin = 0.382 of it), whose body of 38px still holds a\n * tile's name and its second line (the note's 36px floor) — so a single row of tiles under\n * the band keeps both. A smaller group draws no band, and its name is in its tiles'\n * accessible names and its tooltip rather than over their area. Since the frame's area is\n * given to the group (above), this bounds the frame's share of the picture, not the tiles'.\n */\nexport const BODY_SHARE = 1 / PHI;\n\n/** A group drawn at `box`: whether it has the room for its band (see {@link BODY_SHARE};\n *  and 44px across, the floor of a word), and the body its nodes are drawn into. */\nexport function groupBody(box: Box, scale: number): { banded: boolean; body: Box } {\n  const band = BAND * scale;\n  const margin = Math.min(FRAME_MARGIN, Math.floor(box.width / 4), Math.floor(box.height / 4));\n  const banded = box.width >= 44 * scale && box.height - band - margin >= box.height * BODY_SHARE;\n  const top = banded ? band : margin;\n  return {\n    banded,\n    body: {\n      x: box.x + margin,\n      y: box.y + top,\n      width: Math.max(0, box.width - 2 * margin),\n      height: Math.max(0, box.height - top - margin),\n    },\n  };\n}\n\n/** The worst aspect ratio in a row of `area` along `side`, against the target `ratio`. */\nfunction worst(area: number, min: number, max: number, side: number, ratio: number): number {\n  const along = side * side;\n  const across = area * area;\n  if (across === 0 || min === 0) return Infinity;\n  return Math.max((along * max * ratio) / across, across / (along * min * ratio));\n}\n\n/**\n * Bruls, Huizing and van Wijk's squarified layout, as recharts runs it: `weights` share\n * out `rect` in order, a row at a time along its shorter side, and a row closes when the\n * next node would make its worst tile further from φ:1 (recharts' default ratio). Returns\n * one rectangle per weight, in order, in fractional pixels.\n */\nexport function squarify(weights: readonly number[], rect: Box, ratio = PHI): Box[] {\n  const out: Box[] = weights.map(() => ({ x: rect.x, y: rect.y, width: 0, height: 0 }));\n  const sum = weights.reduce((acc, w) => acc + Math.max(0, w), 0);\n  if (!(sum > 0) || rect.width <= 0 || rect.height <= 0) return out;\n  const areas = weights.map((w) => (Math.max(0, w) * rect.width * rect.height) / sum);\n  let { x, y, width, height } = rect;\n  let i = 0;\n  while (i < areas.length) {\n    const side = Math.min(width, height);\n    let rowArea = 0;\n    let min = Infinity;\n    let max = 0;\n    let best = Infinity;\n    let j = i;\n    while (j < areas.length) {\n      const a = areas[j]!;\n      const score = worst(rowArea + a, Math.min(min, a), Math.max(max, a), side, ratio);\n      if (j > i && score > best) break;\n      rowArea += a;\n      min = Math.min(min, a);\n      max = Math.max(max, a);\n      best = score;\n      j += 1;\n    }\n    // The last row takes what is left, so rounding never leaves a sliver unpainted.\n    const last = j === areas.length;\n    if (side === width) {\n      // A row along the top, as wide as the space.\n      const thick = last ? height : rowArea / width;\n      let at = x;\n      for (let k = i; k < j; k++) {\n        const len = k === j - 1 ? x + width - at : (areas[k]! / rowArea) * width;\n        out[k] = { x: at, y, width: len, height: thick };\n        at += len;\n      }\n      y += thick;\n      height -= thick;\n    } else {\n      // A column at the left, as tall as the space.\n      const thick = last ? width : rowArea / height;\n      let at = y;\n      for (let k = i; k < j; k++) {\n        const len = k === j - 1 ? y + height - at : (areas[k]! / rowArea) * height;\n        out[k] = { x, y: at, width: thick, height: len };\n        at += len;\n      }\n      x += thick;\n      width -= thick;\n    }\n    i = j;\n  }\n  return out;\n}\n\n/** Whole pixels on the EDGES: neighbours share an edge, so they round it alike. */\nfunction snap(b: Box): Box {\n  const x = Math.round(b.x);\n  const y = Math.round(b.y);\n  return { x, y, width: Math.round(b.x + b.width) - x, height: Math.round(b.y + b.height) - y };\n}\n\n/** The rounds the frames get to settle; three is usual, more only when a band switches. */\nconst ROUNDS = 8;\n\n/**\n * Every node of `nodes` placed in a `width` × `height` chart, by path.\n *\n * Each tile's area is its value's share of what is left for tiles once the frames have\n * theirs — the same density in every group and at the top. A group asks for its tiles'\n * area and its own frame's (band and margin, as {@link groupBody} measures them on the\n * rectangle it got last round), so its body holds exactly its tiles.\n */\nexport function layoutTreemap(\n  nodes: readonly LayoutNode[],\n  width: number,\n  height: number,\n  scale: number,\n): Map<string, Placed> {\n  const total = nodes.reduce((acc, n) => acc + n.size, 0);\n  const frames = new Map<string, number>();\n  let placed = new Map<string, Placed>();\n  for (let round = 0; round < ROUNDS; round++) {\n    const framed = [...frames.values()].reduce((acc, a) => acc + a, 0);\n    const spare = width * height - framed;\n    // Frames that would take the whole chart (a tiny chart of many groups) leave nothing\n    // to share; the tiles then take the density they would have without frames.\n    const density = total > 0 ? (spare > 0 ? spare : width * height) / total : 0;\n    const need = (n: LayoutNode): number =>\n      n.children ? (frames.get(n.path) ?? 0) + n.children.reduce((acc, c) => acc + need(c), 0) : n.size * density;\n    let moved = 0;\n    placed = new Map();\n    const place = (list: readonly LayoutNode[], rect: Box) => {\n      const boxes = squarify(\n        list.map((n) => need(n)),\n        rect,\n      );\n      list.forEach((n, i) => {\n        const box = snap(boxes[i]!);\n        if (!n.children) {\n          placed.set(n.path, { box });\n          return;\n        }\n        const { banded, body } = groupBody(box, scale);\n        placed.set(n.path, { box, body, banded });\n        const frame = box.width * box.height - body.width * body.height;\n        moved = Math.max(moved, Math.abs(frame - (frames.get(n.path) ?? 0)));\n        frames.set(n.path, frame);\n        place(n.children, body);\n      });\n    };\n    place(nodes, { x: 0, y: 0, width, height });\n    if (moved < 1) break;\n  }\n  return placed;\n}\n"],"mappings":"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","names":[]}