@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/components/slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/slider.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { CSSProperties, ChangeEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\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-[var(--brand)] [&::-webkit-slider-thumb]:shadow\",\n  \"focus-visible:[&::-webkit-slider-thumb]:ring-[length:var(--focus-ring-width)] focus-visible:[&::-webkit-slider-thumb]:ring-[var(--brand)]\",\n  \"focus-visible:[&::-webkit-slider-thumb]:ring-offset-2 focus-visible:[&::-webkit-slider-thumb]:ring-offset-[var(--bg-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-[var(--brand)]\",\n  \"[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0\",\n  \"[&::-moz-range-thumb]:bg-[var(--brand)] [&::-moz-range-thumb]:shadow\",\n  \"focus-visible:[&::-moz-range-thumb]:ring-[length:var(--focus-ring-width)] focus-visible:[&::-moz-range-thumb]:ring-[var(--brand)]\",\n  \"focus-visible:[&::-moz-range-thumb]:ring-offset-2 focus-visible:[&::-moz-range-thumb]:ring-offset-[var(--bg-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  /** 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  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}\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 const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(\n  {\n    value,\n    onChange,\n    min,\n    max,\n    step,\n    scale = \"linear\",\n    zeroStop = true,\n    formatValue,\n    label,\n    hint,\n    readout,\n    marks,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    style,\n    ...rest\n  },\n  ref,\n) {\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  const hasHeader = label !== undefined || hint !== 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-[var(--text-secondary)]\"\n            >\n              {label}\n            </label>\n          )}\n          {hint !== undefined && <span className=\"flex shrink-0 items-center\">{hint}</span>}\n          {readout !== undefined && (\n            <span\n              className={cn(\n                \"ms-auto max-w-full text-xs tabular-nums text-[var(--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        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-[var(--text-muted)]\">\n                  {m.label}\n                </span>\n              )}\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n});\nSlider.displayName = \"Slider\";\n"],"mappings":";AAsQQ,SAEI,KAFJ;AAtQR,SAAS,YAAY,aAAa;AAElC,SAAS,UAAU;AA4BnB,MAAM,YAAY;AAIlB,MAAM,WAAW;AASV,SAAS,cAAc,OAAe,KAAa,KAAa,WAAW,MAAc;AAC9F,MAAI,SAAS,EAAG,QAAO;AACvB,QAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,IAAI,GAAG,IAAI,KAAK,IAAI,MAAM,GAAG;AACvE,QAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC;AAC9C,SAAO,WAAW,aAAa,IAAI,aAAa,UAAU;AAC5D;AAGO,SAAS,gBAAgB,UAAkB,KAAa,KAAa,WAAW,MAAc;AACnG,MAAI,UAAU;AACZ,QAAI,WAAW,UAAW,QAAO;AACjC,WAAO,MAAM,KAAK,IAAI,MAAM,MAAM,WAAW,cAAc,IAAI,UAAU;AAAA,EAC3E;AACA,SAAO,MAAM,KAAK,IAAI,MAAM,KAAK,QAAQ;AAC3C;AA8BA,MAAM,QAAQ;AAAA,EACZ;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAKV,MAAM,cAAc;AAwEb,MAAM,SAAS,WAA0C,SAASA,QACvE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,YAAY,MAAM;AACxB,QAAM,UAAU,MAAM;AACtB,QAAM,MAAM,UAAU,SAAS,MAAM,KAAK,MAAM;AAIhD,QAAM,WAAW,MAAM,IAAI;AAC3B,QAAM,WAAW,MAAM,IAAI;AAC3B,QAAM,WAAW,CAAC,MAAe,MAAM,cAAc,GAAG,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,CAAC,CAAC;AAC5G,QAAM,UAAU,SAAS,KAAK;AAG9B,QAAM,QAAQ,CAAC,MAAe,WAAW,YAAY,IAAI,aAAa,WAAW,YAAY;AAC7F,QAAM,aAAa,QAAQ,OAAO,QAAQ;AAQ1C,QAAM,YAAY,cACd,YAAY,KAAK,IAChB,KAAK,gBAAgB,MACrB,OAAO,aAAa,OAAO,OAAO,MAAM,YAAY,CAAC,CAAC,CAAC,IAAI;AAEhE,QAAM,eAAe,CAAC,MAAqC;AACzD,UAAM,MAAM,OAAO,EAAE,OAAO,KAAK;AACjC,QAAI,CAAC,IAAK,QAAO,SAAS,GAAG;AAM7B,QAAI,YAAY,MAAM,KAAK,MAAM,UAAW,QAAO,SAAS,SAAS,IAAI,MAAM,CAAC;AAChF,aAAS,gBAAgB,KAAK,KAAK,KAAK,QAAQ,CAAC;AAAA,EACnD;AAEA,QAAM,mBAAmB,SAAS,CAAC,GAChC,IAAI,CAAC,MAAO,OAAO,MAAM,WAAW,EAAE,OAAO,EAAE,IAAI,CAAE,EACrD,OAAO,CAAC,MAAM,EAAE,SAAS,OAAO,EAAE,SAAS,GAAG;AACjD,QAAM,gBAAgB,gBAAgB,KAAK,CAAC,MAAM,EAAE,UAAU,MAAS;AAEvE,QAAM,YAAY,UAAU,UAAa,SAAS,UAAa,YAAY;AAC3E,QAAM,eAAe,OAAO,YAAY,YAAY,OAAO,YAAY;AAEvE,SACE,qBAAC,SAAI,WAAW,GAAG,UAAU,YAAY,cAAc,SAAS,GAC7D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUC,qBAAC,SAAI,WAAU,iDACZ;AAAA,gBAAU,UACT;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MAED,SAAS,UAAa,oBAAC,UAAK,WAAU,8BAA8B,gBAAK;AAAA,MACzE,YAAY,UACX;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,gBAAgB;AAAA,UAClB;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI,UAAU,SAAY,UAAU;AAAA,QACpC;AAAA,QACC,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAM,MAAM,WAAW;AAAA,QACvB,OAAO;AAAA,QACP,kBAAgB;AAAA,QAChB,UAAU;AAAA,QAEV,OAAO,EAAE,GAAG,OAAO,iBAAiB,GAAG,MAAM,OAAO,IAAI,GAAG,IAAI;AAAA,QAC/D,WAAW,GAAG,OAAO,cAAc;AAAA;AAAA,IACrC;AAAA,IACC,gBAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxB;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW,GAAG,yBAAyB,aAAa,gBAAgB,QAAQ,OAAO;AAAA,QAElF,0BAAgB,IAAI,CAAC,MACpB;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO,EAAE,kBAAkB,GAAG,MAAM,SAAS,EAAE,KAAK,CAAC,IAAI,GAAG,IAAI;AAAA,YAEhE;AAAA,kCAAC,UAAK,WAAU,iDAAgD;AAAA,cAC/D,EAAE,UAAU,UACX,oBAAC,UAAK,WAAU,4FACb,YAAE,OACL;AAAA;AAAA;AAAA,UARG,EAAE;AAAA,QAUT,CACD;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ,CAAC;AACD,OAAO,cAAc;","names":["Slider"]}
+{"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 } 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  /** 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  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({ hint, describedBy: rest[\"aria-describedby\"] });\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":[]}

package/dist/components/sparkline-labels.d.ts

@@ -0,0 +1,2 @@
+import type { SparklineLabels } from "./sparkline.js";
+export declare const DEFAULT_SPARKLINE_LABELS: SparklineLabels;

package/dist/components/sparkline-labels.js

@@ -0,0 +1,13 @@
+"use client";
+const DEFAULT_SPARKLINE_LABELS = {
+  rising: (first, last) => `Rising from ${first} to ${last}`,
+  falling: (first, last) => `Falling from ${first} to ${last}`,
+  flat: (value) => `Unchanged at ${value}`,
+  single: (value) => `One value: ${value}`,
+  noData: "No data",
+  named: (name, summary) => `${name}: ${summary}`
+};
+export {
+  DEFAULT_SPARKLINE_LABELS
+};
+//# sourceMappingURL=sparkline-labels.js.map

package/dist/components/sparkline-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/sparkline-labels.ts"],"sourcesContent":["// The English words of ./sparkline, 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). ./sparkline re-exports them.\n\nimport type { SparklineLabels } from \"./sparkline\";\n\nexport const DEFAULT_SPARKLINE_LABELS: SparklineLabels = {\n  rising: (first, last) => `Rising from ${first} to ${last}`,\n  falling: (first, last) => `Falling from ${first} to ${last}`,\n  flat: (value) => `Unchanged at ${value}`,\n  single: (value) => `One value: ${value}`,\n  noData: \"No data\",\n  named: (name, summary) => `${name}: ${summary}`,\n};\n"],"mappings":";AAMO,MAAM,2BAA4C;AAAA,EACvD,QAAQ,CAAC,OAAO,SAAS,eAAe,KAAK,OAAO,IAAI;AAAA,EACxD,SAAS,CAAC,OAAO,SAAS,gBAAgB,KAAK,OAAO,IAAI;AAAA,EAC1D,MAAM,CAAC,UAAU,gBAAgB,KAAK;AAAA,EACtC,QAAQ,CAAC,UAAU,cAAc,KAAK;AAAA,EACtC,QAAQ;AAAA,EACR,OAAO,CAAC,MAAM,YAAY,GAAG,IAAI,KAAK,OAAO;AAC/C;","names":[]}

package/dist/components/sparkline.d.ts

@@ -1,13 +1,13 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef } from 'react';
-
+import type { ComponentPropsWithRef } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import { DEFAULT_SPARKLINE_LABELS } from "./sparkline-labels.js";
 /**
  * The words a sparkline speaks. It has no axes, no tooltip and no legend, so its
  * accessible name is the ONLY way a screen reader learns what the shape says —
  * "Sparkline, image" is not a summary. Each message takes the values already
  * formatted, so the digits follow the locale and the sentence stays translatable.
  */
-interface SparklineLabels {
+export interface SparklineLabels {
     /** Last value above the first: "Rising from 12 to 40". */
     rising: (first: string, last: string) => string;
     /** Last value below the first. */
@@ -21,7 +21,7 @@ interface SparklineLabels {
     /** How the series' own name is joined to the summary when `label` is given. */
     named: (name: string, summary: string) => string;
 }
-declare const DEFAULT_SPARKLINE_LABELS: SparklineLabels;
+export { DEFAULT_SPARKLINE_LABELS };
 /**
  * What colours the marks. Token names, not colours: every one resolves to a variable
  * in tokens.css, so the sparkline re-skins with the palette like everything else.
@@ -31,10 +31,10 @@ declare const DEFAULT_SPARKLINE_LABELS: SparklineLabels;
  *  - `signed` — a money series read by sign: bars each take income or expense by their
  *    own value, a line or area takes the colour of its LAST value (where it ended up).
  */
-type SparklineTone = "chart" | "brand" | "muted" | "income" | "expense" | "net" | "signed" | "success" | "warning" | "danger" | "info";
+export type SparklineTone = "chart" | "brand" | "muted" | "income" | "expense" | "net" | "signed" | "success" | "warning" | "danger" | "info";
 /** `children` is the marks and `width`/`height` are numbers here (or `fluid`), so
  *  those three are the sparkline's own; everything else lands on the `<svg>`. */
-interface SparklineProps extends Omit<ComponentPropsWithoutRef<"svg">, "children" | "width" | "height"> {
+export interface SparklineProps extends Omit<ComponentPropsWithRef<"svg">, "children" | "width" | "height"> {
     /** The series, oldest first. `null`/`undefined`/`NaN` is a GAP — the line breaks
      *  there rather than drawing a zero or bridging across the missing point. */
     data: ReadonlyArray<number | null | undefined>;
@@ -66,11 +66,11 @@ interface SparklineProps extends Omit<ComponentPropsWithoutRef<"svg">, "children
      *  kit's locale, at most two decimals. */
     formatValue?: (value: number) => string;
     locale?: string;
-    labels?: Partial<SparklineLabels>;
+    labels?: LabelOverride<SparklineLabels>;
 }
 /** The spoken summary, without the series name. Exported for callers that want the
  *  same sentence elsewhere (a table's row description, a tooltip). */
-declare function sparklineSummary(data: ReadonlyArray<number | null | undefined>, labels: SparklineLabels, format: (value: number) => string): string;
+export declare function sparklineSummary(data: ReadonlyArray<number | null | undefined>, labels: SparklineLabels, format: (value: number) => string): string;
 /**
  * A tiny trend line: shape only — no axes, no tooltip, no legend, no chart library.
  *
@@ -92,6 +92,4 @@ declare function sparklineSummary(data: ReadonlyArray<number | null | undefined>
  * stroke rather than a `<circle>`: a stroke keeps its width under that transform,
  * where a circle would be squashed into an ellipse.
  */
-declare function Sparkline({ data, width, height, fluid, variant, tone, min, max, referenceValue, highlightLast, strokeWidth, label, formatValue, locale, labels, className, style, ...rest }: SparklineProps): react.JSX.Element;
-
-export { DEFAULT_SPARKLINE_LABELS, Sparkline, type SparklineLabels, type SparklineProps, type SparklineTone, sparklineSummary };
+export declare function Sparkline({ data, width, height, fluid, variant, tone, min, max, referenceValue, highlightLast, strokeWidth, label, formatValue, locale, labels, className, style, ...rest }: SparklineProps): import("react").JSX.Element;

package/dist/components/sparkline.js

@@ -3,25 +3,18 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { useTextSize } from "../theme/text-size.js";
-const DEFAULT_SPARKLINE_LABELS = {
-  rising: (first, last) => `Rising from ${first} to ${last}`,
-  falling: (first, last) => `Falling from ${first} to ${last}`,
-  flat: (value) => `Unchanged at ${value}`,
-  single: (value) => `One value: ${value}`,
-  noData: "No data",
-  named: (name, summary) => `${name}: ${summary}`
-};
+import { DEFAULT_SPARKLINE_LABELS } from "./sparkline-labels.js";
 const TONE_CLASS = {
   chart: "text-[var(--chart-1)]",
-  brand: "text-[var(--brand)]",
-  muted: "text-[var(--text-muted)]",
-  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)]"
+  brand: "text-brand",
+  muted: "text-muted",
+  income: "text-money-income",
+  expense: "text-money-expense",
+  net: "text-money-net",
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-danger",
+  info: "text-info"
 };
 const signedClass = (v) => v < 0 ? TONE_CLASS.expense : TONE_CLASS.income;
 const DEFAULT_WIDTH = 72;

package/dist/components/sparkline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/sparkline.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { useTextSize } from \"../theme/text-size\";\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\nexport const DEFAULT_SPARKLINE_LABELS: SparklineLabels = {\n  rising: (first, last) => `Rising from ${first} to ${last}`,\n  falling: (first, last) => `Falling from ${first} to ${last}`,\n  flat: (value) => `Unchanged at ${value}`,\n  single: (value) => `One value: ${value}`,\n  noData: \"No data\",\n  named: (name, summary) => `${name}: ${summary}`,\n};\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-[var(--brand)]\",\n  muted: \"text-[var(--text-muted)]\",\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\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<ComponentPropsWithoutRef<\"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?: Partial<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) => f.format(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\";\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) => f.format(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":[]}

package/dist/components/spinner.d.ts

@@ -0,0 +1,45 @@
+import type { ComponentPropsWithRef } from "react";
+/** A `<span>`'s props plus the words a reader hears — see {@link CardHeaderProps}.
+ *  The ring is drawn with a border, so there is nothing inside it to put children in. */
+export interface SpinnerProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    /**
+     * What the spinner means, for a screen reader. Default: `common.loading` from the
+     * {@link UiKitProvider}, else "Loading…".
+     *
+     * `null` makes it DECORATIVE — no role, no text, hidden from assistive tech. Use it
+     * whenever words are already there: beside visible "Loading…" text (otherwise it is
+     * announced twice), inside a labelled button (otherwise its text joins the button's
+     * name), or inside a live region of the app's own (otherwise that region and this
+     * one both announce).
+     */
+    label?: string | null;
+    /**
+     * Show the label as TEXT beside the ring, not only to a screen reader. kastlan's
+     * LoadingState (feedback/loading-state.tsx:14) builds exactly this by hand — a
+     * `role="status"` wrapper, the spinner at `label={null}`, a `<p>` of text — so it
+     * has to get the three-part aria arrangement right itself. Here the visible text IS
+     * the live region's content (the label stays the accessible name, said once), and
+     * the ring is decorative. `className` still sizes the ring; the other props go on
+     * the wrapper. Ignored with `label={null}`: there are no words to show.
+     */
+    showLabel?: boolean;
+    /** Where the shown label sits: `end` (default) — beside the ring, for a row or a
+     *  button; `below` — under it, centred, for a panel's loading state. */
+    labelPosition?: "end" | "below";
+}
+/**
+ * A spinning ring that also SAYS it is loading.
+ *
+ * It used to be a bordered span and nothing else, so a reader met no element at all
+ * where a sighted user saw the page working — or, beside an emptied list, met the
+ * empty list and concluded there was nothing there. `role="status"` makes it a polite
+ * live region, and the text inside is what that region announces. Text rather than
+ * `aria-label`: a live region's announcement is its CONTENT, and several readers
+ * ignore a name on one.
+ *
+ * `relative` so the `sr-only` text has a local containing block (see
+ * sr-only-containment.test). Where the words are already on screen, pass
+ * `label={null}`: announcing is right for a spinner standing alone and wrong for one
+ * beside text, inside a button, or inside the app's own live region.
+ */
+export declare function Spinner({ className, label, showLabel, labelPosition, ...rest }: SpinnerProps): import("react").JSX.Element;

package/dist/components/spinner.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
+function Spinner({ className, label, showLabel, labelPosition = "end", ...rest }) {
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS, {
+    loading: label ?? void 0
+  });
+  const ring = cn(
+    "relative inline-block h-5 w-5 animate-spin rounded-full border-2 border-subtle border-t-[var(--text-primary)]",
+    className
+  );
+  if (label === null) return /* @__PURE__ */ jsx("span", { "aria-hidden": true, ...rest, className: ring });
+  if (showLabel) {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        role: "status",
+        ...rest,
+        className: cn(
+          "inline-flex items-center text-sm text-secondary",
+          labelPosition === "below" ? "flex-col gap-2 text-center" : "gap-2"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: ring }),
+          /* @__PURE__ */ jsx("span", { children: common.loading })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { role: "status", ...rest, className: ring, children: /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+    common.loading,
+    " "
+  ] }) });
+}
+export {
+  Spinner
+};
+//# sourceMappingURL=spinner.js.map

package/dist/components/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/spinner.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** A `<span>`'s props plus the words a reader hears — see {@link CardHeaderProps}.\n *  The ring is drawn with a border, so there is nothing inside it to put children in. */\nexport interface SpinnerProps extends Omit<ComponentPropsWithRef<\"span\">, \"children\"> {\n  /**\n   * What the spinner means, for a screen reader. Default: `common.loading` from the\n   * {@link UiKitProvider}, else \"Loading…\".\n   *\n   * `null` makes it DECORATIVE — no role, no text, hidden from assistive tech. Use it\n   * whenever words are already there: beside visible \"Loading…\" text (otherwise it is\n   * announced twice), inside a labelled button (otherwise its text joins the button's\n   * name), or inside a live region of the app's own (otherwise that region and this\n   * one both announce).\n   */\n  label?: string | null;\n  /**\n   * Show the label as TEXT beside the ring, not only to a screen reader. kastlan's\n   * LoadingState (feedback/loading-state.tsx:14) builds exactly this by hand — a\n   * `role=\"status\"` wrapper, the spinner at `label={null}`, a `<p>` of text — so it\n   * has to get the three-part aria arrangement right itself. Here the visible text IS\n   * the live region's content (the label stays the accessible name, said once), and\n   * the ring is decorative. `className` still sizes the ring; the other props go on\n   * the wrapper. Ignored with `label={null}`: there are no words to show.\n   */\n  showLabel?: boolean;\n  /** Where the shown label sits: `end` (default) — beside the ring, for a row or a\n   *  button; `below` — under it, centred, for a panel's loading state. */\n  labelPosition?: \"end\" | \"below\";\n}\n\n/**\n * A spinning ring that also SAYS it is loading.\n *\n * It used to be a bordered span and nothing else, so a reader met no element at all\n * where a sighted user saw the page working — or, beside an emptied list, met the\n * empty list and concluded there was nothing there. `role=\"status\"` makes it a polite\n * live region, and the text inside is what that region announces. Text rather than\n * `aria-label`: a live region's announcement is its CONTENT, and several readers\n * ignore a name on one.\n *\n * `relative` so the `sr-only` text has a local containing block (see\n * sr-only-containment.test). Where the words are already on screen, pass\n * `label={null}`: announcing is right for a spinner standing alone and wrong for one\n * beside text, inside a button, or inside the app's own live region.\n */\nexport function Spinner({ className, label, showLabel, labelPosition = \"end\", ...rest }: SpinnerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, {\n    loading: label ?? undefined,\n  });\n  const ring = cn(\n    \"relative inline-block h-5 w-5 animate-spin rounded-full border-2 border-subtle border-t-[var(--text-primary)]\",\n    className,\n  );\n  if (label === null) return <span aria-hidden {...rest} className={ring} />;\n  if (showLabel) {\n    return (\n      <span\n        role=\"status\"\n        {...rest}\n        className={cn(\n          \"inline-flex items-center text-sm text-secondary\",\n          labelPosition === \"below\" ? \"flex-col gap-2 text-center\" : \"gap-2\",\n        )}\n      >\n        <span aria-hidden className={ring} />\n        <span>{common.loading}</span>\n      </span>\n    );\n  }\n  return (\n    <span role=\"status\" {...rest} className={ring}>\n      {/* The trailing space is a separator for the case the caller forgot `label={null}`\n          inside a button: a name is the concatenation of its text, and without it the\n          spinner's word ran straight into the button's — \"Loadingconfirm\". */}\n      <span className=\"sr-only\">{common.loading} </span>\n    </span>\n  );\n}\n"],"mappings":";AAwD6B,cAGvB,YAHuB;AAvD7B,SAAS,UAAU;AACnB,SAAS,uBAAuB,oBAAoB;AA8C7C,SAAS,QAAQ,EAAE,WAAW,OAAO,WAAW,gBAAgB,OAAO,GAAG,KAAK,GAAiB;AACrG,QAAM,SAAS,aAAa,UAAU,uBAAuB;AAAA,IAC3D,SAAS,SAAS;AAAA,EACpB,CAAC;AACD,QAAM,OAAO;AAAA,IACX;AAAA,IACA;AAAA,EACF;AACA,MAAI,UAAU,KAAM,QAAO,oBAAC,UAAK,eAAW,MAAE,GAAG,MAAM,WAAW,MAAM;AACxE,MAAI,WAAW;AACb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA,kBAAkB,UAAU,+BAA+B;AAAA,QAC7D;AAAA,QAEA;AAAA,8BAAC,UAAK,eAAW,MAAC,WAAW,MAAM;AAAA,UACnC,oBAAC,UAAM,iBAAO,SAAQ;AAAA;AAAA;AAAA,IACxB;AAAA,EAEJ;AACA,SACE,oBAAC,UAAK,MAAK,UAAU,GAAG,MAAM,WAAW,MAIvC,+BAAC,UAAK,WAAU,WAAW;AAAA,WAAO;AAAA,IAAQ;AAAA,KAAC,GAC7C;AAEJ;","names":[]}

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

@@ -0,0 +1,2 @@
+import type { StatTileLabels } from "./stat-tile.js";
+export declare const DEFAULT_STAT_TILE_LABELS: StatTileLabels;

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

@@ -0,0 +1,14 @@
+"use client";
+const DEFAULT_STAT_TILE_LABELS = {
+  increase: (amount) => `Up ${amount}`,
+  decrease: (amount) => `Down ${amount}`,
+  unchanged: "No change",
+  better: (change) => `${change} (better)`,
+  worse: (change) => `${change} (worse)`,
+  noValue: "No data",
+  loading: "Loading\u2026"
+};
+export {
+  DEFAULT_STAT_TILE_LABELS
+};
+//# sourceMappingURL=stat-tile-labels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/stat-tile-labels.ts"],"sourcesContent":["// The English words of ./stat-tile, 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). ./stat-tile re-exports them.\n\nimport type { StatTileLabels } from \"./stat-tile\";\n\nexport const DEFAULT_STAT_TILE_LABELS: StatTileLabels = {\n  increase: (amount) => `Up ${amount}`,\n  decrease: (amount) => `Down ${amount}`,\n  unchanged: \"No change\",\n  better: (change) => `${change} (better)`,\n  worse: (change) => `${change} (worse)`,\n  noValue: \"No data\",\n  loading: \"Loading…\",\n};\n"],"mappings":";AAMO,MAAM,2BAA2C;AAAA,EACtD,UAAU,CAAC,WAAW,MAAM,MAAM;AAAA,EAClC,UAAU,CAAC,WAAW,QAAQ,MAAM;AAAA,EACpC,WAAW;AAAA,EACX,QAAQ,CAAC,WAAW,GAAG,MAAM;AAAA,EAC7B,OAAO,CAAC,WAAW,GAAG,MAAM;AAAA,EAC5B,SAAS;AAAA,EACT,SAAS;AACX;","names":[]}

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

@@ -1,13 +1,13 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, ReactElement } from 'react';
-
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import { DEFAULT_STAT_TILE_LABELS } from "./stat-tile-labels.js";
 /**
  * The words a stat tile speaks. The delta's arrow is an icon, and an icon is not a
  * sentence: a screen reader gets the direction (and, under `goodDirection`, the
  * verdict) as words, and a sighted reader who cannot tell the two delta colours apart
  * still has the arrow — neither judgement rides on colour alone.
  */
-interface StatTileLabels {
+export interface StatTileLabels {
     /** The delta, rising. `amount` is already formatted and unsigned. */
     increase: (amount: string) => string;
     decrease: (amount: string) => string;
@@ -20,7 +20,7 @@ interface StatTileLabels {
     /** Spoken while `loading`. */
     loading: string;
 }
-declare const DEFAULT_STAT_TILE_LABELS: StatTileLabels;
+export { DEFAULT_STAT_TILE_LABELS };
 /**
  * What colours a figure. Token-backed like everything else in the kit.
  *
@@ -31,9 +31,9 @@ declare const DEFAULT_STAT_TILE_LABELS: StatTileLabels;
  *  - `success` / `warning` / `danger` / `info` — a threshold verdict ("phase margin
  *    below 30°"). Say it in the hint or description as well; colour alone is not one.
  */
-type StatTileTone = "neutral" | "brand" | "income" | "expense" | "net" | "signed" | "success" | "warning" | "danger" | "info";
+export type StatTileTone = "neutral" | "brand" | "income" | "expense" | "net" | "signed" | "success" | "warning" | "danger" | "info";
 /** A change since the previous period. A bare number is shorthand for `{ value }`. */
-interface StatTileDelta {
+export interface StatTileDelta {
     /** Signed: above zero is "up". */
     value: number;
     /** `"value"` (default) formats it like the headline — same currency, same
@@ -43,7 +43,7 @@ interface StatTileDelta {
     label?: ReactNode;
 }
 /** A smaller figure under the headline — a prior period, a projection, a split. */
-interface StatTileSubValue {
+export interface StatTileSubValue {
     label: ReactNode;
     /** A number is formatted like the headline; anything else is rendered as given. */
     value: ReactNode;
@@ -60,13 +60,13 @@ interface StatTileSubValue {
 }
 /** What {@link StatTileProps.renderLink} is handed. Spread it onto your router's
  *  link: the class is what stretches the link over the whole tile. */
-interface StatTileLinkProps {
+export interface StatTileLinkProps {
     href: string;
     className: string;
     "aria-describedby": string;
     children: ReactNode;
 }
-interface StatTileProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onClick"> {
+export interface StatTileProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onClick"> {
     /** What is measured. Also the tile's accessible name when it is a link/button. */
     label: ReactNode;
     /**
@@ -197,7 +197,7 @@ interface StatTileProps extends Omit<ComponentPropsWithoutRef<"div">, "children"
     renderLink?: (props: StatTileLinkProps) => ReactElement;
     /** Makes the tile a button (ignored when `href` is given). */
     onClick?: () => void;
-    labels?: Partial<StatTileLabels>;
+    labels?: LabelOverride<StatTileLabels>;
 }
 /**
  * The KPI card: a label, one number, and optionally how it moved, what it is made of
@@ -214,8 +214,8 @@ interface StatTileProps extends Omit<ComponentPropsWithoutRef<"div">, "children"
  * the hint sits above the overlay and stays its own tab stop. The link's name is the
  * label, and it is described by the value and the delta.
  */
-declare function StatTile({ label, value, currency, compact, numberFormat, format, locale, unit, valueLabel, tone, delta, goodDirection, hint, truncateLabel, name, description, projection, subValues, trend, sparkline, icon, footer, sensitive, loading, size, variant, href, renderLink, onClick, labels, className, ...rest }: StatTileProps): react.JSX.Element;
-interface StatTileGridProps extends ComponentPropsWithoutRef<"div"> {
+export declare function StatTile({ label, value, currency, compact, numberFormat, format, locale, unit, valueLabel, tone, delta, goodDirection, hint, truncateLabel, name, description, projection, subValues, trend, sparkline, icon, footer, sensitive, loading, size, variant, href, renderLink, onClick, labels, className, ...rest }: StatTileProps): import("react").JSX.Element;
+export interface StatTileGridProps extends ComponentPropsWithRef<"div"> {
     /** The narrowest a tile may get before the grid drops a column. The default fits
      *  two tiles on a 320px phone. */
     minTileWidth?: string;
@@ -237,7 +237,7 @@ interface StatTileGridProps extends ComponentPropsWithoutRef<"div"> {
      */
     loading?: boolean;
     /** The grid's one sentence — `loading` from {@link StatTileLabels}. */
-    labels?: Partial<Pick<StatTileLabels, "loading">>;
+    labels?: LabelOverride<Pick<StatTileLabels, "loading">>;
 }
 /**
  * The row of tiles every dashboard in the three apps lays out by hand, each with its
@@ -246,6 +246,4 @@ interface StatTileGridProps extends ComponentPropsWithoutRef<"div"> {
  * the band where the sidebar was open. This fits as many columns as `minTileWidth`
  * allows in the space the grid actually has, and needs no breakpoint at all.
  */
-declare function StatTileGrid({ minTileWidth, stretch, loading, labels, className, style, children, ...rest }: StatTileGridProps): react.JSX.Element;
-
-export { DEFAULT_STAT_TILE_LABELS, StatTile, type StatTileDelta, StatTileGrid, type StatTileGridProps, type StatTileLabels, type StatTileLinkProps, type StatTileProps, type StatTileSubValue, type StatTileTone };
+export declare function StatTileGrid({ minTileWidth, stretch, loading, labels, className, style, children, ...rest }: StatTileGridProps): import("react").JSX.Element;