@db-ux/wc-core-components 4.10.2 → 4.11.1

package/dist/esm/db-stack.entry.js

@@ -1,9 +1,30 @@
-import { r as registerInstance, h, g as getElement } from './index-BGaQ0Bx8.js';
-import { g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
+import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
+import { g as getBooleanAsString, c as cls } from './index-fumiz06Y.js';
 
 const DBStack = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-stack");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-stack");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -18,10 +39,15 @@ const DBStack = class {
                 const attr = attributes.item(i);
                 if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
-                    element.setAttribute(attr.name, attr.value);
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
                     parent.removeAttribute(attr.name);
                 }
-                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                else if (attr && ["style"].includes(attr.name)) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
@@ -29,7 +55,7 @@ const DBStack = class {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
-                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
                     if (isWebComponent) {
                         // Stencil is using this class for lazy loading component
                         parent.setAttribute("class", "hydrated");
@@ -49,12 +75,17 @@ const DBStack = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-stack");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '87f4f22cbfd4355da58ace757805c9e29758eb6d', class: cls("db-stack", this.className), ref: (el) => {
+        return (h("div", { key: '02389c1bd26917e0176c95ce3e38e7ef664813e7', class: cls("db-stack", 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-gap": this.gap, "data-variant": this.variant, "data-direction": this.direction, "data-alignment": this.alignment, "data-justify-content": this.justifyContent, "data-wrap": getBooleanAsString(this.wrap) }, h("slot", { key: '391ff9ee8a52408fa9830e0f5a30fd86a249a102' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-gap": this.gap, "data-variant": this.variant, "data-direction": this.direction, "data-alignment": this.alignment, "data-justify-content": this.justifyContent, "data-wrap": getBooleanAsString(this.wrap, "wrap") }, h("slot", { key: '70b94e0558c79bc76096be335af95029ad2cbe5c' })));
     }
     get rootElement() { return getElement(this); }
 };

package/dist/esm/db-switch.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BGaQ0Bx8.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BlbKvvUv.js';
 import { l as DEFAULT_INVALID_MESSAGE, f as DEFAULT_MESSAGE_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE } from './constants-BdL-nI5y.js';
-import { h as hasVoiceOver, d as delay, s as stringPropVisible, u as uuid, e as getBoolean, l as getHideProp, g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
-import { a as addCheckedResetEventListener } from './form-components-D6LQfJvq.js';
+import { h as hasVoiceOver, d as delay, s as stringPropVisible, u as uuid, e as getBoolean, l as getHideProp, g as getBooleanAsString, c as cls } from './index-fumiz06Y.js';
+import { a as addCheckedResetEventListener } from './form-components-ZV7IN0oG.js';
 
 const DBSwitch = class {
     constructor(hostRef) {
@@ -17,6 +17,7 @@ const DBSwitch = class {
         this._descByIds = undefined;
         this._voiceOverFallback = "";
         this.abortController = undefined;
+        this.observer = undefined;
     }
     hasValidState() {
         var _a;
@@ -33,7 +34,7 @@ const DBSwitch = class {
             if (hasVoiceOver()) {
                 this._voiceOverFallback =
                     this._invalidMessage || DEFAULT_INVALID_MESSAGE;
-                delay(() => {
+                void delay(() => {
                     this._voiceOverFallback = "";
                 }, 1000);
             }
@@ -43,7 +44,7 @@ const DBSwitch = class {
             this._descByIds = this._validMessageId;
             if (hasVoiceOver()) {
                 this._voiceOverFallback = (_f = this.validMessage) !== null && _f !== void 0 ? _f : DEFAULT_VALID_MESSAGE;
-                delay(() => {
+                void delay(() => {
                     this._voiceOverFallback = "";
                 }, 1000);
             }
@@ -90,6 +91,26 @@ const DBSwitch = class {
         this._validMessageId = `${mId}${DEFAULT_VALID_MESSAGE_ID_SUFFIX}`;
         this._invalidMessageId = `${mId}${DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`;
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-switch");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-switch");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -103,10 +124,15 @@ const DBSwitch = class {
                 const attr = attributes.item(i);
                 if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
-                    element.setAttribute(attr.name, attr.value);
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
                     parent.removeAttribute(attr.name);
                 }
-                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                else if (attr && ["style"].includes(attr.name)) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
@@ -114,7 +140,7 @@ const DBSwitch = class {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
-                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
                     if (isWebComponent) {
                         // Stencil is using this class for lazy loading component
                         parent.setAttribute("class", "hydrated");
@@ -178,23 +204,31 @@ const DBSwitch = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-switch");
-        this.resetIds();
-        this.handleValidation();
-        this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;
+        const onMountHook_0 = () => {
+            this.resetIds();
+            this.handleValidation();
+            this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
         this.watch1Fn();
         this.watch2Fn();
         this.watch3Fn();
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+        (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     render() {
         var _a, _b;
-        return (h("div", { key: 'c82a033ffefd600a9c96ea487d9fd909ff1b72de', class: cls("db-switch", this.className), "data-visual-aid": getBooleanAsString(this.visualAid), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, h("label", { key: 'c1047871716d0d24f026c8ffaf37581a2b080375', htmlFor: this._id }, h("input", { key: '883712cbfdd95c525ea615270546e2127f9bdbf8', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
+        return (h("div", { key: 'e95dafb6d580ef8cfbd54b91ee77da4809984862', class: cls("db-switch", this.className), "data-visual-aid": getBooleanAsString(this.visualAid, "visualAid"), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, h("label", { key: '533173f9a522375012848dbff80b0e357f5e1b30', htmlFor: this._id }, h("input", { key: '68e6d40e2b5654508d8ebaf9be66dd56aa39c8f2', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
                 this._ref = el;
-            }, checked: getBoolean(this.checked, "checked"), value: this.value, disabled: getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: getBoolean(this.required, "required"), "data-aid-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-aid-icon-trailing": this.iconTrailing, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => this.handleKeyDown(event) }), this.label ? this.label : null, h("slot", { key: '106b299aca93a4e6498c74e7c43df87564122c40' })), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'e2848f2de604908a0e05fbb0cde3c77a36adcc4e', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '37bcc9cd24041762a62822d118803b0eef247f12', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, checked: getBoolean(this.checked, "checked"), value: this.value, disabled: getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: getBoolean(this.required, "required"), "data-aid-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-aid-icon-trailing": this.iconTrailing, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => this.handleKeyDown(event) }), this.label ? this.label : null, h("slot", { key: 'a89d78f024905190780c3c8436773ab710115857' })), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'e170d8c368afd61c7c94c10bb2ea13fe4520d692', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'd8a5b8e7a5e0f70f245de5756f7b2d19640b4863', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/db-tab-item_3.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BGaQ0Bx8.js';
-import { g as getBooleanAsString, e as getBoolean, c as cls } from './index-xkoBSP8R.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BlbKvvUv.js';
+import { g as getBooleanAsString, e as getBoolean, c as cls } from './index-fumiz06Y.js';
 
 const DBTabItem = class {
     constructor(hostRef) {
@@ -10,10 +10,11 @@ const DBTabItem = class {
         this.initialized = false;
         this._listenerAdded = false;
         this.boundSetSelectedOnChange = undefined;
+        this.observer = undefined;
     }
     setSelectedOnChange(event) {
         event.stopPropagation();
-        this._selected = getBooleanAsString(event.target === this._ref);
+        this._selected = getBooleanAsString(event.target === this._ref, "selected");
     }
     handleNameAttribute() {
         if (this._ref) {
@@ -31,6 +32,26 @@ const DBTabItem = class {
             this.change.emit(event);
         }
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-tab-item");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-tab-item");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -44,10 +65,15 @@ const DBTabItem = class {
                 const attr = attributes.item(i);
                 if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
-                    element.setAttribute(attr.name, attr.value);
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
                     parent.removeAttribute(attr.name);
                 }
-                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                else if (attr && ["style"].includes(attr.name)) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
@@ -55,7 +81,7 @@ const DBTabItem = class {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
-                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
                     if (isWebComponent) {
                         // Stencil is using this class for lazy loading component
                         parent.setAttribute("class", "hydrated");
@@ -79,7 +105,7 @@ const DBTabItem = class {
             }
             // Initialize selected state from either active prop (set by parent) or checked attribute
             if (this.active || this._ref.checked) {
-                this._selected = getBooleanAsString(true);
+                this._selected = getBooleanAsString(true, "selected");
                 this._ref.click();
             }
         }
@@ -103,24 +129,33 @@ const DBTabItem = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-tab-item");
-        this.boundSetSelectedOnChange = this.setSelectedOnChange.bind(this);
-        this.initialized = true;
+        const onMountHook_0 = () => {
+            this.boundSetSelectedOnChange = this.setSelectedOnChange.bind(this);
+            this.initialized = true;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
         this.watch1Fn();
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         if (this._listenerAdded && this._ref && this.boundSetSelectedOnChange) {
             (_a = this._ref
                 .closest("[role=tablist]")) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", this.boundSetSelectedOnChange);
             this._listenerAdded = false;
         }
+        (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     render() {
-        var _a, _b, _c, _d, _e, _f;
-        return (h("li", { key: '8f237a10d09644e2bad44ff457e5ae7bb6ed80f3', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: '530c603c5927f732cc76920537fe169a15ebbd4c', htmlFor: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-icon-trailing": this.iconTrailing, "data-show-icon": getBooleanAsString((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-no-text": getBooleanAsString(this.noText) }, h("input", { key: '8551abf9afc26bb0edfb9a8f94adb21f5c95bf4e', type: "radio", role: "tab", disabled: getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: getBoolean(this.checked, "checked"), ref: (el) => {
+        var _a, _b, _c, _d, _e;
+        return (h("li", { key: '003e5b968c65ba01df1b97e8f75592aee31125d9', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: '682e5a3cf7036abcbbbbbba9f42ce534d7a4145d', htmlFor: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-icon-trailing": this.iconTrailing, "data-show-icon": getBooleanAsString(this.showIconLeading, "showIconLeading") ||
+                getBooleanAsString(this.showIcon, "showIcon"), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-no-text": getBooleanAsString(this.noText, "noText") }, h("input", { key: 'ffb91a8e7248a8e5a2a7a05c6828fc6203e1eb37', type: "radio", role: "tab", disabled: getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: getBoolean(this.checked, "checked"), ref: (el) => {
                 this._ref = el;
-            }, name: this._name, id: (_e = this.id) !== null && _e !== void 0 ? _e : (_f = this.propOverrides) === null || _f === void 0 ? void 0 : _f.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, h("slot", { key: '4f1f678c9edcef4f977f3677903b682f5bf723b4' }))));
+            }, name: this._name, id: (_d = this.id) !== null && _d !== void 0 ? _d : (_e = this.propOverrides) === null || _e === void 0 ? void 0 : _e.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, h("slot", { key: '2d079503cd365448cd054e05bfaec608ff476e04' }))));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {
@@ -142,6 +177,27 @@ const DBTabItem = class {
 const DBTabList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-tab-list");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-tab-list");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -156,10 +212,15 @@ const DBTabList = class {
                 const attr = attributes.item(i);
                 if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
-                    element.setAttribute(attr.name, attr.value);
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
                     parent.removeAttribute(attr.name);
                 }
-                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                else if (attr && ["style"].includes(attr.name)) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
@@ -167,7 +228,7 @@ const DBTabList = class {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
-                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
                     if (isWebComponent) {
                         // Stencil is using this class for lazy loading component
                         parent.setAttribute("class", "hydrated");
@@ -187,12 +248,17 @@ const DBTabList = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-tab-list");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b;
-        return (h("div", { key: 'ce54a7c3bef0090cf7aa0d6b11fedd6d3b4bbd07', class: cls("db-tab-list", this.className), ref: (el) => {
+        return (h("div", { key: '2538ba05ecad54c8c29dda93a08acb61faf02309', class: cls("db-tab-list", 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 }, h("ul", { key: '8ac107177182afdde5163dee58917fa69b75e40c', role: "tablist" }, h("slot", { key: '0d53d4b529c439784d7c66894b967b41fb9eb38d' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("ul", { key: '86824302eb2cc92ca45a61d8bdec0f34cd679db6', role: "tablist" }, h("slot", { key: 'b56406b1e0291a29905b599531c0dccd9c035504' }))));
     }
     get rootElement() { return getElement(this); }
 };
@@ -200,6 +266,27 @@ const DBTabList = class {
 const DBTabPanel = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-tab-panel");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-tab-panel");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -214,10 +301,15 @@ const DBTabPanel = class {
                 const attr = attributes.item(i);
                 if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
-                    element.setAttribute(attr.name, attr.value);
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
                     parent.removeAttribute(attr.name);
                 }
-                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                else if (attr && ["style"].includes(attr.name)) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
@@ -225,7 +317,7 @@ const DBTabPanel = class {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
-                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
                     if (isWebComponent) {
                         // Stencil is using this class for lazy loading component
                         parent.setAttribute("class", "hydrated");
@@ -245,12 +337,20 @@ const DBTabPanel = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-tab-panel");
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b;
-        return (h("section", { key: '86076593b5c38755ddd08bbb930bb8252b9e5e78', class: cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
+        return (h("section", { key: 'd7179207343d512194f69f6d99a34897c146c00a', class: cls("db-tab-panel", this.className), role: "tabpanel", 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 }, this.content ? this.content : null, h("slot", { key: '5069f16c7266dd495e8f9fb03c3bb69546976842' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, this.content ? this.content : null, h("slot", { key: 'dc745b430dd17f253cf9403c28f6c2cbd5b59020' })));
     }
     get rootElement() { return getElement(this); }
 };