@onereach/ui-components 8.7.1-beta.3685.0 → 8.7.1

package/dist/esm/v3/components/or-tab-v3/OrTab.vue.d.ts

@@ -3,14 +3,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    invalid: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
@@ -19,21 +11,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    invalid: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
     selected: boolean;
-    invalid: boolean;
-    disabled: boolean;
 }>;
 export default _default;

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

@@ -1,3 +1,3 @@
-export { s as OrTabV3 } from '../../OrTab-3eb33eeb.js';
+export { s as OrTabV3 } from '../../OrTab-276ea81d.js';
 import 'vue-demi';
 import 'vue';

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

@@ -1 +1 @@
-export declare const Tab: string[];
+export declare const TabRoot: string[];

package/dist/esm/v3/components/or-tabs-v3/OrTabs.vue.d.ts

@@ -2,14 +2,14 @@ import { PropType } from 'vue-demi';
 import { TabsVariant } from './props';
 import { TabsItem } from './types';
 declare const _default: import("vue-demi").DefineComponent<{
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
     items: {
         type: PropType<TabsItem[]>;
         required: true;
     };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     variant: {
         type: PropType<"default" | "fitted">;
         default: TabsVariant;
@@ -20,35 +20,30 @@ declare const _default: import("vue-demi").DefineComponent<{
     overflowTabRoot: import("vue-demi").ComputedRef<any>;
     overflowMenu: import("vue-demi").Ref<any>;
     overflowMenuRoot: import("vue-demi").ComputedRef<any>;
-    containerStyles: import("vue-demi").ComputedRef<string[]>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
+    containerStyles: import("vue-demi").ComputedRef<string[]>;
     contentStyles: import("vue-demi").ComputedRef<string[]>;
     tabs: {
         normal: {
             value: string | number;
             label: string;
-            invalid?: boolean | undefined;
-            disabled?: boolean | undefined;
         }[];
         hidden: {
             value: string | number;
             label: string;
-            invalid?: boolean | undefined;
-            disabled?: boolean | undefined;
         }[];
     };
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | undefined>;
     activeTab: import("vue-demi").ComputedRef<TabsItem>;
-    selectTab: (tab: TabsItem) => void;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
     items: {
         type: PropType<TabsItem[]>;
         required: true;
     };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     variant: {
         type: PropType<"default" | "fitted">;
         default: TabsVariant;

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

@@ -1,4 +1,4 @@
-export { s as OrTabsV3, T as TabsVariant } from '../../OrTabs-c83800f7.js';
+export { s as OrTabsV3, T as TabsVariant } from '../../OrTabs-c68c8be3.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../dom-aecadd9a.js';
@@ -9,7 +9,7 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import '../../OrIcon-8f6c9c29.js';
 import 'vue';
-import '../../OrMenuItem-77e47b3b.js';
+import '../../OrMenuItem-c5d2a427.js';
 import '../../OrMenu-33d89df4.js';
 import '../../usePopoverState-b92c698b.js';
 import '../../OrPopover-062e78f6.js';
@@ -20,4 +20,4 @@ import '../../OrBottomSheet-e6c0b05f.js';
 import '../../OrOverlay-bd4f72c4.js';
 import '../../OrTeleport.vue3-bf77eed4.js';
 import '../../useTheme-0ef25778.js';
-import '../../OrTab-3eb33eeb.js';
+import '../../OrTab-276ea81d.js';

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

@@ -1,5 +1,5 @@
 import { TabsVariant } from './props';
+export declare const TabsRoot: string[];
+export declare const TabsRootVariants: Record<TabsVariant, string[]>;
 export declare const TabsContainer: string[];
-export declare const Tabs: string[];
-export declare const TabsVariants: Record<TabsVariant, string[]>;
 export declare const TabsContent: string[];

package/dist/esm/v3/components/or-tabs-v3/types.d.ts

@@ -1,6 +1,4 @@
 export interface TabsItem {
     value: string | number;
     label: string;
-    invalid?: boolean;
-    disabled?: boolean;
 }

package/dist/esm/v3/components/or-time-format-v3/index.js

@@ -1,6 +1,6 @@
-export { s as OrTimeFormatV3 } from '../../OrTimeFormat-26cfaafd.js';
+export { s as OrTimeFormatV3 } from '../../OrTimeFormat-fc7a59f2.js';
 import 'vue-demi';
-import '../../OrDateTimePicker-b1ec68a8.js';
+import '../../OrDateTimePicker-eccf252e.js';
 import '../../dropdown-open-06d651cf.js';
 import '@vueuse/core';
 import '../../dom-aecadd9a.js';
@@ -26,10 +26,10 @@ import '../../OrTeleport.vue3-bf77eed4.js';
 import '../../useTheme-0ef25778.js';
 import '../../OrInputBox-f0bac539.js';
 import '../../OrLabel-b826da04.js';
-import '../../OrDateTimePickerTimeSelect-c97af8c7.js';
+import '../../OrDateTimePickerTimeSelect-bc9342dd.js';
 import '../../getTimePlaceholder-13d5f743.js';
 import '../../OrButton-e5617bbe.js';
 import '../../OrLoader-b79022da.js';
-import '../../OrMenuItem-77e47b3b.js';
+import '../../OrMenuItem-c5d2a427.js';
 import '../../OrMenu-33d89df4.js';
 import '../../getCurrentDate-046a888d.js';

package/dist/esm/v3/components/or-time-picker-v3/index.js

@@ -1,6 +1,6 @@
-export { s as OrTimePickerV3 } from '../../OrTimePicker-ebfff3ab.js';
-import '../../OrDateTimePicker-b1ec68a8.js';
-import '../../OrDateTimePickerTimeSelect-c97af8c7.js';
+export { s as OrTimePickerV3 } from '../../OrTimePicker-7e4a8000.js';
+import '../../OrDateTimePicker-eccf252e.js';
+import '../../OrDateTimePickerTimeSelect-bc9342dd.js';
 export { D as TimePickerFormat } from '../../getTimePlaceholder-13d5f743.js';
 export { I as TimePickerSize } from '../../OrInputBox-f0bac539.js';
 import 'vue-demi';
@@ -31,5 +31,5 @@ import '../../useTheme-0ef25778.js';
 import '../../OrLabel-b826da04.js';
 import '../../OrButton-e5617bbe.js';
 import '../../OrLoader-b79022da.js';
-import '../../OrMenuItem-77e47b3b.js';
+import '../../OrMenuItem-c5d2a427.js';
 import '../../OrMenu-33d89df4.js';

package/dist/esm/v3/components/or-time-range-picker-v3/index.js

@@ -1,6 +1,6 @@
-export { s as OrTimeRangePickerV3 } from '../../OrTimeRangePicker-477cadab.js';
-import '../../OrDateTimePicker-b1ec68a8.js';
-import '../../OrDateTimePickerTimeSelect-c97af8c7.js';
+export { s as OrTimeRangePickerV3 } from '../../OrTimeRangePicker-2d5a72ce.js';
+import '../../OrDateTimePicker-eccf252e.js';
+import '../../OrDateTimePickerTimeSelect-bc9342dd.js';
 export { D as TimeRangePickerFormat } from '../../getTimePlaceholder-13d5f743.js';
 export { I as TimeRangePickerSize } from '../../OrInputBox-f0bac539.js';
 import 'vue-demi';
@@ -31,5 +31,5 @@ import '../../useTheme-0ef25778.js';
 import '../../OrLabel-b826da04.js';
 import '../../OrButton-e5617bbe.js';
 import '../../OrLoader-b79022da.js';
-import '../../OrMenuItem-77e47b3b.js';
+import '../../OrMenuItem-c5d2a427.js';
 import '../../OrMenu-33d89df4.js';

package/dist/esm/v3/index.js

@@ -8,7 +8,7 @@ export { s as OrButtonV2 } from './OrButton-130ad8d9.js';
 export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE, s as OrIconButton, s as OrIconButtonV2 } from './OrIconButton-287bb86a.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-8c81a2d5.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-549e5f80.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-8bbbbe26.js';
 export { C as CardPadding, s as OrCardV3 } from './OrCard-ee23cedc.js';
 export { s as OrCheckbox } from './OrCheckbox-5666c954.js';
 export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-d6bf486e.js';
@@ -22,7 +22,7 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-4d3184c4.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-db54f6b8.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { s as OrCollapse } from './OrCollapse-d7c0afae.js';
@@ -34,13 +34,13 @@ export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-8c818798.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-dccb7167.js';
 export { s as OrMenuV3 } from './OrMenu-33d89df4.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-062e78f6.js';
-export { s as OrDateFormatV3 } from './OrDateFormat-36ba02e5.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-7b626917.js';
-export { s as OrDateRangePickerV3 } from './OrDateRangePicker-c7570324.js';
-export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-c8076fb8.js';
+export { s as OrDateFormatV3 } from './OrDateFormat-8c9095ca.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-be607573.js';
+export { s as OrDateRangePickerV3 } from './OrDateRangePicker-a16dcb30.js';
+export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-88ba723e.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-4bfefbcd.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker-b1ec68a8.js';
-export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-c97af8c7.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker-eccf252e.js';
+export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-bc9342dd.js';
 export { D as DateTimePickerTimeFormat, D as TimePickerFormat, D as TimeRangePickerFormat, f as formatDate, a as formatTime, g as getDatePlaceholder, b as getTimePlaceholder } from './getTimePlaceholder-13d5f743.js';
 export { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 export { g as getNextMonthDate } from './getNextMonthDate-00c47169.js';
@@ -72,7 +72,7 @@ export { s as OrListV3 } from './OrList-69197fa9.js';
 export { s as OrListItem } from './OrListItem-2ed9a12f.js';
 export { L as LoaderViews, s as OrLoader } from './OrLoader-d28a8ebf.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-b79022da.js';
-export { s as OrMenuItemV3 } from './OrMenuItem-77e47b3b.js';
+export { s as OrMenuItemV3 } from './OrMenuItem-c5d2a427.js';
 export { s as OrModal, O as OrModalSizes } from './OrModal-b2060770.js';
 export { M as ModalSize, s as OrModalV3 } from './OrModal-51eef18b.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from './OrNotification-1b28dd4a.js';
@@ -81,7 +81,7 @@ export { s as OrNumberInput } from './OrNumberInput-e9dcdcbd.js';
 export { s as OrOverflowMenu } from './OrOverflowMenu-440ddf3e.js';
 export { s as OrOverlay } from './OrOverlay-451dce49.js';
 export { s as OrOverlayV3 } from './OrOverlay-bd4f72c4.js';
-export { s as OrPaginationV3 } from './OrPagination-18243eb9.js';
+export { s as OrPaginationV3 } from './OrPagination-4d9fa9a6.js';
 export { s as OrPassword } from './OrPassword-4494ac89.js';
 export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './OrProgress-aa2ea84b.js';
 export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-95907e02.js';
@@ -92,12 +92,12 @@ export { s as OrRadioV3 } from './OrRadio-50b0ead5.js';
 export { s as OrRangeSliderV3 } from './OrRangeSlider-07ddbed1.js';
 export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider-f932d1c4.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-5dfd3f6d.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-eda0097a.js';
+export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-995c5f4e.js';
 export { s as OrSearch } from './OrSearch-2800e9bf.js';
 export { s as OrSearchV3 } from './OrSearch-6413323a.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-6be79b4e.js';
 export { s as OrSelect } from './OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from './OrSelect-c837e550.js';
+export { s as OrSelectV3 } from './OrSelect-f656c471.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
 export { S as OrSidebarPlacement, s as OrSidebarV3, S as SidebarPlacement } from './OrSidebar-3ce61658.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';
@@ -108,16 +108,16 @@ export { s as OrSkeletonCircleV3 } from './OrSkeletonCircle-1eae069b.js';
 export { s as OrSkeletonRectV3 } from './OrSkeletonRect-ba5df861.js';
 export { s as OrSkeletonTextV3 } from './OrSkeletonText-3c3207d0.js';
 export { s as OrSlider } from './OrSlider-b7bd588e.js';
-export { s as OrSortingV3 } from './OrSorting-bfe2200c.js';
+export { s as OrSortingV3 } from './OrSorting-4cf454bb.js';
 export { s as OrStatusV3, a as StatusSize, S as StatusVariant } from './OrStatus-95ea42e3.js';
 export { s as OrStepper } from './OrStepper-4943002c.js';
 export { s as OrSwitch } from './OrSwitch-fb864132.js';
 export { s as OrSwitchV3 } from './OrSwitch-a493c66d.js';
 export { s as OrTab } from './OrTab-d8d4e871.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-c2af7ca3.js';
-export { s as OrTabV3 } from './OrTab-3eb33eeb.js';
+export { s as OrTabV3 } from './OrTab-276ea81d.js';
 export { s as OrTabs } from './OrTabs-3da3ea89.js';
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-c83800f7.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-c68c8be3.js';
 export { s as OrTag } from './OrTag-1b3b1296.js';
 export { s as OrTagInputV3 } from './OrTagInput-fb963f37.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-bb7cac42.js';
@@ -128,9 +128,9 @@ export { s as OrTextV3 } from './OrText-d54c951d.js';
 export { s as OrTextarea } from './OrTextarea-7a753c1a.js';
 export { s as OrTextareaV3 } from './OrTextarea-e198e17e.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-cb6762c8.js';
-export { s as OrTimeFormatV3 } from './OrTimeFormat-26cfaafd.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-ebfff3ab.js';
-export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-477cadab.js';
+export { s as OrTimeFormatV3 } from './OrTimeFormat-fc7a59f2.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-7e4a8000.js';
+export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-2d5a72ce.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-d6f117e2.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-05a9c81b.js';
 export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-49db948c.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.7.1-beta.3685.0",
+  "version": "8.7.1",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -40,7 +40,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.4.2",
-    "@onereach/styles": "^6.3.1-beta.3685.0",
+    "@onereach/styles": "^6.3.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -176,5 +176,6 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "gitHead": "996ecc67bb89c4261484128e0d31016022dd11bc"
 }

package/src/components/or-code-v3/OrCode.vue

@@ -152,6 +152,9 @@ export default defineComponent({
   expose: [
     'root',
     'editorView',
+    'control',
+    'fullscreenControl',
+    'modal',
 
     'focus',
     'blur',

package/src/components/or-menu-item-v3/OrMenuItem.vue

@@ -3,8 +3,8 @@
     ref="root"
     :class="rootStyles"
     :tabindex="!disabled ? 0 : null"
-    :selected="selected"
-    :disabled="disabled"
+    :selected="selected ? '' : null"
+    :disabled="disabled ? '' : null"
     @click="$emit('click', $event)"
     @focus="$emit('focus', $event)"
     @blur="$emit('blur', $event)"

package/src/components/or-menu-item-v3/styles.ts

@@ -24,10 +24,6 @@ export const MenuItemRoot: string[] = [
   'theme-foreground-outline',
   'dark:theme-foreground-outline-dark',
 
-  // Theme (selected)
-  'selected:theme-foreground-default',
-  'dark:selected:theme-foreground-default-dark',
-
   // Theme (hover)
   'hover:md:theme-foreground-default',
   'dark:hover:md:theme-foreground-default-dark',
@@ -35,4 +31,7 @@ export const MenuItemRoot: string[] = [
   // Theme (active)
   'active:theme-foreground-default',
   'dark:active:theme-foreground-default-dark',
+
+  // Theme (selected)
+  'selected:theme-foreground-default dark:selected:theme-foreground-default-dark',
 ];

package/src/components/or-tab-v3/OrTab.vue

@@ -2,9 +2,8 @@
   <div
     ref="root"
     :class="rootStyles"
-    :selected="selected"
-    :invalid="invalid"
-    :disabled="disabled"
+    :tabindex="0"
+    :selected="selected ? '' : null"
     @click="$emit('click', $event)"
     @focus="$emit('focus', $event)"
     @blur="$emit('blur', $event)"
@@ -15,7 +14,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { Tab } from './styles';
+import { TabRoot } from './styles';
 
 export default defineComponent({
   name: 'OrTab',
@@ -25,16 +24,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-
-    invalid: {
-      type: Boolean,
-      default: false,
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   emits: [
@@ -54,7 +43,7 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-tab-v3',
-      ...Tab,
+      ...TabRoot,
     ]);
 
     return {

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

@@ -1,10 +1,9 @@
-export const Tab: string[] = [
+export const TabRoot: string[] = [
   // Layout
   'layout-inline-row justify-center',
 
   // Spacing
   'py-[6px]',
-  'mb-[-1px]',
 
   // Interactivity
   'interactivity-click',
@@ -21,27 +20,10 @@ export const Tab: string[] = [
   'theme-border-2-transparent',
   'dark:theme-border-2-transparent',
 
-  // Theme (selected)
-  'selected:theme-foreground-default',
-  'dark:selected:theme-foreground-default-dark',
-
-  'selected:theme-border-underline',
-
-  'selected:theme-border-2-current',
-  'dark:selected:theme-border-2-current',
-
-  // Theme (invalid)
-  'invalid:theme-foreground-error',
-  'dark:invalid:theme-foreground-error-dark',
-
   // Theme (hover)
   'hover:md:theme-foreground-default',
   'dark:hover:md:theme-foreground-default-dark',
 
-  // Theme (hover, invalid)
-  'hover:invalid:md:theme-foreground-error-hover',
-  'dark:hover:invalid:md:theme-foreground-error-hover-dark',
-
   // Theme (active)
   'active:theme-foreground-default',
   'dark:active:theme-foreground-default-dark',
@@ -51,12 +33,12 @@ export const Tab: string[] = [
   'active:theme-border-2-current',
   'dark:active:theme-border-2-current',
 
-  // Theme (active, invalid)
-  'active:invalid:theme-foreground-error',
-  'dark:active:invalid:theme-foreground-error-dark',
+  // Theme (selected)
+  'selected:theme-foreground-default',
+  'dark:selected:theme-foreground-default-dark',
 
-  'active:invalid:theme-border-underline',
+  'selected:theme-border-underline',
 
-  'active:invalid:theme-border-2-current',
-  'dark:active:invalid:theme-border-2-current',
+  'selected:theme-border-2-current',
+  'dark:selected:theme-border-2-current',
 ];

package/src/components/or-tabs-v3/OrTabs.vue

@@ -9,9 +9,7 @@
         v-for="tab in tabs.normal"
         :key="tab.value"
         :selected="tab.value === proxyModelValue"
-        :invalid="tab.invalid"
-        :disabled="tab.disabled"
-        @click.stop="selectTab(tab)"
+        @click.stop="proxyModelValue = tab.value"
       >
         <slot
           name="tab"
@@ -40,15 +38,13 @@
           <OrMenuItem
             v-for="tab in tabs.hidden"
             :key="tab.value"
-            :disabled="tab.disabled"
-            @click.stop="selectTab(tab); overflowMenu && overflowMenu.close()"
+            @click.stop="proxyModelValue = tab.value; overflowMenu && overflowMenu.close()"
           >
             {{ tab.label }}
           </OrMenuItem>
         </OrMenu>
       </template>
     </div>
-
     <div :class="contentStyles">
       <slot :name="String(proxyModelValue)" />
     </div>
@@ -64,7 +60,7 @@ import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrMenuV3 as OrMenu } from '../or-menu-v3';
 import { OrTabV3 as OrTab } from '../or-tab-v3';
 import { TabsVariant } from './props';
-import { Tabs, TabsContainer, TabsContent, TabsVariants } from './styles';
+import { TabsContainer, TabsRoot, TabsRootVariants, TabsContent } from './styles';
 import { TabsItem } from './types';
 
 export default defineComponent({
@@ -85,16 +81,16 @@ export default defineComponent({
   },
 
   props: {
-    modelValue: {
-      type: [String, Number],
-      default: undefined,
-    },
-
     items: {
       type: Array as PropType<TabsItem[]>,
       required: true,
     },
 
+    modelValue: {
+      type: [String, Number],
+      default: undefined,
+    },
+
     variant: {
       type: String as PropType<`${TabsVariant}`>,
       default: TabsVariant.Default,
@@ -120,14 +116,14 @@ export default defineComponent({
     const overflowMenuRoot = computed(() => overflowMenu.value?.root);
 
     // Styles
-    const containerStyles = computed(() => [
-      ...TabsContainer,
-    ]);
-
     const rootStyles = computed(() => [
       'or-tabs-v3',
-      ...Tabs,
-      ...TabsVariants[props.variant],
+      ...TabsRoot,
+      ...TabsRootVariants[props.variant],
+    ]);
+
+    const containerStyles = computed(() => [
+      ...TabsContainer,
     ]);
 
     const contentStyles = computed(() => [
@@ -145,12 +141,6 @@ export default defineComponent({
     const activeTab = computed(() => props.items.find(({ value }) => value === proxyModelValue.value)!);
 
     // Methods
-    function selectTab(tab: TabsItem): void {
-      if (!tab.disabled) {
-        proxyModelValue.value = tab.value;
-      }
-    }
-
     function rearrangeTabs(items: TabsItem[], activeTab: TabsItem, rootElement: Element): typeof tabs {
       const { children } = rootElement;
 
@@ -216,13 +206,12 @@ export default defineComponent({
       overflowTabRoot,
       overflowMenu,
       overflowMenuRoot,
-      containerStyles,
       rootStyles,
+      containerStyles,
       contentStyles,
       tabs,
       proxyModelValue,
       activeTab,
-      selectTab,
     };
   },
 });

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

@@ -1,17 +1,6 @@
 import { TabsVariant } from './props';
 
-export const TabsContainer: string[] = [
-  // Layout
-  'layout-column',
-
-  // Box
-  'h-full',
-
-  // Spacing
-  'gap-lg',
-];
-
-export const Tabs: string[] = [
+export const TabsRoot: string[] = [
   // Layout
   'grid',
   'grid-flow-col',
@@ -31,7 +20,7 @@ export const Tabs: string[] = [
   'dark:theme-border-1-outline',
 ];
 
-export const TabsVariants: Record<TabsVariant, string[]> = {
+export const TabsRootVariants: Record<TabsVariant, string[]> = {
   'default': [
     // Layout
     'auto-cols-max',
@@ -43,6 +32,17 @@ export const TabsVariants: Record<TabsVariant, string[]> = {
   ],
 };
 
+export const TabsContainer: string[] = [
+  // Layout
+  'layout-column',
+
+  // Box
+  'h-full',
+
+  // Spacing
+  'gap-lg',
+];
+
 export const TabsContent: string[] = [
   // Layout
   'grow',

package/src/components/or-tabs-v3/types.ts

@@ -1,7 +1,4 @@
 export interface TabsItem {
   value: string | number;
   label: string;
-
-  invalid?: boolean;
-  disabled?: boolean;
 }