@onereach/ui-components 2.70.2-beta.2218.0 → 2.70.2

package/dist/bundled/v3/{OrLoader.vue_vue_type_script_lang-4c3c1ac9.js → OrLoader.vue_vue_type_script_lang-5405040c.js}

@@ -1,4 +1,5 @@
 import { defineComponent, ref, computed } from 'vue';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
 
 var LoaderVariant;
 (function (LoaderVariant) {
@@ -35,6 +36,7 @@ const LoaderDescription = ['typography-body-2-regular', 'text-center', 'text-out
 
 var script = defineComponent({
   name: 'OrLoader',
+  inheritAttrs: false,
   props: {
     variant: {
       type: String,
@@ -62,7 +64,8 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-loader', ...LoaderRoot, ...LoaderRootColors[props.color]]);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-loader', ...LoaderRoot, ...LoaderRootColors[props.color], classAttribute.value]);
     const titleStyles = computed(() => [...LoaderTitle]);
     const descriptionStyles = computed(() => [...LoaderDescription]);
     const containerStyles = computed(() => [...LoaderContainer]);

package/dist/bundled/v3/{OrMenu-6d7abe97.js → OrMenu-f26e8e55.js}

@@ -1,12 +1,13 @@
-import { s as script } from './OrMenu.vue_vue_type_script_lang-df35fd76.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createElementVNode, withModifiers, renderSlot } from 'vue';
+import { s as script } from './OrMenu.vue_vue_type_script_lang-2446a69a.js';
+import { resolveComponent, openBlock, createElementBlock, mergeProps, createVNode, withCtx, createElementVNode, normalizeClass, withModifiers, renderSlot } from 'vue';
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrPopover = resolveComponent("OrPopover");
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, [createVNode(_component_OrPopover, {
+  return openBlock(), createElementBlock("div", mergeProps({
+    ref: "root"
+  }, _ctx.$attrs, {
+    class: _ctx.rootStyles
+  }), [createVNode(_component_OrPopover, {
     ref: "popover",
     variant: 'auto',
     trigger: _ctx.trigger,
@@ -21,7 +22,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)]),
 
     _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["trigger", "placement"])], 2 /* CLASS */);
+  }, 8 /* PROPS */, ["trigger", "placement"])], 16 /* FULL_PROPS */);
 }
 
 script.render = render;

package/dist/bundled/v3/{OrMenu.vue_vue_type_script_lang-df35fd76.js → OrMenu.vue_vue_type_script_lang-2446a69a.js}

@@ -1,6 +1,7 @@
 import { defineComponent, ref, computed } from 'vue';
-import './OrPopover-1a488f88.js';
-import { s as script$1, P as PopoverPlacement } from './OrPopover.vue_vue_type_script_lang-b1102c1a.js';
+import './OrPopover-c462ce77.js';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
+import { s as script$1, P as PopoverPlacement } from './OrPopover.vue_vue_type_script_lang-54c7b11c.js';
 
 const MenuRoot = [
 // Layout
@@ -16,6 +17,7 @@ var script = defineComponent({
   components: {
     OrPopover: script$1
   },
+  inheritAttrs: false,
   props: {
     trigger: {
       type: HTMLElement,
@@ -41,7 +43,8 @@ var script = defineComponent({
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.isOpen;
     });
     // Styles
-    const rootStyles = computed(() => ['or-menu', ...MenuRoot]);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-menu', ...MenuRoot, classAttribute.value]);
     const bodyStyles = computed(() => [...MenuBody]);
     // Methods
     function open() {

package/dist/bundled/v3/{OrMenuItem-807e2a49.js → OrMenuItem-4feaba6c.js}

@@ -1,5 +1,5 @@
-import { s as script } from './OrMenuItem.vue_vue_type_script_lang-2400ec2a.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, normalizeProps, mergeProps, createCommentVNode, createElementVNode, renderSlot } from 'vue';
+import { s as script } from './OrMenuItem.vue_vue_type_script_lang-0ffaef05.js';
+import { resolveComponent, openBlock, createElementBlock, mergeProps, createBlock, normalizeProps, createCommentVNode, createElementVNode, renderSlot, normalizeClass } from 'vue';
 
 const _hoisted_1 = ["tabindex", "selected", "disabled"];
 const _hoisted_2 = {
@@ -7,20 +7,21 @@ const _hoisted_2 = {
 };
 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,
     tabindex: !_ctx.disabled ? 0 : null,
     selected: _ctx.selected ? '' : null,
     disabled: _ctx.disabled ? '' : null,
     onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('click', $event)),
     onFocus: _cache[1] || (_cache[1] = $event => _ctx.$emit('focus', $event)),
     onBlur: _cache[2] || (_cache[2] = $event => _ctx.$emit('blur', $event))
-  }, [_ctx.icon ? (openBlock(), createBlock(_component_OrIcon, normalizeProps(mergeProps({
+  }), [_ctx.icon ? (openBlock(), createBlock(_component_OrIcon, normalizeProps(mergeProps({
     key: 0
   }, typeof _ctx.icon === 'string' ? {
     icon: _ctx.icon
-  } : _ctx.icon)), null, 16 /* FULL_PROPS */)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1);
+  } : _ctx.icon)), null, 16 /* FULL_PROPS */)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 16 /* FULL_PROPS */, _hoisted_1);
 }
 
 script.render = render;

package/dist/bundled/v3/{OrMenuItem.vue_vue_type_script_lang-2400ec2a.js → OrMenuItem.vue_vue_type_script_lang-0ffaef05.js}

@@ -1,6 +1,7 @@
 import { defineComponent, ref, computed } from 'vue';
-import './OrIcon-1a5c9091.js';
-import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-bdbaad94.js';
+import './OrIcon-d878b768.js';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
+import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-a119a715.js';
 
 const MenuItemRoot = [
 // Layout
@@ -23,6 +24,7 @@ var script = defineComponent({
   components: {
     OrIcon: script$1
   },
+  inheritAttrs: false,
   props: {
     icon: {
       type: [String, Object],
@@ -43,7 +45,8 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-menu-item', ...MenuItemRoot]);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-menu-item', ...MenuItemRoot, classAttribute.value]);
     return {
       root,
       rootStyles

package/dist/bundled/v3/{OrModal.vue_vue_type_script_lang-5a71a851.js → OrModal.vue_vue_type_script_lang-55c864d1.js}

@@ -1,8 +1,9 @@
 import { defineComponent, ref, computed, watch } from 'vue';
-import './OrBottomSheet.vue_vue_type_script_lang-bdef5ca2.js';
-import './OrIconButton-428dd2cf.js';
-import { s as script$1 } from './OrOverlay.vue_vue_type_script_lang-7edd25f6.js';
-import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-ec6a3622.js';
+import './OrBottomSheet.vue_vue_type_script_lang-6fb49de9.js';
+import './OrIconButton-cd62526d.js';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
+import { s as script$1 } from './OrOverlay.vue_vue_type_script_lang-cb3aad0c.js';
+import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-aefcf30d.js';
 
 var ModalSize;
 (function (ModalSize) {
@@ -66,7 +67,8 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-modal', ...ModalRoot, ...ModalRootSizes[props.size]]);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-modal', ...ModalRoot, ...ModalRootSizes[props.size], classAttribute.value]);
     const headerStyles = computed(() => [...ModalHeader]);
     // State
     const isActive = ref(false);

package/dist/bundled/v3/{OrNotification.vue_vue_type_script_lang-6287244f.js → OrNotification.vue_vue_type_script_lang-c886ae51.js}

@@ -1,8 +1,9 @@
 import { defineComponent, ref, computed } from 'vue';
-import './OrIcon-1a5c9091.js';
-import './OrIconButton-428dd2cf.js';
-import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-bdbaad94.js';
-import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-ec6a3622.js';
+import './OrIcon-d878b768.js';
+import './OrIconButton-cd62526d.js';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
+import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-a119a715.js';
+import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-aefcf30d.js';
 
 var NotificationVariant;
 (function (NotificationVariant) {
@@ -71,6 +72,7 @@ var script = defineComponent({
     OrIcon: script$1,
     OrIconButton: script$2
   },
+  inheritAttrs: false,
   props: {
     variant: {
       type: String,
@@ -82,7 +84,8 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-notification', ...NotificationRoot, ...NotificationRootVariants[props.variant]]);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-notification', ...NotificationRoot, ...NotificationRootVariants[props.variant], classAttribute.value]);
     const iconStyles = computed(() => [...NotificationIcon, ...NotificationIconVariants[props.variant]]);
     // State
     const icon = computed(() => {

package/dist/bundled/v3/{OrOverlay.vue_vue_type_script_lang-7edd25f6.js → OrOverlay.vue_vue_type_script_lang-cb3aad0c.js}

@@ -1,6 +1,7 @@
 import { useScrollLock } from '@vueuse/core';
 import { openBlock, createBlock, Teleport, renderSlot, defineComponent, ref, computed } from 'vue';
 import { s as script$1 } from './OrTeleport.vue3.vue_vue_type_script_lang-4dc70cf1.js';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
 import { u as useElevation } from './useElevation-c8d5d3ba.js';
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -38,7 +39,8 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-overlay', ...OverlayRoot]);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-overlay', ...OverlayRoot, classAttribute.value]);
     // Effects
     // #region Elevation
     useElevation(root);

package/dist/bundled/v3/{OrPagination.vue_vue_type_script_lang-0d299d07.js → OrPagination.vue_vue_type_script_lang-c96d7cd7.js}

@@ -1,12 +1,13 @@
 import { defineComponent, ref, computed } from 'vue';
-import './OrButton-a1448bfa.js';
-import './OrIcon-1a5c9091.js';
-import './OrMenu-6d7abe97.js';
-import './OrMenuItem-807e2a49.js';
-import { s as script$1 } from './OrButton.vue_vue_type_script_lang-3b1e442b.js';
-import { s as script$2 } from './OrIcon.vue_vue_type_script_lang-bdbaad94.js';
-import { s as script$3 } from './OrMenu.vue_vue_type_script_lang-df35fd76.js';
-import { s as script$4 } from './OrMenuItem.vue_vue_type_script_lang-2400ec2a.js';
+import './OrButton-2b27c1fd.js';
+import './OrIcon-d878b768.js';
+import './OrMenu-f26e8e55.js';
+import './OrMenuItem-4feaba6c.js';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
+import { s as script$1 } from './OrButton.vue_vue_type_script_lang-8c44986c.js';
+import { s as script$2 } from './OrIcon.vue_vue_type_script_lang-a119a715.js';
+import { s as script$3 } from './OrMenu.vue_vue_type_script_lang-2446a69a.js';
+import { s as script$4 } from './OrMenuItem.vue_vue_type_script_lang-0ffaef05.js';
 
 const PaginationRoot = [
 // Layout
@@ -41,6 +42,7 @@ var script = defineComponent({
     OrMenu: script$3,
     OrMenuItem: script$4
   },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: Object,
@@ -75,7 +77,8 @@ var script = defineComponent({
       return (_a = limitMenu.value) === null || _a === void 0 ? void 0 : _a.root;
     });
     // Styles
-    const rootStyles = computed(() => ['or-pagination', ...PaginationRoot]);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-pagination', ...PaginationRoot, classAttribute.value]);
     const offsetControlStyles = computed(() => [...PaginationOffsetControl]);
     const limitControlStyles = computed(() => [...PaginationLimitControl]);
     const itemStyles = computed(() => [...PaginationItem]);
@@ -147,7 +150,7 @@ var script = defineComponent({
         return [...accumulator, page];
       }, []);
     });
-    // Methods
+    // Functions
     function toPreviousPage() {
       currentPage.value = currentPage.value - 1;
     }

package/dist/bundled/v3/{OrPopover-1a488f88.js → OrPopover-c462ce77.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrPopover.vue_vue_type_script_lang-b1102c1a.js';
+import { s as script } from './OrPopover.vue_vue_type_script_lang-54c7b11c.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, mergeProps, renderSlot, normalizeClass, createCommentVNode } from 'vue';
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {

package/dist/bundled/v3/{OrPopover.vue_vue_type_script_lang-b1102c1a.js → OrPopover.vue_vue_type_script_lang-54c7b11c.js}

@@ -1,9 +1,10 @@
 import { a as autoUpdate, c as computePosition, f as flip, s as shift, h as hide } from './floating-ui.dom.esm-83eba816.js';
 import { onClickOutside } from '@vueuse/core';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, normalizeClass, renderSlot, createCommentVNode, defineComponent, ref, computed, watch, watchPostEffect, unref, toRef, nextTick } from 'vue';
-import { s as script$1 } from './OrBottomSheet.vue_vue_type_script_lang-bdef5ca2.js';
-import './OrOverlay.vue_vue_type_script_lang-7edd25f6.js';
+import { s as script$1 } from './OrBottomSheet.vue_vue_type_script_lang-6fb49de9.js';
+import './OrOverlay.vue_vue_type_script_lang-cb3aad0c.js';
 import { u as useResponsive } from './useResponsive-9d397e2a.js';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
 import { u as useElevation } from './useElevation-c8d5d3ba.js';
 import { s as script$2 } from './OrTeleport.vue3.vue_vue_type_script_lang-4dc70cf1.js';
 
@@ -141,7 +142,8 @@ var script = defineComponent({
       return (_a = bottomSheet.value) === null || _a === void 0 ? void 0 : _a.root;
     });
     // Styles
-    const rootStyles = computed(() => ['or-popover', ...PopoverRoot]);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-popover', ...PopoverRoot, classAttribute.value]);
     const bodyStyles = computed(() => [...PopoverBody, ...PopoverBodyPlacements[props.placement]]);
     // State
     const state = ref('closed');

package/dist/bundled/v3/{OrProgress.vue_vue_type_script_lang-52f660d6.js → OrProgress.vue_vue_type_script_lang-a73c0acf.js}

@@ -1,7 +1,8 @@
-import { useElementBounding } from '@vueuse/core';
 import _ from 'lodash';
+import { useElementBounding } from '@vueuse/core';
 import { defineComponent, ref, useSlots, computed } from 'vue';
 import { u as useResponsive } from './useResponsive-9d397e2a.js';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
 
 var ProgressColor;
 (function (ProgressColor) {
@@ -79,6 +80,7 @@ const ProgressFooter = [
 
 var script = defineComponent({
   name: 'OrProgress',
+  inheritAttrs: false,
   props: {
     maxValue: {
       type: Number,
@@ -166,7 +168,8 @@ var script = defineComponent({
     });
     const computedSize = computed(() => isMobile.value ? 20 : 16);
     // Styles
-    const rootStyles = computed(() => ['or-progress', ...ProgressRoot, ...ProgressRootTypes[props.type]]);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-progress', ...ProgressRoot, ...ProgressRootTypes[props.type], classAttribute.value]);
     const headerStyles = computed(() => [...ProgressHeader]);
     const labelStyles = computed(() => [...ProgressHeaderLabel]);
     const percentStyles = computed(() => [...ProgressHeaderPercent]);

package/dist/bundled/v3/{OrRadio.vue_vue_type_script_lang-2f053184.js → OrRadio.vue_vue_type_script_lang-2e666a56.js}

@@ -1,7 +1,7 @@
-import { defineComponent, ref, computed, reactive } from 'vue';
-import './OrLabel-c556887e.js';
-import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-b2e42f31.js';
-import { s as script$1, L as LabelVariant } from './OrLabel.vue_vue_type_script_lang-191d2304.js';
+import { defineComponent, getCurrentInstance, ref, computed } from 'vue';
+import './OrLabel-c6873e79.js';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
+import { s as script$1, L as LabelVariant } from './OrLabel.vue_vue_type_script_lang-96f94c4e.js';
 
 const RadioRoot = [
 // Layout
@@ -38,6 +38,7 @@ var script = defineComponent({
   components: {
     OrLabel: script$1
   },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: String,
@@ -69,19 +70,18 @@ var script = defineComponent({
     }
   },
   emits: ['update:modelValue', 'input', 'focus', 'blur'],
-  expose: ['root', 'focus', 'blur'],
+  expose: ['root'],
   setup(props, context) {
+    var _a;
+    const currentInstance = getCurrentInstance();
     // Refs
     const root = ref();
-    const control = ref();
     // Styles
-    const rootStyles = computed(() => ['or-radio', ...RadioRoot]);
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-radio', ...RadioRoot, classAttribute.value]);
     const controlStyles = computed(() => [...RadioControl, ...RadioControlHandle]);
     // State
-    const controlAttributes = reactive({
-      id: useIdAttribute(),
-      ...useControlAttributes()
-    });
+    const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
     const proxyModelValue = computed({
       get: () => {
         var _a;
@@ -93,24 +93,12 @@ var script = defineComponent({
         context.emit('update:modelValue', value);
       }
     });
-    // Methods
-    function focus() {
-      var _a;
-      (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    function blur() {
-      var _a;
-      (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
-    }
     return {
       root,
-      control,
       rootStyles,
       controlStyles,
-      controlAttributes,
-      proxyModelValue,
-      focus,
-      blur
+      controlId,
+      proxyModelValue
     };
   }
 });

package/dist/bundled/v3/{OrSearch.vue_vue_type_script_lang-2bc9e930.js → OrSearch.vue_vue_type_script_lang-06f318ca.js}

@@ -1,14 +1,16 @@
-import { debouncedWatch } from '@vueuse/core';
 import { defineComponent, ref, computed, watch } from 'vue';
-import './OrInput-9faa2035.js';
-import { s as script$1 } from './OrInput.vue_vue_type_script_lang-dea5c599.js';
-import { a as InputBoxSize } from './OrInputBox.vue_vue_type_script_lang-47d98e81.js';
+import { debouncedWatch } from '@vueuse/core';
+import './OrInput-a4f220ed.js';
+import { s as script$1 } from './OrInput.vue_vue_type_script_lang-607d79d4.js';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
+import { a as InputBoxSize } from './OrInputBox.vue_vue_type_script_lang-5ee4ee45.js';
 
 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

package/dist/bundled/v3/{OrSegmentedControl.vue_vue_type_script_lang-92379dcc.js → OrSegmentedControl.vue_vue_type_script_lang-579406f5.js}

@@ -1,4 +1,5 @@
-import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot } from 'vue';
+import { defineComponent, ref, computed, openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot, normalizeClass } from 'vue';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
 
 const SegmentedControlItemRoot = [
 // Layout
@@ -32,6 +33,7 @@ const SegmentedControlItemRootSizes = {
 
 var script$1 = defineComponent({
   name: 'OrSegmentedControlItem',
+  inheritAttrs: false,
   props: {
     size: {
       type: String,
@@ -50,7 +52,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) {
     }
@@ -67,17 +70,18 @@ const _hoisted_2 = {
   class: /*#__PURE__*/normalizeClass(['truncate'])
 };
 function render(_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;
-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) {
@@ -104,6 +108,7 @@ var script = defineComponent({
   components: {
     OrSegmentedControlItem: script$1
   },
+  inheritAttrs: false,
   props: {
     options: {
       type: Array,
@@ -132,7 +137,8 @@ var script = defineComponent({
     // 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: () => {