reka-ui 2.0.2 → 2.1.0

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

@@ -35,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' | '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      :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';
@@ -33,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' | '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      :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/date.d.ts

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

package/dist/index.d.ts

@@ -2057,7 +2057,9 @@ export declare const AlertDialogRoot: __VLS_WithTemplateSlots_6<DefineComponent<
 }, string, PublicProps, Readonly<AlertDialogProps> & Readonly<{
 "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
-    default?(_: {}): any;
+    default?(_: {
+        open: boolean;
+    }): any;
 }>;
 
 export declare const AlertDialogTitle: __VLS_WithTemplateSlots_12<DefineComponent<AlertDialogTitleProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<AlertDialogTitleProps> & Readonly<{}>, {
@@ -2620,6 +2622,10 @@ onContentFound?: ((args_0?: void | undefined) => any) | undefined;
     default?(_: {}): any;
 }>;
 
+export declare type CollapsibleContentEmits = {
+    contentFound: [void];
+};
+
 export declare interface CollapsibleContentProps extends PrimitiveProps {
     /**
      * Used to force mounting when more control is needed. Useful when
@@ -3493,6 +3499,8 @@ export declare function createContext<ContextValue>(providerComponentName: strin
 
 declare type DataOrientation = 'vertical' | 'horizontal';
 
+declare type DataState = 'on' | 'off';
+
 declare const DATE_SEGMENT_PARTS: readonly ["day", "month", "year"];
 
 declare type DateAndTimeSegmentObj = DateSegmentObj & TimeSegmentObj;
@@ -4201,6 +4209,8 @@ declare type DateSegmentObj = {
 
 declare type DateSegmentPart = (typeof DATE_SEGMENT_PARTS)[number];
 
+export { DateValue }
+
 declare type DayPeriod = 'AM' | 'PM' | null;
 
 export declare const DialogClose: __VLS_WithTemplateSlots_114<DefineComponent<DialogCloseProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DialogCloseProps> & Readonly<{}>, {
@@ -6060,7 +6070,7 @@ declare interface MountingOptions<Props> {
     attrs?: Record<string, unknown>;
 }
 
-declare interface MultipleCalendarRootProps extends BaseCalendarRootProps {
+export declare interface MultipleCalendarRootProps extends BaseCalendarRootProps {
     /** The controlled checked state of the calendar. Can be bound as `v-model`. */
     modelValue?: DateValue[] | undefined;
     /** Whether or not multiple dates can be selected */
@@ -6385,6 +6395,7 @@ export declare const NumberFieldRoot: __VLS_WithTemplateSlots_177<DefineComponen
 defaultValue: number;
 as: AsTag | Component;
 step: number;
+stepSnapping: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
     default?(_: {
         modelValue: number;
@@ -6404,6 +6415,7 @@ declare interface NumberFieldRootContext {
     validate: (val: string) => boolean;
     applyInputValue: (val: string) => void;
     disabled: Ref<boolean>;
+    disableWheelChange: Ref<boolean>;
     max: Ref<number | undefined>;
     min: Ref<number | undefined>;
     isDecreaseDisabled: Ref<boolean>;
@@ -6424,12 +6436,16 @@ export declare interface NumberFieldRootProps extends PrimitiveProps, FormFieldP
     max?: number;
     /** The amount that the input value changes with each increment or decrement "tick". */
     step?: number;
+    /** When `false`, prevents the value from snapping to the nearest increment of the step value */
+    stepSnapping?: boolean;
     /** Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user. */
     formatOptions?: Intl.NumberFormatOptions;
     /** The locale to use for formatting dates */
     locale?: string;
     /** When `true`, prevents the user from interacting with the Number Field. */
     disabled?: boolean;
+    /** When `true`, prevents the value from changing on wheel scroll. */
+    disableWheelChange?: boolean;
     /** Id of the element */
     id?: string;
 }
@@ -8133,7 +8149,7 @@ declare type Side = (typeof SIDE_OPTIONS)[number];
 
 declare const SIDE_OPTIONS: readonly ["top", "right", "bottom", "left"];
 
-declare interface SingleCalendarRootProps extends BaseCalendarRootProps {
+export declare interface SingleCalendarRootProps extends BaseCalendarRootProps {
     /** The controlled checked state of the calendar. Can be bound as `v-model`. */
     modelValue?: DateValue | undefined;
     /** Whether or not multiple dates can be selected */
@@ -8187,6 +8203,7 @@ min: number;
 max: number;
 inverted: boolean;
 minStepsBetweenThumbs: number;
+thumbAlignment: ThumbAlignment;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, Readonly<{
     default: (props: {
         /** Current slider values */
@@ -8208,6 +8225,7 @@ declare interface SliderRootContext {
     currentModelValue: ComputedRef<number[]>;
     valueIndexToChangeRef: Ref<number>;
     thumbElements: Ref<HTMLElement[]>;
+    thumbAlignment: Ref<ThumbAlignment>;
 }
 
 export declare type SliderRootEmits = {
@@ -8244,6 +8262,13 @@ export declare interface SliderRootProps extends PrimitiveProps, FormFieldProps
     step?: number;
     /** The minimum permitted steps between multiple thumbs. */
     minStepsBetweenThumbs?: number;
+    /**
+     * The alignment of the slider thumb.
+     * - `contain`: thumbs will be contained within the bounds of the track.
+     * - `overflow`: thumbs will not be bound by the track. No extra offset will be added.
+     * @defaultValue 'contain'
+     */
+    thumbAlignment?: ThumbAlignment;
 }
 
 export declare const SliderThumb: __VLS_WithTemplateSlots_236<DefineComponent<SliderThumbProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<SliderThumbProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
@@ -9071,6 +9096,8 @@ declare interface TeleportProps {
     forceMount?: boolean;
 }
 
+declare type ThumbAlignment = 'contain' | 'overflow';
+
 declare const TIME_SEGMENT_PARTS: readonly ["hour", "minute", "second", "dayPeriod"];
 
 export declare const TimeFieldInput: __VLS_WithTemplateSlots_260<DefineComponent<TimeFieldInputProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<TimeFieldInputProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
@@ -9404,13 +9431,25 @@ as: AsTag | Component;
 modelValue: boolean | null;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, Readonly<{
     default: (props: {
-        /** Current pressed state */
+        /** Current value */
         modelValue: boolean;
+        /** Current state */
+        state: DataState;
+        /** Current pressed state */
+        pressed: boolean;
+        /** Current disabled state */
+        disabled: boolean;
     }) => any;
 }> & {
     default: (props: {
-        /** Current pressed state */
+        /** Current value */
         modelValue: boolean;
+        /** Current state */
+        state: DataState;
+        /** Current pressed state */
+        pressed: boolean;
+        /** Current disabled state */
+        disabled: boolean;
     }) => any;
 }>;
 
@@ -9422,7 +9461,12 @@ export declare type ToggleEmits = {
 export declare const ToggleGroupItem: __VLS_WithTemplateSlots_272<DefineComponent<ToggleGroupItemProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ToggleGroupItemProps> & Readonly<{}>, {
 as: AsTag | Component;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
-    default?(_: {}): any;
+    default?(_: {
+        modelValue: boolean;
+        state: DataState;
+        pressed: boolean;
+        disabled: boolean;
+    }): any;
 }>;
 
 export declare interface ToggleGroupItemProps extends Omit<ToggleProps, 'name' | 'required' | 'modelValue' | 'defaultValue'> {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reka-ui",
   "type": "module",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Vue port for Radix UI Primitives.",
   "author": "UnoVue Contributors (https://github.com/unovue)",
   "license": "MIT",