reka-ui 2.2.0 → 2.3.0

package/dist/Select/SelectTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger.cjs","sources":["../../src/Select/SelectTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useCollection } from '@/Collection'\n\nexport interface SelectTriggerProps extends PopperAnchorProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport {\n  injectSelectRootContext,\n} from './SelectRoot.vue'\nimport { OPEN_KEYS } from './utils'\nimport { Primitive } from '@/Primitive'\nimport { PopperAnchor, type PopperAnchorProps } from '@/Popper'\nimport { useForwardExpose, useId, useTypeahead } from '@/shared'\n\nconst props = withDefaults(defineProps<SelectTriggerProps>(), {\n  as: 'button',\n})\nconst rootContext = injectSelectRootContext()\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled)\n\nrootContext.contentId ||= useId(undefined, 'reka-select-content')\nonMounted(() => {\n  rootContext.onTriggerChange(triggerElement.value)\n})\n\nconst { getItems } = useCollection()\nconst { search, handleTypeaheadSearch, resetTypeahead } = useTypeahead()\nfunction handleOpen() {\n  if (!isDisabled.value) {\n    rootContext.onOpenChange(true)\n    // reset typeahead when we open\n    resetTypeahead()\n  }\n}\n\nfunction handlePointerOpen(event: PointerEvent) {\n  handleOpen()\n  rootContext.triggerPointerDownPosRef.value = {\n    x: Math.round(event.pageX),\n    y: Math.round(event.pageY),\n  }\n}\n</script>\n\n<template>\n  <PopperAnchor\n    as-child\n    :reference=\"reference\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      role=\"combobox\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :aria-controls=\"rootContext.contentId\"\n      :aria-expanded=\"rootContext.open.value || false\"\n      :aria-required=\"rootContext.required?.value\"\n      aria-autocomplete=\"none\"\n      :disabled=\"isDisabled\"\n      :dir=\"rootContext?.dir.value\"\n      :data-state=\"rootContext?.open.value ? 'open' : 'closed'\"\n      :data-disabled=\"isDisabled ? '' : undefined\"\n      :data-placeholder=\"\n        rootContext.modelValue?.value ? undefined : ''\n      \"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      @click=\"\n        (event: MouseEvent) => {\n          // Whilst browsers generally have no issue focusing the trigger when clicking\n          // on a label, Safari seems to struggle with the fact that there's no `onClick`.\n          // We force `focus` in this case. Note: this doesn't create any other side-effect\n          // because we are preventing default in `onPointerDown` so effectively\n          // this only runs for a label 'click'\n          (event?.currentTarget as HTMLElement)?.focus();\n        }\n      \"\n      @pointerdown=\"\n        (event: PointerEvent) => {\n          // Prevent opening on touch down.\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            return event.preventDefault();\n\n          // prevent implicit pointer capture\n          // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture\n          const target = event.target as HTMLElement;\n          if (target.hasPointerCapture(event.pointerId)) {\n            target.releasePointerCapture(event.pointerId);\n          }\n\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (event.button === 0 && event.ctrlKey === false) {\n            handlePointerOpen(event)\n            // prevent trigger from stealing focus from the active item after opening.\n            event.preventDefault();\n          }\n        }\n      \"\n      @pointerup.prevent=\"\n        (event: PointerEvent) => {\n          // Only open on pointer up when using touch devices\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            handlePointerOpen(event)\n        }\n      \"\n      @keydown=\"\n        (event) => {\n          const isTypingAhead = search !== '';\n          const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n          if (!isModifierKey && event.key.length === 1)\n            if (isTypingAhead && event.key === ' ') return;\n\n          handleTypeaheadSearch(event.key, getItems());\n          if (OPEN_KEYS.includes(event.key)) {\n            handleOpen();\n            event.preventDefault();\n          }\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </PopperAnchor>\n</template>\n"],"names":["injectSelectRootContext","useForwardExpose","computed","useId","onMounted","useCollection","useTypeahead"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;AAExE,IAAA,MAAM,aAAaC,YAAS,CAAA,MAAM,YAAY,QAAU,EAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAE/E,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,MAAA,EAAW,qBAAqB,CAAA;AAChE,IAAAC,aAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,eAAA,CAAgB,eAAe,KAAK,CAAA;AAAA,KACjD,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,mCAAc,EAAA;AACnC,IAAA,MAAM,EAAE,MAAA,EAAQ,qBAAuB,EAAA,cAAA,KAAmBC,gCAAa,EAAA;AACvE,IAAA,SAAS,UAAa,GAAA;AACpB,MAAI,IAAA,CAAC,WAAW,KAAO,EAAA;AACrB,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAE7B,QAAe,cAAA,EAAA;AAAA;AACjB;AAGF,IAAA,SAAS,kBAAkB,KAAqB,EAAA;AAC9C,MAAW,UAAA,EAAA;AACX,MAAA,WAAA,CAAY,yBAAyB,KAAQ,GAAA;AAAA,QAC3C,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,QACzB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK;AAAA,OAC3B;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectTrigger.cjs","sources":["../../src/Select/SelectTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useCollection } from '@/Collection'\n\nexport interface SelectTriggerProps extends PopperAnchorProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport type { PopperAnchorProps } from '@/Popper'\nimport { computed, onMounted } from 'vue'\nimport { PopperAnchor } from '@/Popper'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose, useId, useTypeahead } from '@/shared'\nimport {\n  injectSelectRootContext,\n} from './SelectRoot.vue'\nimport { OPEN_KEYS, shouldShowPlaceholder } from './utils'\n\nconst props = withDefaults(defineProps<SelectTriggerProps>(), {\n  as: 'button',\n})\nconst rootContext = injectSelectRootContext()\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled)\n\nrootContext.contentId ||= useId(undefined, 'reka-select-content')\nonMounted(() => {\n  rootContext.onTriggerChange(triggerElement.value)\n})\n\nconst { getItems } = useCollection()\nconst { search, handleTypeaheadSearch, resetTypeahead } = useTypeahead()\nfunction handleOpen() {\n  if (!isDisabled.value) {\n    rootContext.onOpenChange(true)\n    // reset typeahead when we open\n    resetTypeahead()\n  }\n}\n\nfunction handlePointerOpen(event: PointerEvent) {\n  handleOpen()\n  rootContext.triggerPointerDownPosRef.value = {\n    x: Math.round(event.pageX),\n    y: Math.round(event.pageY),\n  }\n}\n</script>\n\n<template>\n  <PopperAnchor\n    as-child\n    :reference=\"reference\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      role=\"combobox\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :aria-controls=\"rootContext.contentId\"\n      :aria-expanded=\"rootContext.open.value || false\"\n      :aria-required=\"rootContext.required?.value\"\n      aria-autocomplete=\"none\"\n      :disabled=\"isDisabled\"\n      :dir=\"rootContext?.dir.value\"\n      :data-state=\"rootContext?.open.value ? 'open' : 'closed'\"\n      :data-disabled=\"isDisabled ? '' : undefined\"\n      :data-placeholder=\"shouldShowPlaceholder(rootContext.modelValue?.value) ? '' : undefined\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      @click=\"\n        (event: MouseEvent) => {\n          // Whilst browsers generally have no issue focusing the trigger when clicking\n          // on a label, Safari seems to struggle with the fact that there's no `onClick`.\n          // We force `focus` in this case. Note: this doesn't create any other side-effect\n          // because we are preventing default in `onPointerDown` so effectively\n          // this only runs for a label 'click'\n          (event?.currentTarget as HTMLElement)?.focus();\n        }\n      \"\n      @pointerdown=\"\n        (event: PointerEvent) => {\n          // Prevent opening on touch down.\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            return event.preventDefault();\n\n          // prevent implicit pointer capture\n          // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture\n          const target = event.target as HTMLElement;\n          if (target.hasPointerCapture(event.pointerId)) {\n            target.releasePointerCapture(event.pointerId);\n          }\n\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (event.button === 0 && event.ctrlKey === false) {\n            handlePointerOpen(event)\n            // prevent trigger from stealing focus from the active item after opening.\n            event.preventDefault();\n          }\n        }\n      \"\n      @pointerup.prevent=\"\n        (event: PointerEvent) => {\n          // Only open on pointer up when using touch devices\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            handlePointerOpen(event)\n        }\n      \"\n      @keydown=\"\n        (event) => {\n          const isTypingAhead = search !== '';\n          const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n          if (!isModifierKey && event.key.length === 1)\n            if (isTypingAhead && event.key === ' ') return;\n\n          handleTypeaheadSearch(event.key, getItems());\n          if (OPEN_KEYS.includes(event.key)) {\n            handleOpen();\n            event.preventDefault();\n          }\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </PopperAnchor>\n</template>\n"],"names":["injectSelectRootContext","useForwardExpose","computed","useId","onMounted","useCollection","useTypeahead"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;AAExE,IAAA,MAAM,aAAaC,YAAS,CAAA,MAAM,YAAY,QAAU,EAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAE/E,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,MAAA,EAAW,qBAAqB,CAAA;AAChE,IAAAC,aAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,eAAA,CAAgB,eAAe,KAAK,CAAA;AAAA,KACjD,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,mCAAc,EAAA;AACnC,IAAA,MAAM,EAAE,MAAA,EAAQ,qBAAuB,EAAA,cAAA,KAAmBC,gCAAa,EAAA;AACvE,IAAA,SAAS,UAAa,GAAA;AACpB,MAAI,IAAA,CAAC,WAAW,KAAO,EAAA;AACrB,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAE7B,QAAe,cAAA,EAAA;AAAA;AACjB;AAGF,IAAA,SAAS,kBAAkB,KAAqB,EAAA;AAC9C,MAAW,UAAA,EAAA;AACX,MAAA,WAAA,CAAY,yBAAyB,KAAQ,GAAA;AAAA,QAC3C,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,QACzB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK;AAAA,OAC3B;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectTrigger.js

@@ -1,12 +1,12 @@
 import { defineComponent, computed, onMounted, createBlock, openBlock, unref, withCtx, createVNode, withModifiers, renderSlot } from 'vue';
-import { O as OPEN_KEYS } from './utils.js';
 import { _ as _sfc_main$1 } from '../Popper/PopperAnchor.js';
+import { O as OPEN_KEYS, s as shouldShowPlaceholder } from './utils.js';
 import { u as useCollection } from '../Collection/Collection.js';
-import { i as injectSelectRootContext } from './SelectRoot.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { u as useId } from '../shared/useId.js';
 import { u as useTypeahead } from '../shared/useTypeahead.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
+import { i as injectSelectRootContext } from './SelectRoot.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "SelectTrigger",
@@ -58,7 +58,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             dir: unref(rootContext)?.dir.value,
             "data-state": unref(rootContext)?.open.value ? "open" : "closed",
             "data-disabled": isDisabled.value ? "" : void 0,
-            "data-placeholder": unref(rootContext).modelValue?.value ? void 0 : "",
+            "data-placeholder": unref(shouldShowPlaceholder)(unref(rootContext).modelValue?.value) ? "" : void 0,
             "as-child": _ctx.asChild,
             as: _ctx.as,
             onClick: _cache[0] || (_cache[0] = (event) => {

package/dist/Select/SelectTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger.js","sources":["../../src/Select/SelectTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useCollection } from '@/Collection'\n\nexport interface SelectTriggerProps extends PopperAnchorProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport {\n  injectSelectRootContext,\n} from './SelectRoot.vue'\nimport { OPEN_KEYS } from './utils'\nimport { Primitive } from '@/Primitive'\nimport { PopperAnchor, type PopperAnchorProps } from '@/Popper'\nimport { useForwardExpose, useId, useTypeahead } from '@/shared'\n\nconst props = withDefaults(defineProps<SelectTriggerProps>(), {\n  as: 'button',\n})\nconst rootContext = injectSelectRootContext()\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled)\n\nrootContext.contentId ||= useId(undefined, 'reka-select-content')\nonMounted(() => {\n  rootContext.onTriggerChange(triggerElement.value)\n})\n\nconst { getItems } = useCollection()\nconst { search, handleTypeaheadSearch, resetTypeahead } = useTypeahead()\nfunction handleOpen() {\n  if (!isDisabled.value) {\n    rootContext.onOpenChange(true)\n    // reset typeahead when we open\n    resetTypeahead()\n  }\n}\n\nfunction handlePointerOpen(event: PointerEvent) {\n  handleOpen()\n  rootContext.triggerPointerDownPosRef.value = {\n    x: Math.round(event.pageX),\n    y: Math.round(event.pageY),\n  }\n}\n</script>\n\n<template>\n  <PopperAnchor\n    as-child\n    :reference=\"reference\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      role=\"combobox\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :aria-controls=\"rootContext.contentId\"\n      :aria-expanded=\"rootContext.open.value || false\"\n      :aria-required=\"rootContext.required?.value\"\n      aria-autocomplete=\"none\"\n      :disabled=\"isDisabled\"\n      :dir=\"rootContext?.dir.value\"\n      :data-state=\"rootContext?.open.value ? 'open' : 'closed'\"\n      :data-disabled=\"isDisabled ? '' : undefined\"\n      :data-placeholder=\"\n        rootContext.modelValue?.value ? undefined : ''\n      \"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      @click=\"\n        (event: MouseEvent) => {\n          // Whilst browsers generally have no issue focusing the trigger when clicking\n          // on a label, Safari seems to struggle with the fact that there's no `onClick`.\n          // We force `focus` in this case. Note: this doesn't create any other side-effect\n          // because we are preventing default in `onPointerDown` so effectively\n          // this only runs for a label 'click'\n          (event?.currentTarget as HTMLElement)?.focus();\n        }\n      \"\n      @pointerdown=\"\n        (event: PointerEvent) => {\n          // Prevent opening on touch down.\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            return event.preventDefault();\n\n          // prevent implicit pointer capture\n          // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture\n          const target = event.target as HTMLElement;\n          if (target.hasPointerCapture(event.pointerId)) {\n            target.releasePointerCapture(event.pointerId);\n          }\n\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (event.button === 0 && event.ctrlKey === false) {\n            handlePointerOpen(event)\n            // prevent trigger from stealing focus from the active item after opening.\n            event.preventDefault();\n          }\n        }\n      \"\n      @pointerup.prevent=\"\n        (event: PointerEvent) => {\n          // Only open on pointer up when using touch devices\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            handlePointerOpen(event)\n        }\n      \"\n      @keydown=\"\n        (event) => {\n          const isTypingAhead = search !== '';\n          const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n          if (!isModifierKey && event.key.length === 1)\n            if (isTypingAhead && event.key === ' ') return;\n\n          handleTypeaheadSearch(event.key, getItems());\n          if (OPEN_KEYS.includes(event.key)) {\n            handleOpen();\n            event.preventDefault();\n          }\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </PopperAnchor>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmB,gBAAiB,EAAA;AAExE,IAAA,MAAM,aAAa,QAAS,CAAA,MAAM,YAAY,QAAU,EAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAE/E,IAAY,WAAA,CAAA,SAAA,KAAc,KAAM,CAAA,MAAA,EAAW,qBAAqB,CAAA;AAChE,IAAA,SAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,eAAA,CAAgB,eAAe,KAAK,CAAA;AAAA,KACjD,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,aAAc,EAAA;AACnC,IAAA,MAAM,EAAE,MAAA,EAAQ,qBAAuB,EAAA,cAAA,KAAmB,YAAa,EAAA;AACvE,IAAA,SAAS,UAAa,GAAA;AACpB,MAAI,IAAA,CAAC,WAAW,KAAO,EAAA;AACrB,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAE7B,QAAe,cAAA,EAAA;AAAA;AACjB;AAGF,IAAA,SAAS,kBAAkB,KAAqB,EAAA;AAC9C,MAAW,UAAA,EAAA;AACX,MAAA,WAAA,CAAY,yBAAyB,KAAQ,GAAA;AAAA,QAC3C,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,QACzB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK;AAAA,OAC3B;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectTrigger.js","sources":["../../src/Select/SelectTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useCollection } from '@/Collection'\n\nexport interface SelectTriggerProps extends PopperAnchorProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport type { PopperAnchorProps } from '@/Popper'\nimport { computed, onMounted } from 'vue'\nimport { PopperAnchor } from '@/Popper'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose, useId, useTypeahead } from '@/shared'\nimport {\n  injectSelectRootContext,\n} from './SelectRoot.vue'\nimport { OPEN_KEYS, shouldShowPlaceholder } from './utils'\n\nconst props = withDefaults(defineProps<SelectTriggerProps>(), {\n  as: 'button',\n})\nconst rootContext = injectSelectRootContext()\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled)\n\nrootContext.contentId ||= useId(undefined, 'reka-select-content')\nonMounted(() => {\n  rootContext.onTriggerChange(triggerElement.value)\n})\n\nconst { getItems } = useCollection()\nconst { search, handleTypeaheadSearch, resetTypeahead } = useTypeahead()\nfunction handleOpen() {\n  if (!isDisabled.value) {\n    rootContext.onOpenChange(true)\n    // reset typeahead when we open\n    resetTypeahead()\n  }\n}\n\nfunction handlePointerOpen(event: PointerEvent) {\n  handleOpen()\n  rootContext.triggerPointerDownPosRef.value = {\n    x: Math.round(event.pageX),\n    y: Math.round(event.pageY),\n  }\n}\n</script>\n\n<template>\n  <PopperAnchor\n    as-child\n    :reference=\"reference\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      role=\"combobox\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :aria-controls=\"rootContext.contentId\"\n      :aria-expanded=\"rootContext.open.value || false\"\n      :aria-required=\"rootContext.required?.value\"\n      aria-autocomplete=\"none\"\n      :disabled=\"isDisabled\"\n      :dir=\"rootContext?.dir.value\"\n      :data-state=\"rootContext?.open.value ? 'open' : 'closed'\"\n      :data-disabled=\"isDisabled ? '' : undefined\"\n      :data-placeholder=\"shouldShowPlaceholder(rootContext.modelValue?.value) ? '' : undefined\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      @click=\"\n        (event: MouseEvent) => {\n          // Whilst browsers generally have no issue focusing the trigger when clicking\n          // on a label, Safari seems to struggle with the fact that there's no `onClick`.\n          // We force `focus` in this case. Note: this doesn't create any other side-effect\n          // because we are preventing default in `onPointerDown` so effectively\n          // this only runs for a label 'click'\n          (event?.currentTarget as HTMLElement)?.focus();\n        }\n      \"\n      @pointerdown=\"\n        (event: PointerEvent) => {\n          // Prevent opening on touch down.\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            return event.preventDefault();\n\n          // prevent implicit pointer capture\n          // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture\n          const target = event.target as HTMLElement;\n          if (target.hasPointerCapture(event.pointerId)) {\n            target.releasePointerCapture(event.pointerId);\n          }\n\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (event.button === 0 && event.ctrlKey === false) {\n            handlePointerOpen(event)\n            // prevent trigger from stealing focus from the active item after opening.\n            event.preventDefault();\n          }\n        }\n      \"\n      @pointerup.prevent=\"\n        (event: PointerEvent) => {\n          // Only open on pointer up when using touch devices\n          // https://github.com/unovue/reka-ui/issues/804\n          if (event.pointerType === 'touch')\n            handlePointerOpen(event)\n        }\n      \"\n      @keydown=\"\n        (event) => {\n          const isTypingAhead = search !== '';\n          const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n          if (!isModifierKey && event.key.length === 1)\n            if (isTypingAhead && event.key === ' ') return;\n\n          handleTypeaheadSearch(event.key, getItems());\n          if (OPEN_KEYS.includes(event.key)) {\n            handleOpen();\n            event.preventDefault();\n          }\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </PopperAnchor>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmB,gBAAiB,EAAA;AAExE,IAAA,MAAM,aAAa,QAAS,CAAA,MAAM,YAAY,QAAU,EAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAE/E,IAAY,WAAA,CAAA,SAAA,KAAc,KAAM,CAAA,MAAA,EAAW,qBAAqB,CAAA;AAChE,IAAA,SAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,eAAA,CAAgB,eAAe,KAAK,CAAA;AAAA,KACjD,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,aAAc,EAAA;AACnC,IAAA,MAAM,EAAE,MAAA,EAAQ,qBAAuB,EAAA,cAAA,KAAmB,YAAa,EAAA;AACvE,IAAA,SAAS,UAAa,GAAA;AACpB,MAAI,IAAA,CAAC,WAAW,KAAO,EAAA;AACrB,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAE7B,QAAe,cAAA,EAAA;AAAA;AACjB;AAGF,IAAA,SAAS,kBAAkB,KAAqB,EAAA;AAC9C,MAAW,UAAA,EAAA;AACX,MAAA,WAAA,CAAY,yBAAyB,KAAQ,GAAA;AAAA,QAC3C,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,QACzB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,KAAK;AAAA,OAC3B;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectValue.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const vue = require('vue');
+const Select_utils = require('./utils.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const Primitive_Primitive = require('../Primitive/Primitive.cjs');
 const Select_SelectRoot = require('./SelectRoot.cjs');
@@ -22,7 +23,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const selectedLabel = vue.computed(() => {
       let list = [];
       const options = Array.from(rootContext.optionsSet.value);
-      const getOption = (value) => options.find((option) => option.value === value);
+      const getOption = (value) => options.find((option) => Select_utils.valueComparator(value, option.value, rootContext.by));
       if (Array.isArray(rootContext.modelValue.value)) {
         list = rootContext.modelValue.value.map((value) => getOption(value)?.textContent ?? "");
       } else {

package/dist/Select/SelectValue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectValue.cjs","sources":["../../src/Select/SelectValue.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue } from '@/shared/types'\n\nexport interface SelectValueProps extends PrimitiveProps {\n  /** The content that will be rendered inside the `SelectValue` when no `value` or `defaultValue` is set. */\n  placeholder?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nconst props = withDefaults(defineProps<SelectValueProps>(), {\n  as: 'span',\n  placeholder: '',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst rootContext = injectSelectRootContext()\n\nonMounted(() => {\n  rootContext.valueElement = currentElement\n})\n\nconst selectedLabel = computed(() => {\n  let list: string[] = []\n  const options = Array.from(rootContext.optionsSet.value)\n  const getOption = (value?: AcceptableValue) => options.find(option => option.value === value)\n  if (Array.isArray(rootContext.modelValue.value)) {\n    list = rootContext.modelValue.value.map(value => getOption(value)?.textContent ?? '')\n  }\n  else {\n    list = [getOption(rootContext.modelValue.value)?.textContent ?? '']\n  }\n  return list.filter(Boolean)\n})\n\nconst slotText = computed(() => {\n  return selectedLabel.value.length ? selectedLabel.value.join(', ') : props.placeholder\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :style=\"{ pointerEvents: 'none' }\"\n    :data-placeholder=\"selectedLabel.length ? undefined : props.placeholder\"\n  >\n    <slot\n      :selected-label=\"selectedLabel\"\n      :model-value=\"rootContext.modelValue.value\"\n    >\n      {{ slotText }}\n    </slot>\n  </Primitive>\n</template>\n"],"names":["useForwardExpose","injectSelectRootContext","onMounted","computed"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIA,wCAAiB,EAAA;AAExD,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAE5C,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,YAAe,GAAA,cAAA;AAAA,KAC5B,CAAA;AAED,IAAM,MAAA,aAAA,GAAgBC,aAAS,MAAM;AACnC,MAAA,IAAI,OAAiB,EAAC;AACtB,MAAA,MAAM,OAAU,GAAA,KAAA,CAAM,IAAK,CAAA,WAAA,CAAY,WAAW,KAAK,CAAA;AACvD,MAAM,MAAA,SAAA,GAAY,CAAC,KAA4B,KAAA,OAAA,CAAQ,KAAK,CAAU,MAAA,KAAA,MAAA,CAAO,UAAU,KAAK,CAAA;AAC5F,MAAA,IAAI,KAAM,CAAA,OAAA,CAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CAAG,EAAA;AAC/C,QAAO,IAAA,GAAA,WAAA,CAAY,WAAW,KAAM,CAAA,GAAA,CAAI,WAAS,SAAU,CAAA,KAAK,CAAG,EAAA,WAAA,IAAe,EAAE,CAAA;AAAA,OAEjF,MAAA;AACH,QAAA,IAAA,GAAO,CAAC,SAAU,CAAA,WAAA,CAAY,WAAW,KAAK,CAAA,EAAG,eAAe,EAAE,CAAA;AAAA;AAEpE,MAAO,OAAA,IAAA,CAAK,OAAO,OAAO,CAAA;AAAA,KAC3B,CAAA;AAED,IAAM,MAAA,QAAA,GAAWA,aAAS,MAAM;AAC9B,MAAO,OAAA,aAAA,CAAc,MAAM,MAAS,GAAA,aAAA,CAAc,MAAM,IAAK,CAAA,IAAI,IAAI,KAAM,CAAA,WAAA;AAAA,KAC5E,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectValue.cjs","sources":["../../src/Select/SelectValue.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue } from '@/shared/types'\nimport { valueComparator } from './utils'\n\nexport interface SelectValueProps extends PrimitiveProps {\n  /** The content that will be rendered inside the `SelectValue` when no `value` or `defaultValue` is set. */\n  placeholder?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\nconst props = withDefaults(defineProps<SelectValueProps>(), {\n  as: 'span',\n  placeholder: '',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst rootContext = injectSelectRootContext()\n\nonMounted(() => {\n  rootContext.valueElement = currentElement\n})\n\nconst selectedLabel = computed(() => {\n  let list: string[] = []\n  const options = Array.from(rootContext.optionsSet.value)\n  const getOption = (value?: AcceptableValue) => options.find(option => valueComparator(value, option.value, rootContext.by))\n  if (Array.isArray(rootContext.modelValue.value)) {\n    list = rootContext.modelValue.value.map(value => getOption(value)?.textContent ?? '')\n  }\n  else {\n    list = [getOption(rootContext.modelValue.value)?.textContent ?? '']\n  }\n  return list.filter(Boolean)\n})\n\nconst slotText = computed(() => {\n  return selectedLabel.value.length ? selectedLabel.value.join(', ') : props.placeholder\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :style=\"{ pointerEvents: 'none' }\"\n    :data-placeholder=\"selectedLabel.length ? undefined : props.placeholder\"\n  >\n    <slot\n      :selected-label=\"selectedLabel\"\n      :model-value=\"rootContext.modelValue.value\"\n    >\n      {{ slotText }}\n    </slot>\n  </Primitive>\n</template>\n"],"names":["useForwardExpose","injectSelectRootContext","onMounted","computed","valueComparator"],"mappings":";;;;;;;;;;;;;;;;AAiBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIA,wCAAiB,EAAA;AAExD,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAE5C,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,YAAe,GAAA,cAAA;AAAA,KAC5B,CAAA;AAED,IAAM,MAAA,aAAA,GAAgBC,aAAS,MAAM;AACnC,MAAA,IAAI,OAAiB,EAAC;AACtB,MAAA,MAAM,OAAU,GAAA,KAAA,CAAM,IAAK,CAAA,WAAA,CAAY,WAAW,KAAK,CAAA;AACvD,MAAA,MAAM,SAAY,GAAA,CAAC,KAA4B,KAAA,OAAA,CAAQ,IAAK,CAAA,CAAA,MAAA,KAAUC,4BAAgB,CAAA,KAAA,EAAO,MAAO,CAAA,KAAA,EAAO,WAAY,CAAA,EAAE,CAAC,CAAA;AAC1H,MAAA,IAAI,KAAM,CAAA,OAAA,CAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CAAG,EAAA;AAC/C,QAAO,IAAA,GAAA,WAAA,CAAY,WAAW,KAAM,CAAA,GAAA,CAAI,WAAS,SAAU,CAAA,KAAK,CAAG,EAAA,WAAA,IAAe,EAAE,CAAA;AAAA,OAEjF,MAAA;AACH,QAAA,IAAA,GAAO,CAAC,SAAU,CAAA,WAAA,CAAY,WAAW,KAAK,CAAA,EAAG,eAAe,EAAE,CAAA;AAAA;AAEpE,MAAO,OAAA,IAAA,CAAK,OAAO,OAAO,CAAA;AAAA,KAC3B,CAAA;AAED,IAAM,MAAA,QAAA,GAAWD,aAAS,MAAM;AAC9B,MAAO,OAAA,aAAA,CAAc,MAAM,MAAS,GAAA,aAAA,CAAc,MAAM,IAAK,CAAA,IAAI,IAAI,KAAM,CAAA,WAAA;AAAA,KAC5E,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectValue.js

@@ -1,4 +1,5 @@
 import { defineComponent, onMounted, computed, createBlock, openBlock, unref, withCtx, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import { v as valueComparator } from './utils.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
 import { i as injectSelectRootContext } from './SelectRoot.js';
@@ -20,7 +21,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const selectedLabel = computed(() => {
       let list = [];
       const options = Array.from(rootContext.optionsSet.value);
-      const getOption = (value) => options.find((option) => option.value === value);
+      const getOption = (value) => options.find((option) => valueComparator(value, option.value, rootContext.by));
       if (Array.isArray(rootContext.modelValue.value)) {
         list = rootContext.modelValue.value.map((value) => getOption(value)?.textContent ?? "");
       } else {

package/dist/Select/SelectValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectValue.js","sources":["../../src/Select/SelectValue.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue } from '@/shared/types'\n\nexport interface SelectValueProps extends PrimitiveProps {\n  /** The content that will be rendered inside the `SelectValue` when no `value` or `defaultValue` is set. */\n  placeholder?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nconst props = withDefaults(defineProps<SelectValueProps>(), {\n  as: 'span',\n  placeholder: '',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst rootContext = injectSelectRootContext()\n\nonMounted(() => {\n  rootContext.valueElement = currentElement\n})\n\nconst selectedLabel = computed(() => {\n  let list: string[] = []\n  const options = Array.from(rootContext.optionsSet.value)\n  const getOption = (value?: AcceptableValue) => options.find(option => option.value === value)\n  if (Array.isArray(rootContext.modelValue.value)) {\n    list = rootContext.modelValue.value.map(value => getOption(value)?.textContent ?? '')\n  }\n  else {\n    list = [getOption(rootContext.modelValue.value)?.textContent ?? '']\n  }\n  return list.filter(Boolean)\n})\n\nconst slotText = computed(() => {\n  return selectedLabel.value.length ? selectedLabel.value.join(', ') : props.placeholder\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :style=\"{ pointerEvents: 'none' }\"\n    :data-placeholder=\"selectedLabel.length ? undefined : props.placeholder\"\n  >\n    <slot\n      :selected-label=\"selectedLabel\"\n      :model-value=\"rootContext.modelValue.value\"\n    >\n      {{ slotText }}\n    </slot>\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,YAAe,GAAA,cAAA;AAAA,KAC5B,CAAA;AAED,IAAM,MAAA,aAAA,GAAgB,SAAS,MAAM;AACnC,MAAA,IAAI,OAAiB,EAAC;AACtB,MAAA,MAAM,OAAU,GAAA,KAAA,CAAM,IAAK,CAAA,WAAA,CAAY,WAAW,KAAK,CAAA;AACvD,MAAM,MAAA,SAAA,GAAY,CAAC,KAA4B,KAAA,OAAA,CAAQ,KAAK,CAAU,MAAA,KAAA,MAAA,CAAO,UAAU,KAAK,CAAA;AAC5F,MAAA,IAAI,KAAM,CAAA,OAAA,CAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CAAG,EAAA;AAC/C,QAAO,IAAA,GAAA,WAAA,CAAY,WAAW,KAAM,CAAA,GAAA,CAAI,WAAS,SAAU,CAAA,KAAK,CAAG,EAAA,WAAA,IAAe,EAAE,CAAA;AAAA,OAEjF,MAAA;AACH,QAAA,IAAA,GAAO,CAAC,SAAU,CAAA,WAAA,CAAY,WAAW,KAAK,CAAA,EAAG,eAAe,EAAE,CAAA;AAAA;AAEpE,MAAO,OAAA,IAAA,CAAK,OAAO,OAAO,CAAA;AAAA,KAC3B,CAAA;AAED,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,MAAO,OAAA,aAAA,CAAc,MAAM,MAAS,GAAA,aAAA,CAAc,MAAM,IAAK,CAAA,IAAI,IAAI,KAAM,CAAA,WAAA;AAAA,KAC5E,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectValue.js","sources":["../../src/Select/SelectValue.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue } from '@/shared/types'\nimport { valueComparator } from './utils'\n\nexport interface SelectValueProps extends PrimitiveProps {\n  /** The content that will be rendered inside the `SelectValue` when no `value` or `defaultValue` is set. */\n  placeholder?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\nconst props = withDefaults(defineProps<SelectValueProps>(), {\n  as: 'span',\n  placeholder: '',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst rootContext = injectSelectRootContext()\n\nonMounted(() => {\n  rootContext.valueElement = currentElement\n})\n\nconst selectedLabel = computed(() => {\n  let list: string[] = []\n  const options = Array.from(rootContext.optionsSet.value)\n  const getOption = (value?: AcceptableValue) => options.find(option => valueComparator(value, option.value, rootContext.by))\n  if (Array.isArray(rootContext.modelValue.value)) {\n    list = rootContext.modelValue.value.map(value => getOption(value)?.textContent ?? '')\n  }\n  else {\n    list = [getOption(rootContext.modelValue.value)?.textContent ?? '']\n  }\n  return list.filter(Boolean)\n})\n\nconst slotText = computed(() => {\n  return selectedLabel.value.length ? selectedLabel.value.join(', ') : props.placeholder\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :style=\"{ pointerEvents: 'none' }\"\n    :data-placeholder=\"selectedLabel.length ? undefined : props.placeholder\"\n  >\n    <slot\n      :selected-label=\"selectedLabel\"\n      :model-value=\"rootContext.modelValue.value\"\n    >\n      {{ slotText }}\n    </slot>\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAiBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,YAAe,GAAA,cAAA;AAAA,KAC5B,CAAA;AAED,IAAM,MAAA,aAAA,GAAgB,SAAS,MAAM;AACnC,MAAA,IAAI,OAAiB,EAAC;AACtB,MAAA,MAAM,OAAU,GAAA,KAAA,CAAM,IAAK,CAAA,WAAA,CAAY,WAAW,KAAK,CAAA;AACvD,MAAA,MAAM,SAAY,GAAA,CAAC,KAA4B,KAAA,OAAA,CAAQ,IAAK,CAAA,CAAA,MAAA,KAAU,eAAgB,CAAA,KAAA,EAAO,MAAO,CAAA,KAAA,EAAO,WAAY,CAAA,EAAE,CAAC,CAAA;AAC1H,MAAA,IAAI,KAAM,CAAA,OAAA,CAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CAAG,EAAA;AAC/C,QAAO,IAAA,GAAA,WAAA,CAAY,WAAW,KAAM,CAAA,GAAA,CAAI,WAAS,SAAU,CAAA,KAAK,CAAG,EAAA,WAAA,IAAe,EAAE,CAAA;AAAA,OAEjF,MAAA;AACH,QAAA,IAAA,GAAO,CAAC,SAAU,CAAA,WAAA,CAAY,WAAW,KAAK,CAAA,EAAG,eAAe,EAAE,CAAA;AAAA;AAEpE,MAAO,OAAA,IAAA,CAAK,OAAO,OAAO,CAAA;AAAA,KAC3B,CAAA;AAED,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,MAAO,OAAA,aAAA,CAAc,MAAM,MAAS,GAAA,aAAA,CAAc,MAAM,IAAK,CAAA,IAAI,IAAI,KAAM,CAAA,WAAA;AAAA,KAC5E,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectViewport.cjs

@@ -3,10 +3,10 @@
 const vue = require('vue');
 const Select_utils = require('./utils.cjs');
 const shared_useNonce = require('../shared/useNonce.cjs');
-const Select_SelectItemAlignedPosition = require('./SelectItemAlignedPosition.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const Primitive_Primitive = require('../Primitive/Primitive.cjs');
 const Select_SelectContentImpl = require('./SelectContentImpl.cjs');
+const Select_SelectItemAlignedPosition = require('./SelectItemAlignedPosition.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "SelectViewport",

package/dist/Select/SelectViewport.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectViewport.cjs","sources":["../../src/Select/SelectViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useNonce } from '@/shared/useNonce'\n\nexport interface SelectViewportProps extends PrimitiveProps {\n  /**\n   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from `ConfigProvider`.\n   */\n  nonce?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, ref, toRefs } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { CONTENT_MARGIN } from './utils'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'\n\nconst props = defineProps<SelectViewportProps>()\nconst { nonce: propNonce } = toRefs(props)\nconst nonce = useNonce(propNonce)\n\nconst contentContext = injectSelectContentContext()\nconst alignedPositionContext\n  = contentContext.position === 'item-aligned'\n    ? injectSelectItemAlignedPositionContext()\n    : undefined\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nonMounted(() => {\n  contentContext?.onViewportChange(currentElement.value)\n})\n\nconst prevScrollTopRef = ref(0)\n\nfunction handleScroll(event: WheelEvent) {\n  const viewport = event.currentTarget as HTMLElement\n  const { shouldExpandOnScrollRef, contentWrapper } = alignedPositionContext ?? {}\n  if (shouldExpandOnScrollRef?.value && contentWrapper?.value) {\n    const scrolledBy = Math.abs(prevScrollTopRef.value - viewport.scrollTop)\n    if (scrolledBy > 0) {\n      const availableHeight = window.innerHeight - CONTENT_MARGIN * 2\n      const cssMinHeight = Number.parseFloat(\n        contentWrapper.value.style.minHeight,\n      )\n      const cssHeight = Number.parseFloat(contentWrapper.value.style.height)\n      const prevHeight = Math.max(cssMinHeight, cssHeight)\n\n      if (prevHeight < availableHeight) {\n        const nextHeight = prevHeight + scrolledBy\n        const clampedNextHeight = Math.min(availableHeight, nextHeight)\n        const heightDiff = nextHeight - clampedNextHeight\n\n        contentWrapper.value.style.height = `${clampedNextHeight}px`\n        if (contentWrapper.value.style.bottom === '0px') {\n          viewport.scrollTop = heightDiff > 0 ? heightDiff : 0\n          // ensure the content stays pinned to the bottom\n          contentWrapper.value.style.justifyContent = 'flex-end'\n        }\n      }\n    }\n  }\n  prevScrollTopRef.value = viewport.scrollTop\n}\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    data-reka-select-viewport\n    role=\"presentation\"\n    v-bind=\"{ ...$attrs, ...props }\"\n    :style=\"{\n      // we use position: 'relative' here on the `viewport` so that when we call\n      // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport\n      // (independent of the scrollUpButton).\n      position: 'relative',\n      flex: 1,\n      overflow: 'hidden auto',\n    }\"\n    @scroll=\"handleScroll\"\n  >\n    <slot />\n  </Primitive>\n  <Primitive\n    as=\"style\"\n    :nonce=\"nonce\"\n  >\n    /* Hide scrollbars cross-browser and enable momentum scroll for touch\n    devices */ [data-reka-select-viewport] { scrollbar-width:none; -ms-overflow-style: none;\n    -webkit-overflow-scrolling: touch; }\n    [data-reka-select-viewport]::-webkit-scrollbar { display: none; }\n  </Primitive>\n</template>\n"],"names":["toRefs","useNonce","injectSelectContentContext","injectSelectItemAlignedPositionContext","useForwardExpose","onMounted","ref","CONTENT_MARGIN"],"mappings":";;;;;;;;;;;;;;;;;;AAsBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,EAAE,KAAA,EAAO,SAAU,EAAA,GAAIA,WAAO,KAAK,CAAA;AACzC,IAAM,MAAA,KAAA,GAAQC,yBAAS,SAAS,CAAA;AAEhC,IAAA,MAAM,iBAAiBC,mDAA2B,EAAA;AAClD,IAAA,MAAM,sBACF,GAAA,cAAA,CAAe,QAAa,KAAA,cAAA,GAC1BC,yEACA,GAAA,MAAA;AAEN,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAAC,aAAA,CAAU,MAAM;AACd,MAAgB,cAAA,EAAA,gBAAA,CAAiB,eAAe,KAAK,CAAA;AAAA,KACtD,CAAA;AAED,IAAM,MAAA,gBAAA,GAAmBC,QAAI,CAAC,CAAA;AAE9B,IAAA,SAAS,aAAa,KAAmB,EAAA;AACvC,MAAA,MAAM,WAAW,KAAM,CAAA,aAAA;AACvB,MAAA,MAAM,EAAE,uBAAA,EAAyB,cAAe,EAAA,GAAI,0BAA0B,EAAC;AAC/E,MAAI,IAAA,uBAAA,EAAyB,KAAS,IAAA,cAAA,EAAgB,KAAO,EAAA;AAC3D,QAAA,MAAM,aAAa,IAAK,CAAA,GAAA,CAAI,gBAAiB,CAAA,KAAA,GAAQ,SAAS,SAAS,CAAA;AACvE,QAAA,IAAI,aAAa,CAAG,EAAA;AAClB,UAAM,MAAA,eAAA,GAAkB,MAAO,CAAA,WAAA,GAAcC,2BAAiB,GAAA,CAAA;AAC9D,UAAA,MAAM,eAAe,MAAO,CAAA,UAAA;AAAA,YAC1B,cAAA,CAAe,MAAM,KAAM,CAAA;AAAA,WAC7B;AACA,UAAA,MAAM,YAAY,MAAO,CAAA,UAAA,CAAW,cAAe,CAAA,KAAA,CAAM,MAAM,MAAM,CAAA;AACrE,UAAA,MAAM,UAAa,GAAA,IAAA,CAAK,GAAI,CAAA,YAAA,EAAc,SAAS,CAAA;AAEnD,UAAA,IAAI,aAAa,eAAiB,EAAA;AAChC,YAAA,MAAM,aAAa,UAAa,GAAA,UAAA;AAChC,YAAA,MAAM,iBAAoB,GAAA,IAAA,CAAK,GAAI,CAAA,eAAA,EAAiB,UAAU,CAAA;AAC9D,YAAA,MAAM,aAAa,UAAa,GAAA,iBAAA;AAEhC,YAAA,cAAA,CAAe,KAAM,CAAA,KAAA,CAAM,MAAS,GAAA,CAAA,EAAG,iBAAiB,CAAA,EAAA,CAAA;AACxD,YAAA,IAAI,cAAe,CAAA,KAAA,CAAM,KAAM,CAAA,MAAA,KAAW,KAAO,EAAA;AAC/C,cAAS,QAAA,CAAA,SAAA,GAAY,UAAa,GAAA,CAAA,GAAI,UAAa,GAAA,CAAA;AAEnD,cAAe,cAAA,CAAA,KAAA,CAAM,MAAM,cAAiB,GAAA,UAAA;AAAA;AAC9C;AACF;AACF;AAEF,MAAA,gBAAA,CAAiB,QAAQ,QAAS,CAAA,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectViewport.cjs","sources":["../../src/Select/SelectViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useNonce } from '@/shared/useNonce'\n\nexport interface SelectViewportProps extends PrimitiveProps {\n  /**\n   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from `ConfigProvider`.\n   */\n  nonce?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, ref, toRefs } from 'vue'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'\nimport { CONTENT_MARGIN } from './utils'\n\nconst props = defineProps<SelectViewportProps>()\nconst { nonce: propNonce } = toRefs(props)\nconst nonce = useNonce(propNonce)\n\nconst contentContext = injectSelectContentContext()\nconst alignedPositionContext\n  = contentContext.position === 'item-aligned'\n    ? injectSelectItemAlignedPositionContext()\n    : undefined\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nonMounted(() => {\n  contentContext?.onViewportChange(currentElement.value)\n})\n\nconst prevScrollTopRef = ref(0)\n\nfunction handleScroll(event: WheelEvent) {\n  const viewport = event.currentTarget as HTMLElement\n  const { shouldExpandOnScrollRef, contentWrapper } = alignedPositionContext ?? {}\n  if (shouldExpandOnScrollRef?.value && contentWrapper?.value) {\n    const scrolledBy = Math.abs(prevScrollTopRef.value - viewport.scrollTop)\n    if (scrolledBy > 0) {\n      const availableHeight = window.innerHeight - CONTENT_MARGIN * 2\n      const cssMinHeight = Number.parseFloat(\n        contentWrapper.value.style.minHeight,\n      )\n      const cssHeight = Number.parseFloat(contentWrapper.value.style.height)\n      const prevHeight = Math.max(cssMinHeight, cssHeight)\n\n      if (prevHeight < availableHeight) {\n        const nextHeight = prevHeight + scrolledBy\n        const clampedNextHeight = Math.min(availableHeight, nextHeight)\n        const heightDiff = nextHeight - clampedNextHeight\n\n        contentWrapper.value.style.height = `${clampedNextHeight}px`\n        if (contentWrapper.value.style.bottom === '0px') {\n          viewport.scrollTop = heightDiff > 0 ? heightDiff : 0\n          // ensure the content stays pinned to the bottom\n          contentWrapper.value.style.justifyContent = 'flex-end'\n        }\n      }\n    }\n  }\n  prevScrollTopRef.value = viewport.scrollTop\n}\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    data-reka-select-viewport\n    role=\"presentation\"\n    v-bind=\"{ ...$attrs, ...props }\"\n    :style=\"{\n      // we use position: 'relative' here on the `viewport` so that when we call\n      // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport\n      // (independent of the scrollUpButton).\n      position: 'relative',\n      flex: 1,\n      overflow: 'hidden auto',\n    }\"\n    @scroll=\"handleScroll\"\n  >\n    <slot />\n  </Primitive>\n  <Primitive\n    as=\"style\"\n    :nonce=\"nonce\"\n  >\n    /* Hide scrollbars cross-browser and enable momentum scroll for touch\n    devices */ [data-reka-select-viewport] { scrollbar-width:none; -ms-overflow-style: none;\n    -webkit-overflow-scrolling: touch; }\n    [data-reka-select-viewport]::-webkit-scrollbar { display: none; }\n  </Primitive>\n</template>\n"],"names":["toRefs","useNonce","injectSelectContentContext","injectSelectItemAlignedPositionContext","useForwardExpose","onMounted","ref","CONTENT_MARGIN"],"mappings":";;;;;;;;;;;;;;;;;;AAsBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,EAAE,KAAA,EAAO,SAAU,EAAA,GAAIA,WAAO,KAAK,CAAA;AACzC,IAAM,MAAA,KAAA,GAAQC,yBAAS,SAAS,CAAA;AAEhC,IAAA,MAAM,iBAAiBC,mDAA2B,EAAA;AAClD,IAAA,MAAM,sBACF,GAAA,cAAA,CAAe,QAAa,KAAA,cAAA,GAC1BC,yEACA,GAAA,MAAA;AAEN,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAAC,aAAA,CAAU,MAAM;AACd,MAAgB,cAAA,EAAA,gBAAA,CAAiB,eAAe,KAAK,CAAA;AAAA,KACtD,CAAA;AAED,IAAM,MAAA,gBAAA,GAAmBC,QAAI,CAAC,CAAA;AAE9B,IAAA,SAAS,aAAa,KAAmB,EAAA;AACvC,MAAA,MAAM,WAAW,KAAM,CAAA,aAAA;AACvB,MAAA,MAAM,EAAE,uBAAA,EAAyB,cAAe,EAAA,GAAI,0BAA0B,EAAC;AAC/E,MAAI,IAAA,uBAAA,EAAyB,KAAS,IAAA,cAAA,EAAgB,KAAO,EAAA;AAC3D,QAAA,MAAM,aAAa,IAAK,CAAA,GAAA,CAAI,gBAAiB,CAAA,KAAA,GAAQ,SAAS,SAAS,CAAA;AACvE,QAAA,IAAI,aAAa,CAAG,EAAA;AAClB,UAAM,MAAA,eAAA,GAAkB,MAAO,CAAA,WAAA,GAAcC,2BAAiB,GAAA,CAAA;AAC9D,UAAA,MAAM,eAAe,MAAO,CAAA,UAAA;AAAA,YAC1B,cAAA,CAAe,MAAM,KAAM,CAAA;AAAA,WAC7B;AACA,UAAA,MAAM,YAAY,MAAO,CAAA,UAAA,CAAW,cAAe,CAAA,KAAA,CAAM,MAAM,MAAM,CAAA;AACrE,UAAA,MAAM,UAAa,GAAA,IAAA,CAAK,GAAI,CAAA,YAAA,EAAc,SAAS,CAAA;AAEnD,UAAA,IAAI,aAAa,eAAiB,EAAA;AAChC,YAAA,MAAM,aAAa,UAAa,GAAA,UAAA;AAChC,YAAA,MAAM,iBAAoB,GAAA,IAAA,CAAK,GAAI,CAAA,eAAA,EAAiB,UAAU,CAAA;AAC9D,YAAA,MAAM,aAAa,UAAa,GAAA,iBAAA;AAEhC,YAAA,cAAA,CAAe,KAAM,CAAA,KAAA,CAAM,MAAS,GAAA,CAAA,EAAG,iBAAiB,CAAA,EAAA,CAAA;AACxD,YAAA,IAAI,cAAe,CAAA,KAAA,CAAM,KAAM,CAAA,MAAA,KAAW,KAAO,EAAA;AAC/C,cAAS,QAAA,CAAA,SAAA,GAAY,UAAa,GAAA,CAAA,GAAI,UAAa,GAAA,CAAA;AAEnD,cAAe,cAAA,CAAA,KAAA,CAAM,MAAM,cAAiB,GAAA,UAAA;AAAA;AAC9C;AACF;AACF;AAEF,MAAA,gBAAA,CAAiB,QAAQ,QAAS,CAAA,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectViewport.js

@@ -1,10 +1,10 @@
 import { defineComponent, toRefs, onMounted, ref, createElementBlock, openBlock, Fragment, createVNode, unref, mergeProps, withCtx, renderSlot, createTextVNode } from 'vue';
 import { C as CONTENT_MARGIN } from './utils.js';
 import { u as useNonce } from '../shared/useNonce.js';
-import { i as injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
 import { i as injectSelectContentContext } from './SelectContentImpl.js';
+import { i as injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "SelectViewport",

package/dist/Select/SelectViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectViewport.js","sources":["../../src/Select/SelectViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useNonce } from '@/shared/useNonce'\n\nexport interface SelectViewportProps extends PrimitiveProps {\n  /**\n   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from `ConfigProvider`.\n   */\n  nonce?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, ref, toRefs } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { CONTENT_MARGIN } from './utils'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'\n\nconst props = defineProps<SelectViewportProps>()\nconst { nonce: propNonce } = toRefs(props)\nconst nonce = useNonce(propNonce)\n\nconst contentContext = injectSelectContentContext()\nconst alignedPositionContext\n  = contentContext.position === 'item-aligned'\n    ? injectSelectItemAlignedPositionContext()\n    : undefined\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nonMounted(() => {\n  contentContext?.onViewportChange(currentElement.value)\n})\n\nconst prevScrollTopRef = ref(0)\n\nfunction handleScroll(event: WheelEvent) {\n  const viewport = event.currentTarget as HTMLElement\n  const { shouldExpandOnScrollRef, contentWrapper } = alignedPositionContext ?? {}\n  if (shouldExpandOnScrollRef?.value && contentWrapper?.value) {\n    const scrolledBy = Math.abs(prevScrollTopRef.value - viewport.scrollTop)\n    if (scrolledBy > 0) {\n      const availableHeight = window.innerHeight - CONTENT_MARGIN * 2\n      const cssMinHeight = Number.parseFloat(\n        contentWrapper.value.style.minHeight,\n      )\n      const cssHeight = Number.parseFloat(contentWrapper.value.style.height)\n      const prevHeight = Math.max(cssMinHeight, cssHeight)\n\n      if (prevHeight < availableHeight) {\n        const nextHeight = prevHeight + scrolledBy\n        const clampedNextHeight = Math.min(availableHeight, nextHeight)\n        const heightDiff = nextHeight - clampedNextHeight\n\n        contentWrapper.value.style.height = `${clampedNextHeight}px`\n        if (contentWrapper.value.style.bottom === '0px') {\n          viewport.scrollTop = heightDiff > 0 ? heightDiff : 0\n          // ensure the content stays pinned to the bottom\n          contentWrapper.value.style.justifyContent = 'flex-end'\n        }\n      }\n    }\n  }\n  prevScrollTopRef.value = viewport.scrollTop\n}\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    data-reka-select-viewport\n    role=\"presentation\"\n    v-bind=\"{ ...$attrs, ...props }\"\n    :style=\"{\n      // we use position: 'relative' here on the `viewport` so that when we call\n      // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport\n      // (independent of the scrollUpButton).\n      position: 'relative',\n      flex: 1,\n      overflow: 'hidden auto',\n    }\"\n    @scroll=\"handleScroll\"\n  >\n    <slot />\n  </Primitive>\n  <Primitive\n    as=\"style\"\n    :nonce=\"nonce\"\n  >\n    /* Hide scrollbars cross-browser and enable momentum scroll for touch\n    devices */ [data-reka-select-viewport] { scrollbar-width:none; -ms-overflow-style: none;\n    -webkit-overflow-scrolling: touch; }\n    [data-reka-select-viewport]::-webkit-scrollbar { display: none; }\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAsBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,EAAE,KAAA,EAAO,SAAU,EAAA,GAAI,OAAO,KAAK,CAAA;AACzC,IAAM,MAAA,KAAA,GAAQ,SAAS,SAAS,CAAA;AAEhC,IAAA,MAAM,iBAAiB,0BAA2B,EAAA;AAClD,IAAA,MAAM,sBACF,GAAA,cAAA,CAAe,QAAa,KAAA,cAAA,GAC1B,wCACA,GAAA,MAAA;AAEN,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAA,SAAA,CAAU,MAAM;AACd,MAAgB,cAAA,EAAA,gBAAA,CAAiB,eAAe,KAAK,CAAA;AAAA,KACtD,CAAA;AAED,IAAM,MAAA,gBAAA,GAAmB,IAAI,CAAC,CAAA;AAE9B,IAAA,SAAS,aAAa,KAAmB,EAAA;AACvC,MAAA,MAAM,WAAW,KAAM,CAAA,aAAA;AACvB,MAAA,MAAM,EAAE,uBAAA,EAAyB,cAAe,EAAA,GAAI,0BAA0B,EAAC;AAC/E,MAAI,IAAA,uBAAA,EAAyB,KAAS,IAAA,cAAA,EAAgB,KAAO,EAAA;AAC3D,QAAA,MAAM,aAAa,IAAK,CAAA,GAAA,CAAI,gBAAiB,CAAA,KAAA,GAAQ,SAAS,SAAS,CAAA;AACvE,QAAA,IAAI,aAAa,CAAG,EAAA;AAClB,UAAM,MAAA,eAAA,GAAkB,MAAO,CAAA,WAAA,GAAc,cAAiB,GAAA,CAAA;AAC9D,UAAA,MAAM,eAAe,MAAO,CAAA,UAAA;AAAA,YAC1B,cAAA,CAAe,MAAM,KAAM,CAAA;AAAA,WAC7B;AACA,UAAA,MAAM,YAAY,MAAO,CAAA,UAAA,CAAW,cAAe,CAAA,KAAA,CAAM,MAAM,MAAM,CAAA;AACrE,UAAA,MAAM,UAAa,GAAA,IAAA,CAAK,GAAI,CAAA,YAAA,EAAc,SAAS,CAAA;AAEnD,UAAA,IAAI,aAAa,eAAiB,EAAA;AAChC,YAAA,MAAM,aAAa,UAAa,GAAA,UAAA;AAChC,YAAA,MAAM,iBAAoB,GAAA,IAAA,CAAK,GAAI,CAAA,eAAA,EAAiB,UAAU,CAAA;AAC9D,YAAA,MAAM,aAAa,UAAa,GAAA,iBAAA;AAEhC,YAAA,cAAA,CAAe,KAAM,CAAA,KAAA,CAAM,MAAS,GAAA,CAAA,EAAG,iBAAiB,CAAA,EAAA,CAAA;AACxD,YAAA,IAAI,cAAe,CAAA,KAAA,CAAM,KAAM,CAAA,MAAA,KAAW,KAAO,EAAA;AAC/C,cAAS,QAAA,CAAA,SAAA,GAAY,UAAa,GAAA,CAAA,GAAI,UAAa,GAAA,CAAA;AAEnD,cAAe,cAAA,CAAA,KAAA,CAAM,MAAM,cAAiB,GAAA,UAAA;AAAA;AAC9C;AACF;AACF;AAEF,MAAA,gBAAA,CAAiB,QAAQ,QAAS,CAAA,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectViewport.js","sources":["../../src/Select/SelectViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useNonce } from '@/shared/useNonce'\n\nexport interface SelectViewportProps extends PrimitiveProps {\n  /**\n   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from `ConfigProvider`.\n   */\n  nonce?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, ref, toRefs } from 'vue'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'\nimport { CONTENT_MARGIN } from './utils'\n\nconst props = defineProps<SelectViewportProps>()\nconst { nonce: propNonce } = toRefs(props)\nconst nonce = useNonce(propNonce)\n\nconst contentContext = injectSelectContentContext()\nconst alignedPositionContext\n  = contentContext.position === 'item-aligned'\n    ? injectSelectItemAlignedPositionContext()\n    : undefined\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nonMounted(() => {\n  contentContext?.onViewportChange(currentElement.value)\n})\n\nconst prevScrollTopRef = ref(0)\n\nfunction handleScroll(event: WheelEvent) {\n  const viewport = event.currentTarget as HTMLElement\n  const { shouldExpandOnScrollRef, contentWrapper } = alignedPositionContext ?? {}\n  if (shouldExpandOnScrollRef?.value && contentWrapper?.value) {\n    const scrolledBy = Math.abs(prevScrollTopRef.value - viewport.scrollTop)\n    if (scrolledBy > 0) {\n      const availableHeight = window.innerHeight - CONTENT_MARGIN * 2\n      const cssMinHeight = Number.parseFloat(\n        contentWrapper.value.style.minHeight,\n      )\n      const cssHeight = Number.parseFloat(contentWrapper.value.style.height)\n      const prevHeight = Math.max(cssMinHeight, cssHeight)\n\n      if (prevHeight < availableHeight) {\n        const nextHeight = prevHeight + scrolledBy\n        const clampedNextHeight = Math.min(availableHeight, nextHeight)\n        const heightDiff = nextHeight - clampedNextHeight\n\n        contentWrapper.value.style.height = `${clampedNextHeight}px`\n        if (contentWrapper.value.style.bottom === '0px') {\n          viewport.scrollTop = heightDiff > 0 ? heightDiff : 0\n          // ensure the content stays pinned to the bottom\n          contentWrapper.value.style.justifyContent = 'flex-end'\n        }\n      }\n    }\n  }\n  prevScrollTopRef.value = viewport.scrollTop\n}\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    data-reka-select-viewport\n    role=\"presentation\"\n    v-bind=\"{ ...$attrs, ...props }\"\n    :style=\"{\n      // we use position: 'relative' here on the `viewport` so that when we call\n      // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport\n      // (independent of the scrollUpButton).\n      position: 'relative',\n      flex: 1,\n      overflow: 'hidden auto',\n    }\"\n    @scroll=\"handleScroll\"\n  >\n    <slot />\n  </Primitive>\n  <Primitive\n    as=\"style\"\n    :nonce=\"nonce\"\n  >\n    /* Hide scrollbars cross-browser and enable momentum scroll for touch\n    devices */ [data-reka-select-viewport] { scrollbar-width:none; -ms-overflow-style: none;\n    -webkit-overflow-scrolling: touch; }\n    [data-reka-select-viewport]::-webkit-scrollbar { display: none; }\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAsBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,EAAE,KAAA,EAAO,SAAU,EAAA,GAAI,OAAO,KAAK,CAAA;AACzC,IAAM,MAAA,KAAA,GAAQ,SAAS,SAAS,CAAA;AAEhC,IAAA,MAAM,iBAAiB,0BAA2B,EAAA;AAClD,IAAA,MAAM,sBACF,GAAA,cAAA,CAAe,QAAa,KAAA,cAAA,GAC1B,wCACA,GAAA,MAAA;AAEN,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAA,SAAA,CAAU,MAAM;AACd,MAAgB,cAAA,EAAA,gBAAA,CAAiB,eAAe,KAAK,CAAA;AAAA,KACtD,CAAA;AAED,IAAM,MAAA,gBAAA,GAAmB,IAAI,CAAC,CAAA;AAE9B,IAAA,SAAS,aAAa,KAAmB,EAAA;AACvC,MAAA,MAAM,WAAW,KAAM,CAAA,aAAA;AACvB,MAAA,MAAM,EAAE,uBAAA,EAAyB,cAAe,EAAA,GAAI,0BAA0B,EAAC;AAC/E,MAAI,IAAA,uBAAA,EAAyB,KAAS,IAAA,cAAA,EAAgB,KAAO,EAAA;AAC3D,QAAA,MAAM,aAAa,IAAK,CAAA,GAAA,CAAI,gBAAiB,CAAA,KAAA,GAAQ,SAAS,SAAS,CAAA;AACvE,QAAA,IAAI,aAAa,CAAG,EAAA;AAClB,UAAM,MAAA,eAAA,GAAkB,MAAO,CAAA,WAAA,GAAc,cAAiB,GAAA,CAAA;AAC9D,UAAA,MAAM,eAAe,MAAO,CAAA,UAAA;AAAA,YAC1B,cAAA,CAAe,MAAM,KAAM,CAAA;AAAA,WAC7B;AACA,UAAA,MAAM,YAAY,MAAO,CAAA,UAAA,CAAW,cAAe,CAAA,KAAA,CAAM,MAAM,MAAM,CAAA;AACrE,UAAA,MAAM,UAAa,GAAA,IAAA,CAAK,GAAI,CAAA,YAAA,EAAc,SAAS,CAAA;AAEnD,UAAA,IAAI,aAAa,eAAiB,EAAA;AAChC,YAAA,MAAM,aAAa,UAAa,GAAA,UAAA;AAChC,YAAA,MAAM,iBAAoB,GAAA,IAAA,CAAK,GAAI,CAAA,eAAA,EAAiB,UAAU,CAAA;AAC9D,YAAA,MAAM,aAAa,UAAa,GAAA,iBAAA;AAEhC,YAAA,cAAA,CAAe,KAAM,CAAA,KAAA,CAAM,MAAS,GAAA,CAAA,EAAG,iBAAiB,CAAA,EAAA,CAAA;AACxD,YAAA,IAAI,cAAe,CAAA,KAAA,CAAM,KAAM,CAAA,MAAA,KAAW,KAAO,EAAA;AAC/C,cAAS,QAAA,CAAA,SAAA,GAAY,UAAa,GAAA,CAAA,GAAI,UAAa,GAAA,CAAA;AAEnD,cAAe,cAAA,CAAA,KAAA,CAAM,MAAM,cAAiB,GAAA,UAAA;AAAA;AAC9C;AACF;AACF;AAEF,MAAA,gBAAA,CAAiB,QAAQ,QAAS,CAAA,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/utils.cjs

@@ -24,10 +24,14 @@ function compare(value, currentValue, comparator) {
     return value?.[comparator] === currentValue?.[comparator];
   return ohash.isEqual(value, currentValue);
 }
+function shouldShowPlaceholder(value) {
+  return value === void 0 || value === null || value === "" || Array.isArray(value) && value.length === 0;
+}
 
 exports.CONTENT_MARGIN = CONTENT_MARGIN;
 exports.OPEN_KEYS = OPEN_KEYS;
 exports.SELECTION_KEYS = SELECTION_KEYS;
 exports.compare = compare;
+exports.shouldShowPlaceholder = shouldShowPlaceholder;
 exports.valueComparator = valueComparator;
 //# sourceMappingURL=utils.cjs.map

package/dist/Select/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../src/Select/utils.ts"],"sourcesContent":["import { isEqual } from 'ohash'\n\nexport const OPEN_KEYS = [' ', 'Enter', 'ArrowUp', 'ArrowDown']\nexport const SELECTION_KEYS = [' ', 'Enter']\nexport const CONTENT_MARGIN = 10\n\nexport function valueComparator<T>(value: T | T[] | undefined, currentValue: T, comparator?: string | ((a: T, b: T) => boolean)) {\n  if (value === undefined)\n    return false\n  else if (Array.isArray(value))\n    return value.some(val => compare(val, currentValue, comparator))\n  else\n    return compare(value, currentValue, comparator)\n}\n\nexport function compare<T>(value?: T, currentValue?: T, comparator?: string | ((a: T, b: T) => boolean)) {\n  if (value === undefined || currentValue === undefined)\n    return false\n\n  if (typeof value === 'string')\n    return value === currentValue\n\n  if (typeof comparator === 'function')\n    return comparator(value, currentValue)\n\n  if (typeof comparator === 'string')\n    return value?.[comparator as keyof T] === currentValue?.[comparator as keyof T]\n\n  return isEqual(value, currentValue)\n}\n"],"names":["isEqual"],"mappings":";;;;AAEO,MAAM,SAAY,GAAA,CAAC,GAAK,EAAA,OAAA,EAAS,WAAW,WAAW;AACjD,MAAA,cAAA,GAAiB,CAAC,GAAA,EAAK,OAAO;AACpC,MAAM,cAAiB,GAAA;AAEd,SAAA,eAAA,CAAmB,KAA4B,EAAA,YAAA,EAAiB,UAAiD,EAAA;AAC/H,EAAA,IAAI,KAAU,KAAA,MAAA;AACZ,IAAO,OAAA,KAAA;AAAA,OACA,IAAA,KAAA,CAAM,QAAQ,KAAK,CAAA;AAC1B,IAAA,OAAO,MAAM,IAAK,CAAA,CAAA,GAAA,KAAO,QAAQ,GAAK,EAAA,YAAA,EAAc,UAAU,CAAC,CAAA;AAAA;AAE/D,IAAO,OAAA,OAAA,CAAQ,KAAO,EAAA,YAAA,EAAc,UAAU,CAAA;AAClD;AAEgB,SAAA,OAAA,CAAW,KAAW,EAAA,YAAA,EAAkB,UAAiD,EAAA;AACvG,EAAI,IAAA,KAAA,KAAU,UAAa,YAAiB,KAAA,MAAA;AAC1C,IAAO,OAAA,KAAA;AAET,EAAA,IAAI,OAAO,KAAU,KAAA,QAAA;AACnB,IAAA,OAAO,KAAU,KAAA,YAAA;AAEnB,EAAA,IAAI,OAAO,UAAe,KAAA,UAAA;AACxB,IAAO,OAAA,UAAA,CAAW,OAAO,YAAY,CAAA;AAEvC,EAAA,IAAI,OAAO,UAAe,KAAA,QAAA;AACxB,IAAA,OAAO,KAAQ,GAAA,UAAqB,CAAM,KAAA,YAAA,GAAe,UAAqB,CAAA;AAEhF,EAAO,OAAAA,aAAA,CAAQ,OAAO,YAAY,CAAA;AACpC;;;;;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../src/Select/utils.ts"],"sourcesContent":["import type { AcceptableValue } from '@/shared/types'\nimport { isEqual } from 'ohash'\n\nexport const OPEN_KEYS = [' ', 'Enter', 'ArrowUp', 'ArrowDown']\nexport const SELECTION_KEYS = [' ', 'Enter']\nexport const CONTENT_MARGIN = 10\n\nexport function valueComparator<T>(value: T | T[] | undefined, currentValue: T, comparator?: string | ((a: T, b: T) => boolean)) {\n  if (value === undefined)\n    return false\n  else if (Array.isArray(value))\n    return value.some(val => compare(val, currentValue, comparator))\n  else\n    return compare(value, currentValue, comparator)\n}\n\nexport function compare<T>(value?: T, currentValue?: T, comparator?: string | ((a: T, b: T) => boolean)) {\n  if (value === undefined || currentValue === undefined)\n    return false\n\n  if (typeof value === 'string')\n    return value === currentValue\n\n  if (typeof comparator === 'function')\n    return comparator(value, currentValue)\n\n  if (typeof comparator === 'string')\n    return value?.[comparator as keyof T] === currentValue?.[comparator as keyof T]\n\n  return isEqual(value, currentValue)\n}\n\nexport function shouldShowPlaceholder(value?: AcceptableValue | AcceptableValue[]): boolean {\n  return value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0)\n}\n"],"names":["isEqual"],"mappings":";;;;AAGO,MAAM,SAAY,GAAA,CAAC,GAAK,EAAA,OAAA,EAAS,WAAW,WAAW;AACjD,MAAA,cAAA,GAAiB,CAAC,GAAA,EAAK,OAAO;AACpC,MAAM,cAAiB,GAAA;AAEd,SAAA,eAAA,CAAmB,KAA4B,EAAA,YAAA,EAAiB,UAAiD,EAAA;AAC/H,EAAA,IAAI,KAAU,KAAA,MAAA;AACZ,IAAO,OAAA,KAAA;AAAA,OACA,IAAA,KAAA,CAAM,QAAQ,KAAK,CAAA;AAC1B,IAAA,OAAO,MAAM,IAAK,CAAA,CAAA,GAAA,KAAO,QAAQ,GAAK,EAAA,YAAA,EAAc,UAAU,CAAC,CAAA;AAAA;AAE/D,IAAO,OAAA,OAAA,CAAQ,KAAO,EAAA,YAAA,EAAc,UAAU,CAAA;AAClD;AAEgB,SAAA,OAAA,CAAW,KAAW,EAAA,YAAA,EAAkB,UAAiD,EAAA;AACvG,EAAI,IAAA,KAAA,KAAU,UAAa,YAAiB,KAAA,MAAA;AAC1C,IAAO,OAAA,KAAA;AAET,EAAA,IAAI,OAAO,KAAU,KAAA,QAAA;AACnB,IAAA,OAAO,KAAU,KAAA,YAAA;AAEnB,EAAA,IAAI,OAAO,UAAe,KAAA,UAAA;AACxB,IAAO,OAAA,UAAA,CAAW,OAAO,YAAY,CAAA;AAEvC,EAAA,IAAI,OAAO,UAAe,KAAA,QAAA;AACxB,IAAA,OAAO,KAAQ,GAAA,UAAqB,CAAM,KAAA,YAAA,GAAe,UAAqB,CAAA;AAEhF,EAAO,OAAAA,aAAA,CAAQ,OAAO,YAAY,CAAA;AACpC;AAEO,SAAS,sBAAsB,KAAsD,EAAA;AAC1F,EAAO,OAAA,KAAA,KAAU,MAAa,IAAA,KAAA,KAAU,IAAQ,IAAA,KAAA,KAAU,EAAO,IAAA,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAK,IAAA,KAAA,CAAM,MAAW,KAAA,CAAA;AAC5G;;;;;;;;;"}

package/dist/Select/utils.js

@@ -22,6 +22,9 @@ function compare(value, currentValue, comparator) {
     return value?.[comparator] === currentValue?.[comparator];
   return isEqual(value, currentValue);
 }
+function shouldShowPlaceholder(value) {
+  return value === void 0 || value === null || value === "" || Array.isArray(value) && value.length === 0;
+}
 
-export { CONTENT_MARGIN as C, OPEN_KEYS as O, SELECTION_KEYS as S, compare as c, valueComparator as v };
+export { CONTENT_MARGIN as C, OPEN_KEYS as O, SELECTION_KEYS as S, compare as c, shouldShowPlaceholder as s, valueComparator as v };
 //# sourceMappingURL=utils.js.map

package/dist/Select/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/Select/utils.ts"],"sourcesContent":["import { isEqual } from 'ohash'\n\nexport const OPEN_KEYS = [' ', 'Enter', 'ArrowUp', 'ArrowDown']\nexport const SELECTION_KEYS = [' ', 'Enter']\nexport const CONTENT_MARGIN = 10\n\nexport function valueComparator<T>(value: T | T[] | undefined, currentValue: T, comparator?: string | ((a: T, b: T) => boolean)) {\n  if (value === undefined)\n    return false\n  else if (Array.isArray(value))\n    return value.some(val => compare(val, currentValue, comparator))\n  else\n    return compare(value, currentValue, comparator)\n}\n\nexport function compare<T>(value?: T, currentValue?: T, comparator?: string | ((a: T, b: T) => boolean)) {\n  if (value === undefined || currentValue === undefined)\n    return false\n\n  if (typeof value === 'string')\n    return value === currentValue\n\n  if (typeof comparator === 'function')\n    return comparator(value, currentValue)\n\n  if (typeof comparator === 'string')\n    return value?.[comparator as keyof T] === currentValue?.[comparator as keyof T]\n\n  return isEqual(value, currentValue)\n}\n"],"names":[],"mappings":";;AAEO,MAAM,SAAY,GAAA,CAAC,GAAK,EAAA,OAAA,EAAS,WAAW,WAAW;AACjD,MAAA,cAAA,GAAiB,CAAC,GAAA,EAAK,OAAO;AACpC,MAAM,cAAiB,GAAA;AAEd,SAAA,eAAA,CAAmB,KAA4B,EAAA,YAAA,EAAiB,UAAiD,EAAA;AAC/H,EAAA,IAAI,KAAU,KAAA,MAAA;AACZ,IAAO,OAAA,KAAA;AAAA,OACA,IAAA,KAAA,CAAM,QAAQ,KAAK,CAAA;AAC1B,IAAA,OAAO,MAAM,IAAK,CAAA,CAAA,GAAA,KAAO,QAAQ,GAAK,EAAA,YAAA,EAAc,UAAU,CAAC,CAAA;AAAA;AAE/D,IAAO,OAAA,OAAA,CAAQ,KAAO,EAAA,YAAA,EAAc,UAAU,CAAA;AAClD;AAEgB,SAAA,OAAA,CAAW,KAAW,EAAA,YAAA,EAAkB,UAAiD,EAAA;AACvG,EAAI,IAAA,KAAA,KAAU,UAAa,YAAiB,KAAA,MAAA;AAC1C,IAAO,OAAA,KAAA;AAET,EAAA,IAAI,OAAO,KAAU,KAAA,QAAA;AACnB,IAAA,OAAO,KAAU,KAAA,YAAA;AAEnB,EAAA,IAAI,OAAO,UAAe,KAAA,UAAA;AACxB,IAAO,OAAA,UAAA,CAAW,OAAO,YAAY,CAAA;AAEvC,EAAA,IAAI,OAAO,UAAe,KAAA,QAAA;AACxB,IAAA,OAAO,KAAQ,GAAA,UAAqB,CAAM,KAAA,YAAA,GAAe,UAAqB,CAAA;AAEhF,EAAO,OAAA,OAAA,CAAQ,OAAO,YAAY,CAAA;AACpC;;;;"}
+{"version":3,"file":"utils.js","sources":["../../src/Select/utils.ts"],"sourcesContent":["import type { AcceptableValue } from '@/shared/types'\nimport { isEqual } from 'ohash'\n\nexport const OPEN_KEYS = [' ', 'Enter', 'ArrowUp', 'ArrowDown']\nexport const SELECTION_KEYS = [' ', 'Enter']\nexport const CONTENT_MARGIN = 10\n\nexport function valueComparator<T>(value: T | T[] | undefined, currentValue: T, comparator?: string | ((a: T, b: T) => boolean)) {\n  if (value === undefined)\n    return false\n  else if (Array.isArray(value))\n    return value.some(val => compare(val, currentValue, comparator))\n  else\n    return compare(value, currentValue, comparator)\n}\n\nexport function compare<T>(value?: T, currentValue?: T, comparator?: string | ((a: T, b: T) => boolean)) {\n  if (value === undefined || currentValue === undefined)\n    return false\n\n  if (typeof value === 'string')\n    return value === currentValue\n\n  if (typeof comparator === 'function')\n    return comparator(value, currentValue)\n\n  if (typeof comparator === 'string')\n    return value?.[comparator as keyof T] === currentValue?.[comparator as keyof T]\n\n  return isEqual(value, currentValue)\n}\n\nexport function shouldShowPlaceholder(value?: AcceptableValue | AcceptableValue[]): boolean {\n  return value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0)\n}\n"],"names":[],"mappings":";;AAGO,MAAM,SAAY,GAAA,CAAC,GAAK,EAAA,OAAA,EAAS,WAAW,WAAW;AACjD,MAAA,cAAA,GAAiB,CAAC,GAAA,EAAK,OAAO;AACpC,MAAM,cAAiB,GAAA;AAEd,SAAA,eAAA,CAAmB,KAA4B,EAAA,YAAA,EAAiB,UAAiD,EAAA;AAC/H,EAAA,IAAI,KAAU,KAAA,MAAA;AACZ,IAAO,OAAA,KAAA;AAAA,OACA,IAAA,KAAA,CAAM,QAAQ,KAAK,CAAA;AAC1B,IAAA,OAAO,MAAM,IAAK,CAAA,CAAA,GAAA,KAAO,QAAQ,GAAK,EAAA,YAAA,EAAc,UAAU,CAAC,CAAA;AAAA;AAE/D,IAAO,OAAA,OAAA,CAAQ,KAAO,EAAA,YAAA,EAAc,UAAU,CAAA;AAClD;AAEgB,SAAA,OAAA,CAAW,KAAW,EAAA,YAAA,EAAkB,UAAiD,EAAA;AACvG,EAAI,IAAA,KAAA,KAAU,UAAa,YAAiB,KAAA,MAAA;AAC1C,IAAO,OAAA,KAAA;AAET,EAAA,IAAI,OAAO,KAAU,KAAA,QAAA;AACnB,IAAA,OAAO,KAAU,KAAA,YAAA;AAEnB,EAAA,IAAI,OAAO,UAAe,KAAA,UAAA;AACxB,IAAO,OAAA,UAAA,CAAW,OAAO,YAAY,CAAA;AAEvC,EAAA,IAAI,OAAO,UAAe,KAAA,QAAA;AACxB,IAAA,OAAO,KAAQ,GAAA,UAAqB,CAAM,KAAA,YAAA,GAAe,UAAqB,CAAA;AAEhF,EAAO,OAAA,OAAA,CAAQ,OAAO,YAAY,CAAA;AACpC;AAEO,SAAS,sBAAsB,KAAsD,EAAA;AAC1F,EAAO,OAAA,KAAA,KAAU,MAAa,IAAA,KAAA,KAAU,IAAQ,IAAA,KAAA,KAAU,EAAO,IAAA,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAK,IAAA,KAAA,CAAM,MAAW,KAAA,CAAA;AAC5G;;;;"}

package/dist/Slider/SliderHorizontal.cjs

@@ -23,7 +23,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const rootContext = Slider_SliderRoot.injectSliderRootContext();
     const offsetPosition = vue.ref();
     const rectRef = vue.ref();
-    const isSlidingFromLeft = vue.computed(() => dir?.value === "ltr" && !inverted.value || dir?.value !== "ltr" && inverted.value);
+    const isSlidingFromLeft = vue.computed(() => dir?.value !== "rtl" && !inverted.value || dir?.value !== "ltr" && inverted.value);
     function getValueFromPointerEvent(event, slideStart) {
       const rect = rectRef.value || sliderElement.value.getBoundingClientRect();
       const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value];
@@ -38,10 +38,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       const position = slideStart ? event.clientX - rect.left - thumbWidth / 2 : event.clientX - rect.left - (offsetPosition.value ?? 0);
       return value(position);
     }
+    const startEdge = vue.computed(() => isSlidingFromLeft.value ? "left" : "right");
+    const endEdge = vue.computed(() => isSlidingFromLeft.value ? "right" : "left");
+    const direction = vue.computed(() => isSlidingFromLeft.value ? 1 : -1);
     Slider_utils.provideSliderOrientationContext({
-      startEdge: isSlidingFromLeft.value ? "left" : "right",
-      endEdge: isSlidingFromLeft.value ? "right" : "left",
-      direction: isSlidingFromLeft.value ? 1 : -1,
+      startEdge,
+      endEdge,
+      direction,
       size: "width"
     });
     return (_ctx, _cache) => {

package/dist/Slider/SliderHorizontal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliderHorizontal.cjs","sources":["../../src/Slider/SliderHorizontal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport SliderImpl from './SliderImpl.vue'\nimport { computed, ref, toRefs } from 'vue'\nimport type { Direction, SliderOrientationPrivateEmits, SliderOrientationPrivateProps } from './utils'\nimport { BACK_KEYS, linearScale, provideSliderOrientationContext } from './utils'\nimport { useForwardExpose } from '@/shared'\nimport { injectSliderRootContext } from './SliderRoot.vue'\n\ninterface SliderHorizontalProps extends SliderOrientationPrivateProps {\n  dir?: Direction\n}\n\nconst props = defineProps<SliderHorizontalProps>()\nconst emits = defineEmits<SliderOrientationPrivateEmits>()\nconst { max, min, dir, inverted } = toRefs(props)\n\nconst { forwardRef, currentElement: sliderElement } = useForwardExpose()\nconst rootContext = injectSliderRootContext()\n\nconst offsetPosition = ref<number>()\nconst rectRef = ref<ClientRect>()\nconst isSlidingFromLeft = computed(() => (dir?.value === 'ltr' && !inverted.value) || (dir?.value !== 'ltr' && 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 thumbWidth = rootContext.thumbAlignment.value === 'contain' ? thumb.clientWidth : 0\n\n  // Calculate offset for dragging, but only when needed\n  if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === 'contain') {\n    offsetPosition.value = event.clientX - thumb.getBoundingClientRect().left\n  }\n\n  // Define the input range (slider track width minus thumb width)\n  const input: [number, number] = [0, rect.width - thumbWidth]\n  const output: [number, number] = isSlidingFromLeft.value ? [min.value, max.value] : [max.value, min.value]\n  const value = linearScale(input, output)\n\n  rectRef.value = rect\n  const position = slideStart\n    ? event.clientX - rect.left - thumbWidth / 2\n    : event.clientX - rect.left - (offsetPosition.value ?? 0)\n\n  return value(position)\n}\n\nprovideSliderOrientationContext({\n  startEdge: isSlidingFromLeft.value ? 'left' : 'right',\n  endEdge: isSlidingFromLeft.value ? 'right' : 'left',\n  direction: isSlidingFromLeft.value ? 1 : -1,\n  size: 'width',\n})\n</script>\n\n<template>\n  <SliderImpl\n    :ref=\"forwardRef\"\n    :dir=\"dir\"\n    data-orientation=\"horizontal\"\n    :style=\"{\n      ['--reka-slider-thumb-transform' as any]:\n        !isSlidingFromLeft && rootContext.thumbAlignment.value === 'overflow' ? 'translateX(50%)' : 'translateX(-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 = isSlidingFromLeft ? 'from-left' : 'from-right';\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","useForwardExpose","injectSliderRootContext","ref","computed","linearScale","provideSliderOrientationContext"],"mappings":";;;;;;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAA,MAAM,EAAE,GAAK,EAAA,GAAA,EAAK,KAAK,QAAS,EAAA,GAAIA,WAAO,KAAK,CAAA;AAEhD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,aAAA,KAAkBC,wCAAiB,EAAA;AACvE,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAE5C,IAAA,MAAM,iBAAiBC,OAAY,EAAA;AACnC,IAAA,MAAM,UAAUA,OAAgB,EAAA;AAChC,IAAA,MAAM,iBAAoB,GAAAC,YAAA,CAAS,MAAO,GAAA,EAAK,KAAU,KAAA,KAAA,IAAS,CAAC,QAAA,CAAS,KAAW,IAAA,GAAA,EAAK,KAAU,KAAA,KAAA,IAAS,SAAS,KAAM,CAAA;AAE9H,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,aAAa,WAAY,CAAA,cAAA,CAAe,KAAU,KAAA,SAAA,GAAY,MAAM,WAAc,GAAA,CAAA;AAGxF,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,IAAA;AAAA;AAIvE,MAAA,MAAM,KAA0B,GAAA,CAAC,CAAG,EAAA,IAAA,CAAK,QAAQ,UAAU,CAAA;AAC3D,MAAA,MAAM,MAA2B,GAAA,iBAAA,CAAkB,KAAQ,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,GAAI,CAAA,KAAK,CAAI,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,IAAI,KAAK,CAAA;AACzG,MAAM,MAAA,KAAA,GAAQC,wBAAY,CAAA,KAAA,EAAO,MAAM,CAAA;AAEvC,MAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA;AAChB,MAAA,MAAM,QAAW,GAAA,UAAA,GACb,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,IAAA,GAAO,UAAa,GAAA,CAAA,GACzC,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,IAAA,IAAQ,eAAe,KAAS,IAAA,CAAA,CAAA;AAEzD,MAAA,OAAO,MAAM,QAAQ,CAAA;AAAA;AAGvB,IAAgCC,4CAAA,CAAA;AAAA,MAC9B,SAAA,EAAW,iBAAkB,CAAA,KAAA,GAAQ,MAAS,GAAA,OAAA;AAAA,MAC9C,OAAA,EAAS,iBAAkB,CAAA,KAAA,GAAQ,OAAU,GAAA,MAAA;AAAA,MAC7C,SAAA,EAAW,iBAAkB,CAAA,KAAA,GAAQ,CAAI,GAAA,EAAA;AAAA,MACzC,IAAM,EAAA;AAAA,KACP,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SliderHorizontal.cjs","sources":["../../src/Slider/SliderHorizontal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Direction, 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 SliderHorizontalProps extends SliderOrientationPrivateProps {\n  dir?: Direction\n}\n\nconst props = defineProps<SliderHorizontalProps>()\nconst emits = defineEmits<SliderOrientationPrivateEmits>()\nconst { max, min, dir, inverted } = toRefs(props)\n\nconst { forwardRef, currentElement: sliderElement } = useForwardExpose()\nconst rootContext = injectSliderRootContext()\n\nconst offsetPosition = ref<number>()\nconst rectRef = ref<DOMRect>()\nconst isSlidingFromLeft = computed(() => (dir?.value !== 'rtl' && !inverted.value) || (dir?.value !== 'ltr' && 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 thumbWidth = rootContext.thumbAlignment.value === 'contain' ? thumb.clientWidth : 0\n\n  // Calculate offset for dragging, but only when needed\n  if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === 'contain') {\n    offsetPosition.value = event.clientX - thumb.getBoundingClientRect().left\n  }\n\n  // Define the input range (slider track width minus thumb width)\n  const input: [number, number] = [0, rect.width - thumbWidth]\n  const output: [number, number] = isSlidingFromLeft.value ? [min.value, max.value] : [max.value, min.value]\n  const value = linearScale(input, output)\n\n  rectRef.value = rect\n  const position = slideStart\n    ? event.clientX - rect.left - thumbWidth / 2\n    : event.clientX - rect.left - (offsetPosition.value ?? 0)\n\n  return value(position)\n}\n\nconst startEdge = computed(() => isSlidingFromLeft.value ? 'left' : 'right')\nconst endEdge = computed(() => isSlidingFromLeft.value ? 'right' : 'left')\nconst direction = computed(() => isSlidingFromLeft.value ? 1 : -1)\n\nprovideSliderOrientationContext({\n  startEdge,\n  endEdge,\n  direction,\n  size: 'width',\n})\n</script>\n\n<template>\n  <SliderImpl\n    :ref=\"forwardRef\"\n    :dir=\"dir\"\n    data-orientation=\"horizontal\"\n    :style=\"{\n      ['--reka-slider-thumb-transform' as any]:\n        !isSlidingFromLeft && rootContext.thumbAlignment.value === 'overflow' ? 'translateX(50%)' : 'translateX(-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 = isSlidingFromLeft ? 'from-left' : 'from-right';\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","useForwardExpose","injectSliderRootContext","ref","computed","linearScale","provideSliderOrientationContext"],"mappings":";;;;;;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAA,MAAM,EAAE,GAAK,EAAA,GAAA,EAAK,KAAK,QAAS,EAAA,GAAIA,WAAO,KAAK,CAAA;AAEhD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,aAAA,KAAkBC,wCAAiB,EAAA;AACvE,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAE5C,IAAA,MAAM,iBAAiBC,OAAY,EAAA;AACnC,IAAA,MAAM,UAAUA,OAAa,EAAA;AAC7B,IAAA,MAAM,iBAAoB,GAAAC,YAAA,CAAS,MAAO,GAAA,EAAK,KAAU,KAAA,KAAA,IAAS,CAAC,QAAA,CAAS,KAAW,IAAA,GAAA,EAAK,KAAU,KAAA,KAAA,IAAS,SAAS,KAAM,CAAA;AAE9H,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,aAAa,WAAY,CAAA,cAAA,CAAe,KAAU,KAAA,SAAA,GAAY,MAAM,WAAc,GAAA,CAAA;AAGxF,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,IAAA;AAAA;AAIvE,MAAA,MAAM,KAA0B,GAAA,CAAC,CAAG,EAAA,IAAA,CAAK,QAAQ,UAAU,CAAA;AAC3D,MAAA,MAAM,MAA2B,GAAA,iBAAA,CAAkB,KAAQ,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,GAAI,CAAA,KAAK,CAAI,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,IAAI,KAAK,CAAA;AACzG,MAAM,MAAA,KAAA,GAAQC,wBAAY,CAAA,KAAA,EAAO,MAAM,CAAA;AAEvC,MAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA;AAChB,MAAA,MAAM,QAAW,GAAA,UAAA,GACb,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,IAAA,GAAO,UAAa,GAAA,CAAA,GACzC,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,IAAA,IAAQ,eAAe,KAAS,IAAA,CAAA,CAAA;AAEzD,MAAA,OAAO,MAAM,QAAQ,CAAA;AAAA;AAGvB,IAAA,MAAM,YAAYD,YAAS,CAAA,MAAM,iBAAkB,CAAA,KAAA,GAAQ,SAAS,OAAO,CAAA;AAC3E,IAAA,MAAM,UAAUA,YAAS,CAAA,MAAM,iBAAkB,CAAA,KAAA,GAAQ,UAAU,MAAM,CAAA;AACzE,IAAA,MAAM,YAAYA,YAAS,CAAA,MAAM,iBAAkB,CAAA,KAAA,GAAQ,IAAI,EAAE,CAAA;AAEjE,IAAgCE,4CAAA,CAAA;AAAA,MAC9B,SAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAM,EAAA;AAAA,KACP,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Slider/SliderHorizontal.js

@@ -21,7 +21,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const rootContext = injectSliderRootContext();
     const offsetPosition = ref();
     const rectRef = ref();
-    const isSlidingFromLeft = computed(() => dir?.value === "ltr" && !inverted.value || dir?.value !== "ltr" && inverted.value);
+    const isSlidingFromLeft = computed(() => dir?.value !== "rtl" && !inverted.value || dir?.value !== "ltr" && inverted.value);
     function getValueFromPointerEvent(event, slideStart) {
       const rect = rectRef.value || sliderElement.value.getBoundingClientRect();
       const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value];
@@ -36,10 +36,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const position = slideStart ? event.clientX - rect.left - thumbWidth / 2 : event.clientX - rect.left - (offsetPosition.value ?? 0);
       return value(position);
     }
+    const startEdge = computed(() => isSlidingFromLeft.value ? "left" : "right");
+    const endEdge = computed(() => isSlidingFromLeft.value ? "right" : "left");
+    const direction = computed(() => isSlidingFromLeft.value ? 1 : -1);
     provideSliderOrientationContext({
-      startEdge: isSlidingFromLeft.value ? "left" : "right",
-      endEdge: isSlidingFromLeft.value ? "right" : "left",
-      direction: isSlidingFromLeft.value ? 1 : -1,
+      startEdge,
+      endEdge,
+      direction,
       size: "width"
     });
     return (_ctx, _cache) => {

package/dist/Slider/SliderHorizontal.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderHorizontal.js","sources":["../../src/Slider/SliderHorizontal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport SliderImpl from './SliderImpl.vue'\nimport { computed, ref, toRefs } from 'vue'\nimport type { Direction, SliderOrientationPrivateEmits, SliderOrientationPrivateProps } from './utils'\nimport { BACK_KEYS, linearScale, provideSliderOrientationContext } from './utils'\nimport { useForwardExpose } from '@/shared'\nimport { injectSliderRootContext } from './SliderRoot.vue'\n\ninterface SliderHorizontalProps extends SliderOrientationPrivateProps {\n  dir?: Direction\n}\n\nconst props = defineProps<SliderHorizontalProps>()\nconst emits = defineEmits<SliderOrientationPrivateEmits>()\nconst { max, min, dir, inverted } = toRefs(props)\n\nconst { forwardRef, currentElement: sliderElement } = useForwardExpose()\nconst rootContext = injectSliderRootContext()\n\nconst offsetPosition = ref<number>()\nconst rectRef = ref<ClientRect>()\nconst isSlidingFromLeft = computed(() => (dir?.value === 'ltr' && !inverted.value) || (dir?.value !== 'ltr' && 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 thumbWidth = rootContext.thumbAlignment.value === 'contain' ? thumb.clientWidth : 0\n\n  // Calculate offset for dragging, but only when needed\n  if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === 'contain') {\n    offsetPosition.value = event.clientX - thumb.getBoundingClientRect().left\n  }\n\n  // Define the input range (slider track width minus thumb width)\n  const input: [number, number] = [0, rect.width - thumbWidth]\n  const output: [number, number] = isSlidingFromLeft.value ? [min.value, max.value] : [max.value, min.value]\n  const value = linearScale(input, output)\n\n  rectRef.value = rect\n  const position = slideStart\n    ? event.clientX - rect.left - thumbWidth / 2\n    : event.clientX - rect.left - (offsetPosition.value ?? 0)\n\n  return value(position)\n}\n\nprovideSliderOrientationContext({\n  startEdge: isSlidingFromLeft.value ? 'left' : 'right',\n  endEdge: isSlidingFromLeft.value ? 'right' : 'left',\n  direction: isSlidingFromLeft.value ? 1 : -1,\n  size: 'width',\n})\n</script>\n\n<template>\n  <SliderImpl\n    :ref=\"forwardRef\"\n    :dir=\"dir\"\n    data-orientation=\"horizontal\"\n    :style=\"{\n      ['--reka-slider-thumb-transform' as any]:\n        !isSlidingFromLeft && rootContext.thumbAlignment.value === 'overflow' ? 'translateX(50%)' : 'translateX(-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 = isSlidingFromLeft ? 'from-left' : 'from-right';\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":";;;;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAA,MAAM,EAAE,GAAK,EAAA,GAAA,EAAK,KAAK,QAAS,EAAA,GAAI,OAAO,KAAK,CAAA;AAEhD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,aAAA,KAAkB,gBAAiB,EAAA;AACvE,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAA,MAAM,iBAAiB,GAAY,EAAA;AACnC,IAAA,MAAM,UAAU,GAAgB,EAAA;AAChC,IAAA,MAAM,iBAAoB,GAAA,QAAA,CAAS,MAAO,GAAA,EAAK,KAAU,KAAA,KAAA,IAAS,CAAC,QAAA,CAAS,KAAW,IAAA,GAAA,EAAK,KAAU,KAAA,KAAA,IAAS,SAAS,KAAM,CAAA;AAE9H,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,aAAa,WAAY,CAAA,cAAA,CAAe,KAAU,KAAA,SAAA,GAAY,MAAM,WAAc,GAAA,CAAA;AAGxF,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,IAAA;AAAA;AAIvE,MAAA,MAAM,KAA0B,GAAA,CAAC,CAAG,EAAA,IAAA,CAAK,QAAQ,UAAU,CAAA;AAC3D,MAAA,MAAM,MAA2B,GAAA,iBAAA,CAAkB,KAAQ,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,GAAI,CAAA,KAAK,CAAI,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,IAAI,KAAK,CAAA;AACzG,MAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,KAAA,EAAO,MAAM,CAAA;AAEvC,MAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA;AAChB,MAAA,MAAM,QAAW,GAAA,UAAA,GACb,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,IAAA,GAAO,UAAa,GAAA,CAAA,GACzC,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,IAAA,IAAQ,eAAe,KAAS,IAAA,CAAA,CAAA;AAEzD,MAAA,OAAO,MAAM,QAAQ,CAAA;AAAA;AAGvB,IAAgC,+BAAA,CAAA;AAAA,MAC9B,SAAA,EAAW,iBAAkB,CAAA,KAAA,GAAQ,MAAS,GAAA,OAAA;AAAA,MAC9C,OAAA,EAAS,iBAAkB,CAAA,KAAA,GAAQ,OAAU,GAAA,MAAA;AAAA,MAC7C,SAAA,EAAW,iBAAkB,CAAA,KAAA,GAAQ,CAAI,GAAA,EAAA;AAAA,MACzC,IAAM,EAAA;AAAA,KACP,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SliderHorizontal.js","sources":["../../src/Slider/SliderHorizontal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Direction, 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 SliderHorizontalProps extends SliderOrientationPrivateProps {\n  dir?: Direction\n}\n\nconst props = defineProps<SliderHorizontalProps>()\nconst emits = defineEmits<SliderOrientationPrivateEmits>()\nconst { max, min, dir, inverted } = toRefs(props)\n\nconst { forwardRef, currentElement: sliderElement } = useForwardExpose()\nconst rootContext = injectSliderRootContext()\n\nconst offsetPosition = ref<number>()\nconst rectRef = ref<DOMRect>()\nconst isSlidingFromLeft = computed(() => (dir?.value !== 'rtl' && !inverted.value) || (dir?.value !== 'ltr' && 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 thumbWidth = rootContext.thumbAlignment.value === 'contain' ? thumb.clientWidth : 0\n\n  // Calculate offset for dragging, but only when needed\n  if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === 'contain') {\n    offsetPosition.value = event.clientX - thumb.getBoundingClientRect().left\n  }\n\n  // Define the input range (slider track width minus thumb width)\n  const input: [number, number] = [0, rect.width - thumbWidth]\n  const output: [number, number] = isSlidingFromLeft.value ? [min.value, max.value] : [max.value, min.value]\n  const value = linearScale(input, output)\n\n  rectRef.value = rect\n  const position = slideStart\n    ? event.clientX - rect.left - thumbWidth / 2\n    : event.clientX - rect.left - (offsetPosition.value ?? 0)\n\n  return value(position)\n}\n\nconst startEdge = computed(() => isSlidingFromLeft.value ? 'left' : 'right')\nconst endEdge = computed(() => isSlidingFromLeft.value ? 'right' : 'left')\nconst direction = computed(() => isSlidingFromLeft.value ? 1 : -1)\n\nprovideSliderOrientationContext({\n  startEdge,\n  endEdge,\n  direction,\n  size: 'width',\n})\n</script>\n\n<template>\n  <SliderImpl\n    :ref=\"forwardRef\"\n    :dir=\"dir\"\n    data-orientation=\"horizontal\"\n    :style=\"{\n      ['--reka-slider-thumb-transform' as any]:\n        !isSlidingFromLeft && rootContext.thumbAlignment.value === 'overflow' ? 'translateX(50%)' : 'translateX(-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 = isSlidingFromLeft ? 'from-left' : 'from-right';\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":";;;;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAA,MAAM,EAAE,GAAK,EAAA,GAAA,EAAK,KAAK,QAAS,EAAA,GAAI,OAAO,KAAK,CAAA;AAEhD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,aAAA,KAAkB,gBAAiB,EAAA;AACvE,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAA,MAAM,iBAAiB,GAAY,EAAA;AACnC,IAAA,MAAM,UAAU,GAAa,EAAA;AAC7B,IAAA,MAAM,iBAAoB,GAAA,QAAA,CAAS,MAAO,GAAA,EAAK,KAAU,KAAA,KAAA,IAAS,CAAC,QAAA,CAAS,KAAW,IAAA,GAAA,EAAK,KAAU,KAAA,KAAA,IAAS,SAAS,KAAM,CAAA;AAE9H,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,aAAa,WAAY,CAAA,cAAA,CAAe,KAAU,KAAA,SAAA,GAAY,MAAM,WAAc,GAAA,CAAA;AAGxF,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,IAAA;AAAA;AAIvE,MAAA,MAAM,KAA0B,GAAA,CAAC,CAAG,EAAA,IAAA,CAAK,QAAQ,UAAU,CAAA;AAC3D,MAAA,MAAM,MAA2B,GAAA,iBAAA,CAAkB,KAAQ,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,GAAI,CAAA,KAAK,CAAI,GAAA,CAAC,GAAI,CAAA,KAAA,EAAO,IAAI,KAAK,CAAA;AACzG,MAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,KAAA,EAAO,MAAM,CAAA;AAEvC,MAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA;AAChB,MAAA,MAAM,QAAW,GAAA,UAAA,GACb,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,IAAA,GAAO,UAAa,GAAA,CAAA,GACzC,KAAM,CAAA,OAAA,GAAU,IAAK,CAAA,IAAA,IAAQ,eAAe,KAAS,IAAA,CAAA,CAAA;AAEzD,MAAA,OAAO,MAAM,QAAQ,CAAA;AAAA;AAGvB,IAAA,MAAM,YAAY,QAAS,CAAA,MAAM,iBAAkB,CAAA,KAAA,GAAQ,SAAS,OAAO,CAAA;AAC3E,IAAA,MAAM,UAAU,QAAS,CAAA,MAAM,iBAAkB,CAAA,KAAA,GAAQ,UAAU,MAAM,CAAA;AACzE,IAAA,MAAM,YAAY,QAAS,CAAA,MAAM,iBAAkB,CAAA,KAAA,GAAQ,IAAI,EAAE,CAAA;AAEjE,IAAgC,+BAAA,CAAA;AAAA,MAC9B,SAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAM,EAAA;AAAA,KACP,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Slider/SliderRange.cjs

@@ -28,8 +28,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         "as-child": _ctx.asChild,
         as: _ctx.as,
         style: vue.normalizeStyle({
-          [vue.unref(orientation).startEdge]: `${offsetStart.value}%`,
-          [vue.unref(orientation).endEdge]: `${offsetEnd.value}%`
+          [vue.unref(orientation).startEdge.value]: `${offsetStart.value}%`,
+          [vue.unref(orientation).endEdge.value]: `${offsetEnd.value}%`
         })
       }, {
         default: vue.withCtx(() => [

package/dist/Slider/SliderRange.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliderRange.cjs","sources":["../../src/Slider/SliderRange.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SliderRangeProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { injectSliderRootContext } from './SliderRoot.vue'\nimport { convertValueToPercentage, injectSliderOrientationContext } from './utils'\n\nwithDefaults(defineProps<SliderRangeProps>(), { as: 'span' })\nconst rootContext = injectSliderRootContext()\nconst orientation = injectSliderOrientationContext()\n\nuseForwardExpose()\nconst percentages = computed(() => rootContext.currentModelValue.value.map(value =>\n  convertValueToPercentage(value, rootContext.min.value, rootContext.max.value),\n))\n\nconst offsetStart = computed(() => rootContext.currentModelValue.value.length > 1 ? Math.min(...percentages.value!) : 0)\nconst offsetEnd = computed(() => 100 - Math.max(...percentages.value, 0))\n</script>\n\n<template>\n  <Primitive\n    :data-disabled=\"rootContext.disabled.value ? '' : undefined\"\n    :data-orientation=\"rootContext.orientation.value\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n    :style=\"{\n      [orientation!.startEdge]: `${offsetStart}%`,\n      [orientation!.endEdge]: `${offsetEnd}%`,\n    }\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectSliderRootContext","injectSliderOrientationContext","useForwardExpose","computed","convertValueToPercentage"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAA,MAAM,cAAcC,2CAA+B,EAAA;AAEnD,IAAiBC,wCAAA,EAAA;AACjB,IAAA,MAAM,WAAc,GAAAC,YAAA,CAAS,MAAM,WAAA,CAAY,kBAAkB,KAAM,CAAA,GAAA;AAAA,MAAI,CAAA,KAAA,KACzEC,sCAAyB,KAAO,EAAA,WAAA,CAAY,IAAI,KAAO,EAAA,WAAA,CAAY,IAAI,KAAK;AAAA,KAC7E,CAAA;AAED,IAAA,MAAM,WAAc,GAAAD,YAAA,CAAS,MAAM,WAAA,CAAY,kBAAkB,KAAM,CAAA,MAAA,GAAS,CAAI,GAAA,IAAA,CAAK,GAAI,CAAA,GAAG,WAAY,CAAA,KAAM,IAAI,CAAC,CAAA;AACvH,IAAM,MAAA,SAAA,GAAYA,YAAS,CAAA,MAAM,GAAM,GAAA,IAAA,CAAK,IAAI,GAAG,WAAA,CAAY,KAAO,EAAA,CAAC,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SliderRange.cjs","sources":["../../src/Slider/SliderRange.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SliderRangeProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { injectSliderRootContext } from './SliderRoot.vue'\nimport { convertValueToPercentage, injectSliderOrientationContext } from './utils'\n\nwithDefaults(defineProps<SliderRangeProps>(), { as: 'span' })\nconst rootContext = injectSliderRootContext()\nconst orientation = injectSliderOrientationContext()\n\nuseForwardExpose()\nconst percentages = computed(() => rootContext.currentModelValue.value.map(value =>\n  convertValueToPercentage(value, rootContext.min.value, rootContext.max.value),\n))\n\nconst offsetStart = computed(() => rootContext.currentModelValue.value.length > 1 ? Math.min(...percentages.value!) : 0)\nconst offsetEnd = computed(() => 100 - Math.max(...percentages.value, 0))\n</script>\n\n<template>\n  <Primitive\n    :data-disabled=\"rootContext.disabled.value ? '' : undefined\"\n    :data-orientation=\"rootContext.orientation.value\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n    :style=\"{\n      [orientation!.startEdge.value]: `${offsetStart}%`,\n      [orientation!.endEdge.value]: `${offsetEnd}%`,\n    }\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectSliderRootContext","injectSliderOrientationContext","useForwardExpose","computed","convertValueToPercentage"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAA,MAAM,cAAcC,2CAA+B,EAAA;AAEnD,IAAiBC,wCAAA,EAAA;AACjB,IAAA,MAAM,WAAc,GAAAC,YAAA,CAAS,MAAM,WAAA,CAAY,kBAAkB,KAAM,CAAA,GAAA;AAAA,MAAI,CAAA,KAAA,KACzEC,sCAAyB,KAAO,EAAA,WAAA,CAAY,IAAI,KAAO,EAAA,WAAA,CAAY,IAAI,KAAK;AAAA,KAC7E,CAAA;AAED,IAAA,MAAM,WAAc,GAAAD,YAAA,CAAS,MAAM,WAAA,CAAY,kBAAkB,KAAM,CAAA,MAAA,GAAS,CAAI,GAAA,IAAA,CAAK,GAAI,CAAA,GAAG,WAAY,CAAA,KAAM,IAAI,CAAC,CAAA;AACvH,IAAM,MAAA,SAAA,GAAYA,YAAS,CAAA,MAAM,GAAM,GAAA,IAAA,CAAK,IAAI,GAAG,WAAA,CAAY,KAAO,EAAA,CAAC,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Slider/SliderRange.js

@@ -26,8 +26,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "as-child": _ctx.asChild,
         as: _ctx.as,
         style: normalizeStyle({
-          [unref(orientation).startEdge]: `${offsetStart.value}%`,
-          [unref(orientation).endEdge]: `${offsetEnd.value}%`
+          [unref(orientation).startEdge.value]: `${offsetStart.value}%`,
+          [unref(orientation).endEdge.value]: `${offsetEnd.value}%`
         })
       }, {
         default: withCtx(() => [

package/dist/Slider/SliderRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderRange.js","sources":["../../src/Slider/SliderRange.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SliderRangeProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { injectSliderRootContext } from './SliderRoot.vue'\nimport { convertValueToPercentage, injectSliderOrientationContext } from './utils'\n\nwithDefaults(defineProps<SliderRangeProps>(), { as: 'span' })\nconst rootContext = injectSliderRootContext()\nconst orientation = injectSliderOrientationContext()\n\nuseForwardExpose()\nconst percentages = computed(() => rootContext.currentModelValue.value.map(value =>\n  convertValueToPercentage(value, rootContext.min.value, rootContext.max.value),\n))\n\nconst offsetStart = computed(() => rootContext.currentModelValue.value.length > 1 ? Math.min(...percentages.value!) : 0)\nconst offsetEnd = computed(() => 100 - Math.max(...percentages.value, 0))\n</script>\n\n<template>\n  <Primitive\n    :data-disabled=\"rootContext.disabled.value ? '' : undefined\"\n    :data-orientation=\"rootContext.orientation.value\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n    :style=\"{\n      [orientation!.startEdge]: `${offsetStart}%`,\n      [orientation!.endEdge]: `${offsetEnd}%`,\n    }\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAcA,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,cAAc,8BAA+B,EAAA;AAEnD,IAAiB,gBAAA,EAAA;AACjB,IAAA,MAAM,WAAc,GAAA,QAAA,CAAS,MAAM,WAAA,CAAY,kBAAkB,KAAM,CAAA,GAAA;AAAA,MAAI,CAAA,KAAA,KACzE,yBAAyB,KAAO,EAAA,WAAA,CAAY,IAAI,KAAO,EAAA,WAAA,CAAY,IAAI,KAAK;AAAA,KAC7E,CAAA;AAED,IAAA,MAAM,WAAc,GAAA,QAAA,CAAS,MAAM,WAAA,CAAY,kBAAkB,KAAM,CAAA,MAAA,GAAS,CAAI,GAAA,IAAA,CAAK,GAAI,CAAA,GAAG,WAAY,CAAA,KAAM,IAAI,CAAC,CAAA;AACvH,IAAM,MAAA,SAAA,GAAY,QAAS,CAAA,MAAM,GAAM,GAAA,IAAA,CAAK,IAAI,GAAG,WAAA,CAAY,KAAO,EAAA,CAAC,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SliderRange.js","sources":["../../src/Slider/SliderRange.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface SliderRangeProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { injectSliderRootContext } from './SliderRoot.vue'\nimport { convertValueToPercentage, injectSliderOrientationContext } from './utils'\n\nwithDefaults(defineProps<SliderRangeProps>(), { as: 'span' })\nconst rootContext = injectSliderRootContext()\nconst orientation = injectSliderOrientationContext()\n\nuseForwardExpose()\nconst percentages = computed(() => rootContext.currentModelValue.value.map(value =>\n  convertValueToPercentage(value, rootContext.min.value, rootContext.max.value),\n))\n\nconst offsetStart = computed(() => rootContext.currentModelValue.value.length > 1 ? Math.min(...percentages.value!) : 0)\nconst offsetEnd = computed(() => 100 - Math.max(...percentages.value, 0))\n</script>\n\n<template>\n  <Primitive\n    :data-disabled=\"rootContext.disabled.value ? '' : undefined\"\n    :data-orientation=\"rootContext.orientation.value\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n    :style=\"{\n      [orientation!.startEdge.value]: `${offsetStart}%`,\n      [orientation!.endEdge.value]: `${offsetEnd}%`,\n    }\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAcA,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,cAAc,8BAA+B,EAAA;AAEnD,IAAiB,gBAAA,EAAA;AACjB,IAAA,MAAM,WAAc,GAAA,QAAA,CAAS,MAAM,WAAA,CAAY,kBAAkB,KAAM,CAAA,GAAA;AAAA,MAAI,CAAA,KAAA,KACzE,yBAAyB,KAAO,EAAA,WAAA,CAAY,IAAI,KAAO,EAAA,WAAA,CAAY,IAAI,KAAK;AAAA,KAC7E,CAAA;AAED,IAAA,MAAM,WAAc,GAAA,QAAA,CAAS,MAAM,WAAA,CAAY,kBAAkB,KAAM,CAAA,MAAA,GAAS,CAAI,GAAA,IAAA,CAAK,GAAI,CAAA,GAAG,WAAY,CAAA,KAAM,IAAI,CAAC,CAAA;AACvH,IAAM,MAAA,SAAA,GAAY,QAAS,CAAA,MAAM,GAAM,GAAA,IAAA,CAAK,IAAI,GAAG,WAAA,CAAY,KAAO,EAAA,CAAC,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Slider/SliderRoot.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
 const vue = require('vue');
+const core = require('@vueuse/core');
 const Slider_SliderHorizontal = require('./SliderHorizontal.cjs');
 const Slider_SliderVertical = require('./SliderVertical.cjs');
-const core = require('@vueuse/core');
 const Slider_utils = require('./utils.cjs');
 const Collection_Collection = require('../Collection/Collection.cjs');
 const shared_createContext = require('../shared/createContext.cjs');

package/dist/Slider/SliderRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliderRoot.cjs","sources":["../../src/Slider/SliderRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { DataOrientation, Direction, FormFieldProps } from '../shared/types'\nimport { clamp, createContext, useDirection, useFormControl, useForwardExpose } from '@/shared'\nimport { useCollection } from '@/Collection'\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 SliderHorizontal from './SliderHorizontal.vue'\nimport SliderVertical from './SliderVertical.vue'\nimport { computed, ref, toRaw, toRefs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { ARROW_KEYS, PAGE_KEYS, getClosestValueIndex, getDecimalCount, getNextSortedValues, hasMinStepsBetweenValues, roundValue } from './utils'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\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

@@ -1,7 +1,7 @@
 import { defineComponent, toRefs, computed, ref, createBlock, openBlock, unref, withCtx, resolveDynamicComponent, mergeProps, renderSlot, createCommentVNode, toRaw } from 'vue';
+import { useVModel } from '@vueuse/core';
 import { _ as _sfc_main$1 } from './SliderHorizontal.js';
 import { _ as _sfc_main$2 } from './SliderVertical.js';
-import { useVModel } from '@vueuse/core';
 import { P as PAGE_KEYS, A as ARROW_KEYS, g as getClosestValueIndex, a as getDecimalCount, r as roundValue, b as getNextSortedValues, h as hasMinStepsBetweenValues } from './utils.js';
 import { u as useCollection } from '../Collection/Collection.js';
 import { c as createContext } from '../shared/createContext.js';