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

package/dist/collection/components/table-caption/table-caption.js

@@ -5,6 +5,29 @@ import { h } from "@stencil/core";
 
  */
 export class DBTableCaption {
+    constructor() {
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-table-caption");
+        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-table-caption");
+            }
+        });
+        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
@@ -18,10 +41,15 @@ export class DBTableCaption {
                 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 +57,7 @@ export class DBTableCaption {
                     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,11 +77,16 @@ export class DBTableCaption {
             }
         }
         this.enableAttributePassing(this._ref, "db-table-caption");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h("caption", { key: '45129365b814f87e7d337464f8f768fb3d9bd9c8', class: cls("db-table-caption", this.className), ref: (el) => {
+        return (h("caption", { key: '5ef3476c6c9879f1fcf8548e11bea82516bd29d1', class: cls("db-table-caption", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, h("slot", { key: '80e7f4789799c755d2a03b55ef8ee7e05939bf96' })));
+            }, id: this.id }, h("slot", { key: 'e20d1d699e7ab50422c0d40bdf058c8863ae4991' })));
     }
     static get is() { return "db-table-caption"; }
     static get properties() {
@@ -112,5 +145,10 @@ export class DBTableCaption {
             }
         };
     }
+    static get states() {
+        return {
+            "observer": {}
+        };
+    }
     static get elementRef() { return "rootElement"; }
 }

package/dist/collection/components/table-data-cell/table-data-cell.js

@@ -18,10 +18,15 @@ export class DBTableDataCell {
                 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 +34,7 @@ export class DBTableDataCell {
                     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,9 +56,9 @@ export class DBTableDataCell {
         this.enableAttributePassing(this._ref, "db-table-data-cell");
     }
     render() {
-        return (h("td", { key: '9f67b2926bd9e418572aa855b1dba754bddd8297', class: cls("db-table-data-cell", this.className), ref: (el) => {
+        return (h("td", { key: 'e6614ac09ac484540ad119f807bea075521419cd', class: 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: getNumber(this.colSpan, this.colspan), rowSpan: getNumber(this.rowSpan, this.rowspan), headers: this.headers }, h("slot", { key: '73553f85f1a5ccb0d8b59b06760fd19318a2e19c' })));
+            }, id: this.id, "data-horizontal-alignment": this.horizontalAlignment, "data-vertical-alignment": this.verticalAlignment, colSpan: getNumber(this.colSpan, this.colspan), rowSpan: getNumber(this.rowSpan, this.rowspan), headers: this.headers }, h("slot", { key: 'bd353375cc862b5d5adea84545a5b5a63f1517e1' })));
     }
     static get is() { return "db-table-data-cell"; }
     static get properties() {

package/dist/collection/components/table-footer/table-footer.js

@@ -18,10 +18,15 @@ export class DBTableFooter {
                 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 +34,7 @@ export class DBTableFooter {
                     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");
@@ -52,7 +57,7 @@ export class DBTableFooter {
     }
     render() {
         var _a;
-        return (h("tfoot", { key: 'ba1fcacfa32d5746615ba0aaaa5580a6c5c92f99', class: cls("db-table-footer", this.className), ref: (el) => {
+        return (h("tfoot", { key: '735f3ce4c1d6a3305993a8de60c797e9ce2bcd20', class: cls("db-table-footer", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id }, this.rows ? ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.map((row, index) => {
             var _a, _b, _c;

package/dist/collection/components/table-head/table-head.js

@@ -5,9 +5,32 @@ import { h } from "@stencil/core";
 
  */
 export class DBTableHead {
+    constructor() {
+        this.observer = undefined;
+    }
     getCells(cells) {
         return cells === null || cells === void 0 ? void 0 : cells.map((cell) => (Object.assign(Object.assign({}, cell), { headerCell: true })));
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-table-head");
+        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-table-head");
+            }
+        });
+        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
@@ -21,10 +44,15 @@ export class DBTableHead {
                 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);
                 }
@@ -32,7 +60,7 @@ export class DBTableHead {
                     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");
@@ -52,10 +80,15 @@ export class DBTableHead {
             }
         }
         this.enableAttributePassing(this._ref, "db-table-head");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a;
-        return (h("thead", { key: '1f192104b5b30bb15bc16d68f635382bc9d6817a', class: cls("db-table-head", this.className), ref: (el) => {
+        return (h("thead", { key: '340673440fd36e5522f70683bef5a4356f73cb69', class: cls("db-table-head", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id }, this.rows ? ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.map((row, index) => {
             var _a, _b, _c;
@@ -143,5 +176,10 @@ export class DBTableHead {
             }
         };
     }
+    static get states() {
+        return {
+            "observer": {}
+        };
+    }
     static get elementRef() { return "rootElement"; }
 }

package/dist/collection/components/table-header-cell/table-header-cell.js

@@ -18,10 +18,15 @@ export class DBTableHeaderCell {
                 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 +34,7 @@ export class DBTableHeaderCell {
                     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,9 +56,9 @@ export class DBTableHeaderCell {
         this.enableAttributePassing(this._ref, "db-table-header-cell");
     }
     render() {
-        return (h("th", { key: '422fa622eecd8ffb509c415c6bfdd1ed31f3ecc8', class: cls("db-table-header-cell", this.className), ref: (el) => {
+        return (h("th", { key: 'b459f2e2ea9b4dda6909d1c8f02e1cd22b16a712', class: 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": getBooleanAsString(this.noText), scope: this.scope, colSpan: getNumber(this.colSpan, this.colspan), rowSpan: getNumber(this.rowSpan, this.rowspan), headers: this.headers, abbr: this.abbr }, h("slot", { key: '7fc0e393fa95a6ea5c0e927fa971da7d825c7736' })));
+            }, id: this.id, "data-horizontal-alignment": this.horizontalAlignment, "data-vertical-alignment": this.verticalAlignment, "data-no-text": getBooleanAsString(this.noText), scope: this.scope, colSpan: getNumber(this.colSpan, this.colspan), rowSpan: getNumber(this.rowSpan, this.rowspan), headers: this.headers, abbr: this.abbr }, h("slot", { key: 'ec650ba68a8623b9729985f27822d94087327d74' })));
     }
     static get is() { return "db-table-header-cell"; }
     static get properties() {

package/dist/collection/components/table-row/table-row.js

@@ -24,10 +24,15 @@ export class DBTableRow {
                 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);
                 }
@@ -35,7 +40,7 @@ export class DBTableRow {
                     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");
@@ -58,7 +63,7 @@ export class DBTableRow {
     }
     render() {
         var _a;
-        return (h("tr", { key: '41fb15318069880e679a929ee5d4fcf59c7c1b63', class: cls("db-table-row", this.className), ref: (el) => {
+        return (h("tr", { key: 'd9ca9f14117c8cf3974110eb1a36cb7352c06c24', class: cls("db-table-row", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id, "data-interactive": getBooleanAsString(this.interactive), "data-sub-header-emphasis": this.subHeaderEmphasis }, this.cells ? ((_a = this.cells) === null || _a === void 0 ? void 0 : _a.map((cell, index) => {
             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;

package/dist/collection/components/tabs/tabs.js

@@ -12,6 +12,7 @@ export class DBTabs {
         this.showScrollRight = false;
         this.scrollContainer = null;
         this._resizeObserver = undefined;
+        this.observer = undefined;
     }
     convertTabs() {
         try {
@@ -132,6 +133,26 @@ export class DBTabs {
             }
         }
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-tabs");
+        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-tabs");
+            }
+        });
+        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
@@ -145,10 +166,15 @@ export class DBTabs {
                 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);
                 }
@@ -156,7 +182,7 @@ export class DBTabs {
                     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");
@@ -201,21 +227,29 @@ export class DBTabs {
             }
         }
         this.enableAttributePassing(this._ref, "db-tabs");
-        this._name = `tabs-${this.name || uuid()}`;
-        this.initialized = true;
+        const onMountHook_0 = () => {
+            this._name = `tabs-${this.name || uuid()}`;
+            this.initialized = true;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this._resizeObserver = undefined;
+        (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (h("div", { key: '7f8b9180b865394204747aa762291857513af90c', class: cls("db-tabs", this.className), ref: (el) => {
+        return (h("div", { key: 'aca0d156b8d50c5951a982e5ab35d2644b4989e7', class: cls("db-tabs", this.className), ref: (el) => {
                 this._ref = el;
             }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-orientation": this.orientation, "data-scroll-behavior": this.behavior, "data-alignment": (_c = this.alignment) !== null && _c !== void 0 ? _c : "start", "data-width": (_d = this.width) !== null && _d !== void 0 ? _d : "auto", onInput: (event) => this.handleChange(event), onChange: (event) => this.handleChange(event) }, this.showScrollLeft ? (h("db-button", { class: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: () => this.scroll(true) }, "Scroll left")) : null, this.tabs ? (h(Fragment, null, h("db-tab-list", null, (_e = this.convertTabs()) === null || _e === void 0 ? void 0 : _e.map((tab, index) => (h("db-tab-item", { key: this.name + "tab-item" + index, active: tab.active, label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText })))), (_f = this.convertTabs()) === null || _f === void 0 ? void 0 :
-            _f.map((tab, index) => (h("db-tab-panel", { key: this.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, h("slot", { key: 'a2833021bf993cf6aa130c9295f78b831c8d888e' })));
+            _f.map((tab, index) => (h("db-tab-panel", { key: this.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, h("slot", { key: 'b05907467917bb82f9ef6b9ce3774e52411fb822' })));
     }
     static get is() { return "db-tabs"; }
     static get properties() {
@@ -539,7 +573,8 @@ export class DBTabs {
             "showScrollLeft": {},
             "showScrollRight": {},
             "scrollContainer": {},
-            "_resizeObserver": {}
+            "_resizeObserver": {},
+            "observer": {}
         };
     }
     static get events() {

package/dist/collection/components/tag/tag.js

@@ -6,6 +6,9 @@ import { h } from "@stencil/core";
  * @slot content - TODO: Add description for slotContent
  */
 export class DBTag {
+    constructor() {
+        this.observer = undefined;
+    }
     handleRemove(event) {
         if (!event)
             return;
@@ -21,6 +24,26 @@ export class DBTag {
         // TODO: We should think this through again, if we would really like to have default and especially english, instead of german labels in here
         return DEFAULT_REMOVE;
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-tag");
+        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-tag");
+            }
+        });
+        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
@@ -34,10 +57,15 @@ export class DBTag {
                 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);
                 }
@@ -45,7 +73,7 @@ export class DBTag {
                     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");
@@ -65,12 +93,17 @@ export class DBTag {
             }
         }
         this.enableAttributePassing(this._ref, "db-tag");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '107c28ac3b48e7802773283ed706536b3448f7fd', class: cls("db-tag", this.className), ref: (el) => {
+        return (h("div", { key: '22654726ea465c2b07942705dfcf72162c11e314', class: cls("db-tag", 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-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_c = this.showCheckState) !== null && _c !== void 0 ? _c : true, "showCheckState"), "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), "data-no-text": getBooleanAsString(this.noText, "noText"), "data-overflow": getBooleanAsString(this.overflow, "overflow") }, h("slot", { key: '7a552ce39473ee8f5ab9ff0fa26e1c9cb746141a', name: "content" }), this.text ? this.text : null, h("slot", { key: '3ace0ceb3415b63574e959214beb6af40071e1b6' }), this.behavior === "removable" ? (h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => this.handleRemove(event) }, h("db-tooltip", { variant: "label" }, this.getRemoveButtonText()))) : null));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_c = this.showCheckState) !== null && _c !== void 0 ? _c : true, "showCheckState"), "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), "data-no-text": getBooleanAsString(this.noText, "noText"), "data-overflow": getBooleanAsString(this.overflow, "overflow") }, h("slot", { key: '284aa3b6bce1595939f667e8a511319879545e27', name: "content" }), this.text ? this.text : null, h("slot", { key: '7471ead10bf5f95654444020e6b76d0b2f64486b' }), this.behavior === "removable" ? (h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => this.handleRemove(event) }, h("db-tooltip", { variant: "label" }, this.getRemoveButtonText()))) : null));
     }
     static get is() { return "db-tag"; }
     static get properties() {
@@ -413,6 +446,11 @@ export class DBTag {
             }
         };
     }
+    static get states() {
+        return {
+            "observer": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "remove",