@vielzeug/refine 1.5.1 → 1.5.2

package/dist/skeleton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.cjs","names":[],"sources":["../src/feedback/skeleton/skeleton.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, onMounted } from '@vielzeug/ore';\nimport { intersectionObserver } from '@vielzeug/ore/observers';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\nimport { sizableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { safeCSSLength } from '../../utils';\nimport componentStyles from './skeleton.css?inline';\n\n/** Skeleton loader component properties */\nexport type OreSkeletonProps = {\n  /** Toggle shimmer animation */\n  animated?: boolean;\n  /** Height override (e.g. '1rem', '3rem') */\n  height?: string;\n  /** Number of text lines for `variant='text'` */\n  lines?: number;\n  /** Radius override (e.g. '9999px', 'var(--rounded-xl)') */\n  radius?: string;\n  /** Size preset controlling line height and circle size */\n  size?: ComponentSize;\n  /** Render diagonal stripes instead of the shimmer — useful as a design-mode placeholder */\n  striped?: boolean;\n  /** Visual variant: 'rect' (default), 'circle', or 'text' */\n  variant?: 'rect' | 'circle' | 'text';\n  /** Width override (e.g. '12rem', '70%') */\n  width?: string;\n};\n\n/**\n * A shimmer placeholder that represents loading content.\n * Control dimensions via the `--skeleton-width` and `--skeleton-height` CSS custom properties,\n * or via `width` / `height` inline styles.\n *\n * @element ore-skeleton\n *\n * @attr {string}  variant  - Shape: 'rect' (default) | 'circle' | 'text'\n * @attr {string}  size     - Height/circle preset: 'sm' | 'md' | 'lg'\n * @attr {string}  width    - Width override (CSS length/percentage)\n * @attr {string}  height   - Height override (CSS length)\n * @attr {string}  radius   - Radius override\n * @attr {boolean} animated - Disable with `animated=\"false\"`\n * @attr {number}  lines    - Text line count (only for `variant='text'`)\n * @attr {boolean} striped  - Replace shimmer with diagonal stripes\n *\n * @cssprop --skeleton-bg          - Base shimmer color\n * @cssprop --skeleton-highlight - Shimmer highlight color\n * @cssprop --skeleton-radius    - Border radius\n * @cssprop --skeleton-size      - Circle fallback size\n * @cssprop --skeleton-width     - Width (default: 100%)\n * @cssprop --skeleton-height    - Height (default: var(--size-4))\n * @cssprop --skeleton-line-gap  - Vertical gap between text lines\n * @cssprop --skeleton-last-line-width - Width of the final text line\n * @cssprop --skeleton-duration    - Shimmer animation duration\n * @cssprop --skeleton-stripe-size  - Width of each diagonal stripe (default: 6px)\n *\n * @part stack - Stack container.\n * @part bone - Skeleton bone element.\n * @example\n * ```html\n * <!-- Paragraph lines -->\n * <ore-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></ore-skeleton>\n *\n * <!-- Avatar -->\n * <ore-skeleton variant=\"circle\" size=\"md\"></ore-skeleton>\n *\n * <!-- Card image -->\n * <ore-skeleton width=\"100%\" height=\"10rem\"></ore-skeleton>\n * ```\n */\nexport const SKELETON_TAG = 'ore-skeleton' as const;\ndefine<OreSkeletonProps>(SKELETON_TAG, {\n  props: {\n    ...sizableBundle,\n    animated: prop.bool(true),\n    height: prop.string(),\n    lines: prop.number(1),\n    radius: prop.string(),\n    striped: prop.bool(false),\n    variant: prop.oneOf(['rect', 'circle', 'text'] as const, 'rect'),\n    width: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const isPaused = signal(false);\n    const lineCount = () => {\n      const value = Math.floor(Number(props.lines.value));\n\n      return Number.isFinite(value) && value > 0 ? value : 1;\n    };\n    const renderLineCount = () => (props.variant.value === 'text' ? lineCount() : 1);\n    const styleDeps = () =>\n      `${props.width.value ?? ''}|${props.height.value ?? ''}|${props.radius.value ?? ''}|${props.animated.value === false ? '0' : '1'}`;\n\n    watch(\n      computed(styleDeps),\n      () => {\n        const safeWidth = safeCSSLength(props.width.value);\n        const safeHeight = safeCSSLength(props.height.value);\n        const safeRadius = safeCSSLength(props.radius.value);\n\n        if (safeWidth) el.style.setProperty('--skeleton-width', safeWidth);\n        else el.style.removeProperty('--skeleton-width');\n\n        if (safeHeight) el.style.setProperty('--skeleton-height', safeHeight);\n        else el.style.removeProperty('--skeleton-height');\n\n        if (safeRadius) el.style.setProperty('--skeleton-radius', safeRadius);\n        else el.style.removeProperty('--skeleton-radius');\n\n        const rawAnimated = el.getAttribute('animated');\n        const isAnimated = rawAnimated !== 'false' && props.animated.value !== false;\n\n        el.setAttribute('data-animated', isAnimated ? 'true' : 'false');\n      },\n      { immediate: true },\n    );\n\n    bind({\n      attr: {\n        'data-paused': () => (isPaused.value ? true : undefined),\n      },\n    });\n\n    onMounted(() => {\n      const entry = intersectionObserver(el, { threshold: 0 });\n\n      watch(entry, (e) => {\n        const paused =\n          typeof e === 'object' && e !== null && 'isIntersecting' in e\n            ? !(e as IntersectionObserverEntry).isIntersecting\n            : false;\n\n        isPaused.value = paused;\n      });\n    });\n\n    return html`\n      <div class=\"stack\" part=\"stack\">\n        ${() =>\n          Array.from({ length: renderLineCount() }, (_, index) => {\n            const isLastLine =\n              props.variant.value === 'text' && renderLineCount() > 1 && index === renderLineCount() - 1;\n\n            return html`<div\n              class=\"bone\"\n              part=\"bone\"\n              aria-hidden=\"true\"\n              :data-last=\"${() => (isLastLine ? 'true' : null)}\"></div>`;\n          })}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"oZAwEA,IAAa,EAAe,4BACH,EAAc,CACrC,MAAO,CACL,GAAG,EAAA,cACH,SAAU,EAAA,KAAK,KAAK,EAAI,EACxB,OAAQ,EAAA,KAAK,OAAO,EACpB,MAAO,EAAA,KAAK,OAAO,CAAC,EACpB,OAAQ,EAAA,KAAK,OAAO,EACpB,QAAS,EAAA,KAAK,KAAK,EAAK,EACxB,QAAS,EAAA,KAAK,MAAM,CAAC,OAAQ,SAAU,MAAM,EAAY,MAAM,EAC/D,MAAO,EAAA,KAAK,OAAO,CACrB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAa,EAEb,GAAA,EAAA,EAAA,OAAA,CAAkB,EAAK,EACvB,MAAkB,CACtB,IAAM,EAAQ,KAAK,MAAM,OAAO,EAAM,MAAM,KAAK,CAAC,EAElD,OAAO,OAAO,SAAS,CAAK,GAAK,EAAQ,EAAI,EAAQ,CACvD,EACM,MAAyB,EAAM,QAAQ,QAAU,OAAS,EAAU,EAAI,EA+C9E,OA3CA,EAAA,EAAA,MAAA,EAAA,EAAA,EAAA,SAAA,KAFE,GAAG,EAAM,MAAM,OAAS,GAAG,GAAG,EAAM,OAAO,OAAS,GAAG,GAAG,EAAM,OAAO,OAAS,GAAG,GAAG,EAAM,SAAS,QAAU,GAAQ,IAAM,KAG3G,MACZ,CACJ,IAAM,EAAY,EAAA,cAAc,EAAM,MAAM,KAAK,EAC3C,EAAa,EAAA,cAAc,EAAM,OAAO,KAAK,EAC7C,EAAa,EAAA,cAAc,EAAM,OAAO,KAAK,EAE/C,EAAW,EAAG,MAAM,YAAY,mBAAoB,CAAS,EAC5D,EAAG,MAAM,eAAe,kBAAkB,EAE3C,EAAY,EAAG,MAAM,YAAY,oBAAqB,CAAU,EAC/D,EAAG,MAAM,eAAe,mBAAmB,EAE5C,EAAY,EAAG,MAAM,YAAY,oBAAqB,CAAU,EAC/D,EAAG,MAAM,eAAe,mBAAmB,EAGhD,IAAM,EADc,EAAG,aAAa,UACjB,IAAgB,SAAW,EAAM,SAAS,QAAU,GAEvE,EAAG,aAAa,gBAAiB,EAAa,OAAS,OAAO,CAChE,EACA,CAAE,UAAW,EAAK,CACpB,GAEA,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,kBAAsB,EAAS,MAAQ,GAAO,IAAA,EAChD,CACF,CAAC,GAED,EAAA,EAAA,UAAA,KAAgB,EAGd,EAAA,EAAA,MAAA,CAFc,EAAA,qBAAqB,EAAI,CAAE,UAAW,CAAE,CAEhD,EAAQ,GAAM,CAClB,IAAM,EACJ,OAAO,GAAM,UAAY,GAAc,mBAAoB,EACvD,CAAE,EAAgC,eAClC,GAEN,EAAS,MAAQ,CACnB,CAAC,CACH,CAAC,EAEM,EAAA,IAAI;;cAGL,MAAM,KAAK,CAAE,OAAQ,EAAgB,CAAE,GAAI,EAAG,IAAU,CACtD,IAAM,EACJ,EAAM,QAAQ,QAAU,QAAU,EAAgB,EAAI,GAAK,IAAU,EAAgB,EAAI,EAE3F,MAAO,GAAA,IAAI;;;;gCAIY,EAAa,OAAS,KAAM,SACrD,CAAC,EAAE;;KAGX,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAe,CAC9C,CAAC"}
+{"version":3,"file":"skeleton.cjs","names":[],"sources":["../src/feedback/skeleton/skeleton.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, onMounted } from '@vielzeug/ore';\nimport { intersectionObserver } from '@vielzeug/ore/observers';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\nimport { sizableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { safeCSSLength } from '../../utils';\nimport componentStyles from './skeleton.css?inline';\n\n/** Skeleton loader component properties */\nexport type OreSkeletonProps = {\n  /** Toggle shimmer animation */\n  animated?: boolean;\n  /** Height override (e.g. '1rem', '3rem') */\n  height?: string;\n  /** Number of text lines for `variant='text'` */\n  lines?: number;\n  /** Radius override (e.g. '9999px', 'var(--rounded-xl)') */\n  radius?: string;\n  /** Size preset controlling line height and circle size */\n  size?: ComponentSize;\n  /** Render diagonal stripes instead of the shimmer — useful as a design-mode placeholder */\n  striped?: boolean;\n  /** Visual variant: 'rect' (default), 'circle', or 'text' */\n  variant?: 'rect' | 'circle' | 'text';\n  /** Width override (e.g. '12rem', '70%') */\n  width?: string;\n};\n\n/**\n * A shimmer placeholder that represents loading content.\n * Control dimensions via the `--skeleton-width` and `--skeleton-height` CSS custom properties,\n * or via `width` / `height` inline styles.\n *\n * @element ore-skeleton\n *\n * @attr {string}  variant  - Shape: 'rect' (default) | 'circle' | 'text'\n * @attr {string}  size     - Height/circle preset: 'sm' | 'md' | 'lg'\n * @attr {string}  width    - Width override (CSS length/percentage)\n * @attr {string}  height   - Height override (CSS length)\n * @attr {string}  radius   - Radius override\n * @attr {boolean} animated - Disable with `animated=\"false\"`\n * @attr {number}  lines    - Text line count (only for `variant='text'`)\n * @attr {boolean} striped  - Replace shimmer with diagonal stripes\n *\n * @cssprop --skeleton-bg          - Base shimmer color\n * @cssprop --skeleton-highlight - Shimmer highlight color\n * @cssprop --skeleton-radius    - Border radius\n * @cssprop --skeleton-size      - Circle fallback size\n * @cssprop --skeleton-width     - Width (default: 100%)\n * @cssprop --skeleton-height    - Height (default: var(--size-4))\n * @cssprop --skeleton-line-gap  - Vertical gap between text lines\n * @cssprop --skeleton-last-line-width - Width of the final text line\n * @cssprop --skeleton-duration    - Shimmer animation duration\n * @cssprop --skeleton-stripe-size  - Width of each diagonal stripe (default: 6px)\n *\n * @part stack - Stack container.\n * @part bone - Skeleton bone element.\n * @example\n * ```html\n * <!-- Paragraph lines -->\n * <ore-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></ore-skeleton>\n *\n * <!-- Avatar -->\n * <ore-skeleton variant=\"circle\" size=\"md\"></ore-skeleton>\n *\n * <!-- Card image -->\n * <ore-skeleton width=\"100%\" height=\"10rem\"></ore-skeleton>\n * ```\n */\nexport const SKELETON_TAG = 'ore-skeleton' as const;\ndefine<OreSkeletonProps>(SKELETON_TAG, {\n  props: {\n    ...sizableBundle,\n    animated: prop.bool(true),\n    height: prop.string(),\n    lines: prop.number(1),\n    radius: prop.string(),\n    striped: prop.bool(false),\n    variant: prop.oneOf(['rect', 'circle', 'text'] as const, 'rect'),\n    width: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const isPaused = signal(false);\n    const lineCount = () => {\n      const value = Math.floor(Number(props.lines.value));\n\n      return Number.isFinite(value) && value > 0 ? value : 1;\n    };\n    const renderLineCount = () => (props.variant.value === 'text' ? lineCount() : 1);\n    const styleDeps = () =>\n      `${props.width.value ?? ''}|${props.height.value ?? ''}|${props.radius.value ?? ''}|${props.animated.value === false ? '0' : '1'}`;\n\n    watch(\n      computed(styleDeps),\n      () => {\n        const safeWidth = safeCSSLength(props.width.value);\n        const safeHeight = safeCSSLength(props.height.value);\n        const safeRadius = safeCSSLength(props.radius.value);\n\n        if (safeWidth) el.style.setProperty('--skeleton-width', safeWidth);\n        else el.style.removeProperty('--skeleton-width');\n\n        if (safeHeight) el.style.setProperty('--skeleton-height', safeHeight);\n        else el.style.removeProperty('--skeleton-height');\n\n        if (safeRadius) el.style.setProperty('--skeleton-radius', safeRadius);\n        else el.style.removeProperty('--skeleton-radius');\n\n        const rawAnimated = el.getAttribute('animated');\n        const isAnimated = rawAnimated !== 'false' && props.animated.value !== false;\n\n        el.setAttribute('data-animated', isAnimated ? 'true' : 'false');\n      },\n      { immediate: true },\n    );\n\n    bind({\n      attr: {\n        'data-paused': () => (isPaused.value ? true : undefined),\n      },\n    });\n\n    onMounted(() => {\n      const entry = intersectionObserver(el, { threshold: 0 });\n\n      watch(entry, (e) => {\n        const paused =\n          typeof e === 'object' && e !== null && 'isIntersecting' in e\n            ? !(e as IntersectionObserverEntry).isIntersecting\n            : false;\n\n        isPaused.value = paused;\n      });\n    });\n\n    return html`\n      <div class=\"stack\" part=\"stack\">\n        ${() =>\n          Array.from({ length: renderLineCount() }, (_, index) => {\n            const isLastLine =\n              props.variant.value === 'text' && renderLineCount() > 1 && index === renderLineCount() - 1;\n\n            return html`<div\n              class=\"bone\"\n              part=\"bone\"\n              aria-hidden=\"true\"\n              :data-last=\"${() => (isLastLine ? 'true' : null)}\"></div>`;\n          })}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"oVAwEA,IAAa,EAAe,4BACH,EAAc,CACrC,MAAO,CACL,GAAG,EAAA,cACH,SAAU,EAAA,KAAK,KAAK,EAAI,EACxB,OAAQ,EAAA,KAAK,OAAO,EACpB,MAAO,EAAA,KAAK,OAAO,CAAC,EACpB,OAAQ,EAAA,KAAK,OAAO,EACpB,QAAS,EAAA,KAAK,KAAK,EAAK,EACxB,QAAS,EAAA,KAAK,MAAM,CAAC,OAAQ,SAAU,MAAM,EAAY,MAAM,EAC/D,MAAO,EAAA,KAAK,OAAO,CACrB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAa,EAEb,GAAA,EAAA,EAAA,OAAA,CAAkB,EAAK,EACvB,MAAkB,CACtB,IAAM,EAAQ,KAAK,MAAM,OAAO,EAAM,MAAM,KAAK,CAAC,EAElD,OAAO,OAAO,SAAS,CAAK,GAAK,EAAQ,EAAI,EAAQ,CACvD,EACM,MAAyB,EAAM,QAAQ,QAAU,OAAS,EAAU,EAAI,EA+C9E,OA3CA,EAAA,EAAA,MAAA,EAAA,EAAA,EAAA,SAAA,KAFE,GAAG,EAAM,MAAM,OAAS,GAAG,GAAG,EAAM,OAAO,OAAS,GAAG,GAAG,EAAM,OAAO,OAAS,GAAG,GAAG,EAAM,SAAS,QAAU,GAAQ,IAAM,KAG3G,MACZ,CACJ,IAAM,EAAY,EAAA,cAAc,EAAM,MAAM,KAAK,EAC3C,EAAa,EAAA,cAAc,EAAM,OAAO,KAAK,EAC7C,EAAa,EAAA,cAAc,EAAM,OAAO,KAAK,EAE/C,EAAW,EAAG,MAAM,YAAY,mBAAoB,CAAS,EAC5D,EAAG,MAAM,eAAe,kBAAkB,EAE3C,EAAY,EAAG,MAAM,YAAY,oBAAqB,CAAU,EAC/D,EAAG,MAAM,eAAe,mBAAmB,EAE5C,EAAY,EAAG,MAAM,YAAY,oBAAqB,CAAU,EAC/D,EAAG,MAAM,eAAe,mBAAmB,EAGhD,IAAM,EADc,EAAG,aAAa,UACjB,IAAgB,SAAW,EAAM,SAAS,QAAU,GAEvE,EAAG,aAAa,gBAAiB,EAAa,OAAS,OAAO,CAChE,EACA,CAAE,UAAW,EAAK,CACpB,GAEA,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,kBAAsB,EAAS,MAAQ,GAAO,IAAA,EAChD,CACF,CAAC,GAED,EAAA,EAAA,UAAA,KAAgB,EAGd,EAAA,EAAA,MAAA,EAAA,EAAA,EAAA,qBAAA,CAFmC,EAAI,CAAE,UAAW,CAAE,CAEhD,EAAQ,GAAM,CAClB,IAAM,EACJ,OAAO,GAAM,UAAY,GAAc,mBAAoB,EACvD,CAAE,EAAgC,eAClC,GAEN,EAAS,MAAQ,CACnB,CAAC,CACH,CAAC,EAEM,EAAA,IAAI;;cAGL,MAAM,KAAK,CAAE,OAAQ,EAAgB,CAAE,GAAI,EAAG,IAAU,CACtD,IAAM,EACJ,EAAM,QAAQ,QAAU,QAAU,EAAgB,EAAI,GAAK,IAAU,EAAgB,EAAI,EAE3F,MAAO,GAAA,IAAI;;;;gCAIY,EAAa,OAAS,KAAM,SACrD,CAAC,EAAE;;KAGX,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAe,CAC9C,CAAC"}

package/dist/skeleton.js

@@ -1,48 +1,47 @@
 import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
 import { sizableBundle as t } from "./shared/prop-bundles.js";
 import { safeCSSLength as n } from "./utils/css.js";
-import { intersectionObserver as r } from "./ore/dist/observers/intersection-observe.js";
-import "./ore/dist/observers.js";
-import i from "./feedback/skeleton/skeleton.css.js";
-import { bind as a, define as o, getHost as s, html as c, onMounted as l, prop as u } from "@vielzeug/ore";
-import { computed as d, signal as f, watch as p } from "@vielzeug/ripple";
+import r from "./feedback/skeleton/skeleton.css.js";
+import { bind as i, define as a, getHost as o, html as s, onMounted as c, prop as l } from "@vielzeug/ore";
+import { computed as u, signal as d, watch as f } from "@vielzeug/ripple";
+import { intersectionObserver as p } from "@vielzeug/ore/observers";
 //#region src/feedback/skeleton/skeleton.ts
 var m = "ore-skeleton";
-o(m, {
+a(m, {
 	props: {
 		...t,
-		animated: u.bool(!0),
-		height: u.string(),
-		lines: u.number(1),
-		radius: u.string(),
-		striped: u.bool(!1),
-		variant: u.oneOf([
+		animated: l.bool(!0),
+		height: l.string(),
+		lines: l.number(1),
+		radius: l.string(),
+		striped: l.bool(!1),
+		variant: l.oneOf([
 			"rect",
 			"circle",
 			"text"
 		], "rect"),
-		width: u.string()
+		width: l.string()
 	},
 	setup(e) {
-		let t = s(), i = f(!1), o = () => {
+		let t = o(), r = d(!1), a = () => {
 			let t = Math.floor(Number(e.lines.value));
 			return Number.isFinite(t) && t > 0 ? t : 1;
-		}, u = () => e.variant.value === "text" ? o() : 1;
-		return p(d(() => `${e.width.value ?? ""}|${e.height.value ?? ""}|${e.radius.value ?? ""}|${e.animated.value === !1 ? "0" : "1"}`), () => {
+		}, l = () => e.variant.value === "text" ? a() : 1;
+		return f(u(() => `${e.width.value ?? ""}|${e.height.value ?? ""}|${e.radius.value ?? ""}|${e.animated.value === !1 ? "0" : "1"}`), () => {
 			let r = n(e.width.value), i = n(e.height.value), a = n(e.radius.value);
 			r ? t.style.setProperty("--skeleton-width", r) : t.style.removeProperty("--skeleton-width"), i ? t.style.setProperty("--skeleton-height", i) : t.style.removeProperty("--skeleton-height"), a ? t.style.setProperty("--skeleton-radius", a) : t.style.removeProperty("--skeleton-radius");
 			let o = t.getAttribute("animated") !== "false" && e.animated.value !== !1;
 			t.setAttribute("data-animated", o ? "true" : "false");
-		}, { immediate: !0 }), a({ attr: { "data-paused": () => i.value ? !0 : void 0 } }), l(() => {
-			p(r(t, { threshold: 0 }), (e) => {
+		}, { immediate: !0 }), i({ attr: { "data-paused": () => r.value ? !0 : void 0 } }), c(() => {
+			f(p(t, { threshold: 0 }), (e) => {
 				let t = typeof e == "object" && e && "isIntersecting" in e ? !e.isIntersecting : !1;
-				i.value = t;
+				r.value = t;
 			});
-		}), c`
+		}), s`
       <div class="stack" part="stack">
-        ${() => Array.from({ length: u() }, (t, n) => {
-			let r = e.variant.value === "text" && u() > 1 && n === u() - 1;
-			return c`<div
+        ${() => Array.from({ length: l() }, (t, n) => {
+			let r = e.variant.value === "text" && l() > 1 && n === l() - 1;
+			return s`<div
               class="bone"
               part="bone"
               aria-hidden="true"
@@ -51,7 +50,7 @@ o(m, {
       </div>
     `;
 	},
-	styles: [e, i]
+	styles: [e, r]
 });
 //#endregion
 export { m as SKELETON_TAG };

package/dist/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../src/feedback/skeleton/skeleton.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, onMounted } from '@vielzeug/ore';\nimport { intersectionObserver } from '@vielzeug/ore/observers';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\nimport { sizableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { safeCSSLength } from '../../utils';\nimport componentStyles from './skeleton.css?inline';\n\n/** Skeleton loader component properties */\nexport type OreSkeletonProps = {\n  /** Toggle shimmer animation */\n  animated?: boolean;\n  /** Height override (e.g. '1rem', '3rem') */\n  height?: string;\n  /** Number of text lines for `variant='text'` */\n  lines?: number;\n  /** Radius override (e.g. '9999px', 'var(--rounded-xl)') */\n  radius?: string;\n  /** Size preset controlling line height and circle size */\n  size?: ComponentSize;\n  /** Render diagonal stripes instead of the shimmer — useful as a design-mode placeholder */\n  striped?: boolean;\n  /** Visual variant: 'rect' (default), 'circle', or 'text' */\n  variant?: 'rect' | 'circle' | 'text';\n  /** Width override (e.g. '12rem', '70%') */\n  width?: string;\n};\n\n/**\n * A shimmer placeholder that represents loading content.\n * Control dimensions via the `--skeleton-width` and `--skeleton-height` CSS custom properties,\n * or via `width` / `height` inline styles.\n *\n * @element ore-skeleton\n *\n * @attr {string}  variant  - Shape: 'rect' (default) | 'circle' | 'text'\n * @attr {string}  size     - Height/circle preset: 'sm' | 'md' | 'lg'\n * @attr {string}  width    - Width override (CSS length/percentage)\n * @attr {string}  height   - Height override (CSS length)\n * @attr {string}  radius   - Radius override\n * @attr {boolean} animated - Disable with `animated=\"false\"`\n * @attr {number}  lines    - Text line count (only for `variant='text'`)\n * @attr {boolean} striped  - Replace shimmer with diagonal stripes\n *\n * @cssprop --skeleton-bg          - Base shimmer color\n * @cssprop --skeleton-highlight - Shimmer highlight color\n * @cssprop --skeleton-radius    - Border radius\n * @cssprop --skeleton-size      - Circle fallback size\n * @cssprop --skeleton-width     - Width (default: 100%)\n * @cssprop --skeleton-height    - Height (default: var(--size-4))\n * @cssprop --skeleton-line-gap  - Vertical gap between text lines\n * @cssprop --skeleton-last-line-width - Width of the final text line\n * @cssprop --skeleton-duration    - Shimmer animation duration\n * @cssprop --skeleton-stripe-size  - Width of each diagonal stripe (default: 6px)\n *\n * @part stack - Stack container.\n * @part bone - Skeleton bone element.\n * @example\n * ```html\n * <!-- Paragraph lines -->\n * <ore-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></ore-skeleton>\n *\n * <!-- Avatar -->\n * <ore-skeleton variant=\"circle\" size=\"md\"></ore-skeleton>\n *\n * <!-- Card image -->\n * <ore-skeleton width=\"100%\" height=\"10rem\"></ore-skeleton>\n * ```\n */\nexport const SKELETON_TAG = 'ore-skeleton' as const;\ndefine<OreSkeletonProps>(SKELETON_TAG, {\n  props: {\n    ...sizableBundle,\n    animated: prop.bool(true),\n    height: prop.string(),\n    lines: prop.number(1),\n    radius: prop.string(),\n    striped: prop.bool(false),\n    variant: prop.oneOf(['rect', 'circle', 'text'] as const, 'rect'),\n    width: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const isPaused = signal(false);\n    const lineCount = () => {\n      const value = Math.floor(Number(props.lines.value));\n\n      return Number.isFinite(value) && value > 0 ? value : 1;\n    };\n    const renderLineCount = () => (props.variant.value === 'text' ? lineCount() : 1);\n    const styleDeps = () =>\n      `${props.width.value ?? ''}|${props.height.value ?? ''}|${props.radius.value ?? ''}|${props.animated.value === false ? '0' : '1'}`;\n\n    watch(\n      computed(styleDeps),\n      () => {\n        const safeWidth = safeCSSLength(props.width.value);\n        const safeHeight = safeCSSLength(props.height.value);\n        const safeRadius = safeCSSLength(props.radius.value);\n\n        if (safeWidth) el.style.setProperty('--skeleton-width', safeWidth);\n        else el.style.removeProperty('--skeleton-width');\n\n        if (safeHeight) el.style.setProperty('--skeleton-height', safeHeight);\n        else el.style.removeProperty('--skeleton-height');\n\n        if (safeRadius) el.style.setProperty('--skeleton-radius', safeRadius);\n        else el.style.removeProperty('--skeleton-radius');\n\n        const rawAnimated = el.getAttribute('animated');\n        const isAnimated = rawAnimated !== 'false' && props.animated.value !== false;\n\n        el.setAttribute('data-animated', isAnimated ? 'true' : 'false');\n      },\n      { immediate: true },\n    );\n\n    bind({\n      attr: {\n        'data-paused': () => (isPaused.value ? true : undefined),\n      },\n    });\n\n    onMounted(() => {\n      const entry = intersectionObserver(el, { threshold: 0 });\n\n      watch(entry, (e) => {\n        const paused =\n          typeof e === 'object' && e !== null && 'isIntersecting' in e\n            ? !(e as IntersectionObserverEntry).isIntersecting\n            : false;\n\n        isPaused.value = paused;\n      });\n    });\n\n    return html`\n      <div class=\"stack\" part=\"stack\">\n        ${() =>\n          Array.from({ length: renderLineCount() }, (_, index) => {\n            const isLastLine =\n              props.variant.value === 'text' && renderLineCount() > 1 && index === renderLineCount() - 1;\n\n            return html`<div\n              class=\"bone\"\n              part=\"bone\"\n              aria-hidden=\"true\"\n              :data-last=\"${() => (isLastLine ? 'true' : null)}\"></div>`;\n          })}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;;AAwEA,IAAa,IAAe;AAC5B,EAAyB,GAAc;CACrC,OAAO;EACL,GAAG;EACH,UAAU,EAAK,KAAK,EAAI;EACxB,QAAQ,EAAK,OAAO;EACpB,OAAO,EAAK,OAAO,CAAC;EACpB,QAAQ,EAAK,OAAO;EACpB,SAAS,EAAK,KAAK,EAAK;EACxB,SAAS,EAAK,MAAM;GAAC;GAAQ;GAAU;EAAM,GAAY,MAAM;EAC/D,OAAO,EAAK,OAAO;CACrB;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GAEb,IAAW,EAAO,EAAK,GACvB,UAAkB;GACtB,IAAM,IAAQ,KAAK,MAAM,OAAO,EAAM,MAAM,KAAK,CAAC;GAElD,OAAO,OAAO,SAAS,CAAK,KAAK,IAAQ,IAAI,IAAQ;EACvD,GACM,UAAyB,EAAM,QAAQ,UAAU,SAAS,EAAU,IAAI;EA+C9E,OA3CA,EACE,QAHA,GAAG,EAAM,MAAM,SAAS,GAAG,GAAG,EAAM,OAAO,SAAS,GAAG,GAAG,EAAM,OAAO,SAAS,GAAG,GAAG,EAAM,SAAS,UAAU,KAAQ,MAAM,KAG3G,SACZ;GACJ,IAAM,IAAY,EAAc,EAAM,MAAM,KAAK,GAC3C,IAAa,EAAc,EAAM,OAAO,KAAK,GAC7C,IAAa,EAAc,EAAM,OAAO,KAAK;GAQnD,AANI,IAAW,EAAG,MAAM,YAAY,oBAAoB,CAAS,IAC5D,EAAG,MAAM,eAAe,kBAAkB,GAE3C,IAAY,EAAG,MAAM,YAAY,qBAAqB,CAAU,IAC/D,EAAG,MAAM,eAAe,mBAAmB,GAE5C,IAAY,EAAG,MAAM,YAAY,qBAAqB,CAAU,IAC/D,EAAG,MAAM,eAAe,mBAAmB;GAGhD,IAAM,IADc,EAAG,aAAa,UACjB,MAAgB,WAAW,EAAM,SAAS,UAAU;GAEvE,EAAG,aAAa,iBAAiB,IAAa,SAAS,OAAO;EAChE,GACA,EAAE,WAAW,GAAK,CACpB,GAEA,EAAK,EACH,MAAM,EACJ,qBAAsB,EAAS,QAAQ,KAAO,KAAA,EAChD,EACF,CAAC,GAED,QAAgB;GAGd,EAFc,EAAqB,GAAI,EAAE,WAAW,EAAE,CAEhD,IAAQ,MAAM;IAClB,IAAM,IACJ,OAAO,KAAM,YAAY,KAAc,oBAAoB,IACvD,CAAE,EAAgC,iBAClC;IAEN,EAAS,QAAQ;GACnB,CAAC;EACH,CAAC,GAEM,CAAI;;gBAGL,MAAM,KAAK,EAAE,QAAQ,EAAgB,EAAE,IAAI,GAAG,MAAU;GACtD,IAAM,IACJ,EAAM,QAAQ,UAAU,UAAU,EAAgB,IAAI,KAAK,MAAU,EAAgB,IAAI;GAE3F,OAAO,CAAI;;;;kCAIY,IAAa,SAAS,KAAM;EACrD,CAAC,EAAE;;;CAGX;CACA,QAAQ,CAAC,GAAoB,CAAe;AAC9C,CAAC"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../src/feedback/skeleton/skeleton.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, onMounted } from '@vielzeug/ore';\nimport { intersectionObserver } from '@vielzeug/ore/observers';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\nimport { sizableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { safeCSSLength } from '../../utils';\nimport componentStyles from './skeleton.css?inline';\n\n/** Skeleton loader component properties */\nexport type OreSkeletonProps = {\n  /** Toggle shimmer animation */\n  animated?: boolean;\n  /** Height override (e.g. '1rem', '3rem') */\n  height?: string;\n  /** Number of text lines for `variant='text'` */\n  lines?: number;\n  /** Radius override (e.g. '9999px', 'var(--rounded-xl)') */\n  radius?: string;\n  /** Size preset controlling line height and circle size */\n  size?: ComponentSize;\n  /** Render diagonal stripes instead of the shimmer — useful as a design-mode placeholder */\n  striped?: boolean;\n  /** Visual variant: 'rect' (default), 'circle', or 'text' */\n  variant?: 'rect' | 'circle' | 'text';\n  /** Width override (e.g. '12rem', '70%') */\n  width?: string;\n};\n\n/**\n * A shimmer placeholder that represents loading content.\n * Control dimensions via the `--skeleton-width` and `--skeleton-height` CSS custom properties,\n * or via `width` / `height` inline styles.\n *\n * @element ore-skeleton\n *\n * @attr {string}  variant  - Shape: 'rect' (default) | 'circle' | 'text'\n * @attr {string}  size     - Height/circle preset: 'sm' | 'md' | 'lg'\n * @attr {string}  width    - Width override (CSS length/percentage)\n * @attr {string}  height   - Height override (CSS length)\n * @attr {string}  radius   - Radius override\n * @attr {boolean} animated - Disable with `animated=\"false\"`\n * @attr {number}  lines    - Text line count (only for `variant='text'`)\n * @attr {boolean} striped  - Replace shimmer with diagonal stripes\n *\n * @cssprop --skeleton-bg          - Base shimmer color\n * @cssprop --skeleton-highlight - Shimmer highlight color\n * @cssprop --skeleton-radius    - Border radius\n * @cssprop --skeleton-size      - Circle fallback size\n * @cssprop --skeleton-width     - Width (default: 100%)\n * @cssprop --skeleton-height    - Height (default: var(--size-4))\n * @cssprop --skeleton-line-gap  - Vertical gap between text lines\n * @cssprop --skeleton-last-line-width - Width of the final text line\n * @cssprop --skeleton-duration    - Shimmer animation duration\n * @cssprop --skeleton-stripe-size  - Width of each diagonal stripe (default: 6px)\n *\n * @part stack - Stack container.\n * @part bone - Skeleton bone element.\n * @example\n * ```html\n * <!-- Paragraph lines -->\n * <ore-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></ore-skeleton>\n *\n * <!-- Avatar -->\n * <ore-skeleton variant=\"circle\" size=\"md\"></ore-skeleton>\n *\n * <!-- Card image -->\n * <ore-skeleton width=\"100%\" height=\"10rem\"></ore-skeleton>\n * ```\n */\nexport const SKELETON_TAG = 'ore-skeleton' as const;\ndefine<OreSkeletonProps>(SKELETON_TAG, {\n  props: {\n    ...sizableBundle,\n    animated: prop.bool(true),\n    height: prop.string(),\n    lines: prop.number(1),\n    radius: prop.string(),\n    striped: prop.bool(false),\n    variant: prop.oneOf(['rect', 'circle', 'text'] as const, 'rect'),\n    width: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const isPaused = signal(false);\n    const lineCount = () => {\n      const value = Math.floor(Number(props.lines.value));\n\n      return Number.isFinite(value) && value > 0 ? value : 1;\n    };\n    const renderLineCount = () => (props.variant.value === 'text' ? lineCount() : 1);\n    const styleDeps = () =>\n      `${props.width.value ?? ''}|${props.height.value ?? ''}|${props.radius.value ?? ''}|${props.animated.value === false ? '0' : '1'}`;\n\n    watch(\n      computed(styleDeps),\n      () => {\n        const safeWidth = safeCSSLength(props.width.value);\n        const safeHeight = safeCSSLength(props.height.value);\n        const safeRadius = safeCSSLength(props.radius.value);\n\n        if (safeWidth) el.style.setProperty('--skeleton-width', safeWidth);\n        else el.style.removeProperty('--skeleton-width');\n\n        if (safeHeight) el.style.setProperty('--skeleton-height', safeHeight);\n        else el.style.removeProperty('--skeleton-height');\n\n        if (safeRadius) el.style.setProperty('--skeleton-radius', safeRadius);\n        else el.style.removeProperty('--skeleton-radius');\n\n        const rawAnimated = el.getAttribute('animated');\n        const isAnimated = rawAnimated !== 'false' && props.animated.value !== false;\n\n        el.setAttribute('data-animated', isAnimated ? 'true' : 'false');\n      },\n      { immediate: true },\n    );\n\n    bind({\n      attr: {\n        'data-paused': () => (isPaused.value ? true : undefined),\n      },\n    });\n\n    onMounted(() => {\n      const entry = intersectionObserver(el, { threshold: 0 });\n\n      watch(entry, (e) => {\n        const paused =\n          typeof e === 'object' && e !== null && 'isIntersecting' in e\n            ? !(e as IntersectionObserverEntry).isIntersecting\n            : false;\n\n        isPaused.value = paused;\n      });\n    });\n\n    return html`\n      <div class=\"stack\" part=\"stack\">\n        ${() =>\n          Array.from({ length: renderLineCount() }, (_, index) => {\n            const isLastLine =\n              props.variant.value === 'text' && renderLineCount() > 1 && index === renderLineCount() - 1;\n\n            return html`<div\n              class=\"bone\"\n              part=\"bone\"\n              aria-hidden=\"true\"\n              :data-last=\"${() => (isLastLine ? 'true' : null)}\"></div>`;\n          })}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;AAwEA,IAAa,IAAe;AAC5B,EAAyB,GAAc;CACrC,OAAO;EACL,GAAG;EACH,UAAU,EAAK,KAAK,EAAI;EACxB,QAAQ,EAAK,OAAO;EACpB,OAAO,EAAK,OAAO,CAAC;EACpB,QAAQ,EAAK,OAAO;EACpB,SAAS,EAAK,KAAK,EAAK;EACxB,SAAS,EAAK,MAAM;GAAC;GAAQ;GAAU;EAAM,GAAY,MAAM;EAC/D,OAAO,EAAK,OAAO;CACrB;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GAEb,IAAW,EAAO,EAAK,GACvB,UAAkB;GACtB,IAAM,IAAQ,KAAK,MAAM,OAAO,EAAM,MAAM,KAAK,CAAC;GAElD,OAAO,OAAO,SAAS,CAAK,KAAK,IAAQ,IAAI,IAAQ;EACvD,GACM,UAAyB,EAAM,QAAQ,UAAU,SAAS,EAAU,IAAI;EA+C9E,OA3CA,EACE,QAHA,GAAG,EAAM,MAAM,SAAS,GAAG,GAAG,EAAM,OAAO,SAAS,GAAG,GAAG,EAAM,OAAO,SAAS,GAAG,GAAG,EAAM,SAAS,UAAU,KAAQ,MAAM,KAG3G,SACZ;GACJ,IAAM,IAAY,EAAc,EAAM,MAAM,KAAK,GAC3C,IAAa,EAAc,EAAM,OAAO,KAAK,GAC7C,IAAa,EAAc,EAAM,OAAO,KAAK;GAQnD,AANI,IAAW,EAAG,MAAM,YAAY,oBAAoB,CAAS,IAC5D,EAAG,MAAM,eAAe,kBAAkB,GAE3C,IAAY,EAAG,MAAM,YAAY,qBAAqB,CAAU,IAC/D,EAAG,MAAM,eAAe,mBAAmB,GAE5C,IAAY,EAAG,MAAM,YAAY,qBAAqB,CAAU,IAC/D,EAAG,MAAM,eAAe,mBAAmB;GAGhD,IAAM,IADc,EAAG,aAAa,UACjB,MAAgB,WAAW,EAAM,SAAS,UAAU;GAEvE,EAAG,aAAa,iBAAiB,IAAa,SAAS,OAAO;EAChE,GACA,EAAE,WAAW,GAAK,CACpB,GAEA,EAAK,EACH,MAAM,EACJ,qBAAsB,EAAS,QAAQ,KAAO,KAAA,EAChD,EACF,CAAC,GAED,QAAgB;GAGd,EAFc,EAAqB,GAAI,EAAE,WAAW,EAAE,CAEhD,IAAQ,MAAM;IAClB,IAAM,IACJ,OAAO,KAAM,YAAY,KAAc,oBAAoB,IACvD,CAAE,EAAgC,iBAClC;IAEN,EAAS,QAAQ;GACnB,CAAC;EACH,CAAC,GAEM,CAAI;;gBAGL,MAAM,KAAK,EAAE,QAAQ,EAAgB,EAAE,IAAI,GAAG,MAAU;GACtD,IAAM,IACJ,EAAM,QAAQ,UAAU,UAAU,EAAgB,IAAI,KAAK,MAAU,EAAgB,IAAI;GAE3F,OAAO,CAAI;;;;kCAIY,IAAa,SAAS,KAAM;EACrD,CAAC,EAAE;;;CAGX;CACA,QAAQ,CAAC,GAAoB,CAAe;AAC9C,CAAC"}

package/dist/slider.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/field-base.cjs"),s=require("./headless/slider.cjs"),c=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const l=require("./inputs/shared/form-context.cjs"),u=require("./inputs/shared/templates.cjs"),d=require("./inputs/slider/slider.css.cjs");let f=require("@vielzeug/ore"),p=require("@vielzeug/ripple");var m=(e,t)=>n=>{e()&&t(n)},h=`ore-slider`;(0,f.define)(h,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,error:f.prop.string(),from:f.prop.number(0),"from-value-text":f.prop.string(),helper:f.prop.string(),max:f.prop.number(100),min:f.prop.number(0),name:f.prop.string(),range:f.prop.bool(!1),step:f.prop.number(1),to:f.prop.number(100),"to-value-text":f.prop.string(),value:f.prop.number(0),"value-text":f.prop.string()},setup(e){let t=(0,f.getHost)(),n=(0,f.useEmit)(),r=(0,f.useSlots)(),i=e.range.value,a=s.createSliderControl({max:e.max,min:e.min,step:e.step}),d=(0,f.inject)(l.FORM_CTX),h=l.useFormContext(e,d),g=(0,p.signal)(!1),_=h.disabled,v=(0,p.signal)(void 0),y=(0,f.createStableId)(`helper`),b=o.createErrorHelperState({error:e.error,helper:e.helper}),x=(0,p.computed)(()=>b.value.errorText),S=(0,p.computed)(()=>b.value.helperText),C=(0,p.computed)(()=>x.value||S.value?y:null);(0,f.bind)({attr:{"data-dragging":()=>g.value?!0:void 0,size:h.size}});let w,T=(0,p.signal)(`0`);i||(w=c.useField({disabled:_,value:T}),(0,p.watch)(e.value,e=>{T.value=String(e)},{immediate:!0}),(0,f.bind)({attr:{ariaDescribedby:()=>C.value??null,ariaDisabled:()=>_.value?`true`:null,ariaLabelledby:()=>v.value??null,ariaValuemax:()=>a.max(),ariaValuemin:()=>a.min(),ariaValuenow:()=>Number(T.value||0),ariaValuetext:()=>e[`value-text`].value??null,role:()=>`slider`,tabindex:()=>_.value?null:`0`}}));let E=(0,p.signal)(0),D=(0,p.signal)(100);i&&(w=c.useField({disabled:_,toFormValue:({from:t,to:n})=>{let r=e.name.value;if(!r)return null;let i=new FormData;return i.append(`${r}[from]`,String(t)),i.append(`${r}[to]`,String(n)),i},value:(0,p.computed)(()=>({from:E.value,to:D.value}))}),(0,p.watch)(e.from,e=>{E.value=a.snap(Number(e))},{immediate:!0}),(0,p.watch)(e.to,e=>{D.value=a.snap(Number(e))},{immediate:!0}));let O=(0,f.ref)(),k=(0,f.ref)(),A=(0,f.ref)(),j=(0,f.ref)(),M=(0,f.createStableId)(`slider-start`),N=(0,f.createStableId)(`slider-end`),P=e=>{let n=a.toPercent(e);t.style.setProperty(`--_thumb-pos`,`${n}%`),t.style.setProperty(`--_fill-start`,`0%`),t.style.setProperty(`--_fill-width`,`${n}%`)},F=()=>{let e=a.toPercent(E.value),n=a.toPercent(D.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}%`)},I=e=>{d?.validateOn?.value===e&&w?.reportValidity()},L=t=>{F();let r=e=>{let n=t.getBoundingClientRect();return a.fromClientX(e,n)},i=null,o=e=>{i===`start`?E.value=Math.min(a.snap(e),D.value):i===`end`&&(D.value=Math.max(a.snap(e),E.value)),E.value=a.clamp(E.value),D.value=a.clamp(D.value),F(),n(`change`,{from:E.value,to:D.value,value:{from:E.value,to:D.value}}),I(`change`)};(0,f.onEvent)(t,`pointerdown`,m(()=>!_.value,e=>{e.preventDefault();let t=r(e.clientX);i=Math.abs(t-E.value)<=Math.abs(t-D.value)?`start`:`end`,e.target.setPointerCapture(e.pointerId),o(t)})),(0,f.onEvent)(t,`pointermove`,m(()=>!!i,e=>{e.preventDefault(),g.value||=!0,o(r(e.clientX))})),(0,f.onEvent)(t,`pointerup`,m(()=>!!i,e=>{e.preventDefault(),i=null,g.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)),F(),n(`change`,{from:E.value,originalEvent:r,to:D.value,value:{from:E.value,to:D.value}}),I(`change`))},c=A.value,l=j.value;c&&((0,f.onEvent)(c,`keydown`,s(()=>E.value,e=>{E.value=Math.min(e,D.value)})),(0,f.onCleanup)((0,f.aria)(c,{label:`Range start`,valuemax:()=>D.value,valuemin:()=>a.min(),valuenow:()=>E.value,valuetext:()=>e[`from-value-text`].value??null}))),l&&((0,f.onEvent)(l,`keydown`,s(()=>D.value,e=>{D.value=Math.max(e,E.value)})),(0,f.onCleanup)((0,f.aria)(l,{label:`Range end`,valuemax:()=>a.max(),valuemin:()=>E.value,valuenow:()=>D.value,valuetext:()=>e[`to-value-text`].value??null})))},R=e=>{P(Number(T.value));let r=t=>{if(_.value)return;let r=e.getBoundingClientRect(),i=a.fromClientX(t,r);Number(T.value)!==i&&(T.value=i.toString(),P(i),n(`change`,{value:i}),I(`change`))},i=!1;(0,f.onEvent)(e,`pointerdown`,m(()=>!_.value,e=>{e.preventDefault(),i=!0,r(e.clientX),e.target.setPointerCapture(e.pointerId)})),(0,f.onEvent)(e,`pointermove`,m(()=>i,e=>{e.preventDefault(),g.value||=!0,r(e.clientX)})),(0,f.onEvent)(e,`pointerup`,m(()=>i,e=>{e.preventDefault(),i=!1,g.value=!1,e.target.releasePointerCapture(e.pointerId)})),(0,f.onEvent)(t,`keydown`,m(()=>!_.value,e=>{let t=Number(T.value||0),r=a.nextFromKey(e.key,t);if(r===null)return;e.preventDefault();let i=a.clamp(r);i!==t&&(T.value=i.toString(),P(i),n(`change`,{originalEvent:e,value:i}),I(`change`))}))};return(0,f.onMounted)(()=>{let e=O.value;if(e){if(r.has().value&&k.value){let e=(0,f.createStableId)(`slider-label`);k.value.id=e,i||(v.value=e)}i?L(e):R(e)}}),f.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/field-base.cjs"),s=require("./headless/slider.cjs"),c=require("./inputs/shared/form-context.cjs"),l=require("./inputs/shared/templates.cjs"),u=require("./inputs/slider/slider.css.cjs");let d=require("@vielzeug/ore"),f=require("@vielzeug/ripple"),p=require("@vielzeug/ore/forms");var m=(e,t)=>n=>{e()&&t(n)},h=`ore-slider`;(0,d.define)(h,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,error:d.prop.string(),from:d.prop.number(0),"from-value-text":d.prop.string(),helper:d.prop.string(),max:d.prop.number(100),min:d.prop.number(0),name:d.prop.string(),range:d.prop.bool(!1),step:d.prop.number(1),to:d.prop.number(100),"to-value-text":d.prop.string(),value:d.prop.number(0),"value-text":d.prop.string()},setup(e){let t=(0,d.getHost)(),n=(0,d.useEmit)(),r=(0,d.useSlots)(),i=e.range.value,a=s.createSliderControl({max:e.max,min:e.min,step:e.step}),u=(0,d.inject)(c.FORM_CTX),h=c.useFormContext(e,u),g=(0,f.signal)(!1),_=h.disabled,v=(0,f.signal)(void 0),y=(0,d.createStableId)(`helper`),b=o.createErrorHelperState({error:e.error,helper:e.helper}),x=(0,f.computed)(()=>b.value.errorText),S=(0,f.computed)(()=>b.value.helperText),C=(0,f.computed)(()=>x.value||S.value?y:null);(0,d.bind)({attr:{"data-dragging":()=>g.value?!0:void 0,size:h.size}});let w,T=(0,f.signal)(`0`);i||(w=(0,p.useField)({disabled:_,value:T}),(0,f.watch)(e.value,e=>{T.value=String(e)},{immediate:!0}),(0,d.bind)({attr:{ariaDescribedby:()=>C.value??null,ariaDisabled:()=>_.value?`true`:null,ariaLabelledby:()=>v.value??null,ariaValuemax:()=>a.max(),ariaValuemin:()=>a.min(),ariaValuenow:()=>Number(T.value||0),ariaValuetext:()=>e[`value-text`].value??null,role:()=>`slider`,tabindex:()=>_.value?null:`0`}}));let E=(0,f.signal)(0),D=(0,f.signal)(100);i&&(w=(0,p.useField)({disabled:_,toFormValue:({from:t,to:n})=>{let r=e.name.value;if(!r)return null;let i=new FormData;return i.append(`${r}[from]`,String(t)),i.append(`${r}[to]`,String(n)),i},value:(0,f.computed)(()=>({from:E.value,to:D.value}))}),(0,f.watch)(e.from,e=>{E.value=a.snap(Number(e))},{immediate:!0}),(0,f.watch)(e.to,e=>{D.value=a.snap(Number(e))},{immediate:!0}));let O=(0,d.ref)(),k=(0,d.ref)(),A=(0,d.ref)(),j=(0,d.ref)(),M=(0,d.createStableId)(`slider-start`),N=(0,d.createStableId)(`slider-end`),P=e=>{let n=a.toPercent(e);t.style.setProperty(`--_thumb-pos`,`${n}%`),t.style.setProperty(`--_fill-start`,`0%`),t.style.setProperty(`--_fill-width`,`${n}%`)},F=()=>{let e=a.toPercent(E.value),n=a.toPercent(D.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}%`)},I=e=>{u?.validateOn?.value===e&&w?.reportValidity()},L=t=>{F();let r=e=>{let n=t.getBoundingClientRect();return a.fromClientX(e,n)},i=null,o=e=>{i===`start`?E.value=Math.min(a.snap(e),D.value):i===`end`&&(D.value=Math.max(a.snap(e),E.value)),E.value=a.clamp(E.value),D.value=a.clamp(D.value),F(),n(`change`,{from:E.value,to:D.value,value:{from:E.value,to:D.value}}),I(`change`)};(0,d.onEvent)(t,`pointerdown`,m(()=>!_.value,e=>{e.preventDefault();let t=r(e.clientX);i=Math.abs(t-E.value)<=Math.abs(t-D.value)?`start`:`end`,e.target.setPointerCapture(e.pointerId),o(t)})),(0,d.onEvent)(t,`pointermove`,m(()=>!!i,e=>{e.preventDefault(),g.value||=!0,o(r(e.clientX))})),(0,d.onEvent)(t,`pointerup`,m(()=>!!i,e=>{e.preventDefault(),i=null,g.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)),F(),n(`change`,{from:E.value,originalEvent:r,to:D.value,value:{from:E.value,to:D.value}}),I(`change`))},c=A.value,l=j.value;c&&((0,d.onEvent)(c,`keydown`,s(()=>E.value,e=>{E.value=Math.min(e,D.value)})),(0,d.onCleanup)((0,d.aria)(c,{label:`Range start`,valuemax:()=>D.value,valuemin:()=>a.min(),valuenow:()=>E.value,valuetext:()=>e[`from-value-text`].value??null}))),l&&((0,d.onEvent)(l,`keydown`,s(()=>D.value,e=>{D.value=Math.max(e,E.value)})),(0,d.onCleanup)((0,d.aria)(l,{label:`Range end`,valuemax:()=>a.max(),valuemin:()=>E.value,valuenow:()=>D.value,valuetext:()=>e[`to-value-text`].value??null})))},R=e=>{P(Number(T.value));let r=t=>{if(_.value)return;let r=e.getBoundingClientRect(),i=a.fromClientX(t,r);Number(T.value)!==i&&(T.value=i.toString(),P(i),n(`change`,{value:i}),I(`change`))},i=!1;(0,d.onEvent)(e,`pointerdown`,m(()=>!_.value,e=>{e.preventDefault(),i=!0,r(e.clientX),e.target.setPointerCapture(e.pointerId)})),(0,d.onEvent)(e,`pointermove`,m(()=>i,e=>{e.preventDefault(),g.value||=!0,r(e.clientX)})),(0,d.onEvent)(e,`pointerup`,m(()=>i,e=>{e.preventDefault(),i=!1,g.value=!1,e.target.releasePointerCapture(e.pointerId)})),(0,d.onEvent)(t,`keydown`,m(()=>!_.value,e=>{let t=Number(T.value||0),r=a.nextFromKey(e.key,t);if(r===null)return;e.preventDefault();let i=a.clamp(r);i!==t&&(T.value=i.toString(),P(i),n(`change`,{originalEvent:e,value:i}),I(`change`))}))};return(0,d.onMounted)(()=>{let e=O.value;if(e){if(r.has().value&&k.value){let e=(0,d.createStableId)(`slider-label`);k.value.id=e,i||(v.value=e)}i?L(e):R(e)}}),d.html`
       <div class="slider-container" part="slider" ref=${O}>
         <div class="slider-track" part="track">
           <div class="slider-fill" part="fill"></div>
@@ -22,6 +22,6 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         </div>
       </div>
       <span class="label" part="label" ref=${k}><slot></slot></span>
-      ${u.renderHelperRegion(y,x,S)}
-    `},styles:[n.disabledStateMixin,r.colorThemeMixin,t.sizeVariantMixin(a.SLIDER_SIZE_PRESET),d.default,e.coarsePointerMixin]}),exports.SLIDER_TAG=h;
+      ${l.renderHelperRegion(y,x,S)}
+    `},styles:[n.disabledStateMixin,r.colorThemeMixin,t.sizeVariantMixin(a.SLIDER_SIZE_PRESET),u.default,e.coarsePointerMixin]}),exports.SLIDER_TAG=h;
 //# sourceMappingURL=slider.cjs.map

package/dist/slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"slider.cjs","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.cjs","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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"}

package/dist/slider.js

@@ -6,86 +6,85 @@ import { disablableBundle as i, sizableBundle as a, themableBundle as o } from "
 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 { useField as u } from "./ore/dist/forms/field.js";
-import "./ore/dist/forms.js";
-import { FORM_CTX as d, useFormContext as f } from "./inputs/shared/form-context.js";
-import { renderHelperRegion as p } from "./inputs/shared/templates.js";
-import m from "./inputs/slider/slider.css.js";
-import { aria as h, bind as g, createStableId as _, define as v, getHost as y, html as b, inject as x, onCleanup as S, onEvent as C, onMounted as w, prop as T, ref as E, useEmit as D, useSlots as O } from "@vielzeug/ore";
-import { computed as k, signal as A, watch as j } from "@vielzeug/ripple";
+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";
 //#region src/inputs/slider/slider.ts
 var M = (e, t) => (n) => {
 	e() && t(n);
 }, N = "ore-slider";
-v(N, {
+_(N, {
 	formAssociated: !0,
 	props: {
 		...o,
 		...a,
 		...i,
-		error: T.string(),
-		from: T.number(0),
-		"from-value-text": T.string(),
-		helper: T.string(),
-		max: T.number(100),
-		min: T.number(0),
-		name: T.string(),
-		range: T.bool(!1),
-		step: T.number(1),
-		to: T.number(100),
-		"to-value-text": T.string(),
-		value: T.number(0),
-		"value-text": T.string()
+		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()
 	},
 	setup(e) {
-		let t = y(), n = D(), r = O(), i = e.range.value, a = l({
+		let t = v(), n = E(), r = D(), i = e.range.value, a = l({
 			max: e.max,
 			min: e.min,
 			step: e.step
-		}), o = x(d), s = f(e, o), m = A(!1), v = s.disabled, T = A(void 0), N = _("helper"), P = c({
+		}), 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 = k(() => P.value.errorText), I = k(() => P.value.helperText), L = k(() => F.value || I.value ? N : null);
-		g({ attr: {
-			"data-dragging": () => m.value ? !0 : void 0,
+		}), F = O(() => P.value.errorText), I = O(() => P.value.helperText), L = O(() => F.value || I.value ? N : null);
+		h({ attr: {
+			"data-dragging": () => p.value ? !0 : void 0,
 			size: s.size
 		} });
-		let R, z = A("0");
-		i || (R = u({
-			disabled: v,
+		let R, z = k("0");
+		i || (R = j({
+			disabled: _,
 			value: z
-		}), j(e.value, (e) => {
+		}), A(e.value, (e) => {
 			z.value = String(e);
-		}, { immediate: !0 }), g({ attr: {
+		}, { immediate: !0 }), h({ attr: {
 			ariaDescribedby: () => L.value ?? null,
-			ariaDisabled: () => v.value ? "true" : null,
-			ariaLabelledby: () => T.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,
 			role: () => "slider",
-			tabindex: () => v.value ? null : "0"
+			tabindex: () => _.value ? null : "0"
 		} }));
-		let B = A(0), V = A(100);
-		i && (R = u({
-			disabled: v,
+		let B = k(0), V = k(100);
+		i && (R = j({
+			disabled: _,
 			toFormValue: ({ from: t, to: n }) => {
 				let r = e.name.value;
 				if (!r) return null;
 				let i = new FormData();
 				return i.append(`${r}[from]`, String(t)), i.append(`${r}[to]`, String(n)), i;
 			},
-			value: k(() => ({
+			value: O(() => ({
 				from: B.value,
 				to: V.value
 			}))
-		}), j(e.from, (e) => {
+		}), A(e.from, (e) => {
 			B.value = a.snap(Number(e));
-		}, { immediate: !0 }), j(e.to, (e) => {
+		}, { immediate: !0 }), A(e.to, (e) => {
 			V.value = a.snap(Number(e));
 		}, { immediate: !0 }));
-		let H = E(), U = E(), W = E(), G = E(), K = _("slider-start"), q = _("slider-end"), J = (e) => {
+		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 = () => {
@@ -108,17 +107,17 @@ v(N, {
 					}
 				}), X("change");
 			};
-			C(t, "pointerdown", M(() => !v.value, (e) => {
+			S(t, "pointerdown", M(() => !_.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);
-			})), C(t, "pointermove", M(() => !!i, (e) => {
-				e.preventDefault(), m.value ||= !0, o(r(e.clientX));
-			})), C(t, "pointerup", M(() => !!i, (e) => {
-				e.preventDefault(), i = null, m.value = !1, e.target.releasePointerCapture(e.pointerId);
+			})), 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);
 			}));
 			let s = (e, t) => (r) => {
-				if (v.value) return;
+				if (_.value) return;
 				let i = a.nextFromKey(r.key, e());
 				i !== null && (r.preventDefault(), t(a.snap(i)), Y(), n("change", {
 					from: B.value,
@@ -130,17 +129,17 @@ v(N, {
 					}
 				}), X("change"));
 			}, c = W.value, l = G.value;
-			c && (C(c, "keydown", s(() => B.value, (e) => {
+			c && (S(c, "keydown", s(() => B.value, (e) => {
 				B.value = Math.min(e, V.value);
-			})), S(h(c, {
+			})), x(m(c, {
 				label: "Range start",
 				valuemax: () => V.value,
 				valuemin: () => a.min(),
 				valuenow: () => B.value,
 				valuetext: () => e["from-value-text"].value ?? null
-			}))), l && (C(l, "keydown", s(() => V.value, (e) => {
+			}))), l && (S(l, "keydown", s(() => V.value, (e) => {
 				V.value = Math.max(e, B.value);
-			})), S(h(l, {
+			})), x(m(l, {
 				label: "Range end",
 				valuemax: () => a.max(),
 				valuemin: () => B.value,
@@ -150,17 +149,17 @@ v(N, {
 		}, Q = (e) => {
 			J(Number(z.value));
 			let r = (t) => {
-				if (v.value) return;
+				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"));
 			}, i = !1;
-			C(e, "pointerdown", M(() => !v.value, (e) => {
+			S(e, "pointerdown", M(() => !_.value, (e) => {
 				e.preventDefault(), i = !0, r(e.clientX), e.target.setPointerCapture(e.pointerId);
-			})), C(e, "pointermove", M(() => i, (e) => {
-				e.preventDefault(), m.value ||= !0, r(e.clientX);
-			})), C(e, "pointerup", M(() => i, (e) => {
-				e.preventDefault(), i = !1, m.value = !1, e.target.releasePointerCapture(e.pointerId);
-			})), C(t, "keydown", M(() => !v.value, (e) => {
+			})), 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;
 				e.preventDefault();
@@ -171,16 +170,16 @@ v(N, {
 				}), X("change"));
 			}));
 		};
-		return w(() => {
+		return C(() => {
 			let e = H.value;
 			if (e) {
 				if (r.has().value && U.value) {
-					let e = _("slider-label");
-					U.value.id = e, i || (T.value = e);
+					let e = g("slider-label");
+					U.value.id = e, i || (w.value = e);
 				}
 				i ? Z(e) : Q(e);
 			}
-		}), b`
+		}), y`
       <div class="slider-container" part="slider" ref=${H}>
         <div class="slider-track" part="track">
           <div class="slider-fill" part="fill"></div>
@@ -190,7 +189,7 @@ v(N, {
             part="thumb-start"
             ref=${W}
             role="slider"
-            tabindex="${() => v.value ? "-1" : "0"}"
+            tabindex="${() => _.value ? "-1" : "0"}"
             :aria-describedby="${L}"
             id="${K}"></div>
           <div
@@ -198,20 +197,20 @@ v(N, {
             part="thumb-end"
             ref=${G}
             role="slider"
-            tabindex="${() => v.value ? "-1" : "0"}"
+            tabindex="${() => _.value ? "-1" : "0"}"
             :aria-describedby="${L}"
             id="${q}"></div>
         </div>
       </div>
       <span class="label" part="label" ref=${U}><slot></slot></span>
-      ${p(N, F, I)}
+      ${f(N, F, I)}
     `;
 	},
 	styles: [
 		n,
 		r,
 		t(s),
-		m,
+		p,
 		e
 	]
 });