@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/slider.cjs

@@ -1,24 +1,24 @@
-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`);require(`./styles/index.cjs`);const i=require(`./inputs/shared/form-context.cjs`),a=require(`./inputs/shared/dom-sync/form-context.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const o=require(`./inputs/shared/validation/index.cjs`),s=require(`./inputs/shared/design-presets.cjs`),c=require(`./inputs/slider/slider.css?inline.cjs`);let l=require(`@vielzeug/craftit`);var u=(0,l.defineComponent)({formAssociated:!0,props:{color:{default:void 0},disabled:{default:!1},from:{default:`0`},"from-value-text":{default:void 0},max:{default:`100`},min:{default:`0`},name:{default:``},range:{default:!1},size:{default:void 0},step:{default:`1`},to:{default:`100`},"to-value-text":{default:void 0},value:{default:`0`},"value-text":{default:void 0}},setup({emit:e,host:t,props:n,slots:r}){let s=n.range.value,c=(e,t)=>{let n=Number(e);return Number.isFinite(n)?n:t},u=e=>{let t=c(n.min.value,0),r=c(n.max.value,100),i=c(n.step.value,1);return Math.max(t,Math.min(r,Math.round(e/i)*i))},d=e=>{let t=c(n.min.value,0),r=c(n.max.value,100);return(e-t)/(r-t)*100},f=(0,l.inject)(i.FORM_CTX,void 0);a.mountFormContextSync(t,f,n);let p,m=(0,l.signal)(`0`);s||(p=(0,l.defineField)({disabled:(0,l.computed)(()=>!!n.disabled.value),value:m},{onReset:()=>{m.value=`0`}}),(0,l.watch)(n.value,e=>{m.value=String(e)},{immediate:!0}),(0,l.aria)({disabled:()=>!!n.disabled.value,valuemax:()=>c(n.max.value,100),valuemin:()=>c(n.min.value,0),valuenow:()=>Number(m.value||0),valuetext:()=>n[`value-text`].value??null}));let h=(0,l.signal)(0),g=(0,l.signal)(100);s&&(p=(0,l.defineField)({disabled:(0,l.computed)(()=>!!n.disabled.value),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,l.computed)(()=>({from:h.value,to:g.value}))},{onReset:()=>{h.value=u(c(n.from.value,0)),g.value=u(c(n.to.value,100))}}),(0,l.watch)(n.from,e=>{h.value=u(c(e,0))},{immediate:!0}),(0,l.watch)(n.to,e=>{g.value=u(c(e,100))},{immediate:!0}));let _=(0,l.ref)(),v=(0,l.ref)(),y=(0,l.ref)(),b=(0,l.ref)(),x=(0,l.createId)(`slider-start`),S=(0,l.createId)(`slider-end`),C=e=>{let n=d(e);t.style.setProperty(`--_thumb-pos`,`${n}%`),t.style.setProperty(`--_fill-start`,`0%`),t.style.setProperty(`--_fill-width`,`${n}%`)},w=()=>{let e=d(h.value),n=d(g.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}%`)},T=(e,t,n,r,i)=>e===`ArrowRight`||e===`ArrowUp`?i+t:e===`ArrowLeft`||e===`ArrowDown`?i-t:e===`Home`?n:e===`End`?r:null,{triggerValidation:E}=o.createFieldValidation(f,{reportValidity:()=>p?.reportValidity()??!1}),D=r=>{w();let i=e=>{let t=r.getBoundingClientRect(),i=c(n.min.value,0),a=c(n.max.value,100);return u(i+Math.max(0,Math.min(1,(e-t.left)/t.width))*(a-i))},a=null,o=t=>{let r=c(n.min.value,0),i=c(n.max.value,100);a===`start`?h.value=Math.min(u(t),g.value):a===`end`&&(g.value=Math.max(u(t),h.value)),h.value=Math.max(r,Math.min(h.value,i)),g.value=Math.max(r,Math.min(g.value,i)),w(),e(`change`,{from:h.value,to:g.value,value:{from:h.value,to:g.value}}),E(`change`)};(0,l.handle)(r,`pointerdown`,(0,l.guard)(()=>!n.disabled.value,e=>{e.preventDefault();let n=i(e.clientX);a=Math.abs(n-h.value)<=Math.abs(n-g.value)?`start`:`end`,t.setAttribute(`data-dragging`,``),e.target.setPointerCapture(e.pointerId),o(n)})),(0,l.handle)(r,`pointermove`,(0,l.guard)(()=>!!a,e=>{e.preventDefault(),o(i(e.clientX))})),(0,l.handle)(r,`pointerup`,(0,l.guard)(()=>!!a,e=>{e.preventDefault(),a=null,t.removeAttribute(`data-dragging`),e.target.releasePointerCapture(e.pointerId)}));let s=(t,r)=>i=>{if(n.disabled.value)return;let a=c(n.step.value,1),o=c(n.min.value,0),s=c(n.max.value,100),l=T(i.key,a,o,s,t());l!==null&&(i.preventDefault(),r(u(Math.max(o,Math.min(s,l)))),w(),e(`change`,{from:h.value,originalEvent:i,to:g.value,value:{from:h.value,to:g.value}}),E(`change`))},d=y.value,f=b.value;d&&(d.addEventListener(`keydown`,s(()=>h.value,e=>{h.value=Math.min(e,g.value)})),(0,l.aria)(d,{label:`Range start`,valuemax:()=>g.value,valuemin:()=>c(n.min.value,0),valuenow:()=>h.value,valuetext:()=>n[`from-value-text`].value??null})),f&&(f.addEventListener(`keydown`,s(()=>g.value,e=>{g.value=Math.max(e,h.value)})),(0,l.aria)(f,{label:`Range end`,valuemax:()=>c(n.max.value,100),valuemin:()=>h.value,valuenow:()=>g.value,valuetext:()=>n[`to-value-text`].value??null}))},O=r=>{t.setAttribute(`role`,`slider`),n.disabled.value||t.setAttribute(`tabindex`,`0`),C(Number(m.value));let i=t=>{if(n.disabled.value)return;let i=r.getBoundingClientRect(),a=c(n.min.value,0),o=c(n.max.value,100),s=c(n.step.value,1),l=Math.max(0,Math.min(1,(t-i.left)/i.width)),u=Math.max(a,Math.min(o,Math.round((a+l*(o-a))/s)*s));Number(m.value)!==u&&(m.value=u.toString(),C(u),e(`change`,{value:u}),E(`change`))},a=!1;(0,l.handle)(r,`pointerdown`,(0,l.guard)(()=>!n.disabled.value,e=>{e.preventDefault(),a=!0,i(e.clientX),e.target.setPointerCapture(e.pointerId)})),(0,l.handle)(r,`pointermove`,(0,l.guard)(()=>a,e=>{e.preventDefault(),t.hasAttribute(`data-dragging`)||t.setAttribute(`data-dragging`,``),i(e.clientX)})),(0,l.handle)(r,`pointerup`,(0,l.guard)(()=>a,e=>{e.preventDefault(),a=!1,t.removeAttribute(`data-dragging`),e.target.releasePointerCapture(e.pointerId)})),(0,l.handle)(t,`keydown`,(0,l.guard)(()=>!n.disabled.value,t=>{let r=c(n.min.value,0),i=c(n.max.value,100),a=c(n.step.value,1),o=Number(m.value||0),s=T(t.key,a,r,i,o);if(s===null)return;t.preventDefault();let l=Math.max(r,Math.min(i,s));l!==o&&(m.value=l.toString(),C(l),e(`change`,{originalEvent:t,value:l}),E(`change`))}))};return(0,l.onMount)(()=>{let e=_.value;if(e){if(r.has(`default`).value&&v.value){let e=(0,l.createId)(`slider-label`);v.value.id=e,s||(0,l.aria)({labelledby:e})}s?D(e):O(e)}}),l.html`
-      <div class="slider-container" part="slider" ref=${_}>
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./inputs/shared/bundles.cjs`),t=require(`./styles/mixins/accessibility.css.cjs`),n=require(`./styles/mixins/shape.css.cjs`),r=require(`./styles/mixins/states.css.cjs`),i=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const a=require(`./packages/craftit/dist/controls/internal/control-state.cjs`),o=require(`./packages/craftit/dist/controls/slider-control.cjs`);require(`./packages/craftit/dist/controls.cjs`);const s=require(`./inputs/shared/form-context.cjs`),c=require(`./inputs/shared/dom-sync/form-context.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const l=require(`./inputs/shared/design-presets.cjs`),u=require(`./utils/aria.cjs`),d=require(`./inputs/slider/slider.css?inline.cjs`);let f=require(`@vielzeug/craftit`);var p=(e,t)=>n=>{e()&&t(n)},m={...e.themableBundle,...e.sizableBundle,...e.disablableBundle,from:`0`,"from-value-text":void 0,max:`100`,min:`0`,name:``,range:!1,step:`1`,to:`100`,"to-value-text":void 0,value:`0`,"value-text":void 0},h=(0,f.define)(`bit-slider`,{formAssociated:!0,props:m,setup({emit:e,host:t,props:n,slots:r}){let i=n.range.value,l=o.i({max:()=>n.max.value,min:()=>n.min.value,step:()=>n.step.value}),d=(0,f.inject)(s.FORM_CTX,void 0),m=(0,f.signal)(!1),h=(0,f.computed)(()=>!!n.disabled.value),g=(0,f.signal)(void 0);c.mountFormContextSync(t.el,d,n),t.bind(`attr`,{"data-dragging":()=>m.value?!0:void 0});let _,v=(0,f.signal)(`0`);i||(_=(0,f.defineField)({disabled:h,value:v},{onReset:()=>{v.value=`0`}}),(0,f.watch)(n.value,e=>{v.value=String(e)},{immediate:!0}),t.bind(`attr`,{ariaDisabled:()=>h.value?`true`:null,ariaLabelledby:()=>g.value??null,ariaValuemax:()=>l.max(),ariaValuemin:()=>l.min(),ariaValuenow:()=>Number(v.value||0),ariaValuetext:()=>n[`value-text`].value??null,role:()=>`slider`,tabindex:()=>h.value?null:`0`}));let y=(0,f.signal)(0),b=(0,f.signal)(100);i&&(_=(0,f.defineField)({disabled:h,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:y.value,to:b.value}))},{onReset:()=>{y.value=l.snap(Number(n.from.value)),b.value=l.snap(Number(n.to.value))}}),(0,f.watch)(n.from,e=>{y.value=l.snap(Number(e))},{immediate:!0}),(0,f.watch)(n.to,e=>{b.value=l.snap(Number(e))},{immediate:!0}));let x=(0,f.ref)(),S=(0,f.ref)(),C=(0,f.ref)(),w=(0,f.ref)(),T=(0,f.createId)(`slider-start`),E=(0,f.createId)(`slider-end`),D=e=>{let n=l.toPercent(e);t.el.style.setProperty(`--_thumb-pos`,`${n}%`),t.el.style.setProperty(`--_fill-start`,`0%`),t.el.style.setProperty(`--_fill-width`,`${n}%`)},O=()=>{let e=l.toPercent(y.value),n=l.toPercent(b.value);t.el.style.setProperty(`--_thumb-start`,`${e}%`),t.el.style.setProperty(`--_thumb-end`,`${n}%`),t.el.style.setProperty(`--_fill-start`,`${e}%`),t.el.style.setProperty(`--_fill-width`,`${n-e}%`)},{triggerValidation:k}=a.i(d?.validateOn,{reportValidity:()=>_?.reportValidity()??!1}),A=t=>{O();let r=e=>{let n=t.getBoundingClientRect();return l.fromClientX(e,n)},i=null,a=t=>{i===`start`?y.value=Math.min(l.snap(t),b.value):i===`end`&&(b.value=Math.max(l.snap(t),y.value)),y.value=l.clamp(y.value),b.value=l.clamp(b.value),O(),e(`change`,{from:y.value,to:b.value,value:{from:y.value,to:b.value}}),k(`change`)};(0,f.handle)(t,`pointerdown`,p(()=>!h.value,e=>{e.preventDefault();let t=r(e.clientX);i=Math.abs(t-y.value)<=Math.abs(t-b.value)?`start`:`end`,m.value=!0,e.target.setPointerCapture(e.pointerId),a(t)})),(0,f.handle)(t,`pointermove`,p(()=>!!i,e=>{e.preventDefault(),a(r(e.clientX))})),(0,f.handle)(t,`pointerup`,p(()=>!!i,e=>{e.preventDefault(),i=null,m.value=!1,e.target.releasePointerCapture(e.pointerId)}));let o=(t,n)=>r=>{if(h.value)return;let i=l.nextFromKey(r.key,t());i!==null&&(r.preventDefault(),n(l.snap(i)),O(),e(`change`,{from:y.value,originalEvent:r,to:b.value,value:{from:y.value,to:b.value}}),k(`change`))},s=C.value,c=w.value;s&&((0,f.handle)(s,`keydown`,o(()=>y.value,e=>{y.value=Math.min(e,b.value)})),u.syncAria(s,{label:`Range start`,valuemax:()=>b.value,valuemin:()=>l.min(),valuenow:()=>y.value,valuetext:()=>n[`from-value-text`].value??null})),c&&((0,f.handle)(c,`keydown`,o(()=>b.value,e=>{b.value=Math.max(e,y.value)})),u.syncAria(c,{label:`Range end`,valuemax:()=>l.max(),valuemin:()=>y.value,valuenow:()=>b.value,valuetext:()=>n[`to-value-text`].value??null}))},j=n=>{D(Number(v.value));let r=t=>{if(h.value)return;let r=n.getBoundingClientRect(),i=l.fromClientX(t,r);Number(v.value)!==i&&(v.value=i.toString(),D(i),e(`change`,{value:i}),k(`change`))},i=!1;(0,f.handle)(n,`pointerdown`,p(()=>!h.value,e=>{e.preventDefault(),i=!0,r(e.clientX),e.target.setPointerCapture(e.pointerId)})),(0,f.handle)(n,`pointermove`,p(()=>i,e=>{e.preventDefault(),m.value||=!0,r(e.clientX)})),(0,f.handle)(n,`pointerup`,p(()=>i,e=>{e.preventDefault(),i=!1,m.value=!1,e.target.releasePointerCapture(e.pointerId)})),(0,f.handle)(t.el,`keydown`,p(()=>!h.value,t=>{let n=Number(v.value||0),r=l.nextFromKey(t.key,n);if(r===null)return;t.preventDefault();let i=l.clamp(r);i!==n&&(v.value=i.toString(),D(i),e(`change`,{originalEvent:t,value:i}),k(`change`))}))};return(0,f.onMount)(()=>{let e=x.value;if(e){if(r.has().value&&S.value){let e=(0,f.createId)(`slider-label`);S.value.id=e,i||(g.value=e)}i?A(e):j(e)}}),f.html`
+      <div class="slider-container" part="slider" ref=${x}>
         <div class="slider-track" part="track">
           <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=${y}
+            ref=${C}
             role="slider"
-            tabindex="${()=>n.disabled.value?`-1`:`0`}"
-            id="${x}"></div>
+            tabindex="${()=>h.value?`-1`:`0`}"
+            id="${T}"></div>
           <div
             class="slider-thumb slider-thumb-end"
             part="thumb-end"
-            ref=${b}
+            ref=${w}
             role="slider"
-            tabindex="${()=>n.disabled.value?`-1`:`0`}"
-            id="${S}"></div>
+            tabindex="${()=>h.value?`-1`:`0`}"
+            id="${E}"></div>
         </div>
       </div>
-      <span class="label" part="label" ref=${v}><slot></slot></span>
-    `},styles:[n.disabledStateMixin(),r.colorThemeMixin,t.sizeVariantMixin(s.SLIDER_SIZE_PRESET),c.default,e.coarsePointerMixin],tag:`bit-slider`});exports.SLIDER_TAG=u;
+      <span class="label" part="label" ref=${S}><slot></slot></span>
+    `},styles:[r.disabledStateMixin(),i.colorThemeMixin,n.sizeVariantMixin(l.SLIDER_SIZE_PRESET),d.default,t.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  aria,\n  computed,\n  createId,\n  defineComponent,\n  defineField,\n  guard,\n  handle,\n  html,\n  inject,\n  onMount,\n  ref,\n  signal,\n  watch,\n} from '@vielzeug/craftit';\n\nimport type { DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { SLIDER_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport { createFieldValidation } from '../shared/validation';\nimport componentStyles from './slider.css?inline';\n\n/** Slider component properties */\n\nexport type BitSliderEvents = {\n  change: { from?: number; originalEvent?: Event; to?: number; value: number | { from: number; to: number } };\n};\n\nexport type BitSliderProps = ThemableProps &\n  SizableProps &\n  DisablableProps & {\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    /** 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    /** 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 bit-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\n * @attr {string}  size  - 'sm' | 'md' | 'lg'\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 *\n * @cssprop --slider-height - Track height\n * @cssprop --slider-size   - Thumb dimensions\n * @cssprop --slider-track  - Track background color\n * @cssprop --slider-fill   - Fill background color\n * @cssprop --slider-thumb  - Thumb background color\n *\n * @example\n * ```html\n * <bit-slider value=\"50\" name=\"volume\">Volume</bit-slider>\n * <bit-slider range from=\"20\" to=\"80\" color=\"primary\">Price range</bit-slider>\n * ```\n */\nexport const SLIDER_TAG = defineComponent<BitSliderProps, BitSliderEvents>({\n  formAssociated: true,\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    from: { default: '0' },\n    'from-value-text': { default: undefined },\n    max: { default: '100' },\n    min: { default: '0' },\n    name: { default: '' },\n    range: { default: false },\n    size: { default: undefined },\n    step: { default: '1' },\n    to: { default: '100' },\n    'to-value-text': { default: undefined },\n    value: { default: '0' },\n    'value-text': { default: undefined },\n  },\n  setup({ emit, host, props, slots }) {\n    // Treat `range` as static — determined at first render\n    const isRange = props.range.value;\n    // ── Shared helpers ────────────────────────────────────────────\n    const getNum = (v: string | number | undefined, fallback: number) => {\n      const n = Number(v);\n\n      return Number.isFinite(n) ? n : fallback;\n    };\n    const snapVal = (value: number) => {\n      const min = getNum(props.min.value, 0);\n      const max = getNum(props.max.value, 100);\n      const step = getNum(props.step.value, 1);\n\n      return Math.max(min, Math.min(max, Math.round(value / step) * step));\n    };\n    const toPercent = (value: number) => {\n      const min = getNum(props.min.value, 0);\n      const max = getNum(props.max.value, 100);\n\n      return ((value - min) / (max - min)) * 100;\n    };\n    // ── Single-value state ────────────────────────────────────────\n    const formCtx = inject(FORM_CTX, undefined);\n\n    mountFormContextSync(host, formCtx, props);\n\n    let sliderFd:\n      | {\n          reportValidity: () => boolean;\n        }\n      | undefined;\n    const valueSignal = signal('0');\n\n    if (!isRange) {\n      sliderFd = defineField(\n        { disabled: computed(() => Boolean(props.disabled.value)), value: valueSignal },\n        {\n          onReset: () => {\n            valueSignal.value = '0';\n          },\n        },\n      );\n      watch(\n        props.value,\n        (v) => {\n          valueSignal.value = String(v);\n        },\n        { immediate: true },\n      );\n      aria({\n        disabled: () => Boolean(props.disabled.value),\n        valuemax: () => getNum(props.max.value, 100),\n        valuemin: () => getNum(props.min.value, 0),\n        valuenow: () => Number(valueSignal.value || 0),\n        valuetext: () => props['value-text'].value ?? null,\n      });\n    }\n\n    // ── Range state ───────────────────────────────────────────────\n    const startVal = signal(0);\n    const endVal = signal(100);\n\n    if (isRange) {\n      sliderFd = defineField<{\n        from: number;\n        to: number;\n      }>(\n        {\n          disabled: computed(() => Boolean(props.disabled.value)),\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        {\n          onReset: () => {\n            startVal.value = snapVal(getNum(props.from.value, 0));\n            endVal.value = snapVal(getNum(props.to.value, 100));\n          },\n        },\n      );\n      watch(\n        props.from,\n        (v) => {\n          startVal.value = snapVal(getNum(v as string | number | undefined, 0));\n        },\n        { immediate: true },\n      );\n      watch(\n        props.to,\n        (v) => {\n          endVal.value = snapVal(getNum(v as string | number | undefined, 100));\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 = createId('slider-start');\n    const endId = createId('slider-end');\n    // ── CSS update helpers ────────────────────────────────────────\n    const updateSingleCSS = (value: number) => {\n      const pct = toPercent(value);\n\n      host.style.setProperty('--_thumb-pos', `${pct}%`);\n      host.style.setProperty('--_fill-start', '0%');\n      host.style.setProperty('--_fill-width', `${pct}%`);\n    };\n    const updateRangeCSS = () => {\n      const s = toPercent(startVal.value);\n      const e = toPercent(endVal.value);\n\n      host.style.setProperty('--_thumb-start', `${s}%`);\n      host.style.setProperty('--_thumb-end', `${e}%`);\n      host.style.setProperty('--_fill-start', `${s}%`);\n      host.style.setProperty('--_fill-width', `${e - s}%`);\n    };\n    // ── Key-delta maps (avoids switch complexity) ─────────────────\n    const keyDelta = (key: string, step: number, min: number, max: number, current: number): number | null => {\n      if (key === 'ArrowRight' || key === 'ArrowUp') return current + step;\n\n      if (key === 'ArrowLeft' || key === 'ArrowDown') return current - step;\n\n      if (key === 'Home') return min;\n\n      if (key === 'End') return max;\n\n      return null;\n    };\n\n    // ── Range mode setup ──────────────────────────────────────────\n    const { triggerValidation } = createFieldValidation(formCtx, {\n      reportValidity: () => sliderFd?.reportValidity() ?? false,\n    });\n\n    const setupRangeMode = (container: HTMLDivElement) => {\n      updateRangeCSS();\n\n      const clientToValue = (clientX: number) => {\n        const rect = container.getBoundingClientRect();\n        const min = getNum(props.min.value, 0);\n        const max = getNum(props.max.value, 100);\n        const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n\n        return snapVal(min + pct * (max - min));\n      };\n      let dragging: 'start' | 'end' | null = null;\n      const applyDrag = (val: number) => {\n        const min = getNum(props.min.value, 0);\n        const max = getNum(props.max.value, 100);\n\n        if (dragging === 'start') startVal.value = Math.min(snapVal(val), endVal.value);\n        else if (dragging === 'end') endVal.value = Math.max(snapVal(val), startVal.value);\n\n        startVal.value = Math.max(min, Math.min(startVal.value, max));\n        endVal.value = Math.max(min, Math.min(endVal.value, max));\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      handle(\n        container,\n        'pointerdown',\n        guard(\n          () => !props.disabled.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            host.setAttribute('data-dragging', '');\n            (e.target as Element).setPointerCapture(e.pointerId);\n            applyDrag(val);\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointermove',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            applyDrag(clientToValue(e.clientX));\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointerup',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            dragging = null;\n            host.removeAttribute('data-dragging');\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 (props.disabled.value) return;\n\n        const step = getNum(props.step.value, 1);\n        const min = getNum(props.min.value, 0);\n        const max = getNum(props.max.value, 100);\n        const next = keyDelta(e.key, step, min, max, getVal());\n\n        if (next === null) return;\n\n        e.preventDefault();\n        setVal(snapVal(Math.max(min, Math.min(max, 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        thumbStartEl.addEventListener(\n          'keydown',\n          makeThumbKeydown(\n            () => startVal.value,\n            (v) => {\n              startVal.value = Math.min(v, endVal.value);\n            },\n          ),\n        );\n        aria(thumbStartEl, {\n          label: 'Range start',\n          valuemax: () => endVal.value,\n          valuemin: () => getNum(props.min.value, 0),\n          valuenow: () => startVal.value,\n          valuetext: () => props['from-value-text'].value ?? null,\n        });\n      }\n\n      if (thumbEndEl) {\n        thumbEndEl.addEventListener(\n          'keydown',\n          makeThumbKeydown(\n            () => endVal.value,\n            (v) => {\n              endVal.value = Math.max(v, startVal.value);\n            },\n          ),\n        );\n        aria(thumbEndEl, {\n          label: 'Range end',\n          valuemax: () => getNum(props.max.value, 100),\n          valuemin: () => startVal.value,\n          valuenow: () => endVal.value,\n          valuetext: () => props['to-value-text'].value ?? null,\n        });\n      }\n    };\n    // ── Single-value mode setup ───────────────────────────────────\n    const setupSingleMode = (container: HTMLDivElement) => {\n      host.setAttribute('role', 'slider');\n\n      if (!props.disabled.value) host.setAttribute('tabindex', '0');\n\n      updateSingleCSS(Number(valueSignal.value));\n\n      const updateValue = (clientX: number) => {\n        if (props.disabled.value) return;\n\n        const rect = container.getBoundingClientRect();\n        const min = getNum(props.min.value, 0);\n        const max = getNum(props.max.value, 100);\n        const step = getNum(props.step.value, 1);\n        const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n        const newValue = Math.max(min, Math.min(max, Math.round((min + pct * (max - min)) / step) * step));\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 isDragging = false;\n\n      handle(\n        container,\n        'pointerdown',\n        guard(\n          () => !props.disabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isDragging = true;\n            updateValue(e.clientX);\n            (e.target as Element).setPointerCapture(e.pointerId);\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointermove',\n        guard(\n          () => isDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!host.hasAttribute('data-dragging')) host.setAttribute('data-dragging', '');\n\n            updateValue(e.clientX);\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointerup',\n        guard(\n          () => isDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isDragging = false;\n            host.removeAttribute('data-dragging');\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n      handle(\n        host,\n        'keydown',\n        guard(\n          () => !props.disabled.value,\n          (e: KeyboardEvent) => {\n            const min = getNum(props.min.value, 0);\n            const max = getNum(props.max.value, 100);\n            const step = getNum(props.step.value, 1);\n            const val = Number(valueSignal.value || 0);\n            const next = keyDelta(e.key, step, min, max, val);\n\n            if (next === null) return;\n\n            e.preventDefault();\n\n            const newValue = Math.max(min, Math.min(max, 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    onMount(() => {\n      const container = containerRef.value;\n\n      if (!container) return;\n\n      if (slots.has('default').value && labelRef.value) {\n        const labelId = createId('slider-label');\n\n        labelRef.value.id = labelId;\n\n        if (!isRange) aria({ labelledby: 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=\"${() => (props.disabled.value ? '-1' : '0')}\"\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=\"${() => (props.disabled.value ? '-1' : '0')}\"\n            id=\"${endId}\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" ref=${labelRef}><slot></slot></span>\n    `;\n  },\n  styles: [\n    disabledStateMixin(),\n    colorThemeMixin,\n    sizeVariantMixin(SLIDER_SIZE_PRESET),\n    componentStyles,\n    coarsePointerMixin,\n  ],\n  tag: 'bit-slider',\n});\n"],"mappings":"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"}
+{"version":3,"file":"slider.cjs","names":[],"sources":["../src/inputs/slider/slider.ts"],"sourcesContent":["import {\n  define,\n  computed,\n  createId,\n  defineField,\n  handle,\n  html,\n  inject,\n  onMount,\n  ref,\n  signal,\n  watch,\n} from '@vielzeug/craftit';\nimport { createSliderControl, createValidationControl } from '@vielzeug/craftit/controls';\n\nimport type { DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { syncAria } from '../../utils/aria';\nimport { disablableBundle, sizableBundle, themableBundle, type PropBundle } from '../shared/bundles';\nimport { SLIDER_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\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 BitSliderEvents = {\n  change: { from?: number; originalEvent?: Event; to?: number; value: number | { from: number; to: number } };\n};\n\nexport type BitSliderProps = ThemableProps &\n  SizableProps &\n  DisablableProps & {\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    /** 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    /** 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\nconst sliderProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  from: '0',\n  'from-value-text': undefined,\n  max: '100',\n  min: '0',\n  name: '',\n  range: false,\n  step: '1',\n  to: '100',\n  'to-value-text': undefined,\n  value: '0',\n  'value-text': undefined,\n} satisfies PropBundle<BitSliderProps>;\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 bit-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\n * @attr {string}  size  - 'sm' | 'md' | 'lg'\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 *\n * @cssprop --slider-height - Track height\n * @cssprop --slider-size   - Thumb dimensions\n * @cssprop --slider-track  - Track background color\n * @cssprop --slider-fill   - Fill background color\n * @cssprop --slider-thumb  - Thumb background color\n *\n * @example\n * ```html\n * <bit-slider value=\"50\" name=\"volume\">Volume</bit-slider>\n * <bit-slider range from=\"20\" to=\"80\" color=\"primary\">Price range</bit-slider>\n * ```\n */\nexport const SLIDER_TAG = define<BitSliderProps, BitSliderEvents>('bit-slider', {\n  formAssociated: true,\n  props: sliderProps,\n  setup({ emit, host, props, slots }) {\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.value,\n      min: () => props.min.value,\n      step: () => props.step.value,\n    });\n    // ── Single-value state ────────────────────────────────────────\n    const formCtx = inject(FORM_CTX, undefined);\n    const isDragging = signal(false);\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const labelledById = signal<string | undefined>(undefined);\n\n    mountFormContextSync(host.el, formCtx, props);\n\n    host.bind('attr', {\n      'data-dragging': () => (isDragging.value ? true : undefined),\n    });\n\n    let sliderFd:\n      | {\n          reportValidity: () => boolean;\n        }\n      | undefined;\n    const valueSignal = signal('0');\n\n    if (!isRange) {\n      sliderFd = defineField(\n        { disabled: isDisabled, value: valueSignal },\n        {\n          onReset: () => {\n            valueSignal.value = '0';\n          },\n        },\n      );\n      watch(\n        props.value,\n        (v) => {\n          valueSignal.value = String(v);\n        },\n        { immediate: true },\n      );\n      host.bind('attr', {\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    // ── Range state ───────────────────────────────────────────────\n    const startVal = signal(0);\n    const endVal = signal(100);\n\n    if (isRange) {\n      sliderFd = defineField<{\n        from: number;\n        to: number;\n      }>(\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        {\n          onReset: () => {\n            startVal.value = sliderControl.snap(Number(props.from.value));\n            endVal.value = sliderControl.snap(Number(props.to.value));\n          },\n        },\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 = createId('slider-start');\n    const endId = createId('slider-end');\n    // ── CSS update helpers ────────────────────────────────────────\n    const updateSingleCSS = (value: number) => {\n      const pct = sliderControl.toPercent(value);\n\n      host.el.style.setProperty('--_thumb-pos', `${pct}%`);\n      host.el.style.setProperty('--_fill-start', '0%');\n      host.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      host.el.style.setProperty('--_thumb-start', `${s}%`);\n      host.el.style.setProperty('--_thumb-end', `${e}%`);\n      host.el.style.setProperty('--_fill-start', `${s}%`);\n      host.el.style.setProperty('--_fill-width', `${e - s}%`);\n    };\n\n    // ── Range mode setup ──────────────────────────────────────────\n    const { triggerValidation } = createValidationControl(formCtx?.validateOn, {\n      reportValidity: () => sliderFd?.reportValidity() ?? false,\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      handle(\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            isDragging.value = true;\n            (e.target as Element).setPointerCapture(e.pointerId);\n            applyDrag(val);\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointermove',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            applyDrag(clientToValue(e.clientX));\n          },\n        ),\n      );\n      handle(\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        handle(\n          thumbStartEl,\n          'keydown',\n          makeThumbKeydown(\n            () => startVal.value,\n            (v) => {\n              startVal.value = Math.min(v, endVal.value);\n            },\n          ),\n        );\n        syncAria(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      if (thumbEndEl) {\n        handle(\n          thumbEndEl,\n          'keydown',\n          makeThumbKeydown(\n            () => endVal.value,\n            (v) => {\n              endVal.value = Math.max(v, startVal.value);\n            },\n          ),\n        );\n        syncAria(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    // ── 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      handle(\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      handle(\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      handle(\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      handle(\n        host.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    onMount(() => {\n      const container = containerRef.value;\n\n      if (!container) return;\n\n      if (slots.has().value && labelRef.value) {\n        const labelId = createId('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            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            id=\"${endId}\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" ref=${labelRef}><slot></slot></span>\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

@@ -1,209 +1,211 @@
-import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
-import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
-import { disabledStateMixin as n } from "./styles/mixins/states.css.js";
-import { colorThemeMixin as r } from "./styles/mixins/theme.css.js";
+import { disablableBundle as e, sizableBundle as t, themableBundle as n } from "./inputs/shared/bundles.js";
+import { coarsePointerMixin as r } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as i } from "./styles/mixins/shape.css.js";
+import { disabledStateMixin as a } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as o } from "./styles/mixins/theme.css.js";
 import "./styles/index.js";
-import { FORM_CTX as i } from "./inputs/shared/form-context.js";
-import { mountFormContextSync as a } from "./inputs/shared/dom-sync/form-context.js";
+import { i as s } from "./packages/craftit/dist/controls/internal/control-state.js";
+import { i as c } from "./packages/craftit/dist/controls/slider-control.js";
+import "./packages/craftit/dist/controls.js";
+import { FORM_CTX as l } from "./inputs/shared/form-context.js";
+import { mountFormContextSync as u } from "./inputs/shared/dom-sync/form-context.js";
 import "./inputs/shared/dom-sync/index.js";
-import { createFieldValidation as o } from "./inputs/shared/validation/index.js";
-import { SLIDER_SIZE_PRESET as s } from "./inputs/shared/design-presets.js";
-import c from "./inputs/slider/slider.css?inline.js";
-import { aria as l, computed as u, createId as d, defineComponent as f, defineField as p, guard as m, handle as h, html as g, inject as _, onMount as v, ref as y, signal as b, watch as x } from "@vielzeug/craftit";
+import { SLIDER_SIZE_PRESET as d } from "./inputs/shared/design-presets.js";
+import { syncAria as f } from "./utils/aria.js";
+import p from "./inputs/slider/slider.css?inline.js";
+import { computed as m, createId as h, define as g, defineField as _, handle as v, html as y, inject as b, onMount as x, ref as S, signal as C, watch as w } from "@vielzeug/craftit";
 //#region src/inputs/slider/slider.ts
-var S = f({
+var T = (e, t) => (n) => {
+	e() && t(n);
+}, E = g("bit-slider", {
 	formAssociated: !0,
 	props: {
-		color: { default: void 0 },
-		disabled: { default: !1 },
-		from: { default: "0" },
-		"from-value-text": { default: void 0 },
-		max: { default: "100" },
-		min: { default: "0" },
-		name: { default: "" },
-		range: { default: !1 },
-		size: { default: void 0 },
-		step: { default: "1" },
-		to: { default: "100" },
-		"to-value-text": { default: void 0 },
-		value: { default: "0" },
-		"value-text": { default: void 0 }
+		...n,
+		...t,
+		...e,
+		from: "0",
+		"from-value-text": void 0,
+		max: "100",
+		min: "0",
+		name: "",
+		range: !1,
+		step: "1",
+		to: "100",
+		"to-value-text": void 0,
+		value: "0",
+		"value-text": void 0
 	},
 	setup({ emit: e, host: t, props: n, slots: r }) {
-		let s = n.range.value, c = (e, t) => {
-			let n = Number(e);
-			return Number.isFinite(n) ? n : t;
-		}, f = (e) => {
-			let t = c(n.min.value, 0), r = c(n.max.value, 100), i = c(n.step.value, 1);
-			return Math.max(t, Math.min(r, Math.round(e / i) * i));
-		}, S = (e) => {
-			let t = c(n.min.value, 0), r = c(n.max.value, 100);
-			return (e - t) / (r - t) * 100;
-		}, C = _(i, void 0);
-		a(t, C, n);
-		let w, T = b("0");
-		s || (w = p({
-			disabled: u(() => !!n.disabled.value),
-			value: T
+		let i = n.range.value, a = c({
+			max: () => n.max.value,
+			min: () => n.min.value,
+			step: () => n.step.value
+		}), o = b(l, void 0), d = C(!1), p = m(() => !!n.disabled.value), g = C(void 0);
+		u(t.el, o, n), t.bind("attr", { "data-dragging": () => d.value ? !0 : void 0 });
+		let E, D = C("0");
+		i || (E = _({
+			disabled: p,
+			value: D
 		}, { onReset: () => {
-			T.value = "0";
-		} }), x(n.value, (e) => {
-			T.value = String(e);
-		}, { immediate: !0 }), l({
-			disabled: () => !!n.disabled.value,
-			valuemax: () => c(n.max.value, 100),
-			valuemin: () => c(n.min.value, 0),
-			valuenow: () => Number(T.value || 0),
-			valuetext: () => n["value-text"].value ?? null
+			D.value = "0";
+		} }), w(n.value, (e) => {
+			D.value = String(e);
+		}, { immediate: !0 }), t.bind("attr", {
+			ariaDisabled: () => p.value ? "true" : null,
+			ariaLabelledby: () => g.value ?? null,
+			ariaValuemax: () => a.max(),
+			ariaValuemin: () => a.min(),
+			ariaValuenow: () => Number(D.value || 0),
+			ariaValuetext: () => n["value-text"].value ?? null,
+			role: () => "slider",
+			tabindex: () => p.value ? null : "0"
 		}));
-		let E = b(0), D = b(100);
-		s && (w = p({
-			disabled: u(() => !!n.disabled.value),
+		let O = C(0), k = C(100);
+		i && (E = _({
+			disabled: p,
 			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: u(() => ({
-				from: E.value,
-				to: D.value
+			value: m(() => ({
+				from: O.value,
+				to: k.value
 			}))
 		}, { onReset: () => {
-			E.value = f(c(n.from.value, 0)), D.value = f(c(n.to.value, 100));
-		} }), x(n.from, (e) => {
-			E.value = f(c(e, 0));
-		}, { immediate: !0 }), x(n.to, (e) => {
-			D.value = f(c(e, 100));
+			O.value = a.snap(Number(n.from.value)), k.value = a.snap(Number(n.to.value));
+		} }), w(n.from, (e) => {
+			O.value = a.snap(Number(e));
+		}, { immediate: !0 }), w(n.to, (e) => {
+			k.value = a.snap(Number(e));
 		}, { immediate: !0 }));
-		let O = y(), k = y(), A = y(), j = y(), M = d("slider-start"), N = d("slider-end"), P = (e) => {
-			let n = S(e);
-			t.style.setProperty("--_thumb-pos", `${n}%`), t.style.setProperty("--_fill-start", "0%"), t.style.setProperty("--_fill-width", `${n}%`);
-		}, F = () => {
-			let e = S(E.value), n = S(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, t, n, r, i) => e === "ArrowRight" || e === "ArrowUp" ? i + t : e === "ArrowLeft" || e === "ArrowDown" ? i - t : e === "Home" ? n : e === "End" ? r : null, { triggerValidation: L } = o(C, { reportValidity: () => w?.reportValidity() ?? !1 }), R = (r) => {
-			F();
-			let i = (e) => {
-				let t = r.getBoundingClientRect(), i = c(n.min.value, 0), a = c(n.max.value, 100);
-				return f(i + Math.max(0, Math.min(1, (e - t.left) / t.width)) * (a - i));
-			}, a = null, o = (t) => {
-				let r = c(n.min.value, 0), i = c(n.max.value, 100);
-				a === "start" ? E.value = Math.min(f(t), D.value) : a === "end" && (D.value = Math.max(f(t), E.value)), E.value = Math.max(r, Math.min(E.value, i)), D.value = Math.max(r, Math.min(D.value, i)), F(), e("change", {
-					from: E.value,
-					to: D.value,
+		let A = S(), j = S(), M = S(), N = S(), P = h("slider-start"), F = h("slider-end"), I = (e) => {
+			let n = a.toPercent(e);
+			t.el.style.setProperty("--_thumb-pos", `${n}%`), t.el.style.setProperty("--_fill-start", "0%"), t.el.style.setProperty("--_fill-width", `${n}%`);
+		}, L = () => {
+			let e = a.toPercent(O.value), n = a.toPercent(k.value);
+			t.el.style.setProperty("--_thumb-start", `${e}%`), t.el.style.setProperty("--_thumb-end", `${n}%`), t.el.style.setProperty("--_fill-start", `${e}%`), t.el.style.setProperty("--_fill-width", `${n - e}%`);
+		}, { triggerValidation: R } = s(o?.validateOn, { reportValidity: () => E?.reportValidity() ?? !1 }), z = (t) => {
+			L();
+			let r = (e) => {
+				let n = t.getBoundingClientRect();
+				return a.fromClientX(e, n);
+			}, i = null, o = (t) => {
+				i === "start" ? O.value = Math.min(a.snap(t), k.value) : i === "end" && (k.value = Math.max(a.snap(t), O.value)), O.value = a.clamp(O.value), k.value = a.clamp(k.value), L(), e("change", {
+					from: O.value,
+					to: k.value,
 					value: {
-						from: E.value,
-						to: D.value
+						from: O.value,
+						to: k.value
 					}
-				}), L("change");
+				}), R("change");
 			};
-			h(r, "pointerdown", m(() => !n.disabled.value, (e) => {
+			v(t, "pointerdown", T(() => !p.value, (e) => {
 				e.preventDefault();
-				let n = i(e.clientX);
-				a = Math.abs(n - E.value) <= Math.abs(n - D.value) ? "start" : "end", t.setAttribute("data-dragging", ""), e.target.setPointerCapture(e.pointerId), o(n);
-			})), h(r, "pointermove", m(() => !!a, (e) => {
-				e.preventDefault(), o(i(e.clientX));
-			})), h(r, "pointerup", m(() => !!a, (e) => {
-				e.preventDefault(), a = null, t.removeAttribute("data-dragging"), e.target.releasePointerCapture(e.pointerId);
+				let t = r(e.clientX);
+				i = Math.abs(t - O.value) <= Math.abs(t - k.value) ? "start" : "end", d.value = !0, e.target.setPointerCapture(e.pointerId), o(t);
+			})), v(t, "pointermove", T(() => !!i, (e) => {
+				e.preventDefault(), o(r(e.clientX));
+			})), v(t, "pointerup", T(() => !!i, (e) => {
+				e.preventDefault(), i = null, d.value = !1, e.target.releasePointerCapture(e.pointerId);
 			}));
-			let s = (t, r) => (i) => {
-				if (n.disabled.value) return;
-				let a = c(n.step.value, 1), o = c(n.min.value, 0), s = c(n.max.value, 100), l = I(i.key, a, o, s, t());
-				l !== null && (i.preventDefault(), r(f(Math.max(o, Math.min(s, l)))), F(), e("change", {
-					from: E.value,
-					originalEvent: i,
-					to: D.value,
+			let s = (t, n) => (r) => {
+				if (p.value) return;
+				let i = a.nextFromKey(r.key, t());
+				i !== null && (r.preventDefault(), n(a.snap(i)), L(), e("change", {
+					from: O.value,
+					originalEvent: r,
+					to: k.value,
 					value: {
-						from: E.value,
-						to: D.value
+						from: O.value,
+						to: k.value
 					}
-				}), L("change"));
-			}, u = A.value, d = j.value;
-			u && (u.addEventListener("keydown", s(() => E.value, (e) => {
-				E.value = Math.min(e, D.value);
-			})), l(u, {
+				}), R("change"));
+			}, c = M.value, l = N.value;
+			c && (v(c, "keydown", s(() => O.value, (e) => {
+				O.value = Math.min(e, k.value);
+			})), f(c, {
 				label: "Range start",
-				valuemax: () => D.value,
-				valuemin: () => c(n.min.value, 0),
-				valuenow: () => E.value,
+				valuemax: () => k.value,
+				valuemin: () => a.min(),
+				valuenow: () => O.value,
 				valuetext: () => n["from-value-text"].value ?? null
-			})), d && (d.addEventListener("keydown", s(() => D.value, (e) => {
-				D.value = Math.max(e, E.value);
-			})), l(d, {
+			})), l && (v(l, "keydown", s(() => k.value, (e) => {
+				k.value = Math.max(e, O.value);
+			})), f(l, {
 				label: "Range end",
-				valuemax: () => c(n.max.value, 100),
-				valuemin: () => E.value,
-				valuenow: () => D.value,
+				valuemax: () => a.max(),
+				valuemin: () => O.value,
+				valuenow: () => k.value,
 				valuetext: () => n["to-value-text"].value ?? null
 			}));
-		}, z = (r) => {
-			t.setAttribute("role", "slider"), n.disabled.value || t.setAttribute("tabindex", "0"), P(Number(T.value));
-			let i = (t) => {
-				if (n.disabled.value) return;
-				let i = r.getBoundingClientRect(), a = c(n.min.value, 0), o = c(n.max.value, 100), s = c(n.step.value, 1), l = Math.max(0, Math.min(1, (t - i.left) / i.width)), u = Math.max(a, Math.min(o, Math.round((a + l * (o - a)) / s) * s));
-				Number(T.value) !== u && (T.value = u.toString(), P(u), e("change", { value: u }), L("change"));
-			}, a = !1;
-			h(r, "pointerdown", m(() => !n.disabled.value, (e) => {
-				e.preventDefault(), a = !0, i(e.clientX), e.target.setPointerCapture(e.pointerId);
-			})), h(r, "pointermove", m(() => a, (e) => {
-				e.preventDefault(), t.hasAttribute("data-dragging") || t.setAttribute("data-dragging", ""), i(e.clientX);
-			})), h(r, "pointerup", m(() => a, (e) => {
-				e.preventDefault(), a = !1, t.removeAttribute("data-dragging"), e.target.releasePointerCapture(e.pointerId);
-			})), h(t, "keydown", m(() => !n.disabled.value, (t) => {
-				let r = c(n.min.value, 0), i = c(n.max.value, 100), a = c(n.step.value, 1), o = Number(T.value || 0), s = I(t.key, a, r, i, o);
-				if (s === null) return;
+		}, B = (n) => {
+			I(Number(D.value));
+			let r = (t) => {
+				if (p.value) return;
+				let r = n.getBoundingClientRect(), i = a.fromClientX(t, r);
+				Number(D.value) !== i && (D.value = i.toString(), I(i), e("change", { value: i }), R("change"));
+			}, i = !1;
+			v(n, "pointerdown", T(() => !p.value, (e) => {
+				e.preventDefault(), i = !0, r(e.clientX), e.target.setPointerCapture(e.pointerId);
+			})), v(n, "pointermove", T(() => i, (e) => {
+				e.preventDefault(), d.value ||= !0, r(e.clientX);
+			})), v(n, "pointerup", T(() => i, (e) => {
+				e.preventDefault(), i = !1, d.value = !1, e.target.releasePointerCapture(e.pointerId);
+			})), v(t.el, "keydown", T(() => !p.value, (t) => {
+				let n = Number(D.value || 0), r = a.nextFromKey(t.key, n);
+				if (r === null) return;
 				t.preventDefault();
-				let l = Math.max(r, Math.min(i, s));
-				l !== o && (T.value = l.toString(), P(l), e("change", {
+				let i = a.clamp(r);
+				i !== n && (D.value = i.toString(), I(i), e("change", {
 					originalEvent: t,
-					value: l
-				}), L("change"));
+					value: i
+				}), R("change"));
 			}));
 		};
-		return v(() => {
-			let e = O.value;
+		return x(() => {
+			let e = A.value;
 			if (e) {
-				if (r.has("default").value && k.value) {
-					let e = d("slider-label");
-					k.value.id = e, s || l({ labelledby: e });
+				if (r.has().value && j.value) {
+					let e = h("slider-label");
+					j.value.id = e, i || (g.value = e);
 				}
-				s ? R(e) : z(e);
+				i ? z(e) : B(e);
 			}
-		}), g`
-      <div class="slider-container" part="slider" ref=${O}>
+		}), y`
+      <div class="slider-container" part="slider" ref=${A}>
         <div class="slider-track" part="track">
           <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=${M}
             role="slider"
-            tabindex="${() => n.disabled.value ? "-1" : "0"}"
-            id="${M}"></div>
+            tabindex="${() => p.value ? "-1" : "0"}"
+            id="${P}"></div>
           <div
             class="slider-thumb slider-thumb-end"
             part="thumb-end"
-            ref=${j}
+            ref=${N}
             role="slider"
-            tabindex="${() => n.disabled.value ? "-1" : "0"}"
-            id="${N}"></div>
+            tabindex="${() => p.value ? "-1" : "0"}"
+            id="${F}"></div>
         </div>
       </div>
-      <span class="label" part="label" ref=${k}><slot></slot></span>
+      <span class="label" part="label" ref=${j}><slot></slot></span>
     `;
 	},
 	styles: [
-		n(),
-		r,
-		t(s),
-		c,
-		e
-	],
-	tag: "bit-slider"
+		a(),
+		o,
+		i(d),
+		p,
+		r
+	]
 });
 //#endregion
-export { S as SLIDER_TAG };
+export { E as SLIDER_TAG };
 
 //# sourceMappingURL=slider.js.map