@onereach/ui-components 2.74.8-beta.2339.0 → 2.74.8

package/dist/esm/v2/{OrDateTimePicker-d8cb0e8d.js → OrDateTimePicker-e1ea0a9a.js}

@@ -484,7 +484,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "@keyframes spinAround-data-v-d9091eea{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-d9091eea{from{opacity:1}to{opacity:0}}.or-date-time-picker[data-v-d9091eea]{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.or-date-time-picker.is-fullwidth[data-v-d9091eea]{width:100%!important}.or-date-time-picker.is-date-type[data-v-d9091eea]{width:7.125rem}.or-date-time-picker.is-time-type[data-v-d9091eea]{width:7.125rem}.or-date-time-picker.is-date-time-type[data-v-d9091eea]{width:11.25rem}.or-date-time-picker .or-label[data-v-d9091eea]{margin-bottom:var(--s-1)}.or-date-time-picker-info[data-v-d9091eea]{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--s-2)}.or-date-time-picker-input-wrapper[data-v-d9091eea]{position:relative;width:100%;height:2.25rem;border:1px solid var(--c-neutral-2);border-radius:var(--s-2);background-color:var(--c-neutral-1);padding:.625rem;font-size:var(--fs-1);line-height:1rem;transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:border-color,background-color,-webkit-box-shadow}.or-date-time-picker-input-wrapper[data-v-d9091eea]:not(.is-readonly):hover{background-color:var(--c-neutral-0);cursor:pointer}.or-date-time-picker-input-wrapper.is-disabled[data-v-d9091eea],.or-date-time-picker-input-wrapper[data-v-d9091eea]:disabled{cursor:not-allowed;background-color:var(--c-neutral-2);border-color:var(--c-neutral-2)}.or-date-time-picker-input-wrapper.has-error[data-v-d9091eea]{border-color:var(--c-error)}@media (hover:hover) and (pointer:fine){.or-date-time-picker-input-wrapper.has-error[data-v-d9091eea]:not(.or-date-time-picker-input-wrapper.has-error.is-loading):not(.or-date-time-picker-input-wrapper.has-error.is-disabled):not(.or-date-time-picker-input-wrapper.has-error.is-readonly):not(.or-date-time-picker-input-wrapper.has-error:disabled):not(.or-date-time-picker-input-wrapper.has-error.is-focused):not(.or-date-time-picker-input-wrapper.has-error:active):hover{border-color:var(--c-error-darken-3)}}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.or-date-time-picker-input-wrapper.has-error[data-v-d9091eea]:not(.or-date-time-picker-input-wrapper.has-error.is-loading):not(.or-date-time-picker-input-wrapper.has-error.is-disabled):not(.or-date-time-picker-input-wrapper.has-error.is-readonly):not(.or-date-time-picker-input-wrapper.has-error:disabled):not(.or-date-time-picker-input-wrapper.has-error.is-focused):not(.or-date-time-picker-input-wrapper.has-error:active):hover{border-color:var(--c-error-darken-3)}}.or-date-time-picker-input-wrapper.has-error[data-v-d9091eea]:not(:disabled):not(.is-readonly):not(.is-loading):focus{border-color:var(--c-error-darken-5)}.or-date-time-picker-input-wrapper.has-error.is-disabled[data-v-d9091eea],.or-date-time-picker-input-wrapper.has-error[data-v-d9091eea]:disabled{cursor:not-allowed;border-color:var(--c-error-lighten-20)}.or-date-time-picker-input-wrapper .placeholder[data-v-d9091eea],.or-date-time-picker-input-wrapper .value[data-v-d9091eea]{width:100%;display:flex;flex-direction:row;justify-content:space-between;white-space:nowrap;transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:opacity}.or-date-time-picker-input-wrapper .placeholder[data-v-d9091eea]{color:var(--c-neutral-4);user-select:none}.content[data-v-d9091eea]{border:1px solid var(--c-neutral-2);border-radius:var(--s-2);display:flex;flex-direction:column;background-color:var(--c-neutral-0);text-align:center}.content .picker-header[data-v-d9091eea]{padding:var(--s-4) var(--s-3);display:flex;flex-direction:row;justify-content:space-between;gap:var(--s-3);font-weight:700;font-size:var(--fs-1);text-align:center;color:var(--c-neutral-6)}.content .picker-header-centered[data-v-d9091eea]{margin:auto}.content .calendar[data-v-d9091eea]{padding:0 var(--s-3) var(--s-3);font-size:var(--fs-0);line-height:.875rem}.content .calendar-week-days[data-v-d9091eea]{color:var(--c-neutral-4);display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--s-1)}.content .calendar-week-days>*[data-v-d9091eea]{width:var(--s-6)}.content .calendar-days[data-v-d9091eea]{display:flex;flex-direction:column;gap:var(--s-2)}.content .calendar-days-row[data-v-d9091eea]{display:flex;flex-direction:row;justify-content:space-around;gap:var(--s-2)}.content .time-footer[data-v-d9091eea]{width:100%;line-height:var(--s-6);text-align:center;display:inline-flex;flex-direction:row;justify-content:space-between;border-top:1px solid var(--c-neutral-2)}.content .time-footer input[data-v-d9091eea]::-webkit-inner-spin-button,.content .time-footer input[data-v-d9091eea]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.content .time-footer input[type=number][data-v-d9091eea]{-moz-appearance:textfield}.content .time-footer-input[data-v-d9091eea]{text-align:center;border:none;font-size:var(--fs-0)}.content .time-footer-input[data-v-d9091eea]:focus-visible{outline:0;background-color:var(--c-neutral-2)}.content .time-table[data-v-d9091eea]{display:flex;flex-direction:row;gap:var(--s-4)}.content .time-table-column[data-v-d9091eea]{display:flex;flex-direction:column}.content .time-table-column-time[data-v-d9091eea]{padding:0 var(--s-3) var(--s-3);display:flex;flex-direction:column;gap:var(--s-2)}.content .time-table-column-time-row[data-v-d9091eea]{display:flex;flex-direction:row;justify-content:space-around;gap:var(--s-2)}";
+var css_248z = "@keyframes spinAround-data-v-2cd46aea{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-2cd46aea{from{opacity:1}to{opacity:0}}.or-date-time-picker[data-v-2cd46aea]{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.or-date-time-picker.is-fullwidth[data-v-2cd46aea]{width:100%!important}.or-date-time-picker.is-date-type[data-v-2cd46aea]{width:7.125rem}.or-date-time-picker.is-time-type[data-v-2cd46aea]{width:7.125rem}.or-date-time-picker.is-date-time-type[data-v-2cd46aea]{width:11.25rem}.or-date-time-picker .or-label[data-v-2cd46aea]{margin-bottom:var(--s-1)}.or-date-time-picker-info[data-v-2cd46aea]{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--s-2)}.or-date-time-picker-input-wrapper[data-v-2cd46aea]{position:relative;width:100%;height:2.25rem;border:1px solid var(--c-neutral-2);border-radius:var(--s-2);background-color:var(--c-neutral-1);padding:.625rem;font-size:var(--fs-1);line-height:1rem;transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:border-color,background-color,-webkit-box-shadow}.or-date-time-picker-input-wrapper[data-v-2cd46aea]:not(.is-readonly):hover{background-color:var(--c-neutral-0);cursor:pointer}.or-date-time-picker-input-wrapper.is-disabled[data-v-2cd46aea],.or-date-time-picker-input-wrapper[data-v-2cd46aea]:disabled{cursor:not-allowed;background-color:var(--c-neutral-2);border-color:var(--c-neutral-2)}.or-date-time-picker-input-wrapper.has-error[data-v-2cd46aea]{border-color:var(--c-error)}@media (hover:hover) and (pointer:fine){.or-date-time-picker-input-wrapper.has-error[data-v-2cd46aea]:not(.or-date-time-picker-input-wrapper.has-error.is-loading):not(.or-date-time-picker-input-wrapper.has-error.is-disabled):not(.or-date-time-picker-input-wrapper.has-error.is-readonly):not(.or-date-time-picker-input-wrapper.has-error:disabled):not(.or-date-time-picker-input-wrapper.has-error.is-focused):not(.or-date-time-picker-input-wrapper.has-error:active):hover{border-color:var(--c-error-darken-3)}}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.or-date-time-picker-input-wrapper.has-error[data-v-2cd46aea]:not(.or-date-time-picker-input-wrapper.has-error.is-loading):not(.or-date-time-picker-input-wrapper.has-error.is-disabled):not(.or-date-time-picker-input-wrapper.has-error.is-readonly):not(.or-date-time-picker-input-wrapper.has-error:disabled):not(.or-date-time-picker-input-wrapper.has-error.is-focused):not(.or-date-time-picker-input-wrapper.has-error:active):hover{border-color:var(--c-error-darken-3)}}.or-date-time-picker-input-wrapper.has-error[data-v-2cd46aea]:not(:disabled):not(.is-readonly):not(.is-loading):focus{border-color:var(--c-error-darken-5)}.or-date-time-picker-input-wrapper.has-error.is-disabled[data-v-2cd46aea],.or-date-time-picker-input-wrapper.has-error[data-v-2cd46aea]:disabled{cursor:not-allowed;border-color:var(--c-error-lighten-20)}.or-date-time-picker-input-wrapper .placeholder[data-v-2cd46aea],.or-date-time-picker-input-wrapper .value[data-v-2cd46aea]{width:100%;display:flex;flex-direction:row;justify-content:space-between;white-space:nowrap;transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:opacity}.or-date-time-picker-input-wrapper .placeholder[data-v-2cd46aea]{color:var(--c-neutral-4);user-select:none}.content[data-v-2cd46aea]{border:1px solid var(--c-neutral-2);border-radius:var(--s-2);display:flex;flex-direction:column;background-color:var(--c-neutral-0);text-align:center}.content .picker-header[data-v-2cd46aea]{padding:var(--s-4) var(--s-3);display:flex;flex-direction:row;justify-content:space-between;gap:var(--s-3);font-weight:700;font-size:var(--fs-1);text-align:center;color:var(--c-neutral-6)}.content .picker-header-centered[data-v-2cd46aea]{margin:auto}.content .calendar[data-v-2cd46aea]{padding:0 var(--s-3) var(--s-3);font-size:var(--fs-0);line-height:.875rem}.content .calendar-week-days[data-v-2cd46aea]{color:var(--c-neutral-4);display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--s-1)}.content .calendar-week-days>*[data-v-2cd46aea]{width:var(--s-6)}.content .calendar-days[data-v-2cd46aea]{display:flex;flex-direction:column;gap:var(--s-2)}.content .calendar-days-row[data-v-2cd46aea]{display:flex;flex-direction:row;justify-content:space-around;gap:var(--s-2)}.content .time-footer[data-v-2cd46aea]{width:100%;line-height:var(--s-6);text-align:center;display:inline-flex;flex-direction:row;justify-content:space-between;border-top:1px solid var(--c-neutral-2)}.content .time-footer-input[data-v-2cd46aea]{text-align:center;border:none;font-size:var(--fs-0)}.content .time-footer-input[data-v-2cd46aea]:focus-visible{outline:0;background-color:var(--c-neutral-2)}.content .time-table[data-v-2cd46aea]{display:flex;flex-direction:row;gap:var(--s-4)}.content .time-table-column[data-v-2cd46aea]{display:flex;flex-direction:column}.content .time-table-column-time[data-v-2cd46aea]{padding:0 var(--s-3) var(--s-3);display:flex;flex-direction:column;gap:var(--s-2)}.content .time-table-column-time-row[data-v-2cd46aea]{display:flex;flex-direction:row;justify-content:space-around;gap:var(--s-2)}";
 styleInject(css_248z);
 
 /* script */
@@ -650,7 +650,6 @@ var __vue_render__ = function () {
     }],
     staticClass: "time-footer-input",
     attrs: {
-      "type": "number",
       "placeholder": "00"
     },
     domProps: {
@@ -673,7 +672,6 @@ var __vue_render__ = function () {
     }],
     staticClass: "time-footer-input",
     attrs: {
-      "type": "number",
       "placeholder": "00"
     },
     domProps: {
@@ -746,7 +744,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-d9091eea";
+const __vue_scope_id__ = "data-v-2cd46aea";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrText-b12d0682.js → OrText-91d662a0.js}

@@ -17,16 +17,31 @@ const RestText = [
 // Layout
 'shrink'];
 
+/**
+ * Use `OrText` component to crop un-wrapped single-line text with ellipsis inside narrow containers.
+ * 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.
+ */
 var script = defineComponent({
   name: 'OrText',
   props: {
+    /**
+     * Text to crop.
+     */
     text: {
       type: String,
       required: true
     },
+    /**
+     * The index counted from the end of the string where ellipsis will be placed.
+     * Defines how many ending characters will remain visible.
+     * By default, ellipsis is placed in the end of the line.
+     *
+     * Note: Negative values behave same as corresponding positives still counting from the end of the line.
+     */
     sliceIndex: {
       type: Number,
-      default: undefined
+      default: 0
     }
   },
   expose: ['root'],
@@ -37,15 +52,33 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-text', ...TextRoot]);
     const mainTextStyles = computed(() => [...MainText]);
     const restTextStyles = computed(() => [...RestText]);
+    /**
+     * Preserves whitespace at the last position as <code>&nbsp;</code>
+     * @param str A string to escape
+     */
+    const escapeLast = str => str && str.slice(0, -1) + '\xa0';
+    /**
+     * Preserves whitespace at the first position as <code>&nbsp;</code>
+     * @param str A string to escape
+     */
+    const escapeFirst = str => str && '\xa0' + str.slice(1);
     // State
     const mainText = computed(() => {
       if (props.sliceIndex) {
-        return props.text.slice(0, Math.abs(props.sliceIndex) * -1);
+        let mainPart = props.text.slice(0, -Math.abs(props.sliceIndex));
+        if (mainPart[mainPart.length - 1] === ' ') {
+          mainPart = escapeLast(mainPart);
+        }
+        return mainPart;
       }
       return props.text;
     });
     const restText = computed(() => {
-      return props.text.slice(mainText.value.length);
+      let restPart = props.text.slice(mainText.value.length);
+      if (restPart[0] === ' ') {
+        restPart = escapeFirst(restPart);
+      }
+      return restPart;
     });
     return {
       root,

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

@@ -20,7 +20,7 @@ export { _ as OrCollapse } from '../OrCollapse-b6ab5b38.js';
 export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from '../OrColorPicker-6d3066b0.js';
 export { _ as OrConfirm } from '../OrConfirm-b6ef7bdf.js';
 export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-15e27711.js';
-export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-d8cb0e8d.js';
+export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-e1ea0a9a.js';
 export { _ as OrError } from '../OrError-efc74907.js';
 export { _ as OrErrorTagV3 } from '../OrErrorTag-7cd5dc68.js';
 export { _ as OrErrorV3 } from '../OrError-13845bb0.js';
@@ -89,7 +89,7 @@ export { _ as OrTag } from '../OrTag-c09e03c1.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-1ed1265c.js';
 export { _ as OrTeleport } from '../OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from '../OrTeleport.vue2-fb92f29f.js';
-export { _ as OrTextV3 } from '../OrText-b12d0682.js';
+export { _ as OrTextV3 } from '../OrText-91d662a0.js';
 export { _ as OrTextarea } from '../OrTextarea-43df1192.js';
 export { _ as OrTextareaV3 } from '../OrTextarea-0a64f718.js';
 export { _ as OrTextbox, T as TextboxTypes } from '../OrTextbox-5233e57c.js';

package/dist/esm/v2/components/or-date-time-picker/index.js

@@ -1,4 +1,4 @@
-export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../../OrDateTimePicker-d8cb0e8d.js';
+export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../../OrDateTimePicker-e1ea0a9a.js';
 import 'lodash';
 import 'vue-demi';
 import '@vueuse/core';

package/dist/esm/v2/components/or-text-v3/OrText.vue.d.ts

@@ -6,22 +6,42 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     mainText: import("@vue/composition-api").ComputedRef<string>;
     restText: import("@vue/composition-api").ComputedRef<string>;
 }> & import("@vue/composition-api").Data, {}, {}, {
+    /**
+     * Text to crop.
+     */
     text: {
         type: StringConstructor;
         required: true;
     };
+    /**
+     * The index counted from the end of the string where ellipsis will be placed.
+     * Defines how many ending characters will remain visible.
+     * By default, ellipsis is placed in the end of the line.
+     *
+     * Note: Negative values behave same as corresponding positives still counting from the end of the line.
+     */
     sliceIndex: {
         type: NumberConstructor;
-        default: undefined;
+        default: number;
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
+    /**
+     * Text to crop.
+     */
     text: {
         type: StringConstructor;
         required: true;
     };
+    /**
+     * The index counted from the end of the string where ellipsis will be placed.
+     * Defines how many ending characters will remain visible.
+     * By default, ellipsis is placed in the end of the line.
+     *
+     * Note: Negative values behave same as corresponding positives still counting from the end of the line.
+     */
     sliceIndex: {
         type: NumberConstructor;
-        default: undefined;
+        default: number;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     text: string;
@@ -39,4 +59,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 } & {}, {
     sliceIndex: number;
 }, true>);
+/**
+ * Use `OrText` component to crop un-wrapped single-line text with ellipsis inside narrow containers.
+ * 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.
+ */
 export default _default;

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

@@ -1,3 +1,3 @@
-export { _ as OrTextV3 } from '../../OrText-b12d0682.js';
+export { _ as OrTextV3 } from '../../OrText-91d662a0.js';
 import 'vue-demi';
 import '../../normalize-component-6e8e3d80.js';

package/dist/esm/v2/index.js

@@ -20,7 +20,7 @@ export { _ as OrCollapse } from './OrCollapse-b6ab5b38.js';
 export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-6d3066b0.js';
 export { _ as OrConfirm } from './OrConfirm-b6ef7bdf.js';
 export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-15e27711.js';
-export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-d8cb0e8d.js';
+export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-e1ea0a9a.js';
 export { _ as OrError } from './OrError-efc74907.js';
 export { _ as OrErrorTagV3 } from './OrErrorTag-7cd5dc68.js';
 export { _ as OrErrorV3 } from './OrError-13845bb0.js';
@@ -89,7 +89,7 @@ export { _ as OrTag } from './OrTag-c09e03c1.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-1ed1265c.js';
 export { _ as OrTeleport } from './OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from './OrTeleport.vue2-fb92f29f.js';
-export { _ as OrTextV3 } from './OrText-b12d0682.js';
+export { _ as OrTextV3 } from './OrText-91d662a0.js';
 export { _ as OrTextarea } from './OrTextarea-43df1192.js';
 export { _ as OrTextareaV3 } from './OrTextarea-0a64f718.js';
 export { _ as OrTextbox, T as TextboxTypes } from './OrTextbox-5233e57c.js';

package/dist/esm/v3/{OrDateTimePicker-c4af17e3.js → OrDateTimePicker-63f22d1b.js}

@@ -630,12 +630,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }), 128 /* KEYED_FRAGMENT */))]);
     }), 128 /* KEYED_FRAGMENT */))])]), _ctx.isShowTime ? (openBlock(), createElementBlock("div", _hoisted_14, [withDirectives(createElementVNode("input", {
       "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.inputHours = $event),
-      type: "number",
       class: "time-footer-input",
       placeholder: "00"
     }, null, 512 /* NEED_PATCH */), [[vModelText, _ctx.inputHours]]), _hoisted_15, withDirectives(createElementVNode("input", {
       "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.inputMinutes = $event),
-      type: "number",
       class: "time-footer-input",
       placeholder: "00"
     }, null, 512 /* NEED_PATCH */), [[vModelText, _ctx.inputMinutes]])])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("div", _hoisted_16, [createElementVNode("div", _hoisted_17, [createElementVNode("div", _hoisted_18, [createElementVNode("span", _hoisted_19, toDisplayString(_ctx.translations.hours), 1 /* TEXT */)]), createElementVNode("div", _hoisted_20, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.hours, (row, index) => {
@@ -670,7 +668,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
 }
 
-var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-733cf0b2 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-733cf0b2 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-date-time-picker[data-v-733cf0b2] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n.or-date-time-picker.is-fullwidth[data-v-733cf0b2] {\n  width: 100% !important;\n}\n.or-date-time-picker.is-date-type[data-v-733cf0b2] {\n  width: 7.125rem;\n}\n.or-date-time-picker.is-time-type[data-v-733cf0b2] {\n  width: 7.125rem;\n}\n.or-date-time-picker.is-date-time-type[data-v-733cf0b2] {\n  width: 11.25rem;\n}\n.or-date-time-picker .or-label[data-v-733cf0b2] {\n  margin-bottom: var(--s-1);\n}\n.or-date-time-picker-info[data-v-733cf0b2] {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding-top: var(--s-2);\n}\n.or-date-time-picker-input-wrapper[data-v-733cf0b2] {\n  position: relative;\n  width: 100%;\n  height: 2.25rem;\n  border: 1px solid var(--c-neutral-2);\n  border-radius: var(--s-2);\n  background-color: var(--c-neutral-1);\n  padding: 0.625rem;\n  font-size: var(--fs-1);\n  line-height: 1rem;\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: border-color, background-color, -webkit-box-shadow;\n}\n.or-date-time-picker-input-wrapper[data-v-733cf0b2]:not(.is-readonly):hover {\n  background-color: var(--c-neutral-0);\n  cursor: pointer;\n}\n.or-date-time-picker-input-wrapper[data-v-733cf0b2]:disabled, .or-date-time-picker-input-wrapper.is-disabled[data-v-733cf0b2] {\n  cursor: not-allowed;\n  background-color: var(--c-neutral-2);\n  border-color: var(--c-neutral-2);\n}\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2] {\n  border-color: var(--c-error);\n}\n@media (hover: hover) and (pointer: fine) {\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2]:not(.or-date-time-picker-input-wrapper.has-error.is-loading):not(.or-date-time-picker-input-wrapper.has-error.is-disabled):not(.or-date-time-picker-input-wrapper.has-error.is-readonly):not(.or-date-time-picker-input-wrapper.has-error:disabled):not(.or-date-time-picker-input-wrapper.has-error.is-focused):not(.or-date-time-picker-input-wrapper.has-error:active):hover {\n    border-color: var(--c-error-darken-3);\n}\n}\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2]:not(.or-date-time-picker-input-wrapper.has-error.is-loading):not(.or-date-time-picker-input-wrapper.has-error.is-disabled):not(.or-date-time-picker-input-wrapper.has-error.is-readonly):not(.or-date-time-picker-input-wrapper.has-error:disabled):not(.or-date-time-picker-input-wrapper.has-error.is-focused):not(.or-date-time-picker-input-wrapper.has-error:active):hover {\n    border-color: var(--c-error-darken-3);\n}\n}\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2]:not(:disabled):not(.is-readonly):not(.is-loading):focus {\n  border-color: var(--c-error-darken-5);\n}\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2]:disabled, .or-date-time-picker-input-wrapper.has-error.is-disabled[data-v-733cf0b2] {\n  cursor: not-allowed;\n  border-color: var(--c-error-lighten-20);\n}\n.or-date-time-picker-input-wrapper .placeholder[data-v-733cf0b2],\n.or-date-time-picker-input-wrapper .value[data-v-733cf0b2] {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  white-space: nowrap;\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: opacity;\n}\n.or-date-time-picker-input-wrapper .placeholder[data-v-733cf0b2] {\n  color: var(--c-neutral-4);\n  user-select: none;\n}\n.content[data-v-733cf0b2] {\n  border: 1px solid var(--c-neutral-2);\n  border-radius: var(--s-2);\n  display: flex;\n  flex-direction: column;\n  background-color: var(--c-neutral-0);\n  text-align: center;\n}\n.content .picker-header[data-v-733cf0b2] {\n  padding: var(--s-4) var(--s-3);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  gap: var(--s-3);\n  font-weight: bold;\n  font-size: var(--fs-1);\n  text-align: center;\n  color: var(--c-neutral-6);\n}\n.content .picker-header-centered[data-v-733cf0b2] {\n  margin: auto;\n}\n.content .calendar[data-v-733cf0b2] {\n  padding: 0 var(--s-3) var(--s-3);\n  font-size: var(--fs-0);\n  line-height: 0.875rem;\n}\n.content .calendar-week-days[data-v-733cf0b2] {\n  color: var(--c-neutral-4);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: var(--s-1);\n}\n.content .calendar-week-days > *[data-v-733cf0b2] {\n  width: var(--s-6);\n}\n.content .calendar-days[data-v-733cf0b2] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n}\n.content .calendar-days-row[data-v-733cf0b2] {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  gap: var(--s-2);\n}\n.content .time-footer[data-v-733cf0b2] {\n  width: 100%;\n  line-height: var(--s-6);\n  text-align: center;\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: space-between;\n  border-top: 1px solid var(--c-neutral-2);\n}\n.content .time-footer input[data-v-733cf0b2]::-webkit-outer-spin-button,\n.content .time-footer input[data-v-733cf0b2]::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.content .time-footer input[type=number][data-v-733cf0b2] {\n  -moz-appearance: textfield;\n}\n.content .time-footer-input[data-v-733cf0b2] {\n  text-align: center;\n  border: none;\n  font-size: var(--fs-0);\n}\n.content .time-footer-input[data-v-733cf0b2]:focus-visible {\n  outline: none;\n  background-color: var(--c-neutral-2);\n}\n.content .time-table[data-v-733cf0b2] {\n  display: flex;\n  flex-direction: row;\n  gap: var(--s-4);\n}\n.content .time-table-column[data-v-733cf0b2] {\n  display: flex;\n  flex-direction: column;\n}\n.content .time-table-column-time[data-v-733cf0b2] {\n  padding: 0 var(--s-3) var(--s-3);\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n}\n.content .time-table-column-time-row[data-v-733cf0b2] {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  gap: var(--s-2);\n}";
+var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-733cf0b2 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-733cf0b2 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-date-time-picker[data-v-733cf0b2] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n.or-date-time-picker.is-fullwidth[data-v-733cf0b2] {\n  width: 100% !important;\n}\n.or-date-time-picker.is-date-type[data-v-733cf0b2] {\n  width: 7.125rem;\n}\n.or-date-time-picker.is-time-type[data-v-733cf0b2] {\n  width: 7.125rem;\n}\n.or-date-time-picker.is-date-time-type[data-v-733cf0b2] {\n  width: 11.25rem;\n}\n.or-date-time-picker .or-label[data-v-733cf0b2] {\n  margin-bottom: var(--s-1);\n}\n.or-date-time-picker-info[data-v-733cf0b2] {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding-top: var(--s-2);\n}\n.or-date-time-picker-input-wrapper[data-v-733cf0b2] {\n  position: relative;\n  width: 100%;\n  height: 2.25rem;\n  border: 1px solid var(--c-neutral-2);\n  border-radius: var(--s-2);\n  background-color: var(--c-neutral-1);\n  padding: 0.625rem;\n  font-size: var(--fs-1);\n  line-height: 1rem;\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: border-color, background-color, -webkit-box-shadow;\n}\n.or-date-time-picker-input-wrapper[data-v-733cf0b2]:not(.is-readonly):hover {\n  background-color: var(--c-neutral-0);\n  cursor: pointer;\n}\n.or-date-time-picker-input-wrapper[data-v-733cf0b2]:disabled, .or-date-time-picker-input-wrapper.is-disabled[data-v-733cf0b2] {\n  cursor: not-allowed;\n  background-color: var(--c-neutral-2);\n  border-color: var(--c-neutral-2);\n}\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2] {\n  border-color: var(--c-error);\n}\n@media (hover: hover) and (pointer: fine) {\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2]:not(.or-date-time-picker-input-wrapper.has-error.is-loading):not(.or-date-time-picker-input-wrapper.has-error.is-disabled):not(.or-date-time-picker-input-wrapper.has-error.is-readonly):not(.or-date-time-picker-input-wrapper.has-error:disabled):not(.or-date-time-picker-input-wrapper.has-error.is-focused):not(.or-date-time-picker-input-wrapper.has-error:active):hover {\n    border-color: var(--c-error-darken-3);\n}\n}\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2]:not(.or-date-time-picker-input-wrapper.has-error.is-loading):not(.or-date-time-picker-input-wrapper.has-error.is-disabled):not(.or-date-time-picker-input-wrapper.has-error.is-readonly):not(.or-date-time-picker-input-wrapper.has-error:disabled):not(.or-date-time-picker-input-wrapper.has-error.is-focused):not(.or-date-time-picker-input-wrapper.has-error:active):hover {\n    border-color: var(--c-error-darken-3);\n}\n}\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2]:not(:disabled):not(.is-readonly):not(.is-loading):focus {\n  border-color: var(--c-error-darken-5);\n}\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2]:disabled, .or-date-time-picker-input-wrapper.has-error.is-disabled[data-v-733cf0b2] {\n  cursor: not-allowed;\n  border-color: var(--c-error-lighten-20);\n}\n.or-date-time-picker-input-wrapper .placeholder[data-v-733cf0b2],\n.or-date-time-picker-input-wrapper .value[data-v-733cf0b2] {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  white-space: nowrap;\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: opacity;\n}\n.or-date-time-picker-input-wrapper .placeholder[data-v-733cf0b2] {\n  color: var(--c-neutral-4);\n  user-select: none;\n}\n.content[data-v-733cf0b2] {\n  border: 1px solid var(--c-neutral-2);\n  border-radius: var(--s-2);\n  display: flex;\n  flex-direction: column;\n  background-color: var(--c-neutral-0);\n  text-align: center;\n}\n.content .picker-header[data-v-733cf0b2] {\n  padding: var(--s-4) var(--s-3);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  gap: var(--s-3);\n  font-weight: bold;\n  font-size: var(--fs-1);\n  text-align: center;\n  color: var(--c-neutral-6);\n}\n.content .picker-header-centered[data-v-733cf0b2] {\n  margin: auto;\n}\n.content .calendar[data-v-733cf0b2] {\n  padding: 0 var(--s-3) var(--s-3);\n  font-size: var(--fs-0);\n  line-height: 0.875rem;\n}\n.content .calendar-week-days[data-v-733cf0b2] {\n  color: var(--c-neutral-4);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: var(--s-1);\n}\n.content .calendar-week-days > *[data-v-733cf0b2] {\n  width: var(--s-6);\n}\n.content .calendar-days[data-v-733cf0b2] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n}\n.content .calendar-days-row[data-v-733cf0b2] {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  gap: var(--s-2);\n}\n.content .time-footer[data-v-733cf0b2] {\n  width: 100%;\n  line-height: var(--s-6);\n  text-align: center;\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: space-between;\n  border-top: 1px solid var(--c-neutral-2);\n}\n.content .time-footer-input[data-v-733cf0b2] {\n  text-align: center;\n  border: none;\n  font-size: var(--fs-0);\n}\n.content .time-footer-input[data-v-733cf0b2]:focus-visible {\n  outline: none;\n  background-color: var(--c-neutral-2);\n}\n.content .time-table[data-v-733cf0b2] {\n  display: flex;\n  flex-direction: row;\n  gap: var(--s-4);\n}\n.content .time-table-column[data-v-733cf0b2] {\n  display: flex;\n  flex-direction: column;\n}\n.content .time-table-column-time[data-v-733cf0b2] {\n  padding: 0 var(--s-3) var(--s-3);\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n}\n.content .time-table-column-time-row[data-v-733cf0b2] {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  gap: var(--s-2);\n}";
 styleInject(css_248z);
 
 script.render = render;

package/dist/esm/v3/{OrText-6b4f7cd1.js → OrText-a3b00048.js}

@@ -17,16 +17,31 @@ const RestText = [
 // Layout
 'shrink'];
 
+/**
+ * Use `OrText` component to crop un-wrapped single-line text with ellipsis inside narrow containers.
+ * 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.
+ */
 var script = defineComponent({
   name: 'OrText',
   props: {
+    /**
+     * Text to crop.
+     */
     text: {
       type: String,
       required: true
     },
+    /**
+     * The index counted from the end of the string where ellipsis will be placed.
+     * Defines how many ending characters will remain visible.
+     * By default, ellipsis is placed in the end of the line.
+     *
+     * Note: Negative values behave same as corresponding positives still counting from the end of the line.
+     */
     sliceIndex: {
       type: Number,
-      default: undefined
+      default: 0
     }
   },
   expose: ['root'],
@@ -37,15 +52,33 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-text', ...TextRoot]);
     const mainTextStyles = computed(() => [...MainText]);
     const restTextStyles = computed(() => [...RestText]);
+    /**
+     * Preserves whitespace at the last position as <code>&nbsp;</code>
+     * @param str A string to escape
+     */
+    const escapeLast = str => str && str.slice(0, -1) + '\xa0';
+    /**
+     * Preserves whitespace at the first position as <code>&nbsp;</code>
+     * @param str A string to escape
+     */
+    const escapeFirst = str => str && '\xa0' + str.slice(1);
     // State
     const mainText = computed(() => {
       if (props.sliceIndex) {
-        return props.text.slice(0, Math.abs(props.sliceIndex) * -1);
+        let mainPart = props.text.slice(0, -Math.abs(props.sliceIndex));
+        if (mainPart[mainPart.length - 1] === ' ') {
+          mainPart = escapeLast(mainPart);
+        }
+        return mainPart;
       }
       return props.text;
     });
     const restText = computed(() => {
-      return props.text.slice(mainText.value.length);
+      let restPart = props.text.slice(mainText.value.length);
+      if (restPart[0] === ' ') {
+        restPart = escapeFirst(restPart);
+      }
+      return restPart;
     });
     return {
       root,

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

@@ -17,7 +17,7 @@ export { s as OrCollapse } from '../OrCollapse-445141ab.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from '../OrColorPicker-53890a6e.js';
 export { s as OrConfirm } from '../OrConfirm-02ae9c60.js';
 export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-dbf267cd.js';
-export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-c4af17e3.js';
+export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-63f22d1b.js';
 export { s as OrError } from '../OrError-f90296db.js';
 export { s as OrErrorTagV3 } from '../OrErrorTag-0025b17c.js';
 export { s as OrErrorV3 } from '../OrError-19198748.js';
@@ -86,7 +86,7 @@ export { s as OrTag } from '../OrTag-909a5dc9.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-f66c6142.js';
 export { s as OrTeleport } from '../OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from '../OrTeleport.vue3-8099178c.js';
-export { s as OrTextV3 } from '../OrText-6b4f7cd1.js';
+export { s as OrTextV3 } from '../OrText-a3b00048.js';
 export { s as OrTextarea } from '../OrTextarea-1f5c3be1.js';
 export { s as OrTextareaV3 } from '../OrTextarea-42d21f77.js';
 export { s as OrTextbox, T as TextboxTypes } from '../OrTextbox-2a3c67fb.js';

package/dist/esm/v3/components/or-date-time-picker/index.js

@@ -1,4 +1,4 @@
-export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../../OrDateTimePicker-c4af17e3.js';
+export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../../OrDateTimePicker-63f22d1b.js';
 import 'lodash';
 import 'vue-demi';
 import '@vueuse/core';

package/dist/esm/v3/components/or-text-v3/OrText.vue.d.ts

@@ -6,22 +6,42 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     mainText: import("@vue/composition-api").ComputedRef<string>;
     restText: import("@vue/composition-api").ComputedRef<string>;
 }> & import("@vue/composition-api").Data, {}, {}, {
+    /**
+     * Text to crop.
+     */
     text: {
         type: StringConstructor;
         required: true;
     };
+    /**
+     * The index counted from the end of the string where ellipsis will be placed.
+     * Defines how many ending characters will remain visible.
+     * By default, ellipsis is placed in the end of the line.
+     *
+     * Note: Negative values behave same as corresponding positives still counting from the end of the line.
+     */
     sliceIndex: {
         type: NumberConstructor;
-        default: undefined;
+        default: number;
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
+    /**
+     * Text to crop.
+     */
     text: {
         type: StringConstructor;
         required: true;
     };
+    /**
+     * The index counted from the end of the string where ellipsis will be placed.
+     * Defines how many ending characters will remain visible.
+     * By default, ellipsis is placed in the end of the line.
+     *
+     * Note: Negative values behave same as corresponding positives still counting from the end of the line.
+     */
     sliceIndex: {
         type: NumberConstructor;
-        default: undefined;
+        default: number;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     text: string;
@@ -39,4 +59,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 } & {}, {
     sliceIndex: number;
 }, true>);
+/**
+ * Use `OrText` component to crop un-wrapped single-line text with ellipsis inside narrow containers.
+ * 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.
+ */
 export default _default;

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

@@ -1,3 +1,3 @@
-export { s as OrTextV3 } from '../../OrText-6b4f7cd1.js';
+export { s as OrTextV3 } from '../../OrText-a3b00048.js';
 import 'vue-demi';
 import 'vue';

package/dist/esm/v3/index.js

@@ -17,7 +17,7 @@ export { s as OrCollapse } from './OrCollapse-445141ab.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-53890a6e.js';
 export { s as OrConfirm } from './OrConfirm-02ae9c60.js';
 export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-dbf267cd.js';
-export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-c4af17e3.js';
+export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-63f22d1b.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-0025b17c.js';
 export { s as OrErrorV3 } from './OrError-19198748.js';
@@ -86,7 +86,7 @@ export { s as OrTag } from './OrTag-909a5dc9.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-f66c6142.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
-export { s as OrTextV3 } from './OrText-6b4f7cd1.js';
+export { s as OrTextV3 } from './OrText-a3b00048.js';
 export { s as OrTextarea } from './OrTextarea-1f5c3be1.js';
 export { s as OrTextareaV3 } from './OrTextarea-42d21f77.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-2a3c67fb.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.74.8-beta.2339.0",
+  "version": "2.74.8",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -124,5 +124,6 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "gitHead": "daf6e9f278b97d4e36889093f41f2c03aafb5404"
 }

package/src/components/or-date-time-picker/OrDateTimePicker.vue

@@ -152,14 +152,12 @@
           >
             <input
               v-model="inputHours"
-              type="number"
               class="time-footer-input"
               placeholder="00"
             >
             <span>:</span>
             <input
               v-model="inputMinutes"
-              type="number"
               class="time-footer-input"
               placeholder="00"
             >
@@ -811,15 +809,6 @@ export default defineComponent({
     justify-content: space-between;
     border-top: 1px solid $c-neutral-2;
 
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-    input[type='number'] {
-      -moz-appearance:textfield;
-    }
-
     &-input {
       text-align: center;
       border: none;

package/src/components/or-text-v3/OrText.stories3.ts

@@ -34,13 +34,91 @@ const Template: StoryFn<typeof OrText> = (args) => ({
   },
 
   template: `
-    <OrText v-bind="args" />
+    <div class="w-2/5 mx-auto px-md bg-surface-2 dark:bg-surface-2-dark">
+      <OrText v-bind="args" />
+    </div>
   `,
 });
 
-export const Text = Template.bind({});
-
-Text.args = {
+export const Default = Template.bind({});
+Default.args = {
   // Props
-  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt \
+    ut labore et dolore magna aliqua.',
+};
+
+export const MiddleCrop = Template.bind({});
+MiddleCrop.args = {
+  ...Default.args,
+  sliceIndex: 12,
+};
+
+export const TooFarLeft = Template.bind({});
+TooFarLeft.args = {
+  ...Default.args,
+  sliceIndex: 120,
+};
+TooFarLeft.parameters = {
+  docs: {
+    description: {
+      story: 'Caution. If `sliceIndex` is greater than the visible part length, \
+        then beginning part with ellipsis is not displayed and ending part overflows the container.',
+    },
+  },
+};
+
+export const ComplexContainer: StoryFn<typeof OrText> = (args) => ({
+  components: {
+    OrText,
+  },
+
+  setup() {
+    return { args };
+  },
+
+  template: `
+  <div class="w-full">
+    <h3 class="typography-headline-3 mb-md">Flex container side effect</h3>
+    <div class="w-[300px] flex bg-surface-2 dark:bg-surface-2-dark">
+      <!-- fixed part -->
+      <div class="w-[20px]" />
+      <!-- growing part -->
+      <div class="grow px-md">
+        <OrText v-bind="args" />
+      </div>
+    </div>
+    <h3 class="typography-headline-3 my-md">Solution with a wrapper</h3>
+    <div class="w-[300px] flex bg-surface-2 dark:bg-surface-2-dark">
+      <!-- fixed part -->
+      <div class="w-[20px]" />
+      <!-- growing part -->
+      <div class="grow px-md min-w-0">
+        <OrText v-bind="args" />
+      </div>
+    </div>
+    <h3 class="typography-headline-3 my-md">Solution without a wrapper</h3>
+    <div class="w-[300px] flex bg-surface-2 dark:bg-surface-2-dark">
+      <!-- fixed part -->
+      <div class="w-[20px]" />
+      <!-- growing part -->
+      <OrText v-bind="args" class="grow px-md min-w-0" />
+    </div>
+  </div>
+  `,
+});
+ComplexContainer.storyName = 'Growing Flex Container';
+ComplexContainer.args = {
+  ...Default.args,
+  sliceIndex: 12,
+};
+ComplexContainer.parameters = {
+  docs: {
+    description: {
+      story: 'In a special case when OrText is placed inside a variable width container,\
+        such as a flexbox growing block, or when it is itself a growing flexbox item,\
+        there is a problem for a browser to proper calculate the cropping position.\
+        As a solution place a `min-width: 0;` style (tailwind class `min-w-0`)\
+        to the growing item - container or the OrText itself.',
+    },
+  },
 };