@eifi1/ui-kit 0.33.0 → 0.34.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/signed-amount-labels.ts"],"sourcesContent":["// The English words of ./signed-amount, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./signed-amount re-exports them.\n\nimport type { SignedAmountLabels } from \"./signed-amount\";\n\nexport const DEFAULT_SIGNED_AMOUNT_LABELS: SignedAmountLabels = {\n  positive: (amount) => `plus ${amount}`,\n  negative: (amount) => `minus ${amount}`,\n};\n"],"mappings":";AAMO,MAAM,+BAAmD;AAAA,EAC9D,UAAU,CAAC,WAAW,QAAQ,MAAM;AAAA,EACpC,UAAU,CAAC,WAAW,SAAS,MAAM;AACvC;","names":[]}

package/dist/components/signed-amount.d.ts

@@ -1,7 +1,7 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { StatTileLabels } from './stat-tile.js';
-
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import type { StatTileLabels } from "./stat-tile.js";
+import { DEFAULT_SIGNED_AMOUNT_LABELS } from "./signed-amount-labels.js";
 /**
  * The text colours a figure can carry, token-backed — `StatTile`'s tones, as a class
  * any span can take.
@@ -14,21 +14,21 @@ import { StatTileLabels } from './stat-tile.js';
  *
  * Colour is never the only carrier: pair a verdict with an arrow, a word, or a sign.
  */
-type TextTone = "default" | "muted" | "brand" | "income" | "expense" | "net" | "success" | "warning" | "danger" | "info";
+export type TextTone = "default" | "muted" | "brand" | "income" | "expense" | "net" | "success" | "warning" | "danger" | "info";
 /**
  * The class that colours text in `tone` — for the spans kastlan colours by hand with
  * `text-[var(--danger)]` / `text-emerald-600` (settlement-table, changelog-page,
  * meeting-agenda-tab), so the palette they draw from is the kit's tokens.
  */
-declare function toneTextClass(tone: TextTone): string;
-interface ToneProps extends ComponentPropsWithoutRef<"span"> {
+export declare function toneTextClass(tone: TextTone): string;
+export interface ToneProps extends ComponentPropsWithRef<"span"> {
     tone: TextTone;
 }
 /** A `<span>` in a {@link TextTone} — `<Tone tone="success">{votesFor}</Tone>`. */
-declare function Tone({ tone, className, ...rest }: ToneProps): react.JSX.Element;
+export declare function Tone({ tone, className, ...rest }: ToneProps): import("react").JSX.Element;
 /** Which way is +1: `up` for a figure where more is good news (income, savings),
  *  `down` where less is (a rent the tenant pays, a cost). */
-type GoodDirection = "up" | "down";
+export type GoodDirection = "up" | "down";
 /**
  * How a signed figure is coloured:
  *  - `signed` (default) — money read by its own sign: above zero `income`, below zero
@@ -38,7 +38,7 @@ type GoodDirection = "up" | "down";
  *  - `verdict` — the change judged by {@link SignedAmountProps.goodDirection}: good
  *    news `success`, bad news `danger`, zero muted. Setting `goodDirection` implies it.
  */
-type SignedAmountTone = "signed" | "income" | "expense" | "neutral" | "verdict";
+export type SignedAmountTone = "signed" | "income" | "expense" | "neutral" | "verdict";
 /**
  * The colours a VERDICT is painted in (`goodDirection` set, or `tone="verdict"`):
  *  - `status` (default) — `success` / `danger`: good news, bad news.
@@ -48,16 +48,16 @@ type SignedAmountTone = "signed" | "income" | "expense" | "neutral" | "verdict";
  *    outflow in the app wears — not a red that says "error". keksdose coloured its
  *    three price-change sites by hand for want of this.
  */
-type VerdictPalette = "status" | "money";
+export type VerdictPalette = "status" | "money";
 /** What a signed figure says to a screen reader, whose readers disagree about a
  *  leading "+" (most skip it) and a "−" (some read "dash", some nothing). */
-interface SignedAmountLabels {
+export interface SignedAmountLabels {
     /** A figure above zero. `amount` is formatted and unsigned. */
     positive: (amount: string) => string;
     /** A figure below zero. `amount` is formatted and unsigned. */
     negative: (amount: string) => string;
 }
-declare const DEFAULT_SIGNED_AMOUNT_LABELS: SignedAmountLabels;
+export { DEFAULT_SIGNED_AMOUNT_LABELS };
 interface SignedFormatProps {
     /** ISO 4217 code: format as money. */
     currency?: string;
@@ -84,7 +84,7 @@ interface SignedFormatProps {
     format?: (magnitude: number) => string;
     locale?: string;
 }
-interface SignedAmountProps extends SignedFormatProps, Omit<ComponentPropsWithoutRef<"span">, "children"> {
+export interface SignedAmountProps extends SignedFormatProps, Omit<ComponentPropsWithRef<"span">, "children"> {
     value: number;
     /** See {@link SignedAmountTone}. Default `signed`, or `verdict` with `goodDirection`. */
     tone?: SignedAmountTone;
@@ -106,7 +106,7 @@ interface SignedAmountProps extends SignedFormatProps, Omit<ComponentPropsWithou
     arrow?: boolean;
     /** Tag the figure `data-private`, for the host's demo-mode blur. */
     sensitive?: boolean;
-    labels?: Partial<SignedAmountLabels>;
+    labels?: LabelOverride<SignedAmountLabels>;
 }
 /**
  * A figure with a sign that matters: a balance, a rent change, a net.
@@ -119,8 +119,8 @@ interface SignedAmountProps extends SignedFormatProps, Omit<ComponentPropsWithou
  * words instead ("plus CHF 50.00" / "minus CHF 50.00", `signedAmount.*`): a "+" is
  * skipped by most screen readers, and `Intl`'s "−" is read as "dash" or not at all.
  */
-declare function SignedAmount({ value, currency, unit, ratio, compact, digits, format, locale, tone, goodDirection, palette, flatWithin, showPlus, arrow, sensitive, labels, className, ...rest }: SignedAmountProps): react.JSX.Element;
-interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithoutRef<"span">, "children"> {
+export declare function SignedAmount({ value, currency, unit, ratio, compact, digits, format, locale, tone, goodDirection, palette, flatWithin, showPlus, arrow, sensitive, labels, className, ...rest }: SignedAmountProps): import("react").JSX.Element;
+export interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithRef<"span">, "children"> {
     /** The change. Above zero is "up". */
     value: number;
     /** Which way is good news. Unset, the change is stated and not judged (muted); set,
@@ -139,7 +139,7 @@ interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithoutRef<"s
     arrow?: boolean;
     sensitive?: boolean;
     /** The `statTile` namespace's direction words — a delta says the same as a tile's. */
-    labels?: Partial<Pick<StatTileLabels, "increase" | "decrease" | "unchanged" | "better" | "worse">>;
+    labels?: LabelOverride<Pick<StatTileLabels, "increase" | "decrease" | "unchanged" | "better" | "worse">>;
 }
 /**
  * `StatTile`'s delta on its own: an arrow, the unsigned magnitude, and a sentence for
@@ -150,6 +150,4 @@ interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithoutRef<"s
  * (lease-columns:219, a "+1.25%" chip), the breakdown rows of the rent calculator
  * (breakdown-row:5, a trend icon coloured by hand).
  */
-declare function Delta({ value, currency, unit, ratio, compact, digits, format, locale, goodDirection, palette, flatWithin, label, arrow, sensitive, labels, className, ...rest }: DeltaProps): react.JSX.Element | null;
-
-export { DEFAULT_SIGNED_AMOUNT_LABELS, Delta, type DeltaProps, type GoodDirection, SignedAmount, type SignedAmountLabels, type SignedAmountProps, type SignedAmountTone, type TextTone, Tone, type ToneProps, type VerdictPalette, toneTextClass };
+export declare function Delta({ value, currency, unit, ratio, compact, digits, format, locale, goodDirection, palette, flatWithin, label, arrow, sensitive, labels, className, ...rest }: DeltaProps): import("react").JSX.Element | null;

package/dist/components/signed-amount.js

@@ -5,17 +5,18 @@ import { cn } from "../lib/cn.js";
 import { formatMoney, formatNumber, formatPercent } from "../lib/format.js";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { DEFAULT_STAT_TILE_LABELS } from "./stat-tile.js";
+import { DEFAULT_SIGNED_AMOUNT_LABELS } from "./signed-amount-labels.js";
 const TEXT_TONE = {
-  default: "text-[var(--text-primary)]",
-  muted: "text-[var(--text-muted)]",
-  brand: "text-[var(--brand)]",
-  income: "text-[var(--money-income)]",
-  expense: "text-[var(--money-expense)]",
-  net: "text-[var(--money-net)]",
-  success: "text-[var(--success)]",
-  warning: "text-[var(--warning)]",
-  danger: "text-[var(--danger)]",
-  info: "text-[var(--info)]"
+  default: "text-primary",
+  muted: "text-muted",
+  brand: "text-brand",
+  income: "text-money-income",
+  expense: "text-money-expense",
+  net: "text-money-net",
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-danger",
+  info: "text-info"
 };
 function toneTextClass(tone) {
   return TEXT_TONE[tone];
@@ -23,10 +24,6 @@ function toneTextClass(tone) {
 function Tone({ tone, className, ...rest }) {
   return /* @__PURE__ */ jsx("span", { ...rest, className: cn(TEXT_TONE[tone], className) });
 }
-const DEFAULT_SIGNED_AMOUNT_LABELS = {
-  positive: (amount) => `plus ${amount}`,
-  negative: (amount) => `minus ${amount}`
-};
 function useMagnitudeFormatter({ currency, unit, ratio, compact, digits, format, locale }) {
   const kitLocale = useKitLocale(locale);
   return (magnitude) => {
@@ -148,7 +145,7 @@ function Delta({
           /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: amount }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: spoken })
         ] }),
-        label != null && /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)]", children: label })
+        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 { ComponentPropsWithoutRef, 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 } from \"../i18n/kit-labels\";\nimport { DEFAULT_STAT_TILE_LABELS } from \"./stat-tile\";\nimport type { StatTileLabels } from \"./stat-tile\";\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-[var(--text-primary)]\",\n  muted: \"text-[var(--text-muted)]\",\n  brand: \"text-[var(--brand)]\",\n  income: \"text-[var(--money-income)]\",\n  expense: \"text-[var(--money-expense)]\",\n  net: \"text-[var(--money-net)]\",\n  success: \"text-[var(--success)]\",\n  warning: \"text-[var(--warning)]\",\n  danger: \"text-[var(--danger)]\",\n  info: \"text-[var(--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 ComponentPropsWithoutRef<\"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\nexport const DEFAULT_SIGNED_AMOUNT_LABELS: SignedAmountLabels = {\n  positive: (amount) => `plus ${amount}`,\n  negative: (amount) => `minus ${amount}`,\n};\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<ComponentPropsWithoutRef<\"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?: Partial<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<ComponentPropsWithoutRef<\"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?: Partial<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-[var(--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\"\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":[]}

package/dist/components/skeleton.d.ts

@@ -1,6 +1,4 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef } from 'react';
-
+import type { ComponentPropsWithRef } from "react";
 /**
  * The look of a placeholder, as one class string — the same fill and pulse
  * `StatTile`'s `loading` headline draws (it imports this), so a tile and the list
@@ -10,9 +8,17 @@ import { ComponentPropsWithoutRef } from 'react';
  * is exactly what `prefers-reduced-motion` asks to be dropped. The fill stays, so the
  * shape of what is coming is still there.
  */
-declare const SKELETON_CLASS = "animate-pulse rounded bg-[var(--bg-active)] motion-reduce:animate-none";
-type SkeletonShape = "line" | "block" | "circle";
-interface SkeletonProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+export declare const SKELETON_CLASS = "animate-pulse rounded bg-active motion-reduce:animate-none";
+export type SkeletonShape = "line" | "block" | "circle";
+/**
+ * A `div`'s props, `ref` included (0.33.1, keksdose): they were spread onto the
+ * placeholder all along, but `ComponentPropsWithoutRef` kept `ref` out of the type, so an
+ * app could not hold the element (to measure it, or scroll it into view) without a
+ * wrapper. The ref is the placeholder's — with `lines`, the box round the lines; with
+ * `label`, still the placeholder, not the `role="status"` region round it — where
+ * `className` goes too.
+ */
+export interface SkeletonProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
     /** `line` (default): a bar the height of a line of small text. `block`: an area
      *  (an image, a chart, a card body). `circle`: an avatar. Size any of them with
      *  `className` (`w-32`, `h-40`, `size-8`). */
@@ -38,6 +44,4 @@ interface SkeletonProps extends Omit<ComponentPropsWithoutRef<"div">, "children"
  * belongs: `aria-busy` on the region being filled, a `Spinner` / sr-only line
  * beside the skeletons, or this component's own `label`.
  */
-declare function Skeleton({ label, ...props }: SkeletonProps): react.JSX.Element;
-
-export { SKELETON_CLASS, Skeleton, type SkeletonProps, type SkeletonShape };
+export declare function Skeleton({ label, ...props }: SkeletonProps): import("react").JSX.Element;

package/dist/components/skeleton.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
-const SKELETON_CLASS = "animate-pulse rounded bg-[var(--bg-active)] motion-reduce:animate-none";
+const SKELETON_CLASS = "animate-pulse rounded bg-active motion-reduce:animate-none";
 const SHAPE = {
   line: "h-3 w-full",
   block: "h-24 w-full rounded-md",

package/dist/components/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } 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-[var(--bg-active)] motion-reduce:animate-none\";\n\nexport type SkeletonShape = \"line\" | \"block\" | \"circle\";\n\nexport interface SkeletonProps extends Omit<ComponentPropsWithoutRef<\"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":";AAkDqB,cAGjB,YAHiB;AAjDrB,SAAS,UAAU;AAWZ,MAAM,iBAAiB;AAoB9B,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\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":[]}

package/dist/components/slider.d.ts

@@ -1,6 +1,4 @@
-import * as react from 'react';
-import { InputHTMLAttributes, ReactNode } from 'react';
-
+import type { InputHTMLAttributes, ReactNode, Ref } from "react";
 /**
  * Where a value sits on a logarithmic track, 0–1.
  *
@@ -8,18 +6,18 @@ import { InputHTMLAttributes, ReactNode } from 'react';
  * mapped onto the rest; without it, `min` is the far left. A value past either end
  * pins there — that is the DISPLAY clamping, never the value's.
  */
-declare function toLogPosition(value: number, min: number, max: number, zeroStop?: boolean): number;
+export declare function toLogPosition(value: number, min: number, max: number, zeroStop?: boolean): number;
 /** The inverse of {@link toLogPosition}: the value at a track position. */
-declare function fromLogPosition(position: number, min: number, max: number, zeroStop?: boolean): number;
+export declare function fromLogPosition(position: number, min: number, max: number, zeroStop?: boolean): number;
 /** A tick under the track. A bare number is a tick with no words. */
-interface SliderMark {
+export interface SliderMark {
     value: number;
     /** Shown under the tick — "30 km/h", "measured". Visual only: the value itself is
      *  announced through `aria-valuetext`, so the marks row is hidden from assistive
      *  technology rather than read out as a list of numbers after the slider. */
     label?: ReactNode;
 }
-interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "children"> {
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "children"> {
     /** The value. On a log scale this is the real value, not the track position. */
     value: number;
     /** The new value — a number, not the DOM event, like `ToggleGroup`. Fired on every
@@ -58,7 +56,13 @@ interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"
     label?: ReactNode;
     /** Something that belongs to the label rather than the value — in practice a
      *  `FieldHint` "?". Rendered beside the label, outside the `<label>` element, so it
-     *  never becomes part of the slider's accessible name. */
+     *  never becomes part of the slider's accessible name.
+     *
+     *  {@link Select}'s rule since 0.34 (DUP-2, refactor audit 2026-10): plain TEXT is a
+     *  caption under the track, on the slider's `aria-describedby`, and so is a FieldHint
+     *  at Large and on a touch screen, where a "?" cannot be hovered open (§4) — the
+     *  Kurvenschmiede controller panel's Kp/Ki/Kd facts were a lone "?" on a phone. A
+     *  `HelpPopover` stays beside the label at every size. */
     hint?: ReactNode;
     /** The value as the reader sees it, at the end of the label line — a formatted
      *  number, or a `NumberInput` for typing one. Rendered as given. */
@@ -67,6 +71,9 @@ interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"
     marks?: ReadonlyArray<number | SliderMark>;
     /** Classes for the `<input>`. `className` styles the outer wrapper. */
     inputClassName?: string;
+    /** The `<input type="range">`. A React 19 ref prop since 0.34 (MOD-4, refactor audit
+     *  2026-10); it was `forwardRef`. */
+    ref?: Ref<HTMLInputElement>;
 }
 /**
  * A native range input with the kit's track and thumb, an optional label line
@@ -75,6 +82,4 @@ interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"
  * Every other prop reaches the `<input>` — `name`, `id`, `aria-*`, `data-*`, `onBlur`,
  * `onPointerUp` for commit-on-release — and `disabled` also fades the label line.
  */
-declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
-
-export { Slider, type SliderMark, type SliderProps, fromLogPosition, toLogPosition };
+export declare function Slider({ ref, value, onChange, min, max, step, scale, zeroStop, formatValue, label, hint, readout, marks, className, inputClassName, id, disabled, style, ...rest }: SliderProps): import("react").JSX.Element;

package/dist/components/slider.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
+import { useId } from "react";
 import { cn } from "../lib/cn.js";
+import { useFieldMessages } from "./field-parts.js";
 const ZERO_STOP = 0.02;
 const LOG_STEP = 1e-3;
 function toLogPosition(value, min, max, zeroStop = true) {
@@ -24,19 +25,20 @@ const TRACK = [
   "[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--brand)_var(--slider-fill),var(--border-strong)_var(--slider-fill))]",
   "rtl:[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_left,var(--brand)_var(--slider-fill),var(--border-strong)_var(--slider-fill))]",
   "[&::-webkit-slider-thumb]:-mt-[0.3125rem] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none",
-  "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[var(--brand)] [&::-webkit-slider-thumb]:shadow",
-  "focus-visible:[&::-webkit-slider-thumb]:ring-[length:var(--focus-ring-width)] focus-visible:[&::-webkit-slider-thumb]:ring-[var(--brand)]",
-  "focus-visible:[&::-webkit-slider-thumb]:ring-offset-2 focus-visible:[&::-webkit-slider-thumb]:ring-offset-[var(--bg-surface)]",
+  "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-brand [&::-webkit-slider-thumb]:shadow",
+  "focus-visible:[&::-webkit-slider-thumb]:ring-focus focus-visible:[&::-webkit-slider-thumb]:ring-brand",
+  "focus-visible:[&::-webkit-slider-thumb]:ring-offset-2 focus-visible:[&::-webkit-slider-thumb]:ring-offset-surface",
   // Firefox
   "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[var(--border-strong)]",
-  "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-[var(--brand)]",
+  "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-brand",
   "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0",
-  "[&::-moz-range-thumb]:bg-[var(--brand)] [&::-moz-range-thumb]:shadow",
-  "focus-visible:[&::-moz-range-thumb]:ring-[length:var(--focus-ring-width)] focus-visible:[&::-moz-range-thumb]:ring-[var(--brand)]",
-  "focus-visible:[&::-moz-range-thumb]:ring-offset-2 focus-visible:[&::-moz-range-thumb]:ring-offset-[var(--bg-surface)]"
+  "[&::-moz-range-thumb]:bg-brand [&::-moz-range-thumb]:shadow",
+  "focus-visible:[&::-moz-range-thumb]:ring-focus focus-visible:[&::-moz-range-thumb]:ring-brand",
+  "focus-visible:[&::-moz-range-thumb]:ring-offset-2 focus-visible:[&::-moz-range-thumb]:ring-offset-surface"
 ].join(" ");
 const MARKS_LARGE = "large:-mt-[calc(24px-0.375rem)]";
-const Slider = forwardRef(function Slider2({
+function Slider({
+  ref,
   value,
   onChange,
   min,
@@ -55,7 +57,7 @@ const Slider = forwardRef(function Slider2({
   disabled,
   style,
   ...rest
-}, ref) {
+}) {
   const generated = useId();
   const inputId = id ?? generated;
   const log = scale === "log" && min > 0 && max > min;
@@ -74,7 +76,9 @@ const Slider = forwardRef(function Slider2({
   };
   const normalizedMarks = (marks ?? []).map((m) => typeof m === "number" ? { value: m } : m).filter((m) => m.value >= min && m.value <= max);
   const hasMarkLabels = normalizedMarks.some((m) => m.label !== void 0);
-  const hasHeader = label !== void 0 || hint !== void 0 || readout !== void 0;
+  const messages = useFieldMessages({ hint, describedBy: rest["aria-describedby"] });
+  const labelHint = messages.labelHint;
+  const hasHeader = label !== void 0 || labelHint !== void 0 || readout !== void 0;
   const plainReadout = typeof readout === "string" || typeof readout === "number";
   return /* @__PURE__ */ jsxs("div", { className: cn("w-full", disabled && "opacity-60", className), children: [
     hasHeader && // `select-none` on the words is not a nicety (Lenkbank feedback #93): a
@@ -91,16 +95,16 @@ const Slider = forwardRef(function Slider2({
         "label",
         {
           htmlFor: inputId,
-          className: "min-w-0 select-none text-xs font-medium text-[var(--text-secondary)]",
+          className: "min-w-0 select-none text-xs font-medium text-secondary",
           children: label
         }
       ),
-      hint !== void 0 && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: hint }),
+      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-[var(--text-primary)]",
+            "ms-auto max-w-full text-xs tabular-nums text-primary",
             plainReadout && "select-none"
           ),
           children: readout
@@ -120,6 +124,7 @@ const Slider = forwardRef(function Slider2({
         step: log ? LOG_STEP : step,
         value: current,
         "aria-valuetext": valueText,
+        "aria-describedby": messages.describedBy,
         onChange: handleChange,
         style: { ...style, "--slider-fill": `${share(current) * 100}%` },
         className: cn(TRACK, inputClassName)
@@ -142,16 +147,16 @@ const Slider = forwardRef(function Slider2({
             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-[var(--text-muted)]", children: m.label })
+              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
   ] });
-});
-Slider.displayName = "Slider";
+}
 export {
   Slider,
   fromLogPosition,