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

package/dist/cjs/db-tabs.cjs.entry.js

@@ -7,131 +7,322 @@ const DBTabs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.indexChange = index.createEvent(this, "indexChange");
-        this.tabSelect = index.createEvent(this, "tabSelect");
-        this._name = "";
+        this.valueChange = index.createEvent(this, "valueChange");
+        this.tabItemAlignment = "start";
+        this.tabItemWidth = "auto";
+        this.scrollStartLabel = "Scroll start";
+        this.scrollEndLabel = "Scroll end";
+        this._generatedId = "tabs-" + index$1.uuid();
+        this._generatedName = index$1.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;
                 }
-            }
+            });
         }
     }
     /**
@@ -171,54 +362,113 @@ const DBTabs = class {
         }
     }
     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 || index$1.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 (index.h("div", { key: '20d8d662866ff60717de87ad4deb98a3b647672a', class: index$1.cls("db-tabs", this.className), ref: (el) => {
+        var _a, _b, _c, _d, _e;
+        return (index.h("div", { key: '8d9608e7d9255b3bc138ee4c50f1fdfb0b09ba72', class: index$1.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 ? (index.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 ? (index.h(index.Fragment, null, index.h("db-tab-list", null, (_e = this.convertTabs()) === null || _e === void 0 ? void 0 : _e.map((tab, index$1) => (index.h("db-tab-item", { key: this.name + "tab-item" + index$1, 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$1) => (index.h("db-tab-panel", { key: this.name + "tab-panel" + index$1, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (index.h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, index.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 ? (index.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 ? (index.h(index.Fragment, null, index.h("db-tab-list", { orientation: this.orientation, ariaLabel: this.name }, (_d = this._cachedTabs) === null || _d === void 0 ? void 0 : _d.map((tab, index$1) => (index.h("db-tab-item", { key: this.name + "tab-item" + index$1, id: this.getTabId(index$1), ariaControls: this.getPanelId(index$1), active: this.isIndexActive(index$1), tabIndex: this.getTabItemTabIndex(index$1), label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText, onClick: () => this.activateTab(index$1) })))), (_e = this._cachedTabs) === null || _e === void 0 ? void 0 :
+            _e.map((tab, index$1) => (index.h("db-tab-panel", { key: this.name + "tab-panel" + index$1, id: this.getPanelId(index$1), ariaLabelledby: this.getTabId(index$1), content: tab.content, hidden: !this.isIndexActive(index$1) }, tab.children))))) : null, !this.tabs ? index.h("slot", null) : null, this.showScrollEnd ? (index.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 watchers() { return {
-        "_ref": [{
+        "tabs": [{
                 "watch0": 0
             }],
-        "initialized": [{
-                "watch0": 0
+        "activeIndex": [{
+                "watch1": 0
             }]
     }; }
 };

package/dist/cjs/db-textarea.cjs.entry.js

@@ -201,10 +201,10 @@ const DBTextarea = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h("div", { key: 'e6c64857826bf80558d0b402594a66418e62ef57', class: index$1.cls("db-textarea", this.className), "data-variant": this.variant, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-hide-label": index$1.getHideProp(this.showLabel) }, index.h("label", { key: '38f6ce12d40275dd6fa5cfa64c6d2ca4c17fab8f', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("textarea", { key: '6d11324a4cfce9eeed9e1bcafe0a7edb1ee6c8ce', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
+        return (index.h("div", { key: '09bd0536df39649a7eb87c87f3402d0e626a4ffc', class: index$1.cls("db-textarea", this.className), "data-variant": this.variant, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-hide-label": index$1.getHideProp(this.showLabel) }, index.h("label", { key: 'f30242db7f91eb79b9c3f5db090ce0ad2cfc9899', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("textarea", { key: 'eec1ca9649b4daf2d8b6ba0cd9f09da21ddcd0b7', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
                 this._ref = el;
             }, id: this._id, "data-resize": this.resize, "data-hide-resizer": index$1.getHideProp((_b = this.showResizer) !== null && _b !== void 0 ? _b : true), disabled: index$1.getBoolean(this.disabled, "disabled"), required: index$1.getBoolean(this.required, "required"), readOnly: index$1.getBoolean(this.readOnly, "readOnly") ||
-                index$1.getBoolean(this.readonly, "readonly"), form: this.form, maxLength: index$1.getNumber(this.maxLength, this.maxlength), minLength: index$1.getNumber(this.minLength, this.minlength), name: this.name, wrap: this.wrap, spellcheck: this.spellCheck, autocomplete: this.autocomplete, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), value: (_d = (_c = this.value) !== null && _c !== void 0 ? _c : this._value) !== null && _d !== void 0 ? _d : "", "aria-describedby": (_e = this.ariaDescribedBy) !== null && _e !== void 0 ? _e : this._descByIds, placeholder: (_f = this.placeholder) !== null && _f !== void 0 ? _f : constants.DEFAULT_PLACEHOLDER, rows: index$1.getNumber(this.rows, constants.DEFAULT_ROWS), cols: index$1.getNumber(this.cols) }), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '16d43aeea87f6e3597c95847c037faa194875b94', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '8b407f9a60c61ac4af26d6ec5a9571d5f37ae915', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+                index$1.getBoolean(this.readonly, "readonly"), form: this.form, maxLength: index$1.getNumber(this.maxLength, this.maxlength), minLength: index$1.getNumber(this.minLength, this.minlength), name: this.name, wrap: this.wrap, spellcheck: this.spellCheck, autocomplete: this.autocomplete, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), value: (_d = (_c = this.value) !== null && _c !== void 0 ? _c : this._value) !== null && _d !== void 0 ? _d : "", "aria-describedby": (_e = this.ariaDescribedBy) !== null && _e !== void 0 ? _e : this._descByIds, placeholder: (_f = this.placeholder) !== null && _f !== void 0 ? _f : constants.DEFAULT_PLACEHOLDER, rows: index$1.getNumber(this.rows, constants.DEFAULT_ROWS), cols: index$1.getNumber(this.cols) }), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: 'a23431e70fa69dfb3cc53f5c114802c586b76628', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '936fc47a2da2c0590c5991df6ff6d2ba84342fd3', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
         "id": [{

package/dist/cjs/db-tooltip.cjs.entry.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var index = require('./index-BoC-BWt4.js');
-var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-2_9ESkQu.js');
 var documentScrollListener = require('./document-scroll-listener-ChQ7XZRk.js');
 var floatingComponents = require('./floating-components-DlstoCKH.js');
@@ -9,7 +8,7 @@ var floatingComponents = require('./floating-components-DlstoCKH.js');
 const DBTooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this._id = constants.DEFAULT_ID;
+        this._id = "tooltip-" + index$1.uuid();
         this.initialized = false;
         this._documentScrollListenerCallbackId = undefined;
         this._observer = undefined;
@@ -158,9 +157,9 @@ const DBTooltip = class {
     }
     render() {
         var _a, _b;
-        return (index.h("i", { key: 'df7b27f485e4029f51329dd73e50603f6965efb8', class: index$1.cls("db-tooltip", this.className), role: "tooltip", "aria-hidden": "true", "data-gap": "true", ref: (el) => {
+        return (index.h("i", { key: 'c96329202b5534b72d32091f25637fa0cd49e8bb', class: index$1.cls("db-tooltip", this.className), role: "tooltip", "aria-hidden": "true", "data-gap": "true", ref: (el) => {
                 this._ref = el;
-            }, id: this._id, "data-emphasis": this.emphasis, "data-wrap": index$1.getBooleanAsString(this.wrap), "data-animation": index$1.getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-delay": this.delay, "data-width": this.width, "data-show-arrow": index$1.getBooleanAsString((_b = this.showArrow) !== null && _b !== void 0 ? _b : true), "data-placement": this.placement, onClick: (event) => this.handleClick(event) }, index.h("slot", { key: '7c1aee92a530f8b0899231f55122f6109c72bc46' })));
+            }, id: this._id, "data-emphasis": this.emphasis, "data-wrap": index$1.getBooleanAsString(this.wrap), "data-animation": index$1.getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-delay": this.delay, "data-width": this.width, "data-show-arrow": index$1.getBooleanAsString((_b = this.showArrow) !== null && _b !== void 0 ? _b : true), "data-placement": this.placement, onClick: (event) => this.handleClick(event) }, index.h("slot", { key: 'ffbe2e72d2a2071c09c2dd66d694453be33c809c' })));
     }
     static get watchers() { return {
         "id": [{