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

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

@@ -7,322 +7,131 @@ const DBTabs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.indexChange = index.createEvent(this, "indexChange");
-        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.tabSelect = index.createEvent(this, "tabSelect");
+        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);
+                        }
+                    }
+                }
+            }
         }
     }
     /**
@@ -362,113 +171,54 @@ const DBTabs = class {
         }
     }
     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 || index$1.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 (index.h("div", { key: '8d9608e7d9255b3bc138ee4c50f1fdfb0b09ba72', class: index$1.cls("db-tabs", this.className), ref: (el) => {
+        var _a, _b, _c, _d, _e, _f;
+        return (index.h("div", { key: '20d8d662866ff60717de87ad4deb98a3b647672a', class: index$1.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 ? (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));
+            }, 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' })));
     }
     static get watchers() { return {
-        "tabs": [{
+        "_ref": [{
                 "watch0": 0
             }],
-        "activeIndex": [{
-                "watch1": 0
+        "initialized": [{
+                "watch0": 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: '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) => {
+        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) => {
                 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: 'a23431e70fa69dfb3cc53f5c114802c586b76628', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '936fc47a2da2c0590c5991df6ff6d2ba84342fd3', "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: '16d43aeea87f6e3597c95847c037faa194875b94', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '8b407f9a60c61ac4af26d6ec5a9571d5f37ae915', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
         "id": [{

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

@@ -1,6 +1,7 @@
 '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');
@@ -8,7 +9,7 @@ var floatingComponents = require('./floating-components-DlstoCKH.js');
 const DBTooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this._id = "tooltip-" + index$1.uuid();
+        this._id = constants.DEFAULT_ID;
         this.initialized = false;
         this._documentScrollListenerCallbackId = undefined;
         this._observer = undefined;
@@ -157,9 +158,9 @@ const DBTooltip = class {
     }
     render() {
         var _a, _b;
-        return (index.h("i", { key: 'c96329202b5534b72d32091f25637fa0cd49e8bb', class: index$1.cls("db-tooltip", this.className), role: "tooltip", "aria-hidden": "true", "data-gap": "true", ref: (el) => {
+        return (index.h("i", { key: 'df7b27f485e4029f51329dd73e50603f6965efb8', 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: 'ffbe2e72d2a2071c09c2dd66d694453be33c809c' })));
+            }, 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' })));
     }
     static get watchers() { return {
         "id": [{