@eifi1/ui-kit 0.33.1 → 0.34.0

package/src/components/signature-pad.tsx

@@ -1,11 +1,16 @@
-import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, PointerEvent as ReactPointerEvent, ReactNode } from "react";
+import { useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, PointerEvent as ReactPointerEvent, ReactNode, Ref } from "react";
 import { Eraser, Keyboard, PenLine, Undo2 } from "lucide-react";
 import { cn } from "../lib/cn";
+import { hasContent } from "../lib/presence";
 import { useAnnounce } from "../hooks/use-announce";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { useTextSize } from "../theme/text-size";
-import { Button, FIELD_INVALID, Input } from "./ui";
+import { Button } from "./button";
+import { FIELD_INVALID } from "./field-base";
+import { Input } from "./input";
+import { FIELD_ERROR_CLASS } from "./field-parts";
+import { DEFAULT_SIGNATURE_PAD_LABELS } from "./signature-pad-labels";
 
 /**
  * A drawn signature, captured on a canvas and handed back as a PNG data URL.
@@ -81,24 +86,8 @@ export interface SignaturePadLabels {
   viewTyped: (name: string) => string;
 }
 
-export const DEFAULT_SIGNATURE_PAD_LABELS: SignaturePadLabels = {
-  label: "Signature",
-  instructions: "Sign in the box with a mouse, your finger or a pen.",
-  typedFallbackHint: "If you cannot draw, type your name instead.",
-  empty: "Nothing drawn yet",
-  signed: "Signature drawn",
-  undo: "Undo last stroke",
-  clear: "Clear",
-  save: "Save signature",
-  useTyped: "Type name instead",
-  useDrawn: "Draw instead",
-  typedName: "Full name",
-  cleared: "Signature cleared",
-  undone: "Last stroke removed",
-  viewEmpty: "Not signed",
-  viewDrawn: "Handwritten signature",
-  viewTyped: (name) => `Signed with the typed name ${name}`,
-};
+// Defined in ./signature-pad-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_SIGNATURE_PAD_LABELS };
 
 /* ── Types ───────────────────────────────────────────────────────────────── */
 
@@ -152,7 +141,10 @@ export interface SignaturePadProps extends Omit<ComponentPropsWithoutRef<"div">,
   /** Classes for the canvas — its height, chiefly (default `h-40`). */
   canvasClassName?: string;
   /** User-facing strings; see {@link SignaturePadLabels}. */
-  labels?: Partial<SignaturePadLabels>;
+  labels?: LabelOverride<SignaturePadLabels>;
+  /** The {@link SignaturePadHandle}, not an element. A React 19 ref prop since 0.34
+   *  (MOD-4, refactor audit 2026-10); it was `forwardRef`. */
+  ref?: Ref<SignaturePadHandle>;
 }
 
 /* ── Drawing ─────────────────────────────────────────────────────────────── */
@@ -238,26 +230,24 @@ function drawName(ctx: CanvasRenderingContext2D, name: string, w: number, h: num
 
 /* ── The component ───────────────────────────────────────────────────────── */
 
-export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(function SignaturePad(
-  {
-    label,
-    description,
-    onChange,
-    onSave,
-    disabled,
-    invalid,
-    error,
-    allowTypedName,
-    exportInk = DEFAULT_EXPORT_INK,
-    exportBackground,
-    lineWidth = 2.5,
-    canvasClassName,
-    labels: labelsProp,
-    className,
-    ...rest
-  },
+export function SignaturePad({
   ref,
-) {
+  label,
+  description,
+  onChange,
+  onSave,
+  disabled,
+  invalid,
+  error,
+  allowTypedName,
+  exportInk = DEFAULT_EXPORT_INK,
+  exportBackground,
+  lineWidth = 2.5,
+  canvasClassName,
+  labels: labelsProp,
+  className,
+  ...rest
+}: SignaturePadProps) {
   // Prop > <UiKitProvider> > English, like every labelled component in the kit.
   const labels = useKitLabels("signaturePad", DEFAULT_SIGNATURE_PAD_LABELS, labelsProp);
   const { announce, regionProps } = useAnnounce();
@@ -526,7 +516,7 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(fu
     if (png) onSave?.(png, detail());
   };
 
-  const hasError = error !== undefined && error !== null && error !== false && error !== "";
+  const hasError = hasContent(error);
   const isInvalid = Boolean(invalid) || hasError;
   const describedBy = [descId, statusId, hasError ? errorId : null].filter(Boolean).join(" ");
 
@@ -538,10 +528,10 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(fu
   return (
     <div {...rest} className={cn("relative space-y-1.5", className)} data-empty={isEmpty || undefined}>
       <div>
-        <span id={labelId} className="block text-sm font-medium text-[var(--text-primary)]">
+        <span id={labelId} className="block text-sm font-medium text-primary">
           {label ?? labels.label}
         </span>
-        <p id={descId} className="text-xs text-[var(--text-muted)]">
+        <p id={descId} className="text-xs text-muted">
           {description ?? labels.instructions}
           {allowTypedName && !typed ? ` ${labels.typedFallbackHint}` : null}
         </p>
@@ -564,7 +554,7 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(fu
           onPointerCancel={endStroke}
           className={cn(
             // `touch-none` stops the page scrolling under a finger that is signing.
-            "block h-40 w-full touch-none select-none rounded-md border border-[var(--border)] bg-[var(--bg-surface)] text-[var(--text-primary)]",
+            "block h-40 w-full touch-none select-none rounded-md border border-subtle bg-surface text-primary",
             typed || disabled ? "cursor-default" : "cursor-crosshair",
             disabled && "opacity-60",
             isInvalid && FIELD_INVALID,
@@ -574,7 +564,7 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(fu
         {/* The signing line — where people expect to sign. Decoration only. */}
         <div
           aria-hidden="true"
-          className="pointer-events-none absolute inset-x-6 bottom-8 border-b border-dashed border-[var(--border-strong)]"
+          className="pointer-events-none absolute inset-x-6 bottom-8 border-b border-dashed border-strong"
         />
         <span id={statusId} className="sr-only">
           {isEmpty ? labels.empty : labels.signed}
@@ -633,7 +623,7 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(fu
       </div>
 
       {hasError && (
-        <p id={errorId} className="mt-1 text-caption leading-tight text-[var(--danger)]">
+        <p id={errorId} className={FIELD_ERROR_CLASS}>
           {error}
         </p>
       )}
@@ -641,12 +631,11 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(fu
       <div {...regionProps} />
     </div>
   );
-});
-SignaturePad.displayName = "SignaturePad";
+}
 
 /* ── Read-only ───────────────────────────────────────────────────────────── */
 
-export interface SignatureViewProps extends ComponentPropsWithoutRef<"figure"> {
+export interface SignatureViewProps extends ComponentPropsWithRef<"figure"> {
   /** The saved PNG — what `SignaturePad` handed to `onChange`/`onSave`, as stored. */
   value?: string | null;
   /**
@@ -669,7 +658,7 @@ export interface SignatureViewProps extends ComponentPropsWithoutRef<"figure"> {
   /** Classes for the frame — its height, chiefly (default `h-40`, the pad's). */
   frameClassName?: string;
   /** User-facing strings; see {@link SignaturePadLabels} (`view*`). */
-  labels?: Partial<SignaturePadLabels>;
+  labels?: LabelOverride<SignaturePadLabels>;
 }
 
 /**
@@ -707,11 +696,11 @@ export function SignatureView({
       data-empty={kind === "empty" || undefined}
     >
       {captioned && (
-        <figcaption id={captionId} className="block text-sm font-medium text-[var(--text-primary)]">{caption}</figcaption>
+        <figcaption id={captionId} className="block text-sm font-medium text-primary">{caption}</figcaption>
       )}
       <div
         className={cn(
-          "relative flex h-40 items-center justify-center overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)]",
+          "relative flex h-40 items-center justify-center overflow-hidden rounded-md border border-subtle bg-surface",
           frameClassName,
         )}
       >
@@ -728,19 +717,21 @@ export function SignatureView({
           <span
             role="img"
             aria-label={labels.viewTyped(name)}
-            className="relative max-w-[85%] truncate px-2 text-4xl italic text-[var(--text-primary)]"
+            // A name, so never cut at Large: it wraps inside the 10rem frame from Large
+            // up (`truncate-until-large`, text size §10.17; round 0.34 T1).
+            className="relative max-w-[85%] truncate-until-large px-2 text-4xl italic text-primary"
             style={{ fontFamily: SCRIPT_FONT }}
           >
             {name}
           </span>
         )}
         {kind === "empty" && (
-          <span className="relative text-xs text-[var(--text-muted)]">{labels.viewEmpty}</span>
+          <span className="relative text-xs text-muted">{labels.viewEmpty}</span>
         )}
         {/* The signing line, as on the pad. Decoration only. */}
         <div
           aria-hidden="true"
-          className="pointer-events-none absolute inset-x-6 bottom-8 border-b border-dashed border-[var(--border-strong)]"
+          className="pointer-events-none absolute inset-x-6 bottom-8 border-b border-dashed border-strong"
         />
       </div>
     </figure>

package/src/components/signed-amount-labels.ts

@@ -0,0 +1,10 @@
+// The English words of ./signed-amount, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./signed-amount re-exports them.
+
+import type { SignedAmountLabels } from "./signed-amount";
+
+export const DEFAULT_SIGNED_AMOUNT_LABELS: SignedAmountLabels = {
+  positive: (amount) => `plus ${amount}`,
+  negative: (amount) => `minus ${amount}`,
+};

package/src/components/signed-amount.tsx

@@ -1,10 +1,11 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 import { ArrowDown, ArrowUp, Minus } from "lucide-react";
 import { cn } from "../lib/cn";
 import { formatMoney, formatNumber, formatPercent } from "../lib/format";
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { DEFAULT_STAT_TILE_LABELS } from "./stat-tile";
 import type { StatTileLabels } from "./stat-tile";
+import { DEFAULT_SIGNED_AMOUNT_LABELS } from "./signed-amount-labels";
 
 /**
  * The text colours a figure can carry, token-backed — `StatTile`'s tones, as a class
@@ -31,16 +32,16 @@ export type TextTone =
   | "info";
 
 const TEXT_TONE: Record<TextTone, string> = {
-  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",
 };
 
 /**
@@ -52,7 +53,7 @@ export function toneTextClass(tone: TextTone): string {
   return TEXT_TONE[tone];
 }
 
-export interface ToneProps extends ComponentPropsWithoutRef<"span"> {
+export interface ToneProps extends ComponentPropsWithRef<"span"> {
   tone: TextTone;
 }
 
@@ -98,10 +99,8 @@ export interface SignedAmountLabels {
   negative: (amount: string) => string;
 }
 
-export const DEFAULT_SIGNED_AMOUNT_LABELS: SignedAmountLabels = {
-  positive: (amount) => `plus ${amount}`,
-  negative: (amount) => `minus ${amount}`,
-};
+// Defined in ./signed-amount-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_SIGNED_AMOUNT_LABELS };
 
 interface SignedFormatProps {
   /** ISO 4217 code: format as money. */
@@ -169,7 +168,7 @@ const ARROW = { up: ArrowUp, down: ArrowDown, flat: Minus } as const;
 
 export interface SignedAmountProps
   extends SignedFormatProps,
-    Omit<ComponentPropsWithoutRef<"span">, "children"> {
+    Omit<ComponentPropsWithRef<"span">, "children"> {
   value: number;
   /** See {@link SignedAmountTone}. Default `signed`, or `verdict` with `goodDirection`. */
   tone?: SignedAmountTone;
@@ -191,7 +190,7 @@ export interface SignedAmountProps
   arrow?: boolean;
   /** Tag the figure `data-private`, for the host's demo-mode blur. */
   sensitive?: boolean;
-  labels?: Partial<SignedAmountLabels>;
+  labels?: LabelOverride<SignedAmountLabels>;
 }
 
 /**
@@ -256,7 +255,7 @@ export function SignedAmount({
   );
 }
 
-export interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithoutRef<"span">, "children"> {
+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,
@@ -275,7 +274,7 @@ export interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithou
   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">>;
 }
 
 /**
@@ -339,7 +338,7 @@ export function Delta({
         <span aria-hidden>{amount}</span>
         <span className="sr-only">{spoken}</span>
       </span>
-      {label != null && <span className="text-[var(--text-muted)]">{label}</span>}
+      {label != null && <span className="text-muted">{label}</span>}
     </span>
   );
 }

package/src/components/skeleton.tsx

@@ -10,7 +10,7 @@ import { cn } from "../lib/cn";
  * is exactly what `prefers-reduced-motion` asks to be dropped. The fill stays, so the
  * shape of what is coming is still there.
  */
-export const SKELETON_CLASS = "animate-pulse rounded bg-[var(--bg-active)] motion-reduce:animate-none";
+export const SKELETON_CLASS = "animate-pulse rounded bg-active motion-reduce:animate-none";
 
 export type SkeletonShape = "line" | "block" | "circle";
 

package/src/components/slider.tsx

@@ -1,6 +1,7 @@
-import { forwardRef, useId } from "react";
-import type { CSSProperties, ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
+import { useId } from "react";
+import type { CSSProperties, ChangeEvent, InputHTMLAttributes, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
+import { useFieldMessages } from "./field-parts";
 
 /**
  * A range control on a native `<input type="range">`.
@@ -92,16 +93,16 @@ 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(" ");
 
 // The marks row sits `-mt-1.5` under a 1.5rem box, tucked against the track. In the 48 px
@@ -161,7 +162,13 @@ export interface SliderProps
   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. */
@@ -170,6 +177,9 @@ export interface SliderProps
   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>;
 }
 
 /**
@@ -179,29 +189,27 @@ export interface SliderProps
  * Every other prop reaches the `<input>` — `name`, `id`, `aria-*`, `data-*`, `onBlur`,
  * `onPointerUp` for commit-on-release — and `disabled` also fades the label line.
  */
-export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
-  {
-    value,
-    onChange,
-    min,
-    max,
-    step,
-    scale = "linear",
-    zeroStop = true,
-    formatValue,
-    label,
-    hint,
-    readout,
-    marks,
-    className,
-    inputClassName,
-    id,
-    disabled,
-    style,
-    ...rest
-  },
+export function Slider({
   ref,
-) {
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  scale = "linear",
+  zeroStop = true,
+  formatValue,
+  label,
+  hint,
+  readout,
+  marks,
+  className,
+  inputClassName,
+  id,
+  disabled,
+  style,
+  ...rest
+}: SliderProps) {
   const generated = useId();
   const inputId = id ?? generated;
   const log = scale === "log" && min > 0 && max > min;
@@ -245,7 +253,10 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
     .filter((m) => m.value >= min && m.value <= max);
   const hasMarkLabels = normalizedMarks.some((m) => m.label !== undefined);
 
-  const hasHeader = label !== undefined || hint !== undefined || readout !== undefined;
+  // The label line's "?", or the caption under the track (DUP-2).
+  const messages = useFieldMessages({ hint, describedBy: rest["aria-describedby"] });
+  const labelHint = messages.labelHint;
+  const hasHeader = label !== undefined || labelHint !== undefined || readout !== undefined;
   const plainReadout = typeof readout === "string" || typeof readout === "number";
 
   return (
@@ -264,16 +275,16 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
           {label !== undefined && (
             <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"
             >
               {label}
             </label>
           )}
-          {hint !== undefined && <span className="flex shrink-0 items-center">{hint}</span>}
+          {labelHint !== undefined && <span className="flex shrink-0 items-center">{labelHint}</span>}
           {readout !== undefined && (
             <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",
               )}
             >
@@ -293,6 +304,7 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
         step={log ? LOG_STEP : step}
         value={current}
         aria-valuetext={valueText}
+        aria-describedby={messages.describedBy}
         onChange={handleChange}
         // The fill's break point, merged under the caller's own style.
         style={{ ...style, "--slider-fill": `${share(current) * 100}%` } as CSSProperties}
@@ -316,7 +328,7 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
             >
               <span className="h-1.5 w-px shrink-0 bg-[var(--border-strong)]" />
               {m.label !== undefined && (
-                <span className="mt-0.5 select-none whitespace-nowrap text-caption leading-tight text-[var(--text-muted)]">
+                <span className="mt-0.5 select-none whitespace-nowrap text-caption leading-tight text-muted">
                   {m.label}
                 </span>
               )}
@@ -324,7 +336,7 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
           ))}
         </div>
       )}
+      {messages.below}
     </div>
   );
-});
-Slider.displayName = "Slider";
+}

package/src/components/sparkline-labels.ts

@@ -0,0 +1,14 @@
+// The English words of ./sparkline, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./sparkline re-exports them.
+
+import type { SparklineLabels } from "./sparkline";
+
+export const DEFAULT_SPARKLINE_LABELS: SparklineLabels = {
+  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}`,
+};

package/src/components/sparkline.tsx

@@ -1,7 +1,8 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 import { cn } from "../lib/cn";
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { useTextSize } from "../theme/text-size";
+import { DEFAULT_SPARKLINE_LABELS } from "./sparkline-labels";
 
 /**
  * The words a sparkline speaks. It has no axes, no tooltip and no legend, so its
@@ -24,14 +25,8 @@ export interface SparklineLabels {
   named: (name: string, summary: string) => string;
 }
 
-export const DEFAULT_SPARKLINE_LABELS: SparklineLabels = {
-  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}`,
-};
+// Defined in ./sparkline-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_SPARKLINE_LABELS };
 
 /**
  * What colours the marks. Token names, not colours: every one resolves to a variable
@@ -59,15 +54,15 @@ export type SparklineTone =
 // per element is enough and a signed bar chart needs no second lookup table.
 const TONE_CLASS: Record<Exclude<SparklineTone, "signed">, string> = {
   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: number) => (v < 0 ? TONE_CLASS.expense : TONE_CLASS.income);
@@ -75,7 +70,7 @@ const signedClass = (v: number) => (v < 0 ? TONE_CLASS.expense : TONE_CLASS.inco
 /** `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>`. */
 export interface SparklineProps
-  extends Omit<ComponentPropsWithoutRef<"svg">, "children" | "width" | "height"> {
+  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>;
@@ -107,7 +102,7 @@ export interface SparklineProps
    *  kit's locale, at most two decimals. */
   formatValue?: (value: number) => string;
   locale?: string;
-  labels?: Partial<SparklineLabels>;
+  labels?: LabelOverride<SparklineLabels>;
 }
 
 const DEFAULT_WIDTH = 72;