@onereach/ui-components 8.24.1-beta.4152.0 → 8.24.2-beta.4156.0

package/dist/esm/v2/{OrRangeSlider-45474510.js → OrRangeSlider-d2340af6.js}

@@ -6,7 +6,7 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { _ as __vue_component__$1 } from './OrTooltip-a4fc2fe5.js';
 import './OrPopover-98ace710.js';
-import { a as SliderOrientation, S as SliderColor } from './OrSlider.vue_rollup-plugin-vue_script-43f26d1a.js';
+import { a as SliderOrientation, S as SliderColor } from './OrSlider.vue_rollup-plugin-vue_script-2d2013f9.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const RangeSlider = [
@@ -153,7 +153,9 @@ const RangeSliderBreakpointMarkColors = {
   // Theme (disabled)
   'disabled:!bg-on-disabled', 'dark:disabled:!bg-on-disabled-dark']
 };
-const RangeSliderLabel = [];
+const RangeSliderLabel = [
+// Position
+'relative'];
 const RangeSliderLabelOrientations = {
   [SliderOrientation.Horizontal]: [
   // Layout
@@ -177,10 +179,28 @@ const RangeSliderLabelOrientations = {
   'h-full']
 };
 const RangeSliderLabelMark = [
+// Position
+'absolute',
 // Typography
-'typography-caption-regular',
+'typography-caption-regular whitespace-nowrap',
 // Theme
-'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
+// Theme (hover)
+'hover:theme-foreground-default', 'dark:hover:theme-foreground-default-dark'];
+const RangeSliderLabelMarkOrientations = {
+  [SliderOrientation.Horizontal]: [
+  // Position
+  '-translate-x-1/2', 'translate-y-1/2'],
+  [SliderOrientation.HorizontalReversed]: [
+  // Position
+  'translate-x-1/2', 'translate-y-1/2'],
+  [SliderOrientation.Vertical]: [
+  // Position
+  'translate-x-1/2', 'translate-y-1/2'],
+  [SliderOrientation.VerticalReversed]: [
+  // Position
+  'translate-x-1/2', '-translate-y-1/2']
+};
 
 var script = defineComponent({
   components: {
@@ -275,7 +295,7 @@ var script = defineComponent({
     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]]);
-    const labelMarkStyles = computed(() => [...RangeSliderLabelMark]);
+    const labelMarkStyles = computed(() => [...RangeSliderLabelMark, ...RangeSliderLabelMarkOrientations[props.orientation]]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
       defaultValue: computed(() => [props.minValue, props.maxValue])
@@ -592,7 +612,7 @@ var __vue_render__ = function () {
     attrs: {
       "disabled": _vm.disabled
     }
-  }), _vm._v(" "), _vm._l(_vm.breakpoints, function (breakpoint) {
+  }), _vm._v(" "), _vm.breakpoints.length > 0 ? _vm._l([_vm.minValue].concat(_vm.breakpoints, [_vm.maxValue]), function (breakpoint) {
     return _c('div', {
       key: breakpoint,
       class: _vm.breakpointMarkStyles,
@@ -602,15 +622,22 @@ var __vue_render__ = function () {
         "disabled": _vm.disabled
       }
     });
-  })], 2), _vm._v(" "), _c('div', {
+  }) : _vm._e()], 2), _vm._v(" "), _c('div', {
     class: _vm.labelStyles
-  }, [_c('div', {
-    class: _vm.labelMarkStyles
-  }, [_vm._v("\n      " + _vm._s(_vm.minValue) + "\n    ")]), _vm._v(" "), _c('div', {
-    class: ['grow']
-  }), _vm._v(" "), _c('div', {
-    class: _vm.labelMarkStyles
-  }, [_vm._v("\n      " + _vm._s(_vm.maxValue) + "\n    ")])])]);
+  }, _vm._l([_vm.minValue].concat(_vm.breakpoints, [_vm.maxValue]), function (breakpoint) {
+    return _c('div', {
+      key: breakpoint,
+      class: _vm.labelMarkStyles,
+      style: _vm.getBreakpointMarkComputedStyles(breakpoint),
+      attrs: {
+        "disabled": _vm.disabled
+      }
+    }, [_vm._t(breakpoint + "-label", function () {
+      return [_vm._v("\n        " + _vm._s(breakpoint) + "\n      ")];
+    }, {
+      "value": breakpoint
+    })], 2);
+  }), 0)]);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/esm/v2/{OrSlider-c8b79715.js → OrSlider-8b597ea6.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrSlider.vue_rollup-plugin-vue_script-43f26d1a.js';
+import { s as script } from './OrSlider.vue_rollup-plugin-vue_script-2d2013f9.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 /* script */
@@ -52,7 +52,7 @@ var __vue_render__ = function () {
     attrs: {
       "disabled": _vm.disabled
     }
-  })]), _vm._v(" "), _vm._l(_vm.breakpoints, function (breakpoint) {
+  })]), _vm._v(" "), _vm.breakpoints.length > 0 ? _vm._l([_vm.minValue].concat(_vm.breakpoints, [_vm.maxValue]), function (breakpoint) {
     return _c('div', {
       key: breakpoint,
       class: _vm.breakpointMarkStyles,
@@ -62,15 +62,22 @@ var __vue_render__ = function () {
         "disabled": _vm.disabled
       }
     });
-  })], 2), _vm._v(" "), _c('div', {
+  }) : _vm._e()], 2), _vm._v(" "), _c('div', {
     class: _vm.labelStyles
-  }, [_c('div', {
-    class: _vm.labelMarkStyles
-  }, [_vm._v("\n      " + _vm._s(_vm.minValue) + "\n    ")]), _vm._v(" "), _c('div', {
-    class: ['grow']
-  }), _vm._v(" "), _c('div', {
-    class: _vm.labelMarkStyles
-  }, [_vm._v("\n      " + _vm._s(_vm.maxValue) + "\n    ")])])]);
+  }, _vm._l([_vm.minValue].concat(_vm.breakpoints, [_vm.maxValue]), function (breakpoint) {
+    return _c('div', {
+      key: breakpoint,
+      class: _vm.labelMarkStyles,
+      style: _vm.getBreakpointMarkComputedStyles(breakpoint),
+      attrs: {
+        "disabled": _vm.disabled
+      }
+    }, [_vm._t(breakpoint + "-label", function () {
+      return [_vm._v("\n        " + _vm._s(breakpoint) + "\n      ")];
+    }, {
+      "value": breakpoint
+    })], 2);
+  }), 0)]);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/esm/v2/{OrSlider.vue_rollup-plugin-vue_script-43f26d1a.js → OrSlider.vue_rollup-plugin-vue_script-2d2013f9.js}

@@ -149,7 +149,9 @@ const SliderBreakpointMarkColors = {
   // Theme (disabled)
   'disabled:!bg-on-disabled', 'dark:disabled:!bg-on-disabled-dark']
 };
-const SliderLabel = [];
+const SliderLabel = [
+// Position
+'relative'];
 const SliderLabelOrientations = {
   [SliderOrientation.Horizontal]: [
   // Layout
@@ -173,10 +175,28 @@ const SliderLabelOrientations = {
   'h-full']
 };
 const SliderLabelMark = [
+// Position
+'absolute',
 // Typography
-'typography-caption-regular',
+'typography-caption-regular whitespace-nowrap',
 // Theme
-'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
+// Theme (hover)
+'hover:theme-foreground-default', 'dark:hover:theme-foreground-default-dark'];
+const SliderLabelMarkOrientations = {
+  [SliderOrientation.Horizontal]: [
+  // Position
+  '-translate-x-1/2', 'translate-y-1/2'],
+  [SliderOrientation.HorizontalReversed]: [
+  // Position
+  'translate-x-1/2', 'translate-y-1/2'],
+  [SliderOrientation.Vertical]: [
+  // Position
+  'translate-x-1/2', 'translate-y-1/2'],
+  [SliderOrientation.VerticalReversed]: [
+  // Position
+  'translate-x-1/2', '-translate-y-1/2']
+};
 
 var script = defineComponent({
   components: {
@@ -252,7 +272,7 @@ var script = defineComponent({
     const thumbStyles = computed(() => ['or-slider-thumb-v3', ...SliderThumb, ...SliderThumbColors[props.color]]);
     const breakpointMarkStyles = computed(() => [...SliderBreakpointMark, ...SliderBreakpointMarkColors[props.color]]);
     const labelStyles = computed(() => [...SliderLabel, ...SliderLabelOrientations[props.orientation]]);
-    const labelMarkStyles = computed(() => [...SliderLabelMark]);
+    const labelMarkStyles = computed(() => [...SliderLabelMark, ...SliderLabelMarkOrientations[props.orientation]]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
       defaultValue: toRef(props, 'minValue')

package/dist/esm/v2/components/index.js

@@ -95,9 +95,9 @@ export { _ as OrRadio } from '../OrRadio-811ad5a4.js';
 export { _ as OrRadioGroup } from '../OrRadioGroup-11424644.js';
 export { _ as OrRadioGroupV3 } from '../OrRadioGroup-825def2c.js';
 export { _ as OrRadioV3 } from '../OrRadio-c1b7cde1.js';
-export { _ as OrRangeSliderV3 } from '../OrRangeSlider-45474510.js';
-export { _ as OrSliderV3 } from '../OrSlider-c8b79715.js';
-export { S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from '../OrSlider.vue_rollup-plugin-vue_script-43f26d1a.js';
+export { _ as OrRangeSliderV3 } from '../OrRangeSlider-d2340af6.js';
+export { _ as OrSliderV3 } from '../OrSlider-8b597ea6.js';
+export { S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from '../OrSlider.vue_rollup-plugin-vue_script-2d2013f9.js';
 export { _ as OrRatingV3 } from '../OrRating-abf1b609.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from '../OrResizeablePanel-c3ee9f53.js';
 export { F as Formats, _ as OrRichTextEditorV3 } from '../OrRichTextEditor-8886dae7.js';

package/dist/esm/v2/components/or-range-slider-v3/index.js

@@ -1,5 +1,5 @@
-export { _ as OrRangeSliderV3 } from '../../OrRangeSlider-45474510.js';
-export { S as RangeSliderColor, a as RangeSliderOrientation } from '../../OrSlider.vue_rollup-plugin-vue_script-43f26d1a.js';
+export { _ as OrRangeSliderV3 } from '../../OrRangeSlider-d2340af6.js';
+export { S as RangeSliderColor, a as RangeSliderOrientation } from '../../OrSlider.vue_rollup-plugin-vue_script-2d2013f9.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../dom-aecadd9a.js';

package/dist/esm/v2/components/or-range-slider-v3/styles.d.ts

@@ -14,3 +14,4 @@ export declare const RangeSliderBreakpointMarkColors: Record<RangeSliderColor, s
 export declare const RangeSliderLabel: string[];
 export declare const RangeSliderLabelOrientations: Record<RangeSliderOrientation, string[]>;
 export declare const RangeSliderLabelMark: string[];
+export declare const RangeSliderLabelMarkOrientations: Record<RangeSliderOrientation, string[]>;

package/dist/esm/v2/components/or-slider-v3/index.js

@@ -1,5 +1,5 @@
-export { _ as OrSliderV3 } from '../../OrSlider-c8b79715.js';
-export { S as SliderColor, a as SliderOrientation } from '../../OrSlider.vue_rollup-plugin-vue_script-43f26d1a.js';
+export { _ as OrSliderV3 } from '../../OrSlider-8b597ea6.js';
+export { S as SliderColor, a as SliderOrientation } from '../../OrSlider.vue_rollup-plugin-vue_script-2d2013f9.js';
 import '../../normalize-component-6e8e3d80.js';
 import '@vueuse/core';
 import 'vue-demi';

package/dist/esm/v2/components/or-slider-v3/styles.d.ts

@@ -12,3 +12,4 @@ export declare const SliderBreakpointMarkColors: Record<SliderColor, string[]>;
 export declare const SliderLabel: string[];
 export declare const SliderLabelOrientations: Record<SliderOrientation, string[]>;
 export declare const SliderLabelMark: string[];
+export declare const SliderLabelMarkOrientations: Record<SliderOrientation, string[]>;

package/dist/esm/v2/index.js

@@ -95,9 +95,9 @@ export { _ as OrRadio } from './OrRadio-811ad5a4.js';
 export { _ as OrRadioGroup } from './OrRadioGroup-11424644.js';
 export { _ as OrRadioGroupV3 } from './OrRadioGroup-825def2c.js';
 export { _ as OrRadioV3 } from './OrRadio-c1b7cde1.js';
-export { _ as OrRangeSliderV3 } from './OrRangeSlider-45474510.js';
-export { _ as OrSliderV3 } from './OrSlider-c8b79715.js';
-export { S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider.vue_rollup-plugin-vue_script-43f26d1a.js';
+export { _ as OrRangeSliderV3 } from './OrRangeSlider-d2340af6.js';
+export { _ as OrSliderV3 } from './OrSlider-8b597ea6.js';
+export { S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider.vue_rollup-plugin-vue_script-2d2013f9.js';
 export { _ as OrRatingV3 } from './OrRating-abf1b609.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-c3ee9f53.js';
 export { F as Formats, _ as OrRichTextEditorV3 } from './OrRichTextEditor-8886dae7.js';

package/dist/esm/v3/{OrRangeSlider-c9947eb2.js → OrRangeSlider-8b2688e5.js}

@@ -6,8 +6,8 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { s as script$1 } from './OrTooltip-e982adca.js';
 import './OrPopover-d8067ed8.js';
-import { a as SliderOrientation, S as SliderColor } from './OrSlider-a5903a40.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, Fragment, renderList } from 'vue';
+import { a as SliderOrientation, S as SliderColor } from './OrSlider-bb98a511.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, Fragment, renderList, createCommentVNode } from 'vue';
 
 const RangeSlider = [
 // Interactivity
@@ -153,7 +153,9 @@ const RangeSliderBreakpointMarkColors = {
   // Theme (disabled)
   'disabled:!bg-on-disabled', 'dark:disabled:!bg-on-disabled-dark']
 };
-const RangeSliderLabel = [];
+const RangeSliderLabel = [
+// Position
+'relative'];
 const RangeSliderLabelOrientations = {
   [SliderOrientation.Horizontal]: [
   // Layout
@@ -177,10 +179,28 @@ const RangeSliderLabelOrientations = {
   'h-full']
 };
 const RangeSliderLabelMark = [
+// Position
+'absolute',
 // Typography
-'typography-caption-regular',
+'typography-caption-regular whitespace-nowrap',
 // Theme
-'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
+// Theme (hover)
+'hover:theme-foreground-default', 'dark:hover:theme-foreground-default-dark'];
+const RangeSliderLabelMarkOrientations = {
+  [SliderOrientation.Horizontal]: [
+  // Position
+  '-translate-x-1/2', 'translate-y-1/2'],
+  [SliderOrientation.HorizontalReversed]: [
+  // Position
+  'translate-x-1/2', 'translate-y-1/2'],
+  [SliderOrientation.Vertical]: [
+  // Position
+  'translate-x-1/2', 'translate-y-1/2'],
+  [SliderOrientation.VerticalReversed]: [
+  // Position
+  'translate-x-1/2', '-translate-y-1/2']
+};
 
 var script = defineComponent({
   components: {
@@ -275,7 +295,7 @@ var script = defineComponent({
     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]]);
-    const labelMarkStyles = computed(() => [...RangeSliderLabelMark]);
+    const labelMarkStyles = computed(() => [...RangeSliderLabelMark, ...RangeSliderLabelMarkOrientations[props.orientation]]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
       defaultValue: computed(() => [props.minValue, props.maxValue])
@@ -510,10 +530,7 @@ const _hoisted_5 = ["disabled"];
 const _hoisted_6 = ["disabled"];
 const _hoisted_7 = ["disabled"];
 const _hoisted_8 = ["activated", "disabled"];
-const _hoisted_9 = /*#__PURE__*/createElementVNode("div", {
-  class: /*#__PURE__*/normalizeClass(['grow'])
-}, null, -1 /* HOISTED */);
-
+const _hoisted_9 = ["disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrTooltip = resolveComponent("OrTooltip");
   return openBlock(), createElementBlock("div", {
@@ -572,7 +589,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "filler",
     class: normalizeClass(['grow', ..._ctx.offsetStyles]),
     disabled: _ctx.disabled
-  }, null, 10 /* CLASS, PROPS */, _hoisted_7), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.breakpoints, breakpoint => {
+  }, null, 10 /* CLASS, PROPS */, _hoisted_7), _ctx.breakpoints.length > 0 ? (openBlock(true), createElementBlock(Fragment, {
+    key: 0
+  }, renderList([_ctx.minValue, ..._ctx.breakpoints, _ctx.maxValue], breakpoint => {
     return openBlock(), createElementBlock("div", {
       key: breakpoint,
       class: normalizeClass(_ctx.breakpointMarkStyles),
@@ -580,13 +599,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       activated: breakpoint >= _ctx.proxyModelValue[_ctx.orientation.endsWith('-reversed') ? 1 : 0] && breakpoint <= _ctx.proxyModelValue[_ctx.orientation.endsWith('-reversed') ? 0 : 1],
       disabled: _ctx.disabled
     }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_8);
-  }), 128 /* KEYED_FRAGMENT */))], 10 /* CLASS, PROPS */, _hoisted_2), createElementVNode("div", {
+  }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true)], 10 /* CLASS, PROPS */, _hoisted_2), createElementVNode("div", {
     class: normalizeClass(_ctx.labelStyles)
-  }, [createElementVNode("div", {
-    class: normalizeClass(_ctx.labelMarkStyles)
-  }, toDisplayString(_ctx.minValue), 3 /* TEXT, CLASS */), _hoisted_9, createElementVNode("div", {
-    class: normalizeClass(_ctx.labelMarkStyles)
-  }, toDisplayString(_ctx.maxValue), 3 /* TEXT, CLASS */)], 2 /* CLASS */)], 10 /* CLASS, PROPS */, _hoisted_1);
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList([_ctx.minValue, ..._ctx.breakpoints, _ctx.maxValue], breakpoint => {
+    return openBlock(), createElementBlock("div", {
+      key: breakpoint,
+      class: normalizeClass(_ctx.labelMarkStyles),
+      style: normalizeStyle(_ctx.getBreakpointMarkComputedStyles(breakpoint)),
+      disabled: _ctx.disabled
+    }, [renderSlot(_ctx.$slots, `${breakpoint}-label`, {
+      value: breakpoint
+    }, () => [createTextVNode(toDisplayString(breakpoint), 1 /* TEXT */)])], 14 /* CLASS, STYLE, PROPS */, _hoisted_9);
+  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)], 10 /* CLASS, PROPS */, _hoisted_1);
 }
 
 script.render = render;

package/dist/esm/v3/{OrSlider-a5903a40.js → OrSlider-bb98a511.js}

@@ -6,7 +6,7 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { s as script$1 } from './OrTooltip-e982adca.js';
 import './OrPopover-d8067ed8.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, Fragment, renderList } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, Fragment, renderList, createCommentVNode } from 'vue';
 
 var SliderColor;
 (function (SliderColor) {
@@ -150,7 +150,9 @@ const SliderBreakpointMarkColors = {
   // Theme (disabled)
   'disabled:!bg-on-disabled', 'dark:disabled:!bg-on-disabled-dark']
 };
-const SliderLabel = [];
+const SliderLabel = [
+// Position
+'relative'];
 const SliderLabelOrientations = {
   [SliderOrientation.Horizontal]: [
   // Layout
@@ -174,10 +176,28 @@ const SliderLabelOrientations = {
   'h-full']
 };
 const SliderLabelMark = [
+// Position
+'absolute',
 // Typography
-'typography-caption-regular',
+'typography-caption-regular whitespace-nowrap',
 // Theme
-'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
+// Theme (hover)
+'hover:theme-foreground-default', 'dark:hover:theme-foreground-default-dark'];
+const SliderLabelMarkOrientations = {
+  [SliderOrientation.Horizontal]: [
+  // Position
+  '-translate-x-1/2', 'translate-y-1/2'],
+  [SliderOrientation.HorizontalReversed]: [
+  // Position
+  'translate-x-1/2', 'translate-y-1/2'],
+  [SliderOrientation.Vertical]: [
+  // Position
+  'translate-x-1/2', 'translate-y-1/2'],
+  [SliderOrientation.VerticalReversed]: [
+  // Position
+  'translate-x-1/2', '-translate-y-1/2']
+};
 
 var script = defineComponent({
   components: {
@@ -253,7 +273,7 @@ var script = defineComponent({
     const thumbStyles = computed(() => ['or-slider-thumb-v3', ...SliderThumb, ...SliderThumbColors[props.color]]);
     const breakpointMarkStyles = computed(() => [...SliderBreakpointMark, ...SliderBreakpointMarkColors[props.color]]);
     const labelStyles = computed(() => [...SliderLabel, ...SliderLabelOrientations[props.orientation]]);
-    const labelMarkStyles = computed(() => [...SliderLabelMark]);
+    const labelMarkStyles = computed(() => [...SliderLabelMark, ...SliderLabelMarkOrientations[props.orientation]]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
       defaultValue: toRef(props, 'minValue')
@@ -383,10 +403,7 @@ const _hoisted_2 = ["disabled"];
 const _hoisted_3 = ["disabled"];
 const _hoisted_4 = ["disabled"];
 const _hoisted_5 = ["activated", "disabled"];
-const _hoisted_6 = /*#__PURE__*/createElementVNode("div", {
-  class: /*#__PURE__*/normalizeClass(['grow'])
-}, null, -1 /* HOISTED */);
-
+const _hoisted_6 = ["disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrTooltip = resolveComponent("OrTooltip");
   return openBlock(), createElementBlock("div", {
@@ -418,7 +435,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       disabled: _ctx.disabled
     }, null, 10 /* CLASS, PROPS */, _hoisted_4)]),
     _: 3 /* FORWARDED */
-  }, 16 /* FULL_PROPS */, ["is-open", "placement"]), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.breakpoints, breakpoint => {
+  }, 16 /* FULL_PROPS */, ["is-open", "placement"]), _ctx.breakpoints.length > 0 ? (openBlock(true), createElementBlock(Fragment, {
+    key: 0
+  }, renderList([_ctx.minValue, ..._ctx.breakpoints, _ctx.maxValue], breakpoint => {
     return openBlock(), createElementBlock("div", {
       key: breakpoint,
       class: normalizeClass(_ctx.breakpointMarkStyles),
@@ -426,13 +445,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       activated: breakpoint <= _ctx.proxyModelValue,
       disabled: _ctx.disabled
     }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_5);
-  }), 128 /* KEYED_FRAGMENT */))], 10 /* CLASS, PROPS */, _hoisted_2), createElementVNode("div", {
+  }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true)], 10 /* CLASS, PROPS */, _hoisted_2), createElementVNode("div", {
     class: normalizeClass(_ctx.labelStyles)
-  }, [createElementVNode("div", {
-    class: normalizeClass(_ctx.labelMarkStyles)
-  }, toDisplayString(_ctx.minValue), 3 /* TEXT, CLASS */), _hoisted_6, createElementVNode("div", {
-    class: normalizeClass(_ctx.labelMarkStyles)
-  }, toDisplayString(_ctx.maxValue), 3 /* TEXT, CLASS */)], 2 /* CLASS */)], 10 /* CLASS, PROPS */, _hoisted_1);
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList([_ctx.minValue, ..._ctx.breakpoints, _ctx.maxValue], breakpoint => {
+    return openBlock(), createElementBlock("div", {
+      key: breakpoint,
+      class: normalizeClass(_ctx.labelMarkStyles),
+      style: normalizeStyle(_ctx.getBreakpointMarkComputedStyles(breakpoint)),
+      disabled: _ctx.disabled
+    }, [renderSlot(_ctx.$slots, `${breakpoint}-label`, {
+      value: breakpoint
+    }, () => [createTextVNode(toDisplayString(breakpoint), 1 /* TEXT */)])], 14 /* CLASS, STYLE, PROPS */, _hoisted_6);
+  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)], 10 /* CLASS, PROPS */, _hoisted_1);
 }
 
 script.render = render;

package/dist/esm/v3/components/index.js

@@ -92,8 +92,8 @@ export { s as OrRadio } from '../OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from '../OrRadioGroup-00785e41.js';
 export { s as OrRadioGroupV3 } from '../OrRadioGroup-cb6e81cb.js';
 export { s as OrRadioV3 } from '../OrRadio-c6f7ba23.js';
-export { s as OrRangeSliderV3 } from '../OrRangeSlider-c9947eb2.js';
-export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from '../OrSlider-a5903a40.js';
+export { s as OrRangeSliderV3 } from '../OrRangeSlider-8b2688e5.js';
+export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from '../OrSlider-bb98a511.js';
 export { s as OrRatingV3 } from '../OrRating-ec9462c5.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from '../OrResizeablePanel-35e64b58.js';
 export { F as Formats, s as OrRichTextEditorV3 } from '../OrRichTextEditor-b46eab67.js';

package/dist/esm/v3/components/or-range-slider-v3/index.js

@@ -1,5 +1,5 @@
-export { s as OrRangeSliderV3 } from '../../OrRangeSlider-c9947eb2.js';
-export { S as RangeSliderColor, a as RangeSliderOrientation } from '../../OrSlider-a5903a40.js';
+export { s as OrRangeSliderV3 } from '../../OrRangeSlider-8b2688e5.js';
+export { S as RangeSliderColor, a as RangeSliderOrientation } from '../../OrSlider-bb98a511.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../dom-aecadd9a.js';

package/dist/esm/v3/components/or-range-slider-v3/styles.d.ts

@@ -14,3 +14,4 @@ export declare const RangeSliderBreakpointMarkColors: Record<RangeSliderColor, s
 export declare const RangeSliderLabel: string[];
 export declare const RangeSliderLabelOrientations: Record<RangeSliderOrientation, string[]>;
 export declare const RangeSliderLabelMark: string[];
+export declare const RangeSliderLabelMarkOrientations: Record<RangeSliderOrientation, string[]>;

package/dist/esm/v3/components/or-slider-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from '../../OrSlider-a5903a40.js';
+export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from '../../OrSlider-bb98a511.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../dom-aecadd9a.js';

package/dist/esm/v3/components/or-slider-v3/styles.d.ts

@@ -12,3 +12,4 @@ export declare const SliderBreakpointMarkColors: Record<SliderColor, string[]>;
 export declare const SliderLabel: string[];
 export declare const SliderLabelOrientations: Record<SliderOrientation, string[]>;
 export declare const SliderLabelMark: string[];
+export declare const SliderLabelMarkOrientations: Record<SliderOrientation, string[]>;

package/dist/esm/v3/index.js

@@ -92,8 +92,8 @@ export { s as OrRadio } from './OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioGroupV3 } from './OrRadioGroup-cb6e81cb.js';
 export { s as OrRadioV3 } from './OrRadio-c6f7ba23.js';
-export { s as OrRangeSliderV3 } from './OrRangeSlider-c9947eb2.js';
-export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider-a5903a40.js';
+export { s as OrRangeSliderV3 } from './OrRangeSlider-8b2688e5.js';
+export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider-bb98a511.js';
 export { s as OrRatingV3 } from './OrRating-ec9462c5.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-35e64b58.js';
 export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-b46eab67.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.24.1-beta.4152.0",
+  "version": "8.24.2-beta.4156.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,

package/src/components/or-range-slider-v3/OrRangeSlider.vue

@@ -77,25 +77,32 @@
         :disabled="disabled"
       />
 
+      <template v-if="breakpoints.length > 0">
+        <div
+          v-for="breakpoint of [minValue, ...breakpoints, maxValue]"
+          :key="breakpoint"
+          :class="breakpointMarkStyles"
+          :style="getBreakpointMarkComputedStyles(breakpoint)"
+          :activated="breakpoint >= proxyModelValue[orientation.endsWith('-reversed') ? 1 : 0] && breakpoint <= proxyModelValue[orientation.endsWith('-reversed') ? 0 : 1]"
+          :disabled="disabled"
+        />
+      </template>
+    </div>
+
+    <div :class="labelStyles">
       <div
-        v-for="breakpoint of breakpoints"
+        v-for="breakpoint of [minValue, ...breakpoints, maxValue]"
         :key="breakpoint"
-        :class="breakpointMarkStyles"
+        :class="labelMarkStyles"
         :style="getBreakpointMarkComputedStyles(breakpoint)"
-        :activated="breakpoint >= proxyModelValue[orientation.endsWith('-reversed') ? 1 : 0] && breakpoint <= proxyModelValue[orientation.endsWith('-reversed') ? 0 : 1]"
         :disabled="disabled"
-      />
-    </div>
-
-    <div :class="labelStyles">
-      <div :class="labelMarkStyles">
-        {{ minValue }}
-      </div>
-
-      <div :class="['grow']" />
-
-      <div :class="labelMarkStyles">
-        {{ maxValue }}
+      >
+        <slot
+          :name="`${breakpoint}-label`"
+          :value="breakpoint"
+        >
+          {{ breakpoint }}
+        </slot>
       </div>
     </div>
   </div>
@@ -107,7 +114,7 @@ import { PropType, computed, defineComponent, ref, toRef, watch } from 'vue-demi
 import { useProxyModelValue } from '../../hooks';
 import { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3';
 import { RangeSliderColor, RangeSliderOrientation } from './props';
-import { RangeSlider, RangeSliderBreakpointMark, RangeSliderBreakpointMarkColors, RangeSliderLabel, RangeSliderLabelMark, RangeSliderLabelOrientations, RangeSliderOffset, RangeSliderOffsetOrientations, RangeSliderOrientations, RangeSliderRail, RangeSliderRailOrientations, RangeSliderThumb, RangeSliderThumbColors, RangeSliderTrack, RangeSliderTrackColors } from './styles';
+import { RangeSlider, RangeSliderBreakpointMark, RangeSliderBreakpointMarkColors, RangeSliderLabel, RangeSliderLabelMark, RangeSliderLabelMarkOrientations, RangeSliderLabelOrientations, RangeSliderOffset, RangeSliderOffsetOrientations, RangeSliderOrientations, RangeSliderRail, RangeSliderRailOrientations, RangeSliderThumb, RangeSliderThumbColors, RangeSliderTrack, RangeSliderTrackColors } from './styles';
 
 export default defineComponent({
   components: {
@@ -249,6 +256,7 @@ export default defineComponent({
 
     const labelMarkStyles = computed(() => [
       ...RangeSliderLabelMark,
+      ...RangeSliderLabelMarkOrientations[props.orientation],
     ]);
 
     // State