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

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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "5.2.3-beta.3176.0",
+  "version": "5.2.3-beta.3178.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -39,7 +39,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^3.1.1-beta.3176.0",
+    "@onereach/styles": "^3.1.0",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",
     "@types/uuid": "8.3.1",

package/src/components/or-select-v3/OrSelect.vue

@@ -47,8 +47,8 @@
               <OrTag
                 v-for="option in selection"
                 :key="option.value"
-                :variant="'reset'"
-                :disabled="disabled || readonly"
+                :variant="readonly || disabled ? 'tag' : 'reset'"
+                :disabled="disabled"
                 @reset="deselect(option)"
               >
                 {{ option.label }}
@@ -57,12 +57,9 @@
           </template>
 
           <template v-else-if="popoverState === 'closed' || !enableSearch">
-            <span
-              :class="placeholderStyles"
-              :disabled="disabled ? '' : null"
-            >
+            <OrSelectPlaceholder :disabled="disabled">
               {{ placeholder }}
-            </span>
+            </OrSelectPlaceholder>
           </template>
         </template>
 
@@ -79,12 +76,9 @@
           </template>
 
           <template v-else-if="popoverState === 'closed' || !enableSearch">
-            <span
-              :class="placeholderStyles"
-              :disabled="disabled ? '' : null"
-            >
+            <OrSelectPlaceholder :disabled="disabled">
               {{ placeholder }}
-            </span>
+            </OrSelectPlaceholder>
           </template>
         </template>
       </div>
@@ -285,8 +279,9 @@ import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { OrTagV3 as OrTag } from '../or-tag-v3';
+import OrSelectPlaceholder from './partials/or-select-placeholder/OrSelectPlaceholder.vue';
 import { SelectSize } from './props';
-import { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectPlaceholder, SelectSearchControl } from './styles';
+import { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectSearchControl } from './styles';
 import { SelectGroupByFunction, SelectOption, SelectSearchFunction } from './types';
 
 export default defineComponent({
@@ -302,6 +297,7 @@ export default defineComponent({
     OrLabel,
     OrMenuItem,
     OrPopover,
+    OrSelectPlaceholder,
     OrTag,
   },
 
@@ -457,10 +453,6 @@ export default defineComponent({
       ...SelectSearchControl,
     ]);
 
-    const placeholderStyles = computed(() => [
-      ...SelectPlaceholder,
-    ]);
-
     const dropdownStyles = computed(() => [
       ...SelectDropdown,
       ...popover.value?.isFlipped ? SelectDropdownFlipped : SelectDropdownDefault,
@@ -610,7 +602,6 @@ export default defineComponent({
       rootStyles,
       controlStyles,
       searchControlStyles,
-      placeholderStyles,
       dropdownStyles,
       dropdownItemStyles,
       noSearchResultsStyles,

package/src/components/or-select-v3/partials/or-select-placeholder/OrSelectPlaceholder.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+    :disabled="disabled ? '' : null"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi';
+import { SelectPlaceholder } from './styles';
+
+export default defineComponent({
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  expose: [
+    'root',
+  ],
+
+  setup() {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-select-placeholder-v3',
+      ...SelectPlaceholder,
+    ]);
+
+    return {
+      root,
+      rootStyles,
+    };
+  },
+});
+</script>

package/src/components/or-select-v3/partials/or-select-placeholder/styles.ts

@@ -0,0 +1,11 @@
+export const SelectPlaceholder: string[] = [
+  // Interactivity
+  'interactivity-none',
+
+  // Typography
+  'typography-inherit truncate',
+
+  // Theme
+  'theme-foreground-outline',
+  'dark:theme-foreground-outline-dark',
+];

package/src/components/or-select-v3/styles.ts

@@ -32,18 +32,6 @@ export const SelectSearchControl: string[] = [
   '!my-sm md:!my-none',
 ];
 
-export const SelectPlaceholder: string[] = [
-  // Theme
-  'theme-foreground-outline',
-  'dark:theme-foreground-outline-dark',
-
-  // Interactivity
-  'select-none',
-
-  // Typography
-  'truncate',
-];
-
 export const SelectDropdown: string[] = [
   // Overflow
   'overflow-y-auto',