@agent-ui-kit/components 0.0.3

package/dist/controls/slider/slider.css

@@ -0,0 +1,231 @@
+/* slider.css — ui-slider, the single-thumb Range-class control (range-element.lld.md · ADR-0042 · ADR-0041).
+ * Two clearly-SECTIONED blocks:
+ *
+ *   [1] TOKEN BLOCK  — `:where(ui-slider)` (specificity 0,0,0) DECLARES the `--ui-slider-*` chain from
+ *       the colour roles (`--md-sys-color-{family}-{role}`) and the compact widget ramp (`--md-sys-compact-{size}`,
+ *       ADR-0041). `[size]` repoints the box token; `[disabled]` mutes to neutral roles. No `color-mix`
+ *       — colour opinions live in the token layer (ADR-0008). `--ui-slider-rail-height` is a thin fleet
+ *       constant (3px), NOT widget-box derived — the rail height does NOT scale with the thumb box.
+ *   [2] STYLES BLOCK — `@scope (ui-slider)` CONSUMES only `--ui-slider-*` for its OWN tokens. The host
+ *       is a `block` container: its block-size = the widget box (`--md-sys-compact-{size}`). The RAIL (`::before`)
+ *       is a thin horizontal bar, full-width, vertically centred, with a gradient fill from the primary
+ *       colour up to `--value-pct %` and neutral beyond — one declaration paints both the fill and the
+ *       remainder. The THUMB (`::after`) is a circle `box − 2×inset = box − 4px` (ADR-0041 cl.3: the
+ *       two-pixel inset law) centred vertically and positioned horizontally at `calc(--value-pct * 1%)`
+ *       with `transform: translate(-50%, -50%)` so the circle centre lands on that percentage of the host.
+ *       `--value-pct` is a UNITLESS number (0–100) set by UIRangeElement on the host inline style.
+ *       `:focus-visible` ring (keyboard-only, ADR-0009). Forced-colors safe. Density-invariant.
+ *
+ * Standalone stylesheet — linked via the host page / component-styles barrel; NEVER injected from
+ * slider.ts (behaviour-only `.ts`, no runtime style injection — plan §2).
+ *
+ * 2026-07-07 fix (Kim-filed visual bug): the dark-mode thumb "blends into its surroundings." Measured
+ * root cause — NOT the fill/rail pair ADR-0059 already verified (those still clear 3:1: 4.79:1 light /
+ * 3.67:1 dark vs fill, 5.66:1 / 4.41:1 vs rail; unchanged below). The thumb is TALLER than the 3px rail,
+ * so most of its perimeter borders the general PAGE SURFACE, not the rail/fill — a dimension ADR-0059
+ * never measured (switch's thumb never has this problem: its track fills the FULL switch height, so no
+ * "outside the track" area exists). Measured: dark-mode `--md-sys-color-neutral-surface-brightest`
+ * (neutral-800, the SAME stop as `--md-sys-color-neutral-surface-highest`) vs the dark surface ladder it
+ * actually sits on (neutral-800…950) is only **1.09–1.46:1** — it nearly matches the page's own darkest
+ * surface tones by construction. Kim's literal ask ("use onPrimary like the switch") does NOT fix this and
+ * REGRESSES the already-solved rail case: `--md-sys-color-primary-on-primary` is a FLAT white in both
+ * schemes (unlike this scheme-adaptive thumb), and against the dark-mode rail (neutral-400, itself
+ * deliberately brightened by ADR-0059) a flat white thumb measures only **2.76:1** — an SC 1.4.11
+ * regression below the rail's own contrast floor. Rejected for the same reason: no single flat thumb fill
+ * can simultaneously clear 3:1 against the dark rail (needs thumb luminance ≤ ~0.077) AND against the
+ * dark surface ladder (needs thumb luminance ≥ ~0.21 to clear the brightest dark surface plane) — those
+ * two floors don't overlap with the current rail/surface tokens (verified via the OKLCH→linear-sRGB→WCAG
+ * path `tokens.test.ts` already uses). Fix: leave the interior fill (`--ui-slider-thumb`) UNTOUCHED — it
+ * already carries the ADR-0059-verified fill/rail contrast — and add a second, independent ring layer
+ * (`--ui-slider-thumb-ring`, a `border` on `::after`) using `--md-sys-color-neutral-on-surface` (the fleet's
+ * own page-ink role, AA-verified against every surface plane by `tokens.test.ts`). The ring is BRIGHT in
+ * dark mode (near-white) and dark in light mode — giving the thumb the switch's "bright accent" signature
+ * in the register (surface-adjacent) where it was actually failing, without touching the fill's proven-safe
+ * contrast against the rail/fill it was tuned for. Recorded in ADR-0094 (2026-07-07, extends ADR-0059) —
+ * the thumb-vs-PAGE-SURFACE dimension is part of its three-backdrop thumb contrast contract.
+ */
+
+/* ════════════════ [1] TOKEN BLOCK — :where(ui-slider) declares --ui-slider-* ════════════════ */
+
+:where(ui-slider) {
+  /* Box geometry — the compact widget-box ramp step (ADR-0041; default size = md). `[size]` repoints. */
+  --ui-slider-box: var(--md-sys-compact-md);
+
+  /* Rail colour — the unselected portion of the track. A state-bearing control part → the SOLID
+     --md-sys-color-neutral-track (SC 1.4.11 3:1 vs every surface plane), NOT the old translucent
+     --md-sys-color-neutral-outline-variant which composited to 1.51:1 light / 1.73:1 dark (an SC 1.4.11 fail — at
+     value 0 the whole track went near-invisible). The fill↔rail luminance boundary is intentionally low
+     (primary and neutral are L-close) — the VALUE is carried by the high-contrast THUMB, which clears 3:1
+     against both the fill (4.79/3.67) and this rail (4.69/3.74). 2026-07-02 color audit item 4 · ADR-0059. */
+  --ui-slider-rail: var(--md-sys-color-neutral-track);
+
+  /* Fill colour — the selected portion (min → value), primary family. */
+  --ui-slider-fill: var(--md-sys-color-primary);
+
+  /* Thumb colour — the drag handle, brightest neutral surface (≈ white on light; dark on dark).
+     Verified vs fill/rail (ADR-0059) — untouched by the 2026-07-07 ring fix below. */
+  --ui-slider-thumb: var(--md-sys-color-neutral-surface-brightest);
+
+  /* Thumb RING (2026-07-07 fix) — a border layer independent of the fill, using the fleet's page-ink
+     role (`--md-sys-color-neutral-on-surface`: dark in light mode, bright/white in dark mode — AA-verified
+     against every surface plane by tokens.test.ts). Covers the thumb-vs-PAGE-SURFACE contrast dimension
+     the fill alone can't (see the file-header note): most of the thumb's perimeter borders the general
+     surface, not the thin rail, and in dark mode the fill alone measured only 1.09–1.46:1 there. */
+  --ui-slider-thumb-ring: var(--md-sys-color-neutral-on-surface);
+
+  /* Rail height — thin constant, NOT derived from the widget box (ADR-0041 geometry: the inset law
+     governs the THUMB size only; the rail is a separate cosmetic layer). 3px reads cleanly at all
+     widget-box sizes (12–28 px). */
+  --ui-slider-rail-height: 3px;
+}
+
+/* [size] → compact widget ramp repoint (ADR-0041: the per-[scale] table in dimensions.css re-tables
+   --md-sys-compact-{sm,md,lg}; `[size]` on the host picks which step the slider box targets). */
+:where(ui-slider[size='sm']) {
+  --ui-slider-box: var(--md-sys-compact-sm);
+}
+:where(ui-slider[size='lg']) {
+  --ui-slider-box: var(--md-sys-compact-lg);
+}
+
+/* [disabled] → muted neutral roles for rail, fill, and thumb. The state holds at idle: the styles
+   block sets `pointer-events: none` so `:hover` never matches, preventing any token lift. The rail
+   deliberately stays the translucent --md-sys-color-neutral-outline-variant (NOT the solid --md-sys-color-neutral-track): a
+   disabled/inactive component is SC 1.4.11-EXEMPT, and the muted rail correctly reads as inactive. */
+:where(ui-slider[disabled]) {
+  --ui-slider-rail: var(--md-sys-color-neutral-outline-variant);
+  --ui-slider-fill: var(--md-sys-color-neutral-surface-high);
+  --ui-slider-thumb: var(--md-sys-color-neutral-on-surface-variant);
+  --ui-slider-thumb-ring: var(--md-sys-color-neutral-on-surface-variant); /* SC 1.4.11-exempt; matches fill, no separate ring emphasis */
+}
+
+/* ════════════════ [2] STYLES BLOCK — @scope (ui-slider) consumes ONLY --ui-slider-* ════════════════ */
+
+@scope (ui-slider) {
+  /* Host: a block container whose block-size equals the widget box (the interactive hit area is the
+     full height of the slider, spanning the thumb diameter). `position: relative` is the containing
+     block for both the rail and thumb absolute pseudo-elements. `touch-action: none` prevents the
+     browser from claiming pointer events for scroll/pan while a drag is in progress. */
+  :scope {
+    display: block;
+    position: relative;
+    /* A slider is a HORIZONTAL track — without an intrinsic width it collapses to the thumb (a dot) in
+       a shrink-wrapping flex/inline context (the same failure class as ui-text-field #74). A
+       min-inline-size floor prevents the collapse; above it, width is the layout's job. */
+    min-inline-size: var(--ui-slider-min-inline-size, 12rem);
+    block-size: var(--ui-slider-box);
+    cursor: pointer;
+    touch-action: none; /* give pointer events exclusively to the slider during drag (no scroll-conflict) */
+    -webkit-user-select: none; /* WebKit/Safari still requires the prefix */
+    user-select: none;
+  }
+
+  /* RAIL (::before) — thin horizontal bar, full-width, centred in the block dimension.
+     A single `background: linear-gradient` paints BOTH the fill (primary, from 0 to --value-pct%)
+     and the remaining rail (neutral, from --value-pct% to 100%). `--value-pct` is a unitless number
+     (0–100) so `calc(var(--value-pct, 0) * 1%)` converts it to a CSS percentage. No `color-mix` —
+     fill and rail are distinct colour roles (ADR-0008). No position transition: the fill updates in
+     real-time during drag; animating a gradient can lag. Background-color transitions (disabled↔enabled
+     state) could be added here but are omitted — the rail gradient change is instant. */
+  :scope::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    inset-inline-start: 0;
+    inline-size: 100%;
+    block-size: var(--ui-slider-rail-height);
+    border-radius: calc(var(--ui-slider-rail-height) / 2);
+    background: linear-gradient(
+      to right,
+      var(--ui-slider-fill) calc(var(--value-pct, 0) * 1%),
+      var(--ui-slider-rail) calc(var(--value-pct, 0) * 1%)
+    );
+  }
+
+  /* THUMB (::after) — a circle inset by --md-sys-widget-inset (2px) on all sides (ADR-0041 cl.3).
+   *
+   * Size:     thumb = box − 2×inset = box − 4px (the two-pixel inset law, density-invariant flat fleet constant).
+   * Block:    inset-block-start: 50% places the top edge at 50% of the host height; `transform: translate(-50%,
+   *           -50%)` shifts the element back by half its own height and width, so its CENTRE lands at (50% of
+   *           host height, --value-pct% of host width) — vertically centred in the widget box.
+   * Inline:   inset-inline-start: calc(var(--value-pct, 0) * 1%) positions the left edge at N% of the host;
+   *           the -50% X component of the same translate() centres the circle on that point. At value-pct=0
+   *           and 100 the thumb centre is exactly on the host edge (slight overhang of radius; standard slider
+   *           behaviour, no overflow clipping needed for the interaction — the hit area is the full host).
+   *
+   * Motion: NO position transition (drag lag). Background-color transitions for disabled/enabled state.
+   *         Transition is zeroed under prefers-reduced-motion (accessibility non-negotiable).
+   *
+   * Ring: a 2px border in `--ui-slider-thumb-ring` (2026-07-07 fix, see file header) — box-sizing:
+   * border-box keeps the OUTER diameter at the ADR-0041 cl.3 box−4px law (the border eats into the fill,
+   * it never grows the box), so the size proof above is unaffected; the border simply repaints the outer
+   * rim in the ink role, giving the thumb a contrast layer independent of its own interior fill. */
+  :scope::after {
+    content: '';
+    position: absolute;
+    box-sizing: border-box;
+
+    /* ADR-0041 cl.3: thumb = box − 2×inset = box − 4px */
+    --ui-slider-thumb-size: calc(var(--ui-slider-box) - 2 * var(--md-sys-widget-inset));
+    inline-size: var(--ui-slider-thumb-size);
+    block-size: var(--ui-slider-thumb-size);
+    border-radius: 50%; /* circle */
+
+    background: var(--ui-slider-thumb);
+    border: 2px solid var(--ui-slider-thumb-ring);
+
+    /* Centre the thumb circle on the point (--value-pct% of host width, 50% of host height). */
+    inset-block-start: 50%;
+    inset-inline-start: calc(var(--value-pct, 0) * 1%);
+    transform: translate(-50%, -50%);
+
+    transition:
+      background-color var(--md-sys-motion-duration-fast) var(--md-sys-motion-easing-standard),
+      border-color var(--md-sys-motion-duration-fast) var(--md-sys-motion-easing-standard);
+  }
+
+  /* Focus ring (ADR-0009) — the shared fleet ring: `:focus-visible` (keyboard-only). Surrounds the
+     whole control (host box), the fleet standard. Reads fleet-wide tokens directly — the one deliberate
+     exception to "consume only --ui-slider-*", matching the checkbox/switch pattern. */
+  :scope:focus-visible {
+    outline: var(--md-sys-state-focus-ring-width) solid var(--md-sys-color-focus-ring);
+    outline-offset: var(--md-sys-state-focus-ring-offset);
+  }
+
+  /* Reduced motion — zero ALL transitions (accessibility non-negotiable). */
+  @media (prefers-reduced-motion: reduce) {
+    :scope::after {
+      transition: none;
+    }
+  }
+
+  /* Disabled — pointer-inert + cursor reset. The [disabled] token block already muted the colours;
+     `pointer-events: none` ensures `:hover` never matches (muted tokens hold at idle forever). */
+  :scope[disabled] {
+    pointer-events: none;
+    cursor: default;
+  }
+
+  /* Forced-colors — map the rail and thumb to system colours so the slider survives high-contrast mode.
+     The rail gradient uses Highlight for the fill and ButtonText for the track; the thumb uses Canvas
+     with a Highlight border so the handle is distinct from the fill.
+     `forced-color-adjust: none` preserves our explicit system-colour mappings, preventing the browser
+     from re-overriding them (same pattern as switch.css / checkbox.css — ADR-0009 ring is free via
+     --md-sys-color-focus-ring → Highlight from the token layer). */
+  @media (forced-colors: active) {
+    :scope::before {
+      background: linear-gradient(
+        to right,
+        Highlight calc(var(--value-pct, 0) * 1%),
+        ButtonText calc(var(--value-pct, 0) * 1%)
+      );
+      forced-color-adjust: none;
+    }
+    :scope::after {
+      background: Canvas;
+      border: 2px solid Highlight;
+      forced-color-adjust: none;
+    }
+  }
+}

package/dist/controls/slider/slider.d.ts

@@ -0,0 +1,111 @@
+import { type ReactiveProps } from '../../dom/index.js';
+import { UIRangeElement } from '../_base/range-element.js';
+declare const sliderProps: {
+    min: {
+        reflect: true;
+        type: import("../../index.js").PropType<number | null>;
+        default: number | null;
+        attribute?: string | false;
+    };
+    max: {
+        reflect: true;
+        type: import("../../index.js").PropType<number | null>;
+        default: number | null;
+        attribute?: string | false;
+    };
+    step: {
+        reflect: true;
+        type: import("../../index.js").PropType<number | null>;
+        default: number | null;
+        attribute?: string | false;
+    };
+    value: {
+        reflect: true;
+        type: import("../../index.js").PropType<number | null>;
+        default: number | null;
+        attribute?: string | false;
+    };
+    size: {
+        reflect: true;
+        type: import("../../index.js").PropType<"sm" | "md" | "lg">;
+        default: "sm" | "md" | "lg";
+        attribute?: string | false;
+    };
+    name: {
+        reflect: true;
+        type: import("../../index.js").PropType<string>;
+        default: string;
+        attribute?: string | false;
+    };
+    disabled: {
+        reflect: true;
+        type: import("../../index.js").PropType<boolean>;
+        default: boolean;
+        attribute?: string | false;
+    };
+    required: {
+        reflect: true;
+        type: import("../../index.js").PropType<boolean>;
+        default: boolean;
+        attribute?: string | false;
+    };
+};
+export interface UISliderElement extends ReactiveProps<typeof sliderProps> {
+}
+export declare class UISliderElement extends UIRangeElement {
+    static props: {
+        min: {
+            reflect: true;
+            type: import("../../index.js").PropType<number | null>;
+            default: number | null;
+            attribute?: string | false;
+        };
+        max: {
+            reflect: true;
+            type: import("../../index.js").PropType<number | null>;
+            default: number | null;
+            attribute?: string | false;
+        };
+        step: {
+            reflect: true;
+            type: import("../../index.js").PropType<number | null>;
+            default: number | null;
+            attribute?: string | false;
+        };
+        value: {
+            reflect: true;
+            type: import("../../index.js").PropType<number | null>;
+            default: number | null;
+            attribute?: string | false;
+        };
+        size: {
+            reflect: true;
+            type: import("../../index.js").PropType<"sm" | "md" | "lg">;
+            default: "sm" | "md" | "lg";
+            attribute?: string | false;
+        };
+        name: {
+            reflect: true;
+            type: import("../../index.js").PropType<string>;
+            default: string;
+            attribute?: string | false;
+        };
+        disabled: {
+            reflect: true;
+            type: import("../../index.js").PropType<boolean>;
+            default: boolean;
+            attribute?: string | false;
+        };
+        required: {
+            reflect: true;
+            type: import("../../index.js").PropType<boolean>;
+            default: boolean;
+            attribute?: string | false;
+        };
+    };
+    static role: string;
+    protected _releaseDrag: (() => void);
+    protected connected(): void;
+    protected disconnected(): void;
+}
+export {};

package/dist/controls/slider/slider.js

@@ -0,0 +1,60 @@
+// slider.ts — UISliderElement, the single-thumb Range-class control (range-element.lld.md · ADR-0042 · ADR-0041).
+// Extends UIRangeElement which owns: the numeric value model + clamp/snap (LLD-C1), the ARIA slider
+// semantics (LLD-C2), keyboard step (LLD-C3), and the --value-pct geometry seam (LLD-C5). The leaf adds:
+//   • `static role = 'slider'` — confirmatory; the base sets internals.role='slider' directly in connected()
+//   • connected(): tabbable (keyboard focus) + valueDrag wiring (LLD-C4, one thumb at --value-pct)
+//   • slider.css — the rail (thin fill line) + thumb circle (box − 4px at --value-pct, ADR-0041 cl.3)
+//   • self-define as ui-slider
+//
+// All props (value / min / max / step / size / name / disabled / required) are inherited via the
+// UIRangeElement.props spread. Zero-dep; controls → dom+traits inward only (✓); erasableSyntaxOnly ✓.
+import {} from "../../dom/index.js";
+import { UIRangeElement } from "../_base/range-element.js";
+import { tabbable } from "../../traits/tabbable.js";
+import { valueDrag } from "../../traits/value-drag.js";
+// All props are inherited from UIRangeElement — spread into a local constant so UISliderElement
+// carries its OWN static props (ADR-0013: static props cannot be inherited via the prototype chain;
+// the spread is the documented workaround, matching how UICheckboxElement spreads UIIndicatorElement.props).
+const sliderProps = {
+    ...UIRangeElement.props,
+};
+export class UISliderElement extends UIRangeElement {
+    static props = sliderProps;
+    // LLD-C2 subclass contract: the role this leaf carries. The base hardcodes `this.internals.role =
+    // 'slider'` in connected() rather than reading a static field, so this declaration is confirmatory.
+    static role = 'slider';
+    // Connection-scoped valueDrag cleanup — re-assigned on each reconnect (connected() re-runs).
+    // Protected so test probes can call it directly to verify idempotent release (G6 DoD, decomp S1).
+    _releaseDrag = () => { };
+    connected() {
+        super.connected(); // base: normaliser · ARIA (ariaValueNow/Min/Max) · --value-pct seam · keyboard step
+        // Keyboard-focusable while enabled; removed from the tab order while disabled (ADR-0010).
+        tabbable(this, { disabled: () => this.effectiveDisabled() });
+        // LLD-C4: wire the pointer→value gesture controller. The host IS the interactive track surface
+        // (light-DOM — no child track element); opts.track() is re-read on each pointerdown so reconnect
+        // always resolves the live element. Emits `input` on each stepped value change; `change` is emitted
+        // by the base on blur when value has moved since focus (the base's commit-on-blur contract).
+        this._releaseDrag = valueDrag(this, {
+            track: () => this,
+            min: () => this.min ?? 0,
+            max: () => this.max ?? 100,
+            step: () => this.step ?? 1,
+            onValue: (v) => {
+                if (!Object.is(v, this.value ?? 0)) {
+                    this.value = v;
+                    this.emit('input');
+                }
+            },
+        });
+    }
+    disconnected() {
+        // Explicitly release the valueDrag binding so its closure is marked released — the slider-multi
+        // shape, adopted here by the TKT-0068 item 1 ruling (the connection AbortController removes the
+        // outer pointerdown listener, but `released = true` is a belt-and-suspenders guard against any
+        // edge case where the outer listener fires after abort). Idempotent: releasing twice is a no-op.
+        this._releaseDrag();
+        this._releaseDrag = () => { };
+    }
+}
+if (!customElements.get('ui-slider'))
+    customElements.define('ui-slider', UISliderElement);

package/dist/controls/slider-multi/slider-multi.css

@@ -0,0 +1,197 @@
+/* slider-multi.css — ui-slider-multi, the dual-thumb Range-class control stylesheet (decomp S2 · ADR-0042 · ADR-0041).
+ * Two clearly-SECTIONED blocks:
+ *
+ *   [1] TOKEN BLOCK  — `:where(ui-slider-multi)` (specificity 0,0,0) DECLARES the `--ui-slider-multi-*`
+ *       chain from the colour roles (`--md-sys-color-{family}-{role}`) and the compact widget ramp
+ *       (`--md-sys-compact-{size}` / ADR-0041). `[size]` repoints the box token (the widget ramp step);
+ *       `[disabled]` mutes the rail/fill/thumb colours to the neutral muted family.
+ *       No `color-mix` — colour opinions live in the token layer (ADR-0008).
+ *   [2] STYLES BLOCK — `@scope (ui-slider-multi)` CONSUMES only `--ui-slider-multi-*` for its OWN
+ *       tokens. The host is a block-level flex column that sizes to its content; the RAIL (.rail) is a
+ *       thin horizontal bar inside the interactive-box-height container; the FILL (.fill) spans lo→hi
+ *       using `--value-pct-lo`/`--value-pct-hi` (set by the JS geometry seam); each THUMB (.thumb) is
+ *       a circle `box − 4px` = `box − 2×--md-sys-widget-inset` (ADR-0041 cl.3: the 2px-inset law) positioned
+ *       absolutely on the rail by `left: calc(var(--value-pct-{lo|hi}) * 1%)`.
+ *       `:focus-visible` ring (keyboard-only, ADR-0009). Unconditional transitions + reduced-motion
+ *       (the Indicator/Range family pattern — NO :state(ready) gate; ADR-0042 LLD-C6). Forced-colors safe.
+ *       Density-invariant (box/thumb scale with `--md-sys-compact-{size}`, never a raw px override here).
+ *
+ * Standalone stylesheet — linked via the host page / component-styles barrel (Phase 2); NEVER injected
+ * from slider-multi.ts (behaviour-only `.ts`, no runtime style injection — plan §2).
+ */
+
+/* ════════════════ [1] TOKEN BLOCK — :where(ui-slider-multi) declares --ui-slider-multi-* ════════════════ */
+
+:where(ui-slider-multi) {
+  /* Box geometry — the compact widget-box ramp step (ADR-0041; default size = md). `[size]` repoints.
+     The box drives the thumb size (box − 4px) and the host's interactive-area height. */
+  --ui-slider-multi-box: var(--md-sys-compact-md);
+
+  /* Rail colour — the unfilled background track (muted neutral outline, same as switch unchecked track). */
+  --ui-slider-multi-rail: var(--md-sys-color-neutral-outline-variant);
+
+  /* Fill colour — the lo→hi active range (primary, matching the single-slider convention). */
+  --ui-slider-multi-fill: var(--md-sys-color-primary);
+
+  /* Thumb colours — surface + border. The thumb is a bright circle outlined in primary. */
+  --ui-slider-multi-thumb:        var(--md-sys-color-neutral-surface-brightest);
+  --ui-slider-multi-thumb-border: var(--md-sys-color-primary);
+
+  /* Focus ring — tunnelled through a component token so the full token chain is local.
+     The fleet ring constant (--md-sys-color-focus-ring) flows through here; override only this token
+     to remap the focus colour for this component (WHCM: --md-sys-color-focus-ring → Highlight). */
+  --ui-slider-multi-focus-ring: var(--md-sys-color-focus-ring);
+}
+
+/* [size] → compact widget ramp repoint (ADR-0041: the LITERAL per-[scale] table in dimensions.css
+   re-tables --md-sys-compact-{sm,md,lg}; `[size]` on the host picks which step the slider box targets). */
+:where(ui-slider-multi[size='sm']) { --ui-slider-multi-box: var(--md-sys-compact-sm); }
+:where(ui-slider-multi[size='lg']) { --ui-slider-multi-box: var(--md-sys-compact-lg); }
+
+/* [disabled] → muted neutral roles (overrides all states). HOLDS at idle: the disabled host is
+   pointer-inert (styles block), so `:hover` never matches it (ADR-0008 disabled pattern). */
+:where(ui-slider-multi[disabled]) {
+  --ui-slider-multi-rail:         var(--md-sys-color-neutral-surface-high);
+  --ui-slider-multi-fill:         var(--md-sys-color-neutral-surface-high);
+  --ui-slider-multi-thumb:        var(--md-sys-color-neutral-on-surface-variant);
+  --ui-slider-multi-thumb-border: var(--md-sys-color-neutral-outline-variant);
+}
+
+/* ════════════════ [2] STYLES BLOCK — @scope (ui-slider-multi) consumes ONLY --ui-slider-multi-* ════════════════ */
+
+@scope (ui-slider-multi) {
+  /* Host: block container that centres the rail vertically within the interactive box height.
+     display:flex + align-items:center means the rail aligns to the middle of the box,
+     and the absolutely-positioned thumbs extend out from the rail's midline. */
+  :scope {
+    display: flex;
+    align-items: center;
+    /* A range slider is a HORIZONTAL track — without an intrinsic width it collapses to the thumbs (dots)
+       in a shrink-wrapping flex/inline context (ui-text-field #74 failure class). Floor the inline-size. */
+    min-inline-size: var(--ui-slider-multi-min-inline-size, 12rem);
+    block-size: var(--ui-slider-multi-box);    /* interactive box = compact widget ramp step (ADR-0041) */
+    position: relative;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    /* The host is the outer sizing container for left:X% on the thumbs (via .rail containing block). */
+  }
+
+  /* RAIL (.rail) — the thin horizontal track bar. Fills the full inline width of the host. Position:
+     relative makes the rail the containing block for the fill and thumb absolute children.
+     block-size = box/4 ≈ 4px at md scale — the slot height, not the interactive area. */
+  .rail {
+    position: relative;
+    flex: 1;
+    block-size: calc(var(--ui-slider-multi-box) / 4);
+    border-radius: 999px;                       /* pill — fully rounded ends */
+    background: var(--ui-slider-multi-rail);
+    overflow: visible;                          /* thumbs extend beyond the rail's block-size */
+  }
+
+  /* FILL (.fill) — the lo→hi active range highlight. Absolutely positioned within the rail.
+   * inset-block: 0 stretches it to the full rail height; inset-inline-start + inline-size
+   * map the [lo, hi] interval:
+   *   left edge  = --value-pct-lo × 1%  (of the rail width)
+   *   right edge = (100 − --value-pct-hi) × 1% from the end
+   *
+   * Transitions: the fill endpoints animate on value change (unconditional; the Indicator/Range
+   * pattern — no :state(ready) gate, ADR-0042 LLD-C6). Suppressed under prefers-reduced-motion. */
+  .fill {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--value-pct-lo, 0) * 1%);
+    /* inline-size spans from lo% to hi% of the rail */
+    inline-size: calc((var(--value-pct-hi, 100) - var(--value-pct-lo, 0)) * 1%);
+    background: var(--ui-slider-multi-fill);
+    border-radius: 999px;
+    pointer-events: none;                       /* the fill is purely decorative — thumbs capture pointer */
+    transition:
+      inset-inline-start var(--md-sys-motion-duration-fast) var(--md-sys-motion-easing-standard),
+      inline-size        var(--md-sys-motion-duration-fast) var(--md-sys-motion-easing-standard),
+      background-color   var(--md-sys-motion-duration-fast) var(--md-sys-motion-easing-standard);
+  }
+
+  /* THUMBS (.thumb) — circles inset 2px (--md-sys-widget-inset) inside the widget box (ADR-0041 cl.3).
+   *
+   * Size:   thumb = box − 2×inset = box − 4px (the ADR-0041 2px-inset law).
+   * Block:  top:50% + transform:translateY(-50%) centres the thumb on the rail's midline.
+   * Inline: left is set per data-thumb (lo/hi) using the --value-pct-* geometry custom property:
+   *           `left: calc(var(--value-pct-{thumb}) * 1%)`
+   *         translateX(-50%) on the transform centres the circle on the computed position.
+   *
+   * Motion: `translate` / `left` transitions animate the thumb slide — paint-only transforms.
+   *         Suppressed under prefers-reduced-motion. */
+  .thumb {
+    position: absolute;
+
+    /* ADR-0041 cl.3: thumb = box − 2×inset = box − 4px */
+    --ui-slider-multi-thumb-size: calc(var(--ui-slider-multi-box) - 2 * var(--md-sys-widget-inset));
+    inline-size: var(--ui-slider-multi-thumb-size);
+    block-size:  var(--ui-slider-multi-thumb-size);
+    border-radius: 50%;                         /* circle */
+    box-sizing: border-box;
+
+    top: 50%;
+    transform: translateY(-50%) translateX(-50%);
+
+    border: 2px solid var(--ui-slider-multi-thumb-border);
+    background: var(--ui-slider-multi-thumb);
+    cursor: pointer;
+
+    transition:
+      left             var(--md-sys-motion-duration-fast) var(--md-sys-motion-easing-standard),
+      background-color var(--md-sys-motion-duration-fast) var(--md-sys-motion-easing-standard),
+      border-color     var(--md-sys-motion-duration-fast) var(--md-sys-motion-easing-standard);
+  }
+
+  /* Per-thumb inline position — driven by the JS geometry seam (--value-pct-lo / --value-pct-hi set via
+     element.style on the host; they cascade into this @scope as inherited custom properties). */
+  .thumb[data-thumb='lo'] { left: calc(var(--value-pct-lo, 0) * 1%); }
+  .thumb[data-thumb='hi'] { left: calc(var(--value-pct-hi, 100) * 1%); }
+
+  /* Focus ring (ADR-0009) — shared fleet ring on keyboard-focused thumbs. Applied via :focus-visible
+     (keyboard-only) directly on the thumb element since the thumbs ARE the focusable nodes.
+     Consumes the local --ui-slider-multi-focus-ring (declared in the token block, chained from
+     --md-sys-color-focus-ring) — the full token chain is now component-local, no direct fleet reference here. */
+  .thumb:focus-visible {
+    outline: var(--md-sys-state-focus-ring-width) solid var(--ui-slider-multi-focus-ring);
+    outline-offset: var(--md-sys-state-focus-ring-offset);
+  }
+
+  /* Reduced motion — zero all transitions on the fill and thumbs (accessibility non-negotiable;
+     geometry.md: NEVER animate the ramp; the Indicator/Range unconditional-transitions contract). */
+  @media (prefers-reduced-motion: reduce) {
+    .fill  { transition: none; }
+    .thumb { transition: none; }
+  }
+
+  /* Disabled host — pointer-inert so :hover/:active never lift the muted neutral tokens. */
+  :scope[disabled] {
+    pointer-events: none;
+    cursor: default;
+  }
+
+  /* forced-colors — keep the rail, fill, and thumbs visible as system-colour elements.
+     forced-color-adjust:none preserves our explicit system-colour mappings so the browser does not
+     re-override them (matches switch.css / checkbox.css pattern for the range family). */
+  @media (forced-colors: active) {
+    .rail {
+      border: 2px solid ButtonText;
+      background: Canvas;
+      forced-color-adjust: none;
+    }
+    .fill {
+      background: Highlight;
+      forced-color-adjust: none;
+    }
+    .thumb {
+      border: 2px solid ButtonText;
+      background: ButtonFace;
+      forced-color-adjust: none;
+    }
+    .thumb:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+}