@db-ux/v-core-components 4.14.0 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @db-ux/v-core-components
 
+## 5.0.0
+
+We're providing a [migration guide for all 4.x to 5.0.0](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v4.x.x-to-v5.0.0.md) changes.
+
+### Major Changes
+
+- refactor: DBDrawer with breaking changes - [see commit 9189f6c](https://github.com/db-ux-design-system/core-web/commit/9189f6c24cd3a64f072c2f60f8c8127d1ed68c55):
+
+        - The `DBDrawer` component now requires a `DBDrawerHeader` component to be passed in the `header` slot.
+        - The `spacing` property has been removed from `DBDrawer`.
+        - The default `direction` has changed from `right` to `to-left`.
+        - The `width` property has been renamed to `containerSize`.
+        - The `direction` values have been renamed from `right`/`left` to `to-left`/`to-right`.
+
+- refactor: remove default `margin-inline` from `[data-icon]` pseudo-elements in favor of `gap` - [see commit 635f4b7](https://github.com/db-ux-design-system/core-web/commit/635f4b7ff6ce2aa9341932cb0b8a9c8657ed1ade)
+
+- refactor: rework DBTabs and DBTabItem - [see commit c50e522](https://github.com/db-ux-design-system/core-web/commit/c50e5221a4c6f3357ff52451291bdc5772267178):
+
+        - **Breaking:** DBTabItem now renders a native `button` (`role="tab"`) instead of a radio `input`.
+        - **Breaking:** Removed `checked`, `noText` and `name` from DBTabItem.
+        - **Breaking:** Renamed DBTabs props `onTabSelect` → `onIndexChange`, `alignment` → `tabItemAlignment`, `width` → `tabItemWidth`.
+        - **Breaking:** Deep linking derives the tab id from the `id` prop instead of `label`.
+        - Added truncation tooltip for overflowing tab labels and fixed vertical layout, trailing icon and tooltip placement.
+
+### Patch Changes
+
+- fix: remove dead `z-index` and `position: relative` from table-row interactive children - [see commit 7edb77b](https://github.com/db-ux-design-system/core-web/commit/7edb77bb9f90d4a79f238ebab362074d12f02f0f)
+
 ## 4.14.0
 
 ### Minor Changes

package/agent/Drawer.md

@@ -1,11 +1,3 @@
-## CSS Properties
-
-| CSS Variable | Default | CSS Property | Description | Example |
-| --- | --- | --- | --- | --- |
-| `--db-drawer-max-height` | `calc(100% - #{variables.$db-spacing-fixed-xl})` | max-block-size | Sets the maximum height of the drawer | — |
-| `--db-drawer-header-padding-block-end` | `#{map.get($spacing, "block")}` | padding-block-end | Controls the bottom padding inside the drawer header | — |
-| `--db-drawer-content-padding-inline` | `#{map.get($spacing, "inline")}` | padding-inline | Controls left/right padding inside the drawer content area | — |
-| `--db-drawer-max-width` | `calc(100% - #{variables.$db-spacing-fixed-xl})` | max-inline-size | Sets the maximum width of the drawer and some default values for the drawer | <pre>css - Wide drawer<br>.db-drawer-wide {<br>--db-drawer-max-width: 800px;<br>}<br>&lt;div class="db-drawer db-drawer-wide"&gt;<br>&lt;!-- wide drawer --&gt;<br>&lt;/div&gt;<br></pre> |
 
 
 # Drawer Examples (vue)

package/agent/TabItem.md

@@ -19,8 +19,8 @@
   </DBTabItem>
   <h2>5. Label Property</h2>
   <DBTabItem label="Tab Item Label">Tab Item with Label</DBTabItem>
-  <h2>6. No Text</h2>
-  <DBTabItem icon="user" :noText="true"></DBTabItem>
+  <h2>6. Tab with Icon and Label</h2>
+  <DBTabItem label="User Profile" icon="user" :showIcon="true"></DBTabItem>
 </template>
 
 <script setup lang="ts">

package/agent/Tabs.md

@@ -8,41 +8,44 @@
   <h2>1. Default Tabs</h2>
   <DBTabs
     ><DBTabList
-      ><DBTabItem>Tab 1</DBTabItem><DBTabItem>Tab 2</DBTabItem
-      ><DBTabItem>Tab 3</DBTabItem></DBTabList
-    ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
-    ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
+      ><DBTabItem>Def Tab 1</DBTabItem><DBTabItem>Def Tab 2</DBTabItem
+      ><DBTabItem>Def Tab 3</DBTabItem></DBTabList
+    ><DBTabPanel>Def Panel 1</DBTabPanel><DBTabPanel>Def Panel 2</DBTabPanel
+    ><DBTabPanel>Def Panel 3</DBTabPanel></DBTabs
   >
   <h2>2. Behavior Variants</h2>
   <DBTabs behavior="scrollbar"
     ><DBTabList
-      ><DBTabItem>Tab 1</DBTabItem><DBTabItem>Tab 2</DBTabItem
-      ><DBTabItem>Tab 3</DBTabItem></DBTabList
-    ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
-    ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
+      ><DBTabItem>Scroll Tab 1</DBTabItem><DBTabItem>Scroll Tab 2</DBTabItem
+      ><DBTabItem>Scroll Tab 3</DBTabItem></DBTabList
+    ><DBTabPanel>Scroll Panel 1</DBTabPanel
+    ><DBTabPanel>Scroll Panel 2</DBTabPanel
+    ><DBTabPanel>Scroll Panel 3</DBTabPanel></DBTabs
   >
   <DBTabs behavior="arrows"
     ><DBTabList
-      ><DBTabItem>Tab 1</DBTabItem><DBTabItem>Tab 2</DBTabItem
-      ><DBTabItem>Tab 3</DBTabItem></DBTabList
-    ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
-    ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
+      ><DBTabItem>Arrow Tab 1</DBTabItem><DBTabItem>Arrow Tab 2</DBTabItem
+      ><DBTabItem>Arrow Tab 3</DBTabItem></DBTabList
+    ><DBTabPanel>Arrow Panel 1</DBTabPanel><DBTabPanel>Arrow Panel 2</DBTabPanel
+    ><DBTabPanel>Arrow Panel 3</DBTabPanel></DBTabs
   >
   <h2>3. Initial Selected Index</h2>
   <DBTabs :initialSelectedIndex="1"
     ><DBTabList
-      ><DBTabItem>Tab 1</DBTabItem><DBTabItem>Tab 2</DBTabItem
-      ><DBTabItem>Tab 3</DBTabItem></DBTabList
-    ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
-    ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
+      ><DBTabItem>InitIdx Tab 1</DBTabItem><DBTabItem>InitIdx Tab 2</DBTabItem
+      ><DBTabItem>InitIdx Tab 3</DBTabItem></DBTabList
+    ><DBTabPanel>InitIdx Panel 1</DBTabPanel
+    ><DBTabPanel>InitIdx Panel 2</DBTabPanel
+    ><DBTabPanel>InitIdx Panel 3</DBTabPanel></DBTabs
   >
   <h2>4. Initial Selected Mode</h2>
   <DBTabs initialSelectedMode="manually"
     ><DBTabList
-      ><DBTabItem>Tab 1</DBTabItem><DBTabItem>Tab 2</DBTabItem
-      ><DBTabItem>Tab 3</DBTabItem></DBTabList
-    ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
-    ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
+      ><DBTabItem>Manually Tab 1</DBTabItem><DBTabItem>Manually Tab 2</DBTabItem
+      ><DBTabItem>Manually Tab 3</DBTabItem></DBTabList
+    ><DBTabPanel>Manually Panel 1</DBTabPanel
+    ><DBTabPanel>Manually Panel 2</DBTabPanel
+    ><DBTabPanel>Manually Panel 3</DBTabPanel></DBTabs
   >
 </template>
 

package/agent/_instructions.md

@@ -1,5 +1,4 @@
 - Use "@db-ux/v-core-components" as import for components:
-  - use for `DBDrawer` or `Drawer` the file __agent-path__/agent/Drawer.md
   - use for `DBTooltip` or `Tooltip` the file __agent-path__/agent/Tooltip.md
   - use for `DBTextarea` or `Textarea` the file __agent-path__/agent/Textarea.md
   - use for `DBTag` or `Tag` the file __agent-path__/agent/Tag.md
@@ -20,6 +19,7 @@
   - use for `DBInfotext` or `Infotext` the file __agent-path__/agent/Infotext.md
   - use for `DBIcon` or `Icon` the file __agent-path__/agent/Icon.md
   - use for `DBHeader` or `Header` the file __agent-path__/agent/Header.md
+  - use for `DBDrawer` or `Drawer` the file __agent-path__/agent/Drawer.md
   - use for `DBDivider` or `Divider` the file __agent-path__/agent/Divider.md
   - use for `DBCustomSelect` or `CustomSelect` the file __agent-path__/agent/CustomSelect.md
   - use for `DBCheckbox` or `Checkbox` the file __agent-path__/agent/Checkbox.md

package/dist/components/drawer/drawer.vue.d.ts

@@ -1,9 +1,11 @@
 import { DBDrawerProps } from "./model.js";
-declare var __VLS_1: {}, __VLS_9: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = {} & {
-    'drawer-header'?: (props: typeof __VLS_1) => any;
+    header?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_9) => any;
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    footer?: (props: typeof __VLS_5) => any;
 };
 declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBDrawerProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<DBDrawerProps> & Readonly<{}>, {
     id: string;
@@ -12,15 +14,13 @@ declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBDrawerPr
     propOverrides: import("../../shared/model.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
     open: boolean | string;
     variant: import("./model.js", { with: { "resolution-mode": "import" } }).DrawerVariantType;
-    width: import("../../shared/model.js", { with: { "resolution-mode": "import" } }).WidthType | string;
-    spacing: import("../../shared/model.js", { with: { "resolution-mode": "import" } }).SpacingType | string;
     backdrop: import("./model.js", { with: { "resolution-mode": "import" } }).DrawerBackdropType;
     direction: import("./model.js", { with: { "resolution-mode": "import" } }).DrawerDirectionType;
+    showSpacing: boolean | string;
     rounded: boolean | string;
     position: import("./model.js", { with: { "resolution-mode": "import" } }).DrawerPositionType;
+    containerSize: import("./model.js", { with: { "resolution-mode": "import" } }).DrawerContainerSizeType;
     onClose: (event?: KeyboardEvent | MouseEvent | undefined) => void;
-    closeButtonId: string;
-    closeButtonText: string;
 }, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/drawer/model.d.ts

@@ -1,12 +1,14 @@
-import type { ClickEvent, CloseEventProps, CloseEventState, GeneralKeyboardEvent, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, SpacingProps, WidthProps } from '../../shared/model.js';
+import type { ClickEvent, CloseEventProps, CloseEventState, GeneralKeyboardEvent, GlobalProps, GlobalState, InitializedState } from '../../shared/model.js';
 export declare const DrawerBackdropList: readonly ["none", "strong", "weak", "invisible"];
 export type DrawerBackdropType = (typeof DrawerBackdropList)[number];
-export declare const DrawerDirectionList: readonly ["left", "right", "up", "down"];
+export declare const DrawerDirectionList: readonly ["to-left", "to-right", "up", "down"];
 export type DrawerDirectionType = (typeof DrawerDirectionList)[number];
 export declare const DrawerVariantList: readonly ["modal", "inside"];
 export type DrawerVariantType = (typeof DrawerVariantList)[number];
 export declare const DrawerPositionList: readonly ["fixed", "absolute"];
 export type DrawerPositionType = (typeof DrawerPositionList)[number];
+export declare const DrawerContainerSizeList: readonly ["small", "medium", "large", "full"];
+export type DrawerContainerSizeType = (typeof DrawerContainerSizeList)[number];
 export type DBDrawerDefaultProps = {
     /**
      * The backdrop attribute changes the opacity of the backdrop.
@@ -15,13 +17,21 @@ export type DBDrawerDefaultProps = {
     backdrop?: DrawerBackdropType;
     /**
      * The direction attribute changes the position & animation of the drawer.
-     * E.g. "left" slides from left screen border to the right.
+     * E.g. "to-left" slides from right screen border to the left.
      */
     direction?: DrawerDirectionType;
     /**
      * Slot for changing the header of the drawer.
      */
-    drawerHeader?: any;
+    header?: any;
+    /**
+     * Slot for changing the footer of the drawer.
+     */
+    footer?: any;
+    /**
+     * Shows a spacing between viewport frame and drawer-content to provide enough space for the backdrop
+     */
+    showSpacing?: boolean | string;
     /**
      * The open attribute opens or closes the drawer based on the state.
      */
@@ -42,12 +52,17 @@ export type DBDrawerDefaultProps = {
      * - `absolute`: Renders with `show()`, acting as a simple overlay **without** a focus trap.
      */
     position?: DrawerPositionType;
+    /**
+     * Change the size of the drawer container.
+     */
+    containerSize?: DrawerContainerSizeType;
 };
-export type DBDrawerProps = DBDrawerDefaultProps & GlobalProps & CloseEventProps<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> & InnerCloseButtonProps & WidthProps & SpacingProps;
+export type DBDrawerProps = DBDrawerDefaultProps & GlobalProps & CloseEventProps<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>>;
 export type DBDrawerDefaultState = {
     handleDialogOpen: () => void;
     isNotModal: () => boolean;
     handleBackdropPointerDown: (event: any) => void;
     backdropPointerDown: boolean;
+    _closeTimeoutId?: number;
 };
 export type DBDrawerState = DBDrawerDefaultState & GlobalState & CloseEventState<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> & InitializedState;

package/dist/components/drawer-footer/drawer-footer.vue.d.ts

@@ -0,0 +1,18 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("@vue/runtime-core").DefineComponent<import("../../index.js", { with: { "resolution-mode": "import" } }).GlobalProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("../../index.js", { with: { "resolution-mode": "import" } }).GlobalProps> & Readonly<{}>, {
+    id: string;
+    children: any;
+    className: string;
+    propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/drawer-footer/index.d.ts

@@ -0,0 +1 @@
+export { default as DBDrawerFooter } from './drawer-footer.vue';

package/dist/components/drawer-footer/model.d.ts

@@ -0,0 +1,5 @@
+import type { GlobalProps, GlobalState } from '../../shared/model.js';
+export type DBDrawerFooterDefaultProps = {};
+export type DBDrawerFooterProps = DBDrawerFooterDefaultProps & GlobalProps;
+export type DBDrawerFooterDefaultState = {};
+export type DBDrawerFooterState = DBDrawerFooterDefaultState & GlobalState;

package/dist/components/drawer-header/drawer-header.vue.d.ts

@@ -0,0 +1,26 @@
+import { DBDrawerHeaderProps } from "./model.js";
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    'start-slot'?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    'end-slot'?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBDrawerHeaderProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<DBDrawerHeaderProps> & Readonly<{}>, {
+    id: string;
+    children: any;
+    className: string;
+    propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
+    text: string;
+    closeButtonId: string;
+    closeButtonText: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/drawer-header/index.d.ts

@@ -0,0 +1 @@
+export { default as DBDrawerHeader } from './drawer-header.vue';

package/dist/components/drawer-header/model.d.ts

@@ -0,0 +1,9 @@
+import { EndSlotProps, GlobalProps, GlobalState, InnerCloseButtonProps, StartSlotProps, TextProps } from '../../shared/model.js';
+export type DBDrawerHeaderDefaultProps = {};
+export type DBDrawerHeaderProps = DBDrawerHeaderDefaultProps & InnerCloseButtonProps & TextProps & GlobalProps & StartSlotProps & EndSlotProps;
+export type DBDrawerHeaderDefaultState = {
+    _headingId: string;
+    setAriaLabelledBy: () => void;
+    removeAriaLabelledBy: () => void;
+};
+export type DBDrawerHeaderState = DBDrawerHeaderDefaultState & GlobalState;

package/dist/components/header/header.vue.d.ts

@@ -1,5 +1,5 @@
 import { DBHeaderProps } from "./model.js";
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_15: {}, __VLS_23: {}, __VLS_25: {}, __VLS_27: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_15: {}, __VLS_23: {}, __VLS_25: {}, __VLS_40: {};
 type __VLS_Slots = {} & {
     'meta-navigation'?: (props: typeof __VLS_1) => any;
 } & {
@@ -15,7 +15,7 @@ type __VLS_Slots = {} & {
 } & {
     'meta-navigation'?: (props: typeof __VLS_25) => any;
 } & {
-    'secondary-action'?: (props: typeof __VLS_27) => any;
+    'secondary-action'?: (props: typeof __VLS_40) => any;
 };
 declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBHeaderProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<DBHeaderProps> & Readonly<{}>, {
     id: string;
@@ -28,6 +28,7 @@ declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBHeaderPr
     closeButtonText: string;
     drawerOpen: boolean | string;
     forceMobile: boolean | string;
+    drawerHeaderText: string;
     burgerMenuLabel: string;
 }, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/header/model.d.ts

@@ -33,7 +33,11 @@ export type DBHeaderDefaultProps = {
      */
     forceMobile?: boolean | string;
     /**
-     * This attribute sets the label for the burger menu button for mobile headers.
+     * Text to pass in a headline for the drawer header.
+     */
+    drawerHeaderText?: string;
+    /**
+     * Sets the accessible label for the burger menu button of the mobile control panel.
      */
     burgerMenuLabel?: string;
 };

package/dist/components/stack/model.d.ts

@@ -5,7 +5,7 @@ export declare const StackDirectionList: readonly ["row", "column"];
 export type StackDirectionType = (typeof StackDirectionList)[number];
 export declare const StackAlignmentList: readonly ["stretch", "start", "end", "center"];
 export type StackAlignmentType = (typeof StackAlignmentList)[number];
-export declare const StackJustifyContentList: readonly ["space-between", "start", "end", "center"];
+export declare const StackJustifyContentList: readonly ["space-between", "start", "center", "end"];
 export type StackJustifyContentType = (typeof StackJustifyContentList)[number];
 export type DBStackDefaultProps = {
     /**

package/dist/components/tab-item/model.d.ts

@@ -1,9 +1,10 @@
-import type { ActiveProps, ChangeEventProps, ChangeEventState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InitializedState, NameProps, NameState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps } from '../../shared/model.js';
+import { ActiveProps, EndSlotProps, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InitializedState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, WidthProps } from '../../shared/model.js';
+/**
+ * DBTabItem is designed to be used exclusively inside a DBTabs container.
+ * The parent DBTabs manages selection state (aria-selected, tabindex) via direct
+ * DOM attribute manipulation. DBTabItem itself is purely presentational.
+ */
 export type DBTabItemDefaultProps = {
-    /**
-     * To control the component
-     */
-    checked?: boolean | string;
     /**
      * The disabled attribute can be set to keep a user from clicking on the tab-item.
      */
@@ -13,15 +14,25 @@ export type DBTabItemDefaultProps = {
      */
     label?: string;
     /**
-     * Define the text next to the icon specified via the icon Property to get hidden.
+     * Set the tabIndex manually (internal use for roving tabindex).
+     */
+    tabIndex?: number | string;
+    /**
+     * Semantic value of this tab item. When set, onIndexChange will emit this value
+     * (via the onValueChange event) instead of only the numeric index.
+     * Useful for form binding (e.g. Angular FormControl, React useState).
      */
-    noText?: boolean | string;
+    value?: string;
 };
-export type DBTabItemProps = GlobalProps & DBTabItemDefaultProps & IconProps & IconTrailingProps & IconLeadingProps & ShowIconLeadingProps & ShowIconTrailingProps & ActiveProps & ChangeEventProps<HTMLInputElement> & ShowIconProps & NameProps;
+export type DBTabItemProps = DBTabItemDefaultProps & Omit<GlobalProps, 'id' | 'propOverrides'> & IconProps & ShowIconProps & IconTrailingProps & IconLeadingProps & ShowIconTrailingProps & ShowIconLeadingProps & ActiveProps & WidthProps & EndSlotProps;
 export type DBTabItemDefaultState = {
-    _selected: boolean;
-    _listenerAdded: boolean;
-    boundSetSelectedOnChange?: (event: any) => void;
-    setSelectedOnChange: (event: any) => void;
+    _resizeObserver: ResizeObserver | null | undefined;
+    _mutationObserver: MutationObserver | null | undefined;
+    _setupRafId: number | null;
+    _unmounted: boolean;
+    isTruncated: boolean;
+    _cleanupTooltipAria: () => void;
+    checkTruncation: () => void;
+    tooltipText: string;
 };
-export type DBTabItemState = DBTabItemDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & InitializedState & NameState;
+export type DBTabItemState = DBTabItemDefaultState & GlobalState & InitializedState;

package/dist/components/tab-item/tab-item.vue.d.ts

@@ -1,29 +1,22 @@
 import type { DBTabItemProps } from "./model.js";
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    'end-slot'?: (props: typeof __VLS_3) => any;
 };
-declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBTabItemProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
-    "update:checked": (...args: any[]) => void;
-}, string, import("@vue/runtime-core").PublicProps, Readonly<DBTabItemProps> & Readonly<{
-    "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
-}>, {
-    id: string;
+declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBTabItemProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<DBTabItemProps> & Readonly<{}>, {
     children: any;
     className: string;
-    propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
-    name: string;
     label: string;
+    value: string;
     disabled: boolean | string;
-    onChange: (event: import("../../index.js", { with: { "resolution-mode": "import" } }).ChangeEvent<HTMLInputElement>) => void;
     icon: import("@db-ux/core-foundations", { with: { "resolution-mode": "import" } }).IconTypes;
     showIcon: boolean | string;
     showIconLeading: boolean | string;
     showIconTrailing: boolean | string;
     iconLeading: import("@db-ux/core-foundations", { with: { "resolution-mode": "import" } }).IconTypes;
     iconTrailing: import("@db-ux/core-foundations", { with: { "resolution-mode": "import" } }).IconTypes;
-    noText: boolean | string;
-    checked: boolean | string;
     active: boolean | string;
 }, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/tab-list/model.d.ts

@@ -1,5 +1,5 @@
-import type { GlobalProps } from '../../shared/model.js';
-export type DBTabListDefaultProps = {};
-export type DBTabListProps = DBTabListDefaultProps & GlobalProps;
-export type DBTabListDefaultState = {};
-export type DBTabListState = DBTabListDefaultState;
+import type { GlobalProps, GlobalState, OrientationProps } from '../../shared/model.js';
+export type DBTabListProps = GlobalProps & OrientationProps;
+export interface DBTabListState extends GlobalState {
+    _id?: string;
+}

package/dist/components/tab-list/tab-list.vue.d.ts

@@ -1,12 +1,14 @@
+import { DBTabListProps } from "./model.js";
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("@vue/runtime-core").DefineComponent<import("../../index.js", { with: { "resolution-mode": "import" } }).GlobalProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("../../index.js", { with: { "resolution-mode": "import" } }).GlobalProps> & Readonly<{}>, {
+declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBTabListProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<DBTabListProps> & Readonly<{}>, {
     id: string;
     children: any;
     className: string;
     propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
+    orientation: import("../../index.js", { with: { "resolution-mode": "import" } }).OrientationType;
 }, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/tab-panel/model.d.ts

@@ -1,10 +1,12 @@
-import type { GlobalProps, GlobalState } from '../../shared/model.js';
+import type { GlobalProps } from '../../shared/model.js';
 export type DBTabPanelDefaultProps = {
     /**
      * The content if you don't want to use children.
      */
     content?: string;
+    /**
+     * If the panel is hidden.
+     */
+    hidden?: boolean;
 };
-export type DBTabPanelProps = DBTabPanelDefaultProps & GlobalProps;
-export type DBTabPanelDefaultState = {};
-export type DBTabPanelState = DBTabPanelDefaultState & GlobalState;
+export type DBTabPanelProps = DBTabPanelDefaultProps & Omit<GlobalProps, 'id' | 'propOverrides'>;

package/dist/components/tab-panel/tab-panel.vue.d.ts

@@ -3,13 +3,7 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBTabPanelProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<DBTabPanelProps> & Readonly<{}>, {
-    id: string;
-    children: any;
-    className: string;
-    propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
-    content: string;
-}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBTabPanelProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<DBTabPanelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;