@onereach/ui-components 5.2.2 → 5.2.3-beta.3178.0

package/dist/esm/v2/{OrSelect-f3a50dc9.js → OrSelect-34782e78.js}

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, ref, computed, toRefs, onMounted, watch } from 'vue-demi';
+import { defineComponent, ref, computed, getCurrentInstance, toRefs, onMounted, watch } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 import { u as useOverflow } from './useOverflow-c856b7b7.js';
 import '@vueuse/core';
@@ -6,21 +6,86 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import { u as useResponsive } from './useResponsive-a02e95b7.js';
 import '@onereach/styles/tailwind.config.json';
 import { i as isEmptyValue } from './isEmptyValue-fd56a6e4.js';
-import { _ as __vue_component__$1 } from './OrCheckbox-adae3aee.js';
-import { _ as __vue_component__$2 } from './OrError-4ffc1c39.js';
-import { _ as __vue_component__$3 } from './OrExpansionPanel-85503101.js';
-import { _ as __vue_component__$4 } from './OrHint-aa221198.js';
-import { _ as __vue_component__$6 } from './OrIconButton-3c5be67e.js';
-import { _ as __vue_component__$5 } from './OrIcon-d35a84d8.js';
-import { _ as __vue_component__$8 } from './OrInputBox-7dc5b9e9.js';
+import { _ as __vue_component__$2 } from './OrCheckbox-adae3aee.js';
+import { _ as __vue_component__$3 } from './OrError-4ffc1c39.js';
+import { _ as __vue_component__$4 } from './OrExpansionPanel-85503101.js';
+import { _ as __vue_component__$5 } from './OrHint-aa221198.js';
+import { _ as __vue_component__$7 } from './OrIconButton-3c5be67e.js';
+import { _ as __vue_component__$6 } from './OrIcon-d35a84d8.js';
+import { _ as __vue_component__$9 } from './OrInputBox-7dc5b9e9.js';
 import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
-import { _ as __vue_component__$7 } from './OrInput-e4ab5e11.js';
-import { _ as __vue_component__$9 } from './OrLabel-4a3d8904.js';
-import { _ as __vue_component__$a } from './OrMenuItem-c1c97ebe.js';
-import { _ as __vue_component__$b } from './OrPopover-159ff97b.js';
-import { _ as __vue_component__$c } from './OrTag-44c0e49b.js';
+import { _ as __vue_component__$8 } from './OrInput-e4ab5e11.js';
+import { _ as __vue_component__$a } from './OrLabel-4a3d8904.js';
+import { _ as __vue_component__$b } from './OrMenuItem-c1c97ebe.js';
+import { _ as __vue_component__$c } from './OrPopover-159ff97b.js';
+import { _ as __vue_component__$d } from './OrTag-44c0e49b.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
+const SelectPlaceholder = [
+// Interactivity
+'interactivity-none',
+// Typography
+'typography-inherit truncate',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+
+var script$1 = defineComponent({
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  expose: ['root'],
+  setup() {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-select-placeholder-v3', ...SelectPlaceholder]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+/* script */
+const __vue_script__$1 = script$1;
+
+/* template */
+var __vue_render__$1 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles,
+    attrs: {
+      "disabled": _vm.disabled ? '' : null
+    }
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__$1 = [];
+
+/* style */
+const __vue_inject_styles__$1 = undefined;
+/* scoped */
+const __vue_scope_id__$1 = undefined;
+/* module identifier */
+const __vue_module_identifier__$1 = undefined;
+/* functional template */
+const __vue_is_functional_template__$1 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$1,
+  staticRenderFns: __vue_staticRenderFns__$1
+}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
+
 const Select = [
 // Layout
 'layout-column',
@@ -42,13 +107,6 @@ const SelectSearchControl = [
 'grow',
 // Spacing
 '!mx-lg md:!-mx-sm+', '!my-sm md:!my-none'];
-const SelectPlaceholder = [
-// Theme
-'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
-// Interactivity
-'select-none',
-// Typography
-'truncate'];
 const SelectDropdown = [
 // Overflow
 'overflow-y-auto',
@@ -83,18 +141,19 @@ const SelectNoSearchResults = [
 
 var script = defineComponent({
   components: {
-    OrCheckbox: __vue_component__$1,
-    OrError: __vue_component__$2,
-    OrExpansionPanel: __vue_component__$3,
-    OrHint: __vue_component__$4,
-    OrIcon: __vue_component__$5,
-    OrIconButton: __vue_component__$6,
-    OrInput: __vue_component__$7,
-    OrInputBox: __vue_component__$8,
-    OrLabel: __vue_component__$9,
-    OrMenuItem: __vue_component__$a,
-    OrPopover: __vue_component__$b,
-    OrTag: __vue_component__$c
+    OrCheckbox: __vue_component__$2,
+    OrError: __vue_component__$3,
+    OrExpansionPanel: __vue_component__$4,
+    OrHint: __vue_component__$5,
+    OrIcon: __vue_component__$6,
+    OrIconButton: __vue_component__$7,
+    OrInput: __vue_component__$8,
+    OrInputBox: __vue_component__$9,
+    OrLabel: __vue_component__$a,
+    OrMenuItem: __vue_component__$b,
+    OrPopover: __vue_component__$c,
+    OrSelectPlaceholder: __vue_component__$1,
+    OrTag: __vue_component__$d
   },
   directives: {
     DropdownClose,
@@ -217,7 +276,6 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-select-v3', ...Select]);
     const controlStyles = computed(() => [...SelectControl]);
     const searchControlStyles = computed(() => [...SelectSearchControl]);
-    const placeholderStyles = computed(() => [...SelectPlaceholder]);
     const dropdownStyles = computed(() => {
       var _a;
       return [...SelectDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? SelectDropdownFlipped : SelectDropdownDefault)];
@@ -332,7 +390,6 @@ var script = defineComponent({
       rootStyles,
       controlStyles,
       searchControlStyles,
-      placeholderStyles,
       dropdownStyles,
       dropdownItemStyles,
       noSearchResultsStyles,
@@ -425,8 +482,8 @@ var __vue_render__ = function () {
       return _c('OrTag', {
         key: option.value,
         attrs: {
-          "variant": 'reset',
-          "disabled": _vm.disabled || _vm.readonly
+          "variant": _vm.readonly || _vm.disabled ? 'tag' : 'reset',
+          "disabled": _vm.disabled
         },
         on: {
           "reset": function ($event) {
@@ -437,10 +494,9 @@ var __vue_render__ = function () {
     });
   }, {
     "model": _vm.proxyModelValue
-  })] : _vm.popoverState === 'closed' || !_vm.enableSearch ? [_c('span', {
-    class: _vm.placeholderStyles,
+  })] : _vm.popoverState === 'closed' || !_vm.enableSearch ? [_c('OrSelectPlaceholder', {
     attrs: {
-      "disabled": _vm.disabled ? '' : null
+      "disabled": _vm.disabled
     }
   }, [_vm._v("\n            " + _vm._s(_vm.placeholder) + "\n          ")])] : _vm._e()] : [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
     return [_c('span', {
@@ -448,10 +504,9 @@ var __vue_render__ = function () {
     }, [_vm._v("\n              " + _vm._s(_vm.selection && _vm.selection.label) + "\n            ")])];
   }, {
     "model": _vm.proxyModelValue
-  })] : _vm.popoverState === 'closed' || !_vm.enableSearch ? [_c('span', {
-    class: _vm.placeholderStyles,
+  })] : _vm.popoverState === 'closed' || !_vm.enableSearch ? [_c('OrSelectPlaceholder', {
     attrs: {
-      "disabled": _vm.disabled ? '' : null
+      "disabled": _vm.disabled
     }
   }, [_vm._v("\n            " + _vm._s(_vm.placeholder) + "\n          ")])] : _vm._e()]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n      +" + _vm._s(_vm.outerItems.length) + "\n    ")] : _vm._e(), _vm._v(" "), _vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
     ref: "searchControl",

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

@@ -78,7 +78,7 @@ export { _ as OrSearch } from '../OrSearch-ac542dd6.js';
 export { _ as OrSearchV3 } from '../OrSearch-2cd05f40.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-35b54d3c.js';
 export { _ as OrSelect } from '../OrSelect-c0d04cf6.js';
-export { _ as OrSelectV3 } from '../OrSelect-f3a50dc9.js';
+export { _ as OrSelectV3 } from '../OrSelect-34782e78.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-c56a9221.js';
 export { _ as OrSidebarV3 } from '../OrSidebar-c76d3d4a.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-ad5db793.js';

package/dist/esm/v2/components/or-select-v3/OrSelect.vue.d.ts

@@ -21,7 +21,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
     searchControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    placeholderStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -233,7 +232,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
     searchControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    placeholderStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;

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

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-f3a50dc9.js';
+export { _ as OrSelectV3 } from '../../OrSelect-34782e78.js';
 export { I as SelectSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';

package/dist/esm/v2/components/or-select-v3/partials/or-select-placeholder/OrSelectPlaceholder.vue.d.ts

@@ -0,0 +1,24 @@
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+}> & import("@vue/composition-api").Data, {}, {}, {
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, import("@vue/composition-api").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    disabled: boolean;
+} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
+    disabled: boolean;
+} & {}, {
+    disabled: boolean;
+}, true>);
+export default _default;

package/dist/esm/v2/components/or-select-v3/partials/or-select-placeholder/styles.d.ts

@@ -0,0 +1 @@
+export declare const SelectPlaceholder: string[];

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

@@ -1,7 +1,6 @@
 export declare const Select: string[];
 export declare const SelectControl: string[];
 export declare const SelectSearchControl: string[];
-export declare const SelectPlaceholder: string[];
 export declare const SelectDropdown: string[];
 export declare const SelectDropdownDefault: string[];
 export declare const SelectDropdownFlipped: string[];

package/dist/esm/v2/components/or-tags-v3/OrTags.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-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>;
     container: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     overflowButton: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
@@ -41,7 +41,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         } | {}> & Omit<{} & {}, never>>>;
         default: undefined;
     };
-}>> & 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<{
     items: string[];
     tagProps: Readonly<Partial<{
         [x: number]: string;

package/dist/esm/v2/components/or-teleport/OrTeleport.vue2.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data> & import("@vue/composition-api").Data, {}, {}, {
+declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data> & import("@vue/composition-api").Data, {}, {}, {
     to: {
         type: StringConstructor;
         required: boolean;
@@ -20,7 +20,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: boolean;
         default: boolean;
     };
-}>> & 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<{
     to: string;
     isDisabled: boolean;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {

package/dist/esm/v2/index.js

@@ -78,7 +78,7 @@ export { _ as OrSearch } from './OrSearch-ac542dd6.js';
 export { _ as OrSearchV3 } from './OrSearch-2cd05f40.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-35b54d3c.js';
 export { _ as OrSelect } from './OrSelect-c0d04cf6.js';
-export { _ as OrSelectV3 } from './OrSelect-f3a50dc9.js';
+export { _ as OrSelectV3 } from './OrSelect-34782e78.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-c56a9221.js';
 export { _ as OrSidebarV3 } from './OrSidebar-c76d3d4a.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-ad5db793.js';

package/dist/esm/v3/{OrSelect-a2272840.js → OrSelect-ba0f0da3.js}

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, ref, computed, toRefs, onMounted, watch } from 'vue-demi';
+import { defineComponent, ref, computed, getCurrentInstance, toRefs, onMounted, watch } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 import { u as useOverflow } from './useOverflow-c856b7b7.js';
 import '@vueuse/core';
@@ -6,19 +6,59 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import { u as useResponsive } from './useResponsive-a02e95b7.js';
 import '@onereach/styles/tailwind.config.json';
 import { i as isEmptyValue } from './isEmptyValue-fd56a6e4.js';
-import { s as script$1 } from './OrCheckbox-4433eaa6.js';
-import { s as script$2 } from './OrError-c01d0c29.js';
-import { s as script$3 } from './OrExpansionPanel-cb469c25.js';
-import { s as script$4 } from './OrHint-06ab89d7.js';
-import { s as script$6 } from './OrIconButton-6b7afbb3.js';
-import { s as script$5 } from './OrIcon-62793572.js';
-import { s as script$8, I as InputBoxSize } from './OrInputBox-912a6254.js';
-import { s as script$7 } from './OrInput-4aa8ef29.js';
-import { s as script$9 } from './OrLabel-d4c46bb6.js';
-import { s as script$a } from './OrMenuItem-54062d59.js';
-import { s as script$b } from './OrPopover-4ae174d0.js';
-import { s as script$c } from './OrTag-05c5e0fd.js';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, withModifiers, createVNode, vShow } from 'vue';
+import { s as script$2 } from './OrCheckbox-4433eaa6.js';
+import { s as script$3 } from './OrError-c01d0c29.js';
+import { s as script$4 } from './OrExpansionPanel-cb469c25.js';
+import { s as script$5 } from './OrHint-06ab89d7.js';
+import { s as script$7 } from './OrIconButton-6b7afbb3.js';
+import { s as script$6 } from './OrIcon-62793572.js';
+import { s as script$9, I as InputBoxSize } from './OrInputBox-912a6254.js';
+import { s as script$8 } from './OrInput-4aa8ef29.js';
+import { s as script$a } from './OrLabel-d4c46bb6.js';
+import { s as script$b } from './OrMenuItem-54062d59.js';
+import { s as script$c } from './OrPopover-4ae174d0.js';
+import { s as script$d } from './OrTag-05c5e0fd.js';
+import { openBlock, createElementBlock, normalizeClass, renderSlot, resolveComponent, resolveDirective, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, withModifiers, createVNode, vShow } from 'vue';
+
+const SelectPlaceholder = [
+// Interactivity
+'interactivity-none',
+// Typography
+'typography-inherit truncate',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+
+var script$1 = defineComponent({
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  expose: ['root'],
+  setup() {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-select-placeholder-v3', ...SelectPlaceholder]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+const _hoisted_1$1 = ["disabled"];
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles),
+    disabled: _ctx.disabled ? '' : null
+  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1$1);
+}
+
+script$1.render = render$1;
+script$1.__file = "src/components/or-select-v3/partials/or-select-placeholder/OrSelectPlaceholder.vue";
 
 const Select = [
 // Layout
@@ -41,13 +81,6 @@ const SelectSearchControl = [
 'grow',
 // Spacing
 '!mx-lg md:!-mx-sm+', '!my-sm md:!my-none'];
-const SelectPlaceholder = [
-// Theme
-'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
-// Interactivity
-'select-none',
-// Typography
-'truncate'];
 const SelectDropdown = [
 // Overflow
 'overflow-y-auto',
@@ -82,18 +115,19 @@ const SelectNoSearchResults = [
 
 var script = defineComponent({
   components: {
-    OrCheckbox: script$1,
-    OrError: script$2,
-    OrExpansionPanel: script$3,
-    OrHint: script$4,
-    OrIcon: script$5,
-    OrIconButton: script$6,
-    OrInput: script$7,
-    OrInputBox: script$8,
-    OrLabel: script$9,
-    OrMenuItem: script$a,
-    OrPopover: script$b,
-    OrTag: script$c
+    OrCheckbox: script$2,
+    OrError: script$3,
+    OrExpansionPanel: script$4,
+    OrHint: script$5,
+    OrIcon: script$6,
+    OrIconButton: script$7,
+    OrInput: script$8,
+    OrInputBox: script$9,
+    OrLabel: script$a,
+    OrMenuItem: script$b,
+    OrPopover: script$c,
+    OrSelectPlaceholder: script$1,
+    OrTag: script$d
   },
   directives: {
     DropdownClose,
@@ -216,7 +250,6 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-select-v3', ...Select]);
     const controlStyles = computed(() => [...SelectControl]);
     const searchControlStyles = computed(() => [...SelectSearchControl]);
-    const placeholderStyles = computed(() => [...SelectPlaceholder]);
     const dropdownStyles = computed(() => {
       var _a;
       return [...SelectDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? SelectDropdownFlipped : SelectDropdownDefault)];
@@ -331,7 +364,6 @@ var script = defineComponent({
       rootStyles,
       controlStyles,
       searchControlStyles,
-      placeholderStyles,
       dropdownStyles,
       dropdownItemStyles,
       noSearchResultsStyles,
@@ -358,27 +390,26 @@ var script = defineComponent({
 });
 
 const _hoisted_1 = ["id", "tabindex", "disabled"];
-const _hoisted_2 = ["disabled"];
-const _hoisted_3 = {
+const _hoisted_2 = {
   class: "truncate"
 };
-const _hoisted_4 = ["disabled"];
-const _hoisted_5 = {
+const _hoisted_3 = {
   key: 2,
   class: /*#__PURE__*/normalizeClass(['grow'])
 };
-const _hoisted_6 = {
+const _hoisted_4 = {
   class: /*#__PURE__*/normalizeClass(['layout-inline-row', 'gap-sm'])
 };
-const _hoisted_7 = {
+const _hoisted_5 = {
   class: /*#__PURE__*/normalizeClass(['contents'])
 };
-const _hoisted_8 = {
+const _hoisted_6 = {
   class: /*#__PURE__*/normalizeClass(['contents'])
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");
   const _component_OrTag = resolveComponent("OrTag");
+  const _component_OrSelectPlaceholder = resolveComponent("OrSelectPlaceholder");
   const _component_OrInput = resolveComponent("OrInput");
   const _component_OrIconButton = resolveComponent("OrIconButton");
   const _component_OrIcon = resolveComponent("OrIcon");
@@ -430,28 +461,34 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selection, option => {
       return openBlock(), createBlock(_component_OrTag, {
         key: option.value,
-        variant: 'reset',
-        disabled: _ctx.disabled || _ctx.readonly,
+        variant: _ctx.readonly || _ctx.disabled ? 'tag' : 'reset',
+        disabled: _ctx.disabled,
         onReset: $event => _ctx.deselect(option)
       }, {
         default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1 /* TEXT */)]),
 
         _: 2 /* DYNAMIC */
-      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled", "onReset"]);
-    }), 128 /* KEYED_FRAGMENT */))]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (openBlock(), createElementBlock("span", {
+      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "disabled", "onReset"]);
+    }), 128 /* KEYED_FRAGMENT */))]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (openBlock(), createBlock(_component_OrSelectPlaceholder, {
       key: 1,
-      class: normalizeClass(_ctx.placeholderStyles),
-      disabled: _ctx.disabled ? '' : null
-    }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_2)) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
+      disabled: _ctx.disabled
+    }, {
+      default: withCtx(() => [createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)]),
+
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
       key: 1
     }, [!_ctx.isEmptyModelValue ? renderSlot(_ctx.$slots, "valueTemplate", {
       key: 0,
       model: _ctx.proxyModelValue
-    }, () => [createElementVNode("span", _hoisted_3, toDisplayString(_ctx.selection && _ctx.selection.label), 1 /* TEXT */)]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (openBlock(), createElementBlock("span", {
+    }, () => [createElementVNode("span", _hoisted_2, toDisplayString(_ctx.selection && _ctx.selection.label), 1 /* TEXT */)]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (openBlock(), createBlock(_component_OrSelectPlaceholder, {
       key: 1,
-      class: normalizeClass(_ctx.placeholderStyles),
-      disabled: _ctx.disabled ? '' : null
-    }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_4)) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */))], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), _ctx.multiple && _ctx.outerItems.length > 0 ? (openBlock(), createElementBlock(Fragment, {
+      disabled: _ctx.disabled
+    }, {
+      default: withCtx(() => [createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)]),
+
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */))], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), _ctx.multiple && _ctx.outerItems.length > 0 ? (openBlock(), createElementBlock(Fragment, {
       key: 0
     }, [createTextVNode(" +" + toDisplayString(_ctx.outerItems.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), _ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
       key: 1,
@@ -464,7 +501,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       size: _ctx.size,
       "disable-default-styles": true,
       onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
-    }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "size"])) : (openBlock(), createElementBlock("div", _hoisted_5)), createElementVNode("div", _hoisted_6, [_ctx.showClear ? (openBlock(), createBlock(_component_OrIconButton, {
+    }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "size"])) : (openBlock(), createElementBlock("div", _hoisted_3)), createElementVNode("div", _hoisted_4, [_ctx.showClear ? (openBlock(), createBlock(_component_OrIconButton, {
       key: 0,
       icon: 'close',
       color: 'inherit',
@@ -593,14 +630,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       _: 3 /* FORWARDED */
     }, 8 /* PROPS */, ["trigger", "custom-styles"])]),
     _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["class", "variant", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.toggle], [_directive_dropdown_close, _ctx.close]]), withDirectives(createElementVNode("div", _hoisted_7, [_ctx.hint ? (openBlock(), createBlock(_component_OrHint, {
+  }, 8 /* PROPS */, ["class", "variant", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.toggle], [_directive_dropdown_close, _ctx.close]]), withDirectives(createElementVNode("div", _hoisted_5, [_ctx.hint ? (openBlock(), createBlock(_component_OrHint, {
     key: 0,
     disabled: _ctx.disabled
   }, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.hint), 1 /* TEXT */)]),
 
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div", _hoisted_8, [createVNode(_component_OrError, {
+  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div", _hoisted_6, [createVNode(_component_OrError, {
     disabled: _ctx.disabled
   }, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error), 1 /* TEXT */)]),

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

@@ -75,7 +75,7 @@ export { s as OrSearch } from '../OrSearch-2800e9bf.js';
 export { s as OrSearchV3 } from '../OrSearch-98342176.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-851db474.js';
 export { s as OrSelect } from '../OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from '../OrSelect-a2272840.js';
+export { s as OrSelectV3 } from '../OrSelect-ba0f0da3.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from '../OrSidebar-8f9b7502.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-79a7c625.js';

package/dist/esm/v3/components/or-select-v3/OrSelect.vue.d.ts

@@ -86,7 +86,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     rootStyles: import("vue-demi").ComputedRef<string[]>;
     controlStyles: import("vue-demi").ComputedRef<string[]>;
     searchControlStyles: import("vue-demi").ComputedRef<string[]>;
-    placeholderStyles: import("vue-demi").ComputedRef<string[]>;
     dropdownStyles: import("vue-demi").ComputedRef<string[]>;
     dropdownItemStyles: import("vue-demi").ComputedRef<string[]>;
     noSearchResultsStyles: import("vue-demi").ComputedRef<string[]>;

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

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-a2272840.js';
+export { s as OrSelectV3 } from '../../OrSelect-ba0f0da3.js';
 export { I as SelectSize } from '../../OrInputBox-912a6254.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';

package/dist/esm/v3/components/or-select-v3/partials/or-select-placeholder/OrSelectPlaceholder.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    disabled: boolean;
+}>;
+export default _default;

package/dist/esm/v3/components/or-select-v3/partials/or-select-placeholder/styles.d.ts

@@ -0,0 +1 @@
+export declare const SelectPlaceholder: string[];

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

@@ -1,7 +1,6 @@
 export declare const Select: string[];
 export declare const SelectControl: string[];
 export declare const SelectSearchControl: string[];
-export declare const SelectPlaceholder: string[];
 export declare const SelectDropdown: string[];
 export declare const SelectDropdownDefault: string[];
 export declare const SelectDropdownFlipped: string[];

package/dist/esm/v3/index.js

@@ -75,7 +75,7 @@ export { s as OrSearch } from './OrSearch-2800e9bf.js';
 export { s as OrSearchV3 } from './OrSearch-98342176.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-851db474.js';
 export { s as OrSelect } from './OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from './OrSelect-a2272840.js';
+export { s as OrSelectV3 } from './OrSelect-ba0f0da3.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from './OrSidebar-8f9b7502.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-79a7c625.js';