@juwel-development/design-system 3.3.0 → 3.5.0

package/src/Display/Meter/Meter.tsx

@@ -0,0 +1,136 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { CSSProperties, FunctionComponent } from 'react';
+import { MeterConfigurationError } from './MeterConfigurationError';
+
+// The track is the whole capacity: square corners, no radius token - Meter is not a control
+// (docs/adr/0003). The one-pixel `rule` line identifies the capacity against the surface;
+// `meterTrack` behind it makes the scale visible without boxing (docs/adr/0010). Deliberately no
+// transition class: the library's one motion belongs to state changes on controls, not a display.
+const meterTrack = cva(
+  'w-full h-[var(--meter-track-thickness)] bg-meter-track border border-solid border-rule',
+);
+
+// The fill is a block box sized by --meter-level, the normalized share the component computes;
+// block layout places it at inline-start in both LTR and RTL, no physical offset. Depleting reads
+// the same share into color-mix: `meterFill` at max, `error` at min, linearly through OKLab - a
+// perceptual space, so no threshold (docs/adr/0010). Both endpoints stay tokens a brand re-points.
+const meterFill = cva('h-full w-[calc(var(--meter-level)*100%)]', {
+  variants: {
+    treatment: {
+      neutral: 'bg-meter-fill',
+      depleting:
+        'bg-[color-mix(in_oklab,var(--color-meter-fill)_calc(var(--meter-level)*100%),var(--color-error))]',
+    },
+  },
+  defaultVariants: {
+    treatment: 'neutral',
+  },
+});
+
+// React's CSSProperties is closed over known properties; the one custom property the recipes read
+// is declared here so the style object stays typed without an assertion.
+type MeterLevelStyle = CSSProperties & { '--meter-level': number };
+
+export interface IMeterProps extends VariantProps<typeof meterFill> {
+  /** The current level. Must lie inside `[min, max]`; an outside value throws
+   *  {@link MeterConfigurationError} rather than clamping - a wrong number must not render as a
+   *  plausible level. */
+  value: number;
+  /** The bottom of the scale. Defaults to `0`. */
+  min?: number;
+  /** The top of the scale. Must exceed `min`. */
+  max: number;
+  /** The meter's accessible name - what the level measures. Required, and never rendered visibly:
+   *  the component shows a filled track and nothing else. Its wording is the consumer's. */
+  label: string;
+  /** Optional `aria-valuetext`, so a screen reader hears the consumer's wording ("strained")
+   *  instead of a bare number. Omitted, the numeric value is announced. */
+  valueText?: string;
+  testId?: string;
+}
+
+/**
+ * A read-only display of one numeric level within a bounded scale, shown as a filled share of a
+ * whole: a short track, a fill from inline-start, no text. It states an amount - not an operation's
+ * completion, and unlike a Slider it cannot be operated.
+ *
+ * @Guarantees — enforced on every render
+ * - The root carries `role="meter"`, `aria-valuenow`/`aria-valuemin`/`aria-valuemax`, the `label`
+ *   as its accessible name, and `aria-valuetext` exactly when `valueText` is supplied. It is not
+ *   focusable, and the visual fill is hidden from the accessibility tree.
+ * - The filled share is `(value - min) / (max - min)` of the container and begins at logical
+ *   inline-start under both LTR and RTL direction.
+ * - Neutral paints the fill with `meterFill`; `depleting` maps the normalized level linearly
+ *   through OKLab from `meterFill` at the maximum to `error` at the minimum - no threshold, no
+ *   wording, no icon (docs/adr/0010-meter-depletion-is-a-treatment.md).
+ * - A value change lands instantly: no width or colour animation.
+ * - The track fills its container, reads `--meter-track-thickness`, keeps square corners (no
+ *   radius token - Meter is not a control), and draws a persistent one-pixel `rule` line that
+ *   identifies the whole capacity against the surface.
+ * - Invalid numeric configuration throws {@link MeterConfigurationError}: non-finite `value`,
+ *   `min` or `max`, `min >= max`, or a value outside the inclusive range. Nothing is clamped.
+ * - No visible wording of its own, no numeric readout, no caption slot, no `className`/`style`
+ *   passthrough.
+ *
+ * @CallerMustEnsure — the component cannot see these and does not check them
+ * - `label` carries meaningful wording; the component renders it to assistive technology only and
+ *   does not inspect it.
+ * - When `depleting` is selected, surrounding visible content explains why nearing the minimum
+ *   matters - the colour walk reinforces a stated consequence and must not be its only carrier.
+ *
+ * @UXGuidelines
+ * - Place any visible caption or readout yourself with typography; the Meter deliberately carries
+ *   none, so what the level measures stays the consumer's wording.
+ * - Reach for `depleting` only where a low value is genuinely more erroneous - some quantities
+ *   become safer toward their minimum, which is why the treatment is opt-in.
+ */
+export const Meter: FunctionComponent<IMeterProps> = ({
+  value,
+  min = 0,
+  max,
+  treatment,
+  label,
+  valueText,
+  testId,
+}) => {
+  if (
+    !Number.isFinite(value) ||
+    !Number.isFinite(min) ||
+    !Number.isFinite(max)
+  ) {
+    throw new MeterConfigurationError(
+      `value, min and max must be finite numbers (got value=${value}, min=${min}, max=${max})`,
+    );
+  }
+  if (min >= max) {
+    throw new MeterConfigurationError(
+      `min must be less than max (got min=${min}, max=${max})`,
+    );
+  }
+  if (value < min || value > max) {
+    throw new MeterConfigurationError(
+      `value must lie within [min, max] (got value=${value}, min=${min}, max=${max})`,
+    );
+  }
+
+  const style: MeterLevelStyle = {
+    '--meter-level': (value - min) / (max - min),
+  };
+
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: the native <meter> paints its own optimum/low/high bands the token contract cannot reach, and its fill is unstylable cross-browser; the ARIA meter pattern on a div carries the same semantics with the library's paint (#105).
+    <div
+      role={'meter'}
+      aria-valuenow={value}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-label={label}
+      aria-valuetext={valueText}
+      data-testid={testId}
+      className={meterTrack()}
+      style={style}
+    >
+      <div aria-hidden={'true'} className={meterFill({ treatment })} />
+    </div>
+  );
+};

package/src/Display/Meter/MeterConfigurationError.ts

@@ -0,0 +1,6 @@
+export class MeterConfigurationError extends Error {
+  constructor(reason: string) {
+    super(`Meter configuration is invalid: ${reason}`);
+    this.name = 'MeterConfigurationError';
+  }
+}

package/src/Display/Typography/Eyebrow/Eyebrow.tsx

@@ -10,7 +10,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // semantic token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const eyebrow = cva('font-secondary text-label tracking-label font-medium', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'muted' },
 });
@@ -28,12 +35,15 @@ interface IEyebrowProps extends VariantProps<typeof eyebrow> {
  * @Guarantees — enforced on every render
  * - Renders a `p`, reading `--font-secondary`, sized by `--text-label` and tracked by
  *   `--tracking-label`, at weight 500.
- * - `color` selects the `muted` (default) or `foreground` role; nothing else paints text.
+ * - `color` selects `muted` (default), `foreground`, `success`, `warning`, `error` or `info`;
+ *   nothing else paints text. A status tone changes colour only and adds no announcement semantics.
  * - Sets neither `font-variant-caps` nor `font-variant-numeric` under any prop.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - This is **not a form label**: it renders no `htmlFor` and labels no control. A labelled control
  *   uses `Input`/`TextArea`, which label themselves.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const Eyebrow: FunctionComponent<IEyebrowProps> = ({
   children,

package/src/Display/Typography/H1/H1.tsx

@@ -12,7 +12,14 @@ const h1 = cva(
   'font-primary text-display leading-display tracking-optical max-w-[var(--measure-display)]',
   {
     variants: {
-      color: { foreground: 'text-foreground', muted: 'text-muted' },
+      color: {
+        foreground: 'text-foreground',
+        muted: 'text-muted',
+        success: 'text-success',
+        warning: 'text-warning',
+        error: 'text-error',
+        info: 'text-info',
+      },
     },
     defaultVariants: { color: 'foreground' },
   },
@@ -34,7 +41,8 @@ interface IH1Props extends VariantProps<typeof h1> {
  *   because bigger type wants fewer characters per line (docs/adr/0004). The bound is the recipe's,
  *   not a caller's: the level fixes the role and the role fixes the measure, so there is no `measure`
  *   prop to select between roles (docs/adr/0008). It holds under every `color`.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - This is an ordinary page title, and it is also a hero's lead - `display` is the hero role, so a
@@ -44,6 +52,8 @@ interface IH1Props extends VariantProps<typeof h1> {
  * - A subpage head is the exception: `PageHead` renders its own `h1` at the `title` role, the one
  *   sanctioned escape valve from level-fixes-role (docs/adr/0005). Reach for it where it fits.
  * - Heading levels descend without skipping — an `h1` is followed by an `h2`, never an `h3`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H1: FunctionComponent<IH1Props> = ({
   children,

package/src/Display/Typography/H2/H2.tsx

@@ -9,7 +9,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // Colour is a semantic token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const h2 = cva('font-primary text-title leading-title tracking-optical', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -27,10 +34,13 @@ interface IH2Props extends VariantProps<typeof h2> {
  * - Reads `--font-primary`, sized by `--text-title`, led by `--leading-title` and optically corrected
  *   by `--tracking-optical` — the title role is the smallest role that carries it, so `H3` and below
  *   take none.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h2` sits under an `h1`, not under an `h3`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H2: FunctionComponent<IH2Props> = ({
   children,

package/src/Display/Typography/H3/H3.tsx

@@ -8,7 +8,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // class.
 const h3 = cva('font-primary text-subtitle leading-subtitle', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -25,10 +32,13 @@ interface IH3Props extends VariantProps<typeof h3> {
  * @Guarantees — enforced on every render
  * - Renders an `h3`; its outline level and the subtitle role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-subtitle` and led by `--leading-subtitle`.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h3` sits under an `h2`, not under an `h1`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H3: FunctionComponent<IH3Props> = ({
   children,

package/src/Display/Typography/H4/H4.tsx

@@ -8,7 +8,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const h4 = cva('font-primary text-body leading-body font-bold', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -24,10 +31,13 @@ interface IH4Props extends VariantProps<typeof h4> {
  * @Guarantees — enforced on every render
  * - Renders an `h4`; its outline level and the body role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-body`, and is bold so it stands apart from a paragraph.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h4` sits under an `h3`, not under an `h2`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H4: FunctionComponent<IH4Props> = ({
   children,

package/src/Display/Typography/H5/H5.tsx

@@ -8,7 +8,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const h5 = cva('font-primary text-body leading-body font-semibold', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -25,10 +32,13 @@ interface IH5Props extends VariantProps<typeof h5> {
  * @Guarantees — enforced on every render
  * - Renders an `h5`; its outline level and the body role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-body`, semibold so it stands apart from a paragraph.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h5` sits under an `h4`, not under an `h3`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H5: FunctionComponent<IH5Props> = ({
   children,

package/src/Display/Typography/H6/H6.tsx

@@ -8,7 +8,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const h6 = cva('font-primary text-body leading-body font-medium', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -25,10 +32,13 @@ interface IH6Props extends VariantProps<typeof h6> {
  * @Guarantees — enforced on every render
  * - Renders an `h6`; its outline level and the body role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-body`, medium so it stands apart from a paragraph.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h6` sits under an `h5`, not under an `h4`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H6: FunctionComponent<IH6Props> = ({
   children,

package/src/Display/Typography/Note/Note.tsx

@@ -11,7 +11,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // the page owns the rhythm around it. Colour is re-pointed by `.dark`, so no variant carries `dark:`.
 const note = cva('font-secondary text-small', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -30,7 +37,8 @@ export interface INoteProps extends VariantProps<typeof note> {
  *
  * @Guarantees — enforced on every render
  * - Renders a `p`, reading `--font-secondary` and sized by `--text-small`.
- * - `color` selects the `foreground` (default) or `muted` role; nothing else paints text.
+ * - `color` selects `foreground` (default), `muted`, `success`, `warning`, `error` or `info`;
+ *   nothing else paints text. A status tone changes colour only.
  * - Emits no tracking, no font-weight, no measure and no margin under any prop.
  * - Carries no ARIA role and no live region under any prop.
  *
@@ -44,6 +52,8 @@ export interface INoteProps extends VariantProps<typeof note> {
  *   architecture standard's one-way dependency rule is why `Prose` restates `P`'s utilities.
  * - Where the annotation is a form's status message, `Form` owns `role="status"`/`role="alert"` by
  *   state; a `Note` announces nothing.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const Note: FunctionComponent<INoteProps> = ({
   children,

package/src/Display/Typography/P/P.tsx

@@ -7,7 +7,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // P owns no reading measure - that belongs to whatever owns the reading column (Prose #21).
 const p = cva('font-primary text-body leading-body', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -23,13 +30,16 @@ interface IPProps extends VariantProps<typeof p> {
  *
  * @Guarantees — enforced on every render
  * - Renders a `p`, reading `--font-primary`, sized by `--text-body` and led by `--leading-body`.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Where line length matters, place the paragraph inside whatever bounds the reading measure; `P`
  *   does not constrain its own width.
  * - For a paragraph inside a reading column, reach for `Prose.Body`, which is measure-bounded by its
  *   `Prose.Root`; `P` is for a paragraph with no reading column around it.
+ * - Status-toned content communicates its status without relying on colour. If a change needs to be
+ *   announced, the caller owns that behavior; selecting a tone does not create a status event.
  */
 export const P: FunctionComponent<IPProps> = ({ children, color, testId }) => (
   <p className={p({ color })} data-testid={testId}>

package/src/Display/Typography/Prose/Prose.tsx

@@ -20,7 +20,14 @@ const proseLede = cva('font-primary text-lede leading-lede text-foreground');
 // semantic token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const proseBody = cva('font-primary text-body leading-body', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -76,12 +83,15 @@ const ProseTail: FunctionComponent<IProseTailProps> = ({ children }) => (
  *   `--measure`, setting no font-size so the `ch` measure resolves against inherited body type.
  * - `Root` stacks its children on `--space-stack` and takes no outer margin: the page owns the
  *   rhythm around the block, and the air the block wants is at its edges and inside the type.
- * - `Lede` renders a `p` at the lede role; `Body` at the body role with a `foreground`/`muted`
- *   `color`; `Tail` at the small role, muted. No drop cap or other invented device.
+ * - `Lede` renders a fixed-foreground `p` at the lede role; `Body` at the body role with a
+ *   `foreground`, `muted`, `success`, `warning`, `error` or `info` `color`; `Tail` at the small
+ *   role, always muted. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Use `Prose.Body` for a paragraph inside this reading column; for a paragraph with no reading
  *   column around it - in a form, a card, a table cell - use `P` instead.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const Prose = {
   Root: ProseRoot,

package/src/Interaction/Slider/Slider.tsx

@@ -0,0 +1,125 @@
+import { cva } from 'class-variance-authority';
+import type { FunctionComponent } from 'react';
+import type { Subject } from 'rxjs';
+import { SliderConfigurationError } from './SliderConfigurationError';
+
+// The track and thumb are vendor pseudo-elements, so every dimension on them needs a token name -
+// no consumer selector reaches them (ADR 0004's test; the tick precedent). The track takes
+// `controlBorder`: the one thing separating an unfilled control from the surface, >=3:1 against it.
+// The thumb takes `foreground`, a solid mark drawn on the surface like the tab marker; disabled
+// paints both in the disabled role, the non-operable statement every control makes. WebKit does
+// not centre the thumb on the track, hence the computed negative margin; Firefox does, but draws a
+// default thumb border WebKit does not, hence border-none on its thumb alone.
+const slider = cva(
+  [
+    'block h-[var(--slider-thumb-size)] w-full cursor-pointer appearance-none bg-transparent',
+    'disabled:cursor-not-allowed',
+    'outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]',
+    '[&::-webkit-slider-runnable-track]:h-[var(--slider-track-thickness)] [&::-webkit-slider-runnable-track]:rounded-[var(--radius-control)] [&::-webkit-slider-runnable-track]:bg-control-border',
+    '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-[var(--slider-thumb-size)] [&::-webkit-slider-thumb]:rounded-[var(--radius-control)] [&::-webkit-slider-thumb]:bg-foreground',
+    '[&::-webkit-slider-thumb]:mt-[calc((var(--slider-track-thickness)-var(--slider-thumb-size))/2)]',
+    '[&:disabled::-webkit-slider-runnable-track]:bg-disabled [&:disabled::-webkit-slider-thumb]:bg-disabled',
+    '[&::-moz-range-track]:h-[var(--slider-track-thickness)] [&::-moz-range-track]:rounded-[var(--radius-control)] [&::-moz-range-track]:bg-control-border',
+    '[&::-moz-range-thumb]:size-[var(--slider-thumb-size)] [&::-moz-range-thumb]:rounded-[var(--radius-control)] [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-foreground',
+    '[&:disabled::-moz-range-track]:bg-disabled [&:disabled::-moz-range-thumb]:bg-disabled',
+  ].join(' '),
+);
+
+export interface ISliderProps {
+  /** The operating range's lower bound - interaction geometry, not a content rule (ADR 0009). */
+  min: number;
+  /** The operating range's upper bound. */
+  max: number;
+  /**
+   * The increment a movement produces. Defaults to 1: whole-step movement. Keeping `value` and
+   * `max` on the step grid is the caller's obligation - Slider neither rejects nor repairs an
+   * off-grid value, and the native control's own conduct stays observable: inside a surrounding
+   * form, misalignment counts as a `stepMismatch` against that form's validity.
+   */
+  step?: number;
+  /** The current value. Controlled - the consumer holds it and passes it back in. */
+  value: number;
+  /**
+   * Emits the new value on every native input event. Required, not optional: the control is
+   * controlled and takes no part in form submission, so a consumer that did not listen here
+   * could never read a value at all.
+   */
+  onInput$: Subject<number>;
+  /** The control's accessible name. */
+  label: string;
+  /**
+   * How the value is announced, in the consumer's wording ("$60 a week"). Left out, assistive
+   * technology reads the bare number: the library ships no wording of its own.
+   */
+  valueText?: string;
+  /** The explicit non-operable state: native disabled conduct, no emissions, disabled paint. */
+  disabled?: boolean;
+  testId?: string;
+}
+
+// Structural misconfiguration is a programmer error, so it fails fast - no clamping, no
+// normalization, no substitute emission. Step-grid alignment is deliberately not checked: that is
+// the caller's obligation, documented on `step`, and native constraint behaviour stays observable.
+const assertOperatingRange = (
+  range: Pick<Required<ISliderProps>, 'min' | 'max' | 'step' | 'value'>,
+): void => {
+  for (const [name, given] of Object.entries(range)) {
+    if (!Number.isFinite(given)) {
+      throw new SliderConfigurationError(
+        `\`${name}\` must be a finite number, got ${given}`,
+      );
+    }
+  }
+  if (range.min >= range.max) {
+    throw new SliderConfigurationError(
+      `\`min\` (${range.min}) must be below \`max\` (${range.max})`,
+    );
+  }
+  if (range.step <= 0) {
+    throw new SliderConfigurationError(
+      `\`step\` (${range.step}) must be positive`,
+    );
+  }
+  if (range.value < range.min || range.value > range.max) {
+    throw new SliderConfigurationError(
+      `\`value\` (${range.value}) must lie within [${range.min}, ${range.max}]`,
+    );
+  }
+};
+
+/**
+ * A control that sets one numeric value by moving one thumb along a fixed, visible operating
+ * range. Controlled: the consumer holds the value and passes it back in, and a value it does not
+ * pass back is never adopted. It renders the value nowhere - the consumer sets any figures beside
+ * it with typography - and it fills its container's width the way `Input` does. `disabled` is the
+ * explicit non-operable state.
+ */
+export const Slider: FunctionComponent<ISliderProps> = ({
+  min,
+  max,
+  step = 1,
+  value,
+  onInput$,
+  label,
+  valueText,
+  disabled,
+  testId,
+}) => {
+  assertOperatingRange({ min, max, step, value });
+  return (
+    <input
+      type={'range'}
+      className={slider()}
+      min={min}
+      max={max}
+      step={step}
+      value={value}
+      disabled={disabled}
+      aria-label={label}
+      aria-valuetext={valueText}
+      data-testid={testId}
+      // React's onChange rides the native input event, so every movement emits through here.
+      onChange={(event) => onInput$.next(event.currentTarget.valueAsNumber)}
+    />
+  );
+};

package/src/Interaction/Slider/SliderConfigurationError.ts

@@ -0,0 +1,6 @@
+export class SliderConfigurationError extends Error {
+  constructor(violation: string) {
+    super(`Slider configuration: ${violation}`);
+    this.name = 'SliderConfigurationError';
+  }
+}