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

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # @db-ux/react-core-components
 
+## 4.7.1
+
+_version bump_
+
+
 ## 4.7.0
 
 ### Minor Changes

package/agent/Tabs.md

@@ -16,56 +16,56 @@ function Tabs(props: any) {
       <h2>1. Default Tabs</h2>
       <DBTabs>
         <DBTabList>
-          <DBTabItem>Def Tab 1</DBTabItem>
-          <DBTabItem>Def Tab 2</DBTabItem>
-          <DBTabItem>Def Tab 3</DBTabItem>
+          <DBTabItem>Tab 1</DBTabItem>
+          <DBTabItem>Tab 2</DBTabItem>
+          <DBTabItem>Tab 3</DBTabItem>
         </DBTabList>
-        <DBTabPanel>Def Panel 1</DBTabPanel>
-        <DBTabPanel>Def Panel 2</DBTabPanel>
-        <DBTabPanel>Def Panel 3</DBTabPanel>
+        <DBTabPanel>Tab Panel 1</DBTabPanel>
+        <DBTabPanel>Tab Panel 2</DBTabPanel>
+        <DBTabPanel>Tab Panel 3</DBTabPanel>
       </DBTabs>
       <h2>2. Behavior Variants</h2>
       <DBTabs behavior="scrollbar">
         <DBTabList>
-          <DBTabItem>Scroll Tab 1</DBTabItem>
-          <DBTabItem>Scroll Tab 2</DBTabItem>
-          <DBTabItem>Scroll Tab 3</DBTabItem>
+          <DBTabItem>Tab 1</DBTabItem>
+          <DBTabItem>Tab 2</DBTabItem>
+          <DBTabItem>Tab 3</DBTabItem>
         </DBTabList>
-        <DBTabPanel>Scroll Panel 1</DBTabPanel>
-        <DBTabPanel>Scroll Panel 2</DBTabPanel>
-        <DBTabPanel>Scroll Panel 3</DBTabPanel>
+        <DBTabPanel>Tab Panel 1</DBTabPanel>
+        <DBTabPanel>Tab Panel 2</DBTabPanel>
+        <DBTabPanel>Tab Panel 3</DBTabPanel>
       </DBTabs>
       <DBTabs behavior="arrows">
         <DBTabList>
-          <DBTabItem>Arrow Tab 1</DBTabItem>
-          <DBTabItem>Arrow Tab 2</DBTabItem>
-          <DBTabItem>Arrow Tab 3</DBTabItem>
+          <DBTabItem>Tab 1</DBTabItem>
+          <DBTabItem>Tab 2</DBTabItem>
+          <DBTabItem>Tab 3</DBTabItem>
         </DBTabList>
-        <DBTabPanel>Arrow Panel 1</DBTabPanel>
-        <DBTabPanel>Arrow Panel 2</DBTabPanel>
-        <DBTabPanel>Arrow Panel 3</DBTabPanel>
+        <DBTabPanel>Tab Panel 1</DBTabPanel>
+        <DBTabPanel>Tab Panel 2</DBTabPanel>
+        <DBTabPanel>Tab Panel 3</DBTabPanel>
       </DBTabs>
       <h2>3. Initial Selected Index</h2>
       <DBTabs initialSelectedIndex={1}>
         <DBTabList>
-          <DBTabItem>InitIdx Tab 1</DBTabItem>
-          <DBTabItem>InitIdx Tab 2</DBTabItem>
-          <DBTabItem>InitIdx Tab 3</DBTabItem>
+          <DBTabItem>Tab 1</DBTabItem>
+          <DBTabItem>Tab 2</DBTabItem>
+          <DBTabItem>Tab 3</DBTabItem>
         </DBTabList>
-        <DBTabPanel>InitIdx Panel 1</DBTabPanel>
-        <DBTabPanel>InitIdx Panel 2</DBTabPanel>
-        <DBTabPanel>InitIdx Panel 3</DBTabPanel>
+        <DBTabPanel>Tab Panel 1</DBTabPanel>
+        <DBTabPanel>Tab Panel 2</DBTabPanel>
+        <DBTabPanel>Tab Panel 3</DBTabPanel>
       </DBTabs>
       <h2>4. Initial Selected Mode</h2>
       <DBTabs initialSelectedMode="manually">
         <DBTabList>
-          <DBTabItem>Manually Tab 1</DBTabItem>
-          <DBTabItem>Manually Tab 2</DBTabItem>
-          <DBTabItem>Manually Tab 3</DBTabItem>
+          <DBTabItem>Tab 1</DBTabItem>
+          <DBTabItem>Tab 2</DBTabItem>
+          <DBTabItem>Tab 3</DBTabItem>
         </DBTabList>
-        <DBTabPanel>Manually Panel 1</DBTabPanel>
-        <DBTabPanel>Manually Panel 2</DBTabPanel>
-        <DBTabPanel>Manually Panel 3</DBTabPanel>
+        <DBTabPanel>Tab Panel 1</DBTabPanel>
+        <DBTabPanel>Tab Panel 2</DBTabPanel>
+        <DBTabPanel>Tab Panel 3</DBTabPanel>
       </DBTabs>
     </>
   );

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

@@ -1,5 +1,9 @@
-import { ActiveProps, ClickEventProps, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InitializedState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, WidthProps } from '../../shared/model';
+import { ActiveProps, ChangeEventProps, ChangeEventState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InitializedState, NameProps, NameState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps } 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.
      */
@@ -12,33 +16,12 @@ 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 = DBTabItemDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & ShowIconProps & IconTrailingProps & IconLeadingProps & ShowIconTrailingProps & ShowIconLeadingProps & ActiveProps & WidthProps;
+export type DBTabItemProps = GlobalProps & DBTabItemDefaultProps & IconProps & IconTrailingProps & IconLeadingProps & ShowIconLeadingProps & ShowIconTrailingProps & ActiveProps & ChangeEventProps<HTMLInputElement> & ShowIconProps & NameProps;
 export type DBTabItemDefaultState = {
-    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;
+    _selected: boolean;
+    _listenerAdded: boolean;
+    boundSetSelectedOnChange?: (event: any) => void;
+    setSelectedOnChange: (event: any) => void;
 };
-export type DBTabItemState = DBTabItemDefaultState & GlobalState & InitializedState;
+export type DBTabItemState = DBTabItemDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & InitializedState & NameState;

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<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>>;
+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>>;
 export default DBTabItem;

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

@@ -2,150 +2,77 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBoolean } from "../../utils";
-import DBTooltip from "../tooltip/tooltip";
+import { cls, getBoolean, getBooleanAsString } from "../../utils";
 function DBTabItemFn(props, component) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const _ref = component || useRef(component);
-    const _labelRef = useRef(null);
+    const [_selected, set_selected] = useState(() => false);
+    const [_name, set_name] = useState(() => undefined);
     const [initialized, setInitialized] = useState(() => false);
-    const [internalActive, setInternalActive] = useState(() => false);
-    const [internalTabIndex, setInternalTabIndex] = useState(() => -1);
-    function getCurrentTabIndex() {
-        return props.tabIndex !== undefined
-            ? Number(props.tabIndex)
-            : internalTabIndex;
+    const [_listenerAdded, set_listenerAdded] = useState(() => false);
+    const [boundSetSelectedOnChange, setBoundSetSelectedOnChange] = useState(() => undefined);
+    function setSelectedOnChange(event) {
+        event.stopPropagation();
+        set_selected(event.target === _ref.current);
     }
-    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 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);
+                }
+            };
         }
     }
-    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 ||
-                    ""
-                : "");
+    function handleChange(event) {
+        if (props.onChange) {
+            props.onChange(event);
         }
     }
+    useEffect(() => {
+        setBoundSetSelectedOnChange(() => setSelectedOnChange);
+        setInitialized(true);
+    }, []);
     useEffect(() => {
         var _a;
-        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);
+        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);
             }
-            else {
-                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();
             }
         }
-        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]);
+    }, [_ref.current, initialized, boundSetSelectedOnChange]);
     useEffect(() => {
-        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");
-                }
-            }
+        if (props.name) {
+            set_name(props.name);
         }
-    });
+    }, [props.name]);
     useEffect(() => {
         return () => {
-            _resizeObserver === null || _resizeObserver === void 0 ? void 0 : _resizeObserver.disconnect();
-            const _listener = _ariaSelectedListener;
-            if (_ref.current && _listener) {
-                _ref.current.removeEventListener("aria-selected-changed", _listener.fn);
+            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);
             }
         };
     }, []);
-    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 },
+    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) })),
             props.label ? React.createElement(React.Fragment, null, props.label) : null,
-            !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));
+            props.children)));
 }
 const DBTabItem = forwardRef(DBTabItemFn);
 export default DBTabItem;

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

@@ -1,15 +1,5 @@
-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;
-}
+import { GlobalProps } from '../../shared/model';
+export type DBTabListDefaultProps = {};
+export type DBTabListProps = DBTabListDefaultProps & GlobalProps;
+export type DBTabListDefaultState = {};
+export type DBTabListState = DBTabListDefaultState;

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<HTMLDivElement>, keyof import("../..").GlobalProps | keyof import("./model").DBTabListDefaultProps | "orientation"> & import("./model").DBTabListDefaultProps & import("../..").GlobalProps & import("../..").OrientationProps & React.RefAttributes<HTMLDivElement>>;
+declare const DBTabList: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps> & import("../..").GlobalProps & React.RefAttributes<any>>;
 export default DBTabList;

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

@@ -1,17 +1,13 @@
 "use client";
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
+import { useRef, forwardRef } from "react";
 import { cls } from "../../utils";
-import { useId } from "react";
 function DBTabListFn(props, component) {
-    const uuid = useId();
+    var _a, _b;
     const _ref = component || useRef(component);
-    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));
+    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 DBTabList = forwardRef(DBTabListFn);
 export default DBTabList;

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

@@ -1,20 +1,10 @@
-import { GlobalProps } from '../../shared/model';
+import { GlobalProps, GlobalState } 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<HTMLDivElement>, keyof import("../..").GlobalProps | keyof import("./model").DBTabPanelDefaultProps> & import("./model").DBTabPanelDefaultProps & import("../..").GlobalProps & React.RefAttributes<HTMLDivElement>>;
+declare const DBTabPanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "content" | keyof import("../..").GlobalProps> & import("./model").DBTabPanelDefaultProps & import("../..").GlobalProps & React.RefAttributes<any>>;
 export default DBTabPanel;

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

@@ -1,12 +1,13 @@
 "use client";
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
+import { useRef, useEffect, forwardRef } from "react";
 import { cls } from "../../utils";
 function DBTabPanelFn(props, component) {
     var _a, _b;
     const _ref = component || useRef(component);
-    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 }),
+    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 }),
         props.content ? React.createElement(React.Fragment, null, props.content) : null,
         props.children));
 }

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

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

package/dist/components/tabs/tabs.js

@@ -9,414 +9,172 @@ 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;
-    props = Object.assign({ tabItemWidth: "auto", tabItemAlignment: "start", scrollStartLabel: "Scroll start", scrollEndLabel: "Scroll end" }, props);
+    var _a, _b, _c, _d, _e, _f;
     const uuid = useId();
     const _ref = component || useRef(component);
-    const [_generatedId, set_generatedId] = useState(() => "tabs-" + uuid);
-    const [_generatedName, set_generatedName] = useState(() => uuid);
-    const [activeTabIndex, setActiveTabIndex] = useState(() => 0);
+    const [_name, set_name] = useState(() => "");
     const [initialized, setInitialized] = useState(() => false);
-    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() {
+    const [showScrollLeft, setShowScrollLeft] = useState(() => false);
+    const [showScrollRight, setShowScrollRight] = useState(() => false);
+    const [scrollContainer, setScrollContainer] = useState(() => null);
+    const [_resizeObserver, set_resizeObserver] = useState(() => undefined);
+    function convertTabs() {
         try {
             if (typeof props.tabs === "string") {
-                set_cachedTabs(JSON.parse(props.tabs));
-            }
-            else if (props.tabs) {
-                set_cachedTabs(props.tabs);
-            }
-            else {
-                set_cachedTabs([]);
+                return JSON.parse(props.tabs);
             }
+            return props.tabs;
         }
         catch (error) {
             console.error(error);
-            set_cachedTabs([]);
         }
-    }
-    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");
+        return [];
     }
     function evaluateScrollButtons(tList) {
         const needsScroll = 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);
+        setShowScrollLeft(needsScroll && tList.scrollLeft > 1);
+        setShowScrollRight(needsScroll && tList.scrollLeft < tList.scrollWidth - tList.clientWidth);
     }
-    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) {
+    function scroll(left) {
+        let step = Number(props.arrowScrollDistance) || 100;
+        if (left) {
             step *= -1;
         }
-        container.scrollBy({
+        scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollBy({
+            top: 0,
             left: step,
             behavior: "smooth",
         });
     }
     function initTabList() {
-        var _a, _b;
         if (_ref.current) {
-            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(() => {
+            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", () => {
                             evaluateScrollButtons(container);
                         });
-                        observer.observe(container);
-                        set_resizeObserver(observer);
+                        // 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);
+                        }
                     }
                 }
-                if (props.name && !container.getAttribute("aria-label")) {
-                    container.setAttribute("aria-label", (_b = props.name) !== null && _b !== void 0 ? _b : "");
-                }
             }
         }
     }
-    function initTabs(activeIndex) {
-        var _a, _b;
-        const currentIndex = activeIndex !== undefined ? activeIndex : activeTabIndex;
+    function initTabs(init) {
         if (_ref.current) {
-            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;
+            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}`);
+                        }
                     }
-                    if (!panel.getAttribute("aria-label") &&
-                        !panel.getAttribute("aria-labelledby")) {
-                        panel.setAttribute("aria-labelledby", tabId);
+                    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();
+                        }
                     }
-                    // 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}`);
+            }
         }
     }
-    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;
+    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);
+                        }
+                    }
                 }
             }
         }
-        // 3. Set initial state synchronously
-        setActiveTabIndex(startIndex);
+    }
+    useEffect(() => {
+        set_name(`tabs-${props.name || uuid}`);
         setInitialized(true);
-        _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);
-                    }));
+    }, []);
+    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();
+                        }
+                    });
                 });
-                // 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, {
+                observer.observe(tabList, {
                     childList: true,
                     subtree: true,
                 });
-                set_observer(observer);
             }
+            setInitialized(false);
         }
-    }, []);
-    useEffect(() => {
-        _updateCachedTabs();
-    }, [props.tabs]);
-    useEffect(() => {
-        if (props.activeIndex !== undefined) {
-            const newIndex = Number(props.activeIndex);
-            if (!isNaN(newIndex) && newIndex !== activeTabIndex) {
-                activateTab(newIndex);
-            }
-        }
-    }, [props.activeIndex]);
+    }, [_ref.current, initialized]);
     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(null);
-            _observer === null || _observer === void 0 ? void 0 : _observer.disconnect();
-            set_observer(null);
+            set_resizeObserver(undefined);
         };
     }, []);
-    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,
+    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,
         props.tabs ? (React.createElement(React.Fragment, null,
-            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));
+            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));
 }
 const DBTabs = forwardRef(DBTabsFn);
 export default DBTabs;

package/dist/components/tooltip/tooltip.js

@@ -2,6 +2,7 @@
 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";
@@ -10,7 +11,7 @@ function DBTooltipFn(props, component) {
     var _a, _b, _c;
     const uuid = useId();
     const _ref = component || useRef(component);
-    const [_id, set_id] = useState(() => "tooltip-" + uuid);
+    const [_id, set_id] = useState(() => DEFAULT_ID);
     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 TabItemAlignmentList: readonly ["start", "center", "end"];
-export type TabItemAlignmentType = (typeof TabItemAlignmentList)[number];
-export type TabItemAlignmentProps = {
+export declare const AlignmentList: readonly ["start", "center"];
+export type AlignmentType = (typeof AlignmentList)[number];
+export type AlignmentProps = {
     /**
-     * Define the tab-item alignment in full width
+     * Define the content alignment in full width
      */
-    tabItemAlignment?: TabItemAlignmentType | string;
+    alignment?: AlignmentType | 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 TabItemAlignmentList = ['start', 'center', 'end'];
+export const AlignmentList = ['start', 'center'];

package/package.json

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