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

package/dist/collection/components/tabs/tabs.js

@@ -6,321 +6,130 @@ import { h, Fragment, } from "@stencil/core";
  */
 export class DBTabs {
     constructor() {
-        this.tabItemAlignment = "start";
-        this.tabItemWidth = "auto";
-        this.scrollStartLabel = "Scroll start";
-        this.scrollEndLabel = "Scroll end";
-        this._generatedId = "tabs-" + uuid();
-        this._generatedName = uuid();
-        this.activeTabIndex = 0;
+        this._name = "";
         this.initialized = false;
-        this.showScrollStart = false;
-        this.showScrollEnd = false;
-        this._resizeObserver = null;
-        this._observer = null;
-        this._pendingRafId = null;
-        this._scrollListener = null;
-        this._cachedTabs = [];
+        this.showScrollLeft = false;
+        this.showScrollRight = false;
+        this.scrollContainer = null;
+        this._resizeObserver = undefined;
     }
-    _id() {
-        return this.id || this._generatedId;
-    }
-    _name() {
-        return "tabs-" + (this.name || this._generatedName);
-    }
-    getTabId(index) {
-        return `${this._name()}-tab-${index}`;
-    }
-    getPanelId(index) {
-        return `${this._name()}-tab-panel-${index}`;
-    }
-    activateTab(index) {
-        var _a, _b, _c;
-        // Prevent activating a disabled tab
-        if (this._ref) {
-            const tabList = this._ref.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 (this.activeTabIndex !== index) {
-            this.activeTabIndex = index;
-            if (this.indexChange) {
-                this.indexChange.emit(index);
-            }
-            // Emit value of the newly active tab item if value props are set
-            if (this.valueChange) {
-                const tabList = (_a = this._ref) === 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"];
-                this.valueChange.emit(value);
-            }
-            this.initTabs(index);
-        }
-    }
-    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 (this.tabs) {
-            return;
-        }
-        const target = event.target;
-        const button = target.closest('[role="tab"]');
-        if (!button || !this._ref)
-            return;
-        const tabList = (_a = this._ref) === 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();
-            this.activateTab(index);
-        }
-    }
-    handleKeyDown(event) {
-        var _a;
-        if (!this._ref)
-            return;
-        const key = event.key;
-        const navigationKeys = [
-            "ArrowRight",
-            "ArrowDown",
-            "ArrowLeft",
-            "ArrowUp",
-            "Home",
-            "End",
-            "Enter",
-            " ",
-        ];
-        if (!navigationKeys.includes(key)) {
-            return;
-        }
-        const tabList = this._ref.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 = this.activeTabIndex;
-        }
-        if (buttons.length > 0) {
-            // handle activation (enter / space) -> change panel
-            if (key === "Enter" || key === " ") {
-                event.preventDefault();
-                this.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();
-                }
-            }
-        }
-    }
-    isIndexActive(index) {
-        return this.activeTabIndex === Number(index);
-    }
-    getTabItemTabIndex(index) {
-        const i = Number(index);
-        // only the active tab should be reachable via Tab key
-        return this.activeTabIndex === i || (this.activeTabIndex === -1 && i === 0)
-            ? 0
-            : -1;
-    }
-    _updateCachedTabs() {
+    convertTabs() {
         try {
             if (typeof this.tabs === "string") {
-                this._cachedTabs = JSON.parse(this.tabs);
-            }
-            else if (this.tabs) {
-                this._cachedTabs = this.tabs;
-            }
-            else {
-                this._cachedTabs = [];
+                return JSON.parse(this.tabs);
             }
+            return this.tabs;
         }
         catch (error) {
             console.error(error);
-            this._cachedTabs = [];
         }
-    }
-    _getScrollContainer() {
-        var _a, _b;
-        return (_b = (_a = this._ref) === null || _a === void 0 ? void 0 : _a.querySelector('[role="tablist"]')) !== null && _b !== void 0 ? _b : null;
-    }
-    _isRtl() {
-        const container = this._getScrollContainer();
-        return (!!container &&
-            typeof getComputedStyle !== "undefined" &&
-            getComputedStyle(container).direction === "rtl");
+        return [];
     }
     evaluateScrollButtons(tList) {
         const needsScroll = tList.scrollWidth > tList.clientWidth;
-        if (!needsScroll) {
-            this.showScrollStart = false;
-            this.showScrollEnd = 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
-        this.showScrollStart = scrollPos > tolerance;
-        this.showScrollEnd = scrollPos < maxScroll - tolerance;
+        this.showScrollLeft = needsScroll && tList.scrollLeft > 1;
+        this.showScrollRight =
+            needsScroll && tList.scrollLeft < tList.scrollWidth - tList.clientWidth;
     }
-    scroll(toStart) {
-        const container = this._getScrollContainer();
-        if (!container) {
-            return;
-        }
-        let step = Number(this.arrowScrollDistance) || 120;
-        const isLeft = !!toStart;
-        const isRtl = this._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) {
+    scroll(left) {
+        var _a;
+        let step = Number(this.arrowScrollDistance) || 100;
+        if (left) {
             step *= -1;
         }
-        container.scrollBy({
+        (_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.scrollBy({
+            top: 0,
             left: step,
             behavior: "smooth",
         });
     }
     initTabList() {
-        var _a, _b;
         if (this._ref) {
-            const container = this._ref.querySelector('[role="tablist"]');
-            if (container) {
-                if (!container.getAttribute("aria-orientation")) {
-                    container.setAttribute("aria-orientation", (_a = this.orientation) !== null && _a !== void 0 ? _a : "horizontal");
-                }
-                if (this.behavior === "arrows") {
-                    this.evaluateScrollButtons(container);
-                    const _listener = this._scrollListener;
-                    if (_listener && container) {
-                        container.removeEventListener("scroll", _listener.fn);
-                        this._scrollListener = null;
-                    }
-                    const onScroll = () => this.evaluateScrollButtons(container);
-                    this._scrollListener = {
-                        fn: onScroll,
-                    };
-                    container.addEventListener("scroll", onScroll);
-                    if (!this._resizeObserver) {
-                        const observer = new ResizeObserver(() => {
+            const tabList = this._ref.querySelector(".db-tab-list");
+            if (tabList) {
+                const container = tabList.querySelector('[role="tablist"]');
+                if (container) {
+                    container.setAttribute("aria-orientation", this.orientation || "horizontal");
+                    if (this.behavior === "arrows") {
+                        this.scrollContainer = container;
+                        this.evaluateScrollButtons(container);
+                        container.addEventListener("scroll", () => {
                             this.evaluateScrollButtons(container);
                         });
-                        observer.observe(container);
-                        this._resizeObserver = observer;
+                        // Use ResizeObserver to re-evaluate scroll buttons because it provides more accurate, container-specific resize detection than global window resize events.
+                        if (!this._resizeObserver) {
+                            const observer = new ResizeObserver(() => {
+                                this.evaluateScrollButtons(container);
+                            });
+                            observer.observe(container);
+                            this._resizeObserver = observer;
+                        }
                     }
                 }
-                if (this.name && !container.getAttribute("aria-label")) {
-                    container.setAttribute("aria-label", (_b = this.name) !== null && _b !== void 0 ? _b : "");
-                }
             }
         }
     }
-    initTabs(activeIndex) {
-        var _a, _b;
-        const currentIndex = activeIndex !== undefined ? activeIndex : this.activeTabIndex;
+    initTabs(init) {
         if (this._ref) {
-            const tabListEl = this._ref.querySelector('[role="tablist"]');
-            const panels = Array.from((_b = (_a = this._ref) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="tabpanel"]')) !== null && _b !== void 0 ? _b : []).filter((panel) => panel.closest(".db-tabs") === this._ref);
-            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 || this.getTabId(index);
-                const panelId = (panel === null || panel === void 0 ? void 0 : panel.id) || this.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(this._ref.getElementsByClassName("db-tab-item"));
+            const tabPanels = Array.from(this._ref.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 = `${this._name}-tab-${index}`;
+                        label.setAttribute("for", tabId);
+                        input.id = tabId;
+                        input.setAttribute("name", this._name);
+                        if (tabPanels.length > index) {
+                            input.setAttribute("aria-controls", `${this._name}-tab-panel-${index}`);
+                        }
                     }
-                    if (!panel.getAttribute("aria-label") &&
-                        !panel.getAttribute("aria-labelledby")) {
-                        panel.setAttribute("aria-labelledby", tabId);
+                    if (init) {
+                        // Auto select
+                        const autoSelect = !this.initialSelectedMode || this.initialSelectedMode === "auto";
+                        const shouldAutoSelect = (this.initialSelectedIndex == null && index === 0) ||
+                            Number(this.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 = `${this._name}-tab-panel-${index}`;
+                panel.setAttribute("aria-labelledby", `${this._name}-tab-${index}`);
+            }
+        }
+    }
+    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.parentElement;
+                if (tabItem) {
+                    const list = tabItem.parentElement;
+                    if (list) {
+                        const tabIndex = Array.from(list.children).indexOf(tabItem);
+                        if (this.indexChange) {
+                            this.indexChange.emit(tabIndex);
+                        }
+                        if (this.tabSelect) {
+                            this.tabSelect.emit(event);
+                        }
+                    }
+                }
+            }
         }
     }
     /**
@@ -360,162 +169,51 @@ export class DBTabs {
         }
     }
     watch0Fn() {
-        this._updateCachedTabs();
-    }
-    watch0() {
-        this.watch0Fn();
-    }
-    watch1Fn() {
-        if (this.activeIndex !== undefined) {
-            const newIndex = Number(this.activeIndex);
-            if (!isNaN(newIndex) && newIndex !== this.activeTabIndex) {
-                this.activateTab(newIndex);
-            }
-        }
-    }
-    watch1() {
-        this.watch1Fn();
-    }
-    componentDidLoad() {
-        this.enableAttributePassing(this._ref, "db-tabs");
-        // 1. Calculate final start index synchronously to avoid race conditions
-        let startIndex = 0;
-        if (this.initialSelectedIndex !== undefined) {
-            const parsedIndex = Number(this.initialSelectedIndex);
-            startIndex = isNaN(parsedIndex) ? 0 : parsedIndex;
-        }
-        else if (this.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 = this.name ? "tabs-" + this.name : this._name();
-            const prefix = `${name}-tab-`;
-            if (hashId.startsWith(prefix)) {
-                const indexStr = hashId.replace(prefix, "");
-                const index = parseInt(indexStr, 10);
-                if (!isNaN(index)) {
-                    startIndex = index;
-                }
-            }
-        }
-        // 3. Set initial state synchronously
-        this.activeTabIndex = startIndex;
-        this.initialized = true;
-        this._updateCachedTabs();
-        // 4. Trigger single initial DOM update after paint
-        if (typeof window !== "undefined") {
-            requestAnimationFrame(() => {
-                this.initTabList();
-                this.initTabs(startIndex);
-            });
-        }
-        if (this._ref) {
-            const tabListEl = this._ref.querySelector('[role="tablist"]');
-            if (tabListEl) {
-                const observer = new MutationObserver(() => {
-                    const rafId = this._pendingRafId;
-                    if (rafId !== null)
-                        cancelAnimationFrame(rafId);
-                    this._pendingRafId = requestAnimationFrame(() => {
-                        this._pendingRafId = null;
-                        this.initTabList();
-                        this.initTabs(this.activeTabIndex);
+        if (this._ref && this.initialized) {
+            this.initTabList();
+            this.initTabs(true);
+            const tabList = this._ref.querySelector(".db-tab-list");
+            if (tabList) {
+                const observer = new MutationObserver((mutations) => {
+                    mutations.forEach((mutation) => {
+                        if (mutation.removedNodes.length || mutation.addedNodes.length) {
+                            this.initTabList();
+                            this.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,
                 });
-                this._observer = observer;
             }
+            this.initialized = false;
         }
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-tabs");
+        this._name = `tabs-${this.name || uuid()}`;
+        this.initialized = true;
         this.watch0Fn();
-        this.watch1Fn();
     }
     disconnectedCallback() {
-        var _a, _b;
-        const rafId = this._pendingRafId;
-        if (rafId !== null) {
-            cancelAnimationFrame(rafId);
-            this._pendingRafId = null;
-        }
-        const _listener = this._scrollListener;
-        const _container = this._getScrollContainer();
-        if (_listener && _container) {
-            _container.removeEventListener("scroll", _listener.fn);
-        }
+        var _a;
         (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this._resizeObserver = null;
-        (_b = this._observer) === null || _b === void 0 ? void 0 : _b.disconnect();
-        this._observer = null;
+        this._resizeObserver = undefined;
     }
     render() {
-        var _a, _b, _c, _d, _e;
-        return (h("div", { key: '8d9608e7d9255b3bc138ee4c50f1fdfb0b09ba72', class: cls("db-tabs", this.className), ref: (el) => {
+        var _a, _b, _c, _d, _e, _f;
+        return (h("div", { key: '20d8d662866ff60717de87ad4deb98a3b647672a', class: cls("db-tabs", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_c = (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : this._id(), "data-orientation": this.orientation, "data-scroll-behavior": this.behavior, "data-tab-item-alignment": this.tabItemAlignment, "data-tab-item-width": this.tabItemWidth, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.showScrollStart ? (h("db-button", { class: "tabs-scroll-start", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: () => this.scroll(true) }, this.scrollStartLabel)) : null, this.tabs ? (h(Fragment, null, h("db-tab-list", { orientation: this.orientation, ariaLabel: this.name }, (_d = this._cachedTabs) === null || _d === void 0 ? void 0 : _d.map((tab, index) => (h("db-tab-item", { key: this.name + "tab-item" + index, id: this.getTabId(index), ariaControls: this.getPanelId(index), active: this.isIndexActive(index), tabIndex: this.getTabItemTabIndex(index), label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText, onClick: () => this.activateTab(index) })))), (_e = this._cachedTabs) === null || _e === void 0 ? void 0 :
-            _e.map((tab, index) => (h("db-tab-panel", { key: this.name + "tab-panel" + index, id: this.getPanelId(index), ariaLabelledby: this.getTabId(index), content: tab.content, hidden: !this.isIndexActive(index) }, tab.children))))) : null, !this.tabs ? h("slot", null) : null, this.showScrollEnd ? (h("db-button", { class: "tabs-scroll-end", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll(false) }, this.scrollEndLabel)) : null));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-orientation": this.orientation, "data-scroll-behavior": this.behavior, "data-alignment": (_c = this.alignment) !== null && _c !== void 0 ? _c : "start", "data-width": (_d = this.width) !== null && _d !== void 0 ? _d : "auto", onInput: (event) => this.handleChange(event), onChange: (event) => this.handleChange(event) }, this.showScrollLeft ? (h("db-button", { class: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: () => this.scroll(true) }, "Scroll left")) : null, this.tabs ? (h(Fragment, null, h("db-tab-list", null, (_e = this.convertTabs()) === null || _e === void 0 ? void 0 : _e.map((tab, index) => (h("db-tab-item", { key: this.name + "tab-item" + index, active: tab.active, label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText })))), (_f = this.convertTabs()) === null || _f === void 0 ? void 0 :
+            _f.map((tab, index) => (h("db-tab-panel", { key: this.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, h("slot", { key: 'f9803a647f9a01adc0b20eb6bdb999f38c3602af' })));
     }
     static get is() { return "db-tabs"; }
     static get properties() {
         return {
-            "initialSelectedIndex": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBTabsProps[\"initialSelectedIndex\"]",
-                    "resolved": "number | string",
-                    "references": {
-                        "DBTabsProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/tabs/model.ts::DBTabsProps",
-                            "referenceLocation": "DBTabsProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "initial-selected-index"
-            },
-            "initialSelectedMode": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBTabsProps[\"initialSelectedMode\"]",
-                    "resolved": "\"auto\" | \"manually\"",
-                    "references": {
-                        "DBTabsProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/tabs/model.ts::DBTabsProps",
-                            "referenceLocation": "DBTabsProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "initial-selected-mode"
-            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -568,11 +266,11 @@ export class DBTabs {
                 "reflect": false,
                 "attribute": "tabs"
             },
-            "activeIndex": {
+            "arrowScrollDistance": {
                 "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"activeIndex\"]",
+                    "original": "DBTabsProps[\"arrowScrollDistance\"]",
                     "resolved": "number | string",
                     "references": {
                         "DBTabsProps": {
@@ -592,14 +290,14 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "active-index"
+                "attribute": "arrow-scroll-distance"
             },
-            "id": {
+            "orientation": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"id\"]",
-                    "resolved": "string",
+                    "original": "DBTabsProps[\"orientation\"]",
+                    "resolved": "\"horizontal\" | \"vertical\"",
                     "references": {
                         "DBTabsProps": {
                             "location": "import",
@@ -618,14 +316,14 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "id"
+                "attribute": "orientation"
             },
-            "arrowScrollDistance": {
-                "type": "any",
+            "behavior": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"arrowScrollDistance\"]",
-                    "resolved": "number | string",
+                    "original": "DBTabsProps[\"behavior\"]",
+                    "resolved": "\"arrows\" | \"scrollbar\"",
                     "references": {
                         "DBTabsProps": {
                             "location": "import",
@@ -644,14 +342,14 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "arrow-scroll-distance"
+                "attribute": "behavior"
             },
-            "orientation": {
+            "initialSelectedMode": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"orientation\"]",
-                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "original": "DBTabsProps[\"initialSelectedMode\"]",
+                    "resolved": "\"auto\" | \"manually\"",
                     "references": {
                         "DBTabsProps": {
                             "location": "import",
@@ -670,14 +368,14 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "orientation"
+                "attribute": "initial-selected-mode"
             },
-            "behavior": {
-                "type": "string",
+            "initialSelectedIndex": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"behavior\"]",
-                    "resolved": "\"arrows\" | \"scrollbar\"",
+                    "original": "DBTabsProps[\"initialSelectedIndex\"]",
+                    "resolved": "number | string",
                     "references": {
                         "DBTabsProps": {
                             "location": "import",
@@ -696,37 +394,13 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "behavior"
-            },
-            "propOverrides": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBTabsProps[\"propOverrides\"]",
-                    "resolved": "{ id?: string; }",
-                    "references": {
-                        "DBTabsProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/tabs/model.ts::DBTabsProps",
-                            "referenceLocation": "DBTabsProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
+                "attribute": "initial-selected-index"
             },
-            "className": {
+            "id": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"className\"]",
+                    "original": "DBTabsProps[\"id\"]",
                     "resolved": "string",
                     "references": {
                         "DBTabsProps": {
@@ -746,14 +420,14 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "classname"
+                "attribute": "id"
             },
-            "tabItemAlignment": {
-                "type": "string",
+            "propOverrides": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"tabItemAlignment\"]",
-                    "resolved": "string",
+                    "original": "DBTabsProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
                     "references": {
                         "DBTabsProps": {
                             "location": "import",
@@ -770,16 +444,13 @@ export class DBTabs {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tab-item-alignment",
-                "defaultValue": "\"start\""
+                "setter": false
             },
-            "tabItemWidth": {
+            "className": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"tabItemWidth\"]",
+                    "original": "DBTabsProps[\"className\"]",
                     "resolved": "string",
                     "references": {
                         "DBTabsProps": {
@@ -799,14 +470,13 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "tab-item-width",
-                "defaultValue": "\"auto\""
+                "attribute": "classname"
             },
-            "scrollStartLabel": {
+            "alignment": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"scrollStartLabel\"]",
+                    "original": "DBTabsProps[\"alignment\"]",
                     "resolved": "string",
                     "references": {
                         "DBTabsProps": {
@@ -826,14 +496,13 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "scroll-start-label",
-                "defaultValue": "\"Scroll start\""
+                "attribute": "alignment"
             },
-            "scrollEndLabel": {
+            "width": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"scrollEndLabel\"]",
+                    "original": "DBTabsProps[\"width\"]",
                     "resolved": "string",
                     "references": {
                         "DBTabsProps": {
@@ -853,24 +522,18 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "scroll-end-label",
-                "defaultValue": "\"Scroll end\""
+                "attribute": "width"
             }
         };
     }
     static get states() {
         return {
-            "_generatedId": {},
-            "_generatedName": {},
-            "activeTabIndex": {},
+            "_name": {},
             "initialized": {},
-            "showScrollStart": {},
-            "showScrollEnd": {},
-            "_resizeObserver": {},
-            "_observer": {},
-            "_pendingRafId": {},
-            "_scrollListener": {},
-            "_cachedTabs": {}
+            "showScrollLeft": {},
+            "showScrollRight": {},
+            "scrollContainer": {},
+            "_resizeObserver": {}
         };
     }
     static get events() {
@@ -890,8 +553,8 @@ export class DBTabs {
                     "references": {}
                 }
             }, {
-                "method": "valueChange",
-                "name": "valueChange",
+                "method": "tabSelect",
+                "name": "tabSelect",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -908,11 +571,11 @@ export class DBTabs {
     }
     static get watchers() {
         return [{
-                "propName": "tabs",
+                "propName": "_ref",
                 "methodName": "watch0"
             }, {
-                "propName": "activeIndex",
-                "methodName": "watch1"
+                "propName": "initialized",
+                "methodName": "watch0"
             }];
     }
 }