@vielzeug/refine 1.7.0 → 2.0.0

package/dist/skeleton.cjs

@@ -1,10 +1,8 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./utils/css.cjs"),r=require("./feedback/skeleton/skeleton.css.cjs");let i=require("@vielzeug/ore"),a=require("@vielzeug/ripple"),o=require("@vielzeug/ore/observers");var s=`ore-skeleton`;(0,i.define)(s,{props:{...t.sizableBundle,animated:i.prop.bool(!0),height:i.prop.string(),lines:i.prop.number(1),radius:i.prop.string(),striped:i.prop.bool(!1),variant:i.prop.oneOf([`rect`,`circle`,`text`],`rect`),width:i.prop.string()},setup(e){let t=(0,i.getHost)(),r=(0,a.signal)(!1),s=()=>{let t=Math.floor(Number(e.lines.value));return Number.isFinite(t)&&t>0?t:1},c=()=>e.variant.value===`text`?s():1;return(0,a.watch)((0,a.computed)(()=>`${e.width.value??``}|${e.height.value??``}|${e.radius.value??``}|${e.animated.value===!1?`0`:`1`}`),()=>{let r=n.safeCSSLength(e.width.value),i=n.safeCSSLength(e.height.value),a=n.safeCSSLength(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}),(0,i.bind)({attr:{"data-paused":()=>r.value?!0:void 0}}),(0,i.onMounted)(()=>{(0,a.watch)((0,o.intersectionObserver)(t,{threshold:0}),e=>{let t=typeof e==`object`&&e&&`isIntersecting`in e?!e.isIntersecting:!1;r.value=t})}),i.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./utils/css.cjs"),r=require("./feedback/skeleton/skeleton.css.cjs");let i=require("@vielzeug/ore"),a=require("@vielzeug/ripple"),o=require("@vielzeug/ripple/watch");var s=`ore-skeleton`;(0,i.define)(s,{props:{...t.sizableBundle,animated:i.prop.bool(!0),height:i.prop.string(),lines:i.prop.number(1),radius:i.prop.string(),striped:i.prop.bool(!1),variant:i.prop.oneOf([`rect`,`circle`,`text`],`rect`),width:i.prop.string()},setup(e){let t=(0,i.getHost)(),r=(0,a.signal)(!1),s=()=>{let t=Math.floor(Number(e.lines.value));return Number.isFinite(t)&&t>0?t:1},c=()=>e.variant.value===`text`?s():1;return(0,o.watch)((0,a.computed)(()=>`${e.width.value??``}|${e.height.value??``}|${e.radius.value??``}|${e.animated.value===!1?`0`:`1`}`),()=>{let r=n.safeCSSLength(e.width.value),i=n.safeCSSLength(e.height.value),a=n.safeCSSLength(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}),(0,i.bind)({attr:{"data-paused":()=>r.value?!0:void 0}}),(0,i.onMounted)(()=>{let e=(0,i.intersectionObserver)(t,{threshold:0});(0,o.watch)(e,e=>{let t=typeof e==`object`&&e&&`isIntersecting`in e?!e.isIntersecting:!1;r.value=t})}),i.html`
       <div class="stack" part="stack">
-        ${()=>Array.from({length:c()},(t,n)=>{let r=e.variant.value===`text`&&c()>1&&n===c()-1;return i.html`<div
-              class="bone"
-              part="bone"
-              aria-hidden="true"
-              :data-last="${()=>r?`true`:null}"></div>`})}
+        ${()=>Array.from({length:c()},(t,n)=>{let r=e.variant.value===`text`&&c()>1&&n===c()-1;return i.html`
+              <div class="bone" part="bone" aria-hidden="true" data-last="${()=>r?`true`:null}"></div>
+            `})}
       </div>
     `},styles:[e.reducedMotionMixin,r.default]}),exports.SKELETON_TAG=s;
 //# sourceMappingURL=skeleton.cjs.map

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":"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"}
+{"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';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\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`\n              <div class=\"bone\" part=\"bone\" aria-hidden=\"true\" data-last=\"${() => (isLastLine ? 'true' : null)}\"></div>\n            `;\n          })}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"mVAyEA,IAAa,EAAe,gBAC5B,EAAA,EAAA,OAAA,CAAyB,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,EAAK,EAAA,QAAA,CAAQ,EAEb,GAAA,EAAW,EAAA,OAAA,CAAO,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,EACE,EAAA,SAAA,KAHA,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,CACd,IAAM,GAAA,EAAQ,EAAA,qBAAA,CAAqB,EAAI,CAAE,UAAW,CAAE,CAAC,GAEvD,EAAA,EAAA,MAAA,CAAM,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;gFAC4D,EAAa,OAAS,KAAM;aAErG,CAAC,EAAE;;KAGX,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAe,CAC9C,CAAC"}

package/dist/skeleton.js

@@ -2,50 +2,49 @@ 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 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";
+import { bind as i, define as a, getHost as o, html as s, intersectionObserver as c, onMounted as l, prop as u } from "@vielzeug/ore";
+import { computed as d, signal as f } from "@vielzeug/ripple";
+import { watch as p } from "@vielzeug/ripple/watch";
 //#region src/feedback/skeleton/skeleton.ts
 var m = "ore-skeleton";
 a(m, {
 	props: {
 		...t,
-		animated: l.bool(!0),
-		height: l.string(),
-		lines: l.number(1),
-		radius: l.string(),
-		striped: l.bool(!1),
-		variant: l.oneOf([
+		animated: u.bool(!0),
+		height: u.string(),
+		lines: u.number(1),
+		radius: u.string(),
+		striped: u.bool(!1),
+		variant: u.oneOf([
 			"rect",
 			"circle",
 			"text"
 		], "rect"),
-		width: l.string()
+		width: u.string()
 	},
 	setup(e) {
-		let t = o(), r = d(!1), a = () => {
+		let t = o(), r = f(!1), a = () => {
 			let t = Math.floor(Number(e.lines.value));
 			return Number.isFinite(t) && t > 0 ? t : 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"}`), () => {
+		}, u = () => e.variant.value === "text" ? a() : 1;
+		return p(d(() => `${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 }), i({ attr: { "data-paused": () => r.value ? !0 : void 0 } }), c(() => {
-			f(p(t, { threshold: 0 }), (e) => {
+		}, { immediate: !0 }), i({ attr: { "data-paused": () => r.value ? !0 : void 0 } }), l(() => {
+			let e = c(t, { threshold: 0 });
+			p(e, (e) => {
 				let t = typeof e == "object" && e && "isIntersecting" in e ? !e.isIntersecting : !1;
 				r.value = t;
 			});
 		}), s`
       <div class="stack" part="stack">
-        ${() => 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"
-              :data-last="${() => r ? "true" : null}"></div>`;
+        ${() => Array.from({ length: u() }, (t, n) => {
+			let r = e.variant.value === "text" && u() > 1 && n === u() - 1;
+			return s`
+              <div class="bone" part="bone" aria-hidden="true" data-last="${() => r ? "true" : null}"></div>
+            `;
 		})}
       </div>
     `;

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';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\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`\n              <div class=\"bone\" part=\"bone\" aria-hidden=\"true\" data-last=\"${() => (isLastLine ? 'true' : null)}\"></div>\n            `;\n          })}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;AAyEA,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;GACd,IAAM,IAAQ,EAAqB,GAAI,EAAE,WAAW,EAAE,CAAC;GAEvD,EAAM,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;kFAC4D,IAAa,SAAS,KAAM;;EAErG,CAAC,EAAE;;;CAGX;CACA,QAAQ,CAAC,GAAoB,CAAe;AAC9C,CAAC"}

package/dist/slider.cjs

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