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

package/dist/cjs/db-infotext.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 DBInfotext = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-infotext");
+        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-infotext");
+            }
+        });
+        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 DBInfotext = 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 DBInfotext = 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 DBInfotext = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-infotext");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b, _c;
-        return (index.h("span", { key: '8336d336c2ea90300646a83257cab6f34dfe862a', class: index$1.cls("db-infotext", this.className), ref: (el) => {
+        return (index.h("span", { key: 'e1a06bb9c2d0f88953a7281cdda505b392db609c', class: index$1.cls("db-infotext", 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-icon": this.icon, "data-semantic": this.semantic, "data-size": this.size, "data-wrap": index$1.getBooleanAsString(this.wrap), "data-show-icon-leading": index$1.getBooleanAsString((_c = this.showIcon) !== null && _c !== void 0 ? _c : true) }, this.text ? this.text : null, index.h("slot", { key: '1dd519913408aa16cce587ddaee31d3c3bae05b6' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": this.icon, "data-semantic": this.semantic, "data-size": this.size, "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap"), "data-show-icon-leading": index$1.getBooleanAsString((_c = this.showIcon) !== null && _c !== void 0 ? _c : true, "showIcon") }, this.text ? this.text : null, index.h("slot", { key: '68b5e9bc974cf49e25470cba30b142495e06c72f' })));
     }
     get rootElement() { return index.getElement(this); }
 };

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

@@ -0,0 +1,294 @@
+'use strict';
+
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-spuu3sXz.js');
+
+const DBLink = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-link");
+        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-link");
+            }
+        });
+        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
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "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 ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-link");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (index.h("a", { key: 'a5c2e75c4243fa0d64c60b974c522347469e75b3', class: index$1.cls("db-link", 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, href: this.href, target: this.target, rel: this.rel, role: this.role, referrerPolicy: (_c = this.referrerpolicy) !== null && _c !== void 0 ? _c : this.referrerPolicy, hrefLang: this.hreflang, "aria-disabled": index$1.getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : 0, "data-size": this.size, "data-show-icon-trailing": index$1.getBooleanAsString((_d = this.showIcon) !== null && _d !== void 0 ? _d : true, "showIcon"), "data-variant": this.variant, "data-content": this.content || "internal", "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap") }, this.text ? this.text : null, index.h("slot", { key: '7cac380bf21256a51a3815e922687ddf4ad7b425' })));
+    }
+    get rootElement() { return index.getElement(this); }
+};
+
+const DBTableDataCell = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "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 ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-table-data-cell");
+    }
+    render() {
+        return (index.h("td", { key: 'e6614ac09ac484540ad119f807bea075521419cd', class: index$1.cls("db-table-data-cell", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id, "data-horizontal-alignment": this.horizontalAlignment, "data-vertical-alignment": this.verticalAlignment, colSpan: index$1.getNumber(this.colSpan, this.colspan), rowSpan: index$1.getNumber(this.rowSpan, this.rowspan), headers: this.headers }, index.h("slot", { key: 'bd353375cc862b5d5adea84545a5b5a63f1517e1' })));
+    }
+    get rootElement() { return index.getElement(this); }
+};
+
+const DBTableHeaderCell = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "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 ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-table-header-cell");
+    }
+    render() {
+        return (index.h("th", { key: 'b459f2e2ea9b4dda6909d1c8f02e1cd22b16a712', class: index$1.cls("db-table-header-cell", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id, "data-horizontal-alignment": this.horizontalAlignment, "data-vertical-alignment": this.verticalAlignment, "data-no-text": index$1.getBooleanAsString(this.noText), scope: this.scope, colSpan: index$1.getNumber(this.colSpan, this.colspan), rowSpan: index$1.getNumber(this.rowSpan, this.rowspan), headers: this.headers, abbr: this.abbr }, index.h("slot", { key: 'ec650ba68a8623b9729985f27822d94087327d74' })));
+    }
+    get rootElement() { return index.getElement(this); }
+};
+
+const DBTableRow = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    getHeaderCell(cell) {
+        if (cell.headerCell) {
+            return cell;
+        }
+        return undefined;
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "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 ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-table-row");
+    }
+    render() {
+        var _a;
+        return (index.h("tr", { key: 'd9ca9f14117c8cf3974110eb1a36cb7352c06c24', class: index$1.cls("db-table-row", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id, "data-interactive": index$1.getBooleanAsString(this.interactive), "data-sub-header-emphasis": this.subHeaderEmphasis }, this.cells ? ((_a = this.cells) === null || _a === void 0 ? void 0 : _a.map((cell, index$2) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22;
+            return cell.headerCell ? (index.h("db-table-header-cell", { class: (_a = cell.className) !== null && _a !== void 0 ? _a : cell.class, key: `${(_c = (_b = cell.id) !== null && _b !== void 0 ? _b : this.id) !== null && _c !== void 0 ? _c : index$1.uuid()}-table-row-header-cell-${index$2}`, id: cell.id, abbr: (_d = this.getHeaderCell(cell)) === null || _d === void 0 ? void 0 : _d.abbr, scope: (_e = this.getHeaderCell(cell)) === null || _e === void 0 ? void 0 : _e.scope, noText: (_f = this.getHeaderCell(cell)) === null || _f === void 0 ? void 0 : _f.noText, horizontalAlignment: cell.horizontalAlignment, verticalAlignment: cell.verticalAlignment, headers: cell.headers, colSpan: cell.colSpan, colspan: cell.colspan, rowSpan: cell.rowSpan, rowspan: cell.rowspan }, cell.link ? (index.h("db-link", { class: (_h = (_g = cell.link) === null || _g === void 0 ? void 0 : _g.className) !== null && _h !== void 0 ? _h : (_j = cell.link) === null || _j === void 0 ? void 0 : _j.class, content: (_k = cell.link) === null || _k === void 0 ? void 0 : _k.content, size: (_l = cell.link) === null || _l === void 0 ? void 0 : _l.size, variant: (_m = cell.link) === null || _m === void 0 ? void 0 : _m.variant, id: (_o = cell.link) === null || _o === void 0 ? void 0 : _o.id, autofocus: (_p = cell.link) === null || _p === void 0 ? void 0 : _p.autofocus, disabled: (_q = cell.link) === null || _q === void 0 ? void 0 : _q.disabled, href: (_r = cell.link) === null || _r === void 0 ? void 0 : _r.href, hreflang: (_s = cell.link) === null || _s === void 0 ? void 0 : _s.hreflang, target: (_t = cell.link) === null || _t === void 0 ? void 0 : _t.target, rel: (_u = cell.link) === null || _u === void 0 ? void 0 : _u.rel, referrerPolicy: (_v = cell.link) === null || _v === void 0 ? void 0 : _v.referrerPolicy, role: (_w = cell.link) === null || _w === void 0 ? void 0 : _w.role, showIcon: (_x = cell.link) === null || _x === void 0 ? void 0 : _x.showIcon, text: (_y = cell.link) === null || _y === void 0 ? void 0 : _y.text, wrap: (_z = cell.link) === null || _z === void 0 ? void 0 : _z.wrap }, (_0 = cell.link) === null || _0 === void 0 ? void 0 : _0.children)) : (cell.content))) : (index.h("db-table-data-cell", { class: (_1 = cell.className) !== null && _1 !== void 0 ? _1 : cell.class, key: `${(_3 = (_2 = cell.id) !== null && _2 !== void 0 ? _2 : this.id) !== null && _3 !== void 0 ? _3 : index$1.uuid()}-table-row-data-cell-${index$2}`, id: cell.id, horizontalAlignment: cell.horizontalAlignment, verticalAlignment: cell.verticalAlignment, headers: cell.headers, colSpan: cell.colSpan, colspan: cell.colspan, rowSpan: cell.rowSpan, rowspan: cell.rowspan }, cell.link ? (index.h("db-link", { class: (_5 = (_4 = cell.link) === null || _4 === void 0 ? void 0 : _4.className) !== null && _5 !== void 0 ? _5 : (_6 = cell.link) === null || _6 === void 0 ? void 0 : _6.class, content: (_7 = cell.link) === null || _7 === void 0 ? void 0 : _7.content, size: (_8 = cell.link) === null || _8 === void 0 ? void 0 : _8.size, variant: (_9 = cell.link) === null || _9 === void 0 ? void 0 : _9.variant, id: (_10 = cell.link) === null || _10 === void 0 ? void 0 : _10.id, autofocus: (_11 = cell.link) === null || _11 === void 0 ? void 0 : _11.autofocus, disabled: (_12 = cell.link) === null || _12 === void 0 ? void 0 : _12.disabled, href: (_13 = cell.link) === null || _13 === void 0 ? void 0 : _13.href, hreflang: (_14 = cell.link) === null || _14 === void 0 ? void 0 : _14.hreflang, target: (_15 = cell.link) === null || _15 === void 0 ? void 0 : _15.target, rel: (_16 = cell.link) === null || _16 === void 0 ? void 0 : _16.rel, referrerPolicy: (_17 = cell.link) === null || _17 === void 0 ? void 0 : _17.referrerPolicy, role: (_18 = cell.link) === null || _18 === void 0 ? void 0 : _18.role, showIcon: (_19 = cell.link) === null || _19 === void 0 ? void 0 : _19.showIcon, text: (_20 = cell.link) === null || _20 === void 0 ? void 0 : _20.text, wrap: (_21 = cell.link) === null || _21 === void 0 ? void 0 : _21.wrap }, (_22 = cell.link) === null || _22 === void 0 ? void 0 : _22.children)) : (cell.content)));
+        })) : (index.h("slot", null))));
+    }
+    get rootElement() { return index.getElement(this); }
+};
+
+exports.db_link = DBLink;
+exports.db_table_data_cell = DBTableDataCell;
+exports.db_table_header_cell = DBTableHeaderCell;
+exports.db_table_row = DBTableRow;

package/dist/cjs/db-navigation-item.cjs.entry.js

@@ -1,8 +1,8 @@
 '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 index$1 = require('./index-spuu3sXz.js');
 var navigation = require('./navigation-Bah882nU.js');
 require('./floating-components-DlstoCKH.js');
 
@@ -18,6 +18,7 @@ const DBNavigationItem = class {
         this.navigationItemSafeTriangle = undefined;
         this.subNavigationId = undefined;
         this.subNavigationToggleId = undefined;
+        this.observer = undefined;
     }
     handleNavigationItemClick(event) {
         var _a;
@@ -41,6 +42,26 @@ const DBNavigationItem = class {
         event.stopPropagation();
         this.isSubNavigationExpanded = false;
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-navigation-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-navigation-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
@@ -54,10 +75,15 @@ const DBNavigationItem = 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);
                 }
@@ -65,7 +91,7 @@ const DBNavigationItem = 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");
@@ -106,7 +132,6 @@ const DBNavigationItem = class {
         this.watch1Fn();
     }
     componentDidLoad() {
-        var _a;
         if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
             const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
             if (connectedElement) {
@@ -114,18 +139,30 @@ const DBNavigationItem = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-navigation-item");
-        this.initialized = true;
-        const subNavId = `sub-nav-${(_a = this.id) !== null && _a !== void 0 ? _a : index$1.uuid()}`;
-        this.subNavigationId = subNavId;
-        this.subNavigationToggleId = `${subNavId}-toggle`;
+        const onMountHook_0 = () => {
+            var _a;
+            this.initialized = true;
+            const subNavId = `sub-nav-${(_a = this.id) !== null && _a !== void 0 ? _a : index$1.uuid()}`;
+            this.subNavigationId = subNavId;
+            this.subNavigationToggleId = `${subNavId}-toggle`;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
         this.watch1Fn();
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     render() {
         var _a, _b, _c;
-        return (index.h("li", { key: '555c0472fdd1d6888dc4a0b699fc85bb21e73199', class: index$1.cls("db-navigation-item", this.className), ref: (el) => {
+        return (index.h("li", { key: '0c375eaa62e5b989c6c891d46e5a66fa8c11eed3', class: index$1.cls("db-navigation-item", 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, onMouseOver: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.enableFollow(); }, onMouseLeave: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.disableFollow(); }, onMouseMove: (event) => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.followByMouseEvent(event); }, "data-width": this.width, "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon), "data-active": this.active, "data-wrap": index$1.getBooleanAsString(this.wrap), "aria-disabled": index$1.getBooleanAsString(this.disabled) }, !index$1.getBoolean(this.hideSubNavigation, "hideSubNavigation") &&
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, onMouseOver: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.enableFollow(); }, onMouseLeave: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.disableFollow(); }, onMouseMove: (event) => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.followByMouseEvent(event); }, "data-width": this.width, "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-active": this.active, "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap"), "aria-disabled": index$1.getBooleanAsString(this.disabled, "disabled") }, !index$1.getBoolean(this.hideSubNavigation, "hideSubNavigation") &&
             this.hasSubNavigation ? (index.h(index.Fragment, null, index.h("button", { class: "db-navigation-item-expand-button", id: this.subNavigationToggleId, "aria-haspopup": this.hasAreaPopup ? "true" : undefined, "aria-expanded": this.isSubNavigationExpanded, "aria-controls": this.subNavigationId, disabled: index$1.getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClick(event) }, this.text ? this.text : index.h("slot", { name: "expandButton" })), index.h("menu", { class: "db-sub-navigation", id: this.subNavigationId, "aria-labelledby": this.subNavigationToggleId, "data-force-close": this.autoClose, onClick: (event) => this.handleNavigationItemClick(event) }, this.hasAreaPopup ? (index.h("div", { class: "db-mobile-navigation-back" }, index.h("db-button", { icon: "arrow_left", variant: "ghost", id: this.backButtonId, onClick: (event) => this.handleBackClick(event) }, (_c = this.backButtonText) !== null && _c !== void 0 ? _c : constants.DEFAULT_BACK))) : null, index.h("slot", { name: "subNavigation" })))) : this.text ? (this.text) : (index.h("slot", null))));
     }
     get rootElement() { return index.getElement(this); }

package/dist/cjs/db-navigation.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 DBNavigation = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-navigation");
+        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-navigation");
+            }
+        });
+        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 DBNavigation = 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 DBNavigation = 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 DBNavigation = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-navigation");
+        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("nav", { key: '33d5425a509a5d224245fcde89b66bb129d3fb57', class: index$1.cls("db-navigation", this.className), ref: (el) => {
+        return (index.h("nav", { key: '9ab5982a120092e6df3de4b17d1750950d2e1667', class: index$1.cls("db-navigation", 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("menu", { key: '796fbbd89657a52bbd7e932efe96ff62726bf5ea' }, index.h("slot", { key: 'df8847f6522250c540acc1154201d1c6bfbbce07' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("menu", { key: 'c23027e91896d0cce880bb7527dcf576ba58b513' }, index.h("slot", { key: '0f7aa08fca229cbceae8bb4c1e91ab4fc5608242' }))));
     }
     get rootElement() { return index.getElement(this); }
 };