@vielzeug/refine 1.8.0 → 2.0.0

package/dist/slider.js

@@ -1,220 +1,212 @@
-import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
-import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
-import { disabledStateMixin as n } from "./styles/mixins/states.css.js";
-import { colorThemeMixin as r } from "./styles/mixins/theme.css.js";
-import { disablableBundle as i, sizableBundle as a, themableBundle as o } from "./shared/prop-bundles.js";
-import { SLIDER_SIZE_PRESET as s } from "./shared/size-presets.js";
-import { createErrorHelperState as c } from "./headless/field-base.js";
-import { createSliderControl as l } from "./headless/slider.js";
-import { FORM_CTX as u, useFormContext as d } from "./inputs/shared/form-context.js";
-import { renderHelperRegion as f } from "./inputs/shared/templates.js";
-import p from "./inputs/slider/slider.css.js";
-import { aria as m, bind as h, createStableId as g, define as _, getHost as v, html as y, inject as b, onCleanup as x, onEvent as S, onMounted as C, prop as w, ref as T, useEmit as E, useSlots as D } from "@vielzeug/ore";
-import { computed as O, signal as k, watch as A } from "@vielzeug/ripple";
-import { useField as j } from "@vielzeug/ore/forms";
+import { createErrorHelperState as e } from "./core/field-base.js";
+import { createSliderControl as t } from "./core/slider.js";
+import { reducedMotionMixin as n } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as r } from "./styles/mixins/shape.css.js";
+import { disabledStateMixin as i } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as a } from "./styles/mixins/theme.css.js";
+import { disablableBundle as o, sizableBundle as s, themableBundle as c } from "./shared/prop-bundles.js";
+import { SLIDER_SIZE_PRESET as l } from "./shared/size-presets.js";
+import { renderHelperRegion as u } from "./inputs/shared/templates.js";
+import { defineFieldValue as d, dispatchNativeFieldEvent as f, setFieldValue as p } from "./inputs/shared/native-field-event.js";
+import m from "./inputs/slider/slider.css.js";
+import { bind as h, createStableId as g, define as _, getHost as v, html as y, onCleanup as b, onEvent as x, onMounted as S, prop as C, ref as w, useField as T, useSlots as E } from "@vielzeug/ore";
+import { computed as D, signal as O } from "@vielzeug/ripple";
+import { watch as k } from "@vielzeug/ripple/watch";
 //#region src/inputs/slider/slider.ts
-var M = (e, t) => (n) => {
+var A = (e, t) => (n) => {
 	e() && t(n);
-}, N = "ore-slider";
-_(N, {
+}, j = "ore-slider";
+_(j, {
 	formAssociated: !0,
 	props: {
+		...c,
+		...s,
 		...o,
-		...a,
-		...i,
-		error: w.string(),
-		from: w.number(0),
-		"from-value-text": w.string(),
-		helper: w.string(),
-		max: w.number(100),
-		min: w.number(0),
-		name: w.string(),
-		range: w.bool(!1),
-		step: w.number(1),
-		to: w.number(100),
-		"to-value-text": w.string(),
-		value: w.number(0),
-		"value-text": w.string()
+		error: C.string(),
+		from: C.number(0),
+		"from-value-text": C.string(),
+		fullwidth: C.bool(!1),
+		helper: C.string(),
+		max: C.number(100),
+		min: C.number(0),
+		name: C.string(),
+		range: C.bool(!1),
+		step: C.number(1),
+		to: C.number(100),
+		"to-value-text": C.string(),
+		value: C.number(0),
+		"value-text": C.string()
 	},
-	setup(e) {
-		let t = v(), n = E(), r = D(), i = e.range.value, a = l({
-			max: e.max,
-			min: e.min,
-			step: e.step
-		}), o = b(u), s = d(e, o), p = k(!1), _ = s.disabled, w = k(void 0), N = g("helper"), P = c({
-			error: e.error,
-			helper: e.helper
-		}), F = O(() => P.value.errorText), I = O(() => P.value.helperText), L = O(() => F.value || I.value ? N : null);
+	setup(n) {
+		let r = v(), i = E(), a = n.range.value, o = t({
+			max: n.max,
+			min: n.min,
+			step: n.step
+		}), s = O(!1), c = D(() => !!n.disabled.value), l = O(void 0), m = g("helper"), _ = e({
+			error: n.error,
+			helper: n.helper
+		}), C = D(() => _.value.errorText), j = D(() => _.value.helperText), M = D(() => C.value || j.value ? m : null);
 		h({ attr: {
-			"data-dragging": () => p.value ? !0 : void 0,
-			size: s.size
+			"data-dragging": () => s.value ? !0 : void 0,
+			size: n.size
 		} });
-		let R, z = k("0");
-		i || (R = j({
-			disabled: _,
-			value: z
-		}), A(e.value, (e) => {
-			z.value = String(e);
+		let N = O("0");
+		a || (T({
+			disabled: c,
+			value: N
+		}), k(n.value, (e) => {
+			N.value = String(e);
 		}, { immediate: !0 }), h({ attr: {
-			ariaDescribedby: () => L.value ?? null,
-			ariaDisabled: () => _.value ? "true" : null,
-			ariaLabelledby: () => w.value ?? null,
-			ariaValuemax: () => a.max(),
-			ariaValuemin: () => a.min(),
-			ariaValuenow: () => Number(z.value || 0),
-			ariaValuetext: () => e["value-text"].value ?? null,
+			ariaDescribedby: () => M.value ?? null,
+			ariaDisabled: () => c.value ? "true" : null,
+			ariaLabelledby: () => l.value ?? null,
+			ariaValuemax: () => o.max(),
+			ariaValuemin: () => o.min(),
+			ariaValuenow: () => Number(N.value || 0),
+			ariaValuetext: () => n["value-text"].value ?? null,
 			role: () => "slider",
-			tabindex: () => _.value ? null : "0"
+			tabindex: () => c.value ? null : "0"
 		} }));
-		let B = k(0), V = k(100);
-		i && (R = j({
-			disabled: _,
-			toFormValue: ({ from: t, to: n }) => {
-				let r = e.name.value;
+		let P = O(0), F = O(100);
+		d(r, () => a ? `${P.value},${F.value}` : N.value, (e) => {
+			if (a) {
+				let [t, n] = e.split(",").map(Number);
+				Number.isFinite(t) && (P.value = o.snap(t)), Number.isFinite(n) && (F.value = o.snap(n));
+				return;
+			}
+			let t = Number(e);
+			Number.isFinite(t) && (N.value = String(o.snap(t)));
+		}), a && (T({
+			disabled: c,
+			toFormValue: ({ from: e, to: t }) => {
+				let r = n.name.value;
 				if (!r) return null;
 				let i = new FormData();
-				return i.append(`${r}[from]`, String(t)), i.append(`${r}[to]`, String(n)), i;
+				return i.append(`${r}[from]`, String(e)), i.append(`${r}[to]`, String(t)), i;
 			},
-			value: O(() => ({
-				from: B.value,
-				to: V.value
+			value: D(() => ({
+				from: P.value,
+				to: F.value
 			}))
-		}), A(e.from, (e) => {
-			B.value = a.snap(Number(e));
-		}, { immediate: !0 }), A(e.to, (e) => {
-			V.value = a.snap(Number(e));
+		}), k(n.from, (e) => {
+			P.value = o.snap(Number(e));
+		}, { immediate: !0 }), k(n.to, (e) => {
+			F.value = o.snap(Number(e));
 		}, { immediate: !0 }));
-		let H = T(), U = T(), W = T(), G = T(), K = g("slider-start"), q = g("slider-end"), J = (e) => {
-			let n = a.toPercent(e);
-			t.style.setProperty("--_thumb-pos", `${n}%`), t.style.setProperty("--_fill-start", "0%"), t.style.setProperty("--_fill-width", `${n}%`);
-		}, Y = () => {
-			let e = a.toPercent(B.value), n = a.toPercent(V.value);
-			t.style.setProperty("--_thumb-start", `${e}%`), t.style.setProperty("--_thumb-end", `${n}%`), t.style.setProperty("--_fill-start", `${e}%`), t.style.setProperty("--_fill-width", `${n - e}%`);
-		}, X = (e) => {
-			o?.validateOn?.value === e && R?.reportValidity();
-		}, Z = (t) => {
-			Y();
+		let I = w(), L = w(), R = w(), z = w(), B = w(), V = g("slider-start"), H = g("slider-end"), U = (e) => {
+			let t = o.toPercent(e);
+			r.style.setProperty("--_thumb-pos", `${t}%`), r.style.setProperty("--_fill-start", "0%"), r.style.setProperty("--_fill-width", `${t}%`);
+		}, W = () => {
+			let e = o.toPercent(P.value), t = o.toPercent(F.value);
+			r.style.setProperty("--_thumb-start", `${e}%`), r.style.setProperty("--_thumb-end", `${t}%`), r.style.setProperty("--_fill-start", `${e}%`), r.style.setProperty("--_fill-width", `${t - e}%`);
+		}, G = () => {
+			let e = a ? `${P.value},${F.value}` : N.value;
+			p(r, e), f(r, "input"), f(r, "change");
+		}, K = (e, t) => {
+			W();
 			let r = (e) => {
 				let n = t.getBoundingClientRect();
-				return a.fromClientX(e, n);
-			}, i = null, o = (e) => {
-				i === "start" ? B.value = Math.min(a.snap(e), V.value) : i === "end" && (V.value = Math.max(a.snap(e), B.value)), B.value = a.clamp(B.value), V.value = a.clamp(V.value), Y(), n("change", {
-					from: B.value,
-					to: V.value,
-					value: {
-						from: B.value,
-						to: V.value
-					}
-				}), X("change");
+				return o.fromClientX(e, n);
+			}, i = null, a = (e) => {
+				i === "start" ? P.value = Math.min(o.snap(e), F.value) : i === "end" && (F.value = Math.max(o.snap(e), P.value)), P.value = o.clamp(P.value), F.value = o.clamp(F.value), W(), G();
 			};
-			S(t, "pointerdown", M(() => !_.value, (e) => {
+			x(e, "pointerdown", A(() => !c.value, (e) => {
 				e.preventDefault();
 				let t = r(e.clientX);
-				i = Math.abs(t - B.value) <= Math.abs(t - V.value) ? "start" : "end", e.target.setPointerCapture(e.pointerId), o(t);
-			})), S(t, "pointermove", M(() => !!i, (e) => {
-				e.preventDefault(), p.value ||= !0, o(r(e.clientX));
-			})), S(t, "pointerup", M(() => !!i, (e) => {
-				e.preventDefault(), i = null, p.value = !1, e.target.releasePointerCapture(e.pointerId);
+				i = Math.abs(t - P.value) <= Math.abs(t - F.value) ? "start" : "end", e.target.setPointerCapture(e.pointerId), a(t);
+			})), x(e, "pointermove", A(() => !!i, (e) => {
+				e.preventDefault(), s.value ||= !0, a(r(e.clientX));
+			})), x(e, "pointerup", A(() => !!i, (e) => {
+				e.preventDefault(), i = null, s.value = !1, e.target.releasePointerCapture(e.pointerId);
 			}));
-			let s = (e, t) => (r) => {
-				if (_.value) return;
-				let i = a.nextFromKey(r.key, e());
-				i !== null && (r.preventDefault(), t(a.snap(i)), Y(), n("change", {
-					from: B.value,
-					originalEvent: r,
-					to: V.value,
-					value: {
-						from: B.value,
-						to: V.value
-					}
-				}), X("change"));
-			}, c = W.value, l = G.value;
-			c && (S(c, "keydown", s(() => B.value, (e) => {
-				B.value = Math.min(e, V.value);
-			})), x(m(c, {
+			let l = (e, t) => (n) => {
+				if (c.value) return;
+				let r = o.nextFromKey(n.key, e());
+				r !== null && (n.preventDefault(), t(o.snap(r)), W(), G());
+			}, u = z.value, d = B.value;
+			u && (x(u, "keydown", l(() => P.value, (e) => {
+				P.value = Math.min(e, F.value);
+			})), b(h({ aria: {
 				label: "Range start",
-				valuemax: () => V.value,
-				valuemin: () => a.min(),
-				valuenow: () => B.value,
-				valuetext: () => e["from-value-text"].value ?? null
-			}))), l && (S(l, "keydown", s(() => V.value, (e) => {
-				V.value = Math.max(e, B.value);
-			})), x(m(l, {
+				valuemax: () => F.value,
+				valuemin: () => o.min(),
+				valuenow: () => P.value,
+				valuetext: () => n["from-value-text"].value ?? null
+			} }, { target: u }))), d && (x(d, "keydown", l(() => F.value, (e) => {
+				F.value = Math.max(e, P.value);
+			})), b(h({ aria: {
 				label: "Range end",
-				valuemax: () => a.max(),
-				valuemin: () => B.value,
-				valuenow: () => V.value,
-				valuetext: () => e["to-value-text"].value ?? null
-			})));
-		}, Q = (e) => {
-			J(Number(z.value));
-			let r = (t) => {
-				if (_.value) return;
-				let r = e.getBoundingClientRect(), i = a.fromClientX(t, r);
-				Number(z.value) !== i && (z.value = i.toString(), J(i), n("change", { value: i }), X("change"));
+				valuemax: () => o.max(),
+				valuemin: () => P.value,
+				valuenow: () => F.value,
+				valuetext: () => n["to-value-text"].value ?? null
+			} }, { target: d })));
+		}, q = (e, t) => {
+			U(Number(N.value));
+			let n = (e) => {
+				if (c.value) return;
+				let n = t.getBoundingClientRect(), r = o.fromClientX(e, n);
+				Number(N.value) !== r && (N.value = r.toString(), U(r), G());
 			}, i = !1;
-			S(e, "pointerdown", M(() => !_.value, (e) => {
-				e.preventDefault(), i = !0, r(e.clientX), e.target.setPointerCapture(e.pointerId);
-			})), S(e, "pointermove", M(() => i, (e) => {
-				e.preventDefault(), p.value ||= !0, r(e.clientX);
-			})), S(e, "pointerup", M(() => i, (e) => {
-				e.preventDefault(), i = !1, p.value = !1, e.target.releasePointerCapture(e.pointerId);
-			})), S(t, "keydown", M(() => !_.value, (e) => {
-				let t = Number(z.value || 0), r = a.nextFromKey(e.key, t);
-				if (r === null) return;
+			x(e, "pointerdown", A(() => !c.value, (e) => {
+				e.preventDefault(), i = !0, n(e.clientX), e.target.setPointerCapture(e.pointerId);
+			})), x(e, "pointermove", A(() => i, (e) => {
+				e.preventDefault(), s.value ||= !0, n(e.clientX);
+			})), x(e, "pointerup", A(() => i, (e) => {
+				e.preventDefault(), i = !1, s.value = !1, e.target.releasePointerCapture(e.pointerId);
+			})), x(r, "keydown", A(() => !c.value, (e) => {
+				let t = Number(N.value || 0), n = o.nextFromKey(e.key, t);
+				if (n === null) return;
 				e.preventDefault();
-				let i = a.clamp(r);
-				i !== t && (z.value = i.toString(), J(i), n("change", {
-					originalEvent: e,
-					value: i
-				}), X("change"));
+				let r = o.clamp(n);
+				r !== t && (N.value = r.toString(), U(r), G());
 			}));
 		};
-		return C(() => {
-			let e = H.value;
-			if (e) {
-				if (r.has().value && U.value) {
+		return S(() => {
+			let e = I.value, t = R.value;
+			if (!(!e || !t)) {
+				if (i.has().value && L.value) {
 					let e = g("slider-label");
-					U.value.id = e, i || (w.value = e);
+					L.value.id = e, a || (l.value = e);
 				}
-				i ? Z(e) : Q(e);
+				a ? K(e, t) : q(e, t);
 			}
 		}), y`
-      <div class="slider-container" part="slider" ref=${H}>
-        <div class="slider-track" part="track">
+      <div class="slider-container" part="slider" ref=${I}>
+        <div class="slider-track" part="track" ref=${R}>
           <div class="slider-fill" part="fill"></div>
           <div class="slider-thumb slider-thumb-sole" part="thumb"></div>
           <div
             class="slider-thumb slider-thumb-start"
             part="thumb-start"
-            ref=${W}
+            ref=${z}
             role="slider"
-            tabindex="${() => _.value ? "-1" : "0"}"
-            :aria-describedby="${L}"
-            id="${K}"></div>
+            tabindex="${() => c.value ? "-1" : "0"}"
+            aria-describedby="${M}"
+            id="${V}"></div>
           <div
             class="slider-thumb slider-thumb-end"
             part="thumb-end"
-            ref=${G}
+            ref=${B}
             role="slider"
-            tabindex="${() => _.value ? "-1" : "0"}"
-            :aria-describedby="${L}"
-            id="${q}"></div>
+            tabindex="${() => c.value ? "-1" : "0"}"
+            aria-describedby="${M}"
+            id="${H}"></div>
         </div>
       </div>
-      <span class="label" part="label" ref=${U}><slot></slot></span>
-      ${f(N, F, I)}
+      <span class="label" part="label" ref=${L}><slot></slot></span>
+      ${u(m, C, j)}
     `;
 	},
 	styles: [
-		n,
-		r,
-		t(s),
-		p,
-		e
+		i,
+		a,
+		r(l),
+		m,
+		n
 	]
 });
 //#endregion
-export { N as SLIDER_TAG };
+export { j as SLIDER_TAG };
 
 //# sourceMappingURL=slider.js.map

package/dist/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../src/inputs/slider/slider.ts"],"sourcesContent":["import {\n  createStableId,\n  define,\n  html,\n  inject,\n  prop,\n  ref,\n  aria,\n  bind,\n  getHost,\n  onCleanup,\n  onEvent,\n  onMounted,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { createErrorHelperState, createSliderControl } from '../../headless';\nimport { disablableBundle, sizableBundle, SLIDER_SIZE_PRESET, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './slider.css?inline';\n\nconst guard =\n  <E extends Event = Event>(condition: () => unknown, handler: (e: E) => void): ((e: E) => void) =>\n  (e) => {\n    if (condition()) handler(e);\n  };\n\n/** Slider component properties */\n\nexport type OreSliderEvents = {\n  change: { from?: number; originalEvent?: Event; to?: number; value: number | { from: number; to: number } };\n};\n\nexport type OreSliderProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message — marks the field as invalid (fallback when the `error` slot is empty) */\n  error?: string;\n  /** Range mode: lower bound */\n  from?: number | string;\n  /** Range mode a11y label for the start thumb (e.g. \"$20\") */\n  'from-value-text'?: string;\n  /** Helper text displayed below the slider (fallback when the `helper` slot is empty) */\n  helper?: string;\n  /** Maximum value */\n  max?: number | string;\n  /** Minimum value */\n  min?: number | string;\n  /** Single-value mode: form field name */\n  name?: string;\n  /** Activate two-thumb range selection */\n  range?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Step increment */\n  step?: number | string;\n  /** Range mode: upper bound */\n  to?: number | string;\n  /** Range mode a11y label for the end thumb (e.g. \"$80\") */\n  'to-value-text'?: string;\n  /** Single-value mode: current value */\n  value?: number | string;\n  /** Single-value mode a11y label override (e.g. \"75%\"). Overrides raw aria-valuenow. */\n  'value-text'?: string;\n};\n\n/**\n * A slider for selecting a single numeric value or a numeric range.\n *\n * Add the boolean `range` attribute to activate two-thumb range mode.\n *\n * @element ore-slider\n *\n * @attr {number}  min   - Minimum value (default: 0)\n * @attr {number}  max   - Maximum value (default: 100)\n * @attr {number}  step  - Step increment (default: 1)\n * @attr {number}  value - Current value (single mode)\n * @attr {number}  from  - Lower bound (range mode)\n * @attr {number}  to    - Upper bound (range mode)\n * @attr {boolean} range - Activate range mode\n * @attr {boolean} disabled - Disable interaction\n * @attr {string}  name  - Form field name (single mode)\n * @attr {string}  color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string}  size  - 'sm' | 'md' | 'lg'\n * @attr {string}  helper - Helper text below the slider\n * @attr {string}  error  - Error message below the slider\n *\n * @fires change - detail always includes `value`; single mode: { value: number }, range mode: { value: { from, to }, from, to }, plus optional originalEvent\n *\n * @slot - Slider label text\n *\n * @part slider      - Slider container\n * @part track       - Track element\n * @part fill        - Fill element\n * @part thumb       - Single-value thumb\n * @part thumb-start - Range start thumb\n * @part thumb-end   - Range end thumb\n * @part label       - Label element\n * @part helper-text - The helper/error text element\n *\n * @cssprop --slider-height    - Track height\n * @cssprop --slider-size      - Thumb dimensions\n * @cssprop --slider-track-bg  - Track background color\n * @cssprop --slider-fill      - Active fill color\n * @cssprop --slider-thumb-bg  - Thumb background color\n *\n * @example\n * ```html\n * <ore-slider value=\"50\" name=\"volume\">Volume</ore-slider>\n * <ore-slider range from=\"20\" to=\"80\" color=\"primary\">Price range</ore-slider>\n * ```\n */\nexport const SLIDER_TAG = 'ore-slider' as const;\ndefine<OreSliderProps>(SLIDER_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    from: prop.number(0),\n    'from-value-text': prop.string(),\n    helper: prop.string(),\n    max: prop.number(100),\n    min: prop.number(0),\n    name: prop.string(),\n    range: prop.bool(false),\n    step: prop.number(1),\n    to: prop.number(100),\n    'to-value-text': prop.string(),\n    value: prop.number(0),\n    'value-text': prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreSliderEvents>();\n    const slots = useSlots();\n\n    // Treat `range` as static — determined at first render\n    const isRange = props.range.value;\n    // ── Shared helpers ────────────────────────────────────────────\n    const sliderControl = createSliderControl({\n      max: props.max,\n      min: props.min,\n      step: props.step,\n    });\n    // ── Single-value state ────────────────────────────────────────\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const isDragging = signal(false);\n    const isDisabled = fCtxProps.disabled;\n    const labelledById = signal<string | undefined>(undefined);\n    const assistiveId = createStableId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    bind({\n      attr: {\n        'data-dragging': () => (isDragging.value ? true : undefined),\n        size: fCtxProps.size,\n      },\n    });\n\n    let sliderFd:\n      | {\n          reportValidity: () => boolean;\n        }\n      | undefined;\n    const valueSignal = signal('0');\n\n    if (!isRange) {\n      sliderFd = useField({ disabled: isDisabled, value: valueSignal });\n      watch(\n        props.value,\n        (v) => {\n          valueSignal.value = String(v);\n        },\n        { immediate: true },\n      );\n      bind({\n        attr: {\n          ariaDescribedby: () => ariaDescribedBy.value ?? null,\n          ariaDisabled: () => (isDisabled.value ? 'true' : null),\n          ariaLabelledby: () => labelledById.value ?? null,\n          ariaValuemax: () => sliderControl.max(),\n          ariaValuemin: () => sliderControl.min(),\n          ariaValuenow: () => Number(valueSignal.value || 0),\n          ariaValuetext: () => props['value-text'].value ?? null,\n          role: () => 'slider',\n          tabindex: () => (isDisabled.value ? null : '0'),\n        },\n      });\n    }\n\n    // ── Range state ───────────────────────────────────────────────\n    const startVal = signal(0);\n    const endVal = signal(100);\n\n    if (isRange) {\n      sliderFd = useField<{\n        from: number;\n        to: number;\n      }>({\n        disabled: isDisabled,\n        toFormValue: ({ from, to }) => {\n          const name = props.name.value;\n\n          if (!name) return null;\n\n          const fd = new FormData();\n\n          fd.append(`${name}[from]`, String(from));\n          fd.append(`${name}[to]`, String(to));\n\n          return fd;\n        },\n        value: computed(() => ({ from: startVal.value, to: endVal.value })),\n      });\n      watch(\n        props.from,\n        (v) => {\n          startVal.value = sliderControl.snap(Number(v));\n        },\n        { immediate: true },\n      );\n      watch(\n        props.to,\n        (v) => {\n          endVal.value = sliderControl.snap(Number(v));\n        },\n        { immediate: true },\n      );\n    }\n\n    // ── Refs ──────────────────────────────────────────────────────\n    const containerRef = ref<HTMLDivElement>();\n    const labelRef = ref<HTMLSpanElement>();\n    const thumbStartRef = ref<HTMLDivElement>();\n    const thumbEndRef = ref<HTMLDivElement>();\n    const startId = createStableId('slider-start');\n    const endId = createStableId('slider-end');\n    // ── CSS update helpers ────────────────────────────────────────\n    const updateSingleCSS = (value: number) => {\n      const pct = sliderControl.toPercent(value);\n\n      el.style.setProperty('--_thumb-pos', `${pct}%`);\n      el.style.setProperty('--_fill-start', '0%');\n      el.style.setProperty('--_fill-width', `${pct}%`);\n    };\n    const updateRangeCSS = () => {\n      const s = sliderControl.toPercent(startVal.value);\n      const e = sliderControl.toPercent(endVal.value);\n\n      el.style.setProperty('--_thumb-start', `${s}%`);\n      el.style.setProperty('--_thumb-end', `${e}%`);\n      el.style.setProperty('--_fill-start', `${s}%`);\n      el.style.setProperty('--_fill-width', `${e - s}%`);\n    };\n\n    // ── Range mode setup ──────────────────────────────────────────\n    const triggerValidation = (on: 'blur' | 'change') => {\n      if (formCtx?.validateOn?.value === on) {\n        sliderFd?.reportValidity();\n      }\n    };\n\n    const setupRangeMode = (container: HTMLDivElement) => {\n      updateRangeCSS();\n\n      const clientToValue = (clientX: number) => {\n        const rect = container.getBoundingClientRect();\n\n        return sliderControl.fromClientX(clientX, rect);\n      };\n      let dragging: 'start' | 'end' | null = null;\n      const applyDrag = (val: number) => {\n        if (dragging === 'start') startVal.value = Math.min(sliderControl.snap(val), endVal.value);\n        else if (dragging === 'end') endVal.value = Math.max(sliderControl.snap(val), startVal.value);\n\n        startVal.value = sliderControl.clamp(startVal.value);\n        endVal.value = sliderControl.clamp(endVal.value);\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n\n      onEvent(\n        container,\n        'pointerdown',\n        guard(\n          () => !isDisabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            const val = clientToValue(e.clientX);\n\n            dragging = Math.abs(val - startVal.value) <= Math.abs(val - endVal.value) ? 'start' : 'end';\n            (e.target as Element).setPointerCapture(e.pointerId);\n            applyDrag(val);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointermove',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!isDragging.value) isDragging.value = true;\n\n            applyDrag(clientToValue(e.clientX));\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointerup',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            dragging = null;\n            isDragging.value = false;\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n\n      const makeThumbKeydown = (getVal: () => number, setVal: (v: number) => void) => (e: KeyboardEvent) => {\n        if (isDisabled.value) return;\n\n        const next = sliderControl.nextFromKey(e.key, getVal());\n\n        if (next === null) return;\n\n        e.preventDefault();\n        setVal(sliderControl.snap(next));\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          originalEvent: e,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n      const thumbStartEl = thumbStartRef.value;\n      const thumbEndEl = thumbEndRef.value;\n\n      if (thumbStartEl) {\n        onEvent(\n          thumbStartEl,\n          'keydown',\n          makeThumbKeydown(\n            () => startVal.value,\n            (v) => {\n              startVal.value = Math.min(v, endVal.value);\n            },\n          ),\n        );\n        onCleanup(\n          aria(thumbStartEl, {\n            label: 'Range start',\n            valuemax: () => endVal.value,\n            valuemin: () => sliderControl.min(),\n            valuenow: () => startVal.value,\n            valuetext: () => props['from-value-text'].value ?? null,\n          }),\n        );\n      }\n\n      if (thumbEndEl) {\n        onEvent(\n          thumbEndEl,\n          'keydown',\n          makeThumbKeydown(\n            () => endVal.value,\n            (v) => {\n              endVal.value = Math.max(v, startVal.value);\n            },\n          ),\n        );\n        onCleanup(\n          aria(thumbEndEl, {\n            label: 'Range end',\n            valuemax: () => sliderControl.max(),\n            valuemin: () => startVal.value,\n            valuenow: () => endVal.value,\n            valuetext: () => props['to-value-text'].value ?? null,\n          }),\n        );\n      }\n    };\n    // ── Single-value mode setup ───────────────────────────────────\n    const setupSingleMode = (container: HTMLDivElement) => {\n      updateSingleCSS(Number(valueSignal.value));\n\n      const updateValue = (clientX: number) => {\n        if (isDisabled.value) return;\n\n        const rect = container.getBoundingClientRect();\n        const newValue = sliderControl.fromClientX(clientX, rect);\n\n        if (Number(valueSignal.value) !== newValue) {\n          valueSignal.value = newValue.toString();\n          updateSingleCSS(newValue);\n          emit('change', { value: newValue });\n          triggerValidation('change');\n        }\n      };\n      let isPointerDragging = false;\n\n      onEvent(\n        container,\n        'pointerdown',\n        guard(\n          () => !isDisabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isPointerDragging = true;\n            updateValue(e.clientX);\n            (e.target as Element).setPointerCapture(e.pointerId);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointermove',\n        guard(\n          () => isPointerDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!isDragging.value) isDragging.value = true;\n\n            updateValue(e.clientX);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointerup',\n        guard(\n          () => isPointerDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isPointerDragging = false;\n            isDragging.value = false;\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n      onEvent(\n        el,\n        'keydown',\n        guard(\n          () => !isDisabled.value,\n          (e: KeyboardEvent) => {\n            const val = Number(valueSignal.value || 0);\n            const next = sliderControl.nextFromKey(e.key, val);\n\n            if (next === null) return;\n\n            e.preventDefault();\n\n            const newValue = sliderControl.clamp(next);\n\n            if (newValue !== val) {\n              valueSignal.value = newValue.toString();\n              updateSingleCSS(newValue);\n              emit('change', { originalEvent: e, value: newValue });\n              triggerValidation('change');\n            }\n          },\n        ),\n      );\n    };\n\n    onMounted(() => {\n      const container = containerRef.value;\n\n      if (!container) return;\n\n      if (slots.has().value && labelRef.value) {\n        const labelId = createStableId('slider-label');\n\n        labelRef.value.id = labelId;\n\n        if (!isRange) labelledById.value = labelId;\n      }\n\n      if (isRange) setupRangeMode(container);\n      else setupSingleMode(container);\n    });\n\n    return html`\n      <div class=\"slider-container\" part=\"slider\" ref=${containerRef}>\n        <div class=\"slider-track\" part=\"track\">\n          <div class=\"slider-fill\" part=\"fill\"></div>\n          <div class=\"slider-thumb slider-thumb-sole\" part=\"thumb\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-start\"\n            part=\"thumb-start\"\n            ref=${thumbStartRef}\n            role=\"slider\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n            :aria-describedby=\"${ariaDescribedBy}\"\n            id=\"${startId}\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-end\"\n            part=\"thumb-end\"\n            ref=${thumbEndRef}\n            role=\"slider\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n            :aria-describedby=\"${ariaDescribedBy}\"\n            id=\"${endId}\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" ref=${labelRef}><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    disabledStateMixin,\n    colorThemeMixin,\n    sizeVariantMixin(SLIDER_SIZE_PRESET),\n    componentStyles,\n    coarsePointerMixin,\n  ],\n});\n"],"mappings":"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"}
+{"version":3,"file":"slider.js","names":[],"sources":["../src/inputs/slider/slider.ts"],"sourcesContent":["import {\n  createStableId,\n  define,\n  html,\n  prop,\n  ref,\n  bind,\n  getHost,\n  onCleanup,\n  onEvent,\n  onMounted,\n  useSlots,\n} from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { createErrorHelperState, createSliderControl } from '../../core';\nimport { disablableBundle, sizableBundle, SLIDER_SIZE_PRESET, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './slider.css?inline';\n\nconst guard =\n  <E extends Event = Event>(condition: () => unknown, handler: (e: E) => void): ((e: E) => void) =>\n  (e) => {\n    if (condition()) handler(e);\n  };\n\n/** Slider component properties */\n\nexport type OreSliderEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreSliderProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message — marks the field as invalid (fallback when the `error` slot is empty) */\n  error?: string;\n  /** Range mode: lower bound */\n  from?: number | string;\n  /** Range mode a11y label for the start thumb (e.g. \"$20\") */\n  'from-value-text'?: string;\n  /** Stretch to full width of container */\n  fullwidth?: boolean;\n  /** Helper text displayed below the slider (fallback when the `helper` slot is empty) */\n  helper?: string;\n  /** Maximum value */\n  max?: number | string;\n  /** Minimum value */\n  min?: number | string;\n  /** Single-value mode: form field name */\n  name?: string;\n  /** Activate two-thumb range selection */\n  range?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Step increment */\n  step?: number | string;\n  /** Range mode: upper bound */\n  to?: number | string;\n  /** Range mode a11y label for the end thumb (e.g. \"$80\") */\n  'to-value-text'?: string;\n  /** Single-value mode: current value */\n  value?: number | string;\n  /** Single-value mode a11y label override (e.g. \"75%\"). Overrides raw aria-valuenow. */\n  'value-text'?: string;\n};\n\n/**\n * A slider for selecting a single numeric value or a numeric range.\n *\n * Add the boolean `range` attribute to activate two-thumb range mode.\n *\n * @element ore-slider\n *\n * @attr {number}  min   - Minimum value (default: 0)\n * @attr {number}  max   - Maximum value (default: 100)\n * @attr {number}  step  - Step increment (default: 1)\n * @attr {number}  value - Current value (single mode)\n * @attr {number}  from  - Lower bound (range mode)\n * @attr {number}  to    - Upper bound (range mode)\n * @attr {boolean} range - Activate range mode\n * @attr {boolean} disabled - Disable interaction\n * @attr {string}  name  - Form field name (single mode)\n * @attr {string}  color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string}  size  - 'sm' | 'md' | 'lg'\n * @attr {string}  helper - Helper text below the slider\n * @attr {string}  error  - Error message below the slider\n * @attr {boolean} fullwidth - Stretch to full width of container\n *\n * @fires input - Emitted when the slider value changes.\n * @fires change - Emitted when the slider value changes.\n *\n * @slot - Slider label text\n *\n * @part slider      - Slider container\n * @part track       - Track element\n * @part fill        - Fill element\n * @part thumb       - Single-value thumb\n * @part thumb-start - Range start thumb\n * @part thumb-end   - Range end thumb\n * @part label       - Label element\n * @part helper-text - The helper/error text element\n *\n * @cssprop --slider-height    - Track height\n * @cssprop --slider-size      - Thumb dimensions\n * @cssprop --slider-track-bg  - Track background color\n * @cssprop --slider-fill      - Active fill color\n * @cssprop --slider-thumb-bg  - Thumb background color\n *\n * @example\n * ```html\n * <ore-slider value=\"50\" name=\"volume\">Volume</ore-slider>\n * <ore-slider range from=\"20\" to=\"80\" color=\"primary\">Price range</ore-slider>\n * ```\n */\nexport const SLIDER_TAG = 'ore-slider' as const;\ndefine<OreSliderProps>(SLIDER_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    from: prop.number(0),\n    'from-value-text': prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    max: prop.number(100),\n    min: prop.number(0),\n    name: prop.string(),\n    range: prop.bool(false),\n    step: prop.number(1),\n    to: prop.number(100),\n    'to-value-text': prop.string(),\n    value: prop.number(0),\n    'value-text': prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const slots = useSlots();\n\n    // Treat `range` as static — determined at first render\n    const isRange = props.range.value;\n    // ── Shared helpers ────────────────────────────────────────────\n    const sliderControl = createSliderControl({\n      max: props.max,\n      min: props.min,\n      step: props.step,\n    });\n    // ── Single-value state ────────────────────────────────────────\n    const isDragging = signal(false);\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const labelledById = signal<string | undefined>(undefined);\n    const assistiveId = createStableId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    bind({\n      attr: {\n        'data-dragging': () => (isDragging.value ? true : undefined),\n        size: props.size,\n      },\n    });\n\n    const valueSignal = signal('0');\n\n    if (!isRange) {\n      useField({ disabled: isDisabled, value: valueSignal });\n      watch(\n        props.value,\n        (v) => {\n          valueSignal.value = String(v);\n        },\n        { immediate: true },\n      );\n      bind({\n        attr: {\n          ariaDescribedby: () => ariaDescribedBy.value ?? null,\n          ariaDisabled: () => (isDisabled.value ? 'true' : null),\n          ariaLabelledby: () => labelledById.value ?? null,\n          ariaValuemax: () => sliderControl.max(),\n          ariaValuemin: () => sliderControl.min(),\n          ariaValuenow: () => Number(valueSignal.value || 0),\n          ariaValuetext: () => props['value-text'].value ?? null,\n          role: () => 'slider',\n          tabindex: () => (isDisabled.value ? null : '0'),\n        },\n      });\n    }\n\n    // ── Range state ───────────────────────────────────────────────\n    const startVal = signal(0);\n    const endVal = signal(100);\n\n    defineFieldValue(\n      el,\n      () => (isRange ? `${startVal.value},${endVal.value}` : valueSignal.value),\n      (value) => {\n        if (isRange) {\n          const [from, to] = value.split(',').map(Number);\n\n          if (Number.isFinite(from)) startVal.value = sliderControl.snap(from);\n\n          if (Number.isFinite(to)) endVal.value = sliderControl.snap(to);\n\n          return;\n        }\n\n        const next = Number(value);\n\n        if (Number.isFinite(next)) valueSignal.value = String(sliderControl.snap(next));\n      },\n    );\n\n    if (isRange) {\n      useField<{\n        from: number;\n        to: number;\n      }>({\n        disabled: isDisabled,\n        toFormValue: ({ from, to }) => {\n          const name = props.name.value;\n\n          if (!name) return null;\n\n          const fd = new FormData();\n\n          fd.append(`${name}[from]`, String(from));\n          fd.append(`${name}[to]`, String(to));\n\n          return fd;\n        },\n        value: computed(() => ({ from: startVal.value, to: endVal.value })),\n      });\n      watch(\n        props.from,\n        (v) => {\n          startVal.value = sliderControl.snap(Number(v));\n        },\n        { immediate: true },\n      );\n      watch(\n        props.to,\n        (v) => {\n          endVal.value = sliderControl.snap(Number(v));\n        },\n        { immediate: true },\n      );\n    }\n\n    // ── Refs ──────────────────────────────────────────────────────\n    const containerRef = ref<HTMLDivElement>();\n    const labelRef = ref<HTMLSpanElement>();\n    const trackRef = ref<HTMLDivElement>();\n    const thumbStartRef = ref<HTMLDivElement>();\n    const thumbEndRef = ref<HTMLDivElement>();\n    const startId = createStableId('slider-start');\n    const endId = createStableId('slider-end');\n    // ── CSS update helpers ────────────────────────────────────────\n    const updateSingleCSS = (value: number) => {\n      const pct = sliderControl.toPercent(value);\n\n      el.style.setProperty('--_thumb-pos', `${pct}%`);\n      el.style.setProperty('--_fill-start', '0%');\n      el.style.setProperty('--_fill-width', `${pct}%`);\n    };\n    const updateRangeCSS = () => {\n      const s = sliderControl.toPercent(startVal.value);\n      const e = sliderControl.toPercent(endVal.value);\n\n      el.style.setProperty('--_thumb-start', `${s}%`);\n      el.style.setProperty('--_thumb-end', `${e}%`);\n      el.style.setProperty('--_fill-start', `${s}%`);\n      el.style.setProperty('--_fill-width', `${e - s}%`);\n    };\n    const emitValueChange = () => {\n      const value = isRange ? `${startVal.value},${endVal.value}` : valueSignal.value;\n\n      setFieldValue(el, value);\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n    };\n\n    // ── Range mode setup ──────────────────────────────────────────\n    const setupRangeMode = (container: HTMLDivElement, track: HTMLDivElement) => {\n      updateRangeCSS();\n\n      const clientToValue = (clientX: number) => {\n        const rect = track.getBoundingClientRect();\n\n        return sliderControl.fromClientX(clientX, rect);\n      };\n      let dragging: 'start' | 'end' | null = null;\n      const applyDrag = (val: number) => {\n        if (dragging === 'start') startVal.value = Math.min(sliderControl.snap(val), endVal.value);\n        else if (dragging === 'end') endVal.value = Math.max(sliderControl.snap(val), startVal.value);\n\n        startVal.value = sliderControl.clamp(startVal.value);\n        endVal.value = sliderControl.clamp(endVal.value);\n        updateRangeCSS();\n        emitValueChange();\n      };\n\n      onEvent(\n        container,\n        'pointerdown',\n        guard(\n          () => !isDisabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            const val = clientToValue(e.clientX);\n\n            dragging = Math.abs(val - startVal.value) <= Math.abs(val - endVal.value) ? 'start' : 'end';\n            (e.target as Element).setPointerCapture(e.pointerId);\n            applyDrag(val);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointermove',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!isDragging.value) isDragging.value = true;\n\n            applyDrag(clientToValue(e.clientX));\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointerup',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            dragging = null;\n            isDragging.value = false;\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n\n      const makeThumbKeydown = (getVal: () => number, setVal: (v: number) => void) => (e: KeyboardEvent) => {\n        if (isDisabled.value) return;\n\n        const next = sliderControl.nextFromKey(e.key, getVal());\n\n        if (next === null) return;\n\n        e.preventDefault();\n        setVal(sliderControl.snap(next));\n        updateRangeCSS();\n        emitValueChange();\n      };\n      const thumbStartEl = thumbStartRef.value;\n      const thumbEndEl = thumbEndRef.value;\n\n      if (thumbStartEl) {\n        onEvent(\n          thumbStartEl,\n          'keydown',\n          makeThumbKeydown(\n            () => startVal.value,\n            (v) => {\n              startVal.value = Math.min(v, endVal.value);\n            },\n          ),\n        );\n        onCleanup(\n          bind(\n            {\n              aria: {\n                label: 'Range start',\n                valuemax: () => endVal.value,\n                valuemin: () => sliderControl.min(),\n                valuenow: () => startVal.value,\n                valuetext: () => props['from-value-text'].value ?? null,\n              },\n            },\n            { target: thumbStartEl },\n          ),\n        );\n      }\n\n      if (thumbEndEl) {\n        onEvent(\n          thumbEndEl,\n          'keydown',\n          makeThumbKeydown(\n            () => endVal.value,\n            (v) => {\n              endVal.value = Math.max(v, startVal.value);\n            },\n          ),\n        );\n        onCleanup(\n          bind(\n            {\n              aria: {\n                label: 'Range end',\n                valuemax: () => sliderControl.max(),\n                valuemin: () => startVal.value,\n                valuenow: () => endVal.value,\n                valuetext: () => props['to-value-text'].value ?? null,\n              },\n            },\n            { target: thumbEndEl },\n          ),\n        );\n      }\n    };\n    // ── Single-value mode setup ───────────────────────────────────\n    const setupSingleMode = (container: HTMLDivElement, track: HTMLDivElement) => {\n      updateSingleCSS(Number(valueSignal.value));\n\n      const updateValue = (clientX: number) => {\n        if (isDisabled.value) return;\n\n        const rect = track.getBoundingClientRect();\n        const newValue = sliderControl.fromClientX(clientX, rect);\n\n        if (Number(valueSignal.value) !== newValue) {\n          valueSignal.value = newValue.toString();\n          updateSingleCSS(newValue);\n          emitValueChange();\n        }\n      };\n      let isPointerDragging = false;\n\n      onEvent(\n        container,\n        'pointerdown',\n        guard(\n          () => !isDisabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isPointerDragging = true;\n            updateValue(e.clientX);\n            (e.target as Element).setPointerCapture(e.pointerId);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointermove',\n        guard(\n          () => isPointerDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!isDragging.value) isDragging.value = true;\n\n            updateValue(e.clientX);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointerup',\n        guard(\n          () => isPointerDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isPointerDragging = false;\n            isDragging.value = false;\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n      onEvent(\n        el,\n        'keydown',\n        guard(\n          () => !isDisabled.value,\n          (e: KeyboardEvent) => {\n            const val = Number(valueSignal.value || 0);\n            const next = sliderControl.nextFromKey(e.key, val);\n\n            if (next === null) return;\n\n            e.preventDefault();\n\n            const newValue = sliderControl.clamp(next);\n\n            if (newValue !== val) {\n              valueSignal.value = newValue.toString();\n              updateSingleCSS(newValue);\n              emitValueChange();\n            }\n          },\n        ),\n      );\n    };\n\n    onMounted(() => {\n      const container = containerRef.value;\n      const track = trackRef.value;\n\n      if (!container || !track) return;\n\n      if (slots.has().value && labelRef.value) {\n        const labelId = createStableId('slider-label');\n\n        labelRef.value.id = labelId;\n\n        if (!isRange) labelledById.value = labelId;\n      }\n\n      if (isRange) setupRangeMode(container, track);\n      else setupSingleMode(container, track);\n    });\n\n    return html`\n      <div class=\"slider-container\" part=\"slider\" ref=${containerRef}>\n        <div class=\"slider-track\" part=\"track\" ref=${trackRef}>\n          <div class=\"slider-fill\" part=\"fill\"></div>\n          <div class=\"slider-thumb slider-thumb-sole\" part=\"thumb\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-start\"\n            part=\"thumb-start\"\n            ref=${thumbStartRef}\n            role=\"slider\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n            aria-describedby=\"${ariaDescribedBy}\"\n            id=\"${startId}\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-end\"\n            part=\"thumb-end\"\n            ref=${thumbEndRef}\n            role=\"slider\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n            aria-describedby=\"${ariaDescribedBy}\"\n            id=\"${endId}\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" ref=${labelRef}><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    disabledStateMixin,\n    colorThemeMixin,\n    sizeVariantMixin(SLIDER_SIZE_PRESET),\n    componentStyles,\n    reducedMotionMixin,\n  ],\n});\n"],"mappings":"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"}

package/dist/step.cjs

@@ -0,0 +1,47 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./content/stepper/_is-step-navigable.cjs"),i=require("./content/stepper/step.css.cjs"),a=require("./stepper.cjs");let o=require("@vielzeug/ore");var s=`ore-step`;(0,o.define)(s,{props:{...n.disablableBundle,color:o.prop.string(),error:o.prop.bool(!1),optional:o.prop.bool(!1),orientation:o.prop.oneOf([`horizontal`,`vertical`],`horizontal`),size:o.prop.string(),value:o.prop.string(``)},setup(e){let t=(0,o.getHost)(),n=(0,o.useSlots)(),i=(0,o.inject)(a.STEPPER_CTX),s=()=>i?i.stepValues.value.indexOf(e.value.value):-1,c=()=>i?.stepValues.value.length??0,l=()=>i?i.stepValues.value.indexOf(i.currentValue.value??``):-1,u=()=>{let e=s();return e>=0?e+1:1},d=()=>c()||1,f=()=>{let e=s(),t=l();return e>=0&&e===t},p=()=>{let e=s(),t=l();return e>=0&&t>=0&&e<t},m=()=>{let t=s(),n=l();return!!i&&r.isStepNavigable({disabled:e.disabled.value===!0,index:t,linear:i.linear.value,stepperClickable:i.clickable.value,stepperCurrentIndex:n})},h=()=>!!e.disabled.value;(0,o.bind)({attr:{completed:()=>p()?!0:void 0,current:()=>f()?!0:void 0,index:()=>{let e=s();return e>=0?String(e+1):void 0},navigable:()=>m()?!0:void 0,total:()=>i?String(c()):void 0}}),i&&(0,o.watchEffect)(()=>{let e=i.color.value,n=i.size.value,r=i.orientation.value;e!==void 0&&t.setAttribute(`color`,e),n!==void 0&&t.setAttribute(`size`,n),t.setAttribute(`orientation`,r)});let g=()=>{if(e.error.value)return`error`;if(p())return`completed`;if(f())return`current step`},_=()=>`Step ${u()} of ${d()}`,v=()=>{let e=g();return e?`${_()}, ${e}`:_()},y=n=>{if(n.stopPropagation(),!m()){n.preventDefault();return}t.dispatchEvent(new CustomEvent(`click`,{bubbles:!0,detail:{value:e.value.value}}))},b=()=>o.html`
+      <span class="indicator" part="indicator" aria-hidden="true">
+        <span class="icon-slot" ?hidden="${()=>!n.has(`icon`).value}"><slot name="icon"></slot></span>
+        ${()=>n.has(`icon`).value?``:e.error.value?o.html`
+                  <ore-icon name="x" size="14" stroke-width="3"></ore-icon>
+                `:p()?o.html`
+                    <ore-icon name="check" size="14" stroke-width="3"></ore-icon>
+                  `:o.html`
+                    <span class="number">${u}</span>
+                  `}
+      </span>
+    `,x=()=>o.html`
+      <span class="content" part="content">
+        <span class="sr-only">${v}</span>
+        <span class="label" part="label">
+          <span class="label-text"><slot></slot></span>
+          ${()=>e.optional.value?o.html`
+                  <span class="optional-hint">(optional)</span>
+                `:``}
+        </span>
+        <span class="description" part="description" ?hidden="${()=>!n.has(`description`).value}">
+          <slot name="description"></slot>
+        </span>
+      </span>
+    `;return o.html`
+      <li class="step" role="listitem">
+        <span class="connector connector-leading" part="connector" aria-hidden="true"></span>
+        <span class="connector connector-trailing" part="connector" aria-hidden="true"></span>
+        ${()=>m()?o.html`
+                <button
+                  type="button"
+                  class="control"
+                  part="control"
+                  aria-current="${()=>f()?`step`:null}"
+                  aria-disabled="${h}"
+                  tabindex="${()=>f()?`0`:`-1`}"
+                  @click="${y}">
+                  ${b()}${x()}
+                </button>
+              `:o.html`
+                <div class="control" part="control" aria-current="${()=>f()?`step`:null}">
+                  ${b()}${x()}
+                </div>
+              `}
+      </li>
+    `},styles:[t.colorThemeMixin,e.coarsePointerMixin,t.forcedColorsFocusMixin(`button.control`),i.default]}),exports.STEP_TAG=s;
+//# sourceMappingURL=step.cjs.map

package/dist/step.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.cjs","names":[],"sources":["../src/content/stepper/step.ts"],"sourcesContent":["import { define, html, inject, prop, bind, getHost, useSlots, watchEffect } from '@vielzeug/ore';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsFocusMixin } from '../../styles';\nimport { isStepNavigable } from './_is-step-navigable';\nimport stepStyles from './step.css?inline';\nimport { STEPPER_CTX } from './stepper';\n\nexport type OreStepProps = {\n  /**\n   * Theme color. Inherited from the parent `ore-stepper` when nested inside one (overrides\n   * this value); only takes effect on its own when `ore-step` is rendered standalone.\n   */\n  color?: ThemeColor;\n  /** Disables this step — it cannot be navigated to and is skipped by keyboard navigation. */\n  disabled?: boolean;\n  /** Marks this step as failed/invalid. Overrides the completed/current indicator visuals. */\n  error?: boolean;\n  /**\n   * Marks this step as optional. Renders a small \"(optional)\" hint next to the label.\n   * Purely presentational — has no effect on navigation.\n   */\n  optional?: boolean;\n  /** Orientation. Inherited from the parent `ore-stepper` when nested inside one. */\n  orientation?: 'horizontal' | 'vertical';\n  /** Component size. Inherited from the parent `ore-stepper` when nested inside one. */\n  size?: ComponentSize;\n  /** Unique identifier, matches `ore-stepper`'s `value` attribute. */\n  value: string;\n};\n\n/**\n * A single step trigger. Must be placed as a direct child of `ore-stepper`, which provides\n * this step's current/completed/navigable/index/total state via context — those are derived,\n * read-only attributes on this element, not settable props.\n *\n * @element ore-step\n *\n * @attr {string} value - Unique identifier, matches the parent ore-stepper's `value` attribute\n * @attr {boolean} disabled - Prevents navigation to this step\n * @attr {boolean} error - Marks the step as failed/invalid\n * @attr {boolean} optional - Renders an \"(optional)\" hint next to the label\n * @attr {boolean} current - Read-only. Derived from position relative to the parent ore-stepper's `value`.\n * @attr {boolean} completed - Read-only. Derived from position relative to the parent ore-stepper's `value`.\n * @attr {boolean} navigable - Read-only. Derived from the parent ore-stepper's `clickable`/`linear`/`disabled`.\n * @attr {number} index - Read-only. This step's 1-based position among its siblings.\n * @attr {number} total - Read-only. Total sibling step count.\n * @attr {string} color - Inherited from ore-stepper: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Inherited from ore-stepper: 'sm' | 'md' | 'lg'\n * @attr {string} orientation - Inherited from ore-stepper: 'horizontal' | 'vertical'\n *\n * @slot - Step label\n * @slot description - Optional supporting text shown below the label\n * @slot icon - Custom icon replacing the step number/check/error indicator\n *\n * @part control - Clickable (or static) root element for the step\n * @part indicator - Circular indicator holding the number/icon\n * @part content - Wrapper around the label and description\n * @part label - Step label element\n * @part description - Step description element\n * @part connector - Connector line segments (leading and trailing halves) either side of this step's indicator\n *\n * @example\n * ```html\n * <ore-step value=\"details\">Account details</ore-step>\n * <ore-step value=\"review\" disabled>Review</ore-step>\n * ```\n */\nexport const STEP_TAG = 'ore-step' as const;\ndefine<OreStepProps>(STEP_TAG, {\n  props: {\n    ...disablableBundle,\n    color: prop.string<ThemeColor>(),\n    error: prop.bool(false),\n    optional: prop.bool(false),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n    size: prop.string<ComponentSize>(),\n    value: prop.string(''),\n  },\n  setup(props) {\n    const el = getHost();\n    const slots = useSlots();\n    const stepperCtx = inject(STEPPER_CTX);\n\n    // ────────────────────────────────────────────────────────────────\n    // State derived from the parent ore-stepper's context — see stepper.ts's\n    // module doc comment for why this replaced parent-side attribute fan-out.\n    // ────────────────────────────────────────────────────────────────\n\n    // Plain functions, not `computed()` — every one of these ultimately reads\n    // `stepperCtx.stepValues`/`stepperCtx.currentValue`, which are themselves `computed()`s\n    // owned by the parent `ore-stepper`. Wrapping a *child* `computed()` around a *parent*\n    // `computed()` (a computed-to-computed dependency crossing a `provide()`/`inject()`\n    // boundary) is exactly the shape that surfaced two related bugs: a step's `completed`/\n    // `current` attributes going permanently stale after a few rapid selections, and — worse —\n    // a step's entire clickable/static control silently failing to render at all when its\n    // `ore-step` tag upgrades before its siblings exist in the light DOM yet (true whenever\n    // `ore-step`/`ore-stepper` are already `customElements.define()`d before this markup is\n    // parsed, e.g. every sandboxed live-preview iframe). Reading straight through to the\n    // parent's computeds on every call — no intermediate computed layer of our own to go\n    // stale — made both disappear. Cheap enough to not need memoizing (a couple of `indexOf`/\n    // comparisons over an already-memoized parent computed).\n    const stepIndex = (): number => (stepperCtx ? stepperCtx.stepValues.value.indexOf(props.value.value) : -1);\n    const totalSteps = (): number => stepperCtx?.stepValues.value.length ?? 0;\n    const currentIndex = (): number =>\n      stepperCtx ? stepperCtx.stepValues.value.indexOf(stepperCtx.currentValue.value ?? '') : -1;\n    // 1-based, always-sane values for on-screen text (the step number badge, the sr-only\n    // \"Step X of Y\" label) — falls back to \"1 of 1\" when rendered standalone with no parent\n    // `ore-stepper` to derive a real position from. Kept separate from the `index`/`total`\n    // *attributes* below, which correctly reflect nothing at all in that same standalone case.\n    const displayIndex = (): number => {\n      const index = stepIndex();\n\n      return index >= 0 ? index + 1 : 1;\n    };\n    const displayTotal = (): number => totalSteps() || 1;\n\n    const isCurrent = (): boolean => {\n      const index = stepIndex();\n      const current = currentIndex();\n\n      return index >= 0 && index === current;\n    };\n    // Purely positional — intentionally NOT gated on `props.error.value`. This also drives the\n    // `completed` *attribute* below, which `step.css` uses to color both connector segments\n    // either side of the indicator (`:host([completed]) .connector`); every *consumer* of this\n    // (the icon choice, the sr-only state label) already checks `error` first and short-circuits\n    // before it matters, so folding `!error` in here too would only end up suppressing\n    // `[completed]` on an error step that's before the current one — breaking the connector\n    // color chain right at that step instead of just swapping its icon.\n    const isCompleted = (): boolean => {\n      const index = stepIndex();\n      const current = currentIndex();\n\n      return index >= 0 && current >= 0 && index < current;\n    };\n    const isNavigable = (): boolean => {\n      const index = stepIndex();\n      const current = currentIndex();\n\n      return (\n        !!stepperCtx &&\n        isStepNavigable({\n          disabled: props.disabled.value === true,\n          index,\n          linear: stepperCtx.linear.value,\n          stepperClickable: stepperCtx.clickable.value,\n          stepperCurrentIndex: current,\n        })\n      );\n    };\n    const isDisabled = () => Boolean(props.disabled.value);\n\n    // Purely derived, read-only state — no matching `prop.*` declaration, so `bind()` is the\n    // sole writer and can safely reflect `undefined` (removes the attribute) when this step\n    // isn't nested inside an `ore-stepper` at all.\n    bind({\n      attr: {\n        completed: () => (isCompleted() ? true : undefined),\n        current: () => (isCurrent() ? true : undefined),\n        index: () => {\n          const index = stepIndex();\n\n          return index >= 0 ? String(index + 1) : undefined;\n        },\n        navigable: () => (isNavigable() ? true : undefined),\n        total: () => (stepperCtx ? String(totalSteps()) : undefined),\n      },\n    });\n\n    // `color`/`size`/`orientation` double as regular, independently-settable props (for a step\n    // rendered standalone) *and* stepper-inherited values — mirrors ore-tab-item's handling of\n    // its own `color`/`size`/`variant` inheritance from `ore-tabs`. Only forcibly overwrite the\n    // attribute when a parent context actually exists, so the plain prop reflection is left\n    // alone otherwise.\n    if (stepperCtx) {\n      watchEffect(() => {\n        const color = stepperCtx.color.value;\n        const size = stepperCtx.size.value;\n        const orientation = stepperCtx.orientation.value;\n\n        if (color !== undefined) el.setAttribute('color', color);\n\n        if (size !== undefined) el.setAttribute('size', size);\n\n        el.setAttribute('orientation', orientation);\n      });\n    }\n\n    const stateLabel = (): string | undefined => {\n      if (props.error.value) return 'error';\n\n      if (isCompleted()) return 'completed';\n\n      if (isCurrent()) return 'current step';\n\n      return undefined;\n    };\n\n    const positionLabel = () => `Step ${displayIndex()} of ${displayTotal()}`;\n    const srLabel = () => {\n      const state = stateLabel();\n\n      return state ? `${positionLabel()}, ${state}` : positionLabel();\n    };\n\n    const handleClick = (event: MouseEvent) => {\n      event.stopPropagation();\n\n      if (!isNavigable()) {\n        event.preventDefault();\n\n        return;\n      }\n\n      el.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: { value: props.value.value } }));\n    };\n\n    const indicatorTemplate = () => html`\n      <span class=\"indicator\" part=\"indicator\" aria-hidden=\"true\">\n        <span class=\"icon-slot\" ?hidden=\"${() => !slots.has('icon').value}\"><slot name=\"icon\"></slot></span>\n        ${() =>\n          slots.has('icon').value\n            ? ''\n            : props.error.value\n              ? html`\n                  <ore-icon name=\"x\" size=\"14\" stroke-width=\"3\"></ore-icon>\n                `\n              : isCompleted()\n                ? html`\n                    <ore-icon name=\"check\" size=\"14\" stroke-width=\"3\"></ore-icon>\n                  `\n                : html`\n                    <span class=\"number\">${displayIndex}</span>\n                  `}\n      </span>\n    `;\n\n    const contentTemplate = () => html`\n      <span class=\"content\" part=\"content\">\n        <span class=\"sr-only\">${srLabel}</span>\n        <span class=\"label\" part=\"label\">\n          <span class=\"label-text\"><slot></slot></span>\n          ${() =>\n            props.optional.value\n              ? html`\n                  <span class=\"optional-hint\">(optional)</span>\n                `\n              : ''}\n        </span>\n        <span class=\"description\" part=\"description\" ?hidden=\"${() => !slots.has('description').value}\">\n          <slot name=\"description\"></slot>\n        </span>\n      </span>\n    `;\n\n    return html`\n      <li class=\"step\" role=\"listitem\">\n        <span class=\"connector connector-leading\" part=\"connector\" aria-hidden=\"true\"></span>\n        <span class=\"connector connector-trailing\" part=\"connector\" aria-hidden=\"true\"></span>\n        ${() =>\n          isNavigable()\n            ? html`\n                <button\n                  type=\"button\"\n                  class=\"control\"\n                  part=\"control\"\n                  aria-current=\"${() => (isCurrent() ? 'step' : null)}\"\n                  aria-disabled=\"${isDisabled}\"\n                  tabindex=\"${() => (isCurrent() ? '0' : '-1')}\"\n                  @click=\"${handleClick}\">\n                  ${indicatorTemplate()}${contentTemplate()}\n                </button>\n              `\n            : html`\n                <div class=\"control\" part=\"control\" aria-current=\"${() => (isCurrent() ? 'step' : null)}\">\n                  ${indicatorTemplate()}${contentTemplate()}\n                </div>\n              `}\n      </li>\n    `;\n  },\n  styles: [colorThemeMixin, coarsePointerMixin, forcedColorsFocusMixin('button.control'), stepStyles],\n});\n"],"mappings":"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"}