@vielzeug/refine 1.1.1 → 1.3.0

package/dist/slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"slider.cjs","names":[],"sources":["../src/inputs/slider/slider.ts"],"sourcesContent":["import { createStableId, define, useField, html, inject, prop, ref } from '@vielzeug/ore';\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, OreSliderEvents>(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, { aria, bind, el, emit, onCleanup, onEvent, onMounted, 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,\n      min: props.min,\n      step: props.step,\n    });\n    // ── Single-value state ────────────────────────────────────────\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n    const isDragging = signal(false);\n    const isDisabled = fCtxProps.disabled;\n    const labelledById = signal<string | undefined>(undefined);\n    const assistiveId = createStableId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    bind({\n      attr: {\n        'data-dragging': () => (isDragging.value ? true : undefined),\n        size: fCtxProps.size,\n      },\n    });\n\n    let sliderFd:\n      | {\n          reportValidity: () => boolean;\n        }\n      | undefined;\n    const valueSignal = signal('0');\n\n    if (!isRange) {\n      sliderFd = useField({ disabled: isDisabled, value: valueSignal });\n      watch(\n        props.value,\n        (v) => {\n          valueSignal.value = String(v);\n        },\n        { immediate: true },\n      );\n      bind({\n        attr: {\n          ariaDescribedby: () => ariaDescribedBy.value ?? null,\n          ariaDisabled: () => (isDisabled.value ? 'true' : null),\n          ariaLabelledby: () => labelledById.value ?? null,\n          ariaValuemax: () => sliderControl.max(),\n          ariaValuemin: () => sliderControl.min(),\n          ariaValuenow: () => Number(valueSignal.value || 0),\n          ariaValuetext: () => props['value-text'].value ?? null,\n          role: () => 'slider',\n          tabindex: () => (isDisabled.value ? null : '0'),\n        },\n      });\n    }\n\n    // ── Range state ───────────────────────────────────────────────\n    const startVal = signal(0);\n    const endVal = signal(100);\n\n    if (isRange) {\n      sliderFd = useField<{\n        from: number;\n        to: number;\n      }>({\n        disabled: isDisabled,\n        toFormValue: ({ from, to }) => {\n          const name = props.name.value;\n\n          if (!name) return null;\n\n          const fd = new FormData();\n\n          fd.append(`${name}[from]`, String(from));\n          fd.append(`${name}[to]`, String(to));\n\n          return fd;\n        },\n        value: computed(() => ({ from: startVal.value, to: endVal.value })),\n      });\n      watch(\n        props.from,\n        (v) => {\n          startVal.value = sliderControl.snap(Number(v));\n        },\n        { immediate: true },\n      );\n      watch(\n        props.to,\n        (v) => {\n          endVal.value = sliderControl.snap(Number(v));\n        },\n        { immediate: true },\n      );\n    }\n\n    // ── Refs ──────────────────────────────────────────────────────\n    const containerRef = ref<HTMLDivElement>();\n    const labelRef = ref<HTMLSpanElement>();\n    const thumbStartRef = ref<HTMLDivElement>();\n    const thumbEndRef = ref<HTMLDivElement>();\n    const startId = createStableId('slider-start');\n    const endId = createStableId('slider-end');\n    // ── CSS update helpers ────────────────────────────────────────\n    const updateSingleCSS = (value: number) => {\n      const pct = sliderControl.toPercent(value);\n\n      el.style.setProperty('--_thumb-pos', `${pct}%`);\n      el.style.setProperty('--_fill-start', '0%');\n      el.style.setProperty('--_fill-width', `${pct}%`);\n    };\n    const updateRangeCSS = () => {\n      const s = sliderControl.toPercent(startVal.value);\n      const e = sliderControl.toPercent(endVal.value);\n\n      el.style.setProperty('--_thumb-start', `${s}%`);\n      el.style.setProperty('--_thumb-end', `${e}%`);\n      el.style.setProperty('--_fill-start', `${s}%`);\n      el.style.setProperty('--_fill-width', `${e - s}%`);\n    };\n\n    // ── Range mode setup ──────────────────────────────────────────\n    const triggerValidation = (on: 'blur' | 'change') => {\n      if (formCtx?.validateOn?.value === on) {\n        sliderFd?.reportValidity();\n      }\n    };\n\n    const setupRangeMode = (container: HTMLDivElement) => {\n      updateRangeCSS();\n\n      const clientToValue = (clientX: number) => {\n        const rect = container.getBoundingClientRect();\n\n        return sliderControl.fromClientX(clientX, rect);\n      };\n      let dragging: 'start' | 'end' | null = null;\n      const applyDrag = (val: number) => {\n        if (dragging === 'start') startVal.value = Math.min(sliderControl.snap(val), endVal.value);\n        else if (dragging === 'end') endVal.value = Math.max(sliderControl.snap(val), startVal.value);\n\n        startVal.value = sliderControl.clamp(startVal.value);\n        endVal.value = sliderControl.clamp(endVal.value);\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n\n      onEvent(\n        container,\n        'pointerdown',\n        guard(\n          () => !isDisabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            const val = clientToValue(e.clientX);\n\n            dragging = Math.abs(val - startVal.value) <= Math.abs(val - endVal.value) ? 'start' : 'end';\n            (e.target as Element).setPointerCapture(e.pointerId);\n            applyDrag(val);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointermove',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!isDragging.value) isDragging.value = true;\n\n            applyDrag(clientToValue(e.clientX));\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointerup',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            dragging = null;\n            isDragging.value = false;\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n\n      const makeThumbKeydown = (getVal: () => number, setVal: (v: number) => void) => (e: KeyboardEvent) => {\n        if (isDisabled.value) return;\n\n        const next = sliderControl.nextFromKey(e.key, getVal());\n\n        if (next === null) return;\n\n        e.preventDefault();\n        setVal(sliderControl.snap(next));\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          originalEvent: e,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n      const thumbStartEl = thumbStartRef.value;\n      const thumbEndEl = thumbEndRef.value;\n\n      if (thumbStartEl) {\n        onEvent(\n          thumbStartEl,\n          'keydown',\n          makeThumbKeydown(\n            () => startVal.value,\n            (v) => {\n              startVal.value = Math.min(v, endVal.value);\n            },\n          ),\n        );\n        onCleanup(\n          aria(thumbStartEl, {\n            label: 'Range start',\n            valuemax: () => endVal.value,\n            valuemin: () => sliderControl.min(),\n            valuenow: () => startVal.value,\n            valuetext: () => props['from-value-text'].value ?? null,\n          }),\n        );\n      }\n\n      if (thumbEndEl) {\n        onEvent(\n          thumbEndEl,\n          'keydown',\n          makeThumbKeydown(\n            () => endVal.value,\n            (v) => {\n              endVal.value = Math.max(v, startVal.value);\n            },\n          ),\n        );\n        onCleanup(\n          aria(thumbEndEl, {\n            label: 'Range end',\n            valuemax: () => sliderControl.max(),\n            valuemin: () => startVal.value,\n            valuenow: () => endVal.value,\n            valuetext: () => props['to-value-text'].value ?? null,\n          }),\n        );\n      }\n    };\n    // ── Single-value mode setup ───────────────────────────────────\n    const setupSingleMode = (container: HTMLDivElement) => {\n      updateSingleCSS(Number(valueSignal.value));\n\n      const updateValue = (clientX: number) => {\n        if (isDisabled.value) return;\n\n        const rect = container.getBoundingClientRect();\n        const newValue = sliderControl.fromClientX(clientX, rect);\n\n        if (Number(valueSignal.value) !== newValue) {\n          valueSignal.value = newValue.toString();\n          updateSingleCSS(newValue);\n          emit('change', { value: newValue });\n          triggerValidation('change');\n        }\n      };\n      let isPointerDragging = false;\n\n      onEvent(\n        container,\n        'pointerdown',\n        guard(\n          () => !isDisabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isPointerDragging = true;\n            updateValue(e.clientX);\n            (e.target as Element).setPointerCapture(e.pointerId);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointermove',\n        guard(\n          () => isPointerDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!isDragging.value) isDragging.value = true;\n\n            updateValue(e.clientX);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointerup',\n        guard(\n          () => isPointerDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isPointerDragging = false;\n            isDragging.value = false;\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n      onEvent(\n        el,\n        'keydown',\n        guard(\n          () => !isDisabled.value,\n          (e: KeyboardEvent) => {\n            const val = Number(valueSignal.value || 0);\n            const next = sliderControl.nextFromKey(e.key, val);\n\n            if (next === null) return;\n\n            e.preventDefault();\n\n            const newValue = sliderControl.clamp(next);\n\n            if (newValue !== val) {\n              valueSignal.value = newValue.toString();\n              updateSingleCSS(newValue);\n              emit('change', { originalEvent: e, value: newValue });\n              triggerValidation('change');\n            }\n          },\n        ),\n      );\n    };\n\n    onMounted(() => {\n      const container = containerRef.value;\n\n      if (!container) return;\n\n      if (slots.has().value && labelRef.value) {\n        const labelId = createStableId('slider-label');\n\n        labelRef.value.id = labelId;\n\n        if (!isRange) labelledById.value = labelId;\n      }\n\n      if (isRange) setupRangeMode(container);\n      else setupSingleMode(container);\n    });\n\n    return html`\n      <div class=\"slider-container\" part=\"slider\" ref=${containerRef}>\n        <div class=\"slider-track\" part=\"track\">\n          <div class=\"slider-fill\" part=\"fill\"></div>\n          <div class=\"slider-thumb slider-thumb-sole\" part=\"thumb\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-start\"\n            part=\"thumb-start\"\n            ref=${thumbStartRef}\n            role=\"slider\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n            :aria-describedby=\"${ariaDescribedBy}\"\n            id=\"${startId}\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-end\"\n            part=\"thumb-end\"\n            ref=${thumbEndRef}\n            role=\"slider\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n            :aria-describedby=\"${ariaDescribedBy}\"\n            id=\"${endId}\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" ref=${labelRef}><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    disabledStateMixin,\n    colorThemeMixin,\n    sizeVariantMixin(SLIDER_SIZE_PRESET),\n    componentStyles,\n    coarsePointerMixin,\n  ],\n});\n"],"mappings":"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"}
+{"version":3,"file":"slider.cjs","names":[],"sources":["../src/inputs/slider/slider.ts"],"sourcesContent":["import {\n  createStableId,\n  define,\n  html,\n  inject,\n  prop,\n  ref,\n  aria,\n  bind,\n  getHost,\n  onCleanup,\n  onEvent,\n  onMounted,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { createErrorHelperState, createSliderControl } from '../../headless';\nimport { disablableBundle, sizableBundle, SLIDER_SIZE_PRESET, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './slider.css?inline';\n\nconst guard =\n  <E extends Event = Event>(condition: () => unknown, handler: (e: E) => void): ((e: E) => void) =>\n  (e) => {\n    if (condition()) handler(e);\n  };\n\n/** Slider component properties */\n\nexport type OreSliderEvents = {\n  change: { from?: number; originalEvent?: Event; to?: number; value: number | { from: number; to: number } };\n};\n\nexport type OreSliderProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message — marks the field as invalid (fallback when the `error` slot is empty) */\n  error?: string;\n  /** Range mode: lower bound */\n  from?: number | string;\n  /** Range mode a11y label for the start thumb (e.g. \"$20\") */\n  'from-value-text'?: string;\n  /** Helper text displayed below the slider (fallback when the `helper` slot is empty) */\n  helper?: string;\n  /** Maximum value */\n  max?: number | string;\n  /** Minimum value */\n  min?: number | string;\n  /** Single-value mode: form field name */\n  name?: string;\n  /** Activate two-thumb range selection */\n  range?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Step increment */\n  step?: number | string;\n  /** Range mode: upper bound */\n  to?: number | string;\n  /** Range mode a11y label for the end thumb (e.g. \"$80\") */\n  'to-value-text'?: string;\n  /** Single-value mode: current value */\n  value?: number | string;\n  /** Single-value mode a11y label override (e.g. \"75%\"). Overrides raw aria-valuenow. */\n  'value-text'?: string;\n};\n\n/**\n * A slider for selecting a single numeric value or a numeric range.\n *\n * Add the boolean `range` attribute to activate two-thumb range mode.\n *\n * @element ore-slider\n *\n * @attr {number}  min   - Minimum value (default: 0)\n * @attr {number}  max   - Maximum value (default: 100)\n * @attr {number}  step  - Step increment (default: 1)\n * @attr {number}  value - Current value (single mode)\n * @attr {number}  from  - Lower bound (range mode)\n * @attr {number}  to    - Upper bound (range mode)\n * @attr {boolean} range - Activate range mode\n * @attr {boolean} disabled - Disable interaction\n * @attr {string}  name  - Form field name (single mode)\n * @attr {string}  color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string}  size  - 'sm' | 'md' | 'lg'\n * @attr {string}  helper - Helper text below the slider\n * @attr {string}  error  - Error message below the slider\n *\n * @fires change - detail always includes `value`; single mode: { value: number }, range mode: { value: { from, to }, from, to }, plus optional originalEvent\n *\n * @slot - Slider label text\n *\n * @part slider      - Slider container\n * @part track       - Track element\n * @part fill        - Fill element\n * @part thumb       - Single-value thumb\n * @part thumb-start - Range start thumb\n * @part thumb-end   - Range end thumb\n * @part label       - Label element\n * @part helper-text - The helper/error text element\n *\n * @cssprop --slider-height    - Track height\n * @cssprop --slider-size      - Thumb dimensions\n * @cssprop --slider-track-bg  - Track background color\n * @cssprop --slider-fill      - Active fill color\n * @cssprop --slider-thumb-bg  - Thumb background color\n *\n * @example\n * ```html\n * <ore-slider value=\"50\" name=\"volume\">Volume</ore-slider>\n * <ore-slider range from=\"20\" to=\"80\" color=\"primary\">Price range</ore-slider>\n * ```\n */\nexport const SLIDER_TAG = 'ore-slider' as const;\ndefine<OreSliderProps>(SLIDER_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    from: prop.number(0),\n    'from-value-text': prop.string(),\n    helper: prop.string(),\n    max: prop.number(100),\n    min: prop.number(0),\n    name: prop.string(),\n    range: prop.bool(false),\n    step: prop.number(1),\n    to: prop.number(100),\n    'to-value-text': prop.string(),\n    value: prop.number(0),\n    'value-text': prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreSliderEvents>();\n    const slots = useSlots();\n\n    // Treat `range` as static — determined at first render\n    const isRange = props.range.value;\n    // ── Shared helpers ────────────────────────────────────────────\n    const sliderControl = createSliderControl({\n      max: props.max,\n      min: props.min,\n      step: props.step,\n    });\n    // ── Single-value state ────────────────────────────────────────\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const isDragging = signal(false);\n    const isDisabled = fCtxProps.disabled;\n    const labelledById = signal<string | undefined>(undefined);\n    const assistiveId = createStableId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    bind({\n      attr: {\n        'data-dragging': () => (isDragging.value ? true : undefined),\n        size: fCtxProps.size,\n      },\n    });\n\n    let sliderFd:\n      | {\n          reportValidity: () => boolean;\n        }\n      | undefined;\n    const valueSignal = signal('0');\n\n    if (!isRange) {\n      sliderFd = useField({ disabled: isDisabled, value: valueSignal });\n      watch(\n        props.value,\n        (v) => {\n          valueSignal.value = String(v);\n        },\n        { immediate: true },\n      );\n      bind({\n        attr: {\n          ariaDescribedby: () => ariaDescribedBy.value ?? null,\n          ariaDisabled: () => (isDisabled.value ? 'true' : null),\n          ariaLabelledby: () => labelledById.value ?? null,\n          ariaValuemax: () => sliderControl.max(),\n          ariaValuemin: () => sliderControl.min(),\n          ariaValuenow: () => Number(valueSignal.value || 0),\n          ariaValuetext: () => props['value-text'].value ?? null,\n          role: () => 'slider',\n          tabindex: () => (isDisabled.value ? null : '0'),\n        },\n      });\n    }\n\n    // ── Range state ───────────────────────────────────────────────\n    const startVal = signal(0);\n    const endVal = signal(100);\n\n    if (isRange) {\n      sliderFd = useField<{\n        from: number;\n        to: number;\n      }>({\n        disabled: isDisabled,\n        toFormValue: ({ from, to }) => {\n          const name = props.name.value;\n\n          if (!name) return null;\n\n          const fd = new FormData();\n\n          fd.append(`${name}[from]`, String(from));\n          fd.append(`${name}[to]`, String(to));\n\n          return fd;\n        },\n        value: computed(() => ({ from: startVal.value, to: endVal.value })),\n      });\n      watch(\n        props.from,\n        (v) => {\n          startVal.value = sliderControl.snap(Number(v));\n        },\n        { immediate: true },\n      );\n      watch(\n        props.to,\n        (v) => {\n          endVal.value = sliderControl.snap(Number(v));\n        },\n        { immediate: true },\n      );\n    }\n\n    // ── Refs ──────────────────────────────────────────────────────\n    const containerRef = ref<HTMLDivElement>();\n    const labelRef = ref<HTMLSpanElement>();\n    const thumbStartRef = ref<HTMLDivElement>();\n    const thumbEndRef = ref<HTMLDivElement>();\n    const startId = createStableId('slider-start');\n    const endId = createStableId('slider-end');\n    // ── CSS update helpers ────────────────────────────────────────\n    const updateSingleCSS = (value: number) => {\n      const pct = sliderControl.toPercent(value);\n\n      el.style.setProperty('--_thumb-pos', `${pct}%`);\n      el.style.setProperty('--_fill-start', '0%');\n      el.style.setProperty('--_fill-width', `${pct}%`);\n    };\n    const updateRangeCSS = () => {\n      const s = sliderControl.toPercent(startVal.value);\n      const e = sliderControl.toPercent(endVal.value);\n\n      el.style.setProperty('--_thumb-start', `${s}%`);\n      el.style.setProperty('--_thumb-end', `${e}%`);\n      el.style.setProperty('--_fill-start', `${s}%`);\n      el.style.setProperty('--_fill-width', `${e - s}%`);\n    };\n\n    // ── Range mode setup ──────────────────────────────────────────\n    const triggerValidation = (on: 'blur' | 'change') => {\n      if (formCtx?.validateOn?.value === on) {\n        sliderFd?.reportValidity();\n      }\n    };\n\n    const setupRangeMode = (container: HTMLDivElement) => {\n      updateRangeCSS();\n\n      const clientToValue = (clientX: number) => {\n        const rect = container.getBoundingClientRect();\n\n        return sliderControl.fromClientX(clientX, rect);\n      };\n      let dragging: 'start' | 'end' | null = null;\n      const applyDrag = (val: number) => {\n        if (dragging === 'start') startVal.value = Math.min(sliderControl.snap(val), endVal.value);\n        else if (dragging === 'end') endVal.value = Math.max(sliderControl.snap(val), startVal.value);\n\n        startVal.value = sliderControl.clamp(startVal.value);\n        endVal.value = sliderControl.clamp(endVal.value);\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n\n      onEvent(\n        container,\n        'pointerdown',\n        guard(\n          () => !isDisabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            const val = clientToValue(e.clientX);\n\n            dragging = Math.abs(val - startVal.value) <= Math.abs(val - endVal.value) ? 'start' : 'end';\n            (e.target as Element).setPointerCapture(e.pointerId);\n            applyDrag(val);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointermove',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!isDragging.value) isDragging.value = true;\n\n            applyDrag(clientToValue(e.clientX));\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointerup',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            dragging = null;\n            isDragging.value = false;\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n\n      const makeThumbKeydown = (getVal: () => number, setVal: (v: number) => void) => (e: KeyboardEvent) => {\n        if (isDisabled.value) return;\n\n        const next = sliderControl.nextFromKey(e.key, getVal());\n\n        if (next === null) return;\n\n        e.preventDefault();\n        setVal(sliderControl.snap(next));\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          originalEvent: e,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n      const thumbStartEl = thumbStartRef.value;\n      const thumbEndEl = thumbEndRef.value;\n\n      if (thumbStartEl) {\n        onEvent(\n          thumbStartEl,\n          'keydown',\n          makeThumbKeydown(\n            () => startVal.value,\n            (v) => {\n              startVal.value = Math.min(v, endVal.value);\n            },\n          ),\n        );\n        onCleanup(\n          aria(thumbStartEl, {\n            label: 'Range start',\n            valuemax: () => endVal.value,\n            valuemin: () => sliderControl.min(),\n            valuenow: () => startVal.value,\n            valuetext: () => props['from-value-text'].value ?? null,\n          }),\n        );\n      }\n\n      if (thumbEndEl) {\n        onEvent(\n          thumbEndEl,\n          'keydown',\n          makeThumbKeydown(\n            () => endVal.value,\n            (v) => {\n              endVal.value = Math.max(v, startVal.value);\n            },\n          ),\n        );\n        onCleanup(\n          aria(thumbEndEl, {\n            label: 'Range end',\n            valuemax: () => sliderControl.max(),\n            valuemin: () => startVal.value,\n            valuenow: () => endVal.value,\n            valuetext: () => props['to-value-text'].value ?? null,\n          }),\n        );\n      }\n    };\n    // ── Single-value mode setup ───────────────────────────────────\n    const setupSingleMode = (container: HTMLDivElement) => {\n      updateSingleCSS(Number(valueSignal.value));\n\n      const updateValue = (clientX: number) => {\n        if (isDisabled.value) return;\n\n        const rect = container.getBoundingClientRect();\n        const newValue = sliderControl.fromClientX(clientX, rect);\n\n        if (Number(valueSignal.value) !== newValue) {\n          valueSignal.value = newValue.toString();\n          updateSingleCSS(newValue);\n          emit('change', { value: newValue });\n          triggerValidation('change');\n        }\n      };\n      let isPointerDragging = false;\n\n      onEvent(\n        container,\n        'pointerdown',\n        guard(\n          () => !isDisabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isPointerDragging = true;\n            updateValue(e.clientX);\n            (e.target as Element).setPointerCapture(e.pointerId);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointermove',\n        guard(\n          () => isPointerDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!isDragging.value) isDragging.value = true;\n\n            updateValue(e.clientX);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointerup',\n        guard(\n          () => isPointerDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isPointerDragging = false;\n            isDragging.value = false;\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n      onEvent(\n        el,\n        'keydown',\n        guard(\n          () => !isDisabled.value,\n          (e: KeyboardEvent) => {\n            const val = Number(valueSignal.value || 0);\n            const next = sliderControl.nextFromKey(e.key, val);\n\n            if (next === null) return;\n\n            e.preventDefault();\n\n            const newValue = sliderControl.clamp(next);\n\n            if (newValue !== val) {\n              valueSignal.value = newValue.toString();\n              updateSingleCSS(newValue);\n              emit('change', { originalEvent: e, value: newValue });\n              triggerValidation('change');\n            }\n          },\n        ),\n      );\n    };\n\n    onMounted(() => {\n      const container = containerRef.value;\n\n      if (!container) return;\n\n      if (slots.has().value && labelRef.value) {\n        const labelId = createStableId('slider-label');\n\n        labelRef.value.id = labelId;\n\n        if (!isRange) labelledById.value = labelId;\n      }\n\n      if (isRange) setupRangeMode(container);\n      else setupSingleMode(container);\n    });\n\n    return html`\n      <div class=\"slider-container\" part=\"slider\" ref=${containerRef}>\n        <div class=\"slider-track\" part=\"track\">\n          <div class=\"slider-fill\" part=\"fill\"></div>\n          <div class=\"slider-thumb slider-thumb-sole\" part=\"thumb\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-start\"\n            part=\"thumb-start\"\n            ref=${thumbStartRef}\n            role=\"slider\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n            :aria-describedby=\"${ariaDescribedBy}\"\n            id=\"${startId}\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-end\"\n            part=\"thumb-end\"\n            ref=${thumbEndRef}\n            role=\"slider\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n            :aria-describedby=\"${ariaDescribedBy}\"\n            id=\"${endId}\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" ref=${labelRef}><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    disabledStateMixin,\n    colorThemeMixin,\n    sizeVariantMixin(SLIDER_SIZE_PRESET),\n    componentStyles,\n    coarsePointerMixin,\n  ],\n});\n"],"mappings":"sqBA4BA,IAAM,GACsB,EAA0B,IACnD,GAAM,CACD,EAAU,GAAG,EAAQ,CAAC,CAC5B,EAyFW,EAAa,0BACH,EAAY,CACjC,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,MAAO,EAAA,KAAK,OAAO,EACnB,KAAM,EAAA,KAAK,OAAO,CAAC,EACnB,kBAAmB,EAAA,KAAK,OAAO,EAC/B,OAAQ,EAAA,KAAK,OAAO,EACpB,IAAK,EAAA,KAAK,OAAO,GAAG,EACpB,IAAK,EAAA,KAAK,OAAO,CAAC,EAClB,KAAM,EAAA,KAAK,OAAO,EAClB,MAAO,EAAA,KAAK,KAAK,EAAK,EACtB,KAAM,EAAA,KAAK,OAAO,CAAC,EACnB,GAAI,EAAA,KAAK,OAAO,GAAG,EACnB,gBAAiB,EAAA,KAAK,OAAO,EAC7B,MAAO,EAAA,KAAK,OAAO,CAAC,EACpB,aAAc,EAAA,KAAK,OAAO,CAC5B,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAa,EACb,GAAA,EAAA,EAAA,QAAA,CAAgC,EAChC,GAAA,EAAA,EAAA,SAAA,CAAiB,EAGjB,EAAU,EAAM,MAAM,MAEtB,EAAgB,EAAA,oBAAoB,CACxC,IAAK,EAAM,IACX,IAAK,EAAM,IACX,KAAM,EAAM,IACd,CAAC,EAEK,GAAA,EAAA,EAAA,OAAA,CAAiB,EAAA,QAAQ,EACzB,EAAY,EAAA,eAAe,EAAO,CAAO,EACzC,GAAA,EAAA,EAAA,OAAA,CAAoB,EAAK,EACzB,EAAa,EAAU,SACvB,GAAA,EAAA,EAAA,OAAA,CAA0C,IAAA,EAAS,EACnD,GAAA,EAAA,EAAA,eAAA,CAA6B,QAAQ,EACrC,EAAY,EAAA,uBAAuB,CAAE,MAAO,EAAM,MAAO,OAAQ,EAAM,MAAO,CAAC,EAC/E,GAAA,EAAA,EAAA,SAAA,KAA2B,EAAU,MAAM,SAAS,EACpD,GAAA,EAAA,EAAA,SAAA,KAA4B,EAAU,MAAM,UAAU,EACtD,GAAA,EAAA,EAAA,SAAA,KAAkC,EAAU,OAAS,EAAW,MAAQ,EAAc,IAAK,GAEjG,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,oBAAwB,EAAW,MAAQ,GAAO,IAAA,GAClD,KAAM,EAAU,IAClB,CACF,CAAC,EAED,IAAI,EAKE,GAAA,EAAA,EAAA,OAAA,CAAqB,GAAG,EAEzB,IACH,EAAW,EAAA,SAAS,CAAE,SAAU,EAAY,MAAO,CAAY,CAAC,GAChE,EAAA,EAAA,MAAA,CACE,EAAM,MACL,GAAM,CACL,EAAY,MAAQ,OAAO,CAAC,CAC9B,EACA,CAAE,UAAW,EAAK,CACpB,GACA,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,oBAAuB,EAAgB,OAAS,KAChD,iBAAqB,EAAW,MAAQ,OAAS,KACjD,mBAAsB,EAAa,OAAS,KAC5C,iBAAoB,EAAc,IAAI,EACtC,iBAAoB,EAAc,IAAI,EACtC,iBAAoB,OAAO,EAAY,OAAS,CAAC,EACjD,kBAAqB,EAAM,aAAa,CAAC,OAAS,KAClD,SAAY,SACZ,aAAiB,EAAW,MAAQ,KAAO,GAC7C,CACF,CAAC,GAIH,IAAM,GAAA,EAAA,EAAA,OAAA,CAAkB,CAAC,EACnB,GAAA,EAAA,EAAA,OAAA,CAAgB,GAAG,EAErB,IACF,EAAW,EAAA,SAGR,CACD,SAAU,EACV,aAAc,CAAE,OAAM,QAAS,CAC7B,IAAM,EAAO,EAAM,KAAK,MAExB,GAAI,CAAC,EAAM,OAAO,KAElB,IAAM,EAAK,IAAI,SAKf,OAHA,EAAG,OAAO,GAAG,EAAK,QAAS,OAAO,CAAI,CAAC,EACvC,EAAG,OAAO,GAAG,EAAK,MAAO,OAAO,CAAE,CAAC,EAE5B,CACT,EACA,OAAA,EAAA,EAAA,SAAA,MAAuB,CAAE,KAAM,EAAS,MAAO,GAAI,EAAO,KAAM,EAAE,CACpE,CAAC,GACD,EAAA,EAAA,MAAA,CACE,EAAM,KACL,GAAM,CACL,EAAS,MAAQ,EAAc,KAAK,OAAO,CAAC,CAAC,CAC/C,EACA,CAAE,UAAW,EAAK,CACpB,GACA,EAAA,EAAA,MAAA,CACE,EAAM,GACL,GAAM,CACL,EAAO,MAAQ,EAAc,KAAK,OAAO,CAAC,CAAC,CAC7C,EACA,CAAE,UAAW,EAAK,CACpB,GAIF,IAAM,GAAA,EAAA,EAAA,IAAA,CAAmC,EACnC,GAAA,EAAA,EAAA,IAAA,CAAgC,EAChC,GAAA,EAAA,EAAA,IAAA,CAAoC,EACpC,GAAA,EAAA,EAAA,IAAA,CAAkC,EAClC,GAAA,EAAA,EAAA,eAAA,CAAyB,cAAc,EACvC,GAAA,EAAA,EAAA,eAAA,CAAuB,YAAY,EAEnC,EAAmB,GAAkB,CACzC,IAAM,EAAM,EAAc,UAAU,CAAK,EAEzC,EAAG,MAAM,YAAY,eAAgB,GAAG,EAAI,EAAE,EAC9C,EAAG,MAAM,YAAY,gBAAiB,IAAI,EAC1C,EAAG,MAAM,YAAY,gBAAiB,GAAG,EAAI,EAAE,CACjD,EACM,MAAuB,CAC3B,IAAM,EAAI,EAAc,UAAU,EAAS,KAAK,EAC1C,EAAI,EAAc,UAAU,EAAO,KAAK,EAE9C,EAAG,MAAM,YAAY,iBAAkB,GAAG,EAAE,EAAE,EAC9C,EAAG,MAAM,YAAY,eAAgB,GAAG,EAAE,EAAE,EAC5C,EAAG,MAAM,YAAY,gBAAiB,GAAG,EAAE,EAAE,EAC7C,EAAG,MAAM,YAAY,gBAAiB,GAAG,EAAI,EAAE,EAAE,CACnD,EAGM,EAAqB,GAA0B,CAC/C,GAAS,YAAY,QAAU,GACjC,GAAU,eAAe,CAE7B,EAEM,EAAkB,GAA8B,CACpD,EAAe,EAEf,IAAM,EAAiB,GAAoB,CACzC,IAAM,EAAO,EAAU,sBAAsB,EAE7C,OAAO,EAAc,YAAY,EAAS,CAAI,CAChD,EACI,EAAmC,KACjC,EAAa,GAAgB,CAC7B,IAAa,QAAS,EAAS,MAAQ,KAAK,IAAI,EAAc,KAAK,CAAG,EAAG,EAAO,KAAK,EAChF,IAAa,QAAO,EAAO,MAAQ,KAAK,IAAI,EAAc,KAAK,CAAG,EAAG,EAAS,KAAK,GAE5F,EAAS,MAAQ,EAAc,MAAM,EAAS,KAAK,EACnD,EAAO,MAAQ,EAAc,MAAM,EAAO,KAAK,EAC/C,EAAe,EACf,EAAK,SAAU,CACb,KAAM,EAAS,MACf,GAAI,EAAO,MACX,MAAO,CAAE,KAAM,EAAS,MAAO,GAAI,EAAO,KAAM,CAClD,CAAC,EACD,EAAkB,QAAQ,CAC5B,GAEA,EAAA,EAAA,QAAA,CACE,EACA,cACA,MACQ,CAAC,EAAW,MACjB,GAAoB,CACnB,EAAE,eAAe,EAEjB,IAAM,EAAM,EAAc,EAAE,OAAO,EAEnC,EAAW,KAAK,IAAI,EAAM,EAAS,KAAK,GAAK,KAAK,IAAI,EAAM,EAAO,KAAK,EAAI,QAAU,MACtF,EAAG,OAAmB,kBAAkB,EAAE,SAAS,EACnD,EAAU,CAAG,CACf,CACF,CACF,GACA,EAAA,EAAA,QAAA,CACE,EACA,cACA,MACQ,CAAC,CAAC,EACP,GAAoB,CACnB,EAAE,eAAe,EAEjB,AAAuB,EAAW,QAAQ,GAE1C,EAAU,EAAc,EAAE,OAAO,CAAC,CACpC,CACF,CACF,GACA,EAAA,EAAA,QAAA,CACE,EACA,YACA,MACQ,CAAC,CAAC,EACP,GAAoB,CACnB,EAAE,eAAe,EACjB,EAAW,KACX,EAAW,MAAQ,GACnB,EAAG,OAAmB,sBAAsB,EAAE,SAAS,CACzD,CACF,CACF,EAEA,IAAM,GAAoB,EAAsB,IAAiC,GAAqB,CACpG,GAAI,EAAW,MAAO,OAEtB,IAAM,EAAO,EAAc,YAAY,EAAE,IAAK,EAAO,CAAC,EAElD,IAAS,OAEb,EAAE,eAAe,EACjB,EAAO,EAAc,KAAK,CAAI,CAAC,EAC/B,EAAe,EACf,EAAK,SAAU,CACb,KAAM,EAAS,MACf,cAAe,EACf,GAAI,EAAO,MACX,MAAO,CAAE,KAAM,EAAS,MAAO,GAAI,EAAO,KAAM,CAClD,CAAC,EACD,EAAkB,QAAQ,EAC5B,EACM,EAAe,EAAc,MAC7B,EAAa,EAAY,MAE3B,KACF,EAAA,EAAA,QAAA,CACE,EACA,UACA,MACQ,EAAS,MACd,GAAM,CACL,EAAS,MAAQ,KAAK,IAAI,EAAG,EAAO,KAAK,CAC3C,CACF,CACF,GACA,EAAA,EAAA,UAAA,EAAA,EAAA,EAAA,KAAA,CACO,EAAc,CACjB,MAAO,cACP,aAAgB,EAAO,MACvB,aAAgB,EAAc,IAAI,EAClC,aAAgB,EAAS,MACzB,cAAiB,EAAM,kBAAkB,CAAC,OAAS,IACrD,CAAC,CACH,GAGE,KACF,EAAA,EAAA,QAAA,CACE,EACA,UACA,MACQ,EAAO,MACZ,GAAM,CACL,EAAO,MAAQ,KAAK,IAAI,EAAG,EAAS,KAAK,CAC3C,CACF,CACF,GACA,EAAA,EAAA,UAAA,EAAA,EAAA,EAAA,KAAA,CACO,EAAY,CACf,MAAO,YACP,aAAgB,EAAc,IAAI,EAClC,aAAgB,EAAS,MACzB,aAAgB,EAAO,MACvB,cAAiB,EAAM,gBAAgB,CAAC,OAAS,IACnD,CAAC,CACH,EAEJ,EAEM,EAAmB,GAA8B,CACrD,EAAgB,OAAO,EAAY,KAAK,CAAC,EAEzC,IAAM,EAAe,GAAoB,CACvC,GAAI,EAAW,MAAO,OAEtB,IAAM,EAAO,EAAU,sBAAsB,EACvC,EAAW,EAAc,YAAY,EAAS,CAAI,EAEpD,OAAO,EAAY,KAAK,IAAM,IAChC,EAAY,MAAQ,EAAS,SAAS,EACtC,EAAgB,CAAQ,EACxB,EAAK,SAAU,CAAE,MAAO,CAAS,CAAC,EAClC,EAAkB,QAAQ,EAE9B,EACI,EAAoB,IAExB,EAAA,EAAA,QAAA,CACE,EACA,cACA,MACQ,CAAC,EAAW,MACjB,GAAoB,CACnB,EAAE,eAAe,EACjB,EAAoB,GACpB,EAAY,EAAE,OAAO,EACrB,EAAG,OAAmB,kBAAkB,EAAE,SAAS,CACrD,CACF,CACF,GACA,EAAA,EAAA,QAAA,CACE,EACA,cACA,MACQ,EACL,GAAoB,CACnB,EAAE,eAAe,EAEjB,AAAuB,EAAW,QAAQ,GAE1C,EAAY,EAAE,OAAO,CACvB,CACF,CACF,GACA,EAAA,EAAA,QAAA,CACE,EACA,YACA,MACQ,EACL,GAAoB,CACnB,EAAE,eAAe,EACjB,EAAoB,GACpB,EAAW,MAAQ,GACnB,EAAG,OAAmB,sBAAsB,EAAE,SAAS,CACzD,CACF,CACF,GACA,EAAA,EAAA,QAAA,CACE,EACA,UACA,MACQ,CAAC,EAAW,MACjB,GAAqB,CACpB,IAAM,EAAM,OAAO,EAAY,OAAS,CAAC,EACnC,EAAO,EAAc,YAAY,EAAE,IAAK,CAAG,EAEjD,GAAI,IAAS,KAAM,OAEnB,EAAE,eAAe,EAEjB,IAAM,EAAW,EAAc,MAAM,CAAI,EAErC,IAAa,IACf,EAAY,MAAQ,EAAS,SAAS,EACtC,EAAgB,CAAQ,EACxB,EAAK,SAAU,CAAE,cAAe,EAAG,MAAO,CAAS,CAAC,EACpD,EAAkB,QAAQ,EAE9B,CACF,CACF,CACF,EAmBA,OAjBA,EAAA,EAAA,UAAA,KAAgB,CACd,IAAM,EAAY,EAAa,MAE1B,KAEL,IAAI,EAAM,IAAI,CAAC,CAAC,OAAS,EAAS,MAAO,CACvC,IAAM,GAAA,EAAA,EAAA,eAAA,CAAyB,cAAc,EAE7C,EAAS,MAAM,GAAK,EAEf,IAAS,EAAa,MAAQ,EACrC,CAEI,EAAS,EAAe,CAAS,EAChC,EAAgB,CAAS,CAH9B,CAIF,CAAC,EAEM,EAAA,IAAI;wDACyC,EAAa;;;;;;;kBAOnD,EAAc;;4BAED,EAAW,MAAQ,KAAO,IAAK;iCAC7B,EAAgB;kBAC/B,EAAQ;;;;kBAIR,EAAY;;4BAEC,EAAW,MAAQ,KAAO,IAAK;iCAC7B,EAAgB;kBAC/B,EAAM;;;6CAGqB,EAAS;QAC9C,EAAA,mBAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CACN,EAAA,mBACA,EAAA,gBACA,EAAA,iBAAiB,EAAA,kBAAkB,EACnC,EAAA,QACA,EAAA,kBACF,CACF,CAAC"}

package/dist/slider.js

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

package/dist/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../src/inputs/slider/slider.ts"],"sourcesContent":["import { createStableId, define, useField, html, inject, prop, ref } from '@vielzeug/ore';\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, OreSliderEvents>(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, { aria, bind, el, emit, onCleanup, onEvent, onMounted, 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,\n      min: props.min,\n      step: props.step,\n    });\n    // ── Single-value state ────────────────────────────────────────\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n    const isDragging = signal(false);\n    const isDisabled = fCtxProps.disabled;\n    const labelledById = signal<string | undefined>(undefined);\n    const assistiveId = createStableId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    bind({\n      attr: {\n        'data-dragging': () => (isDragging.value ? true : undefined),\n        size: fCtxProps.size,\n      },\n    });\n\n    let sliderFd:\n      | {\n          reportValidity: () => boolean;\n        }\n      | undefined;\n    const valueSignal = signal('0');\n\n    if (!isRange) {\n      sliderFd = useField({ disabled: isDisabled, value: valueSignal });\n      watch(\n        props.value,\n        (v) => {\n          valueSignal.value = String(v);\n        },\n        { immediate: true },\n      );\n      bind({\n        attr: {\n          ariaDescribedby: () => ariaDescribedBy.value ?? null,\n          ariaDisabled: () => (isDisabled.value ? 'true' : null),\n          ariaLabelledby: () => labelledById.value ?? null,\n          ariaValuemax: () => sliderControl.max(),\n          ariaValuemin: () => sliderControl.min(),\n          ariaValuenow: () => Number(valueSignal.value || 0),\n          ariaValuetext: () => props['value-text'].value ?? null,\n          role: () => 'slider',\n          tabindex: () => (isDisabled.value ? null : '0'),\n        },\n      });\n    }\n\n    // ── Range state ───────────────────────────────────────────────\n    const startVal = signal(0);\n    const endVal = signal(100);\n\n    if (isRange) {\n      sliderFd = useField<{\n        from: number;\n        to: number;\n      }>({\n        disabled: isDisabled,\n        toFormValue: ({ from, to }) => {\n          const name = props.name.value;\n\n          if (!name) return null;\n\n          const fd = new FormData();\n\n          fd.append(`${name}[from]`, String(from));\n          fd.append(`${name}[to]`, String(to));\n\n          return fd;\n        },\n        value: computed(() => ({ from: startVal.value, to: endVal.value })),\n      });\n      watch(\n        props.from,\n        (v) => {\n          startVal.value = sliderControl.snap(Number(v));\n        },\n        { immediate: true },\n      );\n      watch(\n        props.to,\n        (v) => {\n          endVal.value = sliderControl.snap(Number(v));\n        },\n        { immediate: true },\n      );\n    }\n\n    // ── Refs ──────────────────────────────────────────────────────\n    const containerRef = ref<HTMLDivElement>();\n    const labelRef = ref<HTMLSpanElement>();\n    const thumbStartRef = ref<HTMLDivElement>();\n    const thumbEndRef = ref<HTMLDivElement>();\n    const startId = createStableId('slider-start');\n    const endId = createStableId('slider-end');\n    // ── CSS update helpers ────────────────────────────────────────\n    const updateSingleCSS = (value: number) => {\n      const pct = sliderControl.toPercent(value);\n\n      el.style.setProperty('--_thumb-pos', `${pct}%`);\n      el.style.setProperty('--_fill-start', '0%');\n      el.style.setProperty('--_fill-width', `${pct}%`);\n    };\n    const updateRangeCSS = () => {\n      const s = sliderControl.toPercent(startVal.value);\n      const e = sliderControl.toPercent(endVal.value);\n\n      el.style.setProperty('--_thumb-start', `${s}%`);\n      el.style.setProperty('--_thumb-end', `${e}%`);\n      el.style.setProperty('--_fill-start', `${s}%`);\n      el.style.setProperty('--_fill-width', `${e - s}%`);\n    };\n\n    // ── Range mode setup ──────────────────────────────────────────\n    const triggerValidation = (on: 'blur' | 'change') => {\n      if (formCtx?.validateOn?.value === on) {\n        sliderFd?.reportValidity();\n      }\n    };\n\n    const setupRangeMode = (container: HTMLDivElement) => {\n      updateRangeCSS();\n\n      const clientToValue = (clientX: number) => {\n        const rect = container.getBoundingClientRect();\n\n        return sliderControl.fromClientX(clientX, rect);\n      };\n      let dragging: 'start' | 'end' | null = null;\n      const applyDrag = (val: number) => {\n        if (dragging === 'start') startVal.value = Math.min(sliderControl.snap(val), endVal.value);\n        else if (dragging === 'end') endVal.value = Math.max(sliderControl.snap(val), startVal.value);\n\n        startVal.value = sliderControl.clamp(startVal.value);\n        endVal.value = sliderControl.clamp(endVal.value);\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n\n      onEvent(\n        container,\n        'pointerdown',\n        guard(\n          () => !isDisabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            const val = clientToValue(e.clientX);\n\n            dragging = Math.abs(val - startVal.value) <= Math.abs(val - endVal.value) ? 'start' : 'end';\n            (e.target as Element).setPointerCapture(e.pointerId);\n            applyDrag(val);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointermove',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!isDragging.value) isDragging.value = true;\n\n            applyDrag(clientToValue(e.clientX));\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointerup',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            dragging = null;\n            isDragging.value = false;\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n\n      const makeThumbKeydown = (getVal: () => number, setVal: (v: number) => void) => (e: KeyboardEvent) => {\n        if (isDisabled.value) return;\n\n        const next = sliderControl.nextFromKey(e.key, getVal());\n\n        if (next === null) return;\n\n        e.preventDefault();\n        setVal(sliderControl.snap(next));\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          originalEvent: e,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n      const thumbStartEl = thumbStartRef.value;\n      const thumbEndEl = thumbEndRef.value;\n\n      if (thumbStartEl) {\n        onEvent(\n          thumbStartEl,\n          'keydown',\n          makeThumbKeydown(\n            () => startVal.value,\n            (v) => {\n              startVal.value = Math.min(v, endVal.value);\n            },\n          ),\n        );\n        onCleanup(\n          aria(thumbStartEl, {\n            label: 'Range start',\n            valuemax: () => endVal.value,\n            valuemin: () => sliderControl.min(),\n            valuenow: () => startVal.value,\n            valuetext: () => props['from-value-text'].value ?? null,\n          }),\n        );\n      }\n\n      if (thumbEndEl) {\n        onEvent(\n          thumbEndEl,\n          'keydown',\n          makeThumbKeydown(\n            () => endVal.value,\n            (v) => {\n              endVal.value = Math.max(v, startVal.value);\n            },\n          ),\n        );\n        onCleanup(\n          aria(thumbEndEl, {\n            label: 'Range end',\n            valuemax: () => sliderControl.max(),\n            valuemin: () => startVal.value,\n            valuenow: () => endVal.value,\n            valuetext: () => props['to-value-text'].value ?? null,\n          }),\n        );\n      }\n    };\n    // ── Single-value mode setup ───────────────────────────────────\n    const setupSingleMode = (container: HTMLDivElement) => {\n      updateSingleCSS(Number(valueSignal.value));\n\n      const updateValue = (clientX: number) => {\n        if (isDisabled.value) return;\n\n        const rect = container.getBoundingClientRect();\n        const newValue = sliderControl.fromClientX(clientX, rect);\n\n        if (Number(valueSignal.value) !== newValue) {\n          valueSignal.value = newValue.toString();\n          updateSingleCSS(newValue);\n          emit('change', { value: newValue });\n          triggerValidation('change');\n        }\n      };\n      let isPointerDragging = false;\n\n      onEvent(\n        container,\n        'pointerdown',\n        guard(\n          () => !isDisabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isPointerDragging = true;\n            updateValue(e.clientX);\n            (e.target as Element).setPointerCapture(e.pointerId);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointermove',\n        guard(\n          () => isPointerDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!isDragging.value) isDragging.value = true;\n\n            updateValue(e.clientX);\n          },\n        ),\n      );\n      onEvent(\n        container,\n        'pointerup',\n        guard(\n          () => isPointerDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isPointerDragging = false;\n            isDragging.value = false;\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n      onEvent(\n        el,\n        'keydown',\n        guard(\n          () => !isDisabled.value,\n          (e: KeyboardEvent) => {\n            const val = Number(valueSignal.value || 0);\n            const next = sliderControl.nextFromKey(e.key, val);\n\n            if (next === null) return;\n\n            e.preventDefault();\n\n            const newValue = sliderControl.clamp(next);\n\n            if (newValue !== val) {\n              valueSignal.value = newValue.toString();\n              updateSingleCSS(newValue);\n              emit('change', { originalEvent: e, value: newValue });\n              triggerValidation('change');\n            }\n          },\n        ),\n      );\n    };\n\n    onMounted(() => {\n      const container = containerRef.value;\n\n      if (!container) return;\n\n      if (slots.has().value && labelRef.value) {\n        const labelId = createStableId('slider-label');\n\n        labelRef.value.id = labelId;\n\n        if (!isRange) labelledById.value = labelId;\n      }\n\n      if (isRange) setupRangeMode(container);\n      else setupSingleMode(container);\n    });\n\n    return html`\n      <div class=\"slider-container\" part=\"slider\" ref=${containerRef}>\n        <div class=\"slider-track\" part=\"track\">\n          <div class=\"slider-fill\" part=\"fill\"></div>\n          <div class=\"slider-thumb slider-thumb-sole\" part=\"thumb\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-start\"\n            part=\"thumb-start\"\n            ref=${thumbStartRef}\n            role=\"slider\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n            :aria-describedby=\"${ariaDescribedBy}\"\n            id=\"${startId}\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-end\"\n            part=\"thumb-end\"\n            ref=${thumbEndRef}\n            role=\"slider\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n            :aria-describedby=\"${ariaDescribedBy}\"\n            id=\"${endId}\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" ref=${labelRef}><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    disabledStateMixin,\n    colorThemeMixin,\n    sizeVariantMixin(SLIDER_SIZE_PRESET),\n    componentStyles,\n    coarsePointerMixin,\n  ],\n});\n"],"mappings":"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"}
+{"version":3,"file":"slider.js","names":[],"sources":["../src/inputs/slider/slider.ts"],"sourcesContent":["import {\n  createStableId,\n  define,\n  html,\n  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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"}