@db-ux/react-core-components 4.6.1 → 4.7.0-tabs-34782eb

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @db-ux/react-core-components
 
+## 4.7.0
+
+### Minor Changes
+
+- DBSelect: correctly hiding empty `option` element for _placeholder_ or _floating label_ components with property `showEmptyOption=false` - [see commit ec01b5c](https://github.com/db-ux-design-system/core-web/commit/ec01b5cb56e1fc05911d33cbff0fc8f385644628)
+
+- refactor(notification): not enforcing a paragraph for it's contents anymore. You could set any block level elements now as children. - [see commit 3170b3a](https://github.com/db-ux-design-system/core-web/commit/3170b3a6ef57bb73fa32b3176b7b8cf651a38641) and [commit 2ebe315](https://github.com/db-ux-design-system/core-web/commit/2ebe3156cd45e3702cf4acdc4224cd34da31d907)
+
 ## 4.6.1
 
 ### Patch Changes

package/agent/Tabs.md

@@ -16,56 +16,56 @@ function Tabs(props: any) {
       <h2>1. Default Tabs</h2>
       <DBTabs>
         <DBTabList>
-          <DBTabItem>Tab 1</DBTabItem>
-          <DBTabItem>Tab 2</DBTabItem>
-          <DBTabItem>Tab 3</DBTabItem>
+          <DBTabItem>Def Tab 1</DBTabItem>
+          <DBTabItem>Def Tab 2</DBTabItem>
+          <DBTabItem>Def Tab 3</DBTabItem>
         </DBTabList>
-        <DBTabPanel>Tab Panel 1</DBTabPanel>
-        <DBTabPanel>Tab Panel 2</DBTabPanel>
-        <DBTabPanel>Tab Panel 3</DBTabPanel>
+        <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>
+          <DBTabItem>Scroll Tab 1</DBTabItem>
+          <DBTabItem>Scroll Tab 2</DBTabItem>
+          <DBTabItem>Scroll Tab 3</DBTabItem>
         </DBTabList>
-        <DBTabPanel>Tab Panel 1</DBTabPanel>
-        <DBTabPanel>Tab Panel 2</DBTabPanel>
-        <DBTabPanel>Tab Panel 3</DBTabPanel>
+        <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>
+          <DBTabItem>Arrow Tab 1</DBTabItem>
+          <DBTabItem>Arrow Tab 2</DBTabItem>
+          <DBTabItem>Arrow Tab 3</DBTabItem>
         </DBTabList>
-        <DBTabPanel>Tab Panel 1</DBTabPanel>
-        <DBTabPanel>Tab Panel 2</DBTabPanel>
-        <DBTabPanel>Tab Panel 3</DBTabPanel>
+        <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>
+          <DBTabItem>InitIdx Tab 1</DBTabItem>
+          <DBTabItem>InitIdx Tab 2</DBTabItem>
+          <DBTabItem>InitIdx Tab 3</DBTabItem>
         </DBTabList>
-        <DBTabPanel>Tab Panel 1</DBTabPanel>
-        <DBTabPanel>Tab Panel 2</DBTabPanel>
-        <DBTabPanel>Tab Panel 3</DBTabPanel>
+        <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>
+          <DBTabItem>Manually Tab 1</DBTabItem>
+          <DBTabItem>Manually Tab 2</DBTabItem>
+          <DBTabItem>Manually Tab 3</DBTabItem>
         </DBTabList>
-        <DBTabPanel>Tab Panel 1</DBTabPanel>
-        <DBTabPanel>Tab Panel 2</DBTabPanel>
-        <DBTabPanel>Tab Panel 3</DBTabPanel>
+        <DBTabPanel>Manually Panel 1</DBTabPanel>
+        <DBTabPanel>Manually Panel 2</DBTabPanel>
+        <DBTabPanel>Manually Panel 3</DBTabPanel>
       </DBTabs>
     </>
   );

package/dist/components/notification/notification.js

@@ -23,7 +23,7 @@ function DBNotificationFn(props, component) {
         }), "aria-live": props.ariaLive, "data-semantic": props.semantic, "data-variant": props.variant, "data-icon": getBoolean(props.showIcon) !== false ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon), "data-link-variant": props.linkVariant }),
         React.createElement(React.Fragment, null, props.image),
         stringPropVisible(props.headline, props.showHeadline) ? (React.createElement("header", null, props.headline)) : null,
-        React.createElement("p", null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
+        React.createElement("div", { "data-area": "content" }, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
         stringPropVisible(props.timestamp, props.showTimestamp) ? (React.createElement("span", null, props.timestamp)) : null,
         React.createElement(React.Fragment, null, props.link),
         getBoolean(props.closeable, "closeable") ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event) }, (_c = props.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)) : null));

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

@@ -1,9 +1,5 @@
-import { ActiveProps, ChangeEventProps, ChangeEventState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InitializedState, NameProps, NameState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps } from '../../shared/model';
+import { ActiveProps, ClickEventProps, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InitializedState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, WidthProps } from '../../shared/model';
 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.
      */
@@ -16,12 +12,33 @@ export type DBTabItemDefaultProps = {
      * Define the text next to the icon specified via the icon Property to get hidden.
      */
     noText?: boolean | string;
+    /**
+     * Set the tabIndex manually (internal use for roving tabindex).
+     */
+    tabIndex?: number | string;
+    /**
+     * The id of the panel this tab controls (WAI-ARIA).
+     */
+    ariaControls?: 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).
+     */
+    value?: string;
 };
-export type DBTabItemProps = GlobalProps & DBTabItemDefaultProps & IconProps & IconTrailingProps & IconLeadingProps & ShowIconLeadingProps & ShowIconTrailingProps & ActiveProps & ChangeEventProps<HTMLInputElement> & ShowIconProps & NameProps;
+export type DBTabItemProps = DBTabItemDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & ShowIconProps & IconTrailingProps & IconLeadingProps & ShowIconTrailingProps & ShowIconLeadingProps & ActiveProps & WidthProps;
 export type DBTabItemDefaultState = {
-    _selected: boolean;
-    _listenerAdded: boolean;
-    boundSetSelectedOnChange?: (event: any) => void;
-    setSelectedOnChange: (event: any) => void;
+    internalActive: boolean | undefined;
+    internalTabIndex: number;
+    getCurrentTabIndex: () => number;
+    _resizeObserver: ResizeObserver | null | undefined;
+    _ariaSelectedListener: {
+        fn: (event: any) => void;
+    } | null;
+    handleClick: (event: any) => void;
+    isTruncated: boolean;
+    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.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTabItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, keyof import("../..").GlobalProps | "name" | "icon" | "showIcon" | "showIconLeading" | "showIconTrailing" | "iconLeading" | "iconTrailing" | keyof import("../..").ChangeEventProps<HTMLInputElement> | "active" | keyof import("./model").DBTabItemDefaultProps> & import("../..").GlobalProps & import("./model").DBTabItemDefaultProps & import("../..").IconProps & import("../..").IconTrailingProps & import("../..").IconLeadingProps & import("../..").ShowIconLeadingProps & import("../..").ShowIconTrailingProps & import("../..").ActiveProps & import("../..").ChangeEventProps<HTMLInputElement> & import("../..").ShowIconProps & import("../..").NameProps & React.RefAttributes<any>>;
+declare const DBTabItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLButtonElement>, keyof import("../..").GlobalProps | "icon" | "showIcon" | keyof import("../..").ClickEventProps<HTMLButtonElement> | "width" | "showIconLeading" | "showIconTrailing" | "iconLeading" | "iconTrailing" | "active" | keyof import("./model").DBTabItemDefaultProps> & import("./model").DBTabItemDefaultProps & import("../..").GlobalProps & import("../..").ClickEventProps<HTMLButtonElement> & import("../..").IconProps & import("../..").ShowIconProps & import("../..").IconTrailingProps & import("../..").IconLeadingProps & import("../..").ShowIconTrailingProps & import("../..").ShowIconLeadingProps & import("../..").ActiveProps & import("../..").WidthProps & React.RefAttributes<HTMLButtonElement>>;
 export default DBTabItem;

package/dist/components/tab-item/tab-item.js

@@ -2,77 +2,150 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBoolean, getBooleanAsString } from "../../utils";
+import { cls, getBoolean } from "../../utils";
+import DBTooltip from "../tooltip/tooltip";
 function DBTabItemFn(props, component) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     const _ref = component || useRef(component);
-    const [_selected, set_selected] = useState(() => false);
-    const [_name, set_name] = useState(() => undefined);
+    const _labelRef = useRef(null);
     const [initialized, setInitialized] = useState(() => false);
-    const [_listenerAdded, set_listenerAdded] = useState(() => false);
-    const [boundSetSelectedOnChange, setBoundSetSelectedOnChange] = useState(() => undefined);
-    function setSelectedOnChange(event) {
-        event.stopPropagation();
-        set_selected(event.target === _ref.current);
+    const [internalActive, setInternalActive] = useState(() => false);
+    const [internalTabIndex, setInternalTabIndex] = useState(() => -1);
+    function getCurrentTabIndex() {
+        return props.tabIndex !== undefined
+            ? Number(props.tabIndex)
+            : internalTabIndex;
     }
-    function handleNameAttribute() {
-        if (_ref.current) {
-            const setAttribute = _ref.current.setAttribute;
-            _ref.current.setAttribute = (attribute, value) => {
-                setAttribute.call(_ref.current, attribute, value);
-                if (attribute === "name") {
-                    set_name(value);
-                }
-            };
+    const [isTruncated, setIsTruncated] = useState(() => false);
+    const [tooltipText, setTooltipText] = useState(() => "");
+    const [_resizeObserver, set_resizeObserver] = useState(() => null);
+    const [_ariaSelectedListener, set_ariaSelectedListener] = useState(() => null);
+    function handleClick(event) {
+        if (event && event.preventDefault) {
+            event.preventDefault();
+        }
+        if (!getBoolean(props.disabled) && props.onClick) {
+            props.onClick(event);
         }
     }
-    function handleChange(event) {
-        if (props.onChange) {
-            props.onChange(event);
+    function checkTruncation() {
+        if (_labelRef.current) {
+            const scrollWidth = Math.ceil(_labelRef.current.scrollWidth);
+            const clientWidth = Math.ceil(_labelRef.current.clientWidth);
+            const truncated = scrollWidth > clientWidth + 1;
+            if (isTruncated !== truncated) {
+                setIsTruncated(truncated);
+                if (!truncated && _ref.current) {
+                    if (_ref.current.hasAttribute("data-has-tooltip")) {
+                        _ref.current.removeAttribute("data-has-tooltip");
+                    }
+                    if (_ref.current.hasAttribute("aria-describedby")) {
+                        _ref.current.removeAttribute("aria-describedby");
+                    }
+                }
+            }
+            setTooltipText(truncated
+                ? props.label ||
+                    _labelRef.current.innerText ||
+                    _labelRef.current.textContent ||
+                    ""
+                : "");
         }
     }
-    useEffect(() => {
-        setBoundSetSelectedOnChange(() => setSelectedOnChange);
-        setInitialized(true);
-    }, []);
     useEffect(() => {
         var _a;
-        if (_ref.current && initialized && boundSetSelectedOnChange) {
-            handleNameAttribute();
-            setInitialized(false);
-            // deselect this tab when another tab in tablist is selected
-            if (!_listenerAdded) {
-                (_a = _ref.current
-                    .closest("[role=tablist]")) === null || _a === void 0 ? void 0 : _a.addEventListener("change", boundSetSelectedOnChange);
-                set_listenerAdded(true);
+        setInternalActive(getBoolean(props.active) || false);
+        setInternalTabIndex(getBoolean(props.active) ? 0 : -1);
+        if (typeof window !== "undefined") {
+            const setupObserverAndCheck = () => {
+                requestAnimationFrame(() => {
+                    checkTruncation();
+                    const labelEl = _labelRef.current;
+                    if (labelEl && !labelEl.dataset.label) {
+                        labelEl.dataset.label =
+                            props.label || labelEl.innerText || labelEl.textContent || "";
+                    }
+                    if (_labelRef.current) {
+                        const resizeObserver = new ResizeObserver(() => {
+                            requestAnimationFrame(() => {
+                                checkTruncation();
+                            });
+                        });
+                        resizeObserver.observe(_labelRef.current);
+                        set_resizeObserver(resizeObserver);
+                    }
+                });
+            };
+            const hasIcon = props.showIcon && props.icon;
+            if (hasIcon && ((_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready)) {
+                document.fonts.ready.then(setupObserverAndCheck);
             }
-            // Initialize selected state from either active prop (set by parent) or checked attribute
-            if (props.active || _ref.current.checked) {
-                set_selected(true);
-                _ref.current.click();
+            else {
+                setupObserverAndCheck();
             }
         }
-    }, [_ref.current, initialized, boundSetSelectedOnChange]);
+        if (_ref.current) {
+            const listener = (event) => {
+                setInternalActive(event.detail.selected);
+                if (props.tabIndex === undefined) {
+                    if (event.detail.tabIndex !== undefined) {
+                        setInternalTabIndex(event.detail.tabIndex);
+                    }
+                    else {
+                        setInternalTabIndex(event.detail.selected ? 0 : -1);
+                    }
+                }
+            };
+            set_ariaSelectedListener({
+                fn: listener,
+            });
+            _ref.current.addEventListener("aria-selected-changed", listener);
+        }
+    }, []);
+    useEffect(() => {
+        if (props.active !== undefined) {
+            setInternalActive(getBoolean(props.active) || false);
+        }
+    }, [props.active]);
     useEffect(() => {
-        if (props.name) {
-            set_name(props.name);
+        var _a, _b;
+        if (_ref.current) {
+            const isDisabled = getBoolean(props.disabled);
+            const disabledStr = isDisabled ? "true" : "false";
+            if (((_a = _ref.current) === null || _a === void 0 ? void 0 : _a.getAttribute("aria-disabled")) !== disabledStr) {
+                (_b = _ref.current) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-disabled", disabledStr);
+            }
+            if (!isTruncated) {
+                if (_ref.current.hasAttribute("data-has-tooltip")) {
+                    _ref.current.removeAttribute("data-has-tooltip");
+                }
+                if (_ref.current.hasAttribute("aria-describedby")) {
+                    _ref.current.removeAttribute("aria-describedby");
+                }
+            }
         }
-    }, [props.name]);
+    });
     useEffect(() => {
         return () => {
-            var _a;
-            if (_listenerAdded && _ref.current && boundSetSelectedOnChange) {
-                (_a = _ref.current
-                    .closest("[role=tablist]")) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", boundSetSelectedOnChange);
-                set_listenerAdded(false);
+            _resizeObserver === null || _resizeObserver === void 0 ? void 0 : _resizeObserver.disconnect();
+            const _listener = _ariaSelectedListener;
+            if (_ref.current && _listener) {
+                _ref.current.removeEventListener("aria-selected-changed", _listener.fn);
             }
         };
     }, []);
-    return (React.createElement("li", Object.assign({ role: "none" }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-tab-item", props.className) }),
-        React.createElement("label", { htmlFor: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": (_c = props.iconLeading) !== null && _c !== void 0 ? _c : props.icon, "data-icon-trailing": props.iconTrailing, "data-show-icon": getBooleanAsString((_d = props.showIconLeading) !== null && _d !== void 0 ? _d : props.showIcon), "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing), "data-no-text": getBooleanAsString(props.noText) },
-            React.createElement("input", Object.assign({ type: "radio", role: "tab", disabled: getBoolean(props.disabled, "disabled"), "aria-selected": _selected, checked: getBoolean(props.checked, "checked"), ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { name: _name, id: (_e = props.id) !== null && _e !== void 0 ? _e : (_f = props.propOverrides) === null || _f === void 0 ? void 0 : _f.id, onInput: (event) => handleChange(event) })),
+    return (React.createElement("button", Object.assign({ type: "button", role: "tab", title: "", ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-tab-item", props.className), "aria-label": getBoolean(props.noText) ? props.label : undefined, "aria-selected": (props.active !== undefined ? getBoolean(props.active) : internalActive)
+            ? "true"
+            : "false", "aria-controls": props.ariaControls, disabled: getBoolean(props.disabled) ? true : undefined, tabIndex: getCurrentTabIndex(), id: props.id, "data-active": props.active !== undefined ? getBoolean(props.active) : internalActive, "data-no-text": getBoolean(props.noText) ? "true" : undefined, "data-value": props.value, onClick: (event) => handleClick(event) }),
+        !props.noText ? (React.createElement("span", { className: "db-tab-label", title: "", ref: _labelRef, "data-icon": getBoolean((_a = props.showIconLeading) !== null && _a !== void 0 ? _a : props.showIcon)
+                ? (_b = props.iconLeading) !== null && _b !== void 0 ? _b : props.icon
+                : undefined, "data-icon-trailing": getBoolean(props.showIconTrailing) ? props.iconTrailing : undefined },
             props.label ? React.createElement(React.Fragment, null, props.label) : null,
-            props.children)));
+            !props.label ? React.createElement(React.Fragment, null, props.children) : null)) : null,
+        getBoolean(props.noText) ? (React.createElement("span", { className: "db-tab-label", "aria-hidden": "true", "data-icon": getBoolean((_c = props.showIconLeading) !== null && _c !== void 0 ? _c : props.showIcon)
+                ? (_d = props.iconLeading) !== null && _d !== void 0 ? _d : props.icon
+                : undefined })) : null,
+        isTruncated && tooltipText ? (React.createElement(DBTooltip, { placement: "right" }, tooltipText)) : null));
 }
 const DBTabItem = forwardRef(DBTabItemFn);
 export default DBTabItem;

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

@@ -1,5 +1,15 @@
-import { GlobalProps } from '../../shared/model';
-export type DBTabListDefaultProps = {};
-export type DBTabListProps = DBTabListDefaultProps & GlobalProps;
-export type DBTabListDefaultState = {};
-export type DBTabListState = DBTabListDefaultState;
+import { GlobalProps, GlobalState, OrientationProps } from '../../shared/model';
+export type DBTabListDefaultProps = {
+    /**
+     * Defines a string value that labels the current element (WAI-ARIA).
+     */
+    ariaLabel?: string;
+    /**
+     * Identifies the element (or elements) that labels the current element (WAI-ARIA).
+     */
+    ariaLabelledby?: string;
+};
+export type DBTabListProps = DBTabListDefaultProps & GlobalProps & OrientationProps;
+export interface DBTabListState extends GlobalState {
+    _id?: string;
+}

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

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTabList: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps> & import("../..").GlobalProps & React.RefAttributes<any>>;
+declare const DBTabList: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, keyof import("../..").GlobalProps | keyof import("./model").DBTabListDefaultProps | "orientation"> & import("./model").DBTabListDefaultProps & import("../..").GlobalProps & import("../..").OrientationProps & React.RefAttributes<HTMLDivElement>>;
 export default DBTabList;

package/dist/components/tab-list/tab-list.js

@@ -1,13 +1,17 @@
 "use client";
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
 import { cls } from "../../utils";
+import { useId } from "react";
 function DBTabListFn(props, component) {
-    var _a, _b;
+    const uuid = useId();
     const _ref = component || useRef(component);
-    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-tab-list", props.className) }),
-        React.createElement("ul", { role: "tablist" }, props.children)));
+    const [_id, set_id] = useState(() => "tab-list-base-id");
+    useEffect(() => {
+        set_id(props.id || "tab-list-" + uuid);
+    }, []);
+    return (React.createElement("div", Object.assign({ role: "tablist", ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: _id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-tab-list", props.className), "aria-orientation": props.orientation || "horizontal", "aria-label": props.ariaLabelledby ? undefined : props.ariaLabel, "aria-labelledby": props.ariaLabelledby }), props.children));
 }
 const DBTabList = forwardRef(DBTabListFn);
 export default DBTabList;

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

@@ -1,10 +1,20 @@
-import { GlobalProps, GlobalState } from '../../shared/model';
+import { GlobalProps } from '../../shared/model';
 export type DBTabPanelDefaultProps = {
     /**
      * The content if you don't want to use children.
      */
     content?: string;
+    /**
+     * If the panel is hidden.
+     */
+    hidden?: boolean;
+    /**
+     * The id of the tab that labels this panel (WAI-ARIA).
+     */
+    ariaLabelledby?: string;
+    /**
+     * Accessible label for the panel, overrides ariaLabelledby for the accessible name.
+     */
+    ariaLabel?: string;
 };
 export type DBTabPanelProps = DBTabPanelDefaultProps & GlobalProps;
-export type DBTabPanelDefaultState = {};
-export type DBTabPanelState = DBTabPanelDefaultState & GlobalState;

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

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTabPanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "content" | keyof import("../..").GlobalProps> & import("./model").DBTabPanelDefaultProps & import("../..").GlobalProps & React.RefAttributes<any>>;
+declare const DBTabPanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, keyof import("../..").GlobalProps | keyof import("./model").DBTabPanelDefaultProps> & import("./model").DBTabPanelDefaultProps & import("../..").GlobalProps & React.RefAttributes<HTMLDivElement>>;
 export default DBTabPanel;

package/dist/components/tab-panel/tab-panel.js

@@ -1,13 +1,12 @@
 "use client";
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, useEffect, forwardRef } from "react";
+import { useRef, forwardRef } from "react";
 import { cls } from "../../utils";
 function DBTabPanelFn(props, component) {
     var _a, _b;
     const _ref = component || useRef(component);
-    useEffect(() => { }, []);
-    return (React.createElement("section", Object.assign({ role: "tabpanel", ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-tab-panel", props.className), id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }),
+    return (React.createElement("div", Object.assign({ role: "tabpanel", ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-tab-panel", props.className), id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id, tabIndex: props.hidden ? -1 : 0, hidden: props.hidden, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabel ? undefined : props.ariaLabelledby }),
         props.content ? React.createElement(React.Fragment, null, props.content) : null,
         props.children));
 }

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

@@ -1,4 +1,4 @@
-import { AlignmentProps, GlobalProps, InitializedState, InputEvent, OrientationProps, WidthProps } from '../../shared/model';
+import { GlobalProps, InitializedState, OrientationProps, TabItemAlignmentProps, WidthType } from '../../shared/model';
 import { DBTabItemProps } from '../tab-item/model';
 import { DBTabPanelProps } from '../tab-panel/model';
 export declare const TabsBehaviorList: readonly ["scrollbar", "arrows"];
@@ -19,6 +19,12 @@ 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'
      */
@@ -31,6 +37,18 @@ export type DBTabsDefaultProps = {
      * 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 = {
     /**
@@ -42,26 +60,42 @@ export type DBTabsEventProps = {
      */
     onIndexChange?: (index?: number) => void;
     /**
-     * Informs the user if another tab has been selected.
-     */
-    onTabSelect?: (event?: InputEvent<HTMLElement>) => 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 & DBTabsEventProps;
+export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & TabItemAlignmentProps & DBTabsEventProps;
 export type DBTabsDefaultState = {
-    _name: string;
-    scrollContainer?: Element | null;
-    scroll: (left?: boolean) => void;
-    showScrollLeft?: boolean;
-    showScrollRight?: boolean;
+    _generatedId: string;
+    _generatedName: string;
+    _id: () => string;
+    _name: () => string;
+    _getScrollContainer: () => Element | null;
+    scroll: (toStart?: boolean) => void;
+    showScrollStart?: boolean;
+    showScrollEnd?: boolean;
+    _isRtl: () => boolean;
     evaluateScrollButtons: (tabList: Element) => void;
-    convertTabs: () => DBSimpleTabProps[];
+    _cachedTabs: DBSimpleTabProps[];
+    _updateCachedTabs: () => void;
     initTabList: () => void;
-    initTabs: (init?: boolean) => void;
-    handleChange: (event: InputEvent<HTMLElement>) => void;
-    _resizeObserver?: ResizeObserver;
+    initTabs: (activeIndex?: number) => void;
+    _resizeObserver?: ResizeObserver | null;
+    _observer?: MutationObserver | null;
+    _pendingRafId: number | null;
+    _scrollListener: {
+        fn: () => void;
+    } | null;
+    activeTabIndex: number;
+    activateTab: (index: number) => void;
+    getTabId: (index: number | string) => string;
+    getPanelId: (index: number | string) => string;
+    handleClick: (event: any) => void;
+    handleKeyDown: (event: any) => void;
+    isIndexActive: (index: number | string) => boolean;
+    getTabItemTabIndex: (index: number | string) => 0 | -1;
 };
 export type DBTabsState = DBTabsDefaultState & InitializedState;

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

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTabs: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "width" | "alignment" | keyof import("./model").DBTabsDefaultProps | "orientation" | keyof import("./model").DBTabsEventProps> & import("./model").DBTabsDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").OrientationProps & import("../../shared/model").WidthProps & import("../../shared/model").AlignmentProps & import("./model").DBTabsEventProps & React.RefAttributes<any>>;
+declare const DBTabs: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, keyof import("../..").GlobalProps | "orientation" | keyof import("./model").DBTabsDefaultProps | "tabItemAlignment" | keyof import("./model").DBTabsEventProps> & import("./model").DBTabsDefaultProps & import("../..").GlobalProps & import("../..").OrientationProps & import("../..").TabItemAlignmentProps & import("./model").DBTabsEventProps & React.RefAttributes<HTMLDivElement>>;
 export default DBTabs;

package/dist/components/tabs/tabs.js

@@ -9,172 +9,414 @@ import DBTabList from "../tab-list/tab-list";
 import DBTabPanel from "../tab-panel/tab-panel";
 import { useId } from "react";
 function DBTabsFn(props, component) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c;
+    props = Object.assign({ tabItemWidth: "auto", tabItemAlignment: "start", scrollStartLabel: "Scroll start", scrollEndLabel: "Scroll end" }, props);
     const uuid = useId();
     const _ref = component || useRef(component);
-    const [_name, set_name] = useState(() => "");
+    const [_generatedId, set_generatedId] = useState(() => "tabs-" + uuid);
+    const [_generatedName, set_generatedName] = useState(() => uuid);
+    const [activeTabIndex, setActiveTabIndex] = useState(() => 0);
     const [initialized, setInitialized] = useState(() => false);
-    const [showScrollLeft, setShowScrollLeft] = useState(() => false);
-    const [showScrollRight, setShowScrollRight] = useState(() => false);
-    const [scrollContainer, setScrollContainer] = useState(() => null);
-    const [_resizeObserver, set_resizeObserver] = useState(() => undefined);
-    function convertTabs() {
+    const [showScrollStart, setShowScrollStart] = useState(() => false);
+    const [showScrollEnd, setShowScrollEnd] = useState(() => false);
+    const [_resizeObserver, set_resizeObserver] = useState(() => null);
+    const [_observer, set_observer] = useState(() => null);
+    const [_pendingRafId, set_pendingRafId] = useState(() => null);
+    const [_scrollListener, set_scrollListener] = useState(() => null);
+    function _id() {
+        return props.id || _generatedId;
+    }
+    function _name() {
+        return "tabs-" + (props.name || _generatedName);
+    }
+    function getTabId(index) {
+        return `${_name()}-tab-${index}`;
+    }
+    function getPanelId(index) {
+        return `${_name()}-tab-panel-${index}`;
+    }
+    function activateTab(index) {
+        var _a, _b, _c;
+        // Prevent activating a disabled tab
+        if (_ref.current) {
+            const tabList = _ref.current.querySelector('[role="tablist"]');
+            if (tabList) {
+                const tabs = Array.from(tabList.querySelectorAll('[role="tab"]'));
+                const tab = tabs[index];
+                if ((tab === null || tab === void 0 ? void 0 : tab.disabled) || (tab === null || tab === void 0 ? void 0 : tab.getAttribute("aria-disabled")) === "true") {
+                    return;
+                }
+            }
+        }
+        if (activeTabIndex !== index) {
+            setActiveTabIndex(index);
+            if (props.onIndexChange) {
+                props.onIndexChange(index);
+            }
+            // Emit value of the newly active tab item if value props are set
+            if (props.onValueChange) {
+                const tabList = (_a = _ref.current) === null || _a === void 0 ? void 0 : _a.querySelector('[role="tablist"]');
+                const tabs = tabList
+                    ? Array.from(tabList.querySelectorAll('[role="tab"]'))
+                    : [];
+                const value = (_c = (_b = tabs[index]) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c["value"];
+                props.onValueChange(value);
+            }
+            initTabs(index);
+        }
+    }
+    function handleClick(event) {
+        var _a;
+        // In props-mode (props.tabs), tab activation is handled via onClick on each DBTabItem directly.
+        // In slot-mode (!props.tabs), clicks bubble up and are handled here via DOM traversal.
+        if (props.tabs) {
+            return;
+        }
+        const target = event.target;
+        const button = target.closest('[role="tab"]');
+        if (!button || !_ref.current)
+            return;
+        const tabList = (_a = _ref.current) === null || _a === void 0 ? void 0 : _a.querySelector('[role="tablist"]');
+        if (!tabList)
+            return;
+        const buttons = Array.from(tabList.querySelectorAll('[role="tab"]'));
+        const index = buttons.indexOf(button);
+        if (index !== -1) {
+            event.preventDefault();
+            activateTab(index);
+        }
+    }
+    function handleKeyDown(event) {
+        var _a;
+        if (!_ref.current)
+            return;
+        const key = event.key;
+        const navigationKeys = [
+            "ArrowRight",
+            "ArrowDown",
+            "ArrowLeft",
+            "ArrowUp",
+            "Home",
+            "End",
+            "Enter",
+            " ",
+        ];
+        if (!navigationKeys.includes(key)) {
+            return;
+        }
+        const tabList = _ref.current.querySelector('[role="tablist"]');
+        if (!tabList)
+            return;
+        const buttons = Array.from(tabList.querySelectorAll('[role="tab"]'));
+        // find currently focused element within the buttons list
+        let currentIndex = -1;
+        if (typeof document !== "undefined") {
+            // Traverse Shadow DOM boundaries to find the truly focused element.
+            // document.activeElement only returns the shadow host when focus is inside a Shadow DOM,
+            // so we must walk through each shadowRoot to reach the actual focused element.
+            let activeEl = document.activeElement;
+            while ((_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
+                activeEl = activeEl.shadowRoot.activeElement;
+            }
+            if (activeEl) {
+                const focusedButton = activeEl.closest('[role="tab"]');
+                if (focusedButton) {
+                    currentIndex = buttons.indexOf(focusedButton);
+                }
+            }
+        }
+        if (currentIndex === -1) {
+            currentIndex = activeTabIndex;
+        }
+        if (buttons.length > 0) {
+            // handle activation (enter / space) -> change panel
+            if (key === "Enter" || key === " ") {
+                event.preventDefault();
+                activateTab(currentIndex);
+                return;
+            }
+            // handle navigation (arrows) -> moves focus
+            let nextIndex;
+            const length = buttons.length;
+            if (key === "ArrowRight" || key === "ArrowDown") {
+                nextIndex = (currentIndex + 1) % length;
+            }
+            else if (key === "ArrowLeft" || key === "ArrowUp") {
+                nextIndex = (currentIndex - 1 + length) % length;
+            }
+            else if (key === "Home") {
+                nextIndex = 0;
+            }
+            else if (key === "End") {
+                nextIndex = length - 1;
+            }
+            if (nextIndex !== undefined) {
+                event.preventDefault();
+                // Skip disabled tabs when navigating with arrow keys
+                const isForward = key === "ArrowRight" || key === "ArrowDown";
+                const maxAttempts = length;
+                for (let i = 0; i < maxAttempts; i++) {
+                    const candidate = buttons[nextIndex];
+                    if (!(candidate === null || candidate === void 0 ? void 0 : candidate.disabled) &&
+                        (candidate === null || candidate === void 0 ? void 0 : candidate.getAttribute("aria-disabled")) !== "true") {
+                        break;
+                    }
+                    if (isForward) {
+                        nextIndex = (nextIndex + 1) % length;
+                    }
+                    else {
+                        nextIndex = (nextIndex - 1 + length) % length;
+                    }
+                }
+                // do not activateTab here for manual activation, just move the focus
+                const nextButton = buttons[nextIndex];
+                if (nextButton &&
+                    !nextButton.disabled &&
+                    nextButton.getAttribute("aria-disabled") !== "true") {
+                    nextButton.focus();
+                }
+            }
+        }
+    }
+    function isIndexActive(index) {
+        return activeTabIndex === Number(index);
+    }
+    function getTabItemTabIndex(index) {
+        const i = Number(index);
+        // only the active tab should be reachable via Tab key
+        return activeTabIndex === i || (activeTabIndex === -1 && i === 0) ? 0 : -1;
+    }
+    const [_cachedTabs, set_cachedTabs] = useState(() => []);
+    function _updateCachedTabs() {
         try {
             if (typeof props.tabs === "string") {
-                return JSON.parse(props.tabs);
+                set_cachedTabs(JSON.parse(props.tabs));
+            }
+            else if (props.tabs) {
+                set_cachedTabs(props.tabs);
+            }
+            else {
+                set_cachedTabs([]);
             }
-            return props.tabs;
         }
         catch (error) {
             console.error(error);
+            set_cachedTabs([]);
         }
-        return [];
+    }
+    function _getScrollContainer() {
+        var _a, _b;
+        return (_b = (_a = _ref.current) === null || _a === void 0 ? void 0 : _a.querySelector('[role="tablist"]')) !== null && _b !== void 0 ? _b : null;
+    }
+    function _isRtl() {
+        const container = _getScrollContainer();
+        return (!!container &&
+            typeof getComputedStyle !== "undefined" &&
+            getComputedStyle(container).direction === "rtl");
     }
     function evaluateScrollButtons(tList) {
         const needsScroll = tList.scrollWidth > tList.clientWidth;
-        setShowScrollLeft(needsScroll && tList.scrollLeft > 1);
-        setShowScrollRight(needsScroll && tList.scrollLeft < tList.scrollWidth - tList.clientWidth);
+        if (!needsScroll) {
+            setShowScrollStart(false);
+            setShowScrollEnd(false);
+            return;
+        }
+        const scrollPos = Math.abs(tList.scrollLeft);
+        const maxScroll = tList.scrollWidth - tList.clientWidth;
+        const tolerance = 2;
+        // scrollPos=0 means "at inline-start" in both LTR and RTL
+        setShowScrollStart(scrollPos > tolerance);
+        setShowScrollEnd(scrollPos < maxScroll - tolerance);
     }
-    function scroll(left) {
-        let step = Number(props.arrowScrollDistance) || 100;
-        if (left) {
+    function scroll(toStart) {
+        const container = _getScrollContainer();
+        if (!container) {
+            return;
+        }
+        let step = Number(props.arrowScrollDistance) || 120;
+        const isLeft = !!toStart;
+        const isRtl = _isRtl();
+        // Map logical direction (start/end) to physical direction.
+        // In LTR: toStart=true → scroll left (negative), toEnd → scroll right (positive).
+        // In RTL: directions are inverted physically.
+        if (isLeft !== isRtl) {
             step *= -1;
         }
-        scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollBy({
-            top: 0,
+        container.scrollBy({
             left: step,
             behavior: "smooth",
         });
     }
     function initTabList() {
+        var _a, _b;
         if (_ref.current) {
-            const tabList = _ref.current.querySelector(".db-tab-list");
-            if (tabList) {
-                const container = tabList.querySelector('[role="tablist"]');
-                if (container) {
-                    container.setAttribute("aria-orientation", props.orientation || "horizontal");
-                    if (props.behavior === "arrows") {
-                        setScrollContainer(container);
-                        evaluateScrollButtons(container);
-                        container.addEventListener("scroll", () => {
+            const container = _ref.current.querySelector('[role="tablist"]');
+            if (container) {
+                if (!container.getAttribute("aria-orientation")) {
+                    container.setAttribute("aria-orientation", (_a = props.orientation) !== null && _a !== void 0 ? _a : "horizontal");
+                }
+                if (props.behavior === "arrows") {
+                    evaluateScrollButtons(container);
+                    const _listener = _scrollListener;
+                    if (_listener && container) {
+                        container.removeEventListener("scroll", _listener.fn);
+                        set_scrollListener(null);
+                    }
+                    const onScroll = () => evaluateScrollButtons(container);
+                    set_scrollListener({
+                        fn: onScroll,
+                    });
+                    container.addEventListener("scroll", onScroll);
+                    if (!_resizeObserver) {
+                        const observer = new ResizeObserver(() => {
                             evaluateScrollButtons(container);
                         });
-                        // Use ResizeObserver to re-evaluate scroll buttons because it provides more accurate, container-specific resize detection than global window resize events.
-                        if (!_resizeObserver) {
-                            const observer = new ResizeObserver(() => {
-                                evaluateScrollButtons(container);
-                            });
-                            observer.observe(container);
-                            set_resizeObserver(observer);
-                        }
+                        observer.observe(container);
+                        set_resizeObserver(observer);
                     }
                 }
+                if (props.name && !container.getAttribute("aria-label")) {
+                    container.setAttribute("aria-label", (_b = props.name) !== null && _b !== void 0 ? _b : "");
+                }
             }
         }
     }
-    function initTabs(init) {
+    function initTabs(activeIndex) {
+        var _a, _b;
+        const currentIndex = activeIndex !== undefined ? activeIndex : activeTabIndex;
         if (_ref.current) {
-            const tabItems = Array.from(_ref.current.getElementsByClassName("db-tab-item"));
-            const tabPanels = Array.from(_ref.current.querySelectorAll(":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)"));
-            for (const tabItem of tabItems) {
-                const index = tabItems.indexOf(tabItem);
-                const label = tabItem.querySelector("label");
-                const input = tabItem.querySelector("input");
-                if (input && label) {
-                    if (!input.id) {
-                        const tabId = `${_name}-tab-${index}`;
-                        label.setAttribute("for", tabId);
-                        input.id = tabId;
-                        input.setAttribute("name", _name);
-                        if (tabPanels.length > index) {
-                            input.setAttribute("aria-controls", `${_name}-tab-panel-${index}`);
-                        }
+            const tabListEl = _ref.current.querySelector('[role="tablist"]');
+            const panels = Array.from((_b = (_a = _ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="tabpanel"]')) !== null && _b !== void 0 ? _b : []).filter((panel) => panel.closest(".db-tabs") === _ref.current);
+            if (!tabListEl)
+                return;
+            const buttons = Array.from(tabListEl.querySelectorAll('[role="tab"]'));
+            buttons.forEach((button, index) => {
+                const isSelected = currentIndex === index;
+                const panel = panels[index];
+                const tabId = button.id || getTabId(index);
+                const panelId = (panel === null || panel === void 0 ? void 0 : panel.id) || getPanelId(index);
+                if (!button.id) {
+                    button.id = tabId;
+                }
+                if (!button.getAttribute("aria-controls")) {
+                    button.setAttribute("aria-controls", panelId);
+                }
+                button.dispatchEvent(new CustomEvent("aria-selected-changed", {
+                    detail: {
+                        selected: isSelected,
+                        tabIndex: currentIndex === index || (currentIndex === -1 && index === 0)
+                            ? 0
+                            : -1,
+                    },
+                }));
+                if (panel) {
+                    if (!panel.id) {
+                        panel.id = panelId;
                     }
-                    if (init) {
-                        // Auto select
-                        const autoSelect = !props.initialSelectedMode ||
-                            props.initialSelectedMode === "auto";
-                        const shouldAutoSelect = (props.initialSelectedIndex == null && index === 0) ||
-                            Number(props.initialSelectedIndex) === index;
-                        if (autoSelect && shouldAutoSelect) {
-                            input.click();
-                        }
+                    if (!panel.getAttribute("aria-label") &&
+                        !panel.getAttribute("aria-labelledby")) {
+                        panel.setAttribute("aria-labelledby", tabId);
                     }
+                    // toggle visibility
+                    panel.hidden = !isSelected;
                 }
-            }
-            for (const panel of tabPanels) {
-                if (panel.id)
-                    continue;
-                const index = tabPanels.indexOf(panel);
-                panel.id = `${_name}-tab-panel-${index}`;
-                panel.setAttribute("aria-labelledby", `${_name}-tab-${index}`);
-            }
+            });
         }
     }
-    function handleChange(event) {
-        var _a;
-        event.stopPropagation();
-        if (event.target) {
-            const target = event.target;
-            const parent = target.parentElement;
-            if (parent &&
-                parent.parentElement &&
-                ((_a = parent.parentElement) === null || _a === void 0 ? void 0 : _a.nodeName) === "LI") {
-                const tabItem = parent.parentElement;
-                if (tabItem) {
-                    const list = tabItem.parentElement;
-                    if (list) {
-                        const tabIndex = Array.from(list.children).indexOf(tabItem);
-                        if (props.onIndexChange) {
-                            props.onIndexChange(tabIndex);
-                        }
-                        if (props.onTabSelect) {
-                            props.onTabSelect(event);
-                        }
-                    }
+    useEffect(() => {
+        // 1. Calculate final start index synchronously to avoid race conditions
+        let startIndex = 0;
+        if (props.initialSelectedIndex !== undefined) {
+            const parsedIndex = Number(props.initialSelectedIndex);
+            startIndex = isNaN(parsedIndex) ? 0 : parsedIndex;
+        }
+        else if (props.initialSelectedMode === "manually") {
+            startIndex = -1;
+        }
+        // 2. Support deep linking: URL hash takes precedence over initial index
+        if (typeof window !== "undefined" && window.location.hash) {
+            const hashId = window.location.hash.substring(1);
+            const name = props.name ? "tabs-" + props.name : _name();
+            const prefix = `${name}-tab-`;
+            if (hashId.startsWith(prefix)) {
+                const indexStr = hashId.replace(prefix, "");
+                const index = parseInt(indexStr, 10);
+                if (!isNaN(index)) {
+                    startIndex = index;
                 }
             }
         }
-    }
-    useEffect(() => {
-        set_name(`tabs-${props.name || uuid}`);
+        // 3. Set initial state synchronously
+        setActiveTabIndex(startIndex);
         setInitialized(true);
-    }, []);
-    useEffect(() => {
-        if (_ref.current && initialized) {
-            initTabList();
-            initTabs(true);
-            const tabList = _ref.current.querySelector(".db-tab-list");
-            if (tabList) {
-                const observer = new MutationObserver((mutations) => {
-                    mutations.forEach((mutation) => {
-                        if (mutation.removedNodes.length || mutation.addedNodes.length) {
-                            initTabList();
-                            initTabs();
-                        }
-                    });
+        _updateCachedTabs();
+        // 4. Trigger single initial DOM update after paint
+        if (typeof window !== "undefined") {
+            requestAnimationFrame(() => {
+                initTabList();
+                initTabs(startIndex);
+            });
+        }
+        if (_ref.current) {
+            const tabListEl = _ref.current.querySelector('[role="tablist"]');
+            if (tabListEl) {
+                const observer = new MutationObserver(() => {
+                    const rafId = _pendingRafId;
+                    if (rafId !== null)
+                        cancelAnimationFrame(rafId);
+                    set_pendingRafId(requestAnimationFrame(() => {
+                        set_pendingRafId(null);
+                        initTabList();
+                        initTabs(activeTabIndex);
+                    }));
                 });
-                observer.observe(tabList, {
+                // Observe only the tablist (not panel content) to avoid unnecessary
+                // re-evaluations when user content inside panels changes.
+                // childList only – attribute changes (set by initTabs) are not observed, preventing infinite loops.
+                observer.observe(tabListEl, {
                     childList: true,
                     subtree: true,
                 });
+                set_observer(observer);
             }
-            setInitialized(false);
         }
-    }, [_ref.current, initialized]);
+    }, []);
+    useEffect(() => {
+        _updateCachedTabs();
+    }, [props.tabs]);
+    useEffect(() => {
+        if (props.activeIndex !== undefined) {
+            const newIndex = Number(props.activeIndex);
+            if (!isNaN(newIndex) && newIndex !== activeTabIndex) {
+                activateTab(newIndex);
+            }
+        }
+    }, [props.activeIndex]);
     useEffect(() => {
         return () => {
+            const rafId = _pendingRafId;
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+                set_pendingRafId(null);
+            }
+            const _listener = _scrollListener;
+            const _container = _getScrollContainer();
+            if (_listener && _container) {
+                _container.removeEventListener("scroll", _listener.fn);
+            }
             _resizeObserver === null || _resizeObserver === void 0 ? void 0 : _resizeObserver.disconnect();
-            set_resizeObserver(undefined);
+            set_resizeObserver(null);
+            _observer === null || _observer === void 0 ? void 0 : _observer.disconnect();
+            set_observer(null);
         };
     }, []);
-    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density", "onTabSelect", "onIndexChange"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-tabs", props.className), "data-orientation": props.orientation, "data-scroll-behavior": props.behavior, "data-alignment": (_c = props.alignment) !== null && _c !== void 0 ? _c : "start", "data-width": (_d = props.width) !== null && _d !== void 0 ? _d : "auto", onInput: (event) => handleChange(event), onChange: (event) => handleChange(event) }),
-        showScrollLeft ? (React.createElement(DBButton, { className: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: (event) => scroll(true) }, "Scroll left")) : null,
+    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density", "onTabSelect", "onIndexChange"]), { id: (_c = (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : _id() }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-tabs", props.className), "data-orientation": props.orientation, "data-scroll-behavior": props.behavior, "data-tab-item-alignment": props.tabItemAlignment, "data-tab-item-width": props.tabItemWidth, onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event) }),
+        showScrollStart ? (React.createElement(DBButton, { className: "tabs-scroll-start", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: (event) => scroll(true) }, props.scrollStartLabel)) : null,
         props.tabs ? (React.createElement(React.Fragment, null,
-            React.createElement(DBTabList, null, (_e = convertTabs()) === null || _e === void 0 ? void 0 : _e.map((tab, index) => (React.createElement(DBTabItem, { key: props.name + "tab-item" + index, active: tab.active, label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText })))), (_f = convertTabs()) === null || _f === void 0 ? void 0 :
-            _f.map((tab, index) => (React.createElement(DBTabPanel, { key: props.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null,
-        showScrollRight ? (React.createElement(DBButton, { className: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: (event) => scroll() }, "Scroll right")) : null,
-        props.children));
+            React.createElement(DBTabList, { orientation: props.orientation, ariaLabel: props.name }, _cachedTabs === null || _cachedTabs === void 0 ? void 0 : _cachedTabs.map((tab, index) => (React.createElement(DBTabItem, { key: props.name + "tab-item" + index, id: getTabId(index), ariaControls: getPanelId(index), active: isIndexActive(index), tabIndex: getTabItemTabIndex(index), label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText, onClick: (event) => activateTab(index) })))), _cachedTabs === null || _cachedTabs === void 0 ? void 0 :
+            _cachedTabs.map((tab, index) => (React.createElement(DBTabPanel, { key: props.name + "tab-panel" + index, id: getPanelId(index), ariaLabelledby: getTabId(index), content: tab.content, hidden: !isIndexActive(index) }, tab.children))))) : null,
+        !props.tabs ? React.createElement(React.Fragment, null, props.children) : null,
+        showScrollEnd ? (React.createElement(DBButton, { className: "tabs-scroll-end", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: (event) => scroll(false) }, props.scrollEndLabel)) : null));
 }
 const DBTabs = forwardRef(DBTabsFn);
 export default DBTabs;

package/dist/components/tooltip/tooltip.js

@@ -2,7 +2,6 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { DEFAULT_ID } from "../../shared/constants";
 import { cls, getBooleanAsString, delay as utilsDelay } from "../../utils";
 import { DocumentScrollListener } from "../../utils/document-scroll-listener";
 import { handleFixedPopover } from "../../utils/floating-components";
@@ -11,7 +10,7 @@ function DBTooltipFn(props, component) {
     var _a, _b, _c;
     const uuid = useId();
     const _ref = component || useRef(component);
-    const [_id, set_id] = useState(() => DEFAULT_ID);
+    const [_id, set_id] = useState(() => "tooltip-" + uuid);
     const [initialized, setInitialized] = useState(() => false);
     const [_documentScrollListenerCallbackId, set_documentScrollListenerCallbackId,] = useState(() => undefined);
     const [_observer, set_observer] = useState(() => undefined);

package/dist/shared/model.d.ts

@@ -461,13 +461,13 @@ export type CloseEventProps<T> = {
 export type CloseEventState<T> = {
     handleClose: (event?: T | void, forceClose?: boolean) => void;
 };
-export declare const AlignmentList: readonly ["start", "center"];
-export type AlignmentType = (typeof AlignmentList)[number];
-export type AlignmentProps = {
+export declare const TabItemAlignmentList: readonly ["start", "center", "end"];
+export type TabItemAlignmentType = (typeof TabItemAlignmentList)[number];
+export type TabItemAlignmentProps = {
     /**
-     * Define the content alignment in full width
+     * Define the tab-item alignment in full width
      */
-    alignment?: AlignmentType | string;
+    tabItemAlignment?: TabItemAlignmentType | string;
 };
 export type ActiveProps = {
     /**

package/dist/shared/model.js

@@ -19,4 +19,4 @@ export const LabelVariantHorizontalList = ['leading', 'trailing'];
 export const AutoCompleteList = ['off', 'on', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'shipping', 'billing', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo', 'webauthn'];
 export const LinkTargetList = ['_self', '_blank', '_parent', '_top'];
 export const LinkReferrerPolicyList = ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'];
-export const AlignmentList = ['start', 'center'];
+export const TabItemAlignmentList = ['start', 'center', 'end'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.6.1",
+  "version": "4.7.0-tabs-34782eb",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "4.6.1",
-    "@db-ux/core-foundations": "4.6.1"
+    "@db-ux/core-components": "4.7.0-tabs-34782eb",
+    "@db-ux/core-foundations": "4.7.0-tabs-34782eb"
   }
 }