@onereach/ui-components 6.4.5-beta.3426.0 → 6.4.5

package/dist/bundled/v2/{OrDateTimePickerMonthSelect-ea25c571.js → OrDateTimePickerMonthSelect-e2a587bb.js}

@@ -21,6 +21,7 @@ const DateTimePickerDateControlPlaceholder = [
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script$2 = defineComponent({
+  name: 'OrDateTimePickerDateControl',
   model: {
     prop: 'modelValue',
     event: 'update:modelValue'
@@ -121,12 +122,12 @@ const DateTimePickerDateSelectButtonGroup = [
 // Box
 'h-[262px]',
 // Spacing
-'mx-[-2px]', 'my-[-2px]'];
+'gap-xs'];
 const DateTimePickerDateSelectButtonGroupWeekdayItem = [
 // Layout
 'layout-row justify-center',
 // Spacing
-'mx-[2px]', 'my-[2px]', 'px-sm', 'py-sm',
+'px-sm', 'py-sm',
 // Interactivity
 'interactivity-none',
 // Typography
@@ -137,21 +138,15 @@ const DateTimePickerDateSelectButtonGroupDateItem = [
 // Box
 '!min-w-fit',
 // Spacing
-'mx-[2px]', 'my-[2px]', '!px-sm', '!py-sm',
+'!px-sm', '!py-sm',
 // Typography
 'typography-caption-regular'];
 const DateTimePickerDateSelectButtonGroupCurrentDateItem = [
 // Theme
 'theme-foreground-primary', 'dark:theme-foreground-primary-dark', 'theme-outline-1-primary', 'dark:theme-outline-1-primary-dark'];
-const DateTimePickerDateSelectButtonGroupInRangeDateItem = [
-// Spacing
-'!mx-none', '!px-[10px]',
-// Shape
-'!rounded-none',
-// Theme
-'theme-background-primary-translucent-2', 'dark:theme-background-primary-translucent-2-dark'];
 
 var script$1 = defineComponent({
+  name: 'OrDateTimePickerDateSelect',
   components: {
     OrButton: __vue_component__$3
   },
@@ -171,14 +166,6 @@ var script$1 = defineComponent({
     dateFilter: {
       type: Function,
       default: undefined
-    },
-    rangeStart: {
-      type: Date,
-      default: undefined
-    },
-    rangeEnd: {
-      type: Date,
-      default: undefined
     }
   },
   emits: ['update:modelValue'],
@@ -192,7 +179,6 @@ var script$1 = defineComponent({
     const buttonGroupWeekdayItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupWeekdayItem]);
     const buttonGroupDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupDateItem]);
     const buttonGroupCurrentDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupCurrentDateItem]);
-    const buttonGroupInRangeDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupInRangeDateItem]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
       defaultValue: toRef(props, 'initialValue')
@@ -240,7 +226,6 @@ var script$1 = defineComponent({
       buttonGroupWeekdayItemStyles,
       buttonGroupDateItemStyles,
       buttonGroupCurrentDateItemStyles,
-      buttonGroupInRangeDateItemStyles,
       proxyModelValue,
       dayOptions,
       currentDate,
@@ -272,7 +257,7 @@ var __vue_render__$1 = function () {
     var _obj;
     return _c('OrButton', {
       key: Number(value),
-      class: (_obj = {}, _obj[_vm.buttonGroupDateItemStyles.join(' ')] = true, _obj[_vm.buttonGroupCurrentDateItemStyles.join(' ')] = Number(value) === Number(_vm.currentDate) && Number(value) !== Number(_vm.proxyModelValue), _obj[_vm.buttonGroupInRangeDateItemStyles.join(' ')] = _vm.rangeStart && Number(value) > Number(_vm.rangeStart) && _vm.rangeEnd && Number(value) < Number(_vm.rangeEnd), _obj['invisible'] = value.getUTCMonth() !== _vm.proxyModelValue.getUTCMonth(), _obj),
+      class: (_obj = {}, _obj[_vm.buttonGroupDateItemStyles.join(' ')] = true, _obj[_vm.buttonGroupCurrentDateItemStyles.join(' ')] = Number(value) === Number(_vm.currentDate) && Number(value) !== Number(_vm.proxyModelValue), _obj['invisible'] = value.getUTCMonth() !== _vm.proxyModelValue.getUTCMonth(), _obj),
       attrs: {
         "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
         "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit',
@@ -316,6 +301,7 @@ const DateTimePickerMonthSelect = [
 'px-md', 'py-md', 'gap-md'];
 
 var script = defineComponent({
+  name: 'OrDateTimePickerMonthSelect',
   components: {
     OrButton: __vue_component__$3,
     OrIcon: __vue_component__$4,

package/dist/bundled/v2/{OrDateTimePickerPopoverHeader-da41a651.js → OrDateTimePickerPopoverHeader-e90e27c0.js}

@@ -6,19 +6,16 @@ import __vue_component__$4 from './components/OrButtonV3/OrButton.js';
 const DateTimePickerMobileControl = [
 // Layout
 'layout-column',
-// Interactivity
-'interactivity-auto',
 // Spacing
-'gap-xs',
-// Theme
-'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
-// Theme (selected)
-'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark'];
+'gap-xs'];
 const DateTimePickerMobileControlContent = [
 // Typography
-'typography-headline-1'];
+'typography-headline-1',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script$2 = defineComponent({
+  name: 'OrDateTimePickerMobileControl',
   components: {
     OrLabel: __vue_component__$3
   },
@@ -26,10 +23,6 @@ var script$2 = defineComponent({
     label: {
       type: String,
       required: true
-    },
-    selected: {
-      type: Boolean,
-      default: false
     }
   },
   expose: ['root'],
@@ -57,10 +50,7 @@ var __vue_render__$2 = function () {
   var _c = _vm._self._c || _h;
   return _c('div', {
     ref: "root",
-    class: _vm.rootStyles,
-    attrs: {
-      "selected": _vm.selected ? '' : null
-    }
+    class: _vm.rootStyles
   }, [_c('OrLabel', [_vm._v(_vm._s(_vm.label))]), _vm._v(" "), _c('div', {
     class: _vm.contentStyles
   }, [_vm._t("default")], 2)], 1);
@@ -98,6 +88,7 @@ const DateTimePickerPopoverFooter = [
 'theme-border-1-outline-variant', 'dark:theme-border-1-outline-variant-dark', 'theme-border-overline'];
 
 var script$1 = defineComponent({
+  name: 'OrDateTimePickerPopoverFooter',
   components: {
     OrButton: __vue_component__$4
   },
@@ -184,6 +175,7 @@ const DateTimePickerPopoverHeader = [
 'px-md', 'py-md', 'gap-xl'];
 
 var script = defineComponent({
+  name: 'OrDateTimePickerPopoverHeader',
   expose: ['root'],
   setup() {
     // Refs

package/dist/bundled/v2/{OrDateTimePickerTimeSelect-5efbeec4.js → OrDateTimePickerTimeSelect-3d88a1aa.js}

@@ -18,6 +18,7 @@ const DateTimePickerTimeControlPlaceholder = [
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script$1 = defineComponent({
+  name: 'OrDateTimePickerTimeControl',
   model: {
     prop: 'modelValue',
     event: 'update:modelValue'
@@ -134,6 +135,7 @@ const DateTimePickerTimeSelectButtonGroupItem = [
 'typography-caption-regular'];
 
 var script = defineComponent({
+  name: 'OrDateTimePickerTimeSelect',
   components: {
     OrButton: __vue_component__$2
   },

package/dist/bundled/v2/components/OrCombinedInputV3/styles.js

@@ -9,7 +9,7 @@ const CombinedInputControlGroup = [
 // Box
 'w-full',
 // Shape (.or-input-box-v3)
-'[&_.or-input-box-v3]:first-child:rounded-r-none', '[&_.or-input-box-v3]:middle-child:rounded-none', '[&_.or-input-box-v3]:last-child:rounded-l-none',
+'[&_.or-input-box-v3]:first-child:rounded-r-0', '[&_.or-input-box-v3]:middle-child:rounded-0', '[&_.or-input-box-v3]:last-child:rounded-l-0',
 // Spacing (.or-input-box-v3)
 '[&_.or-input-box-v3]:first-child:mr-[-1px]', '[&_.or-input-box-v3]:middle-child:border-x-0', '[&_.or-input-box-v3]:last-child:ml-[-1px]'];
 

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { DatePicker, DatePickerPopover } from './styles.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-ea25c571.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-da41a651.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-e2a587bb.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-e90e27c0.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
 import __vue_component__$3 from '../OrIconV3/OrIcon.js';
@@ -17,6 +17,7 @@ import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
+  name: 'OrDatePicker',
   components: {
     OrDateTimePickerDateControl,
     OrDateTimePickerDateSelect,
@@ -277,8 +278,8 @@ var __vue_render__ = function () {
     }
   }), _vm._v(" "), _c('OrPopover', {
     ref: "popover",
-    class: _vm.popoverStyles,
     attrs: {
+      "custom-styles": _vm.popoverStyles,
       "variant": 'auto',
       "bottom-sheet-props": {
         variant: 'basic'
@@ -293,8 +294,7 @@ var __vue_render__ = function () {
     }
   }, [_c('OrDateTimePickerPopoverHeader', [_c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": 'Date',
-      "selected": true
+      "label": "Date"
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
     attrs: {

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-ea25c571.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-da41a651.js';
-import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-5efbeec4.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-e2a587bb.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-e90e27c0.js';
+import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-3d88a1aa.js';
 import { DateTimePickerTimeFormat } from './props.js';
 import { DateTimePicker, DateTimePickerDatePopover, DateTimePickerTimePopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
@@ -19,6 +19,7 @@ import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
+  name: 'OrDateTimePicker',
   components: {
     OrDateTimePickerDateControl,
     OrDateTimePickerDateSelect,
@@ -380,11 +381,11 @@ var __vue_render__ = function () {
     }
   }, [_c('OrDateTimePickerPopoverHeader', [_c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": 'Date'
+      "label": "Date"
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": 'Time'
+      "label": "Time"
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
     attrs: {
@@ -443,11 +444,11 @@ var __vue_render__ = function () {
     }
   }, [_c('OrDateTimePickerPopoverHeader', [_c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": 'Date'
+      "label": "Date"
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": 'Time'
+      "label": "Time"
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerTimeSelect', {
     attrs: {

package/dist/bundled/v2/components/OrDateTimePickerV3/index.js

@@ -1,7 +1,7 @@
 export { default as OrDateTimePickerV3 } from './OrDateTimePicker.js';
-export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-ea25c571.js';
-export { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-da41a651.js';
-export { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-5efbeec4.js';
+export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-e2a587bb.js';
+export { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-e90e27c0.js';
+export { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-3d88a1aa.js';
 export { DateTimePickerTimeFormat } from './props.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
 export { formatDate } from './utils/formatDate.js';

package/dist/bundled/v2/components/OrIconButtonV3/OrIconButton.js

@@ -1,9 +1,9 @@
-import { defineComponent, ref, computed, isVue3 } from 'vue-demi';
+import { defineComponent, ref, toRefs, computed, isVue3 } from 'vue-demi';
 import { IconButtonColor } from './props.js';
 import { IconButton, IconButtonColors } from './styles.js';
 import __vue_component__$1 from '../OrIconV3/OrIcon.js';
 import __vue_component__$2 from '../OrTooltipV3/OrTooltip.js';
-import { IconSize } from '../OrIconV3/props.js';
+import { IconSize, IconVariant } from '../OrIconV3/props.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
@@ -49,12 +49,26 @@ var script = defineComponent({
   setup(props) {
     // Refs
     const root = ref();
+    const {
+      icon,
+      size
+    } = toRefs(props);
+    const iconProps = computed(() => {
+      return {
+        size: size.value,
+        variant: IconVariant.Inherit,
+        ...(typeof icon.value === 'string' ? {
+          icon: icon.value
+        } : icon.value)
+      };
+    });
     // Styles
     const rootStyles = computed(() => ['or-icon-button-v3', ...IconButton, ...IconButtonColors[props.color]]);
     return {
       root,
       rootStyles,
-      isVue3
+      isVue3,
+      iconProps
     };
   }
 });
@@ -95,14 +109,7 @@ var __vue_render__ = function () {
     blur: function (e) {
       return _vm.$emit('blur', e);
     }
-  })), [_c('OrIcon', _vm._b({
-    attrs: {
-      "variant": 'inherit',
-      "size": _vm.size
-    }
-  }, 'OrIcon', typeof _vm.icon === 'string' ? {
-    icon: _vm.icon
-  } : _vm.icon, false))], 1)]);
+  })), [_c('OrIcon', _vm._b({}, 'OrIcon', _vm.iconProps, false))], 1)]);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/bundled/v2/components/OrIconButtonV3/OrIconButton.vue.d.ts

@@ -1,9 +1,15 @@
 import { PropType } from 'vue-demi';
+import { IconVariant } from '../or-icon-v3';
 import { IconButtonColor, IconButtonSize } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLButtonElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     isVue3: boolean;
+    iconProps: import("@vue/composition-api").ComputedRef<{
+        icon?: string | undefined;
+        size: "inherit" | "xl" | "l" | "m";
+        variant: IconVariant;
+    }>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     additionalStyles: {
         type: PropType<string[]>;
@@ -88,6 +94,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     root: import("@vue/composition-api").Ref<HTMLButtonElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     isVue3: boolean;
+    iconProps: import("@vue/composition-api").ComputedRef<{
+        icon?: string | undefined;
+        size: "inherit" | "xl" | "l" | "m";
+        variant: IconVariant;
+    }>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     size: "inherit" | "xl" | "l" | "m";
     additionalStyles: string[];

package/dist/bundled/v2/components/OrInputBoxV3/styles.js

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

package/dist/bundled/v2/components/OrMenuV3/OrMenu.js

@@ -26,6 +26,11 @@ var script = defineComponent({
     offset: {
       type: [Number, Object, Function],
       default: undefined
+    },
+    // TODO: Remove after migration to Vue 3
+    additionalStyles: {
+      type: Array,
+      default: () => []
     }
   },
   emits: ['update:state', 'open', 'close'],
@@ -89,7 +94,7 @@ var __vue_render__ = function () {
     }
   }, [_c('div', _vm._b({
     ref: "root",
-    class: _vm.rootStyles,
+    class: [_vm.rootStyles].concat(_vm.additionalStyles),
     on: {
       "click": function ($event) {
         $event.stopPropagation();

package/dist/bundled/v2/components/OrMenuV3/OrMenu.vue.d.ts

@@ -26,6 +26,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<MenuOffset>;
         default: undefined;
     };
+    additionalStyles: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     isOpen: {
         type: BooleanConstructor;
@@ -43,11 +47,16 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<MenuOffset>;
         default: undefined;
     };
+    additionalStyles: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     isOpen: boolean;
     trigger: ReferenceElement;
     placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     offset: MenuOffset;
+    additionalStyles: string[];
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -63,6 +72,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     trigger: ReferenceElement;
     placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     offset: MenuOffset;
+    additionalStyles: string[];
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -70,5 +80,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     trigger: ReferenceElement;
     placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     offset: MenuOffset;
+    additionalStyles: string[];
 }, true>);
 export default _default;

package/dist/bundled/v2/components/OrPaginationV3/OrPagination.js

@@ -246,8 +246,8 @@ var __vue_render__ = function () {
     }
   })], 1), _vm._v(" "), _c('OrMenu', {
     ref: "limitMenu",
-    class: ['min-w-[60px]'],
     attrs: {
+      "additional-styles": ['min-w-[60px]'],
       "trigger": _vm.limitButtonRoot,
       "placement": 'top'
     }

package/dist/bundled/v2/components/OrRichTextEditorV3/styles.js

@@ -1,6 +1,6 @@
 const EditorContainer = [
 // Colors
-'border-outline', 'focus-within:theme-background-primary-translucent-1', 'focus-within:theme-border-1-primary', 'focus-within:theme-outline-2-primary',
+'border-outline', 'focus-within:theme-background-primary-translucent', 'focus-within:theme-border-1-primary', 'focus-within:theme-outline-2-primary',
 // Sizing
 'border-1', 'rounded-md', 'w-full'];
 const ToolbarContainer = [

package/dist/bundled/v2/components/OrSearchV3/OrSearch.js

@@ -1,6 +1,9 @@
-import { defineComponent, ref, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
 import __vue_component__$1 from '../OrInputV3/OrInput.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';
+import { useIdAttribute } from '../../hooks/useIdAttribute.js';
+import { useControlAttributes } from '../../hooks/useControlAttributes.js';
+import { useValidationAttributes } from '../../hooks/useValidationAttributes.js';
 import { a as watchDebounced } from '../../index-210a7ab2.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
@@ -27,10 +30,6 @@ var script = defineComponent({
       type: Number,
       default: 500
     },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
     disableDefaultStyles: {
       type: Boolean,
       default: false
@@ -46,6 +45,11 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-search-v3']);
     // State
     const localModelValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : '');
+    const controlAttributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+      ...useValidationAttributes()
+    });
     // Events
     watchDebounced(localModelValue, () => localModelValue.value.length > 0 && context.emit('search', localModelValue.value), {
       debounce: props.debounce
@@ -69,6 +73,7 @@ var script = defineComponent({
       root,
       rootStyles,
       localModelValue,
+      controlAttributes,
       focus,
       clear
     };
@@ -83,7 +88,7 @@ var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c('OrInput', {
+  return _c('OrInput', _vm._b({
     ref: "root",
     class: _vm.rootStyles,
     attrs: {
@@ -91,7 +96,6 @@ var __vue_render__ = function () {
       "size": _vm.size,
       "placeholder": _vm.placeholder,
       "debounce": _vm.debounce,
-      "disabled": _vm.disabled,
       "disable-default-styles": _vm.disableDefaultStyles
     },
     on: {
@@ -118,7 +122,7 @@ var __vue_render__ = function () {
       },
       expression: "localModelValue"
     }
-  });
+  }, 'OrInput', _vm.controlAttributes, false));
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/bundled/v2/components/OrSearchV3/OrSearch.vue.d.ts

@@ -8,6 +8,19 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}, true> | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     localModelValue: import("@vue/composition-api").Ref<string>;
+    controlAttributes: {
+        required: boolean | undefined;
+        minlength: number | undefined;
+        maxlength: number | undefined;
+        pattern: string | undefined;
+        min: number | undefined;
+        max: number | undefined;
+        step: number | undefined;
+        readonly: boolean | undefined;
+        disabled: boolean | undefined;
+        'force-state': string | undefined;
+        id: string | undefined;
+    };
     focus: () => void;
     clear: () => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
@@ -28,10 +41,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: NumberConstructor;
         default: number;
     };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     disableDefaultStyles: {
         type: BooleanConstructor;
         default: boolean;
@@ -54,10 +63,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: NumberConstructor;
         default: number;
     };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     disableDefaultStyles: {
         type: BooleanConstructor;
         default: boolean;
@@ -67,7 +72,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     size: "m" | "s";
     placeholder: string;
     debounce: number;
-    disabled: boolean;
     disableDefaultStyles: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -79,6 +83,19 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}, true> | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     localModelValue: import("@vue/composition-api").Ref<string>;
+    controlAttributes: {
+        required: boolean | undefined;
+        minlength: number | undefined;
+        maxlength: number | undefined;
+        pattern: string | undefined;
+        min: number | undefined;
+        max: number | undefined;
+        step: number | undefined;
+        readonly: boolean | undefined;
+        disabled: boolean | undefined;
+        'force-state': string | undefined;
+        id: string | undefined;
+    };
     focus: () => void;
     clear: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
@@ -86,7 +103,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     size: "m" | "s";
     placeholder: string;
     debounce: number;
-    disabled: boolean;
     disableDefaultStyles: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -95,7 +111,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     size: "m" | "s";
     placeholder: string;
     debounce: number;
-    disabled: boolean;
     disableDefaultStyles: boolean;
 }, true>);
 export default _default;

package/dist/bundled/v2/components/OrSelectV3/OrSelect.js

@@ -401,7 +401,7 @@ var __vue_render__ = function () {
       expression: "close"
     }],
     ref: "inputBox",
-    class: [_vm.popoverState === 'open' && (_vm.popover.isFlipped ? 'rounded-t-none' : 'rounded-b-none')],
+    class: [_vm.popoverState === 'open' && (_vm.popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')],
     attrs: {
       "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
       "size": _vm.size,