@onereach/ui-components 10.4.5-beta.4373.0 → 10.5.0-beta.4375.0

package/dist/esm/v3/index.js

@@ -1,20 +1,20 @@
-export { s as OrAutocompleteV3 } from './OrAutocomplete-201601db.js';
+export { s as OrAutocompleteV3 } from './OrAutocomplete-0b5908a8.js';
 export { O as OR_AVATAR_SIZE, s as OrAvatar } from './OrAvatar-1e8ba806.js';
 export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from './OrAvatar-1cbce1de.js';
 export { B as BottomSheetVariant, s as OrBottomSheetV3 } from './OrBottomSheet-787f121c.js';
 export { s as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from './OrButton-c05bdda7.js';
-export { s as OrButtonGroupV3 } from './OrButtonGroup-e179e479.js';
+export { s as OrButtonGroupV3 } from './OrButtonGroup-a28ebe12.js';
 export { s as OrButtonV2 } from './OrButton-f5de246c.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-746a7058.js';
-export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-31bcb511.js';
+export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-c95aef65.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-6ee44732.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-6e5a7115.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-9cc04183.js';
 export { C as CardPadding, s as OrCardV3 } from './OrCard-c2ef331b.js';
 export { s as OrCheckbox } from './OrCheckbox-eedaff8f.js';
-export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-67f06816.js';
-export { s as OrCheckboxTreeV3 } from './OrCheckboxTree-1298529c.js';
-export { s as OrCheckboxV3 } from './OrCheckbox-7391dea0.js';
+export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-5fb8c0e4.js';
+export { s as OrCheckboxTreeV3 } from './OrCheckboxTree-cc2f974b.js';
+export { s as OrCheckboxV3 } from './OrCheckbox-1740426d.js';
 export { s as OrChip } from './OrChip-829de0b8.js';
 export { s as OrChips } from './OrChips-dbf4dc5a.js';
 export { s as OrCode, O as OrCodeLanguages } from './OrCode-0c4c1cd7.js';
@@ -23,30 +23,28 @@ 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-1b2ddf7d.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-a601ef2c.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { s as OrCollapse } from './OrCollapse-bbba69ea.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-bbc69767.js';
-export { s as OrCombinedInputV3 } from './OrCombinedInput-4dc423a8.js';
+export { s as OrCombinedInputV3 } from './OrCombinedInput-429d6114.js';
 export { s as OrConfirm } from './OrConfirm-7c132ea7.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-a5f93676.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-bd66999a.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-cd742ad1.js';
-export { s as OrDataGridV3 } from './OrDataGrid-ed2616d0.js';
-export { D as DataGridVariant } from './OrDataGridToolbar-08f141b7.js';
-export { s as OrDateFormatV3 } from './OrDateFormat-992afd2d.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-14f3a0fc.js';
-export { s as OrDateRangePickerV3 } from './OrDateRangePicker-300312f0.js';
-export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-87a781c8.js';
+export { s as OrDateFormatV3 } from './OrDateFormat-f860f070.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-64ff4cb8.js';
+export { s as OrDateRangePickerV3 } from './OrDateRangePicker-25e7a4e3.js';
+export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-9fb07831.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-d2de9625.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker-a12dc209.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-1aebc861.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker-fbd2bb31.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-5f13fd59.js';
 export { f as formatDate, a as formatTime } from './formatTime-fbabf53c.js';
 export { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 export { g as getNextMonthDate } from './getNextMonthDate-00c47169.js';
-export { D as DropAreaSize, s as OrDropAreaV3 } from './OrDropArea-656633f8.js';
+export { D as DropAreaSize, s as OrDropAreaV3 } from './OrDropArea-038ee055.js';
 export { a as approximateFileSize } from './approximateFileSize-a48b356b.js';
-export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from './OrEditorTabs-fb3cd530.js';
+export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from './OrEditorTabs-f8a602b2.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-47f9d910.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-89fbf607.js';
@@ -65,15 +63,15 @@ export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-978c
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from './OrInlineTextEdit-a512574d.js';
 export { s as OrInlineTextareaV3 } from './OrInlineTextarea-d7f661d6.js';
 export { s as OrInput } from './OrInput-4a3206ea.js';
-export { a as InputBoxSize, I as InputBoxVariant, s as OrInputBoxV3 } from './OrInputBox-24c89cb2.js';
-export { I as InputType, s as OrInputV3 } from './OrInput-b8095e9c.js';
+export { a as InputBoxSize, I as InputBoxVariant, s as OrInputBoxV3 } from './OrInputBox-287f97ba.js';
+export { I as InputType, s as OrInputV3 } from './OrInput-37be348a.js';
 export { s as OrLabel } from './OrLabel-a7d99df4.js';
 export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-4abbce6e.js';
 export { L as LinkColor, s as OrLinkV3 } from './OrLink-c83a51b2.js';
 export { s as OrList } from './OrList-1625c863.js';
 export { s as OrListOfInputs } from './OrListOfInputs-690c57bc.js';
-export { s as OrListV3 } from './OrList-d666e5f5.js';
-export { s as OrListItem } from './OrListItem-63389e98.js';
+export { s as OrListV3 } from './OrList-b3b477bf.js';
+export { s as OrListItem } from './OrListItem-12e21bc6.js';
 export { L as LoaderViews, s as OrLoader } from './OrLoader-d5a5b426.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-5e2f359b.js';
 export { s as OrMenuItemV3 } from './OrMenuItem-61713ccc.js';
@@ -86,7 +84,7 @@ export { s as OrNumberInput } from './OrNumberInput-2433b4b8.js';
 export { s as OrOverflowMenu } from './OrOverflowMenu-8a0210ef.js';
 export { s as OrOverlay } from './OrOverlay-451dce49.js';
 export { s as OrOverlayV3 } from './OrOverlay-372c99bb.js';
-export { s as OrPaginationV3 } from './OrPagination-9fa8d8d0.js';
+export { s as OrPaginationV3 } from './OrPagination-58302dd0.js';
 export { s as OrPassword } from './OrPassword-2b2b3703.js';
 export { s as OrPopoverV3, a as PopoverPlacement, P as PopoverVariant } from './OrPopover-5548205b.js';
 export { i as isPrevented } from './isPrevented-b151a948.js';
@@ -94,19 +92,19 @@ export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './
 export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-77f53097.js';
 export { s as OrRadio } from './OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
-export { s as OrRadioGroupV3 } from './OrRadioGroup-7e7b9d4c.js';
-export { s as OrRadioV3 } from './OrRadio-a4109ee7.js';
-export { s as OrRangeSliderV3 } from './OrRangeSlider-f3b389e0.js';
+export { s as OrRadioGroupV3 } from './OrRadioGroup-a73d1147.js';
+export { s as OrRadioV3 } from './OrRadio-0a8b6e08.js';
+export { s as OrRangeSliderV3 } from './OrRangeSlider-c61cd40b.js';
 export { s as OrRatingV3 } from './OrRating-2abf71bd.js';
-export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from './OrResizeablePanel-5000543d.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-2ef14c64.js';
+export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from './OrResizeablePanel-6b7f5b95.js';
+export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-8a4836d5.js';
 export { s as OrSearch } from './OrSearch-740f931b.js';
-export { s as OrSearchV3 } from './OrSearch-5ba5c899.js';
-export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-c73d768a.js';
+export { s as OrSearchV3 } from './OrSearch-48499c54.js';
+export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-1370c626.js';
 export { s as OrSelect } from './OrSelect-96f3a5ff.js';
-export { s as OrSelectV3 } from './OrSelect-db320020.js';
+export { s as OrSelectV3 } from './OrSelect-9e653c3b.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-4ab42b93.js';
-export { s as OrSidebarV3, S as SidebarPlacement } from './props-7e28f783.js';
+export { s as OrSidebarV3, S as SidebarPlacement } from './props-ad86fe3c.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';
 export { s as OrSkeletonRect } from './OrSkeletonRect-c694574e.js';
 export { s as OrSkeletonText } from './OrSkeletonText-69827192.js';
@@ -115,30 +113,30 @@ export { s as OrSkeletonCircleV3 } from './OrSkeletonCircle-a3eb5f53.js';
 export { s as OrSkeletonRectV3 } from './OrSkeletonRect-d0b8b2cf.js';
 export { s as OrSkeletonTextV3 } from './OrSkeletonText-5e9579c1.js';
 export { s as OrSlider } from './OrSlider-4c386df4.js';
-export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from './OrSlider-9a2a3454.js';
-export { s as OrSortingV3 } from './OrSorting-9ce29870.js';
+export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from './OrSlider-6fa6d657.js';
+export { s as OrSortingV3 } from './OrSorting-5d728ee6.js';
 export { s as OrStatusV3, a as StatusSize, S as StatusVariant } from './OrStatus-a33a7e88.js';
 export { s as OrStepper } from './OrStepper-bd1bf65a.js';
 export { s as OrSwitch } from './OrSwitch-d16f4d7a.js';
-export { s as OrSwitchV3 } from './OrSwitch-c0bafd1d.js';
+export { s as OrSwitchV3 } from './OrSwitch-fd39d3b1.js';
 export { s as OrTab } from './OrTab-d8d4e871.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-c2af7ca3.js';
-export { s as OrTabV3 } from './OrTab-c673fe5f.js';
+export { s as OrTabV3 } from './OrTab-74a9bd5b.js';
 export { s as OrTabs } from './OrTabs-3da3ea89.js';
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-3ce588c7.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-da6d4893.js';
 export { s as OrTag } from './OrTag-cda9ec97.js';
-export { s as OrTagInputV3 } from './OrTagInput-4250ce6c.js';
+export { s as OrTagInputV3 } from './OrTagInput-754c0ea8.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-561b3b80.js';
-export { s as OrTagsV3, T as TagsOverflow } from './OrTags-77accff9.js';
+export { s as OrTagsV3, T as TagsOverflow } from './OrTags-7ea074cc.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from './OrText-ea114c19.js';
 export { s as OrTextarea } from './OrTextarea-900749f9.js';
-export { s as OrTextareaV3 } from './OrTextarea-ec6412ee.js';
+export { s as OrTextareaV3 } from './OrTextarea-1b5e1b4e.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-558732b8.js';
-export { s as OrTimeFormatV3 } from './OrTimeFormat-f6a81c4f.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-144a2f6d.js';
-export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-fa7e7428.js';
+export { s as OrTimeFormatV3 } from './OrTimeFormat-cc0507c1.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-97d51d1f.js';
+export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-89d55e23.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-1e4d24d6.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-5735e929.js';
@@ -146,7 +144,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-5aa9d
 export { s as OrTooltip } from './OrTooltip-59b0b1f0.js';
 export { s as OrTooltipContent } from './OrTooltipContent-c0042844.js';
 export { s as OrTooltipV3 } from './OrTooltip-8666fe26.js';
-export { s as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-679126e5.js';
+export { s as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-e67a801e.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 export { g as getItemByValue } from './getItemByValue-be7353df.js';
 export { g as getItemsByValue } from './getItemsByValue-b08b7d12.js';
@@ -225,10 +223,10 @@ import './codemirrorView-020fe885.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import 'lodash/keyBy';
-import './OrSelectMultipleControl-a6431b22.js';
+import './OrSelectMultipleControl-1c92915a.js';
 import './OrSelectControlInput-1a882f55.js';
 import './OrSelectPlaceholder-81502228.js';
-import './OrSelectSingleControl-a5b9e0b8.js';
+import './OrSelectSingleControl-0ad7e42b.js';
 import 'lodash/range';
 import './styles-ed564e39.js';
 import 'lodash/isNil';

package/dist/esm/v3/{props-7e28f783.js → props-ad86fe3c.js}

@@ -5,7 +5,7 @@ import { u as usePopoverState } from './usePopoverState-5033b9cb.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
-import { R as ResizeablePanelPadding, s as script$1 } from './OrResizeablePanel-5000543d.js';
+import { R as ResizeablePanelPadding, s as script$1 } from './OrResizeablePanel-6b7f5b95.js';
 import { resolveComponent, openBlock, createBlock, createSlots, withCtx, createElementVNode, normalizeClass, createElementBlock, renderSlot, createCommentVNode } from 'vue';
 
 const Sidebar = [
@@ -55,7 +55,7 @@ const SidebarFooter = [
 // Overflow
 'overflow-hidden',
 // Theme
-'theme-border-outline-variant border-t-1', 'dark:theme-border-outline-variant-dark'];
+'theme-border-overline', 'theme-border-1-outline-variant', 'dark:theme-border-1-outline-variant-dark'];
 const SidebarFooterPaddings = {
   [ResizeablePanelPadding.L]: [
   // Box

package/dist/esm/v3/types/index.d.ts

@@ -1,9 +1,7 @@
-export * from './DataModel';
 export * from './DateFormat';
 export * from './FilterFunction';
 export * from './Group';
 export * from './GroupFunction';
-export * from './Id';
 export * from './Item';
 export * from './Locale';
 export * from './ModelValue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "10.4.5-beta.4373.0",
+  "version": "10.5.0-beta.4375.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -40,26 +40,25 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.4.2",
-    "@onereach/styles": "^6.9.2-beta.4373.0",
+    "@onereach/styles": "^6.9.1",
     "@splidejs/splide": "4.0.6",
-    "@tiptap/core": "2.0.3",
-    "@tiptap/extension-blockquote": "2.0.3",
-    "@tiptap/extension-bold": "2.0.3",
-    "@tiptap/extension-bullet-list": "2.0.3",
-    "@tiptap/extension-code-block": "2.0.3",
-    "@tiptap/extension-hard-break": "2.0.3",
-    "@tiptap/extension-heading": "2.0.3",
-    "@tiptap/extension-highlight": "2.0.3",
-    "@tiptap/extension-horizontal-rule": "2.0.3",
-    "@tiptap/extension-italic": "2.0.3",
-    "@tiptap/extension-link": "2.0.3",
-    "@tiptap/extension-list-item": "2.0.3",
-    "@tiptap/extension-ordered-list": "2.0.3",
-    "@tiptap/extension-paragraph": "2.0.3",
-    "@tiptap/extension-placeholder": "2.0.3",
-    "@tiptap/extension-strike": "2.0.3",
-    "@tiptap/extension-underline": "2.0.3",
-    "@tiptap/starter-kit": "2.0.3",
+    "@tiptap/core": "2.1.11",
+    "@tiptap/extension-blockquote": "2.1.11",
+    "@tiptap/extension-bold": "2.1.11",
+    "@tiptap/extension-bullet-list": "2.1.11",
+    "@tiptap/extension-code-block": "2.1.11",
+    "@tiptap/extension-hard-break": "2.1.11",
+    "@tiptap/extension-heading": "2.1.11",
+    "@tiptap/extension-highlight": "2.1.11",
+    "@tiptap/extension-italic": "2.1.11",
+    "@tiptap/extension-link": "2.1.11",
+    "@tiptap/extension-list-item": "2.1.11",
+    "@tiptap/extension-ordered-list": "2.1.11",
+    "@tiptap/extension-paragraph": "2.1.11",
+    "@tiptap/extension-placeholder": "2.1.11",
+    "@tiptap/extension-strike": "2.1.11",
+    "@tiptap/extension-underline": "2.1.11",
+    "@tiptap/starter-kit": "2.1.11",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",
     "@types/uuid": "8.3.1",

package/src/components/index.ts

@@ -23,7 +23,6 @@ export * from './or-combined-input-v3';
 export * from './or-confirm';
 export * from './or-confirm-v3';
 export * from './or-context-menu-v3';
-export * from './or-data-grid-v3';
 export * from './or-date-format-v3';
 export * from './or-date-picker-v3';
 export * from './or-date-range-picker-v3';

package/src/components/or-autocomplete-v3/OrAutocomplete.vue

@@ -194,7 +194,7 @@ export default defineComponent({
 
     items: {
       type: Array as PropType<AutocompleteValue[]>,
-      default: () => [],
+      default: [] as AutocompleteValue[],
     },
 
     multiple: {
@@ -334,10 +334,10 @@ export default defineComponent({
 
     // State
     const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const searchText = ref<string>();
+    const searchText = ref('');
 
     const filteredItems = computedAsync(async () => {
-      return searchText.value
+      return searchText.value.length > 0
         ? (await props.searchFunction(searchText.value, props.items))
           .filter((item) => !model.value?.includes(item))
         : [];
@@ -370,7 +370,7 @@ export default defineComponent({
     }
 
     function clear(): void {
-      searchText.value = undefined;
+      searchText.value = '';
 
       (tagInput.value?.clear as unknown as () => void)?.();
     }

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

@@ -35,8 +35,8 @@ export const AutocompleteDropdown: string[] = [
   'theme-background-default',
   'dark:theme-background-default-dark',
 
-  'theme-border-outline border-1',
-  'dark:theme-border-outline-dark',
+  'theme-border-1-outline',
+  'dark:theme-border-1-outline-dark',
 ];
 
 export const AutocompleteDropdownDefault: string[] = [

package/src/components/or-button-group-v3/styles.ts

@@ -19,10 +19,10 @@ export const ButtonGroupVariants: Record<ButtonVariant, string[]> = {
     // Position (children)
     'children:relative',
 
-    // Position (children:active)
+    // Position (children/active)
     'active:children:z-10',
 
-    // Spacing (children)
+    // Spacing
     '[&:not(:first-child)]:children:-ml-[1px]',
   ],
 

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

@@ -81,12 +81,12 @@ export const ButtonColors: Record<`${ButtonColor}-${ButtonVariant}`, string[]> =
     'theme-preset-3-primary',
     'dark:theme-preset-3-primary-dark',
 
-    'theme-border-outline border-1',
-    'dark:theme-border-outline-dark',
+    'theme-border-1-outline',
+    'dark:theme-border-1-outline-dark',
 
     // Theme (active)
-    'active:theme-border-primary active:border-1',
-    'dark:active:theme-border-primary-dark',
+    'active:theme-border-1-primary',
+    'dark:active:theme-border-1-primary-dark',
   ],
 
   'danger-outlined': [
@@ -94,8 +94,8 @@ export const ButtonColors: Record<`${ButtonColor}-${ButtonVariant}`, string[]> =
     'theme-preset-3-error',
     'dark:theme-preset-3-error-dark',
 
-    'theme-border-error border-1',
-    'dark:theme-border-error-dark',
+    'theme-border-1-error',
+    'dark:theme-border-1-error-dark',
   ],
 
   'inherit-outlined': [],

package/src/components/or-card-collection-v3/OrCardCollection.vue

@@ -121,7 +121,7 @@ export default defineComponent({
   props: {
     items: {
       type: Array as PropType<CardCollectionItem[]>,
-      default: () => [],
+      default: [] as CardCollectionItem[],
     },
 
     view: {

package/src/components/or-card-collection-v3/partials/OrCardCollectionView.vue2.vue

@@ -28,7 +28,7 @@ export default defineComponent({
   props: {
     items: {
       type: Array as PropType<CardCollectionItem[]>,
-      default: () => [],
+      default: [] as CardCollectionItem[],
     },
 
     mode: {

package/src/components/or-card-collection-v3/partials/OrCardCollectionView.vue3.vue

@@ -29,7 +29,7 @@ export default defineComponent({
   props: {
     items: {
       type: Array as PropType<CardCollectionItem[]>,
-      default: () => [],
+      default: [] as CardCollectionItem[],
     },
 
     mode: {

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

@@ -30,12 +30,12 @@ export const CheckboxControl: string[] = [
   'theme-background-default',
   'dark:theme-background-default-dark',
 
-  'theme-border-outline border-1',
-  'dark:theme-border-outline-dark',
+  'theme-border-1-outline',
+  'dark:theme-border-1-outline-dark',
 
   // Theme (focus)
-  'focus-visible:theme-outline-primary focus-visible:outline-2',
-  'dark:focus-visible:theme-outline-primary-dark',
+  'focus-visible:theme-outline-2-primary',
+  'dark:focus-visible:theme-outline-2-primary-dark',
 
   // Theme (checked)
   'checked:theme-preset-1-primary',
@@ -47,9 +47,9 @@ export const CheckboxControl: string[] = [
 ];
 
 export const CheckboxControlHandle: string[] = [
-  // Content (checked / children)
+  // Content (children/checked)
   'after:checked:content-checkbox-checked',
 
-  // Content (indeterminate / children)
+  // Content (children/indeterminate)
   'after:indeterminate:content-checkbox-indeterminate',
 ];

package/src/components/or-date-range-picker-v3/OrDateRangePicker.vue

@@ -344,7 +344,7 @@ export default defineComponent({
       get: () => draft.value?.[0],
 
       set: (value) => {
-        draft.value = [value, draft.value?.[1]];
+        draft.value = [value ?? null, draft.value?.[1] ?? null];
       },
     });
 
@@ -352,14 +352,16 @@ export default defineComponent({
       get: () => draft.value?.[1],
 
       set: (value) => {
-        draft.value = [draft.value?.[0], value];
+        draft.value = [draft.value?.[0] ?? null, value ?? null];
       },
     });
 
     const activeControl = ref<'from' | 'to'>('from');
 
     const activeControlDraft = computed({
-      get: () => activeControl.value === 'from' ? draftFrom.value : draftTo.value,
+      get: () => {
+        return activeControl.value === 'from' ? draftFrom.value : draftTo.value;
+      },
 
       set: (value) => {
         if (activeControl.value === 'from') {
@@ -384,7 +386,7 @@ export default defineComponent({
     }
 
     function reset(): void {
-      draft.value = model.value ?? [undefined, undefined];
+      draft.value = model.value ?? [null, null];
     }
 
     function toggleControl(): void {

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-date-control/styles.ts

@@ -6,12 +6,16 @@ export const DateTimePickerDateControl: string[] = [
   'interactivity-click',
 
   // Theme (focus)
-  'focus-visible:theme-border-inherit focus-visible:border-b-2',
-  'dark:focus-visible:theme-border-inherit-dark',
+  'focus-visible:theme-border-underline',
+
+  'focus-visible:theme-border-2-inherit',
+  'dark:focus-visible:theme-border-2-inherit-dark',
 
   // Theme (selected)
-  'selected:theme-border-inherit selected:border-b-2',
-  'dark:selected:theme-border-inherit-dark',
+  'selected:theme-border-underline',
+
+  'selected:theme-border-2-inherit',
+  'dark:selected:theme-border-2-inherit-dark',
 ];
 
 export const DateTimePickerDateControlPlaceholder: string[] = [

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-date-select/styles.ts

@@ -64,8 +64,8 @@ export const DateTimePickerDateSelectButtonGroupCurrentDateItem: string[] = [
   'theme-foreground-primary',
   'dark:theme-foreground-primary-dark',
 
-  'theme-outline-primary outline-1',
-  'dark:theme-outline-primary-dark',
+  'theme-outline-1-primary',
+  'dark:theme-outline-1-primary-dark',
 ];
 
 export const DateTimePickerDateSelectButtonGroupInRangeDateItem: string[] = [

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-popover-footer/styles.ts

@@ -12,6 +12,8 @@ export const DateTimePickerPopoverFooter: string[] = [
   'gap-md md:gap-sm',
 
   // Theme
-  'theme-border-outline-variant border-t-1',
-  'dark:theme-border-outline-variant-dark',
+  'theme-border-overline',
+
+  'theme-border-1-outline-variant',
+  'dark:theme-border-1-outline-variant-dark',
 ];

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-control/styles.ts

@@ -6,12 +6,16 @@ export const DateTimePickerTimeControl: string[] = [
   'interactivity-click',
 
   // Theme (focus)
-  'focus-visible:theme-border-inherit focus-visible:border-b-2',
-  'dark:focus-visible:theme-border-inherit-dark',
+  'focus-visible:theme-border-underline',
+
+  'focus-visible:theme-border-2-inherit',
+  'dark:focus-visible:theme-border-2-inherit-dark',
 
   // Theme (selected)
-  'selected:theme-border-inherit selected:border-b-2',
-  'dark:selected:theme-border-inherit-dark',
+  'selected:theme-border-underline',
+
+  'selected:theme-border-2-inherit',
+  'dark:selected:theme-border-2-inherit-dark',
 ];
 
 export const DateTimePickerTimeControlPlaceholder: string[] = [

package/src/components/or-drop-area-v3/styles.ts

@@ -17,8 +17,10 @@ export const DropArea: string[] = [
   'theme-background-primary-translucent-1',
   'dark:theme-background-primary-translucent-1-dark',
 
-  'theme-border-primary border-1 !border-dashed',
-  'dark:theme-border-primary-dark',
+  'theme-border-1-primary',
+  'dark:theme-border-1-primary-dark',
+
+  '!border-dashed',
 
   // Theme (hover)
   'hover:theme-background-primary-translucent-2',
@@ -28,10 +30,12 @@ export const DropArea: string[] = [
   'invalid:theme-background-error-translucent-1',
   'dark:invalid:theme-background-error-translucent-1-dark',
 
-  'invalid:theme-border-error invalid:border-1 invalid:!border-dashed',
-  'dark:invalid:theme-border-error-dark',
+  'invalid:theme-border-1-error',
+  'dark:invalid:theme-border-1-error-dark',
+
+  'invalid:!border-dashed',
 
-  // Theme (invalid + hover)
+  // Theme (invalid/hover)
   'hover:invalid:theme-background-error-translucent-2',
   'dark:hover:invalid:theme-background-error-translucent-2-dark',
 ];

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

@@ -10,8 +10,10 @@ export const EditorTabsHeader: string[] = [
   'layout-row',
 
   // Theme
-  'theme-border-outline-variant border-b-1',
-  'dark:theme-border-outline-variant-dark',
+  'theme-border-underline',
+
+  'theme-border-1-outline-variant',
+  'dark:theme-border-1-outline-variant-dark',
 
   'theme-divider-outline-variant',
   'dark:theme-divider-outline-variant-dark',