reka-ui 2.0.1 → 2.1.0

package/dist/Slider/SliderThumbImpl.cjs.map

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

package/dist/Slider/SliderThumbImpl.js

@@ -28,7 +28,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const label = computed(() => getLabel(props.index, rootContext.modelValue?.value?.length ?? 0));
     const size = useSize(thumbElement);
     const orientationSize = computed(() => size[orientation.size].value);
-    const thumbInBoundsOffset = computed(() => orientationSize.value ? getThumbInBoundsOffset(orientationSize.value, percent.value, orientation.direction) : 0);
+    const thumbInBoundsOffset = computed(() => {
+      if (rootContext.thumbAlignment.value === "overflow" || !orientationSize.value) {
+        return 0;
+      } else {
+        return getThumbInBoundsOffset(orientationSize.value, percent.value, orientation.direction);
+      }
+    });
     const isMounted = useMounted();
     onMounted(() => {
       rootContext.thumbElements.value.push(thumbElement.value);

package/dist/Slider/SliderThumbImpl.js.map

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

package/dist/Slider/SliderVertical.cjs

@@ -4,6 +4,7 @@ const vue = require('vue');
 const Slider_SliderImpl = require('./SliderImpl.cjs');
 const Slider_utils = require('./utils.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
+const Slider_SliderRoot = require('./SliderRoot.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "SliderVertical",
@@ -17,16 +18,24 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const emits = __emit;
     const { max, min, inverted } = vue.toRefs(props);
+    const rootContext = Slider_SliderRoot.injectSliderRootContext();
     const { forwardRef, currentElement: sliderElement } = shared_useForwardExpose.useForwardExpose();
+    const offsetPosition = vue.ref();
     const rectRef = vue.ref();
     const isSlidingFromBottom = vue.computed(() => !inverted.value);
-    function getValueFromPointer(pointerPosition) {
+    function getValueFromPointerEvent(event, slideStart) {
       const rect = rectRef.value || sliderElement.value.getBoundingClientRect();
-      const input = [0, rect.height];
+      const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value];
+      const thumbHeight = rootContext.thumbAlignment.value === "contain" ? thumb.clientHeight : 0;
+      if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === "contain") {
+        offsetPosition.value = event.clientY - thumb.getBoundingClientRect().top;
+      }
+      const input = [0, rect.height - thumbHeight];
       const output = isSlidingFromBottom.value ? [max.value, min.value] : [min.value, max.value];
       const value = Slider_utils.linearScale(input, output);
+      const position = slideStart ? event.clientY - rect.top - thumbHeight / 2 : event.clientY - rect.top - (offsetPosition.value ?? 0);
       rectRef.value = rect;
-      return value(pointerPosition - rect.top);
+      return value(position);
     }
     Slider_utils.provideSliderOrientationContext({
       startEdge: isSlidingFromBottom.value ? "bottom" : "top",
@@ -38,19 +47,20 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createBlock(Slider_SliderImpl._sfc_main, {
         ref: vue.unref(forwardRef),
         "data-orientation": "vertical",
-        style: {
-          ["--reka-slider-thumb-transform"]: "translateY(50%)"
-        },
+        style: vue.normalizeStyle({
+          ["--reka-slider-thumb-transform"]: !isSlidingFromBottom.value && vue.unref(rootContext).thumbAlignment.value === "overflow" ? "translateY(-50%)" : "translateY(50%)"
+        }),
         onSlideStart: _cache[0] || (_cache[0] = (event) => {
-          const value = getValueFromPointer(event.clientY);
+          const value = getValueFromPointerEvent(event, true);
           emits("slideStart", value);
         }),
         onSlideMove: _cache[1] || (_cache[1] = (event) => {
-          const value = getValueFromPointer(event.clientY);
+          const value = getValueFromPointerEvent(event);
           emits("slideMove", value);
         }),
         onSlideEnd: _cache[2] || (_cache[2] = () => {
           rectRef.value = undefined;
+          offsetPosition.value = undefined;
           emits("slideEnd");
         }),
         onStepKeyDown: _cache[3] || (_cache[3] = (event) => {
@@ -65,7 +75,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 512);
+      }, 8, ["style"]);
     };
   }
 });

package/dist/Slider/SliderVertical.cjs.map

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

package/dist/Slider/SliderVertical.js

@@ -1,7 +1,8 @@
-import { defineComponent, toRefs, ref, computed, openBlock, createBlock, unref, withCtx, renderSlot } from 'vue';
+import { defineComponent, toRefs, ref, computed, openBlock, createBlock, unref, normalizeStyle, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from './SliderImpl.js';
 import { p as provideSliderOrientationContext, B as BACK_KEYS, l as linearScale } from './utils.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
+import { i as injectSliderRootContext } from './SliderRoot.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "SliderVertical",
@@ -15,16 +16,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emits = __emit;
     const { max, min, inverted } = toRefs(props);
+    const rootContext = injectSliderRootContext();
     const { forwardRef, currentElement: sliderElement } = useForwardExpose();
+    const offsetPosition = ref();
     const rectRef = ref();
     const isSlidingFromBottom = computed(() => !inverted.value);
-    function getValueFromPointer(pointerPosition) {
+    function getValueFromPointerEvent(event, slideStart) {
       const rect = rectRef.value || sliderElement.value.getBoundingClientRect();
-      const input = [0, rect.height];
+      const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value];
+      const thumbHeight = rootContext.thumbAlignment.value === "contain" ? thumb.clientHeight : 0;
+      if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === "contain") {
+        offsetPosition.value = event.clientY - thumb.getBoundingClientRect().top;
+      }
+      const input = [0, rect.height - thumbHeight];
       const output = isSlidingFromBottom.value ? [max.value, min.value] : [min.value, max.value];
       const value = linearScale(input, output);
+      const position = slideStart ? event.clientY - rect.top - thumbHeight / 2 : event.clientY - rect.top - (offsetPosition.value ?? 0);
       rectRef.value = rect;
-      return value(pointerPosition - rect.top);
+      return value(position);
     }
     provideSliderOrientationContext({
       startEdge: isSlidingFromBottom.value ? "bottom" : "top",
@@ -36,19 +45,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(_sfc_main$1, {
         ref: unref(forwardRef),
         "data-orientation": "vertical",
-        style: {
-          ["--reka-slider-thumb-transform"]: "translateY(50%)"
-        },
+        style: normalizeStyle({
+          ["--reka-slider-thumb-transform"]: !isSlidingFromBottom.value && unref(rootContext).thumbAlignment.value === "overflow" ? "translateY(-50%)" : "translateY(50%)"
+        }),
         onSlideStart: _cache[0] || (_cache[0] = (event) => {
-          const value = getValueFromPointer(event.clientY);
+          const value = getValueFromPointerEvent(event, true);
           emits("slideStart", value);
         }),
         onSlideMove: _cache[1] || (_cache[1] = (event) => {
-          const value = getValueFromPointer(event.clientY);
+          const value = getValueFromPointerEvent(event);
           emits("slideMove", value);
         }),
         onSlideEnd: _cache[2] || (_cache[2] = () => {
           rectRef.value = undefined;
+          offsetPosition.value = undefined;
           emits("slideEnd");
         }),
         onStepKeyDown: _cache[3] || (_cache[3] = (event) => {
@@ -63,7 +73,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 512);
+      }, 8, ["style"]);
     };
   }
 });

package/dist/Slider/SliderVertical.js.map

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

package/dist/Toggle/Toggle.cjs

@@ -49,7 +49,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         onClick: togglePressed
       }, {
         default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "default", { modelValue: vue.unref(modelValue) }),
+          vue.renderSlot(_ctx.$slots, "default", {
+            modelValue: vue.unref(modelValue),
+            disabled: _ctx.disabled,
+            pressed: vue.unref(modelValue),
+            state: dataState.value
+          }),
           vue.unref(isFormControl) && _ctx.name && !vue.unref(toggleGroupContext) ? (vue.openBlock(), vue.createBlock(VisuallyHidden_VisuallyHiddenInput._sfc_main, {
             key: 0,
             type: "checkbox",

package/dist/Toggle/Toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs","sources":["../../src/Toggle/Toggle.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useFormControl, useForwardExpose } from '@/shared'\nimport VisuallyHiddenInput from '@/VisuallyHidden/VisuallyHiddenInput.vue'\nimport type { FormFieldProps } from '@/shared/types'\nimport { injectToggleGroupRootContext } from '@/ToggleGroup/ToggleGroupRoot.vue'\n\nexport type ToggleEmits = {\n  /** Event handler called when the value of the toggle changes. */\n  'update:modelValue': [value: boolean]\n}\n\nexport type DataState = 'on' | 'off'\n\nexport interface ToggleProps extends PrimitiveProps, FormFieldProps {\n  /**\n   * The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state.\n   */\n  defaultValue?: boolean\n  /**\n   * The controlled pressed state of the toggle. Can be bind as `v-model`.\n   */\n  modelValue?: boolean | null\n  /**\n   * When `true`, prevents the user from interacting with the toggle.\n   */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { type Ref, computed } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ToggleProps>(), {\n  modelValue: undefined,\n  disabled: false,\n  as: 'button',\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current pressed state */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { forwardRef, currentElement } = useForwardExpose()\nconst toggleGroupContext = injectToggleGroupRootContext(null)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<boolean>\n\nfunction togglePressed() {\n  modelValue.value = !modelValue.value\n}\n\nconst dataState = computed<DataState>(() => {\n  return modelValue.value ? 'on' : 'off'\n})\n\nconst isFormControl = useFormControl(currentElement)\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :as-child=\"props.asChild\"\n    :as=\"as\"\n    :aria-pressed=\"modelValue\"\n    :data-state=\"dataState\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :disabled=\"disabled\"\n    @click=\"togglePressed\"\n  >\n    <slot :model-value=\"modelValue\" />\n\n    <VisuallyHiddenInput\n      v-if=\"isFormControl && name && !toggleGroupContext\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :value=\"modelValue\"\n      :required=\"required\"\n    />\n  </Primitive>\n</template>\n"],"names":["useForwardExpose","injectToggleGroupRootContext","useVModel","computed","useFormControl"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIA,wCAAiB,EAAA;AACxD,IAAM,MAAA,kBAAA,GAAqBC,yDAA6B,IAAI,CAAA;AAE5D,IAAA,MAAM,UAAa,GAAAC,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,cAAc,KAAM,CAAA,YAAA;AAAA,MACpB,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,SAAS,aAAgB,GAAA;AACvB,MAAW,UAAA,CAAA,KAAA,GAAQ,CAAC,UAAW,CAAA,KAAA;AAAA;AAGjC,IAAM,MAAA,SAAA,GAAYC,aAAoB,MAAM;AAC1C,MAAO,OAAA,UAAA,CAAW,QAAQ,IAAO,GAAA,KAAA;AAAA,KAClC,CAAA;AAED,IAAM,MAAA,aAAA,GAAgBC,qCAAe,cAAc,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Toggle.cjs","sources":["../../src/Toggle/Toggle.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useFormControl, useForwardExpose } from '@/shared'\nimport VisuallyHiddenInput from '@/VisuallyHidden/VisuallyHiddenInput.vue'\nimport type { FormFieldProps } from '@/shared/types'\nimport { injectToggleGroupRootContext } from '@/ToggleGroup/ToggleGroupRoot.vue'\n\nexport type ToggleEmits = {\n  /** Event handler called when the value of the toggle changes. */\n  'update:modelValue': [value: boolean]\n}\n\nexport type DataState = 'on' | 'off'\n\nexport interface ToggleProps extends PrimitiveProps, FormFieldProps {\n  /**\n   * The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state.\n   */\n  defaultValue?: boolean\n  /**\n   * The controlled pressed state of the toggle. Can be bind as `v-model`.\n   */\n  modelValue?: boolean | null\n  /**\n   * When `true`, prevents the user from interacting with the toggle.\n   */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { type Ref, computed } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ToggleProps>(), {\n  modelValue: undefined,\n  disabled: false,\n  as: 'button',\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current value */\n    modelValue: typeof modelValue.value\n    /** Current state */\n    state: typeof dataState.value\n    /** Current pressed state */\n    pressed: typeof modelValue.value\n    /** Current disabled state */\n    disabled: boolean\n  }) => any\n}>()\n\nconst { forwardRef, currentElement } = useForwardExpose()\nconst toggleGroupContext = injectToggleGroupRootContext(null)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<boolean>\n\nfunction togglePressed() {\n  modelValue.value = !modelValue.value\n}\n\nconst dataState = computed<DataState>(() => {\n  return modelValue.value ? 'on' : 'off'\n})\n\nconst isFormControl = useFormControl(currentElement)\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :as-child=\"props.asChild\"\n    :as=\"as\"\n    :aria-pressed=\"modelValue\"\n    :data-state=\"dataState\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :disabled=\"disabled\"\n    @click=\"togglePressed\"\n  >\n    <slot\n      :model-value=\"modelValue\"\n      :disabled=\"disabled\"\n      :pressed=\"modelValue\"\n      :state=\"dataState\"\n    />\n\n    <VisuallyHiddenInput\n      v-if=\"isFormControl && name && !toggleGroupContext\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :value=\"modelValue\"\n      :required=\"required\"\n    />\n  </Primitive>\n</template>\n"],"names":["useForwardExpose","injectToggleGroupRootContext","useVModel","computed","useFormControl"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAed,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIA,wCAAiB,EAAA;AACxD,IAAM,MAAA,kBAAA,GAAqBC,yDAA6B,IAAI,CAAA;AAE5D,IAAA,MAAM,UAAa,GAAAC,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,cAAc,KAAM,CAAA,YAAA;AAAA,MACpB,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,SAAS,aAAgB,GAAA;AACvB,MAAW,UAAA,CAAA,KAAA,GAAQ,CAAC,UAAW,CAAA,KAAA;AAAA;AAGjC,IAAM,MAAA,SAAA,GAAYC,aAAoB,MAAM;AAC1C,MAAO,OAAA,UAAA,CAAW,QAAQ,IAAO,GAAA,KAAA;AAAA,KAClC,CAAA;AAED,IAAM,MAAA,aAAA,GAAgBC,qCAAe,cAAc,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Toggle/Toggle.js

@@ -47,7 +47,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onClick: togglePressed
       }, {
         default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default", { modelValue: unref(modelValue) }),
+          renderSlot(_ctx.$slots, "default", {
+            modelValue: unref(modelValue),
+            disabled: _ctx.disabled,
+            pressed: unref(modelValue),
+            state: dataState.value
+          }),
           unref(isFormControl) && _ctx.name && !unref(toggleGroupContext) ? (openBlock(), createBlock(_sfc_main$1, {
             key: 0,
             type: "checkbox",

package/dist/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../src/Toggle/Toggle.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useFormControl, useForwardExpose } from '@/shared'\nimport VisuallyHiddenInput from '@/VisuallyHidden/VisuallyHiddenInput.vue'\nimport type { FormFieldProps } from '@/shared/types'\nimport { injectToggleGroupRootContext } from '@/ToggleGroup/ToggleGroupRoot.vue'\n\nexport type ToggleEmits = {\n  /** Event handler called when the value of the toggle changes. */\n  'update:modelValue': [value: boolean]\n}\n\nexport type DataState = 'on' | 'off'\n\nexport interface ToggleProps extends PrimitiveProps, FormFieldProps {\n  /**\n   * The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state.\n   */\n  defaultValue?: boolean\n  /**\n   * The controlled pressed state of the toggle. Can be bind as `v-model`.\n   */\n  modelValue?: boolean | null\n  /**\n   * When `true`, prevents the user from interacting with the toggle.\n   */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { type Ref, computed } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ToggleProps>(), {\n  modelValue: undefined,\n  disabled: false,\n  as: 'button',\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current pressed state */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { forwardRef, currentElement } = useForwardExpose()\nconst toggleGroupContext = injectToggleGroupRootContext(null)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<boolean>\n\nfunction togglePressed() {\n  modelValue.value = !modelValue.value\n}\n\nconst dataState = computed<DataState>(() => {\n  return modelValue.value ? 'on' : 'off'\n})\n\nconst isFormControl = useFormControl(currentElement)\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :as-child=\"props.asChild\"\n    :as=\"as\"\n    :aria-pressed=\"modelValue\"\n    :data-state=\"dataState\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :disabled=\"disabled\"\n    @click=\"togglePressed\"\n  >\n    <slot :model-value=\"modelValue\" />\n\n    <VisuallyHiddenInput\n      v-if=\"isFormControl && name && !toggleGroupContext\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :value=\"modelValue\"\n      :required=\"required\"\n    />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmCA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AACxD,IAAM,MAAA,kBAAA,GAAqB,6BAA6B,IAAI,CAAA;AAE5D,IAAA,MAAM,UAAa,GAAA,SAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,cAAc,KAAM,CAAA,YAAA;AAAA,MACpB,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,SAAS,aAAgB,GAAA;AACvB,MAAW,UAAA,CAAA,KAAA,GAAQ,CAAC,UAAW,CAAA,KAAA;AAAA;AAGjC,IAAM,MAAA,SAAA,GAAY,SAAoB,MAAM;AAC1C,MAAO,OAAA,UAAA,CAAW,QAAQ,IAAO,GAAA,KAAA;AAAA,KAClC,CAAA;AAED,IAAM,MAAA,aAAA,GAAgB,eAAe,cAAc,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Toggle.js","sources":["../../src/Toggle/Toggle.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useFormControl, useForwardExpose } from '@/shared'\nimport VisuallyHiddenInput from '@/VisuallyHidden/VisuallyHiddenInput.vue'\nimport type { FormFieldProps } from '@/shared/types'\nimport { injectToggleGroupRootContext } from '@/ToggleGroup/ToggleGroupRoot.vue'\n\nexport type ToggleEmits = {\n  /** Event handler called when the value of the toggle changes. */\n  'update:modelValue': [value: boolean]\n}\n\nexport type DataState = 'on' | 'off'\n\nexport interface ToggleProps extends PrimitiveProps, FormFieldProps {\n  /**\n   * The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state.\n   */\n  defaultValue?: boolean\n  /**\n   * The controlled pressed state of the toggle. Can be bind as `v-model`.\n   */\n  modelValue?: boolean | null\n  /**\n   * When `true`, prevents the user from interacting with the toggle.\n   */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { type Ref, computed } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ToggleProps>(), {\n  modelValue: undefined,\n  disabled: false,\n  as: 'button',\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current value */\n    modelValue: typeof modelValue.value\n    /** Current state */\n    state: typeof dataState.value\n    /** Current pressed state */\n    pressed: typeof modelValue.value\n    /** Current disabled state */\n    disabled: boolean\n  }) => any\n}>()\n\nconst { forwardRef, currentElement } = useForwardExpose()\nconst toggleGroupContext = injectToggleGroupRootContext(null)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<boolean>\n\nfunction togglePressed() {\n  modelValue.value = !modelValue.value\n}\n\nconst dataState = computed<DataState>(() => {\n  return modelValue.value ? 'on' : 'off'\n})\n\nconst isFormControl = useFormControl(currentElement)\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :as-child=\"props.asChild\"\n    :as=\"as\"\n    :aria-pressed=\"modelValue\"\n    :data-state=\"dataState\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :disabled=\"disabled\"\n    @click=\"togglePressed\"\n  >\n    <slot\n      :model-value=\"modelValue\"\n      :disabled=\"disabled\"\n      :pressed=\"modelValue\"\n      :state=\"dataState\"\n    />\n\n    <VisuallyHiddenInput\n      v-if=\"isFormControl && name && !toggleGroupContext\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :value=\"modelValue\"\n      :required=\"required\"\n    />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmCA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAed,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AACxD,IAAM,MAAA,kBAAA,GAAqB,6BAA6B,IAAI,CAAA;AAE5D,IAAA,MAAM,UAAa,GAAA,SAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,cAAc,KAAM,CAAA,YAAA;AAAA,MACpB,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,SAAS,aAAgB,GAAA;AACvB,MAAW,UAAA,CAAA,KAAA,GAAQ,CAAC,UAAW,CAAA,KAAA;AAAA;AAGjC,IAAM,MAAA,SAAA,GAAY,SAAoB,MAAM;AAC1C,MAAO,OAAA,UAAA,CAAW,QAAQ,IAAO,GAAA,KAAA;AAAA,KAClC,CAAA;AAED,IAAM,MAAA,aAAA,GAAgB,eAAe,cAAc,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ToggleGroup/ToggleGroupItem.cjs

@@ -12,8 +12,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "ToggleGroupItem",
   props: {
     value: {},
-    defaultValue: { type: Boolean },
-    modelValue: { type: [Boolean, null] },
     disabled: { type: Boolean },
     asChild: { type: Boolean },
     as: { default: "button" }
@@ -37,8 +35,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             "model-value": pressed.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.unref(rootContext).changeModelValue(_ctx.value))
           }), {
-            default: vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "default")
+            default: vue.withCtx((slotProps) => [
+              vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(slotProps)))
             ]),
             _: 3
           }, 16, ["disabled", "model-value"])

package/dist/ToggleGroup/ToggleGroupItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.cjs","sources":["../../src/ToggleGroup/ToggleGroupItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToggleProps } from '@/Toggle'\nimport { isValueEqualOrExist, useForwardExpose } from '@/shared'\nimport type { AcceptableValue } from '@/shared/types'\n\nexport interface ToggleGroupItemProps extends Omit<ToggleProps, 'name' | 'required'> {\n  /**\n   * A string value for the toggle group item. All items within a toggle group should use a unique value.\n   */\n  value: AcceptableValue\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { injectToggleGroupRootContext } from './ToggleGroupRoot.vue'\nimport { Toggle } from '@/Toggle'\nimport { RovingFocusItem } from '@/RovingFocus'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ToggleGroupItemProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectToggleGroupRootContext()\nconst disabled = computed(() => rootContext.disabled?.value || props.disabled)\nconst pressed = computed(() => isValueEqualOrExist(rootContext.modelValue.value, props.value))\n\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n  <component\n    :is=\"rootContext.rovingFocus.value ? RovingFocusItem : Primitive\"\n    as-child\n    :focusable=\"!disabled\"\n    :active=\"pressed\"\n  >\n    <Toggle\n      v-bind=\"props\"\n      :ref=\"forwardRef\"\n      :disabled=\"disabled\"\n      :model-value=\"pressed\"\n      @update:model-value=\"rootContext.changeModelValue(value)\"\n    >\n      <slot />\n    </Toggle>\n  </component>\n</template>\n"],"names":["injectToggleGroupRootContext","computed","isValueEqualOrExist","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,wDAA6B,EAAA;AACjD,IAAA,MAAM,WAAWC,YAAS,CAAA,MAAM,YAAY,QAAU,EAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAC7E,IAAM,MAAA,OAAA,GAAUA,aAAS,MAAMC,8CAAA,CAAoB,YAAY,UAAW,CAAA,KAAA,EAAO,KAAM,CAAA,KAAK,CAAC,CAAA;AAE7F,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,wCAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ToggleGroupItem.cjs","sources":["../../src/ToggleGroup/ToggleGroupItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToggleProps } from '@/Toggle'\nimport { isValueEqualOrExist, useForwardExpose } from '@/shared'\nimport type { AcceptableValue } from '@/shared/types'\n\nexport interface ToggleGroupItemProps extends Omit<ToggleProps, 'name' | 'required' | 'modelValue' | 'defaultValue'> {\n  /**\n   * A string value for the toggle group item. All items within a toggle group should use a unique value.\n   */\n  value: AcceptableValue\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { injectToggleGroupRootContext } from './ToggleGroupRoot.vue'\nimport { Toggle } from '@/Toggle'\nimport { RovingFocusItem } from '@/RovingFocus'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ToggleGroupItemProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectToggleGroupRootContext()\nconst disabled = computed(() => rootContext.disabled?.value || props.disabled)\nconst pressed = computed(() => isValueEqualOrExist(rootContext.modelValue.value, props.value))\n\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n  <component\n    :is=\"rootContext.rovingFocus.value ? RovingFocusItem : Primitive\"\n    as-child\n    :focusable=\"!disabled\"\n    :active=\"pressed\"\n  >\n    <Toggle\n      v-bind=\"props\"\n      :ref=\"forwardRef\"\n      v-slot=\"slotProps\"\n      :disabled=\"disabled\"\n      :model-value=\"pressed\"\n      @update:model-value=\"rootContext.changeModelValue(value)\"\n    >\n      <slot v-bind=\"slotProps\" />\n    </Toggle>\n  </component>\n</template>\n"],"names":["injectToggleGroupRootContext","computed","isValueEqualOrExist","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,wDAA6B,EAAA;AACjD,IAAA,MAAM,WAAWC,YAAS,CAAA,MAAM,YAAY,QAAU,EAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAC7E,IAAM,MAAA,OAAA,GAAUA,aAAS,MAAMC,8CAAA,CAAoB,YAAY,UAAW,CAAA,KAAA,EAAO,KAAM,CAAA,KAAK,CAAC,CAAA;AAE7F,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,wCAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ToggleGroup/ToggleGroupItem.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, unref, withCtx, createVNode, mergeProps, renderSlot } from 'vue';
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, unref, withCtx, createVNode, mergeProps, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
 import { _ as _sfc_main$1 } from '../RovingFocus/RovingFocusItem.js';
 import { i as isValueEqualOrExist } from '../shared/isValueEqualOrExist.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
@@ -10,8 +10,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ToggleGroupItem",
   props: {
     value: {},
-    defaultValue: { type: Boolean },
-    modelValue: { type: [Boolean, null] },
     disabled: { type: Boolean },
     asChild: { type: Boolean },
     as: { default: "button" }
@@ -35,8 +33,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "model-value": pressed.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(rootContext).changeModelValue(_ctx.value))
           }), {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default")
+            default: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)))
             ]),
             _: 3
           }, 16, ["disabled", "model-value"])

package/dist/ToggleGroup/ToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.js","sources":["../../src/ToggleGroup/ToggleGroupItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToggleProps } from '@/Toggle'\nimport { isValueEqualOrExist, useForwardExpose } from '@/shared'\nimport type { AcceptableValue } from '@/shared/types'\n\nexport interface ToggleGroupItemProps extends Omit<ToggleProps, 'name' | 'required'> {\n  /**\n   * A string value for the toggle group item. All items within a toggle group should use a unique value.\n   */\n  value: AcceptableValue\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { injectToggleGroupRootContext } from './ToggleGroupRoot.vue'\nimport { Toggle } from '@/Toggle'\nimport { RovingFocusItem } from '@/RovingFocus'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ToggleGroupItemProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectToggleGroupRootContext()\nconst disabled = computed(() => rootContext.disabled?.value || props.disabled)\nconst pressed = computed(() => isValueEqualOrExist(rootContext.modelValue.value, props.value))\n\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n  <component\n    :is=\"rootContext.rovingFocus.value ? RovingFocusItem : Primitive\"\n    as-child\n    :focusable=\"!disabled\"\n    :active=\"pressed\"\n  >\n    <Toggle\n      v-bind=\"props\"\n      :ref=\"forwardRef\"\n      :disabled=\"disabled\"\n      :model-value=\"pressed\"\n      @update:model-value=\"rootContext.changeModelValue(value)\"\n    >\n      <slot />\n    </Toggle>\n  </component>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,4BAA6B,EAAA;AACjD,IAAA,MAAM,WAAW,QAAS,CAAA,MAAM,YAAY,QAAU,EAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAC7E,IAAM,MAAA,OAAA,GAAU,SAAS,MAAM,mBAAA,CAAoB,YAAY,UAAW,CAAA,KAAA,EAAO,KAAM,CAAA,KAAK,CAAC,CAAA;AAE7F,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ToggleGroupItem.js","sources":["../../src/ToggleGroup/ToggleGroupItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToggleProps } from '@/Toggle'\nimport { isValueEqualOrExist, useForwardExpose } from '@/shared'\nimport type { AcceptableValue } from '@/shared/types'\n\nexport interface ToggleGroupItemProps extends Omit<ToggleProps, 'name' | 'required' | 'modelValue' | 'defaultValue'> {\n  /**\n   * A string value for the toggle group item. All items within a toggle group should use a unique value.\n   */\n  value: AcceptableValue\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { injectToggleGroupRootContext } from './ToggleGroupRoot.vue'\nimport { Toggle } from '@/Toggle'\nimport { RovingFocusItem } from '@/RovingFocus'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ToggleGroupItemProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectToggleGroupRootContext()\nconst disabled = computed(() => rootContext.disabled?.value || props.disabled)\nconst pressed = computed(() => isValueEqualOrExist(rootContext.modelValue.value, props.value))\n\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n  <component\n    :is=\"rootContext.rovingFocus.value ? RovingFocusItem : Primitive\"\n    as-child\n    :focusable=\"!disabled\"\n    :active=\"pressed\"\n  >\n    <Toggle\n      v-bind=\"props\"\n      :ref=\"forwardRef\"\n      v-slot=\"slotProps\"\n      :disabled=\"disabled\"\n      :model-value=\"pressed\"\n      @update:model-value=\"rootContext.changeModelValue(value)\"\n    >\n      <slot v-bind=\"slotProps\" />\n    </Toggle>\n  </component>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAoBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,4BAA6B,EAAA;AACjD,IAAA,MAAM,WAAW,QAAS,CAAA,MAAM,YAAY,QAAU,EAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAC7E,IAAM,MAAA,OAAA,GAAU,SAAS,MAAM,mBAAA,CAAoB,YAAY,UAAW,CAAA,KAAA,EAAO,KAAM,CAAA,KAAK,CAAC,CAAA;AAE7F,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Toolbar/ToolbarToggleItem.cjs

@@ -9,8 +9,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "ToolbarToggleItem",
   props: {
     value: {},
-    defaultValue: { type: Boolean },
-    modelValue: { type: [Boolean, null] },
     disabled: { type: Boolean },
     asChild: { type: Boolean },
     as: {}

package/dist/Toolbar/ToolbarToggleItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarToggleItem.cjs","sources":["../../src/Toolbar/ToolbarToggleItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToggleGroupItemProps } from '@/ToggleGroup'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ToolbarToggleItemProps extends ToggleGroupItemProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport ToolbarButton from './ToolbarButton.vue'\nimport { ToggleGroupItem } from '@/ToggleGroup'\n\nconst props = defineProps<ToolbarToggleItemProps>()\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n  <ToolbarButton as-child>\n    <ToggleGroupItem\n      v-bind=\"props\"\n      :ref=\"forwardRef\"\n    >\n      <slot />\n    </ToggleGroupItem>\n  </ToolbarButton>\n</template>\n"],"names":["useForwardExpose"],"mappings":";;;;;;;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,wCAAiB,EAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ToolbarToggleItem.cjs","sources":["../../src/Toolbar/ToolbarToggleItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToggleGroupItemProps } from '@/ToggleGroup'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ToolbarToggleItemProps extends ToggleGroupItemProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport ToolbarButton from './ToolbarButton.vue'\nimport { ToggleGroupItem } from '@/ToggleGroup'\n\nconst props = defineProps<ToolbarToggleItemProps>()\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n  <ToolbarButton as-child>\n    <ToggleGroupItem\n      v-bind=\"props\"\n      :ref=\"forwardRef\"\n    >\n      <slot />\n    </ToggleGroupItem>\n  </ToolbarButton>\n</template>\n"],"names":["useForwardExpose"],"mappings":";;;;;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,wCAAiB,EAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/Toolbar/ToolbarToggleItem.js

@@ -7,8 +7,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ToolbarToggleItem",
   props: {
     value: {},
-    defaultValue: { type: Boolean },
-    modelValue: { type: [Boolean, null] },
     disabled: { type: Boolean },
     asChild: { type: Boolean },
     as: {}

package/dist/Toolbar/ToolbarToggleItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarToggleItem.js","sources":["../../src/Toolbar/ToolbarToggleItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToggleGroupItemProps } from '@/ToggleGroup'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ToolbarToggleItemProps extends ToggleGroupItemProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport ToolbarButton from './ToolbarButton.vue'\nimport { ToggleGroupItem } from '@/ToggleGroup'\n\nconst props = defineProps<ToolbarToggleItemProps>()\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n  <ToolbarButton as-child>\n    <ToggleGroupItem\n      v-bind=\"props\"\n      :ref=\"forwardRef\"\n    >\n      <slot />\n    </ToggleGroupItem>\n  </ToolbarButton>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ToolbarToggleItem.js","sources":["../../src/Toolbar/ToolbarToggleItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToggleGroupItemProps } from '@/ToggleGroup'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ToolbarToggleItemProps extends ToggleGroupItemProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport ToolbarButton from './ToolbarButton.vue'\nimport { ToggleGroupItem } from '@/ToggleGroup'\n\nconst props = defineProps<ToolbarToggleItemProps>()\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n  <ToolbarButton as-child>\n    <ToggleGroupItem\n      v-bind=\"props\"\n      :ref=\"forwardRef\"\n    >\n      <slot />\n    </ToggleGroupItem>\n  </ToolbarButton>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/date.d.ts

@@ -48,6 +48,8 @@ declare type DateRange = {
     end: DateValue | undefined;
 };
 
+export { DateValue }
+
 export declare function endOfDecade(dateObj: DateValue): DateValue;
 
 /**