@onereach/ui-components 2.71.3-beta.2245.0 → 2.72.0-beta.2247.0

package/dist/esm/v3/{OrSearch-4c5c44f2.js → OrSearch-9885d178.js}

@@ -1,14 +1,16 @@
-import { debouncedWatch } from '@vueuse/core';
 import { defineComponent, ref, computed, watch } from 'vue-demi';
-import { s as script$1 } from './OrInput-bd054213.js';
-import { a as InputBoxSize } from './OrInputBox-e16ade90.js';
-import { resolveComponent, openBlock, createBlock, normalizeClass } from 'vue';
+import { debouncedWatch } from '@vueuse/core';
+import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+import { s as script$1 } from './OrInput-9c0426b9.js';
+import { a as InputBoxSize } from './OrInputBox-6d1b6059.js';
+import { resolveComponent, openBlock, createBlock, mergeProps } from 'vue';
 
 var script = defineComponent({
   name: 'OrSearch',
   components: {
     OrInput: script$1
   },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: String,
@@ -43,7 +45,8 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-search']);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-search', classAttribute.value]);
     // State
     const localModelValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : '');
     // Events
@@ -76,14 +79,15 @@ var script = defineComponent({
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrInput = resolveComponent("OrInput");
-  return openBlock(), createBlock(_component_OrInput, {
-    ref: "root",
+  return openBlock(), createBlock(_component_OrInput, mergeProps({
+    ref: "root"
+  }, _ctx.$attrs, {
     modelValue: _ctx.localModelValue,
     "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.localModelValue = $event),
     modelModifiers: {
       trim: true
     },
-    class: normalizeClass(_ctx.rootStyles),
+    class: _ctx.rootStyles,
     type: 'search',
     size: _ctx.size,
     placeholder: _ctx.placeholder,
@@ -95,7 +99,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onKeyup: _cache[3] || (_cache[3] = $event => _ctx.$emit('keyup', $event)),
     onFocus: _cache[4] || (_cache[4] = $event => _ctx.$emit('focus', $event)),
     onBlur: _cache[5] || (_cache[5] = $event => _ctx.$emit('blur', $event))
-  }, null, 8 /* PROPS */, ["modelValue", "class", "size", "placeholder", "debounce", "disabled", "disable-default-styles"]);
+  }), null, 16 /* FULL_PROPS */, ["modelValue", "class", "size", "placeholder", "debounce", "disabled", "disable-default-styles"]);
 }
 
 script.render = render;

package/dist/esm/v3/{OrSegmentedControl-880b4911.js → OrSegmentedControl-171cad78.js}

@@ -1,5 +1,7 @@
 import { defineComponent, ref, computed, isVue2 } from 'vue-demi';
-import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, resolveComponent, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString } from 'vue';
+import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+import '@vueuse/core';
+import { openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot, normalizeClass, resolveComponent, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString } from 'vue';
 
 const SegmentedControlItemRoot = [
 // Layout
@@ -33,6 +35,7 @@ const SegmentedControlItemRootSizes = {
 
 var script$1 = defineComponent({
   name: 'OrSegmentedControlItem',
+  inheritAttrs: false,
   props: {
     size: {
       type: String,
@@ -51,7 +54,8 @@ var script$1 = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-segmented-control-item', ...SegmentedControlItemRoot, ...SegmentedControlItemRootSizes[props.size]]);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-segmented-control-item', ...SegmentedControlItemRoot, ...SegmentedControlItemRootSizes[props.size], classAttribute.value]);
     // Handlers
     function onClick(event) {
       if (isVue2) {
@@ -71,17 +75,18 @@ const _hoisted_2 = {
   class: /*#__PURE__*/normalizeClass(['truncate'])
 };
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles),
+  return openBlock(), createElementBlock("div", mergeProps({
+    ref: "root"
+  }, _ctx.$attrs, {
+    class: _ctx.rootStyles,
     selected: _ctx.selected ? '' : null,
     disabled: _ctx.disabled ? '' : null,
     onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
-  }, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 10 /* CLASS, PROPS */, _hoisted_1);
+  }), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 16 /* FULL_PROPS */, _hoisted_1);
 }
 
 script$1.render = render$1;
-script$1.__file = "src/components/or-segmented-control-v3/partials/or-segmented-control-item/OrSegmentedControlItem.vue";
+script$1.__file = "src/components/or-segmented-control-v3/components/or-segmented-control-item/OrSegmentedControlItem.vue";
 
 var SegmentedControlSize;
 (function (SegmentedControlSize) {
@@ -108,10 +113,7 @@ var script = defineComponent({
   components: {
     OrSegmentedControlItem: script$1
   },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
+  inheritAttrs: false,
   props: {
     options: {
       type: Array,
@@ -121,6 +123,10 @@ var script = defineComponent({
       type: String,
       default: undefined
     },
+    value: {
+      type: String,
+      default: undefined
+    },
     size: {
       type: String,
       default: SegmentedControlSize.M
@@ -130,17 +136,23 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'input'],
   expose: ['root'],
   setup(props, context) {
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-segmented-control', ...SegmentedControlRoot, ...SegmentedControlRootSizes[props.size]]);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-segmented-control', ...SegmentedControlRoot, ...SegmentedControlRootSizes[props.size], classAttribute.value]);
     // State
     const proxyModelValue = computed({
-      get: () => props.modelValue,
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
+      },
+
       set: value => {
+        context.emit('input', value);
         context.emit('update:modelValue', value);
       }
     });
@@ -154,10 +166,11 @@ var script = defineComponent({
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrSegmentedControlItem = resolveComponent("OrSegmentedControlItem");
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, option => {
+  return openBlock(), createElementBlock("div", mergeProps({
+    ref: "root"
+  }, _ctx.$attrs, {
+    class: _ctx.rootStyles
+  }), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, option => {
     return openBlock(), createBlock(_component_OrSegmentedControlItem, {
       key: option.value,
       size: _ctx.size,
@@ -169,7 +182,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
       _: 2 /* DYNAMIC */
     }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["size", "selected", "disabled", "onClick"]);
-  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */);
+  }), 128 /* KEYED_FRAGMENT */))], 16 /* FULL_PROPS */);
 }
 
 script.render = render;

package/dist/esm/v3/{OrSelect-466e50ca.js → OrSelect-8fbd88bc.js}

@@ -1,19 +1,20 @@
 import { defineComponent, getCurrentInstance, ref, computed, onMounted, watch } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
+import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import { u as useOverflow } from './useOverflow-af6161c8.js';
 import '@vueuse/core';
-import { s as script$1 } from './OrCheckbox-16c1e2f4.js';
-import { s as script$2 } from './OrError-19198748.js';
-import { s as script$3 } from './OrExpansionPanel-3a4282da.js';
-import { s as script$4 } from './OrHint-6863124f.js';
-import { s as script$5 } from './OrIcon-34f59f73.js';
-import { s as script$7, a as InputBoxSize } from './OrInputBox-e16ade90.js';
-import { s as script$6 } from './OrInput-bd054213.js';
-import { s as script$8 } from './OrLabel-f700f9fb.js';
-import { s as script$9 } from './OrMenuItem-58707d47.js';
-import { s as script$a } from './OrPopover-40217b49.js';
-import { s as script$b } from './OrTag-148ff9ae.js';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, createVNode, withModifiers } from 'vue';
+import { s as script$1 } from './OrCheckbox-3e139eac.js';
+import { s as script$2 } from './OrError-ec8c709d.js';
+import { s as script$3 } from './OrExpansionPanel-f8d7ff8d.js';
+import { s as script$4 } from './OrHint-74bb732d.js';
+import { s as script$5 } from './OrIcon-b195169c.js';
+import { s as script$7, a as InputBoxSize } from './OrInputBox-6d1b6059.js';
+import { s as script$6 } from './OrInput-9c0426b9.js';
+import { s as script$8 } from './OrLabel-bdaec602.js';
+import { s as script$9 } from './OrMenuItem-9da279f6.js';
+import { s as script$a } from './OrPopover-1075dd38.js';
+import { s as script$b } from './OrTag-5d54f37d.js';
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, normalizeClass, createElementVNode, Fragment, renderList, createVNode, withModifiers } from 'vue';
 
 const SelectRoot = [
 // Layout
@@ -70,10 +71,7 @@ var script = defineComponent({
     DropdownClose,
     DropdownOpen
   },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
+  inheritAttrs: false,
   props: {
     options: {
       type: Array,
@@ -87,6 +85,10 @@ var script = defineComponent({
       type: [String, Number, Array],
       default: undefined
     },
+    value: {
+      type: [String, Number, Array],
+      default: undefined
+    },
     multiple: {
       type: Boolean,
       default: false
@@ -144,7 +146,7 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['update:modelValue', 'focus', 'blur', 'search'],
+  emits: ['update:modelValue', 'input', 'focus', 'blur', 'search'],
   expose: ['root'],
   setup(props, context) {
     var _a;
@@ -167,7 +169,8 @@ var script = defineComponent({
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
     // Styles
-    const rootStyles = computed(() => ['or-select', ...SelectRoot]);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-select', ...SelectRoot, classAttribute.value]);
     const controlStyles = computed(() => [...SelectControl]);
     const placeholderStyles = computed(() => [...SelectPlaceholder]);
     const dropdownStyles = computed(() => [...SelectDropdown]);
@@ -175,8 +178,13 @@ var script = defineComponent({
     // State
     const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
     const proxyModelValue = computed({
-      get: () => props.modelValue,
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
+      },
+
       set: value => {
+        context.emit('input', value);
         context.emit('update:modelValue', value);
       }
     });
@@ -300,10 +308,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrError = resolveComponent("OrError");
   const _directive_dropdown_open = resolveDirective("dropdown-open");
   const _directive_dropdown_close = resolveDirective("dropdown-close");
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, [_ctx.label ? (openBlock(), createBlock(_component_OrLabel, {
+  return openBlock(), createElementBlock("div", mergeProps({
+    ref: "root"
+  }, _ctx.$attrs, {
+    class: _ctx.rootStyles
+  }), [_ctx.label ? (openBlock(), createBlock(_component_OrLabel, {
     key: 0,
     "control-id": _ctx.controlId,
     variant: 'input',
@@ -400,10 +409,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               }, () => [createVNode(_component_OrCheckbox, {
                 modelValue: _ctx.proxyModelValue,
                 "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.proxyModelValue = $event),
-                value: option.value,
+                "input-value": option.value,
                 label: option.label,
                 "label-variant": 'input'
-              }, null, 8 /* PROPS */, ["modelValue", "value", "label"])])]),
+              }, null, 8 /* PROPS */, ["modelValue", "input-value", "label"])])]),
               _: 2 /* DYNAMIC */
             }, 1024 /* DYNAMIC_SLOTS */);
           }), 128 /* KEYED_FRAGMENT */)) : (openBlock(true), createElementBlock(Fragment, {
@@ -441,10 +450,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, () => [createVNode(_component_OrCheckbox, {
             modelValue: _ctx.proxyModelValue,
             "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.proxyModelValue = $event),
-            value: option.value,
+            "input-value": option.value,
             label: option.label,
             "label-variant": 'input'
-          }, null, 8 /* PROPS */, ["modelValue", "value", "label"])])]),
+          }, null, 8 /* PROPS */, ["modelValue", "input-value", "label"])])]),
           _: 2 /* DYNAMIC */
         }, 1024 /* DYNAMIC_SLOTS */);
       }), 128 /* KEYED_FRAGMENT */)) : (openBlock(true), createElementBlock(Fragment, {
@@ -488,7 +497,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error), 1 /* TEXT */)]),
 
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["disabled"]))], 2 /* CLASS */);
+  }, 8 /* PROPS */, ["disabled"]))], 16 /* FULL_PROPS */);
 }
 
 script.render = render;

package/dist/esm/v3/{OrSkeletonText-2b1610ce.js → OrSkeletonText-0546754d.js}

@@ -45,7 +45,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 6 /* CLASS, STYLE */);
 }
 
-var css_248z$2 = "/**\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-374502f0 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-374502f0 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n/**\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-374502f0 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-374502f0 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes wave-374502f0 {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(100%);\n}\n}\n.or-skeleton[data-v-374502f0] {\n  overflow: hidden;\n  position: relative;\n  padding: 0;\n  background: #f6f8fd;\n  border: 0;\n}\n.or-skeleton.is-animated[data-v-374502f0]::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: linear-gradient(90.14deg, #f6f8fd 0.1%, #fff 49.98%, #f6f8fd 99.06%);\n  animation: wave-374502f0 1.5s linear 0.5s infinite;\n}\n.or-skeleton-circle[data-v-374502f0] {\n  border-radius: 9999px !important;\n}";
+var css_248z$2 = "/**\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-374502f0 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-374502f0 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n/**\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-374502f0 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-374502f0 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes wave-374502f0 {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(100%);\n}\n}\n.or-skeleton[data-v-374502f0] {\n  overflow: hidden;\n  position: relative;\n  padding: 0;\n  background: #f6f8fd;\n  border: 0;\n}\n.or-skeleton.is-animated[data-v-374502f0]::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: linear-gradient(90.14deg, #f6f8fd 0.1%, #fff 49.98%, #f6f8fd 99.06%);\n  animation: wave-374502f0 1.5s linear 0.5s infinite;\n}\n[data-theme=dark] .or-skeleton[data-v-374502f0] {\n  background: var(--c-neutral-3);\n}\n[data-theme=dark] .or-skeleton.is-animated[data-v-374502f0]::before {\n  background: linear-gradient(90.14deg, var(--c-neutral-3) 0.1%, var(--c-neutral-2) 49.98%, var(--c-neutral-3) 99.06%);\n}\n.or-skeleton-circle[data-v-374502f0] {\n  border-radius: 9999px !important;\n}";
 styleInject(css_248z$2);
 
 script$2.render = render$2;
@@ -96,7 +96,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 6 /* CLASS, STYLE */);
 }
 
-var css_248z$1 = "/**\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-043cb99c {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-043cb99c {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n/**\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-043cb99c {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-043cb99c {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes wave-043cb99c {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(100%);\n}\n}\n.or-skeleton[data-v-043cb99c] {\n  overflow: hidden;\n  position: relative;\n  padding: 0;\n  background: #f6f8fd;\n  border: 0;\n}\n.or-skeleton.is-animated[data-v-043cb99c]::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: linear-gradient(90.14deg, #f6f8fd 0.1%, #fff 49.98%, #f6f8fd 99.06%);\n  animation: wave-043cb99c 1.5s linear 0.5s infinite;\n}\n.or-skeleton-rect[data-v-043cb99c] {\n  border-radius: var(--s-2);\n}";
+var css_248z$1 = "/**\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-043cb99c {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-043cb99c {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n/**\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-043cb99c {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-043cb99c {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes wave-043cb99c {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(100%);\n}\n}\n.or-skeleton[data-v-043cb99c] {\n  overflow: hidden;\n  position: relative;\n  padding: 0;\n  background: #f6f8fd;\n  border: 0;\n}\n.or-skeleton.is-animated[data-v-043cb99c]::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: linear-gradient(90.14deg, #f6f8fd 0.1%, #fff 49.98%, #f6f8fd 99.06%);\n  animation: wave-043cb99c 1.5s linear 0.5s infinite;\n}\n[data-theme=dark] .or-skeleton[data-v-043cb99c] {\n  background: var(--c-neutral-3);\n}\n[data-theme=dark] .or-skeleton.is-animated[data-v-043cb99c]::before {\n  background: linear-gradient(90.14deg, var(--c-neutral-3) 0.1%, var(--c-neutral-2) 49.98%, var(--c-neutral-3) 99.06%);\n}\n.or-skeleton-rect[data-v-043cb99c] {\n  border-radius: var(--s-2);\n}";
 styleInject(css_248z$1);
 
 script$1.render = render$1;
@@ -170,7 +170,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }), 128 /* KEYED_FRAGMENT */))], 4 /* STYLE */);
 }
 
-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-10564f36 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-10564f36 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n/**\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-10564f36 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-10564f36 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes wave-10564f36 {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(100%);\n}\n}\n.or-skeleton[data-v-10564f36] {\n  overflow: hidden;\n  position: relative;\n  padding: 0;\n  background: #f6f8fd;\n  border: 0;\n}\n.or-skeleton.is-animated[data-v-10564f36]::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: linear-gradient(90.14deg, #f6f8fd 0.1%, #fff 49.98%, #f6f8fd 99.06%);\n  animation: wave-10564f36 1.5s linear 0.5s infinite;\n}\n.or-skeleton-text-root[data-v-10564f36] {\n  height: auto;\n  display: flex;\n  flex-direction: column;\n}\n.or-skeleton-text-root .or-skeleton-text[data-v-10564f36] {\n  border-radius: var(--s-2);\n  width: 100%;\n}\n.or-skeleton-text-root .or-skeleton-text-headline-1[data-v-10564f36] {\n  height: 1.5rem;\n  margin: 0.145rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-headline-2[data-v-10564f36] {\n  height: 1.25rem;\n  margin: 0.03125rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-headline-3[data-v-10564f36] {\n  height: 1rem;\n  margin: 0.25rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-body-1[data-v-10564f36] {\n  height: 1rem;\n  margin: 0.25rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-body-2[data-v-10564f36] {\n  height: 0.875rem;\n  margin: 0.21875rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-button[data-v-10564f36] {\n  height: 0.875rem;\n  margin: 0.1875rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-caption[data-v-10564f36] {\n  height: 0.75rem;\n  margin: 0.1875rem 0;\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-10564f36 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-10564f36 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n/**\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-10564f36 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-10564f36 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes wave-10564f36 {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(100%);\n}\n}\n.or-skeleton[data-v-10564f36] {\n  overflow: hidden;\n  position: relative;\n  padding: 0;\n  background: #f6f8fd;\n  border: 0;\n}\n.or-skeleton.is-animated[data-v-10564f36]::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: linear-gradient(90.14deg, #f6f8fd 0.1%, #fff 49.98%, #f6f8fd 99.06%);\n  animation: wave-10564f36 1.5s linear 0.5s infinite;\n}\n[data-theme=dark] .or-skeleton[data-v-10564f36] {\n  background: var(--c-neutral-3);\n}\n[data-theme=dark] .or-skeleton.is-animated[data-v-10564f36]::before {\n  background: linear-gradient(90.14deg, var(--c-neutral-3) 0.1%, var(--c-neutral-2) 49.98%, var(--c-neutral-3) 99.06%);\n}\n.or-skeleton-text-root[data-v-10564f36] {\n  height: auto;\n  display: flex;\n  flex-direction: column;\n}\n.or-skeleton-text-root .or-skeleton-text[data-v-10564f36] {\n  border-radius: var(--s-2);\n  width: 100%;\n}\n.or-skeleton-text-root .or-skeleton-text-headline-1[data-v-10564f36] {\n  height: 1.5rem;\n  margin: 0.145rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-headline-2[data-v-10564f36] {\n  height: 1.25rem;\n  margin: 0.03125rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-headline-3[data-v-10564f36] {\n  height: 1rem;\n  margin: 0.25rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-body-1[data-v-10564f36] {\n  height: 1rem;\n  margin: 0.25rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-body-2[data-v-10564f36] {\n  height: 0.875rem;\n  margin: 0.21875rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-button[data-v-10564f36] {\n  height: 0.875rem;\n  margin: 0.1875rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-caption[data-v-10564f36] {\n  height: 0.75rem;\n  margin: 0.1875rem 0;\n}";
 styleInject(css_248z);
 
 script.render = render;

package/dist/esm/v3/{OrSkeletonText-afd3d007.js → OrSkeletonText-3965ff71.js}

@@ -1,7 +1,9 @@
-import _ from 'lodash';
 import { defineComponent, ref, computed } from 'vue-demi';
+import _ from 'lodash';
 import { p as pxToRem } from './px-to-rem-0b26b83e.js';
-import { openBlock, createElementBlock, normalizeClass, normalizeStyle, Fragment, renderList } from 'vue';
+import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+import '@vueuse/core';
+import { openBlock, createElementBlock, mergeProps, Fragment, renderList, normalizeClass, normalizeStyle } from 'vue';
 
 const SkeletonRoot = [
 // Position
@@ -38,6 +40,7 @@ const SkeletonAnimated = [
 
 var script$2 = defineComponent({
   name: 'OrSkeletonCircle',
+  inheritAttrs: false,
   props: {
     animated: {
       type: Boolean,
@@ -55,7 +58,8 @@ var script$2 = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-skeleton', 'or-skeleton-circle', ...SkeletonRoot, ...SkeletonCircle, ...(props.animated ? SkeletonAnimated : [])]);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-skeleton', 'or-skeleton-circle', ...SkeletonRoot, ...SkeletonCircle, ...(props.animated ? SkeletonAnimated : []), classAttribute.value]);
     const rootStyle = computed(() => {
       var _a;
       const size = (_a = props.size) !== null && _a !== void 0 ? _a : 40; // 40px - medium OrAvatar
@@ -76,11 +80,12 @@ var script$2 = defineComponent({
 });
 
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles),
-    style: normalizeStyle(_ctx.rootStyle)
-  }, null, 6 /* CLASS, STYLE */);
+  return openBlock(), createElementBlock("div", mergeProps({
+    ref: "root"
+  }, _ctx.$attrs, {
+    class: _ctx.rootStyles,
+    style: _ctx.rootStyle
+  }), null, 16 /* FULL_PROPS */);
 }
 
 script$2.render = render$2;
@@ -88,6 +93,7 @@ script$2.__file = "src/components/or-skeleton-v3/OrSkeletonCircle.vue";
 
 var script$1 = defineComponent({
   name: 'OrSkeletonRect',
+  inheritAttrs: false,
   props: {
     animated: {
       type: Boolean,
@@ -110,7 +116,8 @@ var script$1 = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-skeleton', 'or-skeleton-rect', ...SkeletonRoot, ...SkeletonRect, ...(props.animated ? SkeletonAnimated : [])]);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-skeleton', 'or-skeleton-rect', ...SkeletonRoot, ...SkeletonRect, ...(props.animated ? SkeletonAnimated : []), classAttribute.value]);
     const rootStyle = computed(() => {
       var _a, _b;
       const width = (_a = props.width) !== null && _a !== void 0 ? _a : '100%';
@@ -129,11 +136,12 @@ var script$1 = defineComponent({
 });
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles),
-    style: normalizeStyle(_ctx.rootStyle)
-  }, null, 6 /* CLASS, STYLE */);
+  return openBlock(), createElementBlock("div", mergeProps({
+    ref: "root"
+  }, _ctx.$attrs, {
+    class: _ctx.rootStyles,
+    style: _ctx.rootStyle
+  }), null, 16 /* FULL_PROPS */);
 }
 
 script$1.render = render$1;
@@ -141,6 +149,7 @@ script$1.__file = "src/components/or-skeleton-v3/OrSkeletonRect.vue";
 
 var script = defineComponent({
   name: 'OrSkeletonText',
+  inheritAttrs: false,
   props: {
     animated: {
       type: Boolean,
@@ -173,7 +182,8 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const containerStyles = computed(() => ['or-skeleton-text-root', ...SkeletonTextContainerRoot]);
+    const classAttribute = useClassAttribute();
+    const containerStyles = computed(() => ['or-skeleton-text-root', ...SkeletonTextContainerRoot, classAttribute.value]);
     const containerStyle = computed(() => {
       var _a;
       const width = (_a = props.width) !== null && _a !== void 0 ? _a : '100%';
@@ -181,7 +191,7 @@ var script = defineComponent({
         'width': _.isNumber(width) ? pxToRem(width) : width
       };
     });
-    const rowStyles = computed(() => ['or-skeleton', 'or-skeleton-text', ...SkeletonRoot, ...SkeletonText, ...(props.animated ? SkeletonAnimated : [])]);
+    const rowStyles = computed(() => ['or-skeleton', 'or-skeleton-text', ...SkeletonRoot, ...SkeletonText, ...(props.animated ? SkeletonAnimated : []), classAttribute.value]);
     const rowStyle = computed(() => {
       var _a, _b;
       const height = (_a = props.fontSize) !== null && _a !== void 0 ? _a : 16;
@@ -205,17 +215,18 @@ var script = defineComponent({
 });
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.containerStyles),
-    style: normalizeStyle(_ctx.containerStyle)
-  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.lineKeys, key => {
+  return openBlock(), createElementBlock("div", mergeProps({
+    ref: "root"
+  }, _ctx.$attrs, {
+    class: _ctx.containerStyles,
+    style: _ctx.containerStyle
+  }), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.lineKeys, key => {
     return openBlock(), createElementBlock("div", {
       key: key,
       class: normalizeClass(_ctx.rowStyles),
       style: normalizeStyle(_ctx.rowStyle)
     }, null, 6 /* CLASS, STYLE */);
-  }), 128 /* KEYED_FRAGMENT */))], 6 /* CLASS, STYLE */);
+  }), 128 /* KEYED_FRAGMENT */))], 16 /* FULL_PROPS */);
 }
 
 script.render = render;

package/dist/esm/v3/{OrSortHeader-a39f77f9.js → OrSortHeader-fe1a9cf8.js}

@@ -1,6 +1,8 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$1 } from './OrIcon-34f59f73.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, withModifiers, renderSlot, createBlock, createCommentVNode } from 'vue';
+import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+import '@vueuse/core';
+import { s as script$1 } from './OrIcon-b195169c.js';
+import { resolveComponent, openBlock, createElementBlock, mergeProps, withModifiers, renderSlot, createBlock, normalizeClass, createCommentVNode } from 'vue';
 
 const SortHeaderRoot = [
 // Layout
@@ -21,43 +23,50 @@ var script = defineComponent({
   components: {
     OrIcon: script$1
   },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: Object,
       default: undefined
     },
     value: {
+      type: Object,
+      default: undefined
+    },
+    inputValue: {
       type: String,
       required: true
     }
   },
-  emits: ['update:modelValue', 'focus', 'blur'],
+  emits: ['update:modelValue', 'input', 'focus', 'blur'],
   expose: ['root'],
   setup(props, context) {
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-sort-header', ...SortHeaderRoot]);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-sort-header', ...SortHeaderRoot, classAttribute.value]);
     // State
     const proxyModelValue = computed({
-      get: () => props.modelValue,
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
+      },
+
       set: value => {
+        context.emit('input', value);
         context.emit('update:modelValue', value);
       }
     });
     const activated = computed(() => {
       var _a;
-      return ((_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.column) === props.value;
+      return ((_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.column) === props.inputValue;
     });
     // Methods
     function toggleDirection() {
       var _a;
       proxyModelValue.value = {
-        column: props.value,
+        column: props.inputValue,
         direction: ((_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.direction) === 'asc' ? 'desc' : 'asc'
       };
     }
@@ -74,18 +83,19 @@ var script = defineComponent({
 const _hoisted_1 = ["activated"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrIcon = resolveComponent("OrIcon");
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles),
+  return openBlock(), createElementBlock("div", mergeProps({
+    ref: "root"
+  }, _ctx.$attrs, {
+    class: _ctx.rootStyles,
     activated: _ctx.activated ? '' : null,
     onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.toggleDirection(), ["stop"]))
-  }, [renderSlot(_ctx.$slots, "default"), _ctx.activated ? (openBlock(), createBlock(_component_OrIcon, {
+  }), [renderSlot(_ctx.$slots, "default"), _ctx.activated ? (openBlock(), createBlock(_component_OrIcon, {
     key: 0,
     class: normalizeClass({
       'rotate-180': _ctx.proxyModelValue.direction === 'asc'
     }),
     icon: 'arrow_downward'
-  }, null, 8 /* PROPS */, ["class"])) : createCommentVNode("v-if", true)], 10 /* CLASS, PROPS */, _hoisted_1);
+  }, null, 8 /* PROPS */, ["class"])) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */, _hoisted_1);
 }
 
 script.render = render;