@marianmeres/stuic 3.144.0 → 3.145.0

package/AGENTS.md

@@ -23,7 +23,7 @@
 
 ```
 src/lib/
-├── components/     # 57 component directories
+├── components/     # 63 component directories
 ├── actions/        # 15 Svelte actions (use: directives)
 ├── attachments/    # Svelte attachments ({@attach} — preferred for new DOM helpers)
 ├── utils/          # 44 utility modules
@@ -128,7 +128,7 @@ Global tokens that control cross-component visual properties. Defined in `src/li
 
 ### Domain Docs
 
-- [Components](./docs/domains/components.md) — 57 component directories, Props pattern, snippets
+- [Components](./docs/domains/components.md) — 63 component directories, Props pattern, snippets
 - [Theming](./docs/domains/theming.md) — CSS tokens, dark mode, themes
 - [Actions](./docs/domains/actions.md) — 15 Svelte directives
 - [Attachments](./docs/domains/attachments.md) — `{@attach}` DOM helpers (preferred for new ones)

package/API.md

@@ -2178,6 +2178,7 @@ Each component defines customization tokens. Override globally in `:root {}` or
 | ------------------ | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Button             | `--stuic-button-*`              | `bg`, `text`, `border`, `ring-color`, `radius`, `padding-x-{size}`                                                                                                                                                            |
 | Switch             | `--stuic-switch-*`              | `accent`                                                                                                                                                                                                                      |
+| Slider             | `--stuic-slider-*`              | `track`, `fill`, `thumb`, `tick`, `tick-on-fill`, `thickness`, `length`, `radius`, `fill-radius`                                                                                                                              |
 | Input              | `--stuic-input-*`               | `accent`, `accent-error`                                                                                                                                                                                                      |
 | Progress           | `--stuic-progress-*`            | `bg`, `accent`                                                                                                                                                                                                                |
 | ListItemButton     | `--stuic-list-item-button-*`    | `bg`, `text`, `border`, `bg-hover`, `text-hover`                                                                                                                                                                              |

package/README.md

@@ -175,7 +175,7 @@ FieldInput, FieldMoney, FieldTextarea, FieldSelect, FieldCheckbox, FieldRadios,
 
 ### Buttons & Controls
 
-Button, ButtonGroupRadio, Switch, TwCheck, ListItemButton, X
+Button, ButtonGroupRadio, Switch, Slider, TwCheck, ListItemButton, X
 
 ### Feedback & Notifications
 

package/dist/components/Slider/README.md

@@ -0,0 +1,205 @@
+# Slider
+
+A fancy `input[type="range"]` wrap — a pill-shaped track that fills with the value, with
+an optional icon-capable thumb riding the fill edge (think iOS volume control). Supports
+horizontal and vertical orientation, pointer dragging with step snapping, native keyboard
+interaction, tick marks, a floating value label, form participation, and validation.
+
+Not a replacement for `FieldInput type="range"` — this is the special-case "fancy"
+variant for custom UI (volume/brightness controls, dashboards, media players).
+
+## Props
+
+| Prop            | Type                                                               | Default        | Description                                                                                                                                      |
+| --------------- | ------------------------------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`         | `number`                                                           | `min`          | Current value (bindable; non-finite / out-of-range / off-grid writes are normalized back)                                                        |
+| `min`           | `number`                                                           | `0`            | Minimum value                                                                                                                                    |
+| `max`           | `number`                                                           | `100`          | Maximum value                                                                                                                                    |
+| `step`          | `number \| "any"`                                                  | `1`            | Snap increment (`"any"` or non-positive = continuous)                                                                                            |
+| `orientation`   | `"horizontal" \| "vertical"`                                       | `"horizontal"` | Slider direction (vertical fills bottom-up)                                                                                                      |
+| `size`          | `"sm" \| "md" \| "lg" \| string`                                   | `"md"`         | Cross-axis thickness preset                                                                                                                      |
+| `intent`        | `"primary" \| "accent" \| "success" \| "warning" \| "destructive"` | -              | Semantic fill color                                                                                                                              |
+| `thumb`         | `boolean \| Snippet<[SliderRenderCtx]>`                            | `true`         | `false` hides the thumb (fill-only look), snippet renders inside thumb                                                                           |
+| `thumbPosition` | `"value" \| "start"`                                               | `"value"`      | `"value"` rides the fill edge; `"start"` pins it to the left/bottom so only the bar moves (true iOS volume look)                                 |
+| `fillRounded`   | `boolean`                                                          | `false`        | Round the fill's leading edge ("pill inside a pill")                                                                                             |
+| `ticks`         | `boolean \| number[]`                                              | -              | `true` = tick at every `step` (positive numeric step only; skipped above 101 auto ticks — pass an array), array = ticks at given in-range values |
+| `valueLabel`    | `Snippet<[SliderRenderCtx]>`                                       | -              | Floating label at the current value along the track                                                                                              |
+| `disabled`      | `boolean`                                                          | `false`        | Disable interaction                                                                                                                              |
+| `label`         | `string`                                                           | -              | Screen reader label for the underlying input                                                                                                     |
+| `id`            | `string`                                                           | -              | Id for the underlying input (enables `<label for>` association)                                                                                  |
+| `name`          | `string`                                                           | -              | Form field name for the hidden range input                                                                                                       |
+| `required`      | `boolean`                                                          | `false`        | Forwarded to the input; per HTML spec inert on range inputs (use `validate.customValidator` for custom rules)                                    |
+| `oninput`       | `(value: number) => void`                                          | -              | Fires on every value change (drag, keyboard)                                                                                                     |
+| `onchange`      | `(value: number) => void`                                          | -              | Fires when a change is committed (drag release, keyboard)                                                                                        |
+| `validate`      | `boolean \| ValidateOptions`                                       | -              | Enable validation (stuic validate action)                                                                                                        |
+| `unstyled`      | `boolean`                                                          | `false`        | Skip all default styling                                                                                                                         |
+| `class`         | `string`                                                           | -              | Classes for the root element                                                                                                                     |
+| `trackClass`    | `string`                                                           | -              | Classes for the track (pill background)                                                                                                          |
+| `fillClass`     | `string`                                                           | -              | Classes for the fill (value indicator)                                                                                                           |
+| `thumbClass`    | `string`                                                           | -              | Classes for the thumb                                                                                                                            |
+| `tickClass`     | `string`                                                           | -              | Classes for each tick mark                                                                                                                       |
+| `valueClass`    | `string`                                                           | -              | Classes for the value label wrapper                                                                                                              |
+| `el`            | `HTMLDivElement`                                                   | -              | Root element reference (bindable)                                                                                                                |
+| `inputEl`       | `HTMLInputElement`                                                 | -              | Hidden range input reference (bindable)                                                                                                          |
+
+`SliderRenderCtx` (passed to the `thumb` and `valueLabel` snippets):
+`{ value: number; ratio: number /* 0..1 */; percent: number /* 0..100 */; dragging: boolean }`
+
+Remaining props are spread onto the root `<div>`.
+
+### Exported methods (via component instance binding)
+
+| Method                  | Description                         |
+| ----------------------- | ----------------------------------- |
+| `validate()`            | Trigger validation now              |
+| `clearValidation()`     | Clear the current validation result |
+| `getValidation()`       | Read the current validation result  |
+| `focus()`               | Focus the underlying range input    |
+| `scrollIntoView(opts?)` | Scroll the slider into view         |
+
+## Usage
+
+### Basic
+
+```svelte
+<script lang="ts">
+	import { Slider } from "@marianmeres/stuic";
+
+	let volume = $state(30);
+</script>
+
+<Slider bind:value={volume} />
+```
+
+### Vertical volume control (thumb rides the fill edge)
+
+```svelte
+<Slider
+	orientation="vertical"
+	size="lg"
+	bind:value={volume}
+	style="--stuic-slider-length: 10rem; --stuic-slider-fill: white; --stuic-slider-track: rgb(255 255 255 / .25);"
+>
+	{#snippet thumb()}
+		{@html iconVolume({ size: 16 })}
+	{/snippet}
+</Slider>
+```
+
+### Fill-only (no thumb)
+
+```svelte
+<Slider thumb={false} bind:value={brightness} />
+```
+
+### True iOS volume: fixed icon at the start, only the bar moves
+
+```svelte
+<!-- bare icon (no knob): drop the thumb's own background/shadow -->
+<Slider
+	orientation="vertical"
+	thumbPosition="start"
+	fillRounded
+	thumbClass="bg-transparent shadow-none"
+	bind:value={volume}
+>
+	{#snippet thumb()}
+		{@html iconVolume({ size: 18 })}
+	{/snippet}
+</Slider>
+
+<!-- or keep the white knob pinned at the bottom -->
+<Slider orientation="vertical" thumbPosition="start" bind:value={volume}>
+	{#snippet thumb()}
+		{@html iconVolume({ size: 16 })}
+	{/snippet}
+</Slider>
+```
+
+With `thumbPosition="start"` the thumb is decorative (`pointer-events: none`) and the
+value maps linearly across the full track — there is no thumb-travel inset.
+
+### Steps and ticks
+
+```svelte
+<Slider min={0} max={10} step={1} ticks bind:value={rating} />
+<Slider min={0} max={100} step={0.5} ticks={[0, 25, 50, 75, 100]} />
+```
+
+### Value label
+
+```svelte
+<Slider bind:value={percent}>
+	{#snippet valueLabel({ value })}
+		{value}%
+	{/snippet}
+</Slider>
+```
+
+### Continuous (no snapping)
+
+```svelte
+<Slider step="any" bind:value={gain} />
+```
+
+### In a form
+
+```svelte
+<form onsubmit={...}>
+	<Slider name="volume" bind:value={volume} />
+</form>
+```
+
+## Interaction
+
+- **Pointer**: press anywhere on the track to jump the value there, then drag. Grabbing
+  the thumb itself does not jump (drag continues from the grab point).
+- **Keyboard**: focus and use Arrow keys / PageUp / PageDown / Home / End — native
+  `input[type=range]` behavior (the real input is visually hidden but focusable).
+- **Vertical**: bottom is `min`, top is `max`; ArrowUp increases.
+- **RTL**: horizontal sliders flip automatically (logical CSS properties + pointer math).
+- **Commit semantics**: `oninput` fires only on actual value changes; `onchange` only
+  when a drag/keypress committed a _different_ value (native-faithful — a no-move tap
+  fires neither).
+- **Off-grid max**: when `max` is not on the step grid (e.g. `min=0 max=95 step=10`),
+  the largest reachable value is the last grid point (`90`), matching native range
+  sanitization.
+
+## Caveats
+
+- **Cross-axis sizing**: size the thickness via `size` presets or
+  `--stuic-slider-thickness` — not via `h-*`/`w-*` utility classes. The pointer math
+  and the CSS thumb positioning both derive from the thickness; a utility class
+  resizes the box without updating `--_thickness`, misaligning them. (Main-axis
+  length via a class — e.g. `class="h-40"` on a vertical slider — is fine.)
+- **Root pointer handlers are reserved**: `onpointerdown/move/up/cancel` are excluded
+  from `Props` (the drag machinery owns them). Wrap the slider if you need them.
+- **Touch**: the slider claims the whole touch gesture (`touch-action: none`) —
+  a touch starting on it adjusts the value and never scrolls the page.
+- **The wrapper is not the control**: props spread onto the root `<div>` — including
+  `aria-*` and `onfocus`/`onblur` — never reach the underlying `<input type="range">`
+  and are inert for assistive tech. Use `label` (→ `aria-label`) and `id` (→ `<label for>`);
+  for anything else, bind `inputEl` and wire it imperatively.
+
+## CSS Variables
+
+| Variable                          | Default                    | Description                       |
+| --------------------------------- | -------------------------- | --------------------------------- |
+| `--stuic-slider-track`            | `--stuic-color-muted`      | Track (pill background) color     |
+| `--stuic-slider-fill`             | `--stuic-color-primary`    | Fill color                        |
+| `--stuic-slider-thumb`            | `--color-white`            | Thumb background                  |
+| `--stuic-slider-thumb-foreground` | `--stuic-color-foreground` | Thumb content color               |
+| `--stuic-slider-tick`             | foreground 25% mix         | Tick mark color (over the track)  |
+| `--stuic-slider-tick-on-fill`     | background 55% mix         | Tick mark color (over the fill)   |
+| `--stuic-slider-ring-width`       | `4px`                      | Focus ring width                  |
+| `--stuic-slider-ring-color`       | `--stuic-color-ring`       | Focus ring color                  |
+| `--stuic-slider-thickness`        | `2rem` (`sm` 1.25, `lg` 3) | Cross-axis size                   |
+| `--stuic-slider-length`           | `10rem`                    | Main-axis size                    |
+| `--stuic-slider-thumb-inset`      | `3px`                      | Gap between thumb and track edge  |
+| `--stuic-slider-radius`           | `9999px`                   | Track corner radius               |
+| `--stuic-slider-fill-radius`      | `--stuic-slider-radius`    | Fill radius (when `fillRounded`)  |
+| `--stuic-slider-thumb-radius`     | `9999px`                   | Thumb corner radius               |
+| `--stuic-slider-thumb-shadow`     | `--stuic-shadow`           | Thumb shadow                      |
+| `--stuic-slider-tick-size`        | `4px`                      | Tick mark diameter                |
+| `--stuic-slider-value-gap`        | `0.375rem`                 | Gap between track and value label |
+| `--stuic-slider-transition`       | `--stuic-transition`       | Fill/thumb movement transition    |

package/dist/components/Slider/Slider.svelte

@@ -0,0 +1,521 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type {
+		ValidateOptions,
+		ValidationResult,
+	} from "../../actions/validate.svelte.js";
+
+	export type SliderIntent = "primary" | "accent" | "success" | "warning" | "destructive";
+
+	export type SliderOrientation = "horizontal" | "vertical";
+
+	export type SliderThumbPosition = "value" | "start";
+
+	/** Context passed to the `thumb` and `valueLabel` snippets. */
+	export interface SliderRenderCtx {
+		value: number;
+		/** Normalized value position, 0..1 */
+		ratio: number;
+		/** Normalized value position, 0..100 */
+		percent: number;
+		dragging: boolean;
+	}
+
+	export interface Props extends Omit<
+		HTMLAttributes<HTMLDivElement>,
+		| "children"
+		| "oninput"
+		| "onchange"
+		// Reserved by the slider's own drag machinery (compile-time guard against
+		// silently clobbering them via the rest spread).
+		| "onpointerdown"
+		| "onpointermove"
+		| "onpointerup"
+		| "onpointercancel"
+	> {
+		/**
+		 * Current value (bindable). Defaults to `min`. Non-finite, out-of-range and
+		 * off-step-grid writes are normalized back into the binding, so the bound
+		 * value always equals what is rendered and submitted.
+		 */
+		value?: number;
+		min?: number;
+		max?: number;
+		/**
+		 * Snap increment. Use "any" for continuous (no snapping). Non-positive
+		 * numbers are treated as "any".
+		 */
+		step?: number | "any";
+		orientation?: SliderOrientation;
+		/** Cross-axis thickness preset (main-axis length via `--stuic-slider-length` or class) */
+		size?: "sm" | "md" | "lg" | string;
+		/** Semantic color intent (colors the fill) */
+		intent?: SliderIntent;
+		disabled?: boolean;
+		/** Screen reader label for the underlying range input */
+		label?: string;
+		/** Id for the underlying range input (enables `<label for>` association) */
+		id?: string;
+		/** Form field name for the hidden range input */
+		name?: string;
+		/**
+		 * Forwarded to the hidden range input. NOTE: per HTML spec `required` has
+		 * no effect on range inputs (they always have a value) — use
+		 * `validate.customValidator` for custom rules.
+		 */
+		required?: boolean;
+		/** Skip all default styling, use only custom classes */
+		unstyled?: boolean;
+		class?: string;
+		/** Classes for the track (pill background) element */
+		trackClass?: string;
+		/** Classes for the fill (value indicator) element */
+		fillClass?: string;
+		/** Classes for the thumb element */
+		thumbClass?: string;
+		/** Classes for each tick mark element */
+		tickClass?: string;
+		/** Classes for the floating value label wrapper */
+		valueClass?: string;
+		/**
+		 * Thumb rendering: `true` (default) renders an empty thumb, `false` hides it
+		 * (fill-only look), a snippet renders custom content inside the thumb.
+		 */
+		thumb?: boolean | Snippet<[SliderRenderCtx]>;
+		/**
+		 * Where the thumb sits: `"value"` (default) rides the fill edge, `"start"`
+		 * pins it to the start of the track (left / bottom) so only the bar moves —
+		 * the true iOS volume look with a fixed icon.
+		 */
+		thumbPosition?: SliderThumbPosition;
+		/**
+		 * Round the fill's leading edge (instead of a flat cut), giving the
+		 * "pill inside a pill" look.
+		 */
+		fillRounded?: boolean;
+		/**
+		 * Tick marks along the track: `true` renders one at every `step` (requires a
+		 * positive numeric step; auto ticks are skipped above 101 — pass an explicit
+		 * array instead), an array renders them at the given (in-range) values.
+		 */
+		ticks?: boolean | number[];
+		/** Floating current-value label (tracks the value along the track, outside it) */
+		valueLabel?: Snippet<[SliderRenderCtx]>;
+		/** Bindable root element reference */
+		el?: HTMLDivElement;
+		/** Bindable hidden range input reference */
+		inputEl?: HTMLInputElement;
+		/** Fires on every actual value change (dragging, keyboard) */
+		oninput?: (value: number) => void;
+		/** Fires when a changed value is committed (drag released, keyboard) */
+		onchange?: (value: number) => void;
+		validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+		setValidationResult?: (res: ValidationResult) => void;
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { validate as validateAction } from "../../actions/validate.svelte.js";
+
+	let {
+		value = $bindable(),
+		min = 0,
+		max = 100,
+		step = 1,
+		orientation = "horizontal",
+		size = "md",
+		intent,
+		disabled,
+		label,
+		id,
+		name,
+		required,
+		unstyled = false,
+		class: classProp,
+		trackClass,
+		fillClass,
+		thumbClass,
+		tickClass,
+		valueClass,
+		thumb = true,
+		thumbPosition = "value",
+		fillRounded = false,
+		ticks,
+		valueLabel,
+		el = $bindable(),
+		inputEl = $bindable(),
+		oninput,
+		onchange,
+		// Renamed local binding to avoid collision with `export function validate()` below.
+		validate: validateProp,
+		setValidationResult,
+		...rest
+	}: Props = $props();
+
+	const MAX_AUTO_TICKS = 100;
+
+	let _dragging = $state(false);
+	// Active drag pointer (ignore other concurrent pointers) and the main-axis px
+	// offset between the grab point and the thumb center, so grabbing the thumb
+	// off-center does not jump the value.
+	let _pointerId: number | null = null;
+	let _grabOffset = 0;
+	// Value at drag start — commit (change) fires only if the drag changed it.
+	let _dragStartValue = 0;
+
+	// Only a value-tracking thumb insets the usable travel; a start-pinned thumb
+	// (or none) lets the fill map linearly across the whole track.
+	let _thumbTravels = $derived(thumb !== false && thumbPosition === "value");
+
+	// Bounds must be finite before anything else: a NaN bound would make every
+	// normalization write NaN, and NaN !== NaN would re-trigger the effect below
+	// forever (Svelte sources compare with ===) — an app-killing update-depth error.
+	let _rawMin = $derived(Number.isFinite(min) ? min : 0);
+	let _rawMax = $derived(Number.isFinite(max) ? max : 100);
+	let _min = $derived(Math.min(_rawMin, _rawMax));
+	let _max = $derived(Math.max(_rawMin, _rawMax));
+	let _span = $derived(_max - _min);
+	// The hidden input must never receive an invalid step (the browser would fall
+	// back to step=1 and re-sanitize values the JS side left continuous).
+	let _stepAttr = $derived(typeof step === "number" && step > 0 ? step : "any");
+
+	// Normalize the binding: undefined/non-finite becomes `min`, out-of-range is
+	// clamped, off-grid is snapped — so the bound value always matches what is
+	// rendered AND what the hidden input holds (the browser sanitizes off-grid
+	// values onto the step grid, which would otherwise diverge silently).
+	$effect(() => {
+		const next = _normalize(value);
+		if (!Object.is(value, next)) value = next;
+	});
+
+	let _value = $derived(_normalize(value));
+	let _ratio = $derived(_span ? (_value - _min) / _span : 0);
+	let _ctx: SliderRenderCtx = $derived({
+		value: _value,
+		ratio: _ratio,
+		percent: _ratio * 100,
+		dragging: _dragging,
+	});
+
+	function _clamp(v: number): number {
+		if (!Number.isFinite(v)) return _min;
+		return Math.min(Math.max(v, _min), _max);
+	}
+
+	/** The canonical value for any input: always finite, in range, and on-grid. */
+	function _normalize(v: number | undefined): number {
+		if (v === undefined || !Number.isFinite(v)) return _min;
+		return _snap(v);
+	}
+
+	function _decimals(n: number): number {
+		const s = String(Math.abs(n));
+		const e = s.indexOf("e");
+		if (e === -1) {
+			const i = s.indexOf(".");
+			return i === -1 ? 0 : s.length - i - 1;
+		}
+		// Exponential notation (e.g. "1e-7", "1.5e-7")
+		const exp = Number(s.slice(e + 1));
+		const mant = s.slice(0, e);
+		const mi = mant.indexOf(".");
+		const mantDec = mi === -1 ? 0 : mant.length - mi - 1;
+		return Math.max(0, mantDec - exp);
+	}
+
+	/**
+	 * Snap to the step grid (anchored at `min`). Values beyond the last reachable
+	 * grid point resolve to that grid point — NOT to an off-grid `max` — matching
+	 * the browser's own range value sanitization (so the hidden input never
+	 * re-sanitizes to a different number than the bound value).
+	 */
+	function _snap(v: number): number {
+		if (!(typeof step === "number" && step > 0)) return _clamp(v);
+		let snapped = _min + Math.round((v - _min) / step) * step;
+		if (snapped > _max) snapped = _min + Math.floor(_span / step + 1e-9) * step;
+		if (snapped < _min) snapped = _min;
+		// Trim floating point noise (e.g. 0.1 + 0.2)
+		const decimals = Math.min(Math.max(_decimals(step), _decimals(_min)), 20);
+		return Number(snapped.toFixed(decimals));
+	}
+
+	interface Geometry {
+		horizontal: boolean;
+		rtl: boolean;
+		rect: DOMRect;
+		trackLen: number;
+		/** Dead zone at each end of the track (half the thumb size incl. inset) */
+		pad: number;
+		/** Usable px distance the value maps onto */
+		travel: number;
+	}
+
+	function _geometry(): Geometry {
+		const rect = el!.getBoundingClientRect();
+		const horizontal = orientation === "horizontal";
+		const rtl = horizontal && getComputedStyle(el!).direction === "rtl";
+		const trackLen = horizontal ? rect.width : rect.height;
+		const thickness = horizontal ? rect.height : rect.width;
+		// With a thumb, the thumb center travels within [thickness/2, len - thickness/2]
+		// (mirrors the CSS `(100% - thickness) * ratio` positioning); without it, the
+		// value maps linearly across the whole track. NOTE: this assumes the rendered
+		// cross-axis size equals --_thickness — size the cross-axis via the size
+		// presets or --stuic-slider-thickness, not via utility classes (see README).
+		const pad = _thumbTravels ? thickness / 2 : 0;
+		const travel = Math.max(1, trackLen - 2 * pad);
+		return { horizontal, rtl, rect, trackLen, pad, travel };
+	}
+
+	/** Pointer position in track coords, measured from the value=min end. */
+	function _pointerPos(e: PointerEvent, g: Geometry): number {
+		if (!g.horizontal) return g.rect.bottom - e.clientY;
+		return g.rtl ? g.rect.right - e.clientX : e.clientX - g.rect.left;
+	}
+
+	function _posToValue(e: PointerEvent, g: Geometry): number {
+		const r = (_pointerPos(e, g) - _grabOffset - g.pad) / g.travel;
+		return _snap(_min + r * _span);
+	}
+
+	function _apply(v: number) {
+		const prev = _value;
+		if (v === prev) return;
+		value = v;
+		// Re-read through the derived: a bound parent may have transformed or
+		// rejected the write synchronously.
+		const current = _value;
+		// Sync the hidden input synchronously (Svelte's template update is async
+		// and skips entirely when the parent nets the value back to what it was).
+		if (inputEl && inputEl.value !== String(current)) inputEl.value = String(current);
+		if (current !== prev) oninput?.(current);
+	}
+
+	function _endDrag(e: PointerEvent) {
+		_dragging = false;
+		_pointerId = null;
+		if (el?.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
+	}
+
+	function _onpointerdown(e: PointerEvent) {
+		// Set before the early-returns: any pointer press over the component means
+		// the focus that follows is pointer-initiated and must not show the ring
+		// (a right-click still focuses the full-size hidden input).
+		_pointerFocus = true;
+		if (disabled || _dragging || e.button !== 0) return;
+		e.preventDefault();
+		const g = _geometry();
+		const pos = _pointerPos(e, g);
+		// Grabbing (near) the thumb must not jump the value — detected geometrically
+		// (the full-size hidden input is the topmost hit target, so DOM-target
+		// checks would never match the thumb element).
+		const thumbCenter = g.pad + g.travel * _ratio;
+		_grabOffset =
+			_thumbTravels && Math.abs(pos - thumbCenter) <= g.pad ? pos - thumbCenter : 0;
+		try {
+			el?.setPointerCapture(e.pointerId);
+		} catch {
+			// NotFoundError for a pointerId that is not actively down (synthetic
+			// events) — capture is an optimization here, the drag works without it.
+		}
+		_pointerId = e.pointerId;
+		_dragging = true;
+		_dragStartValue = _value;
+		_apply(_posToValue(e, g));
+		inputEl?.focus();
+	}
+
+	function _onpointermove(e: PointerEvent) {
+		if (!_dragging || e.pointerId !== _pointerId) return;
+		if (disabled) return _endDrag(e);
+		_apply(_posToValue(e, _geometry()));
+	}
+
+	function _onpointerup(e: PointerEvent) {
+		if (!_dragging || e.pointerId !== _pointerId) return;
+		const wasDisabled = disabled;
+		_endDrag(e);
+		if (wasDisabled) return;
+		// Native "change" (commit) semantics — only when the drag actually changed
+		// the value. Also triggers the validate action and the `onchange` handler
+		// on the hidden input below.
+		if (_value !== _dragStartValue) {
+			inputEl?.dispatchEvent(new Event("change", { bubbles: true }));
+		}
+	}
+
+	let _tickRatios = $derived.by(() => {
+		if (!ticks || !_span) return [];
+		let vals: number[];
+		if (Array.isArray(ticks)) {
+			vals = ticks;
+		} else if (typeof step === "number" && step > 0) {
+			const count = Math.floor(_span / step + 1e-9);
+			if (count > MAX_AUTO_TICKS) {
+				console.warn(
+					`[stuic] Slider: ${count + 1} auto ticks exceed the limit of ${MAX_AUTO_TICKS + 1}, ` +
+						`skipping (pass an explicit \`ticks\` array instead)`
+				);
+				return [];
+			}
+			// Through _snap so float accumulation (0 + 3 * 0.1 = 0.30000000000000004)
+			// cannot push the last tick past _max and drop it.
+			vals = Array.from({ length: count + 1 }, (_, i) => _snap(_min + i * step));
+		} else {
+			return [];
+		}
+		return [...new Set(vals)]
+			.filter((v) => v >= _min && v <= _max)
+			.map((v) => (v - _min) / _span);
+	});
+
+	// Deterministic, cross-browser focus ring: shown for keyboard-initiated focus
+	// only (:focus-visible leaks on pointer-initiated programmatic focus in
+	// Chromium/WebKit).
+	let _showRing = $state(false);
+	let _pointerFocus = false;
+
+	//
+	let _doValidate: (() => void) | undefined = $state();
+	// Local copy of the last validation result so getValidation() works even
+	// when no external setValidationResult was provided.
+	let _validation: ValidationResult | undefined = $state();
+
+	/** Trigger validation now. Reaches the parent via `setValidationResult`. */
+	export function validate(): ValidationResult | undefined {
+		_doValidate?.();
+		return _validation;
+	}
+
+	/** Clear the inline validation message and reset `setCustomValidity`. */
+	export function clearValidation(): void {
+		_validation = undefined;
+		inputEl?.setCustomValidity?.("");
+	}
+
+	/** Current validation state. */
+	export function getValidation(): ValidationResult | undefined {
+		return _validation;
+	}
+
+	/** Focus the underlying range input. */
+	export function focus(): void {
+		inputEl?.focus?.();
+	}
+
+	/** Scroll the slider into view. */
+	export function scrollIntoView(opts?: ScrollIntoViewOptions): void {
+		el?.scrollIntoView?.({ behavior: "smooth", block: "center", ...opts });
+	}
+</script>
+
+<!-- `rest` is spread first intentionally: the pointer handlers and computed
+     attributes below are functionally required and must not be clobbered.
+     `data-stuic-slider` is always emitted (even when `unstyled`) — index.css
+     hangs the FUNCTIONAL declarations off it (touch-action, position, …) so
+     dragging survives `unstyled`, while staying attribute-specificity so a
+     consumer utility class can still override it. -->
+<div
+	{...rest}
+	bind:this={el}
+	class={unstyled ? classProp : twMerge("stuic-slider", classProp)}
+	style:--_ratio={_ratio}
+	data-stuic-slider=""
+	data-orientation={orientation}
+	data-thumb={thumb !== false ? "true" : "false"}
+	data-thumb-position={thumb !== false ? thumbPosition : undefined}
+	data-thumb-travels={_thumbTravels ? "true" : "false"}
+	data-fill-rounded={fillRounded ? "true" : undefined}
+	data-size={!unstyled ? size : undefined}
+	data-intent={!unstyled ? intent : undefined}
+	data-disabled={disabled ? "true" : undefined}
+	data-dragging={_dragging ? "true" : undefined}
+	data-ring={_showRing ? "true" : undefined}
+	onpointerdown={_onpointerdown}
+	onpointermove={_onpointermove}
+	onpointerup={_onpointerup}
+	onpointercancel={_onpointerup}
+>
+	<div class={twMerge("track", trackClass)}>
+		<div class={twMerge("fill", fillClass)}></div>
+		{#if _tickRatios.length}
+			<!-- Styled mode renders two complementary layers — the base one clipped
+			     to the unfilled part of the track, the `on-fill` one to the filled
+			     part — so ticks stay readable over both. `unstyled` has no CSS to
+			     clip them, so it gets the single plain layer. -->
+			{#each unstyled ? [false] : [false, true] as onFill}
+				<div class="ticks" data-on-fill={onFill ? "true" : undefined} aria-hidden="true">
+					{#each _tickRatios as r}
+						<div class={twMerge("tick", tickClass)} style:--_tick-ratio={r}></div>
+					{/each}
+				</div>
+			{/each}
+		{/if}
+	</div>
+	{#if thumb !== false}
+		<div class={twMerge("thumb", thumbClass)} aria-hidden="true">
+			{#if typeof thumb === "function"}
+				{@render thumb(_ctx)}
+			{/if}
+		</div>
+	{/if}
+	{#if valueLabel}
+		<div class={twMerge("value", valueClass)} aria-hidden="true">
+			{@render valueLabel(_ctx)}
+		</div>
+	{/if}
+	<!-- Visually hidden but full-size, so touch-based assistive tech (VoiceOver /
+	     TalkBack explore-by-touch) can hit-test the real slider role. Pointer
+	     events bubble to the root handler, which preventDefault()s the native
+	     drag behavior. -->
+	<input
+		bind:this={inputEl}
+		type="range"
+		class="absolute inset-0 size-full opacity-0"
+		value={_value}
+		min={_min}
+		max={_max}
+		step={_stepAttr}
+		{id}
+		{name}
+		{required}
+		{disabled}
+		aria-label={label}
+		aria-orientation={orientation === "vertical" ? "vertical" : undefined}
+		onfocus={() => {
+			_showRing = !_pointerFocus;
+			_pointerFocus = false;
+		}}
+		onblur={() => {
+			_showRing = false;
+			_pointerFocus = false;
+		}}
+		onkeydown={() => (_showRing = true)}
+		oninput={(e) => {
+			const t = e.currentTarget;
+			const v = t.valueAsNumber;
+			if (!Number.isNaN(v) && v !== value) {
+				const prev = _value;
+				value = v;
+				if (_value !== prev) oninput?.(_value);
+			}
+			// Resync the DOM in case a bound parent transformed/rejected the write
+			// (the template update skips when the parent nets the value back).
+			if (t.value !== String(_value)) t.value = String(_value);
+		}}
+		onchange={(e) => {
+			const v = e.currentTarget.valueAsNumber;
+			if (!Number.isNaN(v)) onchange?.(v);
+		}}
+		use:validateAction={() => ({
+			enabled: validateProp !== false,
+			...(typeof validateProp === "boolean" ? {} : validateProp),
+			setValidationResult: (res) => {
+				_validation = res;
+				setValidationResult?.(res);
+			},
+			setDoValidate: (fn) => (_doValidate = fn),
+		})}
+	/>
+</div>

package/dist/components/Slider/Slider.svelte.d.ts

@@ -0,0 +1,104 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { ValidateOptions, ValidationResult } from "../../actions/validate.svelte.js";
+export type SliderIntent = "primary" | "accent" | "success" | "warning" | "destructive";
+export type SliderOrientation = "horizontal" | "vertical";
+export type SliderThumbPosition = "value" | "start";
+/** Context passed to the `thumb` and `valueLabel` snippets. */
+export interface SliderRenderCtx {
+    value: number;
+    /** Normalized value position, 0..1 */
+    ratio: number;
+    /** Normalized value position, 0..100 */
+    percent: number;
+    dragging: boolean;
+}
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "oninput" | "onchange" | "onpointerdown" | "onpointermove" | "onpointerup" | "onpointercancel"> {
+    /**
+     * Current value (bindable). Defaults to `min`. Non-finite, out-of-range and
+     * off-step-grid writes are normalized back into the binding, so the bound
+     * value always equals what is rendered and submitted.
+     */
+    value?: number;
+    min?: number;
+    max?: number;
+    /**
+     * Snap increment. Use "any" for continuous (no snapping). Non-positive
+     * numbers are treated as "any".
+     */
+    step?: number | "any";
+    orientation?: SliderOrientation;
+    /** Cross-axis thickness preset (main-axis length via `--stuic-slider-length` or class) */
+    size?: "sm" | "md" | "lg" | string;
+    /** Semantic color intent (colors the fill) */
+    intent?: SliderIntent;
+    disabled?: boolean;
+    /** Screen reader label for the underlying range input */
+    label?: string;
+    /** Id for the underlying range input (enables `<label for>` association) */
+    id?: string;
+    /** Form field name for the hidden range input */
+    name?: string;
+    /**
+     * Forwarded to the hidden range input. NOTE: per HTML spec `required` has
+     * no effect on range inputs (they always have a value) — use
+     * `validate.customValidator` for custom rules.
+     */
+    required?: boolean;
+    /** Skip all default styling, use only custom classes */
+    unstyled?: boolean;
+    class?: string;
+    /** Classes for the track (pill background) element */
+    trackClass?: string;
+    /** Classes for the fill (value indicator) element */
+    fillClass?: string;
+    /** Classes for the thumb element */
+    thumbClass?: string;
+    /** Classes for each tick mark element */
+    tickClass?: string;
+    /** Classes for the floating value label wrapper */
+    valueClass?: string;
+    /**
+     * Thumb rendering: `true` (default) renders an empty thumb, `false` hides it
+     * (fill-only look), a snippet renders custom content inside the thumb.
+     */
+    thumb?: boolean | Snippet<[SliderRenderCtx]>;
+    /**
+     * Where the thumb sits: `"value"` (default) rides the fill edge, `"start"`
+     * pins it to the start of the track (left / bottom) so only the bar moves —
+     * the true iOS volume look with a fixed icon.
+     */
+    thumbPosition?: SliderThumbPosition;
+    /**
+     * Round the fill's leading edge (instead of a flat cut), giving the
+     * "pill inside a pill" look.
+     */
+    fillRounded?: boolean;
+    /**
+     * Tick marks along the track: `true` renders one at every `step` (requires a
+     * positive numeric step; auto ticks are skipped above 101 — pass an explicit
+     * array instead), an array renders them at the given (in-range) values.
+     */
+    ticks?: boolean | number[];
+    /** Floating current-value label (tracks the value along the track, outside it) */
+    valueLabel?: Snippet<[SliderRenderCtx]>;
+    /** Bindable root element reference */
+    el?: HTMLDivElement;
+    /** Bindable hidden range input reference */
+    inputEl?: HTMLInputElement;
+    /** Fires on every actual value change (dragging, keyboard) */
+    oninput?: (value: number) => void;
+    /** Fires when a changed value is committed (drag released, keyboard) */
+    onchange?: (value: number) => void;
+    validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+    setValidationResult?: (res: ValidationResult) => void;
+}
+declare const Slider: import("svelte").Component<Props, {
+    validate: () => ValidationResult | undefined;
+    clearValidation: () => void;
+    getValidation: () => ValidationResult | undefined;
+    focus: () => void;
+    scrollIntoView: (opts?: ScrollIntoViewOptions) => void;
+}, "el" | "value" | "inputEl">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/Slider/index.css

@@ -0,0 +1,337 @@
+/* ============================================================================
+   SLIDER COMPONENT TOKENS
+   Override globally: :root { --stuic-slider-fill: var(--color-green-500); }
+   Override locally:  <Slider style="--stuic-slider-fill: var(--color-green-500);">
+
+   Sizing (structural, override at any scope — resolved at the element):
+     --stuic-slider-thickness    cross-axis size (also set by size="sm|md|lg")
+     --stuic-slider-length       main-axis size (or use a width/height class)
+     --stuic-slider-thumb-inset  gap between thumb and track edge
+   ============================================================================ */
+
+:root {
+	/* Track (pill background) */
+	--stuic-slider-track: var(--stuic-color-muted);
+
+	/* Fill (value indicator) */
+	--stuic-slider-fill: var(--stuic-color-primary);
+
+	/* Thumb */
+	--stuic-slider-thumb: var(--color-white);
+	--stuic-slider-thumb-foreground: var(--stuic-color-foreground);
+
+	/* Tick marks (a second, fill-clipped layer keeps them readable over the fill) */
+	--stuic-slider-tick: color-mix(in srgb, var(--stuic-color-foreground) 25%, transparent);
+	--stuic-slider-tick-on-fill: color-mix(
+		in srgb,
+		var(--stuic-color-background) 55%,
+		transparent
+	);
+
+	/* Focus ring */
+	--stuic-slider-ring-width: 4px;
+	--stuic-slider-ring-color: var(--stuic-color-ring);
+}
+
+@layer components {
+	/* ============================================================================
+	   BASE / ROOT
+	   ============================================================================ */
+
+	.stuic-slider {
+		/* Internal vars (intent may override the fill) */
+		--_track: var(--stuic-slider-track);
+		--_fill: var(--stuic-slider-fill);
+		--_thumb-bg: var(--stuic-slider-thumb);
+		--_thumb-fg: var(--stuic-slider-thumb-foreground);
+		--_tick: var(--stuic-slider-tick);
+		--_tick-on-fill: var(--stuic-slider-tick-on-fill);
+		--_tick-size: var(--stuic-slider-tick-size, 4px);
+
+		/* Structural (fallbacks resolved here so scoped overrides work) */
+		--_thickness: var(--stuic-slider-thickness, 2rem);
+		--_length: var(--stuic-slider-length, 10rem);
+		--_thumb-inset: var(--stuic-slider-thumb-inset, 3px);
+		/* Main-axis extent of the fill (percentages resolve against the track,
+		   which is the containing block of both the fill and the tick layers) */
+		--_fill-len: calc(var(--_ratio) * 100%);
+
+		display: inline-block;
+		vertical-align: middle;
+		flex-shrink: 0;
+		cursor: pointer;
+	}
+
+	/* FUNCTIONAL, not cosmetic — keyed on an attribute the component always emits
+	   so it survives `unstyled`: `touch-action: none` keeps the browser from
+	   stealing touch drags for scrolling, `position: relative` anchors the
+	   absolutely-positioned track/thumb/hidden input. Attribute specificity (0,1,0)
+	   leaves it overridable by a consumer utility class (Tailwind's utilities layer
+	   beats this components layer). */
+	[data-stuic-slider] {
+		position: relative;
+		touch-action: none;
+		user-select: none;
+		-webkit-user-select: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.stuic-slider[data-size="sm"] {
+		--_thickness: var(--stuic-slider-thickness, 1.25rem);
+	}
+	/* md is the base default (2rem) */
+	.stuic-slider[data-size="lg"] {
+		--_thickness: var(--stuic-slider-thickness, 3rem);
+	}
+
+	.stuic-slider[data-orientation="horizontal"] {
+		width: var(--_length);
+		height: var(--_thickness);
+	}
+	.stuic-slider[data-orientation="vertical"] {
+		width: var(--_thickness);
+		height: var(--_length);
+	}
+
+	/* Disabled */
+	.stuic-slider[data-disabled="true"] {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	/* ============================================================================
+	   TRACK + FILL
+	   ============================================================================ */
+
+	.stuic-slider > .track {
+		position: absolute;
+		inset: 0;
+		overflow: hidden;
+		border-radius: var(--stuic-slider-radius, 9999px);
+		background: var(--_track);
+		transition: box-shadow var(--stuic-slider-transition, var(--stuic-transition));
+	}
+
+	.stuic-slider .fill {
+		position: absolute;
+		background: var(--_fill);
+	}
+	/* With a value-tracking thumb, the fill reaches the far edge of the thumb */
+	.stuic-slider[data-thumb-travels="true"] {
+		--_fill-len: calc(var(--_ratio) * (100% - var(--_thickness)) + var(--_thickness));
+	}
+	.stuic-slider[data-orientation="horizontal"] .fill {
+		inset-block: 0;
+		inset-inline-start: 0;
+		width: var(--_fill-len);
+	}
+	.stuic-slider[data-orientation="vertical"] .fill {
+		inset-inline: 0;
+		bottom: 0;
+		height: var(--_fill-len);
+	}
+
+	/* Rounded leading edge ("pill inside a pill") */
+	.stuic-slider[data-fill-rounded="true"] .fill {
+		border-radius: var(--stuic-slider-fill-radius, var(--stuic-slider-radius, 9999px));
+	}
+
+	/* ============================================================================
+	   THUMB
+	   ============================================================================ */
+
+	.stuic-slider > .thumb {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: calc(var(--_thickness) - 2 * var(--_thumb-inset));
+		height: calc(var(--_thickness) - 2 * var(--_thumb-inset));
+		border-radius: var(--stuic-slider-thumb-radius, 9999px);
+		background: var(--_thumb-bg);
+		color: var(--_thumb-fg);
+		box-shadow: var(--stuic-slider-thumb-shadow, var(--stuic-shadow));
+		/* No pointer-events rules needed: the full-size hidden input is the last
+		   child and always the topmost hit target, so the thumb never receives
+		   pointer events. Grab detection is geometric, in _onpointerdown. */
+	}
+	.stuic-slider[data-orientation="horizontal"] > .thumb {
+		inset-block-start: var(--_thumb-inset);
+		inset-inline-start: var(--_thumb-inset);
+	}
+	.stuic-slider[data-orientation="vertical"] > .thumb {
+		inset-inline-start: var(--_thumb-inset);
+		bottom: var(--_thumb-inset);
+	}
+	/* thumbPosition="value": ride the fill edge (default). thumbPosition="start"
+	   keeps the offsets above, so only the bar moves (iOS volume look). */
+	.stuic-slider[data-thumb-travels="true"][data-orientation="horizontal"] > .thumb {
+		inset-inline-start: calc(
+			var(--_thumb-inset) + (100% - var(--_thickness)) * var(--_ratio)
+		);
+	}
+	.stuic-slider[data-thumb-travels="true"][data-orientation="vertical"] > .thumb {
+		bottom: calc(var(--_thumb-inset) + (100% - var(--_thickness)) * var(--_ratio));
+	}
+	/* Smooth value movement (keyboard steps); instant while dragging */
+	.stuic-slider .fill,
+	.stuic-slider > .thumb,
+	.stuic-slider > .value {
+		transition:
+			width var(--stuic-slider-transition, var(--stuic-transition)),
+			height var(--stuic-slider-transition, var(--stuic-transition)),
+			inset-inline-start var(--stuic-slider-transition, var(--stuic-transition)),
+			bottom var(--stuic-slider-transition, var(--stuic-transition));
+	}
+	.stuic-slider[data-dragging="true"] .fill,
+	.stuic-slider[data-dragging="true"] > .thumb,
+	.stuic-slider[data-dragging="true"] > .value {
+		transition: none;
+	}
+
+	/* ============================================================================
+	   TICKS
+	   ============================================================================ */
+
+	/* Two identical tick layers clipped to complementary halves of the track: the
+	   base one covers the unfilled part, the `on-fill` one the filled part, each
+	   with its own color. A single layer would vanish into whichever it overlaps,
+	   and overlapping layers would composite (both tick colors are translucent). */
+	.stuic-slider .ticks {
+		position: absolute;
+		inset: 0;
+		transition: clip-path var(--stuic-slider-transition, var(--stuic-transition));
+	}
+	.stuic-slider[data-dragging="true"] .ticks {
+		transition: none;
+	}
+	.stuic-slider .ticks[data-on-fill="true"] .tick {
+		background: var(--_tick-on-fill);
+	}
+	.stuic-slider[data-orientation="horizontal"] .ticks {
+		clip-path: inset(0 0 0 var(--_fill-len));
+	}
+	.stuic-slider[data-orientation="horizontal"] .ticks[data-on-fill="true"] {
+		clip-path: inset(0 calc(100% - var(--_fill-len)) 0 0);
+	}
+	.stuic-slider[data-orientation="horizontal"]:dir(rtl) .ticks {
+		clip-path: inset(0 var(--_fill-len) 0 0);
+	}
+	.stuic-slider[data-orientation="horizontal"]:dir(rtl) .ticks[data-on-fill="true"] {
+		clip-path: inset(0 0 0 calc(100% - var(--_fill-len)));
+	}
+	.stuic-slider[data-orientation="vertical"] .ticks {
+		clip-path: inset(0 0 var(--_fill-len) 0);
+	}
+	.stuic-slider[data-orientation="vertical"] .ticks[data-on-fill="true"] {
+		clip-path: inset(calc(100% - var(--_fill-len)) 0 0 0);
+	}
+
+	.stuic-slider .tick {
+		position: absolute;
+		width: var(--_tick-size);
+		height: var(--_tick-size);
+		border-radius: 9999px;
+		background: var(--_tick);
+	}
+	/* Without a traveling thumb there is no thickness inset to hide behind, so the
+	   travel is inset by half a tick — otherwise the ticks at ratio 0 and 1 sit
+	   centered on the track edges and the overflow:hidden track halves them. */
+	.stuic-slider[data-orientation="horizontal"] .tick {
+		top: 50%;
+		inset-inline-start: calc(
+			var(--_tick-size) / 2 + (100% - var(--_tick-size)) * var(--_tick-ratio)
+		);
+		transform: translate(-50%, -50%);
+	}
+	.stuic-slider[data-orientation="vertical"] .tick {
+		left: 50%;
+		bottom: calc(var(--_tick-size) / 2 + (100% - var(--_tick-size)) * var(--_tick-ratio));
+		transform: translate(-50%, 50%);
+	}
+	/* With a value-tracking thumb, ticks align to the thumb-center travel */
+	.stuic-slider[data-thumb-travels="true"][data-orientation="horizontal"] .tick {
+		inset-inline-start: calc(
+			var(--_thickness) / 2 + (100% - var(--_thickness)) * var(--_tick-ratio)
+		);
+	}
+	.stuic-slider[data-thumb-travels="true"][data-orientation="vertical"] .tick {
+		bottom: calc(var(--_thickness) / 2 + (100% - var(--_thickness)) * var(--_tick-ratio));
+	}
+	/* Logical-property positioning + physical translate: flip centering in RTL */
+	.stuic-slider[data-orientation="horizontal"]:dir(rtl) .tick {
+		transform: translate(50%, -50%);
+	}
+
+	/* ============================================================================
+	   VALUE LABEL
+	   ============================================================================ */
+
+	.stuic-slider > .value {
+		position: absolute;
+		pointer-events: none;
+		white-space: nowrap;
+		font-size: var(--text-xs);
+		color: var(--stuic-color-muted-foreground);
+	}
+	.stuic-slider[data-orientation="horizontal"] > .value {
+		bottom: calc(100% + var(--stuic-slider-value-gap, 0.375rem));
+		inset-inline-start: calc(var(--_ratio) * 100%);
+		transform: translateX(-50%);
+	}
+	.stuic-slider[data-orientation="vertical"] > .value {
+		inset-inline-start: calc(100% + var(--stuic-slider-value-gap, 0.375rem));
+		bottom: calc(var(--_ratio) * 100%);
+		transform: translateY(50%);
+	}
+	.stuic-slider[data-thumb-travels="true"][data-orientation="horizontal"] > .value {
+		inset-inline-start: calc(
+			var(--_thickness) / 2 + (100% - var(--_thickness)) * var(--_ratio)
+		);
+	}
+	.stuic-slider[data-thumb-travels="true"][data-orientation="vertical"] > .value {
+		bottom: calc(var(--_thickness) / 2 + (100% - var(--_thickness)) * var(--_ratio));
+	}
+	.stuic-slider[data-orientation="horizontal"]:dir(rtl) > .value {
+		transform: translateX(50%);
+	}
+
+	/* The full-size hidden input is the topmost hit target */
+	.stuic-slider > input {
+		cursor: inherit;
+	}
+
+	/* ============================================================================
+	   FOCUS RING (keyboard-initiated focus; data-ring is set by the component —
+	   :focus-visible is unreliable for pointer-initiated programmatic focus)
+	   ============================================================================ */
+
+	.stuic-slider[data-ring="true"] > .track {
+		box-shadow: 0 0 0 var(--stuic-slider-ring-width)
+			color-mix(
+				in srgb,
+				var(--stuic-slider-ring-color) 30%,
+				var(--stuic-color-background)
+			);
+	}
+
+	/* ============================================================================
+	   INTENT COLOR MAPPING
+	   ============================================================================ */
+
+	.stuic-slider[data-intent="primary"] {
+		--_fill: var(--stuic-color-primary);
+	}
+	.stuic-slider[data-intent="accent"] {
+		--_fill: var(--stuic-color-accent);
+	}
+	.stuic-slider[data-intent="success"] {
+		--_fill: var(--stuic-color-success);
+	}
+	.stuic-slider[data-intent="warning"] {
+		--_fill: var(--stuic-color-warning);
+	}
+	.stuic-slider[data-intent="destructive"] {
+		--_fill: var(--stuic-color-destructive);
+	}
+}

package/dist/components/Slider/index.d.ts

@@ -0,0 +1 @@
+export { default as Slider, type Props as SliderProps, type SliderIntent, type SliderOrientation, type SliderThumbPosition, type SliderRenderCtx, } from "./Slider.svelte";

package/dist/components/Slider/index.js

@@ -0,0 +1 @@
+export { default as Slider, } from "./Slider.svelte";

package/dist/index.css

@@ -98,6 +98,7 @@ In practice:
 @import "./components/Progress/index.css";
 @import "./components/Separator/index.css";
 @import "./components/Skeleton/index.css";
+@import "./components/Slider/index.css";
 @import "./components/Spinner/index.css";
 @import "./components/Switch/index.css";
 @import "./components/TabbedMenu/index.css";

package/dist/index.d.ts

@@ -67,6 +67,7 @@ export * from "./components/PricingTable/index.js";
 export * from "./components/Progress/index.js";
 export * from "./components/Separator/index.js";
 export * from "./components/Skeleton/index.js";
+export * from "./components/Slider/index.js";
 export * from "./components/SlidingPanels/index.js";
 export * from "./components/Spinner/index.js";
 export * from "./components/Switch/index.js";

package/dist/index.js

@@ -73,6 +73,7 @@ export * from "./components/PricingTable/index.js";
 export * from "./components/Progress/index.js";
 export * from "./components/Separator/index.js";
 export * from "./components/Skeleton/index.js";
+export * from "./components/Slider/index.js";
 export * from "./components/SlidingPanels/index.js";
 export * from "./components/Spinner/index.js";
 export * from "./components/Switch/index.js";

package/docs/domains/components.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-57 Svelte 5 component directories with consistent API patterns. All use runes-based reactivity.
+63 Svelte 5 component directories with consistent API patterns. All use runes-based reactivity.
 
 ## Component Categories
 
@@ -29,6 +29,7 @@
 | Button               | Actions with intent/variant/size            |
 | ButtonGroupRadio     | Toggle group (single selection)             |
 | Switch               | Boolean toggle                              |
+| Slider               | Fancy range input (fill + optional thumb)   |
 | TwCheck              | Styled checkbox/radio                       |
 | DropdownMenu         | Popover menu                                |
 | CommandMenu          | Command palette (keyboard-driven)           |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.144.0",
+	"version": "3.145.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",
@@ -19,8 +19,9 @@
 		"test:ui": "vitest --ui",
 		"svelte-check": "svelte-check",
 		"svelte-package": "svelte-package",
-		"rp": "pnpm run build && ./release.sh patch",
-		"rpm": "pnpm run build && ./release.sh minor"
+		"rp": "pnpm run build && deno run -A jsr:@marianmeres/release patch --no-push && npm publish --access public && git push --follow-tags",
+		"rpm": "pnpm run build && deno run -A jsr:@marianmeres/release minor --no-push && npm publish --access public && git push --follow-tags",
+		"release": "deno run -A jsr:@marianmeres/release"
 	},
 	"files": [
 		"dist",