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

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

@@ -6,130 +6,321 @@ import { h, Fragment, } from "@stencil/core";
  */
 export class DBTabs {
     constructor() {
-        this._name = "";
+        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.initialized = false;
-        this.showScrollLeft = false;
-        this.showScrollRight = false;
-        this.scrollContainer = null;
-        this._resizeObserver = undefined;
+        this.showScrollStart = false;
+        this.showScrollEnd = false;
+        this._resizeObserver = null;
+        this._observer = null;
+        this._pendingRafId = null;
+        this._scrollListener = null;
+        this._cachedTabs = [];
     }
-    convertTabs() {
+    _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() {
         try {
             if (typeof this.tabs === "string") {
-                return JSON.parse(this.tabs);
+                this._cachedTabs = JSON.parse(this.tabs);
+            }
+            else if (this.tabs) {
+                this._cachedTabs = this.tabs;
+            }
+            else {
+                this._cachedTabs = [];
             }
-            return this.tabs;
         }
         catch (error) {
             console.error(error);
+            this._cachedTabs = [];
         }
-        return [];
+    }
+    _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");
     }
     evaluateScrollButtons(tList) {
         const needsScroll = tList.scrollWidth > tList.clientWidth;
-        this.showScrollLeft = needsScroll && tList.scrollLeft > 1;
-        this.showScrollRight =
-            needsScroll && tList.scrollLeft < 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;
     }
-    scroll(left) {
-        var _a;
-        let step = Number(this.arrowScrollDistance) || 100;
-        if (left) {
+    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) {
             step *= -1;
         }
-        (_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.scrollBy({
-            top: 0,
+        container.scrollBy({
             left: step,
             behavior: "smooth",
         });
     }
     initTabList() {
+        var _a, _b;
         if (this._ref) {
-            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", () => {
+            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(() => {
                             this.evaluateScrollButtons(container);
                         });
-                        // 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;
-                        }
+                        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(init) {
+    initTabs(activeIndex) {
+        var _a, _b;
+        const currentIndex = activeIndex !== undefined ? activeIndex : this.activeTabIndex;
         if (this._ref) {
-            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 (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();
-                        }
-                    }
+            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;
                 }
-            }
-            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);
-                        }
+                if (!button.getAttribute("aria-controls")) {
+                    button.setAttribute("aria-controls", panelId);
+                }
+                button.dispatchEvent(new CustomEvent("aria-selected-changed", {
+                    detail: {
+                        selected: isSelected,
+                        tabIndex: currentIndex === index || (currentIndex === -1 && index === 0)
+                            ? 0
+                            : -1,
+                    },
+                }));
+                if (panel) {
+                    if (!panel.id) {
+                        panel.id = panelId;
                     }
+                    if (!panel.getAttribute("aria-label") &&
+                        !panel.getAttribute("aria-labelledby")) {
+                        panel.setAttribute("aria-labelledby", tabId);
+                    }
+                    // toggle visibility
+                    panel.hidden = !isSelected;
                 }
-            }
+            });
         }
     }
     /**
@@ -169,51 +360,162 @@ export class DBTabs {
         }
     }
     watch0Fn() {
-        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();
-                        }
-                    });
-                });
-                observer.observe(tabList, {
-                    childList: true,
-                    subtree: true,
-                });
-            }
-            this.initialized = false;
-        }
+        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");
-        this._name = `tabs-${this.name || uuid()}`;
+        // 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);
+                    });
+                });
+                // Observe only the tablist (not panel content) to avoid unnecessary
+                // re-evaluations when user content inside panels changes.
+                // childList only – attribute changes (set by initTabs) are not observed, preventing infinite loops.
+                observer.observe(tabListEl, {
+                    childList: true,
+                    subtree: true,
+                });
+                this._observer = observer;
+            }
+        }
         this.watch0Fn();
+        this.watch1Fn();
     }
     disconnectedCallback() {
-        var _a;
+        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);
+        }
         (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this._resizeObserver = undefined;
+        this._resizeObserver = null;
+        (_b = this._observer) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this._observer = null;
     }
     render() {
-        var _a, _b, _c, _d, _e, _f;
-        return (h("div", { key: '20d8d662866ff60717de87ad4deb98a3b647672a', class: cls("db-tabs", this.className), ref: (el) => {
+        var _a, _b, _c, _d, _e;
+        return (h("div", { key: '8d9608e7d9255b3bc138ee4c50f1fdfb0b09ba72', class: cls("db-tabs", this.className), ref: (el) => {
                 this._ref = el;
-            }, 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' })));
+            }, 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));
     }
     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,
@@ -266,11 +568,11 @@ export class DBTabs {
                 "reflect": false,
                 "attribute": "tabs"
             },
-            "arrowScrollDistance": {
+            "activeIndex": {
                 "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"arrowScrollDistance\"]",
+                    "original": "DBTabsProps[\"activeIndex\"]",
                     "resolved": "number | string",
                     "references": {
                         "DBTabsProps": {
@@ -290,14 +592,14 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "arrow-scroll-distance"
+                "attribute": "active-index"
             },
-            "orientation": {
+            "id": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"orientation\"]",
-                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "original": "DBTabsProps[\"id\"]",
+                    "resolved": "string",
                     "references": {
                         "DBTabsProps": {
                             "location": "import",
@@ -316,14 +618,14 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "orientation"
+                "attribute": "id"
             },
-            "behavior": {
-                "type": "string",
+            "arrowScrollDistance": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"behavior\"]",
-                    "resolved": "\"arrows\" | \"scrollbar\"",
+                    "original": "DBTabsProps[\"arrowScrollDistance\"]",
+                    "resolved": "number | string",
                     "references": {
                         "DBTabsProps": {
                             "location": "import",
@@ -342,14 +644,14 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "behavior"
+                "attribute": "arrow-scroll-distance"
             },
-            "initialSelectedMode": {
+            "orientation": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"initialSelectedMode\"]",
-                    "resolved": "\"auto\" | \"manually\"",
+                    "original": "DBTabsProps[\"orientation\"]",
+                    "resolved": "\"horizontal\" | \"vertical\"",
                     "references": {
                         "DBTabsProps": {
                             "location": "import",
@@ -368,14 +670,14 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "initial-selected-mode"
+                "attribute": "orientation"
             },
-            "initialSelectedIndex": {
-                "type": "any",
+            "behavior": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"initialSelectedIndex\"]",
-                    "resolved": "number | string",
+                    "original": "DBTabsProps[\"behavior\"]",
+                    "resolved": "\"arrows\" | \"scrollbar\"",
                     "references": {
                         "DBTabsProps": {
                             "location": "import",
@@ -394,13 +696,37 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "initial-selected-index"
+                "attribute": "behavior"
             },
-            "id": {
+            "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
+            },
+            "className": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"id\"]",
+                    "original": "DBTabsProps[\"className\"]",
                     "resolved": "string",
                     "references": {
                         "DBTabsProps": {
@@ -420,14 +746,14 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "id"
+                "attribute": "classname"
             },
-            "propOverrides": {
-                "type": "unknown",
+            "tabItemAlignment": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"propOverrides\"]",
-                    "resolved": "{ id?: string; }",
+                    "original": "DBTabsProps[\"tabItemAlignment\"]",
+                    "resolved": "string",
                     "references": {
                         "DBTabsProps": {
                             "location": "import",
@@ -444,13 +770,16 @@ export class DBTabs {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "attribute": "tab-item-alignment",
+                "defaultValue": "\"start\""
             },
-            "className": {
+            "tabItemWidth": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"className\"]",
+                    "original": "DBTabsProps[\"tabItemWidth\"]",
                     "resolved": "string",
                     "references": {
                         "DBTabsProps": {
@@ -470,13 +799,14 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "classname"
+                "attribute": "tab-item-width",
+                "defaultValue": "\"auto\""
             },
-            "alignment": {
+            "scrollStartLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"alignment\"]",
+                    "original": "DBTabsProps[\"scrollStartLabel\"]",
                     "resolved": "string",
                     "references": {
                         "DBTabsProps": {
@@ -496,13 +826,14 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "alignment"
+                "attribute": "scroll-start-label",
+                "defaultValue": "\"Scroll start\""
             },
-            "width": {
+            "scrollEndLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabsProps[\"width\"]",
+                    "original": "DBTabsProps[\"scrollEndLabel\"]",
                     "resolved": "string",
                     "references": {
                         "DBTabsProps": {
@@ -522,18 +853,24 @@ export class DBTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "width"
+                "attribute": "scroll-end-label",
+                "defaultValue": "\"Scroll end\""
             }
         };
     }
     static get states() {
         return {
-            "_name": {},
+            "_generatedId": {},
+            "_generatedName": {},
+            "activeTabIndex": {},
             "initialized": {},
-            "showScrollLeft": {},
-            "showScrollRight": {},
-            "scrollContainer": {},
-            "_resizeObserver": {}
+            "showScrollStart": {},
+            "showScrollEnd": {},
+            "_resizeObserver": {},
+            "_observer": {},
+            "_pendingRafId": {},
+            "_scrollListener": {},
+            "_cachedTabs": {}
         };
     }
     static get events() {
@@ -553,8 +890,8 @@ export class DBTabs {
                     "references": {}
                 }
             }, {
-                "method": "tabSelect",
-                "name": "tabSelect",
+                "method": "valueChange",
+                "name": "valueChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -571,11 +908,11 @@ export class DBTabs {
     }
     static get watchers() {
         return [{
-                "propName": "_ref",
+                "propName": "tabs",
                 "methodName": "watch0"
             }, {
-                "propName": "initialized",
-                "methodName": "watch0"
+                "propName": "activeIndex",
+                "methodName": "watch1"
             }];
     }
 }