@db-ux/v-core-components 4.14.0-shell-52d18db → 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/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 `DBShellSubNavigation` or `ShellSubNavigation` the file __agent-path__/agent/ShellSubNavigation.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
@@ -7,7 +6,6 @@
   - use for `DBTabItem` or `TabItem` the file __agent-path__/agent/TabItem.md
   - use for `DBSwitch` or `Switch` the file __agent-path__/agent/Switch.md
   - use for `DBStack` or `Stack` the file __agent-path__/agent/Stack.md
-  - use for `DBShell` or `Shell` the file __agent-path__/agent/Shell.md
   - use for `DBSelect` or `Select` the file __agent-path__/agent/Select.md
   - use for `DBSection` or `Section` the file __agent-path__/agent/Section.md
   - use for `DBRadio` or `Radio` the file __agent-path__/agent/Radio.md
@@ -24,14 +22,6 @@
   - 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 `DBControlPanelSecondaryActions` or `ControlPanelSecondaryActions` the file __agent-path__/agent/ControlPanelSecondaryActions.md
-  - use for `DBControlPanelPrimaryActions` or `ControlPanelPrimaryActions` the file __agent-path__/agent/ControlPanelPrimaryActions.md
-  - use for `DBControlPanelNavigationItem` or `ControlPanelNavigationItem` the file __agent-path__/agent/ControlPanelNavigationItem.md
-  - use for `DBControlPanelNavigation` or `ControlPanelNavigation` the file __agent-path__/agent/ControlPanelNavigation.md
-  - use for `DBControlPanelMobile` or `ControlPanelMobile` the file __agent-path__/agent/ControlPanelMobile.md
-  - use for `DBControlPanelMeta` or `ControlPanelMeta` the file __agent-path__/agent/ControlPanelMeta.md
-  - use for `DBControlPanelDesktop` or `ControlPanelDesktop` the file __agent-path__/agent/ControlPanelDesktop.md
-  - use for `DBControlPanelBrand` or `ControlPanelBrand` the file __agent-path__/agent/ControlPanelBrand.md
   - use for `DBCheckbox` or `Checkbox` the file __agent-path__/agent/Checkbox.md
   - use for `DBCard` or `Card` the file __agent-path__/agent/Card.md
   - use for `DBButton` or `Button` the file __agent-path__/agent/Button.md

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

@@ -10,10 +10,10 @@ declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBAccordio
     className: string;
     propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
     name: string;
+    behavior: import("./model.js", { with: { "resolution-mode": "import" } }).AccordionBehaviorType;
     initOpenIndex: number[];
     items: DBAccordionItemDefaultProps[] | string;
     variant: import("./model.js", { with: { "resolution-mode": "import" } }).AccordionVariantType;
-    behavior: import("../../index.js", { with: { "resolution-mode": "import" } }).CollapsibleBehaviorType;
 }, {}, {}, {}, 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/accordion/model.d.ts

@@ -1,8 +1,14 @@
-import { CollapsibleBehaviorProps, GlobalProps, InitializedState } from '../../shared/model.js';
+import type { GlobalProps, InitializedState } from '../../shared/model.js';
 import type { DBAccordionItemDefaultProps } from '../accordion-item/model.js';
 export declare const AccordionVariantList: readonly ["divider", "card"];
 export type AccordionVariantType = (typeof AccordionVariantList)[number];
+export declare const AccordionBehaviorList: readonly ["multiple", "single"];
+export type AccordionBehaviorType = (typeof AccordionBehaviorList)[number];
 export type DBAccordionDefaultProps = {
+    /**
+     * To allow multiple items open at the same time or only 1 item
+     */
+    behavior?: AccordionBehaviorType;
     /**
      * The index of items which should be open when loading the accordion
      */
@@ -26,7 +32,7 @@ export type DBAccordionDefaultProps = {
      */
     variant?: AccordionVariantType;
 };
-export type DBAccordionProps = DBAccordionDefaultProps & GlobalProps & CollapsibleBehaviorProps;
+export type DBAccordionProps = DBAccordionDefaultProps & GlobalProps;
 export type DBAccordionDefaultState = {
     _initOpenIndexDone: boolean;
     _name?: string;

package/dist/components/custom-select/custom-select.vue.d.ts

@@ -14,12 +14,12 @@ declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBCustomSe
     className: string;
     propOverrides: import("../../shared/model.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
     name: string;
-    multiple: boolean | string;
     form: string;
     label: string;
     values: string[];
     open: boolean;
     disabled: boolean | string;
+    multiple: boolean | string;
     variant: import("../../shared/model.js", { with: { "resolution-mode": "import" } }).LabelVariantType;
     placement: import("../../shared/model.js", { with: { "resolution-mode": "import" } }).PlacementVerticalType;
     icon: import("@db-ux/core-foundations", { with: { "resolution-mode": "import" } }).IconTypes;

package/dist/components/custom-select/model.d.ts

@@ -208,7 +208,7 @@ export type DBCustomSelectDefaultState = {
     searchEnabled: boolean;
     amountOptions: number;
     setDescById: (descId?: string) => void;
-    handleTagRemove: (option: CustomSelectOptionType, event?: ClickEvent<HTMLButtonElement> | Event | void | any) => void;
+    handleTagRemove: (option: CustomSelectOptionType, event?: ClickEvent<HTMLButtonElement> | Event | void) => void;
     handleSummaryFocus: () => void;
     handleSelect: (value?: string) => void;
     handleSelectAll: (event: any) => void;

package/dist/components/custom-select-list/custom-select-list.vue.d.ts

@@ -8,8 +8,8 @@ declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBCustomSe
     children: any;
     className: string;
     propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
-    multiple: boolean;
     label: string;
+    multiple: boolean;
 }, {}, {}, {}, 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

@@ -29,7 +29,7 @@ export type DBDrawerDefaultProps = {
      */
     footer?: any;
     /**
-     * Shows a spacing between screen and drawer-content to provide enough space for the backdrop
+     * Shows a spacing between viewport frame and drawer-content to provide enough space for the backdrop
      */
     showSpacing?: boolean | string;
     /**

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

@@ -26,10 +26,10 @@ declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBHeaderPr
     width: import("../../index.js", { with: { "resolution-mode": "import" } }).MaxWidthType;
     closeButtonId: string;
     closeButtonText: string;
-    drawerHeaderText: string;
-    burgerMenuLabel: 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>;
 declare const _default: typeof __VLS_export;

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

@@ -15,7 +15,6 @@ declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBInputPro
     autofocus: boolean | string;
     propOverrides: import("../../shared/model.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
     name: string;
-    multiple: boolean | string;
     form: string;
     input: (event: InputEvent<HTMLInputElement>) => void;
     label: string;
@@ -27,6 +26,7 @@ declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBInputPro
     onChange: (event: ChangeEvent<HTMLInputElement>) => void;
     onInput: (event: InputEvent<HTMLInputElement>) => void;
     type: import("./model.js", { with: { "resolution-mode": "import" } }).InputTypeType | string;
+    multiple: boolean | string;
     variant: import("../../shared/model.js", { with: { "resolution-mode": "import" } }).LabelVariantType;
     size: number;
     icon: import("@db-ux/core-foundations", { with: { "resolution-mode": "import" } }).IconTypes;

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

@@ -21,10 +21,10 @@ declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBNavigati
     showIcon: boolean | string;
     width: import("../../shared/model.js", { with: { "resolution-mode": "import" } }).WidthType | string;
     active: boolean;
-    backButtonId: string;
-    backButtonText: string;
     subNavigationExpanded: boolean | string;
     hideSubNavigation: boolean | string;
+    backButtonId: string;
+    backButtonText: 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/notification/notification.vue.d.ts

@@ -20,9 +20,9 @@ declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBNotifica
     variant: import("./model.js", { with: { "resolution-mode": "import" } }).NotificationVariantType;
     icon: import("@db-ux/core-foundations", { with: { "resolution-mode": "import" } }).IconTypes;
     showIcon: boolean | string;
+    onClose: (event?: MouseEvent | undefined) => void;
     closeButtonId: string;
     closeButtonText: string;
-    onClose: (event?: MouseEvent | undefined) => void;
     closeable: boolean | string;
     linkVariant: import("./model.js", { with: { "resolution-mode": "import" } }).NotificationLinkVariantType;
     showHeadline: boolean | string;

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

@@ -14,7 +14,6 @@ declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBSelectPr
     className: string;
     propOverrides: import("../../shared/model.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
     name: string;
-    multiple: boolean;
     input: (event: InputEvent<HTMLSelectElement>) => void;
     label: string;
     value: any;
@@ -24,6 +23,7 @@ declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBSelectPr
     onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
     onInput: (event: InputEvent<HTMLSelectElement>) => void;
     onClick: (event: ClickEvent<HTMLSelectElement>) => void;
+    multiple: boolean;
     variant: import("../../shared/model.js", { with: { "resolution-mode": "import" } }).LabelVariantType;
     size: number;
     icon: import("@db-ux/core-foundations", { with: { "resolution-mode": "import" } }).IconTypes;

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;

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

@@ -1,12 +1,28 @@
-import type { AlignmentProps, GlobalProps, InitializedState, InputEvent, OrientationProps, OverflowScrollButtonProps, OverflowScrollButtonState, WidthProps } from '../../shared/model.js';
+import type { AlignmentType, GlobalProps, InitializedState, OrientationProps, WidthType } from '../../shared/model.js';
 import type { DBTabItemProps } from '../tab-item/model.js';
 import type { DBTabPanelProps } from '../tab-panel/model.js';
+export type TabItemAlignmentType = AlignmentType;
+export type TabItemAlignmentProps = {
+    /**
+     * Define the tab-item alignment in full width
+     */
+    tabItemAlignment?: TabItemAlignmentType | string;
+};
 export declare const TabsBehaviorList: readonly ["scrollbar", "arrows"];
 export type TabsBehaviorType = (typeof TabsBehaviorList)[number];
 export declare const TabsInitialSelectedModeList: readonly ["auto", "manually"];
 export type TabsInitialSelectedModeType = (typeof TabsInitialSelectedModeList)[number];
-export type DBSimpleTabProps = DBTabItemProps & DBTabPanelProps;
+export type DBSimpleTabProps = DBTabItemProps & DBTabPanelProps & {
+    /**
+     * Accessible label for icon-only tabs (rendered as aria-label on the tab button).
+     */
+    ariaLabel?: string;
+};
 export type DBTabsDefaultProps = {
+    /**
+     * Change amount of distance if you click on an arrow, only available with behavior="arrows"
+     */
+    arrowScrollDistance?: number | string;
     /**
      * Show a scrollbar or buttons with arrows to navigate for horizontal tabs with overflow visible
      */
@@ -15,45 +31,104 @@ export type DBTabsDefaultProps = {
      * Default behavior is auto selecting the first tab, change selected tab by index
      */
     initialSelectedIndex?: number | string;
+    /**
+     * Controlled active tab index. When set, the component becomes controlled:
+     * the consumer is responsible for updating this value in the onIndexChange handler.
+     * Takes precedence over initialSelectedIndex after mount.
+     */
+    activeIndex?: number | string;
     /**
      * Default behavior is auto selecting the first tab, disable it with 'manually'
      */
     initialSelectedMode?: TabsInitialSelectedModeType;
     /**
-     * The name of the tab bar, is required for grouping multiple tabs together. Will overwrite names from children.
+     * Accessible label for the tab bar (used as aria-label on the tablist).
      */
-    name?: string;
+    label?: string;
     /**
      * Provide simple tabs with label + text as content
      */
     tabs?: DBSimpleTabProps[] | string;
+    /**
+     * Width of the tab-items. Auto width based on tab-item size, full width based on parent elements width.
+     */
+    tabItemWidth?: WidthType | string;
+    /**
+     * Accessible label for the "scroll towards start" button (i18n). Only used with behavior="arrows".
+     */
+    scrollStartLabel?: string;
+    /**
+     * Accessible label for the "scroll towards end" button (i18n). Only used with behavior="arrows".
+     */
+    scrollEndLabel?: string;
 };
 export type DBTabsEventProps = {
     /**
      * Informs the user if the current tab index has changed.
      */
-    indexChange?: (index?: number) => void;
+    indexChange?: (index: number) => void;
     /**
      * Informs the user if the current tab index has changed.
      */
-    onIndexChange?: (index?: number) => void;
+    onIndexChange?: (index: number) => void;
     /**
-     * Informs the user if another tab has been selected.
+     * Fires when the active tab changes and a `value` prop is set on the tab items.
+     * Payload is the `value` string of the newly active tab item, or undefined
+     * if the tab item has no `value` prop set.
+     * Use this for form binding (e.g. Angular FormControl, React controlled state).
      */
-    onTabSelect?: (event?: InputEvent<HTMLElement>) => void;
+    valueChange?: (value?: string) => void;
     /**
-     * Informs the user if another tab has been selected.
+     * Fires when the active tab changes and a `value` prop is set on the tab items.
+     * Payload is the `value` string of the newly active tab item, or undefined
+     * if the tab item has no `value` prop set.
+     * Use this for form binding (e.g. Angular FormControl, React controlled state).
      */
-    tabSelect?: (event?: InputEvent<HTMLElement>) => void;
+    onValueChange?: (value?: string) => void;
 };
-export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & WidthProps & AlignmentProps & OverflowScrollButtonProps & DBTabsEventProps;
+export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & TabItemAlignmentProps & DBTabsEventProps;
 export type DBTabsDefaultState = {
-    _name: string;
-    scrollContainer?: Element | null;
-    convertTabs: () => DBSimpleTabProps[];
+    _id?: string;
+    _appliedLabel?: string;
+    resetIds: () => void;
+    _getScrollContainer: () => Element | null;
+    scroll: (toStart?: boolean) => void;
+    showScrollStart?: boolean;
+    showScrollEnd?: boolean;
+    _isRtl: () => boolean;
+    evaluateScrollButtons: (tabList: Element) => void;
+    getTabs: () => DBSimpleTabProps[];
+    getInitialIndex: () => number;
+    getRenderIndex: () => number;
+    getRenderFocusIndex: () => number;
+    getActiveChildIndex: () => number;
+    shouldUseActiveChild: (hashApplied: boolean) => boolean;
+    moveRovingTabindex: (focusIndex: number) => void;
+    _isOwnedPanel: (panel: HTMLElement) => boolean;
     initTabList: () => void;
-    initTabs: (init?: boolean) => void;
-    handleChange: (event: InputEvent<HTMLElement>) => void;
-    _resizeObserverCallbackId?: string;
+    _teardownScrollHandlers: () => void;
+    _resolveHashIndex: () => {
+        startIndex: number;
+        hashApplied: boolean;
+    };
+    _setupObserver: () => void;
+    initTabs: () => void;
+    syncSelection: (activeIndex?: number) => void;
+    _tabButtons: HTMLElement[];
+    _tabPanels: HTMLElement[];
+    _resizeObserver?: ResizeObserver | null;
+    _observer?: MutationObserver | null;
+    _pendingRafId: number | null;
+    _scrollListener: {
+        fn: () => void;
+    } | null;
+    _focusgroupSupported: boolean;
+    _activeIndex: number;
+    activateTab: (index: number) => void;
+    getTabId: (index: number | string) => string | undefined;
+    getPanelId: (index: number | string) => string | undefined;
+    getBaseId: () => string | undefined;
+    handleClick: (event: any) => void;
+    handleKeyDown: (event: any) => void;
 };
-export type DBTabsState = DBTabsDefaultState & InitializedState & OverflowScrollButtonState;
+export type DBTabsState = DBTabsDefaultState & InitializedState;