@eifi1/ui-kit 0.51.4 → 0.51.6

package/dist/components/signed-amount.js

@@ -140,11 +140,18 @@ function Delta({
       "data-direction": dir,
       className: cn("relative inline-flex flex-wrap items-center gap-x-1.5 tabular-nums", className),
       children: [
-        /* @__PURE__ */ jsxs("span", { "data-private": sensitive ? "" : void 0, className: cn("inline-flex items-center gap-0.5 font-medium", tone), children: [
-          arrow && /* @__PURE__ */ jsx(Icon, { className: "size-[1em] shrink-0", "aria-hidden": true }),
-          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: amount }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: spoken })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "data-private": sensitive ? "" : void 0,
+            className: cn("inline-flex items-center gap-0.5 font-medium", tone),
+            children: [
+              arrow && /* @__PURE__ */ jsx(Icon, { className: "size-[1em] shrink-0", "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: amount }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: spoken })
+            ]
+          }
+        ),
         label != null && /* @__PURE__ */ jsx("span", { className: "text-muted", children: label })
       ]
     }

package/dist/components/signed-amount.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/signed-amount.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { ArrowDown, ArrowUp, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { formatMoney, formatNumber, formatPercent } from \"../lib/format\";\nimport { useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_STAT_TILE_LABELS } from \"./stat-tile\";\nimport type { StatTileLabels } from \"./stat-tile\";\nimport { DEFAULT_SIGNED_AMOUNT_LABELS } from \"./signed-amount-labels\";\n\n/**\n * The text colours a figure can carry, token-backed — `StatTile`'s tones, as a class\n * any span can take.\n *\n *  - `default` — the primary text colour. `muted` — the secondary, quiet one.\n *  - `income` / `expense` / `net` — the money trio (CVD-safe teal / amber / violet).\n *  - `success` / `warning` / `danger` / `info` — a verdict: a rent rise is the tenant's\n *    bad news (kastlan lease-columns), a vote \"for\" is green (meeting-agenda-tab).\n *  - `brand` — the app's accent.\n *\n * Colour is never the only carrier: pair a verdict with an arrow, a word, or a sign.\n */\nexport type TextTone =\n  | \"default\"\n  | \"muted\"\n  | \"brand\"\n  | \"income\"\n  | \"expense\"\n  | \"net\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nconst TEXT_TONE: Record<TextTone, string> = {\n  default: \"text-primary\",\n  muted: \"text-muted\",\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\n/**\n * The class that colours text in `tone` — for the spans kastlan colours by hand with\n * `text-[var(--danger)]` / `text-emerald-600` (settlement-table, changelog-page,\n * meeting-agenda-tab), so the palette they draw from is the kit's tokens.\n */\nexport function toneTextClass(tone: TextTone): string {\n  return TEXT_TONE[tone];\n}\n\nexport interface ToneProps extends ComponentPropsWithRef<\"span\"> {\n  tone: TextTone;\n}\n\n/** A `<span>` in a {@link TextTone} — `<Tone tone=\"success\">{votesFor}</Tone>`. */\nexport function Tone({ tone, className, ...rest }: ToneProps) {\n  return <span {...rest} className={cn(TEXT_TONE[tone], className)} />;\n}\n\n/* ── Signed amounts ──────────────────────────────────────────────────────── */\n\n/** Which way is +1: `up` for a figure where more is good news (income, savings),\n *  `down` where less is (a rent the tenant pays, a cost). */\nexport type GoodDirection = \"up\" | \"down\";\n\n/**\n * How a signed figure is coloured:\n *  - `signed` (default) — money read by its own sign: above zero `income`, below zero\n *    `expense`, zero muted. A balance, a net.\n *  - `income` / `expense` / `neutral` — one colour whatever the sign (`neutral` is the\n *    text's own colour).\n *  - `verdict` — the change judged by {@link SignedAmountProps.goodDirection}: good\n *    news `success`, bad news `danger`, zero muted. Setting `goodDirection` implies it.\n */\nexport type SignedAmountTone = \"signed\" | \"income\" | \"expense\" | \"neutral\" | \"verdict\";\n\n/**\n * The colours a VERDICT is painted in (`goodDirection` set, or `tone=\"verdict\"`):\n *  - `status` (default) — `success` / `danger`: good news, bad news.\n *  - `money` — `income` / `expense` (the `.text-money-pos` / `.text-money-neg` pair):\n *    the app's ONE money palette (keksdose dev#434). A grocery price going UP is money\n *    going out, so with `goodDirection=\"down\"` it wears the expense colour every other\n *    outflow in the app wears — not a red that says \"error\". keksdose coloured its\n *    three price-change sites by hand for want of this.\n */\nexport type VerdictPalette = \"status\" | \"money\";\n\n/** What a signed figure says to a screen reader, whose readers disagree about a\n *  leading \"+\" (most skip it) and a \"−\" (some read \"dash\", some nothing). */\nexport interface SignedAmountLabels {\n  /** A figure above zero. `amount` is formatted and unsigned. */\n  positive: (amount: string) => string;\n  /** A figure below zero. `amount` is formatted and unsigned. */\n  negative: (amount: string) => string;\n}\n\n// Defined in ./signed-amount-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_SIGNED_AMOUNT_LABELS };\n\ninterface SignedFormatProps {\n  /** ISO 4217 code: format as money. */\n  currency?: string;\n  /** `\"percent\"` reads `value` as a RATIO (`0.12` → 12 %), as `StatTile`'s delta does\n   *  — or as percent POINTS with `ratio={false}`. */\n  unit?: \"value\" | \"percent\";\n  /** With `unit=\"percent\"`: `true` (default) — `value` is a ratio, `0.12` is 12 %.\n   *  `false` — `value` is already in percent POINTS, `12` is 12 %, as `formatPercent`'s\n   *  `ratio` option reads it. Backends send points (keksdose's price changes, kastlan's\n   *  `change_pct`), and without this every site divided by 100 — and wrote its\n   *  `flatWithin` as a ratio (`0.005`) beside a value it had to convert. With\n   *  `ratio={false}` the value AND `flatWithin` are in points (`flatWithin={0.5}` is\n   *  half a point). Ignored for any other unit. */\n  ratio?: boolean;\n  /** Compact notation: 12 400 → \"12K\". */\n  compact?: boolean;\n  /** Fraction digits, as `formatNumber`'s `digits`. */\n  digits?: number | { min?: number; max?: number };\n  /** Formats the UNSIGNED magnitude, replacing the `Intl` default outright. The sign\n   *  is the component's. */\n  format?: (magnitude: number) => string;\n  locale?: string;\n}\n\nfunction useMagnitudeFormatter({ currency, unit, ratio, compact, digits, format, locale }: SignedFormatProps) {\n  const kitLocale = useKitLocale(locale);\n  return (magnitude: number): string => {\n    if (format) return format(magnitude);\n    if (unit === \"percent\") return formatPercent(magnitude, { locale: kitLocale, compact, digits, ratio });\n    if (currency) return formatMoney(magnitude, currency, { locale: kitLocale, compact, digits });\n    return formatNumber(magnitude, { locale: kitLocale, compact, digits });\n  };\n}\n\n/** `flatWithin` widens \"no change\" from exactly zero to a band round it: a price that\n *  moved by a fraction of a cent, a ratio that rounds to \"0.0 %\", is not a rise, and an\n *  arrow and a colour for it claim one. Inclusive — `|value| ≤ flatWithin` is flat. */\nfunction directionOf(value: number, flatWithin = 0): \"up\" | \"down\" | \"flat\" {\n  if (Math.abs(value) <= Math.max(0, flatWithin)) return \"flat\";\n  return value > 0 ? \"up\" : \"down\";\n}\n\nfunction verdictClass(good: boolean, palette: VerdictPalette): string {\n  if (palette === \"money\") return good ? TEXT_TONE.income : TEXT_TONE.expense;\n  return good ? TEXT_TONE.success : TEXT_TONE.danger;\n}\n\nfunction signedToneClass(\n  tone: SignedAmountTone,\n  dir: \"up\" | \"down\" | \"flat\",\n  goodDirection: GoodDirection | undefined,\n  palette: VerdictPalette,\n): string {\n  if (tone === \"verdict\" || (goodDirection && tone === \"signed\")) {\n    if (dir === \"flat\" || !goodDirection) return TEXT_TONE.muted;\n    return verdictClass(dir === goodDirection, palette);\n  }\n  if (tone === \"signed\") return dir === \"flat\" ? TEXT_TONE.muted : dir === \"up\" ? TEXT_TONE.income : TEXT_TONE.expense;\n  if (tone === \"neutral\") return \"\";\n  return TEXT_TONE[tone];\n}\n\nconst ARROW = { up: ArrowUp, down: ArrowDown, flat: Minus } as const;\n\nexport interface SignedAmountProps\n  extends SignedFormatProps,\n    Omit<ComponentPropsWithRef<\"span\">, \"children\"> {\n  value: number;\n  /** See {@link SignedAmountTone}. Default `signed`, or `verdict` with `goodDirection`. */\n  tone?: SignedAmountTone;\n  /** Which way is good news — colours by verdict (`success` / `danger`, or the money\n   *  pair with `palette=\"money\"`). */\n  goodDirection?: GoodDirection;\n  /** See {@link VerdictPalette}. Default `status`. Only a verdict reads it. */\n  palette?: VerdictPalette;\n  /** A magnitude up to which the figure counts as NO change: no sign, no arrow but the\n   *  flat dash, muted, spoken without \"plus\"/\"minus\" (inclusive; default 0). The digits\n   *  still print `|value|` — use a band below the display precision, where they round\n   *  to zero anyway (`flatWithin={0.005}` at two digits). */\n  flatWithin?: number;\n  /** Print \"+\" before a positive figure (default `true`). A negative always shows its\n   *  minus; zero shows neither. */\n  showPlus?: boolean;\n  /** An arrow before the figure (up / down / a dash at zero) — so the direction does not\n   *  ride on colour alone. Decorative; the words say the same. */\n  arrow?: boolean;\n  /** Tag the figure `data-private`, for the host's demo-mode blur. */\n  sensitive?: boolean;\n  labels?: LabelOverride<SignedAmountLabels>;\n}\n\n/**\n * A figure with a sign that matters: a balance, a rent change, a net.\n *\n * kastlan writes it by hand in five places — `{change > 0 ? \"+\" : \"\"}{formatCurrency(\n * change)}` in a span coloured by a ternary (lease-columns:190, settlement-table:58,\n * the tenancy `formatPct`) — and each picks its own colours for the same verdict.\n *\n * The visible figure (sign, digits, arrow) is hidden from assistive tech and spoken as\n * words instead (\"plus CHF 50.00\" / \"minus CHF 50.00\", `signedAmount.*`): a \"+\" is\n * skipped by most screen readers, and `Intl`'s \"−\" is read as \"dash\" or not at all.\n */\nexport function SignedAmount({\n  value,\n  currency,\n  unit,\n  ratio,\n  compact,\n  digits,\n  format,\n  locale,\n  tone = \"signed\",\n  goodDirection,\n  palette = \"status\",\n  flatWithin,\n  showPlus = true,\n  arrow = false,\n  sensitive = false,\n  labels,\n  className,\n  ...rest\n}: SignedAmountProps) {\n  const text = useKitLabels(\"signedAmount\", DEFAULT_SIGNED_AMOUNT_LABELS, labels);\n  const fmt = useMagnitudeFormatter({ currency, unit, ratio, compact, digits, format, locale });\n  const finite = Number.isFinite(value);\n  const dir = finite ? directionOf(value, flatWithin) : \"flat\";\n  const amount = finite ? fmt(Math.abs(value)) : \"—\";\n  // U+2212, the typographic minus: the same width as \"+\", so a column of signed figures\n  // lines up under `tabular-nums`.\n  const sign = dir === \"up\" ? (showPlus ? \"+\" : \"\") : dir === \"down\" ? \"−\" : \"\";\n  const spoken = dir === \"up\" ? text.positive(amount) : dir === \"down\" ? text.negative(amount) : amount;\n  const Icon = ARROW[dir];\n  return (\n    <span\n      {...rest}\n      data-private={sensitive ? \"\" : undefined}\n      data-direction={dir}\n      className={cn(\n        \"relative inline-flex items-center gap-0.5 whitespace-nowrap tabular-nums\",\n        signedToneClass(tone, dir, goodDirection, palette),\n        className,\n      )}\n    >\n      {arrow && <Icon aria-hidden className=\"size-[1em] shrink-0\" />}\n      <span aria-hidden>\n        {sign}\n        {amount}\n      </span>\n      <span className=\"sr-only\">{spoken}</span>\n    </span>\n  );\n}\n\nexport interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithRef<\"span\">, \"children\"> {\n  /** The change. Above zero is \"up\". */\n  value: number;\n  /** Which way is good news. Unset, the change is stated and not judged (muted); set,\n   *  it is coloured `success` / `danger` and its sentence says \"(better)\" / \"(worse)\". */\n  goodDirection?: GoodDirection;\n  /** See {@link VerdictPalette}: `money` paints good news `income` and bad news\n   *  `expense` instead of `success` / `danger`. Default `status`. */\n  palette?: VerdictPalette;\n  /** See {@link SignedAmountProps.flatWithin}: up to this magnitude the change is\n   *  \"unchanged\" — flat dash, muted, no verdict. Default 0. */\n  flatWithin?: number;\n  /** What it is measured against, after it: \"vs last month\". */\n  label?: ReactNode;\n  /** Hide the arrow (shown by default, as on a StatTile). At zero the arrow is a flat\n   *  dash BESIDE the figure (\"– 0.00 %\"), never in place of it. */\n  arrow?: boolean;\n  sensitive?: boolean;\n  /** The `statTile` namespace's direction words — a delta says the same as a tile's. */\n  labels?: LabelOverride<Pick<StatTileLabels, \"increase\" | \"decrease\" | \"unchanged\" | \"better\" | \"worse\">>;\n}\n\n/**\n * `StatTile`'s delta on its own: an arrow, the unsigned magnitude, and a sentence for\n * screen readers (\"Up 12% (worse)\"), coloured only when `goodDirection` judges it —\n * users up and cost up are the same arrow until someone says which is good.\n *\n * For a change shown outside a tile: kastlan's rent-change column\n * (lease-columns:219, a \"+1.25%\" chip), the breakdown rows of the rent calculator\n * (breakdown-row:5, a trend icon coloured by hand).\n */\nexport function Delta({\n  value,\n  currency,\n  unit,\n  ratio,\n  compact,\n  digits,\n  format,\n  locale,\n  goodDirection,\n  palette = \"status\",\n  flatWithin,\n  label,\n  arrow = true,\n  sensitive = false,\n  labels,\n  className,\n  ...rest\n}: DeltaProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  const fmt = useMagnitudeFormatter({ currency, unit, ratio, compact, digits, format, locale });\n  if (!Number.isFinite(value)) return null;\n  const amount = fmt(Math.abs(value));\n  const dir = directionOf(value, flatWithin);\n  const Icon = ARROW[dir];\n  let spoken = dir === \"up\" ? text.increase(amount) : dir === \"down\" ? text.decrease(amount) : text.unchanged;\n  let tone = TEXT_TONE.muted;\n  if (goodDirection && dir !== \"flat\") {\n    const good = dir === goodDirection;\n    spoken = good ? text.better(spoken) : text.worse(spoken);\n    tone = verdictClass(good, palette);\n  }\n  return (\n    <span\n      {...rest}\n      data-direction={dir}\n      className={cn(\"relative inline-flex flex-wrap items-center gap-x-1.5 tabular-nums\", className)}\n    >\n      <span data-private={sensitive ? \"\" : undefined} className={cn(\"inline-flex items-center gap-0.5 font-medium\", tone)}>\n        {arrow && <Icon className=\"size-[1em] shrink-0\" aria-hidden />}\n        {/* The figure at zero too, beside the flat dash (kastlan feedback #48). Before\n            this a flat delta with an arrow drew the dash ALONE, as a StatTile does — so\n            a rent-change column that printed \"0.00 %\" for an unchanged lease showed a\n            bare \"–\" in its place, and a bare dash is what a table prints for a MISSING\n            value: \"unchanged\" and \"not known\" looked the same. The Minus icon is the\n            neutral indicator, the muted tone the neutral colour, and the figure says\n            how much (none) in the column's own digits. A value that is missing never\n            reaches here — a non-finite one renders nothing, above. Visible change for\n            every `<Delta value={0}>` with the default arrow: \"–\" became \"– 0 %\". */}\n        <span aria-hidden>{amount}</span>\n        <span className=\"sr-only\">{spoken}</span>\n      </span>\n      {label != null && <span className=\"text-muted\">{label}</span>}\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/signed-amount.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { ArrowDown, ArrowUp, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { formatMoney, formatNumber, formatPercent } from \"../lib/format\";\nimport { useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_STAT_TILE_LABELS } from \"./stat-tile\";\nimport type { StatTileLabels } from \"./stat-tile\";\nimport { DEFAULT_SIGNED_AMOUNT_LABELS } from \"./signed-amount-labels\";\n\n/**\n * The text colours a figure can carry, token-backed — `StatTile`'s tones, as a class\n * any span can take.\n *\n *  - `default` — the primary text colour. `muted` — the secondary, quiet one.\n *  - `income` / `expense` / `net` — the money trio (CVD-safe teal / amber / violet).\n *  - `success` / `warning` / `danger` / `info` — a verdict: a rent rise is the tenant's\n *    bad news (kastlan lease-columns), a vote \"for\" is green (meeting-agenda-tab).\n *  - `brand` — the app's accent.\n *\n * Colour is never the only carrier: pair a verdict with an arrow, a word, or a sign.\n */\nexport type TextTone =\n  \"default\" | \"muted\" | \"brand\" | \"income\" | \"expense\" | \"net\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nconst TEXT_TONE: Record<TextTone, string> = {\n  default: \"text-primary\",\n  muted: \"text-muted\",\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\n/**\n * The class that colours text in `tone` — for the spans kastlan colours by hand with\n * `text-[var(--danger)]` / `text-emerald-600` (settlement-table, changelog-page,\n * meeting-agenda-tab), so the palette they draw from is the kit's tokens.\n */\nexport function toneTextClass(tone: TextTone): string {\n  return TEXT_TONE[tone];\n}\n\nexport interface ToneProps extends ComponentPropsWithRef<\"span\"> {\n  tone: TextTone;\n}\n\n/** A `<span>` in a {@link TextTone} — `<Tone tone=\"success\">{votesFor}</Tone>`. */\nexport function Tone({ tone, className, ...rest }: ToneProps) {\n  return <span {...rest} className={cn(TEXT_TONE[tone], className)} />;\n}\n\n/* ── Signed amounts ──────────────────────────────────────────────────────── */\n\n/** Which way is +1: `up` for a figure where more is good news (income, savings),\n *  `down` where less is (a rent the tenant pays, a cost). */\nexport type GoodDirection = \"up\" | \"down\";\n\n/**\n * How a signed figure is coloured:\n *  - `signed` (default) — money read by its own sign: above zero `income`, below zero\n *    `expense`, zero muted. A balance, a net.\n *  - `income` / `expense` / `neutral` — one colour whatever the sign (`neutral` is the\n *    text's own colour).\n *  - `verdict` — the change judged by {@link SignedAmountProps.goodDirection}: good\n *    news `success`, bad news `danger`, zero muted. Setting `goodDirection` implies it.\n */\nexport type SignedAmountTone = \"signed\" | \"income\" | \"expense\" | \"neutral\" | \"verdict\";\n\n/**\n * The colours a VERDICT is painted in (`goodDirection` set, or `tone=\"verdict\"`):\n *  - `status` (default) — `success` / `danger`: good news, bad news.\n *  - `money` — `income` / `expense` (the `.text-money-pos` / `.text-money-neg` pair):\n *    the app's ONE money palette (keksdose dev#434). A grocery price going UP is money\n *    going out, so with `goodDirection=\"down\"` it wears the expense colour every other\n *    outflow in the app wears — not a red that says \"error\". keksdose coloured its\n *    three price-change sites by hand for want of this.\n */\nexport type VerdictPalette = \"status\" | \"money\";\n\n/** What a signed figure says to a screen reader, whose readers disagree about a\n *  leading \"+\" (most skip it) and a \"−\" (some read \"dash\", some nothing). */\nexport interface SignedAmountLabels {\n  /** A figure above zero. `amount` is formatted and unsigned. */\n  positive: (amount: string) => string;\n  /** A figure below zero. `amount` is formatted and unsigned. */\n  negative: (amount: string) => string;\n}\n\n// Defined in ./signed-amount-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_SIGNED_AMOUNT_LABELS };\n\ninterface SignedFormatProps {\n  /** ISO 4217 code: format as money. */\n  currency?: string;\n  /** `\"percent\"` reads `value` as a RATIO (`0.12` → 12 %), as `StatTile`'s delta does\n   *  — or as percent POINTS with `ratio={false}`. */\n  unit?: \"value\" | \"percent\";\n  /** With `unit=\"percent\"`: `true` (default) — `value` is a ratio, `0.12` is 12 %.\n   *  `false` — `value` is already in percent POINTS, `12` is 12 %, as `formatPercent`'s\n   *  `ratio` option reads it. Backends send points (keksdose's price changes, kastlan's\n   *  `change_pct`), and without this every site divided by 100 — and wrote its\n   *  `flatWithin` as a ratio (`0.005`) beside a value it had to convert. With\n   *  `ratio={false}` the value AND `flatWithin` are in points (`flatWithin={0.5}` is\n   *  half a point). Ignored for any other unit. */\n  ratio?: boolean;\n  /** Compact notation: 12 400 → \"12K\". */\n  compact?: boolean;\n  /** Fraction digits, as `formatNumber`'s `digits`. */\n  digits?: number | { min?: number; max?: number };\n  /** Formats the UNSIGNED magnitude, replacing the `Intl` default outright. The sign\n   *  is the component's. */\n  format?: (magnitude: number) => string;\n  locale?: string;\n}\n\nfunction useMagnitudeFormatter({ currency, unit, ratio, compact, digits, format, locale }: SignedFormatProps) {\n  const kitLocale = useKitLocale(locale);\n  return (magnitude: number): string => {\n    if (format) return format(magnitude);\n    if (unit === \"percent\") return formatPercent(magnitude, { locale: kitLocale, compact, digits, ratio });\n    if (currency) return formatMoney(magnitude, currency, { locale: kitLocale, compact, digits });\n    return formatNumber(magnitude, { locale: kitLocale, compact, digits });\n  };\n}\n\n/** `flatWithin` widens \"no change\" from exactly zero to a band round it: a price that\n *  moved by a fraction of a cent, a ratio that rounds to \"0.0 %\", is not a rise, and an\n *  arrow and a colour for it claim one. Inclusive — `|value| ≤ flatWithin` is flat. */\nfunction directionOf(value: number, flatWithin = 0): \"up\" | \"down\" | \"flat\" {\n  if (Math.abs(value) <= Math.max(0, flatWithin)) return \"flat\";\n  return value > 0 ? \"up\" : \"down\";\n}\n\nfunction verdictClass(good: boolean, palette: VerdictPalette): string {\n  if (palette === \"money\") return good ? TEXT_TONE.income : TEXT_TONE.expense;\n  return good ? TEXT_TONE.success : TEXT_TONE.danger;\n}\n\nfunction signedToneClass(\n  tone: SignedAmountTone,\n  dir: \"up\" | \"down\" | \"flat\",\n  goodDirection: GoodDirection | undefined,\n  palette: VerdictPalette,\n): string {\n  if (tone === \"verdict\" || (goodDirection && tone === \"signed\")) {\n    if (dir === \"flat\" || !goodDirection) return TEXT_TONE.muted;\n    return verdictClass(dir === goodDirection, palette);\n  }\n  if (tone === \"signed\") return dir === \"flat\" ? TEXT_TONE.muted : dir === \"up\" ? TEXT_TONE.income : TEXT_TONE.expense;\n  if (tone === \"neutral\") return \"\";\n  return TEXT_TONE[tone];\n}\n\nconst ARROW = { up: ArrowUp, down: ArrowDown, flat: Minus } as const;\n\nexport interface SignedAmountProps extends SignedFormatProps, Omit<ComponentPropsWithRef<\"span\">, \"children\"> {\n  value: number;\n  /** See {@link SignedAmountTone}. Default `signed`, or `verdict` with `goodDirection`. */\n  tone?: SignedAmountTone;\n  /** Which way is good news — colours by verdict (`success` / `danger`, or the money\n   *  pair with `palette=\"money\"`). */\n  goodDirection?: GoodDirection;\n  /** See {@link VerdictPalette}. Default `status`. Only a verdict reads it. */\n  palette?: VerdictPalette;\n  /** A magnitude up to which the figure counts as NO change: no sign, no arrow but the\n   *  flat dash, muted, spoken without \"plus\"/\"minus\" (inclusive; default 0). The digits\n   *  still print `|value|` — use a band below the display precision, where they round\n   *  to zero anyway (`flatWithin={0.005}` at two digits). */\n  flatWithin?: number;\n  /** Print \"+\" before a positive figure (default `true`). A negative always shows its\n   *  minus; zero shows neither. */\n  showPlus?: boolean;\n  /** An arrow before the figure (up / down / a dash at zero) — so the direction does not\n   *  ride on colour alone. Decorative; the words say the same. */\n  arrow?: boolean;\n  /** Tag the figure `data-private`, for the host's demo-mode blur. */\n  sensitive?: boolean;\n  labels?: LabelOverride<SignedAmountLabels>;\n}\n\n/**\n * A figure with a sign that matters: a balance, a rent change, a net.\n *\n * kastlan writes it by hand in five places — `{change > 0 ? \"+\" : \"\"}{formatCurrency(\n * change)}` in a span coloured by a ternary (lease-columns:190, settlement-table:58,\n * the tenancy `formatPct`) — and each picks its own colours for the same verdict.\n *\n * The visible figure (sign, digits, arrow) is hidden from assistive tech and spoken as\n * words instead (\"plus CHF 50.00\" / \"minus CHF 50.00\", `signedAmount.*`): a \"+\" is\n * skipped by most screen readers, and `Intl`'s \"−\" is read as \"dash\" or not at all.\n */\nexport function SignedAmount({\n  value,\n  currency,\n  unit,\n  ratio,\n  compact,\n  digits,\n  format,\n  locale,\n  tone = \"signed\",\n  goodDirection,\n  palette = \"status\",\n  flatWithin,\n  showPlus = true,\n  arrow = false,\n  sensitive = false,\n  labels,\n  className,\n  ...rest\n}: SignedAmountProps) {\n  const text = useKitLabels(\"signedAmount\", DEFAULT_SIGNED_AMOUNT_LABELS, labels);\n  const fmt = useMagnitudeFormatter({ currency, unit, ratio, compact, digits, format, locale });\n  const finite = Number.isFinite(value);\n  const dir = finite ? directionOf(value, flatWithin) : \"flat\";\n  const amount = finite ? fmt(Math.abs(value)) : \"—\";\n  // U+2212, the typographic minus: the same width as \"+\", so a column of signed figures\n  // lines up under `tabular-nums`.\n  const sign = dir === \"up\" ? (showPlus ? \"+\" : \"\") : dir === \"down\" ? \"−\" : \"\";\n  const spoken = dir === \"up\" ? text.positive(amount) : dir === \"down\" ? text.negative(amount) : amount;\n  const Icon = ARROW[dir];\n  return (\n    <span\n      {...rest}\n      data-private={sensitive ? \"\" : undefined}\n      data-direction={dir}\n      className={cn(\n        \"relative inline-flex items-center gap-0.5 whitespace-nowrap tabular-nums\",\n        signedToneClass(tone, dir, goodDirection, palette),\n        className,\n      )}\n    >\n      {arrow && <Icon aria-hidden className=\"size-[1em] shrink-0\" />}\n      <span aria-hidden>\n        {sign}\n        {amount}\n      </span>\n      <span className=\"sr-only\">{spoken}</span>\n    </span>\n  );\n}\n\nexport interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithRef<\"span\">, \"children\"> {\n  /** The change. Above zero is \"up\". */\n  value: number;\n  /** Which way is good news. Unset, the change is stated and not judged (muted); set,\n   *  it is coloured `success` / `danger` and its sentence says \"(better)\" / \"(worse)\". */\n  goodDirection?: GoodDirection;\n  /** See {@link VerdictPalette}: `money` paints good news `income` and bad news\n   *  `expense` instead of `success` / `danger`. Default `status`. */\n  palette?: VerdictPalette;\n  /** See {@link SignedAmountProps.flatWithin}: up to this magnitude the change is\n   *  \"unchanged\" — flat dash, muted, no verdict. Default 0. */\n  flatWithin?: number;\n  /** What it is measured against, after it: \"vs last month\". */\n  label?: ReactNode;\n  /** Hide the arrow (shown by default, as on a StatTile). At zero the arrow is a flat\n   *  dash BESIDE the figure (\"– 0.00 %\"), never in place of it. */\n  arrow?: boolean;\n  sensitive?: boolean;\n  /** The `statTile` namespace's direction words — a delta says the same as a tile's. */\n  labels?: LabelOverride<Pick<StatTileLabels, \"increase\" | \"decrease\" | \"unchanged\" | \"better\" | \"worse\">>;\n}\n\n/**\n * `StatTile`'s delta on its own: an arrow, the unsigned magnitude, and a sentence for\n * screen readers (\"Up 12% (worse)\"), coloured only when `goodDirection` judges it —\n * users up and cost up are the same arrow until someone says which is good.\n *\n * For a change shown outside a tile: kastlan's rent-change column\n * (lease-columns:219, a \"+1.25%\" chip), the breakdown rows of the rent calculator\n * (breakdown-row:5, a trend icon coloured by hand).\n */\nexport function Delta({\n  value,\n  currency,\n  unit,\n  ratio,\n  compact,\n  digits,\n  format,\n  locale,\n  goodDirection,\n  palette = \"status\",\n  flatWithin,\n  label,\n  arrow = true,\n  sensitive = false,\n  labels,\n  className,\n  ...rest\n}: DeltaProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  const fmt = useMagnitudeFormatter({ currency, unit, ratio, compact, digits, format, locale });\n  if (!Number.isFinite(value)) return null;\n  const amount = fmt(Math.abs(value));\n  const dir = directionOf(value, flatWithin);\n  const Icon = ARROW[dir];\n  let spoken = dir === \"up\" ? text.increase(amount) : dir === \"down\" ? text.decrease(amount) : text.unchanged;\n  let tone = TEXT_TONE.muted;\n  if (goodDirection && dir !== \"flat\") {\n    const good = dir === goodDirection;\n    spoken = good ? text.better(spoken) : text.worse(spoken);\n    tone = verdictClass(good, palette);\n  }\n  return (\n    <span\n      {...rest}\n      data-direction={dir}\n      className={cn(\"relative inline-flex flex-wrap items-center gap-x-1.5 tabular-nums\", className)}\n    >\n      <span\n        data-private={sensitive ? \"\" : undefined}\n        className={cn(\"inline-flex items-center gap-0.5 font-medium\", tone)}\n      >\n        {arrow && <Icon className=\"size-[1em] shrink-0\" aria-hidden />}\n        {/* The figure at zero too, beside the flat dash (kastlan feedback #48). Before\n            this a flat delta with an arrow drew the dash ALONE, as a StatTile does — so\n            a rent-change column that printed \"0.00 %\" for an unchanged lease showed a\n            bare \"–\" in its place, and a bare dash is what a table prints for a MISSING\n            value: \"unchanged\" and \"not known\" looked the same. The Minus icon is the\n            neutral indicator, the muted tone the neutral colour, and the figure says\n            how much (none) in the column's own digits. A value that is missing never\n            reaches here — a non-finite one renders nothing, above. Visible change for\n            every `<Delta value={0}>` with the default arrow: \"–\" became \"– 0 %\". */}\n        <span aria-hidden>{amount}</span>\n        <span className=\"sr-only\">{spoken}</span>\n      </span>\n      {label != null && <span className=\"text-muted\">{label}</span>}\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/skeleton.js

@@ -19,24 +19,9 @@ function Skeleton({ label, ...props }) {
 }
 function SkeletonFill({ shape = "line", lines, className, ...rest }) {
   if (shape === "line" && lines !== void 0 && lines > 1) {
-    return /* @__PURE__ */ jsx("div", { ...rest, "aria-hidden": true, className: cn("flex flex-col gap-2", className), "data-skeleton": "lines", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(SKELETON_CLASS, SHAPE.line, i === lines - 1 && "w-2/3"),
-        "data-skeleton": "line"
-      },
-      i
-    )) });
+    return /* @__PURE__ */ jsx("div", { ...rest, "aria-hidden": true, className: cn("flex flex-col gap-2", className), "data-skeleton": "lines", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx("div", { className: cn(SKELETON_CLASS, SHAPE.line, i === lines - 1 && "w-2/3"), "data-skeleton": "line" }, i)) });
   }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...rest,
-      "aria-hidden": true,
-      "data-skeleton": shape,
-      className: cn(SKELETON_CLASS, SHAPE[shape], className)
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { ...rest, "aria-hidden": true, "data-skeleton": shape, className: cn(SKELETON_CLASS, SHAPE[shape], className) });
 }
 export {
   SKELETON_CLASS,

package/dist/components/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * The look of a placeholder, as one class string — the same fill and pulse\n * `StatTile`'s `loading` headline draws (it imports this), so a tile and the list\n * beside it shimmer as one surface.\n *\n * `motion-reduce:animate-none`: a pulse is motion with no information in it, which\n * is exactly what `prefers-reduced-motion` asks to be dropped. The fill stays, so the\n * shape of what is coming is still there.\n */\nexport const SKELETON_CLASS = \"animate-pulse rounded bg-active motion-reduce:animate-none\";\n\nexport type SkeletonShape = \"line\" | \"block\" | \"circle\";\n\n/**\n * A `div`'s props, `ref` included (0.33.1, keksdose): they were spread onto the\n * placeholder all along, but `ComponentPropsWithoutRef` kept `ref` out of the type, so an\n * app could not hold the element (to measure it, or scroll it into view) without a\n * wrapper. The ref is the placeholder's — with `lines`, the box round the lines; with\n * `label`, still the placeholder, not the `role=\"status\"` region round it — where\n * `className` goes too.\n */\nexport interface SkeletonProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  /** `line` (default): a bar the height of a line of small text. `block`: an area\n   *  (an image, a chart, a card body). `circle`: an avatar. Size any of them with\n   *  `className` (`w-32`, `h-40`, `size-8`). */\n  shape?: SkeletonShape;\n  /** For `line`: this many lines, the last one shorter — a paragraph's outline. */\n  lines?: number;\n  /**\n   * Say what is loading, once: wraps the placeholder in a `role=\"status\"` region with\n   * this as its (visually hidden) text — kastlan's activity feed (activity-feed:52)\n   * built exactly that by hand around `<Skeleton lines={5} />`. The placeholder itself\n   * stays hidden. Left out, nothing is announced, as before.\n   */\n  label?: string;\n}\n\nconst SHAPE: Record<SkeletonShape, string> = {\n  line: \"h-3 w-full\",\n  block: \"h-24 w-full rounded-md\",\n  circle: \"size-10 rounded-full\",\n};\n\n/**\n * A grey stand-in for content that is on its way.\n *\n * keksdose and kastlan both drew these by hand — `animate-pulse bg-slate-200` in one\n * place, a token in the next, a pulse that ran under reduced motion everywhere.\n *\n * ALWAYS `aria-hidden`. A placeholder is not content, and a reader that met twelve\n * unnamed grey boxes would have learned nothing. Say \"loading\" once, where it\n * belongs: `aria-busy` on the region being filled, a `Spinner` / sr-only line\n * beside the skeletons, or this component's own `label`.\n */\nexport function Skeleton({ label, ...props }: SkeletonProps) {\n  if (!label) return <SkeletonFill {...props} />;\n  return (\n    // `relative`: the containing block for the sr-only text (sr-only-containment.test).\n    <div role=\"status\" className=\"relative\" data-skeleton-status=\"\">\n      <span className=\"sr-only\">{label}</span>\n      <SkeletonFill {...props} />\n    </div>\n  );\n}\n\nfunction SkeletonFill({ shape = \"line\", lines, className, ...rest }: Omit<SkeletonProps, \"label\">) {\n  if (shape === \"line\" && lines !== undefined && lines > 1) {\n    return (\n      <div {...rest} aria-hidden className={cn(\"flex flex-col gap-2\", className)} data-skeleton=\"lines\">\n        {Array.from({ length: lines }, (_, i) => (\n          <div\n            key={i}\n            className={cn(SKELETON_CLASS, SHAPE.line, i === lines - 1 && \"w-2/3\")}\n            data-skeleton=\"line\"\n          />\n        ))}\n      </div>\n    );\n  }\n  return (\n    <div\n      {...rest}\n      aria-hidden\n      data-skeleton={shape}\n      className={cn(SKELETON_CLASS, SHAPE[shape], className)}\n    />\n  );\n}\n"],"mappings":";AA0DqB,cAGjB,YAHiB;AAzDrB,SAAS,UAAU;AAWZ,MAAM,iBAAiB;AA4B9B,MAAM,QAAuC;AAAA,EAC3C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAaO,SAAS,SAAS,EAAE,OAAO,GAAG,MAAM,GAAkB;AAC3D,MAAI,CAAC,MAAO,QAAO,oBAAC,gBAAc,GAAG,OAAO;AAC5C;AAAA;AAAA,IAEE,qBAAC,SAAI,MAAK,UAAS,WAAU,YAAW,wBAAqB,IAC3D;AAAA,0BAAC,UAAK,WAAU,WAAW,iBAAM;AAAA,MACjC,oBAAC,gBAAc,GAAG,OAAO;AAAA,OAC3B;AAAA;AAEJ;AAEA,SAAS,aAAa,EAAE,QAAQ,QAAQ,OAAO,WAAW,GAAG,KAAK,GAAiC;AACjG,MAAI,UAAU,UAAU,UAAU,UAAa,QAAQ,GAAG;AACxD,WACE,oBAAC,SAAK,GAAG,MAAM,eAAW,MAAC,WAAW,GAAG,uBAAuB,SAAS,GAAG,iBAAc,SACvF,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MACjC;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW,GAAG,gBAAgB,MAAM,MAAM,MAAM,QAAQ,KAAK,OAAO;AAAA,QACpE,iBAAc;AAAA;AAAA,MAFT;AAAA,IAGP,CACD,GACH;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,MACX,iBAAe;AAAA,MACf,WAAW,GAAG,gBAAgB,MAAM,KAAK,GAAG,SAAS;AAAA;AAAA,EACvD;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * The look of a placeholder, as one class string — the same fill and pulse\n * `StatTile`'s `loading` headline draws (it imports this), so a tile and the list\n * beside it shimmer as one surface.\n *\n * `motion-reduce:animate-none`: a pulse is motion with no information in it, which\n * is exactly what `prefers-reduced-motion` asks to be dropped. The fill stays, so the\n * shape of what is coming is still there.\n */\nexport const SKELETON_CLASS = \"animate-pulse rounded bg-active motion-reduce:animate-none\";\n\nexport type SkeletonShape = \"line\" | \"block\" | \"circle\";\n\n/**\n * A `div`'s props, `ref` included (0.33.1, keksdose): they were spread onto the\n * placeholder all along, but `ComponentPropsWithoutRef` kept `ref` out of the type, so an\n * app could not hold the element (to measure it, or scroll it into view) without a\n * wrapper. The ref is the placeholder's — with `lines`, the box round the lines; with\n * `label`, still the placeholder, not the `role=\"status\"` region round it — where\n * `className` goes too.\n */\nexport interface SkeletonProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  /** `line` (default): a bar the height of a line of small text. `block`: an area\n   *  (an image, a chart, a card body). `circle`: an avatar. Size any of them with\n   *  `className` (`w-32`, `h-40`, `size-8`). */\n  shape?: SkeletonShape;\n  /** For `line`: this many lines, the last one shorter — a paragraph's outline. */\n  lines?: number;\n  /**\n   * Say what is loading, once: wraps the placeholder in a `role=\"status\"` region with\n   * this as its (visually hidden) text — kastlan's activity feed (activity-feed:52)\n   * built exactly that by hand around `<Skeleton lines={5} />`. The placeholder itself\n   * stays hidden. Left out, nothing is announced, as before.\n   */\n  label?: string;\n}\n\nconst SHAPE: Record<SkeletonShape, string> = {\n  line: \"h-3 w-full\",\n  block: \"h-24 w-full rounded-md\",\n  circle: \"size-10 rounded-full\",\n};\n\n/**\n * A grey stand-in for content that is on its way.\n *\n * keksdose and kastlan both drew these by hand — `animate-pulse bg-slate-200` in one\n * place, a token in the next, a pulse that ran under reduced motion everywhere.\n *\n * ALWAYS `aria-hidden`. A placeholder is not content, and a reader that met twelve\n * unnamed grey boxes would have learned nothing. Say \"loading\" once, where it\n * belongs: `aria-busy` on the region being filled, a `Spinner` / sr-only line\n * beside the skeletons, or this component's own `label`.\n */\nexport function Skeleton({ label, ...props }: SkeletonProps) {\n  if (!label) return <SkeletonFill {...props} />;\n  return (\n    // `relative`: the containing block for the sr-only text (sr-only-containment.test).\n    <div role=\"status\" className=\"relative\" data-skeleton-status=\"\">\n      <span className=\"sr-only\">{label}</span>\n      <SkeletonFill {...props} />\n    </div>\n  );\n}\n\nfunction SkeletonFill({ shape = \"line\", lines, className, ...rest }: Omit<SkeletonProps, \"label\">) {\n  if (shape === \"line\" && lines !== undefined && lines > 1) {\n    return (\n      <div {...rest} aria-hidden className={cn(\"flex flex-col gap-2\", className)} data-skeleton=\"lines\">\n        {Array.from({ length: lines }, (_, i) => (\n          <div key={i} className={cn(SKELETON_CLASS, SHAPE.line, i === lines - 1 && \"w-2/3\")} data-skeleton=\"line\" />\n        ))}\n      </div>\n    );\n  }\n  return <div {...rest} aria-hidden data-skeleton={shape} className={cn(SKELETON_CLASS, SHAPE[shape], className)} />;\n}\n"],"mappings":";AA0DqB,cAGjB,YAHiB;AAzDrB,SAAS,UAAU;AAWZ,MAAM,iBAAiB;AA4B9B,MAAM,QAAuC;AAAA,EAC3C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAaO,SAAS,SAAS,EAAE,OAAO,GAAG,MAAM,GAAkB;AAC3D,MAAI,CAAC,MAAO,QAAO,oBAAC,gBAAc,GAAG,OAAO;AAC5C;AAAA;AAAA,IAEE,qBAAC,SAAI,MAAK,UAAS,WAAU,YAAW,wBAAqB,IAC3D;AAAA,0BAAC,UAAK,WAAU,WAAW,iBAAM;AAAA,MACjC,oBAAC,gBAAc,GAAG,OAAO;AAAA,OAC3B;AAAA;AAEJ;AAEA,SAAS,aAAa,EAAE,QAAQ,QAAQ,OAAO,WAAW,GAAG,KAAK,GAAiC;AACjG,MAAI,UAAU,UAAU,UAAU,UAAa,QAAQ,GAAG;AACxD,WACE,oBAAC,SAAK,GAAG,MAAM,eAAW,MAAC,WAAW,GAAG,uBAAuB,SAAS,GAAG,iBAAc,SACvF,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MACjC,oBAAC,SAAY,WAAW,GAAG,gBAAgB,MAAM,MAAM,MAAM,QAAQ,KAAK,OAAO,GAAG,iBAAc,UAAxF,CAA+F,CAC1G,GACH;AAAA,EAEJ;AACA,SAAO,oBAAC,SAAK,GAAG,MAAM,eAAW,MAAC,iBAAe,OAAO,WAAW,GAAG,gBAAgB,MAAM,KAAK,GAAG,SAAS,GAAG;AAClH;","names":[]}

package/dist/components/slider.js

@@ -97,25 +97,9 @@ function Slider({
     // top of it at 390px (lenkbank L1). Each keeps its own width, so the readout
     // drops to a line of its own, still at the end, only when the two don't fit.
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5", children: [
-      label !== void 0 && /* @__PURE__ */ jsx(
-        "label",
-        {
-          htmlFor: inputId,
-          className: "min-w-0 select-none text-xs font-medium text-secondary",
-          children: label
-        }
-      ),
+      label !== void 0 && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "min-w-0 select-none text-xs font-medium text-secondary", children: label }),
       labelHint !== void 0 && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: labelHint }),
-      readout !== void 0 && /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "ms-auto max-w-full text-xs tabular-nums text-primary",
-            plainReadout && "select-none"
-          ),
-          children: readout
-        }
-      )
+      readout !== void 0 && /* @__PURE__ */ jsx("span", { className: cn("ms-auto max-w-full text-xs tabular-nums text-primary", plainReadout && "select-none"), children: readout })
     ] }),
     /* @__PURE__ */ jsx(
       "input",
@@ -141,25 +125,18 @@ function Slider({
     // `min`, not under the track's rounded end. Each tick is a zero-width column
     // centred on its point, which centres its label on it in either direction
     // without a `translate` that would need flipping for right-to-left.
-    /* @__PURE__ */ jsx(
-      "div",
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn("relative mx-2 -mt-1.5", MARKS_LARGE, hasMarkLabels ? "h-5" : "h-1.5"), children: normalizedMarks.map((m) => /* @__PURE__ */ jsxs(
+      "span",
       {
-        "aria-hidden": true,
-        className: cn("relative mx-2 -mt-1.5", MARKS_LARGE, hasMarkLabels ? "h-5" : "h-1.5"),
-        children: normalizedMarks.map((m) => /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: "absolute top-0 flex w-0 flex-col items-center",
-            style: { insetInlineStart: `${share(position(m.value)) * 100}%` },
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "h-1.5 w-px shrink-0 bg-[var(--border-strong)]" }),
-              m.label !== void 0 && /* @__PURE__ */ jsx("span", { className: "mt-0.5 select-none whitespace-nowrap text-caption leading-tight text-muted", children: m.label })
-            ]
-          },
-          m.value
-        ))
-      }
-    ),
+        className: "absolute top-0 flex w-0 flex-col items-center",
+        style: { insetInlineStart: `${share(position(m.value)) * 100}%` },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "h-1.5 w-px shrink-0 bg-[var(--border-strong)]" }),
+          m.label !== void 0 && /* @__PURE__ */ jsx("span", { className: "mt-0.5 select-none whitespace-nowrap text-caption leading-tight text-muted", children: m.label })
+        ]
+      },
+      m.value
+    )) }),
     messages.below
   ] });
 }

package/dist/components/slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/slider.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { CSSProperties, ChangeEvent, InputHTMLAttributes, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useFieldMessages, type FieldHelpProps } from \"./field-parts\";\n\n/**\n * A range control on a native `<input type=\"range\">`.\n *\n * Lenkbank wrote the first one (`shared/ui/slider-field.tsx`) and then the case for\n * moving it here (`docs/ui-kit-slider-proposal.md`). This is that proposal's \"stage 1\"\n * primitive — the track, the thumb, the scale and the accessibility — plus the label\n * line and tick marks its SpeedSlider needed. The four decisions it argues should be\n * made once are made here, and each carries its note below:\n *\n *  1. a logarithmic scale whose far-left stop means exactly zero ({@link SliderProps.zeroStop});\n *  2. `aria-valuetext`, so a log track does not announce its 0–1 position as the value;\n *  3. a 24px pointer target, which needs the track and thumb drawn separately;\n *  4. the number is the truth and the track a view of it: a value outside `min`–`max`\n *     is kept and the thumb pins at the end — nothing here clamps what it was given.\n *\n * Controlled only, like `ToggleGroup` and `NumberInput`: there is no uncontrolled mode\n * to get wrong, and neither app wants one. The package does no number formatting and\n * holds no locale — `formatValue` is how the caller's `Intl` result gets in.\n *\n * Not here, deliberately (the proposal's list): two thumbs, vertical orientation, and\n * a number box. A `NumberInput` goes in the `readout` slot when a typed value is\n * wanted beside the track.\n */\n\n/** On a log scale with {@link SliderProps.zeroStop}, the share of the track that is\n *  the \"off\" stop. The first position to its right is `min`. */\nconst ZERO_STOP = 0.02;\n\n/** Position resolution on a log track — 1000 stops, fine enough that a drag reads as\n *  continuous. PageUp/PageDown still cross a tenth of the track at a time. */\nconst LOG_STEP = 0.001;\n\n/**\n * Where a value sits on a logarithmic track, 0–1.\n *\n * With `zeroStop`, zero and below is 0 and the decades between `min` and `max` are\n * mapped onto the rest; without it, `min` is the far left. A value past either end\n * pins there — that is the DISPLAY clamping, never the value's.\n */\nexport function toLogPosition(value: number, min: number, max: number, zeroStop = true): number {\n  if (value <= 0) return 0;\n  const share = Math.log(Math.max(value, min) / min) / Math.log(max / min);\n  const clamped = Math.min(1, Math.max(0, share));\n  return zeroStop ? ZERO_STOP + (1 - ZERO_STOP) * clamped : clamped;\n}\n\n/** The inverse of {@link toLogPosition}: the value at a track position. */\nexport function fromLogPosition(position: number, min: number, max: number, zeroStop = true): number {\n  if (zeroStop) {\n    if (position < ZERO_STOP) return 0;\n    return min * Math.pow(max / min, (position - ZERO_STOP) / (1 - ZERO_STOP));\n  }\n  return min * Math.pow(max / min, position);\n}\n\n// The input is the pointer target, so its box is `h-6` (24px, WCAG 2.5.8) and the\n// track that LOOKS like a track is a 6px strip drawn inside it. Once the box is taller\n// than the track its background cannot be the track, and with `appearance-none`\n// nothing else draws one — measured in Chromium by Lenkbank, that is a bare thumb\n// floating on nothing, in the browser's blue. Hence the vendor pseudo-elements: the\n// two engines share no selector for either half, so each half is spelt twice.\n//\n// The fill up to the thumb: WebKit has no progress pseudo-element, so its track is a\n// two-stop gradient that breaks at `--slider-fill` (set inline from the position), and\n// the gradient runs the other way in a right-to-left document, where the native range\n// runs the other way too. Firefox draws the fill itself with `::-moz-range-progress`,\n// which follows the direction on its own.\n//\n// The thumb's `-mt-[0.3125rem]` centres a 1rem thumb on a 0.375rem track — half the\n// difference — in rem since 0.32 (§3.2): the thumb and track grow with the text, and the\n// 5px it was left the thumb low of the track at 125 % and further at 150 %. WebKit lays\n// the thumb out from the track's top edge, Firefox centres it, so only one carries the\n// offset.\n//\n// The focus ring goes on the THUMB, not the box: the box is the full width of the\n// row, and a ring round all of it says \"this row is focused\" rather than \"the handle\n// you are about to move is\". Offset in the surface colour, because the thumb is\n// --brand and a --brand ring touching it would be invisible. Its width is the kit's\n// focus frame (`--focus-ring-width`, §5) — spelt out per engine, since `FOCUS_RING`'s\n// classes cannot carry the pseudo-element.\n//\n// At Large the box is the 48 px touch target (§4) — the track stays centred in it, and\n// the marks row below is pulled up by as much (see `MARKS_LARGE`).\nconst TRACK = [\n  \"block h-6 large:h-[48px] w-full cursor-pointer appearance-none bg-transparent focus:outline-none disabled:cursor-not-allowed\",\n  // WebKit / Blink\n  \"[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full\",\n  \"[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--brand)_var(--slider-fill),var(--border-strong)_var(--slider-fill))]\",\n  \"rtl:[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_left,var(--brand)_var(--slider-fill),var(--border-strong)_var(--slider-fill))]\",\n  \"[&::-webkit-slider-thumb]:-mt-[0.3125rem] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none\",\n  \"[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-brand [&::-webkit-slider-thumb]:shadow\",\n  \"focus-visible:[&::-webkit-slider-thumb]:ring-focus focus-visible:[&::-webkit-slider-thumb]:ring-brand\",\n  \"focus-visible:[&::-webkit-slider-thumb]:ring-offset-2 focus-visible:[&::-webkit-slider-thumb]:ring-offset-surface\",\n  // Firefox\n  \"[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[var(--border-strong)]\",\n  \"[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-brand\",\n  \"[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0\",\n  \"[&::-moz-range-thumb]:bg-brand [&::-moz-range-thumb]:shadow\",\n  \"focus-visible:[&::-moz-range-thumb]:ring-focus focus-visible:[&::-moz-range-thumb]:ring-brand\",\n  \"focus-visible:[&::-moz-range-thumb]:ring-offset-2 focus-visible:[&::-moz-range-thumb]:ring-offset-surface\",\n].join(\" \");\n\n// The marks row sits `-mt-1.5` under a 1.5rem box, tucked against the track. In the 48 px\n// box at Large the track's lower edge is `(48px + 0.375rem) / 2` down, so the row comes\n// up by `(48px − 0.375rem) / 2` less the same 0.1875rem gap: `24px − 0.375rem`.\nconst MARKS_LARGE = \"large:-mt-[calc(24px-0.375rem)]\";\n\n/** A tick under the track. A bare number is a tick with no words. */\nexport interface SliderMark {\n  value: number;\n  /** Shown under the tick — \"30 km/h\", \"measured\". Visual only: the value itself is\n   *  announced through `aria-valuetext`, so the marks row is hidden from assistive\n   *  technology rather than read out as a list of numbers after the slider. */\n  label?: ReactNode;\n}\n\nexport interface SliderProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"type\" | \"value\" | \"defaultValue\" | \"onChange\" | \"min\" | \"max\" | \"step\" | \"children\"\n  >,\n    FieldHelpProps {\n  /** The value. On a log scale this is the real value, not the track position. */\n  value: number;\n  /** The new value — a number, not the DOM event, like `ToggleGroup`. Fired on every\n   *  movement; debounce at the call site if each one costs a request. */\n  onChange: (value: number) => void;\n  /** The track's ends. Not a validity range: a `value` outside it is kept and the\n   *  thumb pins at the end (see the module note). On a log scale `min` must be\n   *  above zero — zero is what {@link zeroStop} is for. */\n  min: number;\n  max: number;\n  /** Step on a linear scale (the native default is 1). Ignored on a log scale, which\n   *  steps by track position — a fixed step is wrong at one end of every decade. */\n  step?: number;\n  /**\n   * How the track maps to the value. `\"log\"` for quantities that run over decades — a\n   * proportional gain of 0.5 and one of 200 are both ordinary, and on a linear track\n   * everything under a tenth of the range is the first pixel. Falls back to linear if\n   * `min` is not above zero or `max` not above `min`, where a logarithm has no answer.\n   */\n  scale?: \"linear\" | \"log\";\n  /**\n   * Log scale only: the far-left stop means exactly 0 (\"off\"), and the first step to\n   * its right is `min`. A logarithm cannot hold zero, and zero is often the question —\n   * should there be an integral term at all? Default `true`; turn it off for a scale\n   * where zero is meaningless (a zoom factor, a playback rate).\n   */\n  zeroStop?: boolean;\n  /**\n   * What a screen reader says for the value — \"12.5 mm\", \"Off\". Sets\n   * `aria-valuetext`. Without it a log track would announce its 0–1 POSITION (\"0.63\"\n   * for a gain of 12.5), so on a log scale the raw value is announced instead; pass\n   * this for anything with a unit or a locale.\n   */\n  formatValue?: (value: number) => string;\n  /** The words above the track, as a `<label for>`. Without it, pass `aria-label`. */\n  label?: ReactNode;\n  /** Something that belongs to the label rather than the value — in practice a\n   *  `FieldHint` \"?\". Rendered beside the label, outside the `<label>` element, so it\n   *  never becomes part of the slider's accessible name.\n   *\n   *  {@link Select}'s rule since 0.34 (DUP-2, refactor audit 2026-10): plain TEXT is a\n   *  caption under the track, on the slider's `aria-describedby`, and so is a FieldHint\n   *  at Large and on a touch screen, where a \"?\" cannot be hovered open (§4) — the\n   *  Kurvenschmiede controller panel's Kp/Ki/Kd facts were a lone \"?\" on a phone. A\n   *  `HelpPopover` stays beside the label at every size. */\n  hint?: ReactNode;\n  /** The value as the reader sees it, at the end of the label line — a formatted\n   *  number, or a `NumberInput` for typing one. Rendered as given. */\n  readout?: ReactNode;\n  /** Ticks under the track, at these values. Marks outside `min`–`max` are dropped. */\n  marks?: ReadonlyArray<number | SliderMark>;\n  /** Classes for the `<input>`. `className` styles the outer wrapper. */\n  inputClassName?: string;\n  /** The `<input type=\"range\">`. A React 19 ref prop since 0.34 (MOD-4, refactor audit\n   *  2026-10); it was `forwardRef`. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * A native range input with the kit's track and thumb, an optional label line\n * (`label`, `hint`, `readout`), tick `marks`, and a logarithmic `scale`.\n *\n * Every other prop reaches the `<input>` — `name`, `id`, `aria-*`, `data-*`, `onBlur`,\n * `onPointerUp` for commit-on-release — and `disabled` also fades the label line.\n */\nexport function Slider({\n  ref,\n  value,\n  onChange,\n  min,\n  max,\n  step,\n  scale = \"linear\",\n  zeroStop = true,\n  formatValue,\n  label,\n  hint,\n  help,\n  readout,\n  marks,\n  className,\n  inputClassName,\n  id,\n  disabled,\n  style,\n  ...rest\n}: SliderProps) {\n  const generated = useId();\n  const inputId = id ?? generated;\n  const log = scale === \"log\" && min > 0 && max > min;\n\n  // Everything the native element sees is a POSITION; everything the caller sees is a\n  // value. On a linear track the two are the same number.\n  const trackMin = log ? 0 : min;\n  const trackMax = log ? 1 : max;\n  const position = (v: number) => (log ? toLogPosition(v, min, max, zeroStop) : Math.min(max, Math.max(min, v)));\n  const current = position(value);\n  // 0–1 share of the track, for the fill and the marks. A zero-width range (min ===\n  // max) has no share to speak of; call it empty rather than divide by zero.\n  const share = (p: number) => (trackMax > trackMin ? (p - trackMin) / (trackMax - trackMin) : 0);\n  const outOfRange = value < min || value > max;\n\n  // `aria-valuetext` replaces the announced NUMBER and leaves the announced name\n  // alone. The caller's words first (`formatValue`, then a hand-written\n  // `aria-valuetext`); failing those, the real value wherever the\n  // native one would lie — every log position, and a linear value the thumb is only\n  // pinned at. `toPrecision(4)` keeps a log value from being read out to sixteen\n  // digits; it is not formatting, and `formatValue` is how to get a locale.\n  const valueText = formatValue\n    ? formatValue(value)\n    : (rest[\"aria-valuetext\"] ??\n      (log || outOfRange ? String(Number(value.toPrecision(4))) : undefined));\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const raw = Number(e.target.value);\n    if (!log) return onChange(raw);\n    // The gap between the zero stop and `min` has to be crossable by keyboard. An\n    // arrow key moves one LOG_STEP, which from zero lands inside the gap — and a gap\n    // that rounded to the nearer end would send it straight back to zero, trapping\n    // a keyboard user at \"off\". So inside the gap, moving up from zero means `min`\n    // and anything else means zero.\n    if (zeroStop && raw > 0 && raw < ZERO_STOP) return onChange(value <= 0 ? min : 0);\n    onChange(fromLogPosition(raw, min, max, zeroStop));\n  };\n\n  const normalizedMarks = (marks ?? [])\n    .map((m) => (typeof m === \"number\" ? { value: m } : m))\n    .filter((m) => m.value >= min && m.value <= max);\n  const hasMarkLabels = normalizedMarks.some((m) => m.label !== undefined);\n\n  // The label line's \"?\", or the caption under the track (DUP-2).\n  const messages = useFieldMessages({\n    hint,\n    help,\n    name: label ?? rest[\"aria-label\"],\n    describedBy: rest[\"aria-describedby\"],\n  });\n  const labelHint = messages.labelHint;\n  const hasHeader = label !== undefined || labelHint !== undefined || readout !== undefined;\n  const plainReadout = typeof readout === \"string\" || typeof readout === \"number\";\n\n  return (\n    <div className={cn(\"w-full\", disabled && \"opacity-60\", className)}>\n      {hasHeader && (\n        // `select-none` on the words is not a nicety (Lenkbank feedback #93): a\n        // mousedown on text beside a range input starts Chrome's native text drag, the\n        // cursor turns to no-drop and the thumb stops following the pointer for the\n        // rest of the gesture. The readout is only made unselectable when it is plain\n        // text — a NumberInput in that slot has to stay selectable to be editable.\n        // `flex-wrap`: a readout wider than the room beside the label (a value plus a\n        // link button, \"0 / 60 / 120 km/h · Alle Geschwindigkeiten\") used to print on\n        // top of it at 390px (lenkbank L1). Each keeps its own width, so the readout\n        // drops to a line of its own, still at the end, only when the two don't fit.\n        <div className=\"flex flex-wrap items-center gap-x-2 gap-y-0.5\">\n          {label !== undefined && (\n            <label\n              htmlFor={inputId}\n              className=\"min-w-0 select-none text-xs font-medium text-secondary\"\n            >\n              {label}\n            </label>\n          )}\n          {labelHint !== undefined && <span className=\"flex shrink-0 items-center\">{labelHint}</span>}\n          {readout !== undefined && (\n            <span\n              className={cn(\n                \"ms-auto max-w-full text-xs tabular-nums text-primary\",\n                plainReadout && \"select-none\",\n              )}\n            >\n              {readout}\n            </span>\n          )}\n        </div>\n      )}\n      <input\n        ref={ref}\n        id={label !== undefined ? inputId : id}\n        disabled={disabled}\n        {...rest}\n        type=\"range\"\n        min={trackMin}\n        max={trackMax}\n        step={log ? LOG_STEP : step}\n        value={current}\n        aria-valuetext={valueText}\n        aria-describedby={messages.describedBy}\n        onChange={handleChange}\n        // The fill's break point, merged under the caller's own style.\n        style={{ ...style, \"--slider-fill\": `${share(current) * 100}%` } as CSSProperties}\n        className={cn(TRACK, inputClassName)}\n      />\n      {normalizedMarks.length > 0 && (\n        // `mx-2` insets the row by half a thumb on each side, which is exactly the\n        // range the thumb's CENTRE travels — so a tick at 0% sits under the thumb at\n        // `min`, not under the track's rounded end. Each tick is a zero-width column\n        // centred on its point, which centres its label on it in either direction\n        // without a `translate` that would need flipping for right-to-left.\n        <div\n          aria-hidden\n          className={cn(\"relative mx-2 -mt-1.5\", MARKS_LARGE, hasMarkLabels ? \"h-5\" : \"h-1.5\")}\n        >\n          {normalizedMarks.map((m) => (\n            <span\n              key={m.value}\n              className=\"absolute top-0 flex w-0 flex-col items-center\"\n              style={{ insetInlineStart: `${share(position(m.value)) * 100}%` }}\n            >\n              <span className=\"h-1.5 w-px shrink-0 bg-[var(--border-strong)]\" />\n              {m.label !== undefined && (\n                <span className=\"mt-0.5 select-none whitespace-nowrap text-caption leading-tight text-muted\">\n                  {m.label}\n                </span>\n              )}\n            </span>\n          ))}\n        </div>\n      )}\n      {messages.below}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/slider.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { CSSProperties, ChangeEvent, InputHTMLAttributes, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useFieldMessages, type FieldHelpProps } from \"./field-parts\";\n\n/**\n * A range control on a native `<input type=\"range\">`.\n *\n * Lenkbank wrote the first one (`shared/ui/slider-field.tsx`) and then the case for\n * moving it here (`docs/ui-kit-slider-proposal.md`). This is that proposal's \"stage 1\"\n * primitive — the track, the thumb, the scale and the accessibility — plus the label\n * line and tick marks its SpeedSlider needed. The four decisions it argues should be\n * made once are made here, and each carries its note below:\n *\n *  1. a logarithmic scale whose far-left stop means exactly zero ({@link SliderProps.zeroStop});\n *  2. `aria-valuetext`, so a log track does not announce its 0–1 position as the value;\n *  3. a 24px pointer target, which needs the track and thumb drawn separately;\n *  4. the number is the truth and the track a view of it: a value outside `min`–`max`\n *     is kept and the thumb pins at the end — nothing here clamps what it was given.\n *\n * Controlled only, like `ToggleGroup` and `NumberInput`: there is no uncontrolled mode\n * to get wrong, and neither app wants one. The package does no number formatting and\n * holds no locale — `formatValue` is how the caller's `Intl` result gets in.\n *\n * Not here, deliberately (the proposal's list): two thumbs, vertical orientation, and\n * a number box. A `NumberInput` goes in the `readout` slot when a typed value is\n * wanted beside the track.\n */\n\n/** On a log scale with {@link SliderProps.zeroStop}, the share of the track that is\n *  the \"off\" stop. The first position to its right is `min`. */\nconst ZERO_STOP = 0.02;\n\n/** Position resolution on a log track — 1000 stops, fine enough that a drag reads as\n *  continuous. PageUp/PageDown still cross a tenth of the track at a time. */\nconst LOG_STEP = 0.001;\n\n/**\n * Where a value sits on a logarithmic track, 0–1.\n *\n * With `zeroStop`, zero and below is 0 and the decades between `min` and `max` are\n * mapped onto the rest; without it, `min` is the far left. A value past either end\n * pins there — that is the DISPLAY clamping, never the value's.\n */\nexport function toLogPosition(value: number, min: number, max: number, zeroStop = true): number {\n  if (value <= 0) return 0;\n  const share = Math.log(Math.max(value, min) / min) / Math.log(max / min);\n  const clamped = Math.min(1, Math.max(0, share));\n  return zeroStop ? ZERO_STOP + (1 - ZERO_STOP) * clamped : clamped;\n}\n\n/** The inverse of {@link toLogPosition}: the value at a track position. */\nexport function fromLogPosition(position: number, min: number, max: number, zeroStop = true): number {\n  if (zeroStop) {\n    if (position < ZERO_STOP) return 0;\n    return min * Math.pow(max / min, (position - ZERO_STOP) / (1 - ZERO_STOP));\n  }\n  return min * Math.pow(max / min, position);\n}\n\n// The input is the pointer target, so its box is `h-6` (24px, WCAG 2.5.8) and the\n// track that LOOKS like a track is a 6px strip drawn inside it. Once the box is taller\n// than the track its background cannot be the track, and with `appearance-none`\n// nothing else draws one — measured in Chromium by Lenkbank, that is a bare thumb\n// floating on nothing, in the browser's blue. Hence the vendor pseudo-elements: the\n// two engines share no selector for either half, so each half is spelt twice.\n//\n// The fill up to the thumb: WebKit has no progress pseudo-element, so its track is a\n// two-stop gradient that breaks at `--slider-fill` (set inline from the position), and\n// the gradient runs the other way in a right-to-left document, where the native range\n// runs the other way too. Firefox draws the fill itself with `::-moz-range-progress`,\n// which follows the direction on its own.\n//\n// The thumb's `-mt-[0.3125rem]` centres a 1rem thumb on a 0.375rem track — half the\n// difference — in rem since 0.32 (§3.2): the thumb and track grow with the text, and the\n// 5px it was left the thumb low of the track at 125 % and further at 150 %. WebKit lays\n// the thumb out from the track's top edge, Firefox centres it, so only one carries the\n// offset.\n//\n// The focus ring goes on the THUMB, not the box: the box is the full width of the\n// row, and a ring round all of it says \"this row is focused\" rather than \"the handle\n// you are about to move is\". Offset in the surface colour, because the thumb is\n// --brand and a --brand ring touching it would be invisible. Its width is the kit's\n// focus frame (`--focus-ring-width`, §5) — spelt out per engine, since `FOCUS_RING`'s\n// classes cannot carry the pseudo-element.\n//\n// At Large the box is the 48 px touch target (§4) — the track stays centred in it, and\n// the marks row below is pulled up by as much (see `MARKS_LARGE`).\nconst TRACK = [\n  \"block h-6 large:h-[48px] w-full cursor-pointer appearance-none bg-transparent focus:outline-none disabled:cursor-not-allowed\",\n  // WebKit / Blink\n  \"[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full\",\n  \"[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--brand)_var(--slider-fill),var(--border-strong)_var(--slider-fill))]\",\n  \"rtl:[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_left,var(--brand)_var(--slider-fill),var(--border-strong)_var(--slider-fill))]\",\n  \"[&::-webkit-slider-thumb]:-mt-[0.3125rem] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none\",\n  \"[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-brand [&::-webkit-slider-thumb]:shadow\",\n  \"focus-visible:[&::-webkit-slider-thumb]:ring-focus focus-visible:[&::-webkit-slider-thumb]:ring-brand\",\n  \"focus-visible:[&::-webkit-slider-thumb]:ring-offset-2 focus-visible:[&::-webkit-slider-thumb]:ring-offset-surface\",\n  // Firefox\n  \"[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[var(--border-strong)]\",\n  \"[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-brand\",\n  \"[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0\",\n  \"[&::-moz-range-thumb]:bg-brand [&::-moz-range-thumb]:shadow\",\n  \"focus-visible:[&::-moz-range-thumb]:ring-focus focus-visible:[&::-moz-range-thumb]:ring-brand\",\n  \"focus-visible:[&::-moz-range-thumb]:ring-offset-2 focus-visible:[&::-moz-range-thumb]:ring-offset-surface\",\n].join(\" \");\n\n// The marks row sits `-mt-1.5` under a 1.5rem box, tucked against the track. In the 48 px\n// box at Large the track's lower edge is `(48px + 0.375rem) / 2` down, so the row comes\n// up by `(48px − 0.375rem) / 2` less the same 0.1875rem gap: `24px − 0.375rem`.\nconst MARKS_LARGE = \"large:-mt-[calc(24px-0.375rem)]\";\n\n/** A tick under the track. A bare number is a tick with no words. */\nexport interface SliderMark {\n  value: number;\n  /** Shown under the tick — \"30 km/h\", \"measured\". Visual only: the value itself is\n   *  announced through `aria-valuetext`, so the marks row is hidden from assistive\n   *  technology rather than read out as a list of numbers after the slider. */\n  label?: ReactNode;\n}\n\nexport interface SliderProps\n  extends\n    Omit<\n      InputHTMLAttributes<HTMLInputElement>,\n      \"type\" | \"value\" | \"defaultValue\" | \"onChange\" | \"min\" | \"max\" | \"step\" | \"children\"\n    >,\n    FieldHelpProps {\n  /** The value. On a log scale this is the real value, not the track position. */\n  value: number;\n  /** The new value — a number, not the DOM event, like `ToggleGroup`. Fired on every\n   *  movement; debounce at the call site if each one costs a request. */\n  onChange: (value: number) => void;\n  /** The track's ends. Not a validity range: a `value` outside it is kept and the\n   *  thumb pins at the end (see the module note). On a log scale `min` must be\n   *  above zero — zero is what {@link zeroStop} is for. */\n  min: number;\n  max: number;\n  /** Step on a linear scale (the native default is 1). Ignored on a log scale, which\n   *  steps by track position — a fixed step is wrong at one end of every decade. */\n  step?: number;\n  /**\n   * How the track maps to the value. `\"log\"` for quantities that run over decades — a\n   * proportional gain of 0.5 and one of 200 are both ordinary, and on a linear track\n   * everything under a tenth of the range is the first pixel. Falls back to linear if\n   * `min` is not above zero or `max` not above `min`, where a logarithm has no answer.\n   */\n  scale?: \"linear\" | \"log\";\n  /**\n   * Log scale only: the far-left stop means exactly 0 (\"off\"), and the first step to\n   * its right is `min`. A logarithm cannot hold zero, and zero is often the question —\n   * should there be an integral term at all? Default `true`; turn it off for a scale\n   * where zero is meaningless (a zoom factor, a playback rate).\n   */\n  zeroStop?: boolean;\n  /**\n   * What a screen reader says for the value — \"12.5 mm\", \"Off\". Sets\n   * `aria-valuetext`. Without it a log track would announce its 0–1 POSITION (\"0.63\"\n   * for a gain of 12.5), so on a log scale the raw value is announced instead; pass\n   * this for anything with a unit or a locale.\n   */\n  formatValue?: (value: number) => string;\n  /** The words above the track, as a `<label for>`. Without it, pass `aria-label`. */\n  label?: ReactNode;\n  /** Something that belongs to the label rather than the value — in practice a\n   *  `FieldHint` \"?\". Rendered beside the label, outside the `<label>` element, so it\n   *  never becomes part of the slider's accessible name.\n   *\n   *  {@link Select}'s rule since 0.34 (DUP-2, refactor audit 2026-10): plain TEXT is a\n   *  caption under the track, on the slider's `aria-describedby`, and so is a FieldHint\n   *  at Large and on a touch screen, where a \"?\" cannot be hovered open (§4) — the\n   *  Kurvenschmiede controller panel's Kp/Ki/Kd facts were a lone \"?\" on a phone. A\n   *  `HelpPopover` stays beside the label at every size. */\n  hint?: ReactNode;\n  /** The value as the reader sees it, at the end of the label line — a formatted\n   *  number, or a `NumberInput` for typing one. Rendered as given. */\n  readout?: ReactNode;\n  /** Ticks under the track, at these values. Marks outside `min`–`max` are dropped. */\n  marks?: ReadonlyArray<number | SliderMark>;\n  /** Classes for the `<input>`. `className` styles the outer wrapper. */\n  inputClassName?: string;\n  /** The `<input type=\"range\">`. A React 19 ref prop since 0.34 (MOD-4, refactor audit\n   *  2026-10); it was `forwardRef`. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * A native range input with the kit's track and thumb, an optional label line\n * (`label`, `hint`, `readout`), tick `marks`, and a logarithmic `scale`.\n *\n * Every other prop reaches the `<input>` — `name`, `id`, `aria-*`, `data-*`, `onBlur`,\n * `onPointerUp` for commit-on-release — and `disabled` also fades the label line.\n */\nexport function Slider({\n  ref,\n  value,\n  onChange,\n  min,\n  max,\n  step,\n  scale = \"linear\",\n  zeroStop = true,\n  formatValue,\n  label,\n  hint,\n  help,\n  readout,\n  marks,\n  className,\n  inputClassName,\n  id,\n  disabled,\n  style,\n  ...rest\n}: SliderProps) {\n  const generated = useId();\n  const inputId = id ?? generated;\n  const log = scale === \"log\" && min > 0 && max > min;\n\n  // Everything the native element sees is a POSITION; everything the caller sees is a\n  // value. On a linear track the two are the same number.\n  const trackMin = log ? 0 : min;\n  const trackMax = log ? 1 : max;\n  const position = (v: number) => (log ? toLogPosition(v, min, max, zeroStop) : Math.min(max, Math.max(min, v)));\n  const current = position(value);\n  // 0–1 share of the track, for the fill and the marks. A zero-width range (min ===\n  // max) has no share to speak of; call it empty rather than divide by zero.\n  const share = (p: number) => (trackMax > trackMin ? (p - trackMin) / (trackMax - trackMin) : 0);\n  const outOfRange = value < min || value > max;\n\n  // `aria-valuetext` replaces the announced NUMBER and leaves the announced name\n  // alone. The caller's words first (`formatValue`, then a hand-written\n  // `aria-valuetext`); failing those, the real value wherever the\n  // native one would lie — every log position, and a linear value the thumb is only\n  // pinned at. `toPrecision(4)` keeps a log value from being read out to sixteen\n  // digits; it is not formatting, and `formatValue` is how to get a locale.\n  const valueText = formatValue\n    ? formatValue(value)\n    : (rest[\"aria-valuetext\"] ?? (log || outOfRange ? String(Number(value.toPrecision(4))) : undefined));\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const raw = Number(e.target.value);\n    if (!log) return onChange(raw);\n    // The gap between the zero stop and `min` has to be crossable by keyboard. An\n    // arrow key moves one LOG_STEP, which from zero lands inside the gap — and a gap\n    // that rounded to the nearer end would send it straight back to zero, trapping\n    // a keyboard user at \"off\". So inside the gap, moving up from zero means `min`\n    // and anything else means zero.\n    if (zeroStop && raw > 0 && raw < ZERO_STOP) return onChange(value <= 0 ? min : 0);\n    onChange(fromLogPosition(raw, min, max, zeroStop));\n  };\n\n  const normalizedMarks = (marks ?? [])\n    .map((m) => (typeof m === \"number\" ? { value: m } : m))\n    .filter((m) => m.value >= min && m.value <= max);\n  const hasMarkLabels = normalizedMarks.some((m) => m.label !== undefined);\n\n  // The label line's \"?\", or the caption under the track (DUP-2).\n  const messages = useFieldMessages({\n    hint,\n    help,\n    name: label ?? rest[\"aria-label\"],\n    describedBy: rest[\"aria-describedby\"],\n  });\n  const labelHint = messages.labelHint;\n  const hasHeader = label !== undefined || labelHint !== undefined || readout !== undefined;\n  const plainReadout = typeof readout === \"string\" || typeof readout === \"number\";\n\n  return (\n    <div className={cn(\"w-full\", disabled && \"opacity-60\", className)}>\n      {hasHeader && (\n        // `select-none` on the words is not a nicety (Lenkbank feedback #93): a\n        // mousedown on text beside a range input starts Chrome's native text drag, the\n        // cursor turns to no-drop and the thumb stops following the pointer for the\n        // rest of the gesture. The readout is only made unselectable when it is plain\n        // text — a NumberInput in that slot has to stay selectable to be editable.\n        // `flex-wrap`: a readout wider than the room beside the label (a value plus a\n        // link button, \"0 / 60 / 120 km/h · Alle Geschwindigkeiten\") used to print on\n        // top of it at 390px (lenkbank L1). Each keeps its own width, so the readout\n        // drops to a line of its own, still at the end, only when the two don't fit.\n        <div className=\"flex flex-wrap items-center gap-x-2 gap-y-0.5\">\n          {label !== undefined && (\n            <label htmlFor={inputId} className=\"min-w-0 select-none text-xs font-medium text-secondary\">\n              {label}\n            </label>\n          )}\n          {labelHint !== undefined && <span className=\"flex shrink-0 items-center\">{labelHint}</span>}\n          {readout !== undefined && (\n            <span className={cn(\"ms-auto max-w-full text-xs tabular-nums text-primary\", plainReadout && \"select-none\")}>\n              {readout}\n            </span>\n          )}\n        </div>\n      )}\n      <input\n        ref={ref}\n        id={label !== undefined ? inputId : id}\n        disabled={disabled}\n        {...rest}\n        type=\"range\"\n        min={trackMin}\n        max={trackMax}\n        step={log ? LOG_STEP : step}\n        value={current}\n        aria-valuetext={valueText}\n        aria-describedby={messages.describedBy}\n        onChange={handleChange}\n        // The fill's break point, merged under the caller's own style.\n        style={{ ...style, \"--slider-fill\": `${share(current) * 100}%` } as CSSProperties}\n        className={cn(TRACK, inputClassName)}\n      />\n      {normalizedMarks.length > 0 && (\n        // `mx-2` insets the row by half a thumb on each side, which is exactly the\n        // range the thumb's CENTRE travels — so a tick at 0% sits under the thumb at\n        // `min`, not under the track's rounded end. Each tick is a zero-width column\n        // centred on its point, which centres its label on it in either direction\n        // without a `translate` that would need flipping for right-to-left.\n        <div aria-hidden className={cn(\"relative mx-2 -mt-1.5\", MARKS_LARGE, hasMarkLabels ? \"h-5\" : \"h-1.5\")}>\n          {normalizedMarks.map((m) => (\n            <span\n              key={m.value}\n              className=\"absolute top-0 flex w-0 flex-col items-center\"\n              style={{ insetInlineStart: `${share(position(m.value)) * 100}%` }}\n            >\n              <span className=\"h-1.5 w-px shrink-0 bg-[var(--border-strong)]\" />\n              {m.label !== undefined && (\n                <span className=\"mt-0.5 select-none whitespace-nowrap text-caption leading-tight text-muted\">\n                  {m.label}\n                </span>\n              )}\n            </span>\n          ))}\n        </div>\n      )}\n      {messages.below}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/sparkline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/sparkline.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { useTextSize } from \"../theme/text-size\";\nimport { DEFAULT_SPARKLINE_LABELS } from \"./sparkline-labels\";\nimport { formatWithMinus } from \"../lib/minus\";\n\n/**\n * The words a sparkline speaks. It has no axes, no tooltip and no legend, so its\n * accessible name is the ONLY way a screen reader learns what the shape says —\n * \"Sparkline, image\" is not a summary. Each message takes the values already\n * formatted, so the digits follow the locale and the sentence stays translatable.\n */\nexport interface SparklineLabels {\n  /** Last value above the first: \"Rising from 12 to 40\". */\n  rising: (first: string, last: string) => string;\n  /** Last value below the first. */\n  falling: (first: string, last: string) => string;\n  /** First and last are equal — the shape may still have moved in between. */\n  flat: (value: string) => string;\n  /** One value is a dot, not a trend. */\n  single: (value: string) => string;\n  /** No value at all (empty, or every point a gap). */\n  noData: string;\n  /** How the series' own name is joined to the summary when `label` is given. */\n  named: (name: string, summary: string) => string;\n}\n\n// Defined in ./sparkline-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_SPARKLINE_LABELS };\n\n/**\n * What colours the marks. Token names, not colours: every one resolves to a variable\n * in tokens.css, so the sparkline re-skins with the palette like everything else.\n *\n *  - `chart` — the first series colour (`--chart-1`), the default.\n *  - `income` / `expense` / `net` — the money trio.\n *  - `signed` — a money series read by sign: bars each take income or expense by their\n *    own value, a line or area takes the colour of its LAST value (where it ended up).\n */\nexport type SparklineTone =\n  | \"chart\"\n  | \"brand\"\n  | \"muted\"\n  | \"income\"\n  | \"expense\"\n  | \"net\"\n  | \"signed\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\n// `color`, not `stroke`/`fill`: every mark paints with `currentColor`, so one class\n// per element is enough and a signed bar chart needs no second lookup table.\nconst TONE_CLASS: Record<Exclude<SparklineTone, \"signed\">, string> = {\n  chart: \"text-[var(--chart-1)]\",\n  brand: \"text-brand\",\n  muted: \"text-muted\",\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\nconst signedClass = (v: number) => (v < 0 ? TONE_CLASS.expense : TONE_CLASS.income);\n\n/** `children` is the marks and `width`/`height` are numbers here (or `fluid`), so\n *  those three are the sparkline's own; everything else lands on the `<svg>`. */\nexport interface SparklineProps\n  extends Omit<ComponentPropsWithRef<\"svg\">, \"children\" | \"width\" | \"height\"> {\n  /** The series, oldest first. `null`/`undefined`/`NaN` is a GAP — the line breaks\n   *  there rather than drawing a zero or bridging across the missing point. */\n  data: ReadonlyArray<number | null | undefined>;\n  /** Width in px at Normal. Ignored under `fluid`. The drawn box is this × the text\n   *  size's scale (0.32, docs/text-size-harmonization.md §3.2): a sparkline stands beside\n   *  a figure, and a 72 × 24 trend under a 150 % number reads as a speck. The strokes\n   *  stay px (`non-scaling-stroke`), as every chart's do. */\n  width?: number;\n  /** Height in px at Normal, × the scale likewise. */\n  height?: number;\n  /** Fill the container's width instead of a fixed one (the height stays fixed). */\n  fluid?: boolean;\n  variant?: \"line\" | \"area\" | \"bar\";\n  tone?: SparklineTone;\n  /** Lower / upper end of the scale. Unset, the scale is the data's own tight range\n   *  (bars always include zero, since a bar's length IS its value). */\n  min?: number;\n  max?: number;\n  /** A dashed hairline at this value, e.g. `0` for a series that crosses zero, or a\n   *  target. It is pulled into the scale unless `min`/`max` exclude it. */\n  referenceValue?: number;\n  /** Dot on the last point (line/area) or dim every bar but the last. Default true —\n   *  the last value is the one the number beside a sparkline almost always is. */\n  highlightLast?: boolean;\n  strokeWidth?: number;\n  /** What the series is (\"Price\"), prefixed to the spoken summary. */\n  label?: string;\n  /** How a value is spoken in the summary. Defaults to `Intl.NumberFormat` in the\n   *  kit's locale, at most two decimals. */\n  formatValue?: (value: number) => string;\n  locale?: string;\n  labels?: LabelOverride<SparklineLabels>;\n}\n\nconst DEFAULT_WIDTH = 72;\nconst DEFAULT_HEIGHT = 24;\n\n// One formatter per locale, not per render: a sparkline is a table-cell component and\n// a hundred rows would otherwise build a hundred identical `Intl.NumberFormat`s.\nconst formatters = new Map<string, Intl.NumberFormat>();\nfunction defaultFormat(locale: string | undefined): (v: number) => string {\n  const key = locale ?? \"\";\n  let f = formatters.get(key);\n  if (!f) {\n    f = new Intl.NumberFormat(locale, { maximumFractionDigits: 2 });\n    formatters.set(key, f);\n  }\n  return (v) => formatWithMinus(f, v);\n}\n\nconst isValue = (v: number | null | undefined): v is number => typeof v === \"number\" && Number.isFinite(v);\n\n/** The spoken summary, without the series name. Exported for callers that want the\n *  same sentence elsewhere (a table's row description, a tooltip). */\nexport function sparklineSummary(\n  data: ReadonlyArray<number | null | undefined>,\n  labels: SparklineLabels,\n  format: (value: number) => string,\n): string {\n  const values = data.filter(isValue);\n  if (values.length === 0) return labels.noData;\n  const first = values[0];\n  const last = values[values.length - 1];\n  if (values.length === 1) return labels.single(format(last));\n  if (last > first) return labels.rising(format(first), format(last));\n  if (last < first) return labels.falling(format(first), format(last));\n  return labels.flat(format(last));\n}\n\n/**\n * A tiny trend line: shape only — no axes, no tooltip, no legend, no chart library.\n *\n * It is plain SVG on purpose. The two copies it replaces were recharts `LineChart`s,\n * which is a ResizeObserver, a React tree of a dozen components and a 433 KB import\n * per table cell; a sparkline is one `<path>`, cheap enough for every row of a table\n * and small enough to live on the main barrel rather than behind `/chart`.\n *\n * The scale is TIGHT by default (the data's own min to max). A price that moved from\n * 9.75 to 12.40 drawn against an implicit zero baseline is a nearly flat line at the\n * top of the box — the one thing a shape-only chart must not do (keksdose dev#449).\n * Bars are the exception: a bar's length is its value, so their scale includes zero.\n *\n * `role=\"img\"` with a generated summary (\"Rising from 12 to 40\") as its name — the\n * numbers beside it are the values, the sparkline says which way they have moved.\n *\n * Under `fluid` the SVG is stretched non-uniformly to the container's width, so every\n * stroke is `non-scaling-stroke` and the last-point dot is a zero-length ROUND-CAPPED\n * stroke rather than a `<circle>`: a stroke keeps its width under that transform,\n * where a circle would be squashed into an ellipse.\n */\nexport function Sparkline({\n  data,\n  width = DEFAULT_WIDTH,\n  height = DEFAULT_HEIGHT,\n  fluid = false,\n  variant = \"line\",\n  tone = \"chart\",\n  min,\n  max,\n  referenceValue,\n  highlightLast = true,\n  strokeWidth = 1.5,\n  label,\n  formatValue,\n  locale,\n  labels,\n  className,\n  style,\n  ...rest\n}: SparklineProps) {\n  const text = useKitLabels(\"sparkline\", DEFAULT_SPARKLINE_LABELS, labels);\n  const { scale } = useTextSize();\n  const kitLocale = useKitLocale(locale);\n  const format = formatValue ?? defaultFormat(kitLocale);\n\n  const summary = sparklineSummary(data, text, format);\n  const name = label ? text.named(label, summary) : summary;\n\n  const W = width;\n  const H = height;\n  const points = data.map((v) => (isValue(v) ? v : null));\n  const values = points.filter(isValue);\n  const n = points.length;\n\n  // ── Scale ──\n  const bounds = [...values];\n  if (referenceValue !== undefined && isValue(referenceValue)) bounds.push(referenceValue);\n  if (variant === \"bar\") bounds.push(0);\n  let lo = min ?? (bounds.length ? Math.min(...bounds) : 0);\n  let hi = max ?? (bounds.length ? Math.max(...bounds) : 1);\n  if (hi === lo) {\n    // A constant series: centre it rather than divide by zero.\n    lo -= 1;\n    hi += 1;\n  }\n  const dot = strokeWidth + 1.5;\n  const pad = highlightLast && variant !== \"bar\" ? dot : strokeWidth / 2;\n  const clamp = (v: number) => Math.min(hi, Math.max(lo, v));\n  const y = (v: number) => pad + ((hi - clamp(v)) / (hi - lo)) * (H - 2 * pad);\n  const x = (i: number) => (n <= 1 ? W / 2 : pad + (i * (W - 2 * pad)) / (n - 1));\n  const r = (v: number) => Math.round(v * 100) / 100;\n\n  // Last DEFINED point — the series may well end in a gap. (No `findLastIndex`: the\n  // package targets ES2022.)\n  let lastIndex = -1;\n  for (let i = n - 1; i >= 0 && lastIndex < 0; i -= 1) if (points[i] !== null) lastIndex = i;\n  const lastValue = lastIndex >= 0 ? (points[lastIndex] ?? 0) : 0;\n  const lineClass = tone === \"signed\" ? signedClass(lastValue) : TONE_CLASS[tone];\n\n  // Contiguous runs between gaps. A run of one point is drawn as a dot, so a value\n  // isolated between two gaps is still visible.\n  const runs: Array<Array<[number, number]>> = [];\n  let run: Array<[number, number]> = [];\n  points.forEach((v, i) => {\n    if (v === null) {\n      if (run.length) runs.push(run);\n      run = [];\n    } else {\n      run.push([i, v]);\n    }\n  });\n  if (run.length) runs.push(run);\n\n  const linePath = (seg: Array<[number, number]>) =>\n    seg.map(([i, v], k) => `${k === 0 ? \"M\" : \"L\"}${r(x(i))} ${r(y(v))}`).join(\" \");\n  const dotPath = (i: number, v: number) => `M${r(x(i))} ${r(y(v))} h0`;\n  // The area closes to zero when zero is on the scale, else to the bottom edge.\n  const areaBase = y(lo <= 0 && hi >= 0 ? 0 : lo);\n\n  const STROKE = {\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\",\n    vectorEffect: \"non-scaling-stroke\",\n  } as const;\n\n  return (\n    <svg\n      role=\"img\"\n      aria-label={name}\n      {...rest}\n      // The drawing stays in its own units (the viewBox); only the box it is shown in\n      // grows, uniformly, so nothing is distorted and the strokes keep their px width.\n      width={fluid ? \"100%\" : W * scale}\n      height={H * scale}\n      viewBox={`0 0 ${W} ${H}`}\n      preserveAspectRatio=\"none\"\n      className={cn(fluid ? \"block w-full\" : \"inline-block shrink-0 align-middle\", \"overflow-visible\", className)}\n      style={style}\n    >\n      {referenceValue !== undefined && isValue(referenceValue) && referenceValue >= lo && referenceValue <= hi && (\n        <path\n          d={`M0 ${r(y(referenceValue))} H${W}`}\n          {...STROKE}\n          strokeWidth={1}\n          strokeDasharray=\"2 2\"\n          className=\"text-[var(--border-strong)]\"\n        />\n      )}\n\n      {variant === \"bar\"\n        ? (() => {\n            const slot = W / Math.max(n, 1);\n            const bw = Math.max(1, slot * 0.7);\n            const base = y(0);\n            return points.map((v, i) => {\n              if (v === null) return null;\n              const top = Math.min(y(v), base);\n              return (\n                <rect\n                  key={i}\n                  x={r(i * slot + (slot - bw) / 2)}\n                  y={r(top)}\n                  width={r(bw)}\n                  height={r(Math.abs(y(v) - base))}\n                  fill=\"currentColor\"\n                  opacity={highlightLast && i !== lastIndex ? 0.55 : 1}\n                  className={tone === \"signed\" ? signedClass(v) : TONE_CLASS[tone]}\n                />\n              );\n            });\n          })()\n        : runs.map((seg, k) =>\n            seg.length === 1 ? (\n              <path\n                key={k}\n                d={dotPath(seg[0][0], seg[0][1])}\n                {...STROKE}\n                strokeWidth={strokeWidth * 2}\n                className={lineClass}\n              />\n            ) : (\n              <g key={k} className={lineClass}>\n                {variant === \"area\" && (\n                  <path\n                    d={`${linePath(seg)} L${r(x(seg[seg.length - 1][0]))} ${r(areaBase)} L${r(x(seg[0][0]))} ${r(areaBase)} Z`}\n                    fill=\"currentColor\"\n                    fillOpacity={0.15}\n                    stroke=\"none\"\n                  />\n                )}\n                <path d={linePath(seg)} {...STROKE} strokeWidth={strokeWidth} />\n              </g>\n            ),\n          )}\n\n      {highlightLast && variant !== \"bar\" && lastIndex >= 0 && (\n        <path\n          d={dotPath(lastIndex, lastValue)}\n          {...STROKE}\n          strokeWidth={dot * 2 - 1}\n          className={lineClass}\n          data-sparkline-last=\"\"\n        />\n      )}\n    </svg>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/sparkline.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { useTextSize } from \"../theme/text-size\";\nimport { DEFAULT_SPARKLINE_LABELS } from \"./sparkline-labels\";\nimport { formatWithMinus } from \"../lib/minus\";\n\n/**\n * The words a sparkline speaks. It has no axes, no tooltip and no legend, so its\n * accessible name is the ONLY way a screen reader learns what the shape says —\n * \"Sparkline, image\" is not a summary. Each message takes the values already\n * formatted, so the digits follow the locale and the sentence stays translatable.\n */\nexport interface SparklineLabels {\n  /** Last value above the first: \"Rising from 12 to 40\". */\n  rising: (first: string, last: string) => string;\n  /** Last value below the first. */\n  falling: (first: string, last: string) => string;\n  /** First and last are equal — the shape may still have moved in between. */\n  flat: (value: string) => string;\n  /** One value is a dot, not a trend. */\n  single: (value: string) => string;\n  /** No value at all (empty, or every point a gap). */\n  noData: string;\n  /** How the series' own name is joined to the summary when `label` is given. */\n  named: (name: string, summary: string) => string;\n}\n\n// Defined in ./sparkline-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_SPARKLINE_LABELS };\n\n/**\n * What colours the marks. Token names, not colours: every one resolves to a variable\n * in tokens.css, so the sparkline re-skins with the palette like everything else.\n *\n *  - `chart` — the first series colour (`--chart-1`), the default.\n *  - `income` / `expense` / `net` — the money trio.\n *  - `signed` — a money series read by sign: bars each take income or expense by their\n *    own value, a line or area takes the colour of its LAST value (where it ended up).\n */\nexport type SparklineTone =\n  \"chart\" | \"brand\" | \"muted\" | \"income\" | \"expense\" | \"net\" | \"signed\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\n// `color`, not `stroke`/`fill`: every mark paints with `currentColor`, so one class\n// per element is enough and a signed bar chart needs no second lookup table.\nconst TONE_CLASS: Record<Exclude<SparklineTone, \"signed\">, string> = {\n  chart: \"text-[var(--chart-1)]\",\n  brand: \"text-brand\",\n  muted: \"text-muted\",\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\nconst signedClass = (v: number) => (v < 0 ? TONE_CLASS.expense : TONE_CLASS.income);\n\n/** `children` is the marks and `width`/`height` are numbers here (or `fluid`), so\n *  those three are the sparkline's own; everything else lands on the `<svg>`. */\nexport interface SparklineProps extends Omit<ComponentPropsWithRef<\"svg\">, \"children\" | \"width\" | \"height\"> {\n  /** The series, oldest first. `null`/`undefined`/`NaN` is a GAP — the line breaks\n   *  there rather than drawing a zero or bridging across the missing point. */\n  data: ReadonlyArray<number | null | undefined>;\n  /** Width in px at Normal. Ignored under `fluid`. The drawn box is this × the text\n   *  size's scale (0.32, docs/text-size-harmonization.md §3.2): a sparkline stands beside\n   *  a figure, and a 72 × 24 trend under a 150 % number reads as a speck. The strokes\n   *  stay px (`non-scaling-stroke`), as every chart's do. */\n  width?: number;\n  /** Height in px at Normal, × the scale likewise. */\n  height?: number;\n  /** Fill the container's width instead of a fixed one (the height stays fixed). */\n  fluid?: boolean;\n  variant?: \"line\" | \"area\" | \"bar\";\n  tone?: SparklineTone;\n  /** Lower / upper end of the scale. Unset, the scale is the data's own tight range\n   *  (bars always include zero, since a bar's length IS its value). */\n  min?: number;\n  max?: number;\n  /** A dashed hairline at this value, e.g. `0` for a series that crosses zero, or a\n   *  target. It is pulled into the scale unless `min`/`max` exclude it. */\n  referenceValue?: number;\n  /** Dot on the last point (line/area) or dim every bar but the last. Default true —\n   *  the last value is the one the number beside a sparkline almost always is. */\n  highlightLast?: boolean;\n  strokeWidth?: number;\n  /** What the series is (\"Price\"), prefixed to the spoken summary. */\n  label?: string;\n  /** How a value is spoken in the summary. Defaults to `Intl.NumberFormat` in the\n   *  kit's locale, at most two decimals. */\n  formatValue?: (value: number) => string;\n  locale?: string;\n  labels?: LabelOverride<SparklineLabels>;\n}\n\nconst DEFAULT_WIDTH = 72;\nconst DEFAULT_HEIGHT = 24;\n\n// One formatter per locale, not per render: a sparkline is a table-cell component and\n// a hundred rows would otherwise build a hundred identical `Intl.NumberFormat`s.\nconst formatters = new Map<string, Intl.NumberFormat>();\nfunction defaultFormat(locale: string | undefined): (v: number) => string {\n  const key = locale ?? \"\";\n  let f = formatters.get(key);\n  if (!f) {\n    f = new Intl.NumberFormat(locale, { maximumFractionDigits: 2 });\n    formatters.set(key, f);\n  }\n  return (v) => formatWithMinus(f, v);\n}\n\nconst isValue = (v: number | null | undefined): v is number => typeof v === \"number\" && Number.isFinite(v);\n\n/** The spoken summary, without the series name. Exported for callers that want the\n *  same sentence elsewhere (a table's row description, a tooltip). */\nexport function sparklineSummary(\n  data: ReadonlyArray<number | null | undefined>,\n  labels: SparklineLabels,\n  format: (value: number) => string,\n): string {\n  const values = data.filter(isValue);\n  if (values.length === 0) return labels.noData;\n  const first = values[0];\n  const last = values[values.length - 1];\n  if (values.length === 1) return labels.single(format(last));\n  if (last > first) return labels.rising(format(first), format(last));\n  if (last < first) return labels.falling(format(first), format(last));\n  return labels.flat(format(last));\n}\n\n/**\n * A tiny trend line: shape only — no axes, no tooltip, no legend, no chart library.\n *\n * It is plain SVG on purpose. The two copies it replaces were recharts `LineChart`s,\n * which is a ResizeObserver, a React tree of a dozen components and a 433 KB import\n * per table cell; a sparkline is one `<path>`, cheap enough for every row of a table\n * and small enough to live on the main barrel rather than behind `/chart`.\n *\n * The scale is TIGHT by default (the data's own min to max). A price that moved from\n * 9.75 to 12.40 drawn against an implicit zero baseline is a nearly flat line at the\n * top of the box — the one thing a shape-only chart must not do (keksdose dev#449).\n * Bars are the exception: a bar's length is its value, so their scale includes zero.\n *\n * `role=\"img\"` with a generated summary (\"Rising from 12 to 40\") as its name — the\n * numbers beside it are the values, the sparkline says which way they have moved.\n *\n * Under `fluid` the SVG is stretched non-uniformly to the container's width, so every\n * stroke is `non-scaling-stroke` and the last-point dot is a zero-length ROUND-CAPPED\n * stroke rather than a `<circle>`: a stroke keeps its width under that transform,\n * where a circle would be squashed into an ellipse.\n */\nexport function Sparkline({\n  data,\n  width = DEFAULT_WIDTH,\n  height = DEFAULT_HEIGHT,\n  fluid = false,\n  variant = \"line\",\n  tone = \"chart\",\n  min,\n  max,\n  referenceValue,\n  highlightLast = true,\n  strokeWidth = 1.5,\n  label,\n  formatValue,\n  locale,\n  labels,\n  className,\n  style,\n  ...rest\n}: SparklineProps) {\n  const text = useKitLabels(\"sparkline\", DEFAULT_SPARKLINE_LABELS, labels);\n  const { scale } = useTextSize();\n  const kitLocale = useKitLocale(locale);\n  const format = formatValue ?? defaultFormat(kitLocale);\n\n  const summary = sparklineSummary(data, text, format);\n  const name = label ? text.named(label, summary) : summary;\n\n  const W = width;\n  const H = height;\n  const points = data.map((v) => (isValue(v) ? v : null));\n  const values = points.filter(isValue);\n  const n = points.length;\n\n  // ── Scale ──\n  const bounds = [...values];\n  if (referenceValue !== undefined && isValue(referenceValue)) bounds.push(referenceValue);\n  if (variant === \"bar\") bounds.push(0);\n  let lo = min ?? (bounds.length ? Math.min(...bounds) : 0);\n  let hi = max ?? (bounds.length ? Math.max(...bounds) : 1);\n  if (hi === lo) {\n    // A constant series: centre it rather than divide by zero.\n    lo -= 1;\n    hi += 1;\n  }\n  const dot = strokeWidth + 1.5;\n  const pad = highlightLast && variant !== \"bar\" ? dot : strokeWidth / 2;\n  const clamp = (v: number) => Math.min(hi, Math.max(lo, v));\n  const y = (v: number) => pad + ((hi - clamp(v)) / (hi - lo)) * (H - 2 * pad);\n  const x = (i: number) => (n <= 1 ? W / 2 : pad + (i * (W - 2 * pad)) / (n - 1));\n  const r = (v: number) => Math.round(v * 100) / 100;\n\n  // Last DEFINED point — the series may well end in a gap. (No `findLastIndex`: the\n  // package targets ES2022.)\n  let lastIndex = -1;\n  for (let i = n - 1; i >= 0 && lastIndex < 0; i -= 1) if (points[i] !== null) lastIndex = i;\n  const lastValue = lastIndex >= 0 ? (points[lastIndex] ?? 0) : 0;\n  const lineClass = tone === \"signed\" ? signedClass(lastValue) : TONE_CLASS[tone];\n\n  // Contiguous runs between gaps. A run of one point is drawn as a dot, so a value\n  // isolated between two gaps is still visible.\n  const runs: Array<Array<[number, number]>> = [];\n  let run: Array<[number, number]> = [];\n  points.forEach((v, i) => {\n    if (v === null) {\n      if (run.length) runs.push(run);\n      run = [];\n    } else {\n      run.push([i, v]);\n    }\n  });\n  if (run.length) runs.push(run);\n\n  const linePath = (seg: Array<[number, number]>) =>\n    seg.map(([i, v], k) => `${k === 0 ? \"M\" : \"L\"}${r(x(i))} ${r(y(v))}`).join(\" \");\n  const dotPath = (i: number, v: number) => `M${r(x(i))} ${r(y(v))} h0`;\n  // The area closes to zero when zero is on the scale, else to the bottom edge.\n  const areaBase = y(lo <= 0 && hi >= 0 ? 0 : lo);\n\n  const STROKE = {\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\",\n    vectorEffect: \"non-scaling-stroke\",\n  } as const;\n\n  return (\n    <svg\n      role=\"img\"\n      aria-label={name}\n      {...rest}\n      // The drawing stays in its own units (the viewBox); only the box it is shown in\n      // grows, uniformly, so nothing is distorted and the strokes keep their px width.\n      width={fluid ? \"100%\" : W * scale}\n      height={H * scale}\n      viewBox={`0 0 ${W} ${H}`}\n      preserveAspectRatio=\"none\"\n      className={cn(fluid ? \"block w-full\" : \"inline-block shrink-0 align-middle\", \"overflow-visible\", className)}\n      style={style}\n    >\n      {referenceValue !== undefined && isValue(referenceValue) && referenceValue >= lo && referenceValue <= hi && (\n        <path\n          d={`M0 ${r(y(referenceValue))} H${W}`}\n          {...STROKE}\n          strokeWidth={1}\n          strokeDasharray=\"2 2\"\n          className=\"text-[var(--border-strong)]\"\n        />\n      )}\n\n      {variant === \"bar\"\n        ? (() => {\n            const slot = W / Math.max(n, 1);\n            const bw = Math.max(1, slot * 0.7);\n            const base = y(0);\n            return points.map((v, i) => {\n              if (v === null) return null;\n              const top = Math.min(y(v), base);\n              return (\n                <rect\n                  key={i}\n                  x={r(i * slot + (slot - bw) / 2)}\n                  y={r(top)}\n                  width={r(bw)}\n                  height={r(Math.abs(y(v) - base))}\n                  fill=\"currentColor\"\n                  opacity={highlightLast && i !== lastIndex ? 0.55 : 1}\n                  className={tone === \"signed\" ? signedClass(v) : TONE_CLASS[tone]}\n                />\n              );\n            });\n          })()\n        : runs.map((seg, k) =>\n            seg.length === 1 ? (\n              <path\n                key={k}\n                d={dotPath(seg[0][0], seg[0][1])}\n                {...STROKE}\n                strokeWidth={strokeWidth * 2}\n                className={lineClass}\n              />\n            ) : (\n              <g key={k} className={lineClass}>\n                {variant === \"area\" && (\n                  <path\n                    d={`${linePath(seg)} L${r(x(seg[seg.length - 1][0]))} ${r(areaBase)} L${r(x(seg[0][0]))} ${r(areaBase)} Z`}\n                    fill=\"currentColor\"\n                    fillOpacity={0.15}\n                    stroke=\"none\"\n                  />\n                )}\n                <path d={linePath(seg)} {...STROKE} strokeWidth={strokeWidth} />\n              </g>\n            ),\n          )}\n\n      {highlightLast && variant !== \"bar\" && lastIndex >= 0 && (\n        <path\n          d={dotPath(lastIndex, lastValue)}\n          {...STROKE}\n          strokeWidth={dot * 2 - 1}\n          className={lineClass}\n          data-sparkline-last=\"\"\n        />\n      )}\n    </svg>\n  );\n}\n"],"mappings":";AA+PQ,cAyCM,YAzCN;AA9PR,SAAS,UAAU;AACnB,SAAS,cAAc,oBAAwC;AAC/D,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,uBAAuB;AAwChC,MAAM,aAA+D;AAAA,EACnE,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,KAAK;AAAA,EACL,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR;AAEA,MAAM,cAAc,CAAC,MAAe,IAAI,IAAI,WAAW,UAAU,WAAW;AAuC5E,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;AAIvB,MAAM,aAAa,oBAAI,IAA+B;AACtD,SAAS,cAAc,QAAmD;AACxE,QAAM,MAAM,UAAU;AACtB,MAAI,IAAI,WAAW,IAAI,GAAG;AAC1B,MAAI,CAAC,GAAG;AACN,QAAI,IAAI,KAAK,aAAa,QAAQ,EAAE,uBAAuB,EAAE,CAAC;AAC9D,eAAW,IAAI,KAAK,CAAC;AAAA,EACvB;AACA,SAAO,CAAC,MAAM,gBAAgB,GAAG,CAAC;AACpC;AAEA,MAAM,UAAU,CAAC,MAA8C,OAAO,MAAM,YAAY,OAAO,SAAS,CAAC;AAIlG,SAAS,iBACd,MACA,QACA,QACQ;AACR,QAAM,SAAS,KAAK,OAAO,OAAO;AAClC,MAAI,OAAO,WAAW,EAAG,QAAO,OAAO;AACvC,QAAM,QAAQ,OAAO,CAAC;AACtB,QAAM,OAAO,OAAO,OAAO,SAAS,CAAC;AACrC,MAAI,OAAO,WAAW,EAAG,QAAO,OAAO,OAAO,OAAO,IAAI,CAAC;AAC1D,MAAI,OAAO,MAAO,QAAO,OAAO,OAAO,OAAO,KAAK,GAAG,OAAO,IAAI,CAAC;AAClE,MAAI,OAAO,MAAO,QAAO,OAAO,QAAQ,OAAO,KAAK,GAAG,OAAO,IAAI,CAAC;AACnE,SAAO,OAAO,KAAK,OAAO,IAAI,CAAC;AACjC;AAuBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,OAAO,aAAa,aAAa,0BAA0B,MAAM;AACvE,QAAM,EAAE,MAAM,IAAI,YAAY;AAC9B,QAAM,YAAY,aAAa,MAAM;AACrC,QAAM,SAAS,eAAe,cAAc,SAAS;AAErD,QAAM,UAAU,iBAAiB,MAAM,MAAM,MAAM;AACnD,QAAM,OAAO,QAAQ,KAAK,MAAM,OAAO,OAAO,IAAI;AAElD,QAAM,IAAI;AACV,QAAM,IAAI;AACV,QAAM,SAAS,KAAK,IAAI,CAAC,MAAO,QAAQ,CAAC,IAAI,IAAI,IAAK;AACtD,QAAM,SAAS,OAAO,OAAO,OAAO;AACpC,QAAM,IAAI,OAAO;AAGjB,QAAM,SAAS,CAAC,GAAG,MAAM;AACzB,MAAI,mBAAmB,UAAa,QAAQ,cAAc,EAAG,QAAO,KAAK,cAAc;AACvF,MAAI,YAAY,MAAO,QAAO,KAAK,CAAC;AACpC,MAAI,KAAK,QAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,MAAM,IAAI;AACvD,MAAI,KAAK,QAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,MAAM,IAAI;AACvD,MAAI,OAAO,IAAI;AAEb,UAAM;AACN,UAAM;AAAA,EACR;AACA,QAAM,MAAM,cAAc;AAC1B,QAAM,MAAM,iBAAiB,YAAY,QAAQ,MAAM,cAAc;AACrE,QAAM,QAAQ,CAAC,MAAc,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC,CAAC;AACzD,QAAM,IAAI,CAAC,MAAc,OAAQ,KAAK,MAAM,CAAC,MAAM,KAAK,OAAQ,IAAI,IAAI;AACxE,QAAM,IAAI,CAAC,MAAe,KAAK,IAAI,IAAI,IAAI,MAAO,KAAK,IAAI,IAAI,QAAS,IAAI;AAC5E,QAAM,IAAI,CAAC,MAAc,KAAK,MAAM,IAAI,GAAG,IAAI;AAI/C,MAAI,YAAY;AAChB,WAAS,IAAI,IAAI,GAAG,KAAK,KAAK,YAAY,GAAG,KAAK,EAAG,KAAI,OAAO,CAAC,MAAM,KAAM,aAAY;AACzF,QAAM,YAAY,aAAa,IAAK,OAAO,SAAS,KAAK,IAAK;AAC9D,QAAM,YAAY,SAAS,WAAW,YAAY,SAAS,IAAI,WAAW,IAAI;AAI9E,QAAM,OAAuC,CAAC;AAC9C,MAAI,MAA+B,CAAC;AACpC,SAAO,QAAQ,CAAC,GAAG,MAAM;AACvB,QAAI,MAAM,MAAM;AACd,UAAI,IAAI,OAAQ,MAAK,KAAK,GAAG;AAC7B,YAAM,CAAC;AAAA,IACT,OAAO;AACL,UAAI,KAAK,CAAC,GAAG,CAAC,CAAC;AAAA,IACjB;AAAA,EACF,CAAC;AACD,MAAI,IAAI,OAAQ,MAAK,KAAK,GAAG;AAE7B,QAAM,WAAW,CAAC,QAChB,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,MAAM,IAAI,MAAM,GAAG,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,GAAG;AAChF,QAAM,UAAU,CAAC,GAAW,MAAc,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;AAEhE,QAAM,WAAW,EAAE,MAAM,KAAK,MAAM,IAAI,IAAI,EAAE;AAE9C,QAAM,SAAS;AAAA,IACb,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,cAAc;AAAA,EAChB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACX,GAAG;AAAA,MAGJ,OAAO,QAAQ,SAAS,IAAI;AAAA,MAC5B,QAAQ,IAAI;AAAA,MACZ,SAAS,OAAO,CAAC,IAAI,CAAC;AAAA,MACtB,qBAAoB;AAAA,MACpB,WAAW,GAAG,QAAQ,iBAAiB,sCAAsC,oBAAoB,SAAS;AAAA,MAC1G;AAAA,MAEC;AAAA,2BAAmB,UAAa,QAAQ,cAAc,KAAK,kBAAkB,MAAM,kBAAkB,MACpG;AAAA,UAAC;AAAA;AAAA,YACC,GAAG,MAAM,EAAE,EAAE,cAAc,CAAC,CAAC,KAAK,CAAC;AAAA,YAClC,GAAG;AAAA,YACJ,aAAa;AAAA,YACb,iBAAgB;AAAA,YAChB,WAAU;AAAA;AAAA,QACZ;AAAA,QAGD,YAAY,SACR,MAAM;AACL,gBAAM,OAAO,IAAI,KAAK,IAAI,GAAG,CAAC;AAC9B,gBAAM,KAAK,KAAK,IAAI,GAAG,OAAO,GAAG;AACjC,gBAAM,OAAO,EAAE,CAAC;AAChB,iBAAO,OAAO,IAAI,CAAC,GAAG,MAAM;AAC1B,gBAAI,MAAM,KAAM,QAAO;AACvB,kBAAM,MAAM,KAAK,IAAI,EAAE,CAAC,GAAG,IAAI;AAC/B,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,GAAG,EAAE,IAAI,QAAQ,OAAO,MAAM,CAAC;AAAA,gBAC/B,GAAG,EAAE,GAAG;AAAA,gBACR,OAAO,EAAE,EAAE;AAAA,gBACX,QAAQ,EAAE,KAAK,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC;AAAA,gBAC/B,MAAK;AAAA,gBACL,SAAS,iBAAiB,MAAM,YAAY,OAAO;AAAA,gBACnD,WAAW,SAAS,WAAW,YAAY,CAAC,IAAI,WAAW,IAAI;AAAA;AAAA,cAP1D;AAAA,YAQP;AAAA,UAEJ,CAAC;AAAA,QACH,GAAG,IACH,KAAK;AAAA,UAAI,CAAC,KAAK,MACb,IAAI,WAAW,IACb;AAAA,YAAC;AAAA;AAAA,cAEC,GAAG,QAAQ,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;AAAA,cAC9B,GAAG;AAAA,cACJ,aAAa,cAAc;AAAA,cAC3B,WAAW;AAAA;AAAA,YAJN;AAAA,UAKP,IAEA,qBAAC,OAAU,WAAW,WACnB;AAAA,wBAAY,UACX;AAAA,cAAC;AAAA;AAAA,gBACC,GAAG,GAAG,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE,IAAI,IAAI,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC;AAAA,gBACtG,MAAK;AAAA,gBACL,aAAa;AAAA,gBACb,QAAO;AAAA;AAAA,YACT;AAAA,YAEF,oBAAC,UAAK,GAAG,SAAS,GAAG,GAAI,GAAG,QAAQ,aAA0B;AAAA,eATxD,CAUR;AAAA,QAEJ;AAAA,QAEH,iBAAiB,YAAY,SAAS,aAAa,KAClD;AAAA,UAAC;AAAA;AAAA,YACC,GAAG,QAAQ,WAAW,SAAS;AAAA,YAC9B,GAAG;AAAA,YACJ,aAAa,MAAM,IAAI;AAAA,YACvB,WAAW;AAAA,YACX,uBAAoB;AAAA;AAAA,QACtB;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/stat-tile.js

@@ -147,19 +147,23 @@ function StatTile({
     deltaNode = // `relative`: the containing block for the sr-only sentence (see the
     // sr-only-containment test for what an escaped one does to the page).
     /* @__PURE__ */ jsxs("div", { className: "relative mt-1 flex flex-wrap items-center gap-x-1.5 text-xs tabular-nums", children: [
-      /* @__PURE__ */ jsxs("span", { id: deltaId, "data-private": priv, className: cn("inline-flex items-center gap-0.5 font-medium", deltaTone), children: [
-        /* @__PURE__ */ jsx(Icon, { className: "size-3 shrink-0", "aria-hidden": true }),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: amount }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: spoken })
-      ] }),
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          id: deltaId,
+          "data-private": priv,
+          className: cn("inline-flex items-center gap-0.5 font-medium", deltaTone),
+          children: [
+            /* @__PURE__ */ jsx(Icon, { className: "size-3 shrink-0", "aria-hidden": true }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: amount }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: spoken })
+          ]
+        }
+      ),
       d.label != null && /* @__PURE__ */ jsx("span", { className: "text-muted", children: d.label })
     ] });
   }
-  const valueClass = cn(
-    "whitespace-nowrap font-semibold tabular-nums",
-    VALUE_TEXT[size],
-    toneClass(tone, value)
-  );
+  const valueClass = cn("whitespace-nowrap font-semibold tabular-nums", VALUE_TEXT[size], toneClass(tone, value));
   const headline = loading ? /* @__PURE__ */ jsxs("span", { id: valueId, className: "relative block py-0.5", children: [
     /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(SKELETON_CLASS, "block h-6 w-24 max-w-full") }),
     !gridLoading && /* @__PURE__ */ jsx("span", { className: "sr-only", children: text.loading })