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

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

@@ -1,11 +1,32 @@
 'use strict';
 
-var index = require('./index-HN8AqU2e.js');
-var index$1 = require('./index-2_9ESkQu.js');
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-spuu3sXz.js');
 
 const DBStack = class {
     constructor(hostRef) {
         index.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.
@@ -20,10 +41,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);
                 }
@@ -31,7 +57,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");
@@ -51,12 +77,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 (index.h("div", { key: '87f4f22cbfd4355da58ace757805c9e29758eb6d', class: index$1.cls("db-stack", this.className), ref: (el) => {
+        return (index.h("div", { key: '02389c1bd26917e0176c95ce3e38e7ef664813e7', class: index$1.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": index$1.getBooleanAsString(this.wrap) }, index.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": index$1.getBooleanAsString(this.wrap, "wrap") }, index.h("slot", { key: '70b94e0558c79bc76096be335af95029ad2cbe5c' })));
     }
     get rootElement() { return index.getElement(this); }
 };

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-HN8AqU2e.js');
+var index = require('./index-C313bRqJ.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-2_9ESkQu.js');
-var formComponents = require('./form-components-_ncB_U2D.js');
+var index$1 = require('./index-spuu3sXz.js');
+var formComponents = require('./form-components-CmQlkARp.js');
 
 const DBSwitch = class {
     constructor(hostRef) {
@@ -19,6 +19,7 @@ const DBSwitch = class {
         this._descByIds = undefined;
         this._voiceOverFallback = "";
         this.abortController = undefined;
+        this.observer = undefined;
     }
     hasValidState() {
         var _a;
@@ -35,7 +36,7 @@ const DBSwitch = class {
             if (index$1.hasVoiceOver()) {
                 this._voiceOverFallback =
                     this._invalidMessage || constants.DEFAULT_INVALID_MESSAGE;
-                index$1.delay(() => {
+                void index$1.delay(() => {
                     this._voiceOverFallback = "";
                 }, 1000);
             }
@@ -45,7 +46,7 @@ const DBSwitch = class {
             this._descByIds = this._validMessageId;
             if (index$1.hasVoiceOver()) {
                 this._voiceOverFallback = (_f = this.validMessage) !== null && _f !== void 0 ? _f : constants.DEFAULT_VALID_MESSAGE;
-                index$1.delay(() => {
+                void index$1.delay(() => {
                     this._voiceOverFallback = "";
                 }, 1000);
             }
@@ -92,6 +93,26 @@ const DBSwitch = class {
         this._validMessageId = `${mId}${constants.DEFAULT_VALID_MESSAGE_ID_SUFFIX}`;
         this._invalidMessageId = `${mId}${constants.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
@@ -105,10 +126,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);
                 }
@@ -116,7 +142,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");
@@ -180,23 +206,31 @@ const DBSwitch = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-switch");
-        this.resetIds();
-        this.handleValidation();
-        this._invalidMessage = this.invalidMessage || constants.DEFAULT_INVALID_MESSAGE;
+        const onMountHook_0 = () => {
+            this.resetIds();
+            this.handleValidation();
+            this._invalidMessage = this.invalidMessage || constants.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 (index.h("div", { key: 'c82a033ffefd600a9c96ea487d9fd909ff1b72de', class: index$1.cls("db-switch", this.className), "data-visual-aid": index$1.getBooleanAsString(this.visualAid), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, index.h("label", { key: 'c1047871716d0d24f026c8ffaf37581a2b080375', htmlFor: this._id }, index.h("input", { key: '883712cbfdd95c525ea615270546e2127f9bdbf8', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
+        return (index.h("div", { key: 'e95dafb6d580ef8cfbd54b91ee77da4809984862', class: index$1.cls("db-switch", this.className), "data-visual-aid": index$1.getBooleanAsString(this.visualAid, "visualAid"), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, index.h("label", { key: '533173f9a522375012848dbff80b0e357f5e1b30', htmlFor: this._id }, index.h("input", { key: '68e6d40e2b5654508d8ebaf9be66dd56aa39c8f2', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
                 this._ref = el;
-            }, checked: index$1.getBoolean(this.checked, "checked"), value: this.value, disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: index$1.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, index.h("slot", { key: '106b299aca93a4e6498c74e7c43df87564122c40' })), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: 'e2848f2de604908a0e05fbb0cde3c77a36adcc4e', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '37bcc9cd24041762a62822d118803b0eef247f12', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, checked: index$1.getBoolean(this.checked, "checked"), value: this.value, disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: index$1.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, index.h("slot", { key: 'a89d78f024905190780c3c8436773ab710115857' })), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: 'e170d8c368afd61c7c94c10bb2ea13fe4520d692', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: 'd8a5b8e7a5e0f70f245de5756f7b2d19640b4863', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-HN8AqU2e.js');
-var index$1 = require('./index-2_9ESkQu.js');
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-spuu3sXz.js');
 
 const DBTabItem = class {
     constructor(hostRef) {
@@ -12,10 +12,11 @@ const DBTabItem = class {
         this.initialized = false;
         this._listenerAdded = false;
         this.boundSetSelectedOnChange = undefined;
+        this.observer = undefined;
     }
     setSelectedOnChange(event) {
         event.stopPropagation();
-        this._selected = index$1.getBooleanAsString(event.target === this._ref);
+        this._selected = index$1.getBooleanAsString(event.target === this._ref, "selected");
     }
     handleNameAttribute() {
         if (this._ref) {
@@ -33,6 +34,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
@@ -46,10 +67,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);
                 }
@@ -57,7 +83,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");
@@ -81,7 +107,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 = index$1.getBooleanAsString(true);
+                this._selected = index$1.getBooleanAsString(true, "selected");
                 this._ref.click();
             }
         }
@@ -105,24 +131,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 (index.h("li", { key: '8f237a10d09644e2bad44ff457e5ae7bb6ed80f3', class: index$1.cls("db-tab-item", this.className), role: "none" }, index.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": index$1.getBooleanAsString((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing), "data-no-text": index$1.getBooleanAsString(this.noText) }, index.h("input", { key: '8551abf9afc26bb0edfb9a8f94adb21f5c95bf4e', type: "radio", role: "tab", disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: index$1.getBoolean(this.checked, "checked"), ref: (el) => {
+        var _a, _b, _c, _d, _e;
+        return (index.h("li", { key: '003e5b968c65ba01df1b97e8f75592aee31125d9', class: index$1.cls("db-tab-item", this.className), role: "none" }, index.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": index$1.getBooleanAsString(this.showIconLeading, "showIconLeading") ||
+                index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-no-text": index$1.getBooleanAsString(this.noText, "noText") }, index.h("input", { key: 'ffb91a8e7248a8e5a2a7a05c6828fc6203e1eb37', type: "radio", role: "tab", disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: index$1.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, index.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, index.h("slot", { key: '2d079503cd365448cd054e05bfaec608ff476e04' }))));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -144,6 +179,27 @@ const DBTabItem = class {
 const DBTabList = class {
     constructor(hostRef) {
         index.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.
@@ -158,10 +214,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);
                 }
@@ -169,7 +230,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");
@@ -189,12 +250,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 (index.h("div", { key: 'ce54a7c3bef0090cf7aa0d6b11fedd6d3b4bbd07', class: index$1.cls("db-tab-list", this.className), ref: (el) => {
+        return (index.h("div", { key: '2538ba05ecad54c8c29dda93a08acb61faf02309', class: index$1.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 }, index.h("ul", { key: '8ac107177182afdde5163dee58917fa69b75e40c', role: "tablist" }, index.h("slot", { key: '0d53d4b529c439784d7c66894b967b41fb9eb38d' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("ul", { key: '86824302eb2cc92ca45a61d8bdec0f34cd679db6', role: "tablist" }, index.h("slot", { key: 'b56406b1e0291a29905b599531c0dccd9c035504' }))));
     }
     get rootElement() { return index.getElement(this); }
 };
@@ -202,6 +268,27 @@ const DBTabList = class {
 const DBTabPanel = class {
     constructor(hostRef) {
         index.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.
@@ -216,10 +303,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);
                 }
@@ -227,7 +319,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");
@@ -247,12 +339,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 (index.h("section", { key: '86076593b5c38755ddd08bbb930bb8252b9e5e78', class: index$1.cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
+        return (index.h("section", { key: 'd7179207343d512194f69f6d99a34897c146c00a', class: index$1.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, index.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, index.h("slot", { key: 'dc745b430dd17f253cf9403c28f6c2cbd5b59020' })));
     }
     get rootElement() { return index.getElement(this); }
 };