@onereach/ui-components 8.22.2 → 8.22.3-beta.4120.0

package/dist/esm/v2/{OrRangeSlider-2770c783.js → OrRangeSlider-3615db44.js}

@@ -6,7 +6,7 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { _ as __vue_component__$1 } from './OrTooltip-3bf8772e.js';
 import './OrPopover-9471c7ea.js';
-import { a as SliderOrientation, S as SliderColor } from './OrSlider.vue_rollup-plugin-vue_script-5b284c82.js';
+import { a as SliderOrientation, S as SliderColor } from './OrSlider.vue_rollup-plugin-vue_script-c96b0631.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: {
@@ -271,7 +291,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])
@@ -568,7 +588,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,
@@ -578,15 +598,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("label-" + breakpoint, function () {
+      return [_vm._v("\n        " + _vm._s(breakpoint) + "\n      ")];
+    }, {
+      "value": breakpoint
+    })], 2);
+  }), 0)]);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/esm/v2/{OrSlider-2e29c468.js → OrSlider-0c597a11.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrSlider.vue_rollup-plugin-vue_script-5b284c82.js';
+import { s as script } from './OrSlider.vue_rollup-plugin-vue_script-c96b0631.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 /* script */
@@ -42,7 +42,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,
@@ -52,15 +52,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("label-" + breakpoint, 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-5b284c82.js → OrSlider.vue_rollup-plugin-vue_script-c96b0631.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: {
@@ -248,7 +268,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-2770c783.js';
-export { _ as OrSliderV3 } from '../OrSlider-2e29c468.js';
-export { S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from '../OrSlider.vue_rollup-plugin-vue_script-5b284c82.js';
+export { _ as OrRangeSliderV3 } from '../OrRangeSlider-3615db44.js';
+export { _ as OrSliderV3 } from '../OrSlider-0c597a11.js';
+export { S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from '../OrSlider.vue_rollup-plugin-vue_script-c96b0631.js';
 export { _ as OrRatingV3 } from '../OrRating-abf1b609.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from '../OrResizeablePanel-23b6fb7b.js';
 export { F as Formats, _ as OrRichTextEditorV3 } from '../OrRichTextEditor-8ea77303.js';

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

@@ -1,5 +1,5 @@
-export { _ as OrRangeSliderV3 } from '../../OrRangeSlider-2770c783.js';
-export { S as RangeSliderColor, a as RangeSliderOrientation } from '../../OrSlider.vue_rollup-plugin-vue_script-5b284c82.js';
+export { _ as OrRangeSliderV3 } from '../../OrRangeSlider-3615db44.js';
+export { S as RangeSliderColor, a as RangeSliderOrientation } from '../../OrSlider.vue_rollup-plugin-vue_script-c96b0631.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-2e29c468.js';
-export { S as SliderColor, a as SliderOrientation } from '../../OrSlider.vue_rollup-plugin-vue_script-5b284c82.js';
+export { _ as OrSliderV3 } from '../../OrSlider-0c597a11.js';
+export { S as SliderColor, a as SliderOrientation } from '../../OrSlider.vue_rollup-plugin-vue_script-c96b0631.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/components/or-text-v3/OrText.vue.d.ts

@@ -3,7 +3,7 @@
  * Ellipsis can be placed in the end or in the middle of the text. Convenient for displaying long labels,
  * that have same beginning and differ in the ending part.
  */
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     mainTextStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -48,7 +48,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: NumberConstructor;
         default: number;
     };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+}>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     text: string;
     sliceIndex: number;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{

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-2770c783.js';
-export { _ as OrSliderV3 } from './OrSlider-2e29c468.js';
-export { S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider.vue_rollup-plugin-vue_script-5b284c82.js';
+export { _ as OrRangeSliderV3 } from './OrRangeSlider-3615db44.js';
+export { _ as OrSliderV3 } from './OrSlider-0c597a11.js';
+export { S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider.vue_rollup-plugin-vue_script-c96b0631.js';
 export { _ as OrRatingV3 } from './OrRating-abf1b609.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-23b6fb7b.js';
 export { F as Formats, _ as OrRichTextEditorV3 } from './OrRichTextEditor-8ea77303.js';

package/dist/esm/v3/{OrRangeSlider-0869e30e.js → OrRangeSlider-194f2057.js}

@@ -6,8 +6,8 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { s as script$1 } from './OrTooltip-287ff0e4.js';
 import './OrPopover-1c87b4ed.js';
-import { a as SliderOrientation, S as SliderColor } from './OrSlider-8eed054b.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, withCtx, Fragment, renderList, toDisplayString } from 'vue';
+import { a as SliderOrientation, S as SliderColor } from './OrSlider-ce227f39.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, withCtx, Fragment, renderList, createCommentVNode, renderSlot, createTextVNode, toDisplayString } 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: {
@@ -271,7 +291,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])
@@ -506,10 +526,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", {
@@ -562,7 +579,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),
@@ -570,13 +589,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, `label-${breakpoint}`, {
+      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-8eed054b.js → OrSlider-ce227f39.js}

@@ -6,7 +6,7 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { s as script$1 } from './OrTooltip-287ff0e4.js';
 import './OrPopover-1c87b4ed.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, withCtx, Fragment, renderList, toDisplayString } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, withCtx, Fragment, renderList, createCommentVNode, renderSlot, createTextVNode, toDisplayString } 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: {
@@ -249,7 +269,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')
@@ -379,10 +399,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", {
@@ -411,7 +428,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       disabled: _ctx.disabled
     }, null, 10 /* CLASS, PROPS */, _hoisted_4)]),
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["is-open", "content", "placement"]), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.breakpoints, breakpoint => {
+  }, 8 /* PROPS */, ["is-open", "content", "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),
@@ -419,13 +438,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, `label-${breakpoint}`, {
+      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-0869e30e.js';
-export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from '../OrSlider-8eed054b.js';
+export { s as OrRangeSliderV3 } from '../OrRangeSlider-194f2057.js';
+export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from '../OrSlider-ce227f39.js';
 export { s as OrRatingV3 } from '../OrRating-ec9462c5.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from '../OrResizeablePanel-6d9a3ca1.js';
 export { F as Formats, s as OrRichTextEditorV3 } from '../OrRichTextEditor-2575cf3e.js';

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

@@ -1,5 +1,5 @@
-export { s as OrRangeSliderV3 } from '../../OrRangeSlider-0869e30e.js';
-export { S as RangeSliderColor, a as RangeSliderOrientation } from '../../OrSlider-8eed054b.js';
+export { s as OrRangeSliderV3 } from '../../OrRangeSlider-194f2057.js';
+export { S as RangeSliderColor, a as RangeSliderOrientation } from '../../OrSlider-ce227f39.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-8eed054b.js';
+export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from '../../OrSlider-ce227f39.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-0869e30e.js';
-export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider-8eed054b.js';
+export { s as OrRangeSliderV3 } from './OrRangeSlider-194f2057.js';
+export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider-ce227f39.js';
 export { s as OrRatingV3 } from './OrRating-ec9462c5.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-6d9a3ca1.js';
 export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-2575cf3e.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.22.2",
+  "version": "8.22.3-beta.4120.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -177,6 +177,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "e25654439cc46123247a6d0f70a117015a8a8274"
+  }
 }

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

@@ -59,25 +59,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="`label-${breakpoint}`"
+          :value="breakpoint"
+        >
+          {{ breakpoint }}
+        </slot>
       </div>
     </div>
   </div>
@@ -89,7 +96,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: {
@@ -226,6 +233,7 @@ export default defineComponent({
 
     const labelMarkStyles = computed(() => [
       ...RangeSliderLabelMark,
+      ...RangeSliderLabelMarkOrientations[props.orientation],
     ]);
 
     // State