reka-ui 2.2.1 → 2.3.0

package/dist/Slider/SliderRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliderRoot.cjs","sources":["../../src/Slider/SliderRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { ComputedRef, Ref } from 'vue'\nimport type { DataOrientation, Direction, FormFieldProps } from '../shared/types'\nimport { useCollection } from '@/Collection'\nimport { clamp, createContext, useDirection, useFormControl, useForwardExpose } from '@/shared'\n\ntype ThumbAlignment = 'contain' | 'overflow'\n\nexport interface SliderRootProps extends PrimitiveProps, FormFieldProps {\n  /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */\n  defaultValue?: number[]\n  /** The controlled value of the slider. Can be bind as `v-model`. */\n  modelValue?: number[] | null\n  /** When `true`, prevents the user from interacting with the slider. */\n  disabled?: boolean\n  /** The orientation of the slider. */\n  orientation?: DataOrientation\n  /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** Whether the slider is visually inverted. */\n  inverted?: boolean\n  /** The minimum value for the range. */\n  min?: number\n  /** The maximum value for the range. */\n  max?: number\n  /** The stepping interval. */\n  step?: number\n  /** The minimum permitted steps between multiple thumbs. */\n  minStepsBetweenThumbs?: number\n  /**\n   * The alignment of the slider thumb.\n   * - `contain`: thumbs will be contained within the bounds of the track.\n   * - `overflow`: thumbs will not be bound by the track. No extra offset will be added.\n   * @defaultValue 'contain'\n   */\n  thumbAlignment?: ThumbAlignment\n}\n\nexport type SliderRootEmits = {\n  /**\n   * Event handler called when the slider value changes\n   */\n  'update:modelValue': [payload: number[] | undefined]\n  /**\n   * Event handler called when the value changes at the end of an interaction.\n   *\n   * Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  'valueCommit': [payload: number[]]\n}\n\nexport interface SliderRootContext {\n  orientation: Ref<DataOrientation>\n  disabled: Ref<boolean>\n  min: Ref<number>\n  max: Ref<number>\n  modelValue?: Readonly<Ref<number[] | null | undefined>>\n  currentModelValue: ComputedRef<number[]>\n  valueIndexToChangeRef: Ref<number>\n  thumbElements: Ref<HTMLElement[]>\n  thumbAlignment: Ref<ThumbAlignment>\n}\n\nexport const [injectSliderRootContext, provideSliderRootContext]\n  = createContext<SliderRootContext>('SliderRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\nimport { useVModel } from '@vueuse/core'\nimport { computed, ref, toRaw, toRefs } from 'vue'\nimport SliderHorizontal from './SliderHorizontal.vue'\nimport SliderVertical from './SliderVertical.vue'\nimport { ARROW_KEYS, getClosestValueIndex, getDecimalCount, getNextSortedValues, hasMinStepsBetweenValues, PAGE_KEYS, roundValue } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SliderRootProps>(), {\n  min: 0,\n  max: 100,\n  step: 1,\n  orientation: 'horizontal',\n  disabled: false,\n  minStepsBetweenThumbs: 0,\n  defaultValue: () => [0],\n  inverted: false,\n  thumbAlignment: 'contain',\n  as: 'span',\n})\nconst emits = defineEmits<SliderRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current slider values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { min, max, step, minStepsBetweenThumbs, orientation, disabled, thumbAlignment, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nconst { forwardRef, currentElement } = useForwardExpose()\nconst isFormControl = useFormControl(currentElement)\n\nconst { CollectionSlot } = useCollection({ isProvider: true })\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<number[] | null>\n\nconst currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : [])\n\nconst valueIndexToChangeRef = ref(0)\nconst valuesBeforeSlideStartRef = ref(currentModelValue.value)\n\nfunction handleSlideStart(value: number) {\n  const closestIndex = getClosestValueIndex(currentModelValue.value, value)\n  updateValues(value, closestIndex)\n}\n\nfunction handleSlideMove(value: number) {\n  updateValues(value, valueIndexToChangeRef.value)\n}\n\nfunction handleSlideEnd() {\n  const prevValue = valuesBeforeSlideStartRef.value[valueIndexToChangeRef.value]\n  const nextValue = currentModelValue.value[valueIndexToChangeRef.value]\n  const hasChanged = nextValue !== prevValue\n  if (hasChanged)\n    emits('valueCommit', toRaw(currentModelValue.value))\n}\n\nfunction updateValues(value: number, atIndex: number, { commit } = { commit: false }) {\n  const decimalCount = getDecimalCount(step.value)\n  const snapToStep = roundValue(Math.round((value - min.value) / step.value) * step.value + min.value, decimalCount)\n  const nextValue = clamp(snapToStep, min.value, max.value)\n\n  const nextValues = getNextSortedValues(currentModelValue.value, nextValue, atIndex)\n\n  if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs.value * step.value)) {\n    valueIndexToChangeRef.value = nextValues.indexOf(nextValue)\n    const hasChanged = String(nextValues) !== String(modelValue.value)\n    if (hasChanged && commit)\n      emits('valueCommit', nextValues)\n\n    if (hasChanged) {\n      thumbElements.value[valueIndexToChangeRef.value]?.focus()\n      modelValue.value = nextValues\n    }\n  }\n}\n\nconst thumbElements = ref<HTMLElement[]>([])\nprovideSliderRootContext({\n  modelValue,\n  currentModelValue,\n  valueIndexToChangeRef,\n  thumbElements,\n  orientation,\n  min,\n  max,\n  disabled,\n  thumbAlignment,\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <component\n      :is=\"orientation === 'horizontal' ? SliderHorizontal : SliderVertical\"\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      :min=\"min\"\n      :max=\"max\"\n      :dir=\"dir\"\n      :inverted=\"inverted\"\n      :aria-disabled=\"disabled\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      @pointerdown=\"() => {\n        if (!disabled) valuesBeforeSlideStartRef = currentModelValue\n      }\"\n      @slide-start=\"!disabled && handleSlideStart($event)\"\n      @slide-move=\"!disabled && handleSlideMove($event)\"\n      @slide-end=\"!disabled && handleSlideEnd()\"\n      @home-key-down=\"!disabled && updateValues(min, 0, { commit: true })\"\n      @end-key-down=\"!disabled && updateValues(max, currentModelValue.length - 1, { commit: true })\"\n      @step-key-down=\"(event, direction) => {\n        if (!disabled) {\n          const isPageKey = PAGE_KEYS.includes(event.key);\n          const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key));\n          const multiplier = isSkipKey ? 10 : 1;\n          const atIndex = valueIndexToChangeRef;\n          const value = currentModelValue[atIndex];\n          const stepInDirection = step * multiplier * direction;\n          updateValues(value + stepInDirection, atIndex, { commit: true });\n        }\n      }\"\n    >\n      <slot :model-value=\"modelValue\" />\n\n      <VisuallyHiddenInput\n        v-if=\"isFormControl && name\"\n        type=\"number\"\n        :value=\"modelValue\"\n        :name=\"name\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n        :step=\"step\"\n      />\n    </component>\n  </CollectionSlot>\n</template>\n"],"names":["createContext","toRefs","useDirection","useForwardExpose","useFormControl","useCollection","useVModel","computed","ref","getClosestValueIndex","toRaw","getDecimalCount","roundValue","clamp","getNextSortedValues","hasMinStepsBetweenValues"],"mappings":"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"}
+{"version":3,"file":"SliderRoot.cjs","sources":["../../src/Slider/SliderRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { DataOrientation, Direction, FormFieldProps } from '../shared/types'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useCollection } from '@/Collection'\nimport { clamp, createContext, useDirection, useFormControl, useForwardExpose } from '@/shared'\n\ntype ThumbAlignment = 'contain' | 'overflow'\n\nexport interface SliderRootProps extends PrimitiveProps, FormFieldProps {\n  /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */\n  defaultValue?: number[]\n  /** The controlled value of the slider. Can be bind as `v-model`. */\n  modelValue?: number[] | null\n  /** When `true`, prevents the user from interacting with the slider. */\n  disabled?: boolean\n  /** The orientation of the slider. */\n  orientation?: DataOrientation\n  /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** Whether the slider is visually inverted. */\n  inverted?: boolean\n  /** The minimum value for the range. */\n  min?: number\n  /** The maximum value for the range. */\n  max?: number\n  /** The stepping interval. */\n  step?: number\n  /** The minimum permitted steps between multiple thumbs. */\n  minStepsBetweenThumbs?: number\n  /**\n   * The alignment of the slider thumb.\n   * - `contain`: thumbs will be contained within the bounds of the track.\n   * - `overflow`: thumbs will not be bound by the track. No extra offset will be added.\n   * @defaultValue 'contain'\n   */\n  thumbAlignment?: ThumbAlignment\n}\n\nexport type SliderRootEmits = {\n  /**\n   * Event handler called when the slider value changes\n   */\n  'update:modelValue': [payload: number[] | undefined]\n  /**\n   * Event handler called when the value changes at the end of an interaction.\n   *\n   * Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  'valueCommit': [payload: number[]]\n}\n\nexport interface SliderRootContext {\n  orientation: Ref<DataOrientation>\n  disabled: Ref<boolean>\n  min: Ref<number>\n  max: Ref<number>\n  modelValue?: Readonly<Ref<number[] | null | undefined>>\n  currentModelValue: ComputedRef<number[]>\n  valueIndexToChangeRef: Ref<number>\n  thumbElements: Ref<HTMLElement[]>\n  thumbAlignment: Ref<ThumbAlignment>\n}\n\nexport const [injectSliderRootContext, provideSliderRootContext]\n  = createContext<SliderRootContext>('SliderRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { computed, ref, toRaw, toRefs } from 'vue'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\nimport SliderHorizontal from './SliderHorizontal.vue'\nimport SliderVertical from './SliderVertical.vue'\nimport { ARROW_KEYS, getClosestValueIndex, getDecimalCount, getNextSortedValues, hasMinStepsBetweenValues, PAGE_KEYS, roundValue } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SliderRootProps>(), {\n  min: 0,\n  max: 100,\n  step: 1,\n  orientation: 'horizontal',\n  disabled: false,\n  minStepsBetweenThumbs: 0,\n  defaultValue: () => [0],\n  inverted: false,\n  thumbAlignment: 'contain',\n  as: 'span',\n})\nconst emits = defineEmits<SliderRootEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current slider values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { min, max, step, minStepsBetweenThumbs, orientation, disabled, thumbAlignment, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nconst { forwardRef, currentElement } = useForwardExpose()\nconst isFormControl = useFormControl(currentElement)\n\nconst { CollectionSlot } = useCollection({ isProvider: true })\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<number[] | null>\n\nconst currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : [])\n\nconst valueIndexToChangeRef = ref(0)\nconst valuesBeforeSlideStartRef = ref(currentModelValue.value)\n\nfunction handleSlideStart(value: number) {\n  const closestIndex = getClosestValueIndex(currentModelValue.value, value)\n  updateValues(value, closestIndex)\n}\n\nfunction handleSlideMove(value: number) {\n  updateValues(value, valueIndexToChangeRef.value)\n}\n\nfunction handleSlideEnd() {\n  const prevValue = valuesBeforeSlideStartRef.value[valueIndexToChangeRef.value]\n  const nextValue = currentModelValue.value[valueIndexToChangeRef.value]\n  const hasChanged = nextValue !== prevValue\n  if (hasChanged)\n    emits('valueCommit', toRaw(currentModelValue.value))\n}\n\nfunction updateValues(value: number, atIndex: number, { commit } = { commit: false }) {\n  const decimalCount = getDecimalCount(step.value)\n  const snapToStep = roundValue(Math.round((value - min.value) / step.value) * step.value + min.value, decimalCount)\n  const nextValue = clamp(snapToStep, min.value, max.value)\n\n  const nextValues = getNextSortedValues(currentModelValue.value, nextValue, atIndex)\n\n  if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs.value * step.value)) {\n    valueIndexToChangeRef.value = nextValues.indexOf(nextValue)\n    const hasChanged = String(nextValues) !== String(modelValue.value)\n    if (hasChanged && commit)\n      emits('valueCommit', nextValues)\n\n    if (hasChanged) {\n      thumbElements.value[valueIndexToChangeRef.value]?.focus()\n      modelValue.value = nextValues\n    }\n  }\n}\n\nconst thumbElements = ref<HTMLElement[]>([])\nprovideSliderRootContext({\n  modelValue,\n  currentModelValue,\n  valueIndexToChangeRef,\n  thumbElements,\n  orientation,\n  min,\n  max,\n  disabled,\n  thumbAlignment,\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <component\n      :is=\"orientation === 'horizontal' ? SliderHorizontal : SliderVertical\"\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      :min=\"min\"\n      :max=\"max\"\n      :dir=\"dir\"\n      :inverted=\"inverted\"\n      :aria-disabled=\"disabled\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      @pointerdown=\"() => {\n        if (!disabled) valuesBeforeSlideStartRef = currentModelValue\n      }\"\n      @slide-start=\"!disabled && handleSlideStart($event)\"\n      @slide-move=\"!disabled && handleSlideMove($event)\"\n      @slide-end=\"!disabled && handleSlideEnd()\"\n      @home-key-down=\"!disabled && updateValues(min, 0, { commit: true })\"\n      @end-key-down=\"!disabled && updateValues(max, currentModelValue.length - 1, { commit: true })\"\n      @step-key-down=\"(event, direction) => {\n        if (!disabled) {\n          const isPageKey = PAGE_KEYS.includes(event.key);\n          const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key));\n          const multiplier = isSkipKey ? 10 : 1;\n          const atIndex = valueIndexToChangeRef;\n          const value = currentModelValue[atIndex];\n          const stepInDirection = step * multiplier * direction;\n          updateValues(value + stepInDirection, atIndex, { commit: true });\n        }\n      }\"\n    >\n      <slot :model-value=\"modelValue\" />\n\n      <VisuallyHiddenInput\n        v-if=\"isFormControl && name\"\n        type=\"number\"\n        :value=\"modelValue\"\n        :name=\"name\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n        :step=\"step\"\n      />\n    </component>\n  </CollectionSlot>\n</template>\n"],"names":["createContext","toRefs","useDirection","useForwardExpose","useFormControl","useCollection","useVModel","computed","ref","getClosestValueIndex","toRaw","getDecimalCount","roundValue","clamp","getNextSortedValues","hasMinStepsBetweenValues"],"mappings":"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"}

package/dist/Slider/SliderRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderRoot.js","sources":["../../src/Slider/SliderRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { ComputedRef, Ref } from 'vue'\nimport type { DataOrientation, Direction, FormFieldProps } from '../shared/types'\nimport { useCollection } from '@/Collection'\nimport { clamp, createContext, useDirection, useFormControl, useForwardExpose } from '@/shared'\n\ntype ThumbAlignment = 'contain' | 'overflow'\n\nexport interface SliderRootProps extends PrimitiveProps, FormFieldProps {\n  /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */\n  defaultValue?: number[]\n  /** The controlled value of the slider. Can be bind as `v-model`. */\n  modelValue?: number[] | null\n  /** When `true`, prevents the user from interacting with the slider. */\n  disabled?: boolean\n  /** The orientation of the slider. */\n  orientation?: DataOrientation\n  /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** Whether the slider is visually inverted. */\n  inverted?: boolean\n  /** The minimum value for the range. */\n  min?: number\n  /** The maximum value for the range. */\n  max?: number\n  /** The stepping interval. */\n  step?: number\n  /** The minimum permitted steps between multiple thumbs. */\n  minStepsBetweenThumbs?: number\n  /**\n   * The alignment of the slider thumb.\n   * - `contain`: thumbs will be contained within the bounds of the track.\n   * - `overflow`: thumbs will not be bound by the track. No extra offset will be added.\n   * @defaultValue 'contain'\n   */\n  thumbAlignment?: ThumbAlignment\n}\n\nexport type SliderRootEmits = {\n  /**\n   * Event handler called when the slider value changes\n   */\n  'update:modelValue': [payload: number[] | undefined]\n  /**\n   * Event handler called when the value changes at the end of an interaction.\n   *\n   * Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  'valueCommit': [payload: number[]]\n}\n\nexport interface SliderRootContext {\n  orientation: Ref<DataOrientation>\n  disabled: Ref<boolean>\n  min: Ref<number>\n  max: Ref<number>\n  modelValue?: Readonly<Ref<number[] | null | undefined>>\n  currentModelValue: ComputedRef<number[]>\n  valueIndexToChangeRef: Ref<number>\n  thumbElements: Ref<HTMLElement[]>\n  thumbAlignment: Ref<ThumbAlignment>\n}\n\nexport const [injectSliderRootContext, provideSliderRootContext]\n  = createContext<SliderRootContext>('SliderRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\nimport { useVModel } from '@vueuse/core'\nimport { computed, ref, toRaw, toRefs } from 'vue'\nimport SliderHorizontal from './SliderHorizontal.vue'\nimport SliderVertical from './SliderVertical.vue'\nimport { ARROW_KEYS, getClosestValueIndex, getDecimalCount, getNextSortedValues, hasMinStepsBetweenValues, PAGE_KEYS, roundValue } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SliderRootProps>(), {\n  min: 0,\n  max: 100,\n  step: 1,\n  orientation: 'horizontal',\n  disabled: false,\n  minStepsBetweenThumbs: 0,\n  defaultValue: () => [0],\n  inverted: false,\n  thumbAlignment: 'contain',\n  as: 'span',\n})\nconst emits = defineEmits<SliderRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current slider values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { min, max, step, minStepsBetweenThumbs, orientation, disabled, thumbAlignment, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nconst { forwardRef, currentElement } = useForwardExpose()\nconst isFormControl = useFormControl(currentElement)\n\nconst { CollectionSlot } = useCollection({ isProvider: true })\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<number[] | null>\n\nconst currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : [])\n\nconst valueIndexToChangeRef = ref(0)\nconst valuesBeforeSlideStartRef = ref(currentModelValue.value)\n\nfunction handleSlideStart(value: number) {\n  const closestIndex = getClosestValueIndex(currentModelValue.value, value)\n  updateValues(value, closestIndex)\n}\n\nfunction handleSlideMove(value: number) {\n  updateValues(value, valueIndexToChangeRef.value)\n}\n\nfunction handleSlideEnd() {\n  const prevValue = valuesBeforeSlideStartRef.value[valueIndexToChangeRef.value]\n  const nextValue = currentModelValue.value[valueIndexToChangeRef.value]\n  const hasChanged = nextValue !== prevValue\n  if (hasChanged)\n    emits('valueCommit', toRaw(currentModelValue.value))\n}\n\nfunction updateValues(value: number, atIndex: number, { commit } = { commit: false }) {\n  const decimalCount = getDecimalCount(step.value)\n  const snapToStep = roundValue(Math.round((value - min.value) / step.value) * step.value + min.value, decimalCount)\n  const nextValue = clamp(snapToStep, min.value, max.value)\n\n  const nextValues = getNextSortedValues(currentModelValue.value, nextValue, atIndex)\n\n  if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs.value * step.value)) {\n    valueIndexToChangeRef.value = nextValues.indexOf(nextValue)\n    const hasChanged = String(nextValues) !== String(modelValue.value)\n    if (hasChanged && commit)\n      emits('valueCommit', nextValues)\n\n    if (hasChanged) {\n      thumbElements.value[valueIndexToChangeRef.value]?.focus()\n      modelValue.value = nextValues\n    }\n  }\n}\n\nconst thumbElements = ref<HTMLElement[]>([])\nprovideSliderRootContext({\n  modelValue,\n  currentModelValue,\n  valueIndexToChangeRef,\n  thumbElements,\n  orientation,\n  min,\n  max,\n  disabled,\n  thumbAlignment,\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <component\n      :is=\"orientation === 'horizontal' ? SliderHorizontal : SliderVertical\"\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      :min=\"min\"\n      :max=\"max\"\n      :dir=\"dir\"\n      :inverted=\"inverted\"\n      :aria-disabled=\"disabled\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      @pointerdown=\"() => {\n        if (!disabled) valuesBeforeSlideStartRef = currentModelValue\n      }\"\n      @slide-start=\"!disabled && handleSlideStart($event)\"\n      @slide-move=\"!disabled && handleSlideMove($event)\"\n      @slide-end=\"!disabled && handleSlideEnd()\"\n      @home-key-down=\"!disabled && updateValues(min, 0, { commit: true })\"\n      @end-key-down=\"!disabled && updateValues(max, currentModelValue.length - 1, { commit: true })\"\n      @step-key-down=\"(event, direction) => {\n        if (!disabled) {\n          const isPageKey = PAGE_KEYS.includes(event.key);\n          const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key));\n          const multiplier = isSkipKey ? 10 : 1;\n          const atIndex = valueIndexToChangeRef;\n          const value = currentModelValue[atIndex];\n          const stepInDirection = step * multiplier * direction;\n          updateValues(value + stepInDirection, atIndex, { commit: true });\n        }\n      }\"\n    >\n      <slot :model-value=\"modelValue\" />\n\n      <VisuallyHiddenInput\n        v-if=\"isFormControl && name\"\n        type=\"number\"\n        :value=\"modelValue\"\n        :name=\"name\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n        :step=\"step\"\n      />\n    </component>\n  </CollectionSlot>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SliderRoot.js","sources":["../../src/Slider/SliderRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { DataOrientation, Direction, FormFieldProps } from '../shared/types'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useCollection } from '@/Collection'\nimport { clamp, createContext, useDirection, useFormControl, useForwardExpose } from '@/shared'\n\ntype ThumbAlignment = 'contain' | 'overflow'\n\nexport interface SliderRootProps extends PrimitiveProps, FormFieldProps {\n  /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */\n  defaultValue?: number[]\n  /** The controlled value of the slider. Can be bind as `v-model`. */\n  modelValue?: number[] | null\n  /** When `true`, prevents the user from interacting with the slider. */\n  disabled?: boolean\n  /** The orientation of the slider. */\n  orientation?: DataOrientation\n  /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** Whether the slider is visually inverted. */\n  inverted?: boolean\n  /** The minimum value for the range. */\n  min?: number\n  /** The maximum value for the range. */\n  max?: number\n  /** The stepping interval. */\n  step?: number\n  /** The minimum permitted steps between multiple thumbs. */\n  minStepsBetweenThumbs?: number\n  /**\n   * The alignment of the slider thumb.\n   * - `contain`: thumbs will be contained within the bounds of the track.\n   * - `overflow`: thumbs will not be bound by the track. No extra offset will be added.\n   * @defaultValue 'contain'\n   */\n  thumbAlignment?: ThumbAlignment\n}\n\nexport type SliderRootEmits = {\n  /**\n   * Event handler called when the slider value changes\n   */\n  'update:modelValue': [payload: number[] | undefined]\n  /**\n   * Event handler called when the value changes at the end of an interaction.\n   *\n   * Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  'valueCommit': [payload: number[]]\n}\n\nexport interface SliderRootContext {\n  orientation: Ref<DataOrientation>\n  disabled: Ref<boolean>\n  min: Ref<number>\n  max: Ref<number>\n  modelValue?: Readonly<Ref<number[] | null | undefined>>\n  currentModelValue: ComputedRef<number[]>\n  valueIndexToChangeRef: Ref<number>\n  thumbElements: Ref<HTMLElement[]>\n  thumbAlignment: Ref<ThumbAlignment>\n}\n\nexport const [injectSliderRootContext, provideSliderRootContext]\n  = createContext<SliderRootContext>('SliderRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { computed, ref, toRaw, toRefs } from 'vue'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\nimport SliderHorizontal from './SliderHorizontal.vue'\nimport SliderVertical from './SliderVertical.vue'\nimport { ARROW_KEYS, getClosestValueIndex, getDecimalCount, getNextSortedValues, hasMinStepsBetweenValues, PAGE_KEYS, roundValue } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SliderRootProps>(), {\n  min: 0,\n  max: 100,\n  step: 1,\n  orientation: 'horizontal',\n  disabled: false,\n  minStepsBetweenThumbs: 0,\n  defaultValue: () => [0],\n  inverted: false,\n  thumbAlignment: 'contain',\n  as: 'span',\n})\nconst emits = defineEmits<SliderRootEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current slider values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { min, max, step, minStepsBetweenThumbs, orientation, disabled, thumbAlignment, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nconst { forwardRef, currentElement } = useForwardExpose()\nconst isFormControl = useFormControl(currentElement)\n\nconst { CollectionSlot } = useCollection({ isProvider: true })\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<number[] | null>\n\nconst currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : [])\n\nconst valueIndexToChangeRef = ref(0)\nconst valuesBeforeSlideStartRef = ref(currentModelValue.value)\n\nfunction handleSlideStart(value: number) {\n  const closestIndex = getClosestValueIndex(currentModelValue.value, value)\n  updateValues(value, closestIndex)\n}\n\nfunction handleSlideMove(value: number) {\n  updateValues(value, valueIndexToChangeRef.value)\n}\n\nfunction handleSlideEnd() {\n  const prevValue = valuesBeforeSlideStartRef.value[valueIndexToChangeRef.value]\n  const nextValue = currentModelValue.value[valueIndexToChangeRef.value]\n  const hasChanged = nextValue !== prevValue\n  if (hasChanged)\n    emits('valueCommit', toRaw(currentModelValue.value))\n}\n\nfunction updateValues(value: number, atIndex: number, { commit } = { commit: false }) {\n  const decimalCount = getDecimalCount(step.value)\n  const snapToStep = roundValue(Math.round((value - min.value) / step.value) * step.value + min.value, decimalCount)\n  const nextValue = clamp(snapToStep, min.value, max.value)\n\n  const nextValues = getNextSortedValues(currentModelValue.value, nextValue, atIndex)\n\n  if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs.value * step.value)) {\n    valueIndexToChangeRef.value = nextValues.indexOf(nextValue)\n    const hasChanged = String(nextValues) !== String(modelValue.value)\n    if (hasChanged && commit)\n      emits('valueCommit', nextValues)\n\n    if (hasChanged) {\n      thumbElements.value[valueIndexToChangeRef.value]?.focus()\n      modelValue.value = nextValues\n    }\n  }\n}\n\nconst thumbElements = ref<HTMLElement[]>([])\nprovideSliderRootContext({\n  modelValue,\n  currentModelValue,\n  valueIndexToChangeRef,\n  thumbElements,\n  orientation,\n  min,\n  max,\n  disabled,\n  thumbAlignment,\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <component\n      :is=\"orientation === 'horizontal' ? SliderHorizontal : SliderVertical\"\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      :min=\"min\"\n      :max=\"max\"\n      :dir=\"dir\"\n      :inverted=\"inverted\"\n      :aria-disabled=\"disabled\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      @pointerdown=\"() => {\n        if (!disabled) valuesBeforeSlideStartRef = currentModelValue\n      }\"\n      @slide-start=\"!disabled && handleSlideStart($event)\"\n      @slide-move=\"!disabled && handleSlideMove($event)\"\n      @slide-end=\"!disabled && handleSlideEnd()\"\n      @home-key-down=\"!disabled && updateValues(min, 0, { commit: true })\"\n      @end-key-down=\"!disabled && updateValues(max, currentModelValue.length - 1, { commit: true })\"\n      @step-key-down=\"(event, direction) => {\n        if (!disabled) {\n          const isPageKey = PAGE_KEYS.includes(event.key);\n          const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key));\n          const multiplier = isSkipKey ? 10 : 1;\n          const atIndex = valueIndexToChangeRef;\n          const value = currentModelValue[atIndex];\n          const stepInDirection = step * multiplier * direction;\n          updateValues(value + stepInDirection, atIndex, { commit: true });\n        }\n      }\"\n    >\n      <slot :model-value=\"modelValue\" />\n\n      <VisuallyHiddenInput\n        v-if=\"isFormControl && name\"\n        type=\"number\"\n        :value=\"modelValue\"\n        :name=\"name\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n        :step=\"step\"\n      />\n    </component>\n  </CollectionSlot>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/Slider/SliderThumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumb.cjs","sources":["../../src/Slider/SliderThumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SliderThumbProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { useCollection } from '@/Collection'\nimport { computed } from 'vue'\nimport SliderThumbImpl from './SliderThumbImpl.vue'\n\nconst props = withDefaults(defineProps<SliderThumbProps>(), {\n  as: 'span',\n})\nconst { getItems } = useCollection()\n\nconst { forwardRef, currentElement: thumbElement } = useForwardExpose()\n\nconst index = computed(() => thumbElement.value ? getItems(true).findIndex(i => i.ref === thumbElement.value) : -1)\n</script>\n\n<template>\n  <SliderThumbImpl\n    :ref=\"forwardRef\"\n    v-bind=\"props\"\n    :index=\"index\"\n  >\n    <slot />\n  </SliderThumbImpl>\n</template>\n"],"names":["useCollection","useForwardExpose","computed"],"mappings":";;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIA,mCAAc,EAAA;AAEnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiBC,wCAAiB,EAAA;AAEtE,IAAA,MAAM,KAAQ,GAAAC,YAAA,CAAS,MAAM,YAAA,CAAa,QAAQ,QAAS,CAAA,IAAI,CAAE,CAAA,SAAA,CAAU,OAAK,CAAE,CAAA,GAAA,KAAQ,YAAa,CAAA,KAAK,IAAI,EAAE,CAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"SliderThumb.cjs","sources":["../../src/Slider/SliderThumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SliderThumbProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useCollection } from '@/Collection'\nimport SliderThumbImpl from './SliderThumbImpl.vue'\n\nconst props = withDefaults(defineProps<SliderThumbProps>(), {\n  as: 'span',\n})\nconst { getItems } = useCollection()\n\nconst { forwardRef, currentElement: thumbElement } = useForwardExpose()\n\nconst index = computed(() => thumbElement.value ? getItems(true).findIndex(i => i.ref === thumbElement.value) : -1)\n</script>\n\n<template>\n  <SliderThumbImpl\n    :ref=\"forwardRef\"\n    v-bind=\"props\"\n    :index=\"index\"\n  >\n    <slot />\n  </SliderThumbImpl>\n</template>\n"],"names":["useCollection","useForwardExpose","computed"],"mappings":";;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIA,mCAAc,EAAA;AAEnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiBC,wCAAiB,EAAA;AAEtE,IAAA,MAAM,KAAQ,GAAAC,YAAA,CAAS,MAAM,YAAA,CAAa,QAAQ,QAAS,CAAA,IAAI,CAAE,CAAA,SAAA,CAAU,OAAK,CAAE,CAAA,GAAA,KAAQ,YAAa,CAAA,KAAK,IAAI,EAAE,CAAA;;;;;;;;;;;;;;"}

package/dist/Slider/SliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumb.js","sources":["../../src/Slider/SliderThumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SliderThumbProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { useCollection } from '@/Collection'\nimport { computed } from 'vue'\nimport SliderThumbImpl from './SliderThumbImpl.vue'\n\nconst props = withDefaults(defineProps<SliderThumbProps>(), {\n  as: 'span',\n})\nconst { getItems } = useCollection()\n\nconst { forwardRef, currentElement: thumbElement } = useForwardExpose()\n\nconst index = computed(() => thumbElement.value ? getItems(true).findIndex(i => i.ref === thumbElement.value) : -1)\n</script>\n\n<template>\n  <SliderThumbImpl\n    :ref=\"forwardRef\"\n    v-bind=\"props\"\n    :index=\"index\"\n  >\n    <slot />\n  </SliderThumbImpl>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,aAAc,EAAA;AAEnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiB,gBAAiB,EAAA;AAEtE,IAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,MAAM,YAAA,CAAa,QAAQ,QAAS,CAAA,IAAI,CAAE,CAAA,SAAA,CAAU,OAAK,CAAE,CAAA,GAAA,KAAQ,YAAa,CAAA,KAAK,IAAI,EAAE,CAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"SliderThumb.js","sources":["../../src/Slider/SliderThumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SliderThumbProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useCollection } from '@/Collection'\nimport SliderThumbImpl from './SliderThumbImpl.vue'\n\nconst props = withDefaults(defineProps<SliderThumbProps>(), {\n  as: 'span',\n})\nconst { getItems } = useCollection()\n\nconst { forwardRef, currentElement: thumbElement } = useForwardExpose()\n\nconst index = computed(() => thumbElement.value ? getItems(true).findIndex(i => i.ref === thumbElement.value) : -1)\n</script>\n\n<template>\n  <SliderThumbImpl\n    :ref=\"forwardRef\"\n    v-bind=\"props\"\n    :index=\"index\"\n  >\n    <slot />\n  </SliderThumbImpl>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,aAAc,EAAA;AAEnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiB,gBAAiB,EAAA;AAEtE,IAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,MAAM,YAAA,CAAa,QAAQ,QAAS,CAAA,IAAI,CAAE,CAAA,SAAA,CAAU,OAAK,CAAE,CAAA,GAAA,KAAQ,YAAa,CAAA,KAAK,IAAI,EAAE,CAAA;;;;;;;;;;;;;;"}

package/dist/Slider/SliderThumbImpl.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 const vue = require('vue');
-const Collection_Collection = require('../Collection/Collection.cjs');
 const core = require('@vueuse/core');
+const Collection_Collection = require('../Collection/Collection.cjs');
 const Slider_utils = require('./utils.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const shared_useSize = require('../shared/useSize.cjs');
@@ -34,7 +34,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       if (rootContext.thumbAlignment.value === "overflow" || !orientationSize.value) {
         return 0;
       } else {
-        return Slider_utils.getThumbInBoundsOffset(orientationSize.value, percent.value, orientation.direction);
+        return Slider_utils.getThumbInBoundsOffset(orientationSize.value, percent.value, orientation.direction.value);
       }
     });
     const isMounted = core.useMounted();
@@ -64,7 +64,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             style: {
               transform: "var(--reka-slider-thumb-transform)",
               position: "absolute",
-              [vue.unref(orientation).startEdge]: `calc(${percent.value}% + ${thumbInBoundsOffset.value}px)`,
+              [vue.unref(orientation).startEdge.value]: `calc(${percent.value}% + ${thumbInBoundsOffset.value}px)`,
               /**
                * There will be no value on initial render while we work out the index so we hide thumbs
                * without a value, otherwise SSR will render them in the wrong position before they

package/dist/Slider/SliderThumbImpl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumbImpl.cjs","sources":["../../src/Slider/SliderThumbImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface SliderThumbImplProps extends PrimitiveProps {\n  index: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useCollection } from '@/Collection'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose, useSize } from '@/shared'\nimport { useMounted } from '@vueuse/core'\nimport { computed, onMounted, onUnmounted } from 'vue'\nimport { injectSliderRootContext } from './SliderRoot.vue'\nimport { convertValueToPercentage, getLabel, getThumbInBoundsOffset, injectSliderOrientationContext } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SliderThumbImplProps>()\n\nconst rootContext = injectSliderRootContext()\nconst orientation = injectSliderOrientationContext()\n\nconst { forwardRef, currentElement: thumbElement } = useForwardExpose()\nconst { CollectionItem } = useCollection()\n\nconst value = computed(() => rootContext.modelValue?.value?.[props.index])\nconst percent = computed(() => value.value === undefined ? 0 : convertValueToPercentage(value.value, rootContext.min.value ?? 0, rootContext.max.value ?? 100))\nconst label = computed(() => getLabel(props.index, rootContext.modelValue?.value?.length ?? 0))\nconst size = useSize(thumbElement)\nconst orientationSize = computed(() => size[orientation!.size].value)\nconst thumbInBoundsOffset = computed(() => {\n  if (rootContext.thumbAlignment.value === 'overflow' || !orientationSize.value) {\n    return 0\n  }\n  else {\n    return getThumbInBoundsOffset(orientationSize.value, percent.value, orientation!.direction)\n  }\n})\n\nconst isMounted = useMounted()\nonMounted(() => {\n  rootContext.thumbElements.value.push(thumbElement.value)\n})\nonUnmounted(() => {\n  const i = rootContext.thumbElements.value.findIndex(i => i === thumbElement.value) ?? -1\n  rootContext.thumbElements.value.splice(i, 1)\n})\n</script>\n\n<template>\n  <CollectionItem>\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      role=\"slider\"\n      :tabindex=\"rootContext.disabled.value ? undefined : 0\"\n      :aria-label=\"$attrs['aria-label'] || label\"\n      :data-disabled=\"rootContext.disabled.value ? '' : undefined\"\n      :data-orientation=\"rootContext.orientation.value\"\n      :aria-valuenow=\"value\"\n      :aria-valuemin=\"rootContext.min.value\"\n      :aria-valuemax=\"rootContext.max.value\"\n      :aria-orientation=\"rootContext.orientation.value\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      :style=\"{\n        transform: 'var(--reka-slider-thumb-transform)',\n        position: 'absolute',\n        [orientation!.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`,\n        /**\n         * There will be no value on initial render while we work out the index so we hide thumbs\n         * without a value, otherwise SSR will render them in the wrong position before they\n         * snap into the correct position during hydration which would be visually jarring for\n         * slower connections.\n         */\n        display: !isMounted && value === undefined ? 'none' : undefined,\n      }\"\n      @focus=\"() => {\n        rootContext.valueIndexToChangeRef.value = index\n      }\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n</template>\n"],"names":["injectSliderRootContext","injectSliderOrientationContext","useForwardExpose","useCollection","computed","convertValueToPercentage","getLabel","useSize","getThumbInBoundsOffset","useMounted","onMounted","onUnmounted","i"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAA,MAAM,cAAcC,2CAA+B,EAAA;AAEnD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiBC,wCAAiB,EAAA;AACtE,IAAM,MAAA,EAAE,cAAe,EAAA,GAAIC,mCAAc,EAAA;AAEzC,IAAM,MAAA,KAAA,GAAQC,aAAS,MAAM,WAAA,CAAY,YAAY,KAAQ,GAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AACzE,IAAA,MAAM,UAAUA,YAAS,CAAA,MAAM,MAAM,KAAU,KAAA,MAAA,GAAY,IAAIC,qCAAyB,CAAA,KAAA,CAAM,KAAO,EAAA,WAAA,CAAY,IAAI,KAAS,IAAA,CAAA,EAAG,YAAY,GAAI,CAAA,KAAA,IAAS,GAAG,CAAC,CAAA;AAC9J,IAAM,MAAA,KAAA,GAAQD,YAAS,CAAA,MAAME,qBAAS,CAAA,KAAA,CAAM,KAAO,EAAA,WAAA,CAAY,UAAY,EAAA,KAAA,EAAO,MAAU,IAAA,CAAC,CAAC,CAAA;AAC9F,IAAM,MAAA,IAAA,GAAOC,uBAAQ,YAAY,CAAA;AACjC,IAAA,MAAM,kBAAkBH,YAAS,CAAA,MAAM,KAAK,WAAa,CAAA,IAAI,EAAE,KAAK,CAAA;AACpE,IAAM,MAAA,mBAAA,GAAsBA,aAAS,MAAM;AACzC,MAAA,IAAI,YAAY,cAAe,CAAA,KAAA,KAAU,UAAc,IAAA,CAAC,gBAAgB,KAAO,EAAA;AAC7E,QAAO,OAAA,CAAA;AAAA,OAEJ,MAAA;AACH,QAAA,OAAOI,oCAAuB,eAAgB,CAAA,KAAA,EAAO,OAAQ,CAAA,KAAA,EAAO,YAAa,SAAS,CAAA;AAAA;AAC5F,KACD,CAAA;AAED,IAAA,MAAM,YAAYC,eAAW,EAAA;AAC7B,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,aAAc,CAAA,KAAA,CAAM,IAAK,CAAA,YAAA,CAAa,KAAK,CAAA;AAAA,KACxD,CAAA;AACD,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAM,MAAA,CAAA,GAAI,WAAY,CAAA,aAAA,CAAc,KAAM,CAAA,SAAA,CAAU,CAAAC,EAAKA,KAAAA,EAAAA,KAAM,YAAa,CAAA,KAAK,CAAK,IAAA,EAAA;AACtF,MAAA,WAAA,CAAY,aAAc,CAAA,KAAA,CAAM,MAAO,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,KAC5C,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SliderThumbImpl.cjs","sources":["../../src/Slider/SliderThumbImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface SliderThumbImplProps extends PrimitiveProps {\n  index: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useMounted } from '@vueuse/core'\nimport { computed, onMounted, onUnmounted } from 'vue'\nimport { useCollection } from '@/Collection'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose, useSize } from '@/shared'\nimport { injectSliderRootContext } from './SliderRoot.vue'\nimport { convertValueToPercentage, getLabel, getThumbInBoundsOffset, injectSliderOrientationContext } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SliderThumbImplProps>()\n\nconst rootContext = injectSliderRootContext()\nconst orientation = injectSliderOrientationContext()\n\nconst { forwardRef, currentElement: thumbElement } = useForwardExpose()\nconst { CollectionItem } = useCollection()\n\nconst value = computed(() => rootContext.modelValue?.value?.[props.index])\nconst percent = computed(() => value.value === undefined ? 0 : convertValueToPercentage(value.value, rootContext.min.value ?? 0, rootContext.max.value ?? 100))\nconst label = computed(() => getLabel(props.index, rootContext.modelValue?.value?.length ?? 0))\nconst size = useSize(thumbElement)\nconst orientationSize = computed(() => size[orientation!.size].value)\nconst thumbInBoundsOffset = computed(() => {\n  if (rootContext.thumbAlignment.value === 'overflow' || !orientationSize.value) {\n    return 0\n  }\n  else {\n    return getThumbInBoundsOffset(orientationSize.value, percent.value, orientation!.direction.value)\n  }\n})\n\nconst isMounted = useMounted()\nonMounted(() => {\n  rootContext.thumbElements.value.push(thumbElement.value)\n})\nonUnmounted(() => {\n  const i = rootContext.thumbElements.value.findIndex(i => i === thumbElement.value) ?? -1\n  rootContext.thumbElements.value.splice(i, 1)\n})\n</script>\n\n<template>\n  <CollectionItem>\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      role=\"slider\"\n      :tabindex=\"rootContext.disabled.value ? undefined : 0\"\n      :aria-label=\"$attrs['aria-label'] || label\"\n      :data-disabled=\"rootContext.disabled.value ? '' : undefined\"\n      :data-orientation=\"rootContext.orientation.value\"\n      :aria-valuenow=\"value\"\n      :aria-valuemin=\"rootContext.min.value\"\n      :aria-valuemax=\"rootContext.max.value\"\n      :aria-orientation=\"rootContext.orientation.value\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      :style=\"{\n        transform: 'var(--reka-slider-thumb-transform)',\n        position: 'absolute',\n        [orientation!.startEdge.value]: `calc(${percent}% + ${thumbInBoundsOffset}px)`,\n        /**\n         * There will be no value on initial render while we work out the index so we hide thumbs\n         * without a value, otherwise SSR will render them in the wrong position before they\n         * snap into the correct position during hydration which would be visually jarring for\n         * slower connections.\n         */\n        display: !isMounted && value === undefined ? 'none' : undefined,\n      }\"\n      @focus=\"() => {\n        rootContext.valueIndexToChangeRef.value = index\n      }\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n</template>\n"],"names":["injectSliderRootContext","injectSliderOrientationContext","useForwardExpose","useCollection","computed","convertValueToPercentage","getLabel","useSize","getThumbInBoundsOffset","useMounted","onMounted","onUnmounted","i"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAA,MAAM,cAAcC,2CAA+B,EAAA;AAEnD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiBC,wCAAiB,EAAA;AACtE,IAAM,MAAA,EAAE,cAAe,EAAA,GAAIC,mCAAc,EAAA;AAEzC,IAAM,MAAA,KAAA,GAAQC,aAAS,MAAM,WAAA,CAAY,YAAY,KAAQ,GAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AACzE,IAAA,MAAM,UAAUA,YAAS,CAAA,MAAM,MAAM,KAAU,KAAA,MAAA,GAAY,IAAIC,qCAAyB,CAAA,KAAA,CAAM,KAAO,EAAA,WAAA,CAAY,IAAI,KAAS,IAAA,CAAA,EAAG,YAAY,GAAI,CAAA,KAAA,IAAS,GAAG,CAAC,CAAA;AAC9J,IAAM,MAAA,KAAA,GAAQD,YAAS,CAAA,MAAME,qBAAS,CAAA,KAAA,CAAM,KAAO,EAAA,WAAA,CAAY,UAAY,EAAA,KAAA,EAAO,MAAU,IAAA,CAAC,CAAC,CAAA;AAC9F,IAAM,MAAA,IAAA,GAAOC,uBAAQ,YAAY,CAAA;AACjC,IAAA,MAAM,kBAAkBH,YAAS,CAAA,MAAM,KAAK,WAAa,CAAA,IAAI,EAAE,KAAK,CAAA;AACpE,IAAM,MAAA,mBAAA,GAAsBA,aAAS,MAAM;AACzC,MAAA,IAAI,YAAY,cAAe,CAAA,KAAA,KAAU,UAAc,IAAA,CAAC,gBAAgB,KAAO,EAAA;AAC7E,QAAO,OAAA,CAAA;AAAA,OAEJ,MAAA;AACH,QAAA,OAAOI,oCAAuB,eAAgB,CAAA,KAAA,EAAO,QAAQ,KAAO,EAAA,WAAA,CAAa,UAAU,KAAK,CAAA;AAAA;AAClG,KACD,CAAA;AAED,IAAA,MAAM,YAAYC,eAAW,EAAA;AAC7B,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,aAAc,CAAA,KAAA,CAAM,IAAK,CAAA,YAAA,CAAa,KAAK,CAAA;AAAA,KACxD,CAAA;AACD,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAM,MAAA,CAAA,GAAI,WAAY,CAAA,aAAA,CAAc,KAAM,CAAA,SAAA,CAAU,CAAAC,EAAKA,KAAAA,EAAAA,KAAM,YAAa,CAAA,KAAK,CAAK,IAAA,EAAA;AACtF,MAAA,WAAA,CAAY,aAAc,CAAA,KAAA,CAAM,MAAO,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,KAC5C,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Slider/SliderThumbImpl.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed, onMounted, onUnmounted, createBlock, openBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from 'vue';
-import { u as useCollection } from '../Collection/Collection.js';
 import { useMounted } from '@vueuse/core';
+import { u as useCollection } from '../Collection/Collection.js';
 import { i as injectSliderOrientationContext, c as convertValueToPercentage, d as getLabel, e as getThumbInBoundsOffset } from './utils.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { u as useSize } from '../shared/useSize.js';
@@ -32,7 +32,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (rootContext.thumbAlignment.value === "overflow" || !orientationSize.value) {
         return 0;
       } else {
-        return getThumbInBoundsOffset(orientationSize.value, percent.value, orientation.direction);
+        return getThumbInBoundsOffset(orientationSize.value, percent.value, orientation.direction.value);
       }
     });
     const isMounted = useMounted();
@@ -62,7 +62,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             style: {
               transform: "var(--reka-slider-thumb-transform)",
               position: "absolute",
-              [unref(orientation).startEdge]: `calc(${percent.value}% + ${thumbInBoundsOffset.value}px)`,
+              [unref(orientation).startEdge.value]: `calc(${percent.value}% + ${thumbInBoundsOffset.value}px)`,
               /**
                * There will be no value on initial render while we work out the index so we hide thumbs
                * without a value, otherwise SSR will render them in the wrong position before they

package/dist/Slider/SliderThumbImpl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumbImpl.js","sources":["../../src/Slider/SliderThumbImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface SliderThumbImplProps extends PrimitiveProps {\n  index: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useCollection } from '@/Collection'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose, useSize } from '@/shared'\nimport { useMounted } from '@vueuse/core'\nimport { computed, onMounted, onUnmounted } from 'vue'\nimport { injectSliderRootContext } from './SliderRoot.vue'\nimport { convertValueToPercentage, getLabel, getThumbInBoundsOffset, injectSliderOrientationContext } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SliderThumbImplProps>()\n\nconst rootContext = injectSliderRootContext()\nconst orientation = injectSliderOrientationContext()\n\nconst { forwardRef, currentElement: thumbElement } = useForwardExpose()\nconst { CollectionItem } = useCollection()\n\nconst value = computed(() => rootContext.modelValue?.value?.[props.index])\nconst percent = computed(() => value.value === undefined ? 0 : convertValueToPercentage(value.value, rootContext.min.value ?? 0, rootContext.max.value ?? 100))\nconst label = computed(() => getLabel(props.index, rootContext.modelValue?.value?.length ?? 0))\nconst size = useSize(thumbElement)\nconst orientationSize = computed(() => size[orientation!.size].value)\nconst thumbInBoundsOffset = computed(() => {\n  if (rootContext.thumbAlignment.value === 'overflow' || !orientationSize.value) {\n    return 0\n  }\n  else {\n    return getThumbInBoundsOffset(orientationSize.value, percent.value, orientation!.direction)\n  }\n})\n\nconst isMounted = useMounted()\nonMounted(() => {\n  rootContext.thumbElements.value.push(thumbElement.value)\n})\nonUnmounted(() => {\n  const i = rootContext.thumbElements.value.findIndex(i => i === thumbElement.value) ?? -1\n  rootContext.thumbElements.value.splice(i, 1)\n})\n</script>\n\n<template>\n  <CollectionItem>\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      role=\"slider\"\n      :tabindex=\"rootContext.disabled.value ? undefined : 0\"\n      :aria-label=\"$attrs['aria-label'] || label\"\n      :data-disabled=\"rootContext.disabled.value ? '' : undefined\"\n      :data-orientation=\"rootContext.orientation.value\"\n      :aria-valuenow=\"value\"\n      :aria-valuemin=\"rootContext.min.value\"\n      :aria-valuemax=\"rootContext.max.value\"\n      :aria-orientation=\"rootContext.orientation.value\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      :style=\"{\n        transform: 'var(--reka-slider-thumb-transform)',\n        position: 'absolute',\n        [orientation!.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`,\n        /**\n         * There will be no value on initial render while we work out the index so we hide thumbs\n         * without a value, otherwise SSR will render them in the wrong position before they\n         * snap into the correct position during hydration which would be visually jarring for\n         * slower connections.\n         */\n        display: !isMounted && value === undefined ? 'none' : undefined,\n      }\"\n      @focus=\"() => {\n        rootContext.valueIndexToChangeRef.value = index\n      }\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n</template>\n"],"names":["i"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,cAAc,8BAA+B,EAAA;AAEnD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiB,gBAAiB,EAAA;AACtE,IAAM,MAAA,EAAE,cAAe,EAAA,GAAI,aAAc,EAAA;AAEzC,IAAM,MAAA,KAAA,GAAQ,SAAS,MAAM,WAAA,CAAY,YAAY,KAAQ,GAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AACzE,IAAA,MAAM,UAAU,QAAS,CAAA,MAAM,MAAM,KAAU,KAAA,MAAA,GAAY,IAAI,wBAAyB,CAAA,KAAA,CAAM,KAAO,EAAA,WAAA,CAAY,IAAI,KAAS,IAAA,CAAA,EAAG,YAAY,GAAI,CAAA,KAAA,IAAS,GAAG,CAAC,CAAA;AAC9J,IAAM,MAAA,KAAA,GAAQ,QAAS,CAAA,MAAM,QAAS,CAAA,KAAA,CAAM,KAAO,EAAA,WAAA,CAAY,UAAY,EAAA,KAAA,EAAO,MAAU,IAAA,CAAC,CAAC,CAAA;AAC9F,IAAM,MAAA,IAAA,GAAO,QAAQ,YAAY,CAAA;AACjC,IAAA,MAAM,kBAAkB,QAAS,CAAA,MAAM,KAAK,WAAa,CAAA,IAAI,EAAE,KAAK,CAAA;AACpE,IAAM,MAAA,mBAAA,GAAsB,SAAS,MAAM;AACzC,MAAA,IAAI,YAAY,cAAe,CAAA,KAAA,KAAU,UAAc,IAAA,CAAC,gBAAgB,KAAO,EAAA;AAC7E,QAAO,OAAA,CAAA;AAAA,OAEJ,MAAA;AACH,QAAA,OAAO,uBAAuB,eAAgB,CAAA,KAAA,EAAO,OAAQ,CAAA,KAAA,EAAO,YAAa,SAAS,CAAA;AAAA;AAC5F,KACD,CAAA;AAED,IAAA,MAAM,YAAY,UAAW,EAAA;AAC7B,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,aAAc,CAAA,KAAA,CAAM,IAAK,CAAA,YAAA,CAAa,KAAK,CAAA;AAAA,KACxD,CAAA;AACD,IAAA,WAAA,CAAY,MAAM;AAChB,MAAM,MAAA,CAAA,GAAI,WAAY,CAAA,aAAA,CAAc,KAAM,CAAA,SAAA,CAAU,CAAAA,EAAKA,KAAAA,EAAAA,KAAM,YAAa,CAAA,KAAK,CAAK,IAAA,EAAA;AACtF,MAAA,WAAA,CAAY,aAAc,CAAA,KAAA,CAAM,MAAO,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,KAC5C,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SliderThumbImpl.js","sources":["../../src/Slider/SliderThumbImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface SliderThumbImplProps extends PrimitiveProps {\n  index: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useMounted } from '@vueuse/core'\nimport { computed, onMounted, onUnmounted } from 'vue'\nimport { useCollection } from '@/Collection'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose, useSize } from '@/shared'\nimport { injectSliderRootContext } from './SliderRoot.vue'\nimport { convertValueToPercentage, getLabel, getThumbInBoundsOffset, injectSliderOrientationContext } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SliderThumbImplProps>()\n\nconst rootContext = injectSliderRootContext()\nconst orientation = injectSliderOrientationContext()\n\nconst { forwardRef, currentElement: thumbElement } = useForwardExpose()\nconst { CollectionItem } = useCollection()\n\nconst value = computed(() => rootContext.modelValue?.value?.[props.index])\nconst percent = computed(() => value.value === undefined ? 0 : convertValueToPercentage(value.value, rootContext.min.value ?? 0, rootContext.max.value ?? 100))\nconst label = computed(() => getLabel(props.index, rootContext.modelValue?.value?.length ?? 0))\nconst size = useSize(thumbElement)\nconst orientationSize = computed(() => size[orientation!.size].value)\nconst thumbInBoundsOffset = computed(() => {\n  if (rootContext.thumbAlignment.value === 'overflow' || !orientationSize.value) {\n    return 0\n  }\n  else {\n    return getThumbInBoundsOffset(orientationSize.value, percent.value, orientation!.direction.value)\n  }\n})\n\nconst isMounted = useMounted()\nonMounted(() => {\n  rootContext.thumbElements.value.push(thumbElement.value)\n})\nonUnmounted(() => {\n  const i = rootContext.thumbElements.value.findIndex(i => i === thumbElement.value) ?? -1\n  rootContext.thumbElements.value.splice(i, 1)\n})\n</script>\n\n<template>\n  <CollectionItem>\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      role=\"slider\"\n      :tabindex=\"rootContext.disabled.value ? undefined : 0\"\n      :aria-label=\"$attrs['aria-label'] || label\"\n      :data-disabled=\"rootContext.disabled.value ? '' : undefined\"\n      :data-orientation=\"rootContext.orientation.value\"\n      :aria-valuenow=\"value\"\n      :aria-valuemin=\"rootContext.min.value\"\n      :aria-valuemax=\"rootContext.max.value\"\n      :aria-orientation=\"rootContext.orientation.value\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      :style=\"{\n        transform: 'var(--reka-slider-thumb-transform)',\n        position: 'absolute',\n        [orientation!.startEdge.value]: `calc(${percent}% + ${thumbInBoundsOffset}px)`,\n        /**\n         * There will be no value on initial render while we work out the index so we hide thumbs\n         * without a value, otherwise SSR will render them in the wrong position before they\n         * snap into the correct position during hydration which would be visually jarring for\n         * slower connections.\n         */\n        display: !isMounted && value === undefined ? 'none' : undefined,\n      }\"\n      @focus=\"() => {\n        rootContext.valueIndexToChangeRef.value = index\n      }\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n</template>\n"],"names":["i"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,cAAc,8BAA+B,EAAA;AAEnD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiB,gBAAiB,EAAA;AACtE,IAAM,MAAA,EAAE,cAAe,EAAA,GAAI,aAAc,EAAA;AAEzC,IAAM,MAAA,KAAA,GAAQ,SAAS,MAAM,WAAA,CAAY,YAAY,KAAQ,GAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AACzE,IAAA,MAAM,UAAU,QAAS,CAAA,MAAM,MAAM,KAAU,KAAA,MAAA,GAAY,IAAI,wBAAyB,CAAA,KAAA,CAAM,KAAO,EAAA,WAAA,CAAY,IAAI,KAAS,IAAA,CAAA,EAAG,YAAY,GAAI,CAAA,KAAA,IAAS,GAAG,CAAC,CAAA;AAC9J,IAAM,MAAA,KAAA,GAAQ,QAAS,CAAA,MAAM,QAAS,CAAA,KAAA,CAAM,KAAO,EAAA,WAAA,CAAY,UAAY,EAAA,KAAA,EAAO,MAAU,IAAA,CAAC,CAAC,CAAA;AAC9F,IAAM,MAAA,IAAA,GAAO,QAAQ,YAAY,CAAA;AACjC,IAAA,MAAM,kBAAkB,QAAS,CAAA,MAAM,KAAK,WAAa,CAAA,IAAI,EAAE,KAAK,CAAA;AACpE,IAAM,MAAA,mBAAA,GAAsB,SAAS,MAAM;AACzC,MAAA,IAAI,YAAY,cAAe,CAAA,KAAA,KAAU,UAAc,IAAA,CAAC,gBAAgB,KAAO,EAAA;AAC7E,QAAO,OAAA,CAAA;AAAA,OAEJ,MAAA;AACH,QAAA,OAAO,uBAAuB,eAAgB,CAAA,KAAA,EAAO,QAAQ,KAAO,EAAA,WAAA,CAAa,UAAU,KAAK,CAAA;AAAA;AAClG,KACD,CAAA;AAED,IAAA,MAAM,YAAY,UAAW,EAAA;AAC7B,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,aAAc,CAAA,KAAA,CAAM,IAAK,CAAA,YAAA,CAAa,KAAK,CAAA;AAAA,KACxD,CAAA;AACD,IAAA,WAAA,CAAY,MAAM;AAChB,MAAM,MAAA,CAAA,GAAI,WAAY,CAAA,aAAA,CAAc,KAAM,CAAA,SAAA,CAAU,CAAAA,EAAKA,KAAAA,EAAAA,KAAM,YAAa,CAAA,KAAK,CAAK,IAAA,EAAA;AACtF,MAAA,WAAA,CAAY,aAAc,CAAA,KAAA,CAAM,MAAO,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,KAC5C,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Slider/SliderVertical.cjs

@@ -37,11 +37,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       rectRef.value = rect;
       return value(position);
     }
+    const startEdge = vue.computed(() => isSlidingFromBottom.value ? "bottom" : "top");
+    const endEdge = vue.computed(() => isSlidingFromBottom.value ? "top" : "bottom");
+    const direction = vue.computed(() => isSlidingFromBottom.value ? 1 : -1);
     Slider_utils.provideSliderOrientationContext({
-      startEdge: isSlidingFromBottom.value ? "bottom" : "top",
-      endEdge: isSlidingFromBottom.value ? "top" : "bottom",
-      size: "height",
-      direction: isSlidingFromBottom.value ? 1 : -1
+      startEdge,
+      endEdge,
+      direction,
+      size: "height"
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(Slider_SliderImpl._sfc_main, {

package/dist/Slider/SliderVertical.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliderVertical.cjs","sources":["../../src/Slider/SliderVertical.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SliderOrientationPrivateEmits, SliderOrientationPrivateProps } from './utils'\nimport { useForwardExpose } from '@/shared'\nimport { computed, ref, toRefs } from 'vue'\nimport SliderImpl from './SliderImpl.vue'\nimport { injectSliderRootContext } from './SliderRoot.vue'\nimport { BACK_KEYS, linearScale, provideSliderOrientationContext } from './utils'\n\ninterface SliderVerticalProps extends SliderOrientationPrivateProps {}\nconst props = defineProps<SliderVerticalProps>()\nconst emits = defineEmits<SliderOrientationPrivateEmits>()\nconst { max, min, inverted } = toRefs(props)\n\nconst rootContext = injectSliderRootContext()\nconst { forwardRef, currentElement: sliderElement } = useForwardExpose()\n\nconst offsetPosition = ref<number>()\nconst rectRef = ref<ClientRect>()\nconst isSlidingFromBottom = computed(() => !inverted.value)\n\nfunction getValueFromPointerEvent(event: PointerEvent, slideStart?: boolean) {\n  const rect = rectRef.value || sliderElement.value!.getBoundingClientRect()\n\n  // Get the currently active thumb element\n  const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value]\n  const thumbHeight = rootContext.thumbAlignment.value === 'contain' ? thumb.clientHeight : 0\n\n  // Calculate offset for dragging, but only when needed\n  if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === 'contain') {\n    offsetPosition.value = event.clientY - thumb.getBoundingClientRect().top\n  }\n\n  // Define the input range (slider track width minus thumb width)\n  const input: [number, number] = [0, rect.height - thumbHeight]\n  const output: [number, number] = isSlidingFromBottom.value ? [max.value, min.value] : [min.value, max.value]\n  const value = linearScale(input, output)\n\n  const position = slideStart\n    ? event.clientY - rect.top - thumbHeight / 2\n    : event.clientY - rect.top - (offsetPosition.value ?? 0)\n\n  rectRef.value = rect\n  return value(position)\n}\n\nprovideSliderOrientationContext({\n  startEdge: isSlidingFromBottom.value ? 'bottom' : 'top',\n  endEdge: isSlidingFromBottom.value ? 'top' : 'bottom',\n  size: 'height',\n  direction: isSlidingFromBottom.value ? 1 : -1,\n})\n</script>\n\n<template>\n  <SliderImpl\n    :ref=\"forwardRef\"\n    data-orientation=\"vertical\"\n    :style=\"{\n      ['--reka-slider-thumb-transform' as any]:\n        !isSlidingFromBottom && rootContext.thumbAlignment.value === 'overflow' ? 'translateY(-50%)' : 'translateY(50%)',\n    }\"\n    @slide-start=\"(event) => {\n      const value = getValueFromPointerEvent(event, true);\n      emits('slideStart', value)\n    }\"\n    @slide-move=\"(event) => {\n      const value = getValueFromPointerEvent(event);\n      emits('slideMove', value)\n    }\"\n    @slide-end=\"() => {\n      rectRef = undefined;\n      offsetPosition = undefined\n      emits('slideEnd')\n    }\"\n    @step-key-down=\"(event) => {\n      const slideDirection = isSlidingFromBottom ? 'from-bottom' : 'from-top';\n      const isBackKey = BACK_KEYS[slideDirection].includes(event.key);\n      emits('stepKeyDown', event, isBackKey ? -1 : 1)\n    }\"\n    @end-key-down=\"emits('endKeyDown', $event)\"\n    @home-key-down=\"emits('homeKeyDown', $event)\"\n  >\n    <slot />\n  </SliderImpl>\n</template>\n"],"names":["toRefs","injectSliderRootContext","useForwardExpose","ref","computed","linearScale","provideSliderOrientationContext"],"mappings":";;;;;;;;;;;;;;;;;AASA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAA,MAAM,EAAE,GAAK,EAAA,GAAA,EAAK,QAAS,EAAA,GAAIA,WAAO,KAAK,CAAA;AAE3C,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,aAAA,KAAkBC,wCAAiB,EAAA;AAEvE,IAAA,MAAM,iBAAiBC,OAAY,EAAA;AACnC,IAAA,MAAM,UAAUA,OAAgB,EAAA;AAChC,IAAA,MAAM,mBAAsB,GAAAC,YAAA,CAAS,MAAM,CAAC,SAAS,KAAK,CAAA;AAE1D,IAAS,SAAA,wBAAA,CAAyB,OAAqB,UAAsB,EAAA;AAC3E,MAAA,MAAM,IAAO,GAAA,OAAA,CAAQ,KAAS,IAAA,aAAA,CAAc,MAAO,qBAAsB,EAAA;AAGzE,MAAM,MAAA,KAAA,GAAQ,CAAC,GAAG,WAAA,CAAY,cAAc,KAAK,CAAA,CAAE,WAAY,CAAA,qBAAA,CAAsB,KAAK,CAAA;AAC1F,MAAA,MAAM,cAAc,WAAY,CAAA,cAAA,CAAe,KAAU,KAAA,SAAA,GAAY,MAAM,YAAe,GAAA,CAAA;AAG1F,MAAI,IAAA,CAAC,eAAe,KAAS,IAAA,CAAC,cAAc,WAAY,CAAA,cAAA,CAAe,UAAU,SAAW,EAAA;AAC1F,QAAA,cAAA,CAAe,KAAQ,GAAA,KAAA,CAAM,OAAU,GAAA,KAAA,CAAM,uBAAwB,CAAA,GAAA;AAAA;AAIvE,MAAA,MAAM,KAA0B,GAAA,CAAC,CAAG,EAAA,IAAA,CAAK,SAAS,WAAW,CAAA;AAC7D,MAAA,MAAM,MAA2B,GAAA,mBAAA,CAAoB,KAAQ,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,GAAI,CAAA,KAAK,CAAI,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,IAAI,KAAK,CAAA;AAC3G,MAAM,MAAA,KAAA,GAAQC,wBAAY,CAAA,KAAA,EAAO,MAAM,CAAA;AAEvC,MAAA,MAAM,QAAW,GAAA,UAAA,GACb,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,GAAA,GAAM,WAAc,GAAA,CAAA,GACzC,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,GAAA,IAAO,eAAe,KAAS,IAAA,CAAA,CAAA;AAExD,MAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA;AAChB,MAAA,OAAO,MAAM,QAAQ,CAAA;AAAA;AAGvB,IAAgCC,4CAAA,CAAA;AAAA,MAC9B,SAAA,EAAW,mBAAoB,CAAA,KAAA,GAAQ,QAAW,GAAA,KAAA;AAAA,MAClD,OAAA,EAAS,mBAAoB,CAAA,KAAA,GAAQ,KAAQ,GAAA,QAAA;AAAA,MAC7C,IAAM,EAAA,QAAA;AAAA,MACN,SAAA,EAAW,mBAAoB,CAAA,KAAA,GAAQ,CAAI,GAAA;AAAA,KAC5C,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SliderVertical.cjs","sources":["../../src/Slider/SliderVertical.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SliderOrientationPrivateEmits, SliderOrientationPrivateProps } from './utils'\nimport { computed, ref, toRefs } from 'vue'\nimport { useForwardExpose } from '@/shared'\nimport SliderImpl from './SliderImpl.vue'\nimport { injectSliderRootContext } from './SliderRoot.vue'\nimport { BACK_KEYS, linearScale, provideSliderOrientationContext } from './utils'\n\ninterface SliderVerticalProps extends SliderOrientationPrivateProps {}\nconst props = defineProps<SliderVerticalProps>()\nconst emits = defineEmits<SliderOrientationPrivateEmits>()\nconst { max, min, inverted } = toRefs(props)\n\nconst rootContext = injectSliderRootContext()\nconst { forwardRef, currentElement: sliderElement } = useForwardExpose()\n\nconst offsetPosition = ref<number>()\nconst rectRef = ref<DOMRect>()\nconst isSlidingFromBottom = computed(() => !inverted.value)\n\nfunction getValueFromPointerEvent(event: PointerEvent, slideStart?: boolean) {\n  const rect = rectRef.value || sliderElement.value!.getBoundingClientRect()\n\n  // Get the currently active thumb element\n  const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value]\n  const thumbHeight = rootContext.thumbAlignment.value === 'contain' ? thumb.clientHeight : 0\n\n  // Calculate offset for dragging, but only when needed\n  if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === 'contain') {\n    offsetPosition.value = event.clientY - thumb.getBoundingClientRect().top\n  }\n\n  // Define the input range (slider track width minus thumb width)\n  const input: [number, number] = [0, rect.height - thumbHeight]\n  const output: [number, number] = isSlidingFromBottom.value ? [max.value, min.value] : [min.value, max.value]\n  const value = linearScale(input, output)\n\n  const position = slideStart\n    ? event.clientY - rect.top - thumbHeight / 2\n    : event.clientY - rect.top - (offsetPosition.value ?? 0)\n\n  rectRef.value = rect\n  return value(position)\n}\n\nconst startEdge = computed(() => isSlidingFromBottom.value ? 'bottom' : 'top')\nconst endEdge = computed(() => isSlidingFromBottom.value ? 'top' : 'bottom')\nconst direction = computed(() => isSlidingFromBottom.value ? 1 : -1)\n\nprovideSliderOrientationContext({\n  startEdge,\n  endEdge,\n  direction,\n  size: 'height',\n})\n</script>\n\n<template>\n  <SliderImpl\n    :ref=\"forwardRef\"\n    data-orientation=\"vertical\"\n    :style=\"{\n      ['--reka-slider-thumb-transform' as any]:\n        !isSlidingFromBottom && rootContext.thumbAlignment.value === 'overflow' ? 'translateY(-50%)' : 'translateY(50%)',\n    }\"\n    @slide-start=\"(event) => {\n      const value = getValueFromPointerEvent(event, true);\n      emits('slideStart', value)\n    }\"\n    @slide-move=\"(event) => {\n      const value = getValueFromPointerEvent(event);\n      emits('slideMove', value)\n    }\"\n    @slide-end=\"() => {\n      rectRef = undefined;\n      offsetPosition = undefined\n      emits('slideEnd')\n    }\"\n    @step-key-down=\"(event) => {\n      const slideDirection = isSlidingFromBottom ? 'from-bottom' : 'from-top';\n      const isBackKey = BACK_KEYS[slideDirection].includes(event.key);\n      emits('stepKeyDown', event, isBackKey ? -1 : 1)\n    }\"\n    @end-key-down=\"emits('endKeyDown', $event)\"\n    @home-key-down=\"emits('homeKeyDown', $event)\"\n  >\n    <slot />\n  </SliderImpl>\n</template>\n"],"names":["toRefs","injectSliderRootContext","useForwardExpose","ref","computed","linearScale","provideSliderOrientationContext"],"mappings":";;;;;;;;;;;;;;;;;AASA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAA,MAAM,EAAE,GAAK,EAAA,GAAA,EAAK,QAAS,EAAA,GAAIA,WAAO,KAAK,CAAA;AAE3C,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,aAAA,KAAkBC,wCAAiB,EAAA;AAEvE,IAAA,MAAM,iBAAiBC,OAAY,EAAA;AACnC,IAAA,MAAM,UAAUA,OAAa,EAAA;AAC7B,IAAA,MAAM,mBAAsB,GAAAC,YAAA,CAAS,MAAM,CAAC,SAAS,KAAK,CAAA;AAE1D,IAAS,SAAA,wBAAA,CAAyB,OAAqB,UAAsB,EAAA;AAC3E,MAAA,MAAM,IAAO,GAAA,OAAA,CAAQ,KAAS,IAAA,aAAA,CAAc,MAAO,qBAAsB,EAAA;AAGzE,MAAM,MAAA,KAAA,GAAQ,CAAC,GAAG,WAAA,CAAY,cAAc,KAAK,CAAA,CAAE,WAAY,CAAA,qBAAA,CAAsB,KAAK,CAAA;AAC1F,MAAA,MAAM,cAAc,WAAY,CAAA,cAAA,CAAe,KAAU,KAAA,SAAA,GAAY,MAAM,YAAe,GAAA,CAAA;AAG1F,MAAI,IAAA,CAAC,eAAe,KAAS,IAAA,CAAC,cAAc,WAAY,CAAA,cAAA,CAAe,UAAU,SAAW,EAAA;AAC1F,QAAA,cAAA,CAAe,KAAQ,GAAA,KAAA,CAAM,OAAU,GAAA,KAAA,CAAM,uBAAwB,CAAA,GAAA;AAAA;AAIvE,MAAA,MAAM,KAA0B,GAAA,CAAC,CAAG,EAAA,IAAA,CAAK,SAAS,WAAW,CAAA;AAC7D,MAAA,MAAM,MAA2B,GAAA,mBAAA,CAAoB,KAAQ,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,GAAI,CAAA,KAAK,CAAI,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,IAAI,KAAK,CAAA;AAC3G,MAAM,MAAA,KAAA,GAAQC,wBAAY,CAAA,KAAA,EAAO,MAAM,CAAA;AAEvC,MAAA,MAAM,QAAW,GAAA,UAAA,GACb,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,GAAA,GAAM,WAAc,GAAA,CAAA,GACzC,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,GAAA,IAAO,eAAe,KAAS,IAAA,CAAA,CAAA;AAExD,MAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA;AAChB,MAAA,OAAO,MAAM,QAAQ,CAAA;AAAA;AAGvB,IAAA,MAAM,YAAYD,YAAS,CAAA,MAAM,mBAAoB,CAAA,KAAA,GAAQ,WAAW,KAAK,CAAA;AAC7E,IAAA,MAAM,UAAUA,YAAS,CAAA,MAAM,mBAAoB,CAAA,KAAA,GAAQ,QAAQ,QAAQ,CAAA;AAC3E,IAAA,MAAM,YAAYA,YAAS,CAAA,MAAM,mBAAoB,CAAA,KAAA,GAAQ,IAAI,EAAE,CAAA;AAEnE,IAAgCE,4CAAA,CAAA;AAAA,MAC9B,SAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAM,EAAA;AAAA,KACP,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Slider/SliderVertical.js

@@ -35,11 +35,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       rectRef.value = rect;
       return value(position);
     }
+    const startEdge = computed(() => isSlidingFromBottom.value ? "bottom" : "top");
+    const endEdge = computed(() => isSlidingFromBottom.value ? "top" : "bottom");
+    const direction = computed(() => isSlidingFromBottom.value ? 1 : -1);
     provideSliderOrientationContext({
-      startEdge: isSlidingFromBottom.value ? "bottom" : "top",
-      endEdge: isSlidingFromBottom.value ? "top" : "bottom",
-      size: "height",
-      direction: isSlidingFromBottom.value ? 1 : -1
+      startEdge,
+      endEdge,
+      direction,
+      size: "height"
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$1, {

package/dist/Slider/SliderVertical.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderVertical.js","sources":["../../src/Slider/SliderVertical.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SliderOrientationPrivateEmits, SliderOrientationPrivateProps } from './utils'\nimport { useForwardExpose } from '@/shared'\nimport { computed, ref, toRefs } from 'vue'\nimport SliderImpl from './SliderImpl.vue'\nimport { injectSliderRootContext } from './SliderRoot.vue'\nimport { BACK_KEYS, linearScale, provideSliderOrientationContext } from './utils'\n\ninterface SliderVerticalProps extends SliderOrientationPrivateProps {}\nconst props = defineProps<SliderVerticalProps>()\nconst emits = defineEmits<SliderOrientationPrivateEmits>()\nconst { max, min, inverted } = toRefs(props)\n\nconst rootContext = injectSliderRootContext()\nconst { forwardRef, currentElement: sliderElement } = useForwardExpose()\n\nconst offsetPosition = ref<number>()\nconst rectRef = ref<ClientRect>()\nconst isSlidingFromBottom = computed(() => !inverted.value)\n\nfunction getValueFromPointerEvent(event: PointerEvent, slideStart?: boolean) {\n  const rect = rectRef.value || sliderElement.value!.getBoundingClientRect()\n\n  // Get the currently active thumb element\n  const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value]\n  const thumbHeight = rootContext.thumbAlignment.value === 'contain' ? thumb.clientHeight : 0\n\n  // Calculate offset for dragging, but only when needed\n  if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === 'contain') {\n    offsetPosition.value = event.clientY - thumb.getBoundingClientRect().top\n  }\n\n  // Define the input range (slider track width minus thumb width)\n  const input: [number, number] = [0, rect.height - thumbHeight]\n  const output: [number, number] = isSlidingFromBottom.value ? [max.value, min.value] : [min.value, max.value]\n  const value = linearScale(input, output)\n\n  const position = slideStart\n    ? event.clientY - rect.top - thumbHeight / 2\n    : event.clientY - rect.top - (offsetPosition.value ?? 0)\n\n  rectRef.value = rect\n  return value(position)\n}\n\nprovideSliderOrientationContext({\n  startEdge: isSlidingFromBottom.value ? 'bottom' : 'top',\n  endEdge: isSlidingFromBottom.value ? 'top' : 'bottom',\n  size: 'height',\n  direction: isSlidingFromBottom.value ? 1 : -1,\n})\n</script>\n\n<template>\n  <SliderImpl\n    :ref=\"forwardRef\"\n    data-orientation=\"vertical\"\n    :style=\"{\n      ['--reka-slider-thumb-transform' as any]:\n        !isSlidingFromBottom && rootContext.thumbAlignment.value === 'overflow' ? 'translateY(-50%)' : 'translateY(50%)',\n    }\"\n    @slide-start=\"(event) => {\n      const value = getValueFromPointerEvent(event, true);\n      emits('slideStart', value)\n    }\"\n    @slide-move=\"(event) => {\n      const value = getValueFromPointerEvent(event);\n      emits('slideMove', value)\n    }\"\n    @slide-end=\"() => {\n      rectRef = undefined;\n      offsetPosition = undefined\n      emits('slideEnd')\n    }\"\n    @step-key-down=\"(event) => {\n      const slideDirection = isSlidingFromBottom ? 'from-bottom' : 'from-top';\n      const isBackKey = BACK_KEYS[slideDirection].includes(event.key);\n      emits('stepKeyDown', event, isBackKey ? -1 : 1)\n    }\"\n    @end-key-down=\"emits('endKeyDown', $event)\"\n    @home-key-down=\"emits('homeKeyDown', $event)\"\n  >\n    <slot />\n  </SliderImpl>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AASA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAA,MAAM,EAAE,GAAK,EAAA,GAAA,EAAK,QAAS,EAAA,GAAI,OAAO,KAAK,CAAA;AAE3C,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,aAAA,KAAkB,gBAAiB,EAAA;AAEvE,IAAA,MAAM,iBAAiB,GAAY,EAAA;AACnC,IAAA,MAAM,UAAU,GAAgB,EAAA;AAChC,IAAA,MAAM,mBAAsB,GAAA,QAAA,CAAS,MAAM,CAAC,SAAS,KAAK,CAAA;AAE1D,IAAS,SAAA,wBAAA,CAAyB,OAAqB,UAAsB,EAAA;AAC3E,MAAA,MAAM,IAAO,GAAA,OAAA,CAAQ,KAAS,IAAA,aAAA,CAAc,MAAO,qBAAsB,EAAA;AAGzE,MAAM,MAAA,KAAA,GAAQ,CAAC,GAAG,WAAA,CAAY,cAAc,KAAK,CAAA,CAAE,WAAY,CAAA,qBAAA,CAAsB,KAAK,CAAA;AAC1F,MAAA,MAAM,cAAc,WAAY,CAAA,cAAA,CAAe,KAAU,KAAA,SAAA,GAAY,MAAM,YAAe,GAAA,CAAA;AAG1F,MAAI,IAAA,CAAC,eAAe,KAAS,IAAA,CAAC,cAAc,WAAY,CAAA,cAAA,CAAe,UAAU,SAAW,EAAA;AAC1F,QAAA,cAAA,CAAe,KAAQ,GAAA,KAAA,CAAM,OAAU,GAAA,KAAA,CAAM,uBAAwB,CAAA,GAAA;AAAA;AAIvE,MAAA,MAAM,KAA0B,GAAA,CAAC,CAAG,EAAA,IAAA,CAAK,SAAS,WAAW,CAAA;AAC7D,MAAA,MAAM,MAA2B,GAAA,mBAAA,CAAoB,KAAQ,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,GAAI,CAAA,KAAK,CAAI,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,IAAI,KAAK,CAAA;AAC3G,MAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,KAAA,EAAO,MAAM,CAAA;AAEvC,MAAA,MAAM,QAAW,GAAA,UAAA,GACb,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,GAAA,GAAM,WAAc,GAAA,CAAA,GACzC,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,GAAA,IAAO,eAAe,KAAS,IAAA,CAAA,CAAA;AAExD,MAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA;AAChB,MAAA,OAAO,MAAM,QAAQ,CAAA;AAAA;AAGvB,IAAgC,+BAAA,CAAA;AAAA,MAC9B,SAAA,EAAW,mBAAoB,CAAA,KAAA,GAAQ,QAAW,GAAA,KAAA;AAAA,MAClD,OAAA,EAAS,mBAAoB,CAAA,KAAA,GAAQ,KAAQ,GAAA,QAAA;AAAA,MAC7C,IAAM,EAAA,QAAA;AAAA,MACN,SAAA,EAAW,mBAAoB,CAAA,KAAA,GAAQ,CAAI,GAAA;AAAA,KAC5C,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SliderVertical.js","sources":["../../src/Slider/SliderVertical.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SliderOrientationPrivateEmits, SliderOrientationPrivateProps } from './utils'\nimport { computed, ref, toRefs } from 'vue'\nimport { useForwardExpose } from '@/shared'\nimport SliderImpl from './SliderImpl.vue'\nimport { injectSliderRootContext } from './SliderRoot.vue'\nimport { BACK_KEYS, linearScale, provideSliderOrientationContext } from './utils'\n\ninterface SliderVerticalProps extends SliderOrientationPrivateProps {}\nconst props = defineProps<SliderVerticalProps>()\nconst emits = defineEmits<SliderOrientationPrivateEmits>()\nconst { max, min, inverted } = toRefs(props)\n\nconst rootContext = injectSliderRootContext()\nconst { forwardRef, currentElement: sliderElement } = useForwardExpose()\n\nconst offsetPosition = ref<number>()\nconst rectRef = ref<DOMRect>()\nconst isSlidingFromBottom = computed(() => !inverted.value)\n\nfunction getValueFromPointerEvent(event: PointerEvent, slideStart?: boolean) {\n  const rect = rectRef.value || sliderElement.value!.getBoundingClientRect()\n\n  // Get the currently active thumb element\n  const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value]\n  const thumbHeight = rootContext.thumbAlignment.value === 'contain' ? thumb.clientHeight : 0\n\n  // Calculate offset for dragging, but only when needed\n  if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === 'contain') {\n    offsetPosition.value = event.clientY - thumb.getBoundingClientRect().top\n  }\n\n  // Define the input range (slider track width minus thumb width)\n  const input: [number, number] = [0, rect.height - thumbHeight]\n  const output: [number, number] = isSlidingFromBottom.value ? [max.value, min.value] : [min.value, max.value]\n  const value = linearScale(input, output)\n\n  const position = slideStart\n    ? event.clientY - rect.top - thumbHeight / 2\n    : event.clientY - rect.top - (offsetPosition.value ?? 0)\n\n  rectRef.value = rect\n  return value(position)\n}\n\nconst startEdge = computed(() => isSlidingFromBottom.value ? 'bottom' : 'top')\nconst endEdge = computed(() => isSlidingFromBottom.value ? 'top' : 'bottom')\nconst direction = computed(() => isSlidingFromBottom.value ? 1 : -1)\n\nprovideSliderOrientationContext({\n  startEdge,\n  endEdge,\n  direction,\n  size: 'height',\n})\n</script>\n\n<template>\n  <SliderImpl\n    :ref=\"forwardRef\"\n    data-orientation=\"vertical\"\n    :style=\"{\n      ['--reka-slider-thumb-transform' as any]:\n        !isSlidingFromBottom && rootContext.thumbAlignment.value === 'overflow' ? 'translateY(-50%)' : 'translateY(50%)',\n    }\"\n    @slide-start=\"(event) => {\n      const value = getValueFromPointerEvent(event, true);\n      emits('slideStart', value)\n    }\"\n    @slide-move=\"(event) => {\n      const value = getValueFromPointerEvent(event);\n      emits('slideMove', value)\n    }\"\n    @slide-end=\"() => {\n      rectRef = undefined;\n      offsetPosition = undefined\n      emits('slideEnd')\n    }\"\n    @step-key-down=\"(event) => {\n      const slideDirection = isSlidingFromBottom ? 'from-bottom' : 'from-top';\n      const isBackKey = BACK_KEYS[slideDirection].includes(event.key);\n      emits('stepKeyDown', event, isBackKey ? -1 : 1)\n    }\"\n    @end-key-down=\"emits('endKeyDown', $event)\"\n    @home-key-down=\"emits('homeKeyDown', $event)\"\n  >\n    <slot />\n  </SliderImpl>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AASA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAA,MAAM,EAAE,GAAK,EAAA,GAAA,EAAK,QAAS,EAAA,GAAI,OAAO,KAAK,CAAA;AAE3C,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,aAAA,KAAkB,gBAAiB,EAAA;AAEvE,IAAA,MAAM,iBAAiB,GAAY,EAAA;AACnC,IAAA,MAAM,UAAU,GAAa,EAAA;AAC7B,IAAA,MAAM,mBAAsB,GAAA,QAAA,CAAS,MAAM,CAAC,SAAS,KAAK,CAAA;AAE1D,IAAS,SAAA,wBAAA,CAAyB,OAAqB,UAAsB,EAAA;AAC3E,MAAA,MAAM,IAAO,GAAA,OAAA,CAAQ,KAAS,IAAA,aAAA,CAAc,MAAO,qBAAsB,EAAA;AAGzE,MAAM,MAAA,KAAA,GAAQ,CAAC,GAAG,WAAA,CAAY,cAAc,KAAK,CAAA,CAAE,WAAY,CAAA,qBAAA,CAAsB,KAAK,CAAA;AAC1F,MAAA,MAAM,cAAc,WAAY,CAAA,cAAA,CAAe,KAAU,KAAA,SAAA,GAAY,MAAM,YAAe,GAAA,CAAA;AAG1F,MAAI,IAAA,CAAC,eAAe,KAAS,IAAA,CAAC,cAAc,WAAY,CAAA,cAAA,CAAe,UAAU,SAAW,EAAA;AAC1F,QAAA,cAAA,CAAe,KAAQ,GAAA,KAAA,CAAM,OAAU,GAAA,KAAA,CAAM,uBAAwB,CAAA,GAAA;AAAA;AAIvE,MAAA,MAAM,KAA0B,GAAA,CAAC,CAAG,EAAA,IAAA,CAAK,SAAS,WAAW,CAAA;AAC7D,MAAA,MAAM,MAA2B,GAAA,mBAAA,CAAoB,KAAQ,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,GAAI,CAAA,KAAK,CAAI,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,IAAI,KAAK,CAAA;AAC3G,MAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,KAAA,EAAO,MAAM,CAAA;AAEvC,MAAA,MAAM,QAAW,GAAA,UAAA,GACb,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,GAAA,GAAM,WAAc,GAAA,CAAA,GACzC,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,GAAA,IAAO,eAAe,KAAS,IAAA,CAAA,CAAA;AAExD,MAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA;AAChB,MAAA,OAAO,MAAM,QAAQ,CAAA;AAAA;AAGvB,IAAA,MAAM,YAAY,QAAS,CAAA,MAAM,mBAAoB,CAAA,KAAA,GAAQ,WAAW,KAAK,CAAA;AAC7E,IAAA,MAAM,UAAU,QAAS,CAAA,MAAM,mBAAoB,CAAA,KAAA,GAAQ,QAAQ,QAAQ,CAAA;AAC3E,IAAA,MAAM,YAAY,QAAS,CAAA,MAAM,mBAAoB,CAAA,KAAA,GAAQ,IAAI,EAAE,CAAA;AAEnE,IAAgC,+BAAA,CAAA;AAAA,MAC9B,SAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAM,EAAA;AAAA,KACP,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Slider/utils.cjs

@@ -67,7 +67,7 @@ const BACK_KEYS = {
   "from-left": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
   "from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
   "from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
-  "from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
+  "from-top": ["Home", "PageUp", "ArrowUp", "ArrowLeft"]
 };
 const [injectSliderOrientationContext, provideSliderOrientationContext] = shared_createContext.createContext(["SliderVertical", "SliderHorizontal"]);
 

package/dist/Slider/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../src/Slider/utils.ts"],"sourcesContent":["import { clamp, createContext } from '@/shared'\n\nexport interface SliderOrientationPrivateProps {\n  min: number\n  max: number\n  inverted: boolean\n}\n\nexport type SliderOrientationPrivateEmits = {\n  slideEnd: []\n  slideStart: [value: number]\n  slideMove: [value: number]\n  homeKeyDown: [event: KeyboardEvent]\n  endKeyDown: [event: KeyboardEvent]\n  stepKeyDown: [event: KeyboardEvent, direction: number]\n}\n\nexport function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\n  const nextValues = [...prevValues]\n  nextValues[atIndex] = nextValue\n  return nextValues.sort((a, b) => a - b)\n}\n\nexport function convertValueToPercentage(value: number, min: number, max: number) {\n  const maxSteps = max - min\n  const percentPerStep = 100 / maxSteps\n  const percentage = percentPerStep * (value - min)\n  return clamp(percentage, 0, 100)\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nexport function getLabel(index: number, totalValues: number) {\n  if (totalValues > 2)\n    return `Value ${index + 1} of ${totalValues}`\n\n  else if (totalValues === 2)\n    return ['Minimum', 'Maximum'][index]\n\n  else\n    return undefined\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nexport function getClosestValueIndex(values: number[], nextValue: number) {\n  if (values.length === 1)\n    return 0\n  const distances = values.map(value => Math.abs(value - nextValue))\n  const closestDistance = Math.min(...distances)\n  return distances.indexOf(closestDistance)\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nexport function getThumbInBoundsOffset(width: number, left: number, direction: number) {\n  const halfWidth = width / 2\n  const halfPercent = 50\n  const offset = linearScale([0, halfPercent], [0, halfWidth])\n  return (halfWidth - offset(left) * direction) * direction\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nexport function getStepsBetweenValues(values: number[]) {\n  return values.slice(0, -1).map((value, index) => values[index + 1] - value)\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nexport function hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {\n  if (minStepsBetweenValues > 0) {\n    const stepsBetweenValues = getStepsBetweenValues(values)\n    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues)\n    return actualMinStepsBetweenValues >= minStepsBetweenValues\n  }\n  return true\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nexport function linearScale(input: readonly [number, number], output: readonly [number, number]) {\n  return (value: number) => {\n    if (input[0] === input[1] || output[0] === output[1])\n      return output[0]\n    const ratio = (output[1] - output[0]) / (input[1] - input[0])\n    return output[0] + ratio * (value - input[0])\n  }\n}\n\nexport function getDecimalCount(value: number) {\n  return (String(value).split('.')[1] || '').length\n}\n\nexport function roundValue(value: number, decimalCount: number) {\n  const rounder = 10 ** decimalCount\n  return Math.round(value * rounder) / rounder\n}\n\nexport type Direction = 'ltr' | 'rtl'\n\nexport const PAGE_KEYS = ['PageUp', 'PageDown']\nexport const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n\ntype SlideDirection = 'from-left' | 'from-right' | 'from-bottom' | 'from-top'\nexport const BACK_KEYS: Record<SlideDirection, string[]> = {\n  'from-left': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n  'from-right': ['Home', 'PageDown', 'ArrowDown', 'ArrowRight'],\n  'from-bottom': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n  'from-top': ['Home', 'PageDown', 'ArrowUp', 'ArrowLeft'],\n\n}\n\ntype Side = 'top' | 'right' | 'bottom' | 'left'\ninterface SliderOrientation {\n  startEdge: Side\n  endEdge: Side\n  size: 'width' | 'height'\n  direction: number\n}\n\nexport const [injectSliderOrientationContext, provideSliderOrientationContext]\n  = createContext<SliderOrientation>(['SliderVertical', 'SliderHorizontal'])\n"],"names":["clamp","createContext"],"mappings":"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"}
+{"version":3,"file":"utils.cjs","sources":["../../src/Slider/utils.ts"],"sourcesContent":["import type { ComputedRef } from 'vue'\nimport { clamp, createContext } from '@/shared'\n\nexport interface SliderOrientationPrivateProps {\n  min: number\n  max: number\n  inverted: boolean\n}\n\nexport type SliderOrientationPrivateEmits = {\n  slideEnd: []\n  slideStart: [value: number]\n  slideMove: [value: number]\n  homeKeyDown: [event: KeyboardEvent]\n  endKeyDown: [event: KeyboardEvent]\n  stepKeyDown: [event: KeyboardEvent, direction: number]\n}\n\nexport function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\n  const nextValues = [...prevValues]\n  nextValues[atIndex] = nextValue\n  return nextValues.sort((a, b) => a - b)\n}\n\nexport function convertValueToPercentage(value: number, min: number, max: number) {\n  const maxSteps = max - min\n  const percentPerStep = 100 / maxSteps\n  const percentage = percentPerStep * (value - min)\n  return clamp(percentage, 0, 100)\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nexport function getLabel(index: number, totalValues: number) {\n  if (totalValues > 2)\n    return `Value ${index + 1} of ${totalValues}`\n\n  else if (totalValues === 2)\n    return ['Minimum', 'Maximum'][index]\n\n  else\n    return undefined\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nexport function getClosestValueIndex(values: number[], nextValue: number) {\n  if (values.length === 1)\n    return 0\n  const distances = values.map(value => Math.abs(value - nextValue))\n  const closestDistance = Math.min(...distances)\n  return distances.indexOf(closestDistance)\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nexport function getThumbInBoundsOffset(width: number, left: number, direction: number) {\n  const halfWidth = width / 2\n  const halfPercent = 50\n  const offset = linearScale([0, halfPercent], [0, halfWidth])\n  return (halfWidth - offset(left) * direction) * direction\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nexport function getStepsBetweenValues(values: number[]) {\n  return values.slice(0, -1).map((value, index) => values[index + 1] - value)\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nexport function hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {\n  if (minStepsBetweenValues > 0) {\n    const stepsBetweenValues = getStepsBetweenValues(values)\n    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues)\n    return actualMinStepsBetweenValues >= minStepsBetweenValues\n  }\n  return true\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nexport function linearScale(input: readonly [number, number], output: readonly [number, number]) {\n  return (value: number) => {\n    if (input[0] === input[1] || output[0] === output[1])\n      return output[0]\n    const ratio = (output[1] - output[0]) / (input[1] - input[0])\n    return output[0] + ratio * (value - input[0])\n  }\n}\n\nexport function getDecimalCount(value: number) {\n  return (String(value).split('.')[1] || '').length\n}\n\nexport function roundValue(value: number, decimalCount: number) {\n  const rounder = 10 ** decimalCount\n  return Math.round(value * rounder) / rounder\n}\n\nexport type Direction = 'ltr' | 'rtl'\n\nexport const PAGE_KEYS = ['PageUp', 'PageDown']\nexport const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n\ntype SlideDirection = 'from-left' | 'from-right' | 'from-bottom' | 'from-top'\nexport const BACK_KEYS: Record<SlideDirection, string[]> = {\n  'from-left': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n  'from-right': ['Home', 'PageDown', 'ArrowDown', 'ArrowRight'],\n  'from-bottom': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n  'from-top': ['Home', 'PageUp', 'ArrowUp', 'ArrowLeft'],\n}\n\ntype Side = 'top' | 'right' | 'bottom' | 'left'\ninterface SliderOrientation {\n  startEdge: ComputedRef<Side>\n  endEdge: ComputedRef<Side>\n  direction: ComputedRef<1 | -1>\n  size: 'width' | 'height'\n}\n\nexport const [injectSliderOrientationContext, provideSliderOrientationContext]\n  = createContext<SliderOrientation>(['SliderVertical', 'SliderHorizontal'])\n"],"names":["clamp","createContext"],"mappings":"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"}

package/dist/Slider/utils.js

@@ -65,7 +65,7 @@ const BACK_KEYS = {
   "from-left": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
   "from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
   "from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
-  "from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
+  "from-top": ["Home", "PageUp", "ArrowUp", "ArrowLeft"]
 };
 const [injectSliderOrientationContext, provideSliderOrientationContext] = createContext(["SliderVertical", "SliderHorizontal"]);
 

package/dist/Slider/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/Slider/utils.ts"],"sourcesContent":["import { clamp, createContext } from '@/shared'\n\nexport interface SliderOrientationPrivateProps {\n  min: number\n  max: number\n  inverted: boolean\n}\n\nexport type SliderOrientationPrivateEmits = {\n  slideEnd: []\n  slideStart: [value: number]\n  slideMove: [value: number]\n  homeKeyDown: [event: KeyboardEvent]\n  endKeyDown: [event: KeyboardEvent]\n  stepKeyDown: [event: KeyboardEvent, direction: number]\n}\n\nexport function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\n  const nextValues = [...prevValues]\n  nextValues[atIndex] = nextValue\n  return nextValues.sort((a, b) => a - b)\n}\n\nexport function convertValueToPercentage(value: number, min: number, max: number) {\n  const maxSteps = max - min\n  const percentPerStep = 100 / maxSteps\n  const percentage = percentPerStep * (value - min)\n  return clamp(percentage, 0, 100)\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nexport function getLabel(index: number, totalValues: number) {\n  if (totalValues > 2)\n    return `Value ${index + 1} of ${totalValues}`\n\n  else if (totalValues === 2)\n    return ['Minimum', 'Maximum'][index]\n\n  else\n    return undefined\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nexport function getClosestValueIndex(values: number[], nextValue: number) {\n  if (values.length === 1)\n    return 0\n  const distances = values.map(value => Math.abs(value - nextValue))\n  const closestDistance = Math.min(...distances)\n  return distances.indexOf(closestDistance)\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nexport function getThumbInBoundsOffset(width: number, left: number, direction: number) {\n  const halfWidth = width / 2\n  const halfPercent = 50\n  const offset = linearScale([0, halfPercent], [0, halfWidth])\n  return (halfWidth - offset(left) * direction) * direction\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nexport function getStepsBetweenValues(values: number[]) {\n  return values.slice(0, -1).map((value, index) => values[index + 1] - value)\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nexport function hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {\n  if (minStepsBetweenValues > 0) {\n    const stepsBetweenValues = getStepsBetweenValues(values)\n    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues)\n    return actualMinStepsBetweenValues >= minStepsBetweenValues\n  }\n  return true\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nexport function linearScale(input: readonly [number, number], output: readonly [number, number]) {\n  return (value: number) => {\n    if (input[0] === input[1] || output[0] === output[1])\n      return output[0]\n    const ratio = (output[1] - output[0]) / (input[1] - input[0])\n    return output[0] + ratio * (value - input[0])\n  }\n}\n\nexport function getDecimalCount(value: number) {\n  return (String(value).split('.')[1] || '').length\n}\n\nexport function roundValue(value: number, decimalCount: number) {\n  const rounder = 10 ** decimalCount\n  return Math.round(value * rounder) / rounder\n}\n\nexport type Direction = 'ltr' | 'rtl'\n\nexport const PAGE_KEYS = ['PageUp', 'PageDown']\nexport const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n\ntype SlideDirection = 'from-left' | 'from-right' | 'from-bottom' | 'from-top'\nexport const BACK_KEYS: Record<SlideDirection, string[]> = {\n  'from-left': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n  'from-right': ['Home', 'PageDown', 'ArrowDown', 'ArrowRight'],\n  'from-bottom': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n  'from-top': ['Home', 'PageDown', 'ArrowUp', 'ArrowLeft'],\n\n}\n\ntype Side = 'top' | 'right' | 'bottom' | 'left'\ninterface SliderOrientation {\n  startEdge: Side\n  endEdge: Side\n  size: 'width' | 'height'\n  direction: number\n}\n\nexport const [injectSliderOrientationContext, provideSliderOrientationContext]\n  = createContext<SliderOrientation>(['SliderVertical', 'SliderHorizontal'])\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../src/Slider/utils.ts"],"sourcesContent":["import type { ComputedRef } from 'vue'\nimport { clamp, createContext } from '@/shared'\n\nexport interface SliderOrientationPrivateProps {\n  min: number\n  max: number\n  inverted: boolean\n}\n\nexport type SliderOrientationPrivateEmits = {\n  slideEnd: []\n  slideStart: [value: number]\n  slideMove: [value: number]\n  homeKeyDown: [event: KeyboardEvent]\n  endKeyDown: [event: KeyboardEvent]\n  stepKeyDown: [event: KeyboardEvent, direction: number]\n}\n\nexport function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\n  const nextValues = [...prevValues]\n  nextValues[atIndex] = nextValue\n  return nextValues.sort((a, b) => a - b)\n}\n\nexport function convertValueToPercentage(value: number, min: number, max: number) {\n  const maxSteps = max - min\n  const percentPerStep = 100 / maxSteps\n  const percentage = percentPerStep * (value - min)\n  return clamp(percentage, 0, 100)\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nexport function getLabel(index: number, totalValues: number) {\n  if (totalValues > 2)\n    return `Value ${index + 1} of ${totalValues}`\n\n  else if (totalValues === 2)\n    return ['Minimum', 'Maximum'][index]\n\n  else\n    return undefined\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nexport function getClosestValueIndex(values: number[], nextValue: number) {\n  if (values.length === 1)\n    return 0\n  const distances = values.map(value => Math.abs(value - nextValue))\n  const closestDistance = Math.min(...distances)\n  return distances.indexOf(closestDistance)\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nexport function getThumbInBoundsOffset(width: number, left: number, direction: number) {\n  const halfWidth = width / 2\n  const halfPercent = 50\n  const offset = linearScale([0, halfPercent], [0, halfWidth])\n  return (halfWidth - offset(left) * direction) * direction\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nexport function getStepsBetweenValues(values: number[]) {\n  return values.slice(0, -1).map((value, index) => values[index + 1] - value)\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nexport function hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {\n  if (minStepsBetweenValues > 0) {\n    const stepsBetweenValues = getStepsBetweenValues(values)\n    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues)\n    return actualMinStepsBetweenValues >= minStepsBetweenValues\n  }\n  return true\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nexport function linearScale(input: readonly [number, number], output: readonly [number, number]) {\n  return (value: number) => {\n    if (input[0] === input[1] || output[0] === output[1])\n      return output[0]\n    const ratio = (output[1] - output[0]) / (input[1] - input[0])\n    return output[0] + ratio * (value - input[0])\n  }\n}\n\nexport function getDecimalCount(value: number) {\n  return (String(value).split('.')[1] || '').length\n}\n\nexport function roundValue(value: number, decimalCount: number) {\n  const rounder = 10 ** decimalCount\n  return Math.round(value * rounder) / rounder\n}\n\nexport type Direction = 'ltr' | 'rtl'\n\nexport const PAGE_KEYS = ['PageUp', 'PageDown']\nexport const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n\ntype SlideDirection = 'from-left' | 'from-right' | 'from-bottom' | 'from-top'\nexport const BACK_KEYS: Record<SlideDirection, string[]> = {\n  'from-left': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n  'from-right': ['Home', 'PageDown', 'ArrowDown', 'ArrowRight'],\n  'from-bottom': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n  'from-top': ['Home', 'PageUp', 'ArrowUp', 'ArrowLeft'],\n}\n\ntype Side = 'top' | 'right' | 'bottom' | 'left'\ninterface SliderOrientation {\n  startEdge: ComputedRef<Side>\n  endEdge: ComputedRef<Side>\n  direction: ComputedRef<1 | -1>\n  size: 'width' | 'height'\n}\n\nexport const [injectSliderOrientationContext, provideSliderOrientationContext]\n  = createContext<SliderOrientation>(['SliderVertical', 'SliderHorizontal'])\n"],"names":[],"mappings":"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"}