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

package/bundle/p-k5Hci0ok.js

@@ -0,0 +1 @@
+import{y as t,H as i,A as e,j as s,z as a,k as h,d as n,t as d}from"./p-CYYSsu3p.js";const o=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.change=e(this,"change"),this._selected=!1,this._name=void 0,this.initialized=!1,this._listenerAdded=!1,this.boundSetSelectedOnChange=void 0,this.observer=void 0}setSelectedOnChange(t){t.stopPropagation(),this._selected=s(t.target===this._ref,"selected")}handleNameAttribute(){if(this._ref){const t=this._ref.setAttribute;this._ref.setAttribute=(i,e)=>{t.call(this._ref,i,e),"name"===i&&(this._name=e)}}}handleChange(t){this.change&&this.change.emit(t)}setupObserver(t){if(!t)return;const i=t.closest("db-tab-item");i&&!this.observer&&(this.observer=new MutationObserver((i=>{i.some((t=>{var i;const e=t.target.attributes.getNamedItem(null!==(i=t.attributeName)&&void 0!==i?i:"");return(null==e?void 0:e.value)!==t.oldValue}))&&this.enableAttributePassing(t,"db-tab-item")})),this.observer.observe(i,{attributes:!0,attributeOldValue:!0}))}enableAttributePassing(t,i){const e=null==t?void 0:t.closest(i);if(t&&e){const i=e.attributes;for(let s=0;s<i.length;s++){const a=i.item(s);if(a&&"data-density"!==a.name&&(a.name.startsWith("data-")||a.name.startsWith("aria-")))a.value?t.setAttribute(a.name,a.value):t.removeAttribute(a.name),e.removeAttribute(a.name);else if(a&&["style"].includes(a.name))t.setAttribute(a.name,a.value),e.removeAttribute(a.name);else if(a&&"class"===a.name){const i=a.value.includes("hydrated"),s=a.value.replace("hydrated","").trim(),h=t.getAttribute("class");t.setAttribute(a.name,`${h||""}${s?` ${s}`:""}`),i?e.setAttribute("class","hydrated"):e.removeAttribute(a.name)}}}}watch0Fn(){var t;this._ref&&this.initialized&&this.boundSetSelectedOnChange&&(this.initialized=!1,this._listenerAdded||(null===(t=this._ref.closest("[role=tablist]"))||void 0===t||t.addEventListener("change",this.boundSetSelectedOnChange),this._listenerAdded=!0),(this.active||this._ref.checked)&&(this._selected=s(!0,"selected"),this._ref.click()))}watch0(){this.watch0Fn()}watch1Fn(){this.name&&(this._name=this.name)}watch1(){this.watch1Fn()}componentDidLoad(){if("undefined"!=typeof document&&this.rootElement&&this.rootElement.dataset.connect){const t=document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);t&&t.remove()}this.enableAttributePassing(this._ref,"db-tab-item"),(()=>{this.boundSetSelectedOnChange=this.setSelectedOnChange.bind(this),this.initialized=!0})(),(()=>{this.setupObserver(this._ref)})(),this.watch0Fn(),this.watch1Fn()}disconnectedCallback(){var t,i;this._listenerAdded&&this._ref&&this.boundSetSelectedOnChange&&(null===(t=this._ref.closest("[role=tablist]"))||void 0===t||t.removeEventListener("change",this.boundSetSelectedOnChange),this._listenerAdded=!1),null===(i=this.observer)||void 0===i||i.disconnect()}render(){var t,i,e,d,o;return a("li",{key:"003e5b968c65ba01df1b97e8f75592aee31125d9",class:n("db-tab-item",this.className),role:"none"},a("label",{key:"682e5a3cf7036abcbbbbbba9f42ce534d7a4145d",htmlFor:null!==(t=this.id)&&void 0!==t?t:null===(i=this.propOverrides)||void 0===i?void 0:i.id,"data-icon":null!==(e=this.iconLeading)&&void 0!==e?e:this.icon,"data-icon-trailing":this.iconTrailing,"data-show-icon":s(this.showIconLeading,"showIconLeading")||s(this.showIcon,"showIcon"),"data-show-icon-trailing":s(this.showIconTrailing,"showIconTrailing"),"data-no-text":s(this.noText,"noText")},a("input",{key:"ffb91a8e7248a8e5a2a7a05c6828fc6203e1eb37",type:"radio",role:"tab",disabled:h(this.disabled,"disabled"),"aria-selected":this._selected,checked:h(this.checked,"checked"),ref:t=>{this._ref=t},name:this._name,id:null!==(d=this.id)&&void 0!==d?d:null===(o=this.propOverrides)||void 0===o?void 0:o.id,onInput:t=>this.handleChange(t)}),this.label?this.label:null,a("slot",{key:"2d079503cd365448cd054e05bfaec608ff476e04"})))}get rootElement(){return this}static get watchers(){return{_ref:[{watch0:0}],initialized:[{watch0:0}],boundSetSelectedOnChange:[{watch0:0}],name:[{watch1:0}]}}},[260,"db-tab-item",{active:[8],name:[1],className:[1,"classname"],id:[1],propOverrides:[16],iconLeading:[1,"icon-leading"],icon:[1],iconTrailing:[1,"icon-trailing"],showIconLeading:[8,"show-icon-leading"],showIcon:[8,"show-icon"],showIconTrailing:[8,"show-icon-trailing"],noText:[8,"no-text"],disabled:[8],checked:[8],label:[1],_selected:[32],_name:[32],initialized:[32],_listenerAdded:[32],boundSetSelectedOnChange:[32],observer:[32]},void 0,{_ref:[{watch0:0}],initialized:[{watch0:0}],boundSetSelectedOnChange:[{watch0:0}],name:[{watch1:0}]}]);function c(){"undefined"!=typeof customElements&&["db-tab-item"].forEach((t=>{"db-tab-item"===t&&(customElements.get(d(t))||customElements.define(d(t),o))}))}export{o as D,c as d}

package/bundle/p-mk64Fltq.js

@@ -0,0 +1 @@
+import{y as l,H as i,z as o,u as d,j as e,d as t,t as n}from"./p-CYYSsu3p.js";import{d as a}from"./p-D1orcIJf.js";import{d as s}from"./p-BEcb3EOO.js";import{d as v}from"./p-C4iD-won.js";const r=l(class extends i{constructor(l){super(),!1!==l&&this.__registerHost()}getHeaderCell(l){if(l.headerCell)return l}enableAttributePassing(l,i){const o=null==l?void 0:l.closest(i);if(l&&o){const i=o.attributes;for(let d=0;d<i.length;d++){const e=i.item(d);if(e&&"data-density"!==e.name&&(e.name.startsWith("data-")||e.name.startsWith("aria-")))e.value?l.setAttribute(e.name,e.value):l.removeAttribute(e.name),o.removeAttribute(e.name);else if(e&&["style"].includes(e.name))l.setAttribute(e.name,e.value),o.removeAttribute(e.name);else if(e&&"class"===e.name){const i=e.value.includes("hydrated"),d=e.value.replace("hydrated","").trim(),t=l.getAttribute("class");l.setAttribute(e.name,`${t||""}${d?` ${d}`:""}`),i?o.setAttribute("class","hydrated"):o.removeAttribute(e.name)}}}}componentDidLoad(){if("undefined"!=typeof document&&this.rootElement&&this.rootElement.dataset.connect){const l=document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);l&&l.remove()}this.enableAttributePassing(this._ref,"db-table-row")}render(){var l;return o("tr",{key:"d9ca9f14117c8cf3974110eb1a36cb7352c06c24",class:t("db-table-row",this.className),ref:l=>{this._ref=l},id:this.id,"data-interactive":e(this.interactive),"data-sub-header-emphasis":this.subHeaderEmphasis},this.cells?null===(l=this.cells)||void 0===l?void 0:l.map(((l,i)=>{var e,t,n,a,s,v,r,u,c,b,h,m,f,p,w,y,g,k,E,$,j,x,z,A,S,D,C,I,P,H,O,Y,B,J,L,N,T,q,F,G,K,M,Q,R,U,V,W;return l.headerCell?o("db-table-header-cell",{class:null!==(e=l.className)&&void 0!==e?e:l.class,key:`${null!==(n=null!==(t=l.id)&&void 0!==t?t:this.id)&&void 0!==n?n:d()}-table-row-header-cell-${i}`,id:l.id,abbr:null===(a=this.getHeaderCell(l))||void 0===a?void 0:a.abbr,scope:null===(s=this.getHeaderCell(l))||void 0===s?void 0:s.scope,noText:null===(v=this.getHeaderCell(l))||void 0===v?void 0:v.noText,horizontalAlignment:l.horizontalAlignment,verticalAlignment:l.verticalAlignment,headers:l.headers,colSpan:l.colSpan,colspan:l.colspan,rowSpan:l.rowSpan,rowspan:l.rowspan},l.link?o("db-link",{class:null!==(u=null===(r=l.link)||void 0===r?void 0:r.className)&&void 0!==u?u:null===(c=l.link)||void 0===c?void 0:c.class,content:null===(b=l.link)||void 0===b?void 0:b.content,size:null===(h=l.link)||void 0===h?void 0:h.size,variant:null===(m=l.link)||void 0===m?void 0:m.variant,id:null===(f=l.link)||void 0===f?void 0:f.id,autofocus:null===(p=l.link)||void 0===p?void 0:p.autofocus,disabled:null===(w=l.link)||void 0===w?void 0:w.disabled,href:null===(y=l.link)||void 0===y?void 0:y.href,hreflang:null===(g=l.link)||void 0===g?void 0:g.hreflang,target:null===(k=l.link)||void 0===k?void 0:k.target,rel:null===(E=l.link)||void 0===E?void 0:E.rel,referrerPolicy:null===($=l.link)||void 0===$?void 0:$.referrerPolicy,role:null===(j=l.link)||void 0===j?void 0:j.role,showIcon:null===(x=l.link)||void 0===x?void 0:x.showIcon,text:null===(z=l.link)||void 0===z?void 0:z.text,wrap:null===(A=l.link)||void 0===A?void 0:A.wrap},null===(S=l.link)||void 0===S?void 0:S.children):l.content):o("db-table-data-cell",{class:null!==(D=l.className)&&void 0!==D?D:l.class,key:`${null!==(I=null!==(C=l.id)&&void 0!==C?C:this.id)&&void 0!==I?I:d()}-table-row-data-cell-${i}`,id:l.id,horizontalAlignment:l.horizontalAlignment,verticalAlignment:l.verticalAlignment,headers:l.headers,colSpan:l.colSpan,colspan:l.colspan,rowSpan:l.rowSpan,rowspan:l.rowspan},l.link?o("db-link",{class:null!==(H=null===(P=l.link)||void 0===P?void 0:P.className)&&void 0!==H?H:null===(O=l.link)||void 0===O?void 0:O.class,content:null===(Y=l.link)||void 0===Y?void 0:Y.content,size:null===(B=l.link)||void 0===B?void 0:B.size,variant:null===(J=l.link)||void 0===J?void 0:J.variant,id:null===(L=l.link)||void 0===L?void 0:L.id,autofocus:null===(N=l.link)||void 0===N?void 0:N.autofocus,disabled:null===(T=l.link)||void 0===T?void 0:T.disabled,href:null===(q=l.link)||void 0===q?void 0:q.href,hreflang:null===(F=l.link)||void 0===F?void 0:F.hreflang,target:null===(G=l.link)||void 0===G?void 0:G.target,rel:null===(K=l.link)||void 0===K?void 0:K.rel,referrerPolicy:null===(M=l.link)||void 0===M?void 0:M.referrerPolicy,role:null===(Q=l.link)||void 0===Q?void 0:Q.role,showIcon:null===(R=l.link)||void 0===R?void 0:R.showIcon,text:null===(U=l.link)||void 0===U?void 0:U.text,wrap:null===(V=l.link)||void 0===V?void 0:V.wrap},null===(W=l.link)||void 0===W?void 0:W.children):l.content)})):o("slot",null))}get rootElement(){return this}},[260,"db-table-row",{id:[1],className:[1,"classname"],interactive:[8],subHeaderEmphasis:[1,"sub-header-emphasis"],cells:[16]}]);function u(){"undefined"!=typeof customElements&&["db-table-row","db-link","db-table-data-cell","db-table-header-cell"].forEach((l=>{switch(l){case"db-table-row":customElements.get(n(l))||customElements.define(n(l),r);break;case"db-link":customElements.get(n(l))||a();break;case"db-table-data-cell":customElements.get(n(l))||s();break;case"db-table-header-cell":customElements.get(n(l))||v()}}))}export{r as D,u as d}

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

@@ -10,6 +10,7 @@ const DBAccordionItem = class {
         this._open = false;
         this._name = undefined;
         this.initialized = false;
+        this.observer = undefined;
     }
     handleNameAttribute() {
         if (this._ref) {
@@ -33,6 +34,26 @@ const DBAccordionItem = class {
             this._open = newStateOpen;
         }
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-accordion-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-accordion-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 DBAccordionItem = 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 DBAccordionItem = 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");
@@ -99,19 +125,30 @@ const DBAccordionItem = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-accordion-item");
-        if (this.defaultOpen) {
-            this._open = this.defaultOpen;
-        }
-        this.initialized = true;
+        const onMountHook_0 = () => {
+            if (this.defaultOpen) {
+                this._open = this.defaultOpen;
+            }
+            this.initialized = true;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
         this.watch1Fn();
         this.watch2Fn();
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     render() {
         var _a, _b;
-        return (index.h("li", { key: '4211e7bbbe6cfb021a24f379e3b196380e649b6b', class: index$1.cls("db-accordion-item", this.className), id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("details", { key: 'b079afb27059b99afedb063ec731df6785080a96', "aria-disabled": index$1.getBooleanAsString(this.disabled, "disabled"), ref: (el) => {
+        return (index.h("li", { key: '3c70e3a9542e8bd7d96e725381caf73e3ac7296a', class: index$1.cls("db-accordion-item", this.className), id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("details", { key: '326f88378a110e2eae8087deec3d333fa85b206e', "aria-disabled": index$1.getBooleanAsString(this.disabled, "disabled"), ref: (el) => {
                 this._ref = el;
-            }, name: this._name, open: this._open }, index.h("summary", { key: '88622665136410bd54644e980909b998b48002fb', onClick: (event) => this.handleToggle(event) }, this.headlinePlain ? this.headlinePlain : null, !this.headlinePlain ? index.h("slot", { name: "headline" }) : null), index.h("div", { key: '4634317ee78aa4a07da21334c5ca4635f1540ed5' }, this.text ? this.text : null, index.h("slot", { key: 'ca7bb5de8f7c0222c708d29c1f189cb0cd719553' })))));
+            }, name: this._name, open: this._open }, index.h("summary", { key: '0dd759c18b3ec0bb4110613b073a248936827bfb', onClick: (event) => this.handleToggle(event) }, this.headlinePlain ? this.headlinePlain : null, !this.headlinePlain ? index.h("slot", { name: "headline" }) : null), index.h("div", { key: '44e7c57155828aa6465bde02aa4717e3161673f2' }, this.text ? this.text : null, index.h("slot", { key: '015b11e09045b96c43ec815916611ebd4b7ac4e3' })))));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -9,6 +9,7 @@ const DBAccordion = class {
         this._name = "";
         this.initialized = false;
         this._initOpenIndexDone = false;
+        this.observer = undefined;
     }
     convertItems() {
         try {
@@ -22,6 +23,26 @@ const DBAccordion = class {
         }
         return [];
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-accordion");
+        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-accordion");
+            }
+        });
+        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
@@ -35,10 +56,15 @@ const DBAccordion = 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);
                 }
@@ -46,7 +72,7 @@ const DBAccordion = 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");
@@ -128,15 +154,26 @@ const DBAccordion = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-accordion");
-        this.initialized = true;
-        this._initOpenIndexDone = true;
+        const onMountHook_0 = () => {
+            this.initialized = true;
+            this._initOpenIndexDone = true;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
         this.watch1Fn();
         this.watch2Fn();
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     render() {
         var _a, _b, _c;
-        return (index.h("ul", { key: '400ed83c47dea1ff19bd9d02e9c6a6338ea9c001', class: index$1.cls("db-accordion", this.className), ref: (el) => {
+        return (index.h("ul", { key: 'ca6ccc06f1846796371751f169585adfca380e3d', class: index$1.cls("db-accordion", 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-variant": this.variant }, !this.items ? index.h("slot", null) : null, this.items
             ? (_c = this.convertItems()) === null || _c === void 0 ? void 0 : _c.map((item, index$1) => (index.h("db-accordion-item", { key: `accordion-item-${index$1}`, headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text })))

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

@@ -8,6 +8,27 @@ const DBBadge = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.initialized = false;
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-badge");
+        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-badge");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -22,10 +43,15 @@ const DBBadge = 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);
                 }
@@ -33,7 +59,7 @@ const DBBadge = 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");
@@ -71,14 +97,25 @@ const DBBadge = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-badge");
-        this.initialized = true;
+        const onMountHook_0 = () => {
+            this.initialized = true;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     render() {
         var _a, _b, _c, _d;
-        return (index.h("span", { key: '2a50a8228391b9faec650199f285dfbe943017b1', class: index$1.cls("db-badge", this.className), ref: (el) => {
+        return (index.h("span", { key: '359727eb7aa15e2456b2b616c9157d6546aa1821', class: index$1.cls("db-badge", 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-size": this.size, "data-emphasis": this.emphasis, "data-placement": this.placement, "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap"), "data-label": ((_c = this.placement) === null || _c === void 0 ? void 0 : _c.startsWith("corner")) && ((_d = this.label) !== null && _d !== void 0 ? _d : constants.DEFAULT_LABEL) }, this.text ? this.text : null, index.h("slot", { key: '0b8d3a53d7e6b786e554d31462ad0585668f4331' })));
+            }, 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-size": this.size, "data-emphasis": this.emphasis, "data-placement": this.placement, "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap"), "data-label": ((_c = this.placement) === null || _c === void 0 ? void 0 : _c.startsWith("corner")) && ((_d = this.label) !== null && _d !== void 0 ? _d : constants.DEFAULT_LABEL) }, this.text ? this.text : null, index.h("slot", { key: '4540ec4549a70007f0192fad72b07fdb90005f0c' })));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -7,6 +7,27 @@ var index$1 = require('./index-spuu3sXz.js');
 const DBBrand = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-brand");
+        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-brand");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -21,10 +42,15 @@ const DBBrand = 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);
                 }
@@ -32,7 +58,7 @@ const DBBrand = 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");
@@ -52,12 +78,17 @@ const DBBrand = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-brand");
+        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("div", { key: 'b9c685aae760ad32837d1f5474b1c4dde2da2ed4', class: index$1.cls("db-brand", this.className), ref: (el) => {
+        return (index.h("div", { key: '1c27a0d77bc0862364161f6eabfb78c81a331fb1', class: index$1.cls("db-brand", this.className), ref: (el) => {
                 this._ref = el;
-            }, "data-icon": this.hideLogo ? "none" : (_a = this.icon) !== null && _a !== void 0 ? _a : constants.DEFAULT_ICON, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon"), id: (_b = this.id) !== null && _b !== void 0 ? _b : (_c = this.propOverrides) === null || _c === void 0 ? void 0 : _c.id }, index.h("slot", { key: '8ae75c438c11b07f064697611914978be5b6b765' }), this.text ? this.text : null));
+            }, "data-icon": this.hideLogo ? "none" : (_a = this.icon) !== null && _a !== void 0 ? _a : constants.DEFAULT_ICON, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon"), id: (_b = this.id) !== null && _b !== void 0 ? _b : (_c = this.propOverrides) === null || _c === void 0 ? void 0 : _c.id }, index.h("slot", { key: '58d2daa05934dcc42bfe0bdb08b8f60fc204064d' }), this.text ? this.text : null));
     }
     get rootElement() { return index.getElement(this); }
 };

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

@@ -7,6 +7,7 @@ const DBButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.click = index.createEvent(this, "click");
+        this.observer = undefined;
     }
     getButtonType() {
         if (this.type) {
@@ -17,6 +18,26 @@ const DBButton = class {
         }
         return "submit";
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-button");
+        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-button");
+            }
+        });
+        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
@@ -30,10 +51,15 @@ const DBButton = 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);
                 }
@@ -41,7 +67,7 @@ const DBButton = 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");
@@ -61,13 +87,18 @@ const DBButton = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-button");
+        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("button", { key: '005e64e2244340cf9bf254ec06165704472e7920', class: index$1.cls("db-button", this.className), ref: (el) => {
+        return (index.h("button", { key: 'b3c660955f667a8f8c93bb7c83360a44a5af3d1f', class: index$1.cls("db-button", 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, type: this.getButtonType(), disabled: index$1.getBoolean(this.disabled, "disabled"), "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIconLeading, "showIconLeading") ||
-                index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap"), "data-no-text": index$1.getBooleanAsString(this.noText, "noText"), name: this.name, form: this.form, value: this.value }, this.text ? this.text : null, index.h("slot", { key: 'fe96078746d899588bcbb96f8229b8423f8b1a5e' })));
+                index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap"), "data-no-text": index$1.getBooleanAsString(this.noText, "noText"), name: this.name, form: this.form, value: this.value }, this.text ? this.text : null, index.h("slot", { key: 'eb9c13e9573f61cdb3e61b5614fec0ad656c02b8' })));
     }
     get rootElement() { return index.getElement(this); }
 };

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

@@ -7,12 +7,33 @@ const DBCard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.click = index.createEvent(this, "click");
+        this.observer = undefined;
     }
     handleClick(event) {
         if (this.click) {
             this.click.emit(event);
         }
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-card");
+        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-card");
+            }
+        });
+        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
@@ -26,10 +47,15 @@ const DBCard = 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);
                 }
@@ -37,7 +63,7 @@ const DBCard = 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");
@@ -57,12 +83,17 @@ const DBCard = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-card");
+        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: '24dfc836fc2ca48b141001fa073c204ae8452b3a', class: index$1.cls("db-card", this.className), ref: (el) => {
+        return (index.h("div", { key: '44419819c968f1a3882fc7618f9fa6627706e84d', class: index$1.cls("db-card", 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-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, onClick: (event) => this.handleClick(event) }, index.h("slot", { key: '99ad6ae87aba0214e1226bebd28f06d854ce9c65' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, onClick: (event) => this.handleClick(event) }, index.h("slot", { key: '0854d0bbca92f6dd3bdea08f82872fbfb6567bfa' })));
     }
     get rootElement() { return index.getElement(this); }
 };