@onereach/ui-components 10.4.5-beta.4373.0 → 10.5.0-beta.4375.0

package/dist/esm/v3/{OrDropArea-656633f8.js → OrDropArea-038ee055.js}

@@ -25,12 +25,12 @@ const DropArea = [
 // Spacing
 'gap-sm',
 // Theme
-'theme-background-primary-translucent-1', 'dark:theme-background-primary-translucent-1-dark', 'theme-border-primary border-1 !border-dashed', 'dark:theme-border-primary-dark',
+'theme-background-primary-translucent-1', 'dark:theme-background-primary-translucent-1-dark', 'theme-border-1-primary', 'dark:theme-border-1-primary-dark', '!border-dashed',
 // Theme (hover)
 'hover:theme-background-primary-translucent-2', 'dark:hover:theme-background-primary-translucent-2-dark',
 // Theme (invalid)
-'invalid:theme-background-error-translucent-1', 'dark:invalid:theme-background-error-translucent-1-dark', 'invalid:theme-border-error invalid:border-1 invalid:!border-dashed', 'dark:invalid:theme-border-error-dark',
-// Theme (invalid + hover)
+'invalid:theme-background-error-translucent-1', 'dark:invalid:theme-background-error-translucent-1-dark', 'invalid:theme-border-1-error', 'dark:invalid:theme-border-1-error-dark', 'invalid:!border-dashed',
+// Theme (invalid/hover)
 'hover:invalid:theme-background-error-translucent-2', 'dark:hover:invalid:theme-background-error-translucent-2-dark'];
 const DropAreaSizes = {
   [DropAreaSize.M]: [

package/dist/esm/v3/{OrEditorTabs-fb3cd530.js → OrEditorTabs-f8a602b2.js}

@@ -26,7 +26,7 @@ const EditorTabsHeader = [
 // Layout
 'layout-row',
 // Theme
-'theme-border-outline-variant border-b-1', 'dark:theme-border-outline-variant-dark', 'theme-divider-outline-variant', 'dark:theme-divider-outline-variant-dark'];
+'theme-border-underline', 'theme-border-1-outline-variant', 'dark:theme-border-1-outline-variant-dark', 'theme-divider-outline-variant', 'dark:theme-divider-outline-variant-dark'];
 const EditorTabsHeaderTabs = [
 // Layout
 'layout-row grow md:grow-0',

package/dist/esm/v3/{OrInput-b8095e9c.js → OrInput-37be348a.js}

@@ -11,7 +11,7 @@ import { s as script$1 } from './OrError-331220bc.js';
 import { s as script$2 } from './OrHint-262c8217.js';
 import { s as script$4 } from './OrIconButton-424d342e.js';
 import { s as script$3 } from './OrIcon-c446d072.js';
-import { s as script$5, a as InputBoxSize } from './OrInputBox-24c89cb2.js';
+import { s as script$5, a as InputBoxSize } from './OrInputBox-287f97ba.js';
 import { s as script$6 } from './OrLabel-4abbce6e.js';
 import { s as script$7 } from './OrLoader-5e2f359b.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, createSlots, withDirectives, createElementVNode, mergeProps, vModelDynamic, Fragment, withModifiers, vShow } from 'vue';
@@ -117,7 +117,7 @@ var script = defineComponent({
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
-  expose: ['root', 'clear', 'focus', 'blur'],
+  expose: ['root', 'focus', 'blur'],
   setup(props, context) {
     const attributes = reactive({
       id: useIdAttribute(),
@@ -140,9 +140,6 @@ var script = defineComponent({
       return attributes.maxlength;
     });
     // Methods
-    function clear() {
-      model.value = undefined;
-    }
     function focus() {
       var _a;
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus();
@@ -165,7 +162,6 @@ var script = defineComponent({
       disclosed,
       length,
       maxLength,
-      clear,
       focus,
       blur,
       isMobile
@@ -249,7 +245,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       icon: 'close',
       color: 'inherit',
       disabled: _ctx.disabled,
-      onClick: _cache[7] || (_cache[7] = withModifiers($event => _ctx.clear(), ["stop"]))
+      onClick: _cache[7] || (_cache[7] = withModifiers($event => _ctx.$emit('update:modelValue', ''), ["stop"]))
     }, null, 8 /* PROPS */, ["disabled"])) : (openBlock(), createBlock(_component_OrIcon, {
       key: 1,
       icon: 'search',

package/dist/esm/v3/{OrInputBox-24c89cb2.js → OrInputBox-287f97ba.js}

@@ -75,13 +75,13 @@ const InputBox = [
 const InputBoxVariants = {
   [InputBoxVariant.Styled]: [
   // Theme
-  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark', 'theme-border-outline border-1', 'dark:theme-border-outline-dark', 'theme-outline-transparent outline-2', 'dark:theme-outline-transparent',
+  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark', 'theme-outline-2-transparent', 'dark:theme-outline-2-transparent',
   // Theme (focus)
-  'focus-within:theme-background-primary-translucent-1', 'dark:focus-within:theme-background-primary-translucent-1-dark', 'focus-within:theme-border-primary focus-within:border-1', 'dark:focus-within:theme-border-primary-dark', 'focus-within:theme-outline-primary focus-within:outline-2', 'dark:focus-within:theme-outline-primary-dark',
+  'focus-within:theme-background-primary-translucent-1', 'dark:focus-within:theme-background-primary-translucent-1-dark', 'focus-within:theme-border-1-primary', 'dark:focus-within:theme-border-1-primary-dark', 'focus-within:theme-outline-2-primary', 'dark:focus-within:theme-outline-2-primary-dark',
   // Theme (invalid)
-  'invalid:theme-preset-3-error', 'dark:invalid:theme-preset-3-error-dark', 'invalid:theme-background-error-translucent-1', 'dark:invalid:theme-background-error-translucent-1-dark', 'invalid:theme-foreground-default', 'dark:invalid:theme-foreground-default-dark', 'invalid:theme-border-error invalid:border-1', 'dark:invalid:theme-border-error-dark', 'invalid:theme-outline-transparent invalid:outline-2', 'dark:invalid:theme-outline-transparent',
-  // Theme (invalid + focus)
-  'invalid:focus-within:theme-background-error-translucent-1', 'dark:invalid:focus-within:theme-background-error-translucent-1-dark', 'invalid:focus-within:theme-border-error invalid:focus-within:border-1', 'dark:invalid:focus-within:theme-border-error-dark', 'invalid:focus-within:theme-outline-error invalid:focus-within:outline-2', 'dark:invalid:focus-within:theme-outline-error-dark',
+  'invalid:theme-preset-3-error', 'dark:invalid:theme-preset-3-error-dark', 'invalid:theme-background-error-translucent-1', 'dark:invalid:theme-background-error-translucent-1-dark', 'invalid:theme-foreground-default', 'dark:invalid:theme-foreground-default-dark', 'invalid:theme-border-1-error', 'dark:invalid:theme-border-1-error-dark', 'invalid:theme-outline-2-transparent', 'dark:invalid:theme-outline-2-transparent',
+  // Theme (invalid/focus)
+  'invalid:focus-within:theme-background-error-translucent-1', 'dark:invalid:focus-within:theme-background-error-translucent-1-dark', 'invalid:focus-within:theme-border-1-error', 'dark:invalid:focus-within:theme-border-1-error-dark', 'invalid:focus-within:theme-outline-2-error', 'dark:invalid:focus-within:theme-outline-2-error-dark',
   // Theme (read-only)
   'read-only:theme-background-primary-translucent-1', 'dark:read-only:theme-background-primary-translucent-1-dark', 'read-only:!border-transparent', 'dark:read-only:!border-transparent',
   // Theme (invalid + read-only)

package/dist/esm/v3/{OrList-d666e5f5.js → OrList-b3b477bf.js}

@@ -9,7 +9,7 @@ import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
 import { s as script$1 } from './OrIconButton-424d342e.js';
 import { s as script$2 } from './OrLabel-4abbce6e.js';
-import { s as script$3 } from './OrListItem-63389e98.js';
+import { s as script$3 } from './OrListItem-12e21bc6.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, createVNode, withCtx, createTextVNode, toDisplayString, createElementVNode, Fragment, renderList, createBlock, createCommentVNode } from 'vue';
 
 const List = [

package/dist/esm/v3/{OrListItem-63389e98.js → OrListItem-12e21bc6.js}

@@ -4,14 +4,14 @@ import { openBlock, createElementBlock, normalizeClass, createElementVNode, rend
 const ListItem = [
 // Interactivity (draggable)
 'draggable:interactivity-drag',
-// Shape
-'rounded-md',
 // Spacing
 'px-md md:px-sm', 'py-md md:py-sm',
+// Shape
+'rounded-md',
 // Theme (hover)
 'hover:theme-background-primary-translucent-1', 'dark:hover:theme-background-primary-translucent-1-dark',
 // Theme (focus)
-'focus-within:theme-outline-primary focus-within:outline-2', 'dark:focus-within:theme-outline-primary-dark',
+'focus-within:theme-outline-2-primary', 'dark:focus-within:theme-outline-2-primary-dark',
 // Theme (selected)
 'selected:theme-background-primary-translucent-3', 'dark:selected:theme-background-primary-translucent-3-dark'];
 const ListItemContent = [

package/dist/esm/v3/{OrPagination-9fa8d8d0.js → OrPagination-58302dd0.js}

@@ -5,11 +5,11 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import { u as useResponsive } from './useResponsive-1baf3485.js';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
-import { s as script$1 } from './OrButton-31bcb511.js';
+import { s as script$1 } from './OrButton-c95aef65.js';
 import { s as script$2 } from './OrIcon-c446d072.js';
 import { s as script$4 } from './OrMenuItem-61713ccc.js';
 import { s as script$3 } from './OrMenu-482e868d.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withModifiers, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 
 const PaginationRoot = [
 // Layout
@@ -50,14 +50,14 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: undefined,
+      type: Object,
       default: undefined
     },
     length: {
       type: Number,
       required: true
     },
-    options: {
+    pageSizeOptions: {
       type: Array,
       default: () => [50, 20, 10, 5]
     }
@@ -87,7 +87,7 @@ var script = defineComponent({
     const currentLimit = computed({
       get: () => {
         var _a, _b;
-        return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.limit) !== null && _b !== void 0 ? _b : props.options[0];
+        return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.limit) !== null && _b !== void 0 ? _b : props.pageSizeOptions[0];
       },
       set: value => {
         proxyModelValue.value = {
@@ -204,7 +204,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     variant: 'link',
     color: 'inherit',
     disabled: _ctx.currentPage === _ctx.firstPage,
-    onClick: _cache[0] || (_cache[0] = $event => _ctx.toPreviousPage())
+    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.toPreviousPage(), ["stop"]))
   }, {
     default: withCtx(() => [createVNode(_component_OrIcon, {
       icon: 'keyboard_arrow_left'
@@ -219,7 +219,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       variant: 'link',
       color: 'inherit',
       activated: _ctx.currentPage === page,
-      onClick: $event => typeof page === 'number' && _ctx.toPage(page)
+      onClick: withModifiers($event => typeof page === 'number' && _ctx.toPage(page), ["stop"])
     }, {
       default: withCtx(() => [createTextVNode(toDisplayString(page), 1 /* TEXT */)]),
 
@@ -230,7 +230,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     variant: 'link',
     color: 'inherit',
     disabled: _ctx.currentPage === _ctx.lastPage,
-    onClick: _cache[1] || (_cache[1] = $event => _ctx.toNextPage())
+    onClick: _cache[1] || (_cache[1] = withModifiers($event => _ctx.toNextPage(), ["stop"]))
   }, {
     default: withCtx(() => [createVNode(_component_OrIcon, {
       icon: 'keyboard_arrow_right'
@@ -246,7 +246,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     variant: 'link',
     color: 'inherit',
     activated: true,
-    onClick: _cache[2] || (_cache[2] = $event => _ctx.limitMenu && _ctx.limitMenu.open())
+    onClick: _cache[2] || (_cache[2] = withModifiers($event => _ctx.limitMenu.open(), ["stop"]))
   }, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.currentLimit) + " ", 1 /* TEXT */), createVNode(_component_OrIcon, {
       icon: _ctx.limitMenu && _ctx.limitMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
@@ -258,13 +258,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     trigger: _ctx.limitButtonRoot,
     placement: 'top'
   }, {
-    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, pageSize => {
+    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.pageSizeOptions, pageSize => {
       return openBlock(), createBlock(_component_OrMenuItem, {
         key: pageSize,
-        onClick: $event => {
+        onClick: withModifiers($event => {
           _ctx.currentLimit = pageSize;
-          _ctx.limitMenu && _ctx.limitMenu.close();
-        }
+          _ctx.limitMenu.close();
+        }, ["stop"])
       }, {
         default: withCtx(() => [createTextVNode(toDisplayString(pageSize), 1 /* TEXT */)]),
 
@@ -281,7 +281,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     variant: 'link',
     color: 'inherit',
     disabled: _ctx.currentPage === _ctx.lastPage,
-    onClick: _cache[3] || (_cache[3] = $event => _ctx.toNextPage())
+    onClick: _cache[3] || (_cache[3] = withModifiers($event => _ctx.toNextPage(), ["stop"]))
   }, {
     default: withCtx(() => [createVNode(_component_OrIcon, {
       icon: 'keyboard_arrow_right'

package/dist/esm/v3/{OrRadio-a4109ee7.js → OrRadio-0a8b6e08.js}

@@ -25,9 +25,9 @@ const RadioControl = [
 // Box
 'w-md+ md:w-md', 'h-md+ md:h-md',
 // Theme
-'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-outline border-1', 'dark:theme-border-outline-dark',
+'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark',
 // Theme (focus)
-'focus-visible:theme-outline-primary focus-visible:outline-2', 'dark:focus-visible:theme-outline-primary-dark',
+'focus-visible:theme-outline-2-primary', 'dark:focus-visible:theme-outline-2-primary-dark',
 // Theme (checked)
 'checked:theme-preset-1-primary', 'dark:checked:theme-preset-1-primary-dark'];
 const RadioControlHandle = [
@@ -35,9 +35,9 @@ const RadioControlHandle = [
 'after:w-sm after:md:w-xs', 'after:h-sm after:md:h-xs',
 // Shape (children)
 'after:rounded-full',
-// Theme (checked / children)
+// Theme (children/checked)
 'after:checked:bg-on-primary', 'dark:after:checked:bg-on-primary-dark',
-// Theme (checked + disabled / children)
+// Theme (children/checked/disabled)
 'after:disabled:checked:bg-on-disabled', 'dark:after:disabled:checked:bg-on-disabled-dark'];
 
 var script = defineComponent({

package/dist/esm/v3/{OrRadioGroup-7e7b9d4c.js → OrRadioGroup-a73d1147.js}

@@ -6,7 +6,7 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
 import { s as script$1, F as FormGroupDirection } from './OrFormGroup-4afd327b.js';
-import { s as script$2 } from './OrRadio-a4109ee7.js';
+import { s as script$2 } from './OrRadio-0a8b6e08.js';
 import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, createElementBlock, Fragment, renderList } from 'vue';
 
 var script = defineComponent({

package/dist/esm/v3/{OrRangeSlider-f3b389e0.js → OrRangeSlider-c61cd40b.js}

@@ -5,7 +5,7 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
-import { a as SliderOrientation, S as SliderColor } from './OrSlider-9a2a3454.js';
+import { a as SliderOrientation, S as SliderColor } from './OrSlider-6fa6d657.js';
 import { s as script$1 } from './OrTooltip-8666fe26.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, Fragment, renderList, createCommentVNode } from 'vue';
 
@@ -115,18 +115,18 @@ const RangeSliderThumb = [
 const RangeSliderThumbColors = {
   [SliderColor.Primary]: [
   // Theme
-  'theme-border-primary border-4', 'dark:theme-border-primary-dark',
+  'theme-border-4-primary', 'dark:theme-border-4-primary-dark',
   // Theme (hover)
   'hover:theme-background-primary', 'dark:hover:theme-background-primary-dark',
   // Theme (active)
-  'active:theme-background-primary', 'dark:active:theme-background-primary-dark', 'active:theme-outline-primary active:outline-10', 'dark:active:theme-outline-primary-dark'],
+  'active:theme-background-primary', 'dark:active:theme-background-primary-dark', 'active:theme-outline-10-primary', 'dark:active:theme-outline-10-primary-dark'],
   [SliderColor.Secondary]: [
   // Theme
-  'theme-border-secondary border-4', 'dark:theme-border-secondary-dark',
+  'theme-border-4-secondary', 'dark:theme-border-4-secondary-dark',
   // Theme (hover)
   'hover:theme-background-secondary', 'dark:hover:theme-background-secondary-dark',
   // Theme (active)
-  'active:theme-background-secondary', 'dark:active:theme-background-secondary-dark', 'active:theme-outline-secondary active:outline-10', 'dark:active:theme-outline-secondary-dark']
+  'active:theme-background-secondary', 'dark:active:theme-background-secondary-dark', 'active:theme-outline-10-secondary', 'dark:active:theme-outline-10-secondary-dark']
 };
 const RangeSliderBreakpointMark = [
 // Position
@@ -215,7 +215,7 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: undefined,
+      type: Object,
       default: undefined
     },
     minValue: {
@@ -232,7 +232,7 @@ var script = defineComponent({
     },
     breakpoints: {
       type: Array,
-      default: () => []
+      default: []
     },
     color: {
       type: String,
@@ -254,14 +254,19 @@ var script = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
-    // Refs & Styles
+    // Refs
     const root = ref();
-    const rootStyles = computed(() => ['or-range-slider-v3', ...RangeSlider, ...RangeSliderOrientations[props.orientation]]);
     const rail = ref();
-    const railStyles = computed(() => ['or-range-slider-rail-v3', ...RangeSliderRail, ...RangeSliderRailOrientations[props.orientation]]);
     const offset = ref();
+    const track = ref();
+    const filler = ref();
+    const thumbFrom = ref();
+    const thumbTo = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-range-slider-v3', ...RangeSlider, ...RangeSliderOrientations[props.orientation]]);
+    const railStyles = computed(() => ['or-range-slider-rail-v3', ...RangeSliderRail, ...RangeSliderRailOrientations[props.orientation]]);
     const offsetStyles = computed(() => [...RangeSliderOffset, ...RangeSliderOffsetOrientations[props.orientation]]);
-    const offsetInlineStyles = computed(() => {
+    const offsetComputedStyles = computed(() => {
       switch (props.orientation) {
         case SliderOrientation.Horizontal:
         case SliderOrientation.HorizontalReversed:
@@ -275,9 +280,8 @@ var script = defineComponent({
           };
       }
     });
-    const track = ref();
     const trackStyles = computed(() => [...RangeSliderTrack, ...RangeSliderTrackColors[props.color]]);
-    const trackInlineStyles = computed(() => {
+    const trackComputedStyles = computed(() => {
       switch (props.orientation) {
         case SliderOrientation.Horizontal:
         case SliderOrientation.HorizontalReversed:
@@ -291,9 +295,6 @@ var script = defineComponent({
           };
       }
     });
-    const filler = ref();
-    const thumbFrom = ref();
-    const thumbTo = ref();
     const thumbStyles = computed(() => ['or-range-slider-thumb-v3', ...RangeSliderThumb, ...RangeSliderThumbColors[props.color]]);
     const breakpointMarkStyles = computed(() => [...RangeSliderBreakpointMark, ...RangeSliderBreakpointMarkColors[props.color]]);
     const labelStyles = computed(() => [...RangeSliderLabel, ...RangeSliderLabelOrientations[props.orientation]]);
@@ -368,7 +369,9 @@ var script = defineComponent({
       }
     });
     const internalModelValueFrom = computed({
-      get: () => (proxyModelValueFrom.value - props.minValue) / (props.maxValue - props.minValue),
+      get: () => {
+        return (proxyModelValueFrom.value - props.minValue) / (props.maxValue - props.minValue);
+      },
       set: value => {
         const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
         const draftProxyModelValue = [internalBreakpoints.value.reduce((a, b) => {
@@ -387,7 +390,9 @@ var script = defineComponent({
       }
     });
     const internalModelValueTo = computed({
-      get: () => (proxyModelValueTo.value - props.minValue) / (props.maxValue - props.minValue),
+      get: () => {
+        return (proxyModelValueTo.value - props.minValue) / (props.maxValue - props.minValue);
+      },
       set: value => {
         const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
         const draftProxyModelValue = [internalModelValueFrom.value * (props.maxValue - props.minValue) + props.minValue, internalBreakpoints.value.reduce((a, b) => {
@@ -409,7 +414,7 @@ var script = defineComponent({
       if (!props.step) {
         return [props.minValue, ...props.breakpoints, props.maxValue];
       }
-      return Array(Math.ceil(Math.abs(props.maxValue - props.minValue) / props.step)).fill(undefined).map((value, index) => Math.floor((props.minValue + props.step * index) * 1000) / 1000).concat(...props.breakpoints, props.maxValue).sort((a, b) => a - b);
+      return Array(Math.ceil(Math.abs(props.maxValue - props.minValue) / props.step)).fill(null).map((value, index) => Math.floor((props.minValue + props.step * index) * 1000) / 1000).concat(...props.breakpoints, props.maxValue).sort((a, b) => a - b);
     });
     const tooltipPlacement = computed(() => {
       switch (props.orientation) {
@@ -542,18 +547,18 @@ var script = defineComponent({
     });
     return {
       root,
-      rootStyles,
       rail,
-      railStyles,
       offset,
-      offsetStyles,
-      offsetInlineStyles,
       track,
-      trackStyles,
-      trackInlineStyles,
       filler,
       thumbFrom,
       thumbTo,
+      rootStyles,
+      railStyles,
+      offsetStyles,
+      offsetComputedStyles,
+      trackStyles,
+      trackComputedStyles,
       thumbStyles,
       breakpointMarkStyles,
       labelStyles,
@@ -597,7 +602,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, [createElementVNode("div", {
     ref: 'offset',
     class: normalizeClass(_ctx.offsetStyles),
-    style: normalizeStyle(_ctx.offsetInlineStyles),
+    style: normalizeStyle(_ctx.offsetComputedStyles),
     disabled: _ctx.disabled
   }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_3), createVNode(_component_OrTooltip, mergeProps({
     class: ['relative', 'z-10'],
@@ -619,7 +624,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, 16 /* FULL_PROPS */, ["is-open", "placement"]), createElementVNode("div", {
     ref: 'track',
     class: normalizeClass(_ctx.trackStyles),
-    style: normalizeStyle(_ctx.trackInlineStyles),
+    style: normalizeStyle(_ctx.trackComputedStyles),
     disabled: _ctx.disabled
   }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_5), createVNode(_component_OrTooltip, mergeProps({
     class: ['relative', 'z-10'],
@@ -662,7 +667,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(_ctx.labelMarkStyles),
       style: normalizeStyle(_ctx.getBreakpointMarkComputedStyles(breakpoint)),
       disabled: _ctx.disabled,
-      "force-state": _ctx.highlightedBreakpoint === breakpoint ? 'hover' : undefined,
+      "force-state": _ctx.highlightedBreakpoint === breakpoint ? 'hover' : null,
       onMouseenter: $event => _ctx.highlightedBreakpoint = breakpoint,
       onMouseleave: _cache[1] || (_cache[1] = $event => _ctx.highlightedBreakpoint = undefined),
       onClick: $event => _ctx.onClick(breakpoint)

package/dist/esm/v3/{OrResizeablePanel-5000543d.js → OrResizeablePanel-6b7f5b95.js}

@@ -139,7 +139,7 @@ const ResizeablePanelCollapseButtonContainer = [
 // Typography
 'leading-[0]',
 // Theme
-'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-outline-variant border-1', 'dark:theme-border-outline-variant-dark'];
+'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-1-outline-variant', 'dark:theme-border-1-outline-variant-dark'];
 const ResizeablePanelCollapseButtonContainerPlacements = {
   [ResizeablePanelPlacement.Top]: [
   // Position
@@ -162,7 +162,7 @@ const ResizeablePanelToolbar = [
 // Spacing
 'px-md', 'py-md', 'gap-md',
 // Theme
-'theme-border-outline-variant border-1', 'dark:theme-border-outline-variant-dark'];
+'theme-border-1-outline-variant', 'dark:theme-border-1-outline-variant-dark'];
 const ResizeablePanelToolbarPlacements = {
   [ResizeablePanelPlacement.Top]: [
   // Layout