@db-ux/wc-core-components 4.4.2 → 4.4.3

package/dist/collection/components/section/section.js

@@ -16,12 +16,16 @@ export class DBSection {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    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");
@@ -41,9 +45,9 @@ export class DBSection {
         this.enableAttributePassing(this._ref, "db-section");
     }
     render() {
-        return (h("section", { key: '2d9f2702a0f18b257a3517ff002ff45984e07016', class: cls("db-section", this.className), ref: (el) => {
+        return (h("section", { key: 'be6ea106507603acde69e5020d97318002075614', class: cls("db-section", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-spacing": this.spacing || "medium", "data-width": this.width }, h("slot", { key: 'c432a712362af876cadc2c40946280272886e74c' })));
+            }, id: this.id, "data-spacing": this.spacing || "medium", "data-width": this.width }, h("slot", { key: '339c00c1fca3117ad6e148474f8fefbecb6c28f6' })));
     }
     static get is() { return "db-section"; }
     static get properties() {

package/dist/collection/components/select/select.js

@@ -110,12 +110,16 @@ export class DBSelect {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    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");
@@ -216,14 +220,14 @@ export class DBSelect {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: '50e43dc0ffe52d1683df95a336201616975d7e22', class: cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon) }, h("label", { key: '5bbc909caa2c33aea4e4e2956d8bc133f939fd13', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("select", { key: 'b6ef5a4f622219ee38433f643959c7db039a67db', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (h("div", { key: 'fa85d886e937a4df9260c6c7afe3482054707a37', class: cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon) }, h("label", { key: '8641dd7e53e841c2b14c953e6f515bc019714a02', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("select", { key: '98086f761e1c7353e9c9be5a2b25ee6ad1539116', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
             }, required: getBoolean(this.required, "required"), disabled: getBoolean(this.disabled, "disabled"), id: this._id, name: this.name, size: this.size,
             /* @ts-ignore */
             value: (_b = this.value) !== null && _b !== void 0 ? _b : this._value, autocomplete: this.autocomplete, multiple: this.multiple, onInput: (event) => this.handleInput(event), onClick: (event) => this.handleClick(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_c = this.ariaDescribedBy) !== null && _c !== void 0 ? _c : this._descByIds }, this.variant === "floating" || !!this.placeholder ? (h("option", { class: "placeholder", value: "", "data-show-empty-option": getBooleanAsString(this.shouldShowEmptyOption()) })) : null, ((_d = this.options) === null || _d === void 0 ? void 0 : _d.length) ? ((_e = this.options) === null || _e === void 0 ? void 0 : _e.map((option) => {
             var _a;
             return (h(Fragment, null, option.options ? (h("optgroup", { label: this.getOptionLabel(option), key: undefined }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (h("option", { value: optgroupOption.value, selected: optgroupOption.selected, disabled: optgroupOption.disabled, key: undefined }, this.getOptionLabel(optgroupOption)))))) : (h("option", { value: option.value, disabled: option.disabled, selected: option.selected, key: undefined }, this.getOptionLabel(option)))));
-        })) : (h("slot", null))), this.placeholder ? (h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '79703f10ff7c61b481e34e98ef2ad45133a3e2a4', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'e4667735054c370c14a954219060cc27b0a9007f', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+        })) : (h("slot", null))), this.placeholder ? (h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'ef8708b7b5c72f4755b057387877a631eea7efe4', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '7ce062862b7f38d673833d45ab59539c71758dcc', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-select"; }
     static get properties() {

package/dist/collection/components/stack/stack.js

@@ -16,12 +16,16 @@ export class DBStack {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    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");
@@ -41,9 +45,9 @@ export class DBStack {
         this.enableAttributePassing(this._ref, "db-stack");
     }
     render() {
-        return (h("div", { key: '64a5a45be3cfecebbe4fff818f6cbfeee462513c', class: cls("db-stack", this.className), ref: (el) => {
+        return (h("div", { key: '8e1a65def48c19955230380ca6795ddc19306278', class: cls("db-stack", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-gap": this.gap, "data-variant": this.variant, "data-direction": this.direction, "data-alignment": this.alignment, "data-justify-content": this.justifyContent, "data-wrap": getBooleanAsString(this.wrap) }, h("slot", { key: '69bd35bb73645e26b9819c7d9fc062cba032b4d7' })));
+            }, id: this.id, "data-gap": this.gap, "data-variant": this.variant, "data-direction": this.direction, "data-alignment": this.alignment, "data-justify-content": this.justifyContent, "data-wrap": getBooleanAsString(this.wrap) }, h("slot", { key: '170c71100d2005b60f5f6cf7432180d4a960ea16' })));
     }
     static get is() { return "db-stack"; }
     static get properties() {

package/dist/collection/components/switch/switch.js

@@ -92,12 +92,16 @@ export class DBSwitch {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    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");
@@ -155,9 +159,9 @@ export class DBSwitch {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: 'f2dab897c89fa8aadd97abe59e81b4d7ef4561c5', class: cls("db-switch", this.className), "data-visual-aid": getBooleanAsString(this.visualAid), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, h("label", { key: '8d7c3e44a9f7c565224124d499abe6c3b96582f6', htmlFor: this._id }, h("input", { key: '1cba4d3dbe46c97cd9039442e61eb0d9baab0587', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
+        return (h("div", { key: '381988aad06b23fd3e1da260baa8767e65149bd1', class: cls("db-switch", this.className), "data-visual-aid": getBooleanAsString(this.visualAid), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, h("label", { key: '88dde462a4617702b4c4ef9458e9c83d183b0a75', htmlFor: this._id }, h("input", { key: '740ea4c6d187bef60bd240d67ea564c96205bb15', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
                 this._ref = el;
-            }, checked: getBoolean(this.checked, "checked"), value: this.value, disabled: getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: getBoolean(this.required, "required"), "data-aid-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-aid-icon-trailing": this.iconTrailing, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => this.handleKeyDown(event) }), this.label ? this.label : h("slot", null)), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '9495dfc7fb2e3947f21b834792c4caeab411bbd0', size: "small", semantic: "critical", id: this._invalidMessageId }, (_d = (_c = this._invalidMessage) !== null && _c !== void 0 ? _c : this.invalidMessage) !== null && _d !== void 0 ? _d : DEFAULT_INVALID_MESSAGE), h("span", { key: '6e6b325689130fc5cdeef86d3a4f59299b5f8450', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, checked: getBoolean(this.checked, "checked"), value: this.value, disabled: getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: getBoolean(this.required, "required"), "data-aid-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-aid-icon-trailing": this.iconTrailing, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => this.handleKeyDown(event) }), this.label ? this.label : h("slot", null)), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'af53c40d0292aa12daab8e30c2a18a69a3f70477', size: "small", semantic: "critical", id: this._invalidMessageId }, (_d = (_c = this._invalidMessage) !== null && _c !== void 0 ? _c : this.invalidMessage) !== null && _d !== void 0 ? _d : DEFAULT_INVALID_MESSAGE), h("span", { key: 'b70a42d0cdc3f3d0e63672af09293d0dbd263262', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-switch"; }
     static get properties() {
@@ -475,11 +479,11 @@ export class DBSwitch {
                 "attribute": "show-label"
             },
             "variant": {
-                "type": "unknown",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSwitchProps[\"variant\"]",
-                    "resolved": "never",
+                    "resolved": "\"leading\" | \"trailing\"",
                     "references": {
                         "DBSwitchProps": {
                             "location": "import",
@@ -496,7 +500,9 @@ export class DBSwitch {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant"
             },
             "showRequiredAsterisk": {
                 "type": "any",

package/dist/collection/components/tab-item/tab-item.js

@@ -43,12 +43,16 @@ export class DBTabItem {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    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");
@@ -109,9 +113,9 @@ export class DBTabItem {
     }
     render() {
         var _a, _b;
-        return (h("li", { key: '9bbc9bdc6c450f62ce790a2662b165f9fad484ea', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: 'e3a4e3afdd250587b5d0cef54eb7d8302980199f', htmlFor: this.id, "data-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-icon-trailing": this.iconTrailing, "data-show-icon": getBooleanAsString((_b = this.showIconLeading) !== null && _b !== void 0 ? _b : this.showIcon), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-no-text": getBooleanAsString(this.noText) }, h("input", { key: '372cd912646fd40dc31f49d344d60526442a0f7a', type: "radio", role: "tab", disabled: getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: getBoolean(this.checked, "checked"), ref: (el) => {
+        return (h("li", { key: 'd41844269899bdbe6f51e5b233e7231de9684896', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: '7457d13ecb96dabfa6b7db882dd859db3e5835aa', htmlFor: this.id, "data-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-icon-trailing": this.iconTrailing, "data-show-icon": getBooleanAsString((_b = this.showIconLeading) !== null && _b !== void 0 ? _b : this.showIcon), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-no-text": getBooleanAsString(this.noText) }, h("input", { key: '9ac547b1cc507744eae9cef47b0f07ef77664353', type: "radio", role: "tab", disabled: getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: getBoolean(this.checked, "checked"), ref: (el) => {
                 this._ref = el;
-            }, name: this._name, id: this.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, h("slot", { key: '843e696cad853b5ce9d582f210efe86f3d270cb8' }))));
+            }, name: this._name, id: this.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, h("slot", { key: 'f647866c15651dbfa8f553c3628f75db7ff2f706' }))));
     }
     static get is() { return "db-tab-item"; }
     static get properties() {

package/dist/collection/components/tab-list/tab-list.js

@@ -16,12 +16,16 @@ export class DBTabList {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    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");
@@ -41,9 +45,9 @@ export class DBTabList {
         this.enableAttributePassing(this._ref, "db-tab-list");
     }
     render() {
-        return (h("div", { key: 'a2d1cf85f398ee76b560e9aa1c7f84871d752432', class: cls("db-tab-list", this.className), ref: (el) => {
+        return (h("div", { key: 'b957f2a462786de26787834a1ee87584c5a07a5a', class: cls("db-tab-list", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, h("ul", { key: '03498821ff3ff623e16313782c67384e7708eecf', role: "tablist" }, h("slot", { key: '10eba579352100e449568b7ec38e4cc73efb0463' }))));
+            }, id: this.id }, h("ul", { key: 'c7e7884642f3914237bb576f0460337b2e2598ed', role: "tablist" }, h("slot", { key: '5edad46fde906c2903fcfdad2dca8ded8ba0854c' }))));
     }
     static get is() { return "db-tab-list"; }
     static get properties() {

package/dist/collection/components/tab-panel/tab-panel.js

@@ -16,12 +16,16 @@ export class DBTabPanel {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    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");
@@ -41,9 +45,9 @@ export class DBTabPanel {
         this.enableAttributePassing(this._ref, "db-tab-panel");
     }
     render() {
-        return (h("section", { key: '312ef04379d3b4a094999f02ac919e3b0ac31877', class: cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
+        return (h("section", { key: 'f44bf1489cf2917d2c114eccb1e2c863630baa18', class: cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, this.content ? this.content : null, h("slot", { key: '7848155bb7734db6835c0fe7fcf85eb37635110d' })));
+            }, id: this.id }, this.content ? this.content : null, h("slot", { key: 'a21fe75df9dbb089c1520a0cc1ce040fefe0bacd' })));
     }
     static get is() { return "db-tab-panel"; }
     static get properties() {

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

@@ -143,12 +143,16 @@ export class DBTabs {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    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");
@@ -202,10 +206,10 @@ export class DBTabs {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: '0ba78eeed24756c5a55acef3080c4d66db43139b', class: cls("db-tabs", this.className), ref: (el) => {
+        return (h("div", { key: 'd1ce43010fda441bb6190b71624b6f72bb6a2a5b', class: cls("db-tabs", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id, "data-orientation": this.orientation, "data-scroll-behavior": this.behavior, "data-alignment": (_a = this.alignment) !== null && _a !== void 0 ? _a : "start", "data-width": (_b = this.width) !== null && _b !== void 0 ? _b : "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, (_c = this.convertTabs()) === null || _c === void 0 ? void 0 : _c.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 })))), (_d = this.convertTabs()) === null || _d === void 0 ? void 0 :
-            _d.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: '30e17d6cbc5899d97c5f1ffc73e4c09ccbff1dc1' })));
+            _d.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: '2b4836a486ca06290a4fc64cb3922b62cd999add' })));
     }
     static get is() { return "db-tabs"; }
     static get properties() {

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

@@ -32,12 +32,16 @@ export class DBTag {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    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");
@@ -58,9 +62,9 @@ export class DBTag {
     }
     render() {
         var _a;
-        return (h("div", { key: 'db86fabfde3f9d1e41a863f58db34eb88d067440', class: cls("db-tag", this.className), ref: (el) => {
+        return (h("div", { key: 'c0f6907ce1246c8047c5af115a093ecaa4032a55', class: cls("db-tag", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_a = this.showCheckState) !== null && _a !== void 0 ? _a : true), "data-show-icon": getBooleanAsString(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: '1bef11e30ca670fa5bf1d438cd12c43e233cded4', name: "content" }), h("slot", { key: '3f94141f60688d0730478711748fa9dbb194f810' }), this.text ? this.text : null, 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: this.id, "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_a = this.showCheckState) !== null && _a !== void 0 ? _a : true), "data-show-icon": getBooleanAsString(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: 'c5e244aebde8e2fa54bcd61e66d69559a607a952', name: "content" }), h("slot", { key: '7356f14f2c11b4180f1f59ef8bd5a4e0dffb9d9c' }), this.text ? this.text : null, 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() {

package/dist/collection/components/textarea/textarea.js

@@ -85,12 +85,16 @@ export class DBTextarea {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    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");
@@ -182,10 +186,10 @@ export class DBTextarea {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: '3ac7e870ca2c9d8f366f07797fc15c238ddeab50', class: cls("db-textarea", this.className), "data-variant": this.variant, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: 'd3d0e209d0a14a54975cce835e50e4f57d09d1bd', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("textarea", { key: '7e7dce4db9a84230a9c736039eefd58022944cf8', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
+        return (h("div", { key: 'c5a0b30d63e913e519eda3d1a4f2358260ee78bc', class: cls("db-textarea", this.className), "data-variant": this.variant, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: 'bc06e336ede0361cfea4dede668ce4a9d51db8d5', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("textarea", { key: 'c578a2d86b8146c6b063038110c3b946196192cc', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
                 this._ref = el;
             }, id: this._id, "data-resize": this.resize, "data-hide-resizer": getHideProp((_b = this.showResizer) !== null && _b !== void 0 ? _b : true), disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), readOnly: getBoolean(this.readOnly, "readOnly") ||
-                getBoolean(this.readonly, "readonly"), form: this.form, maxLength: getNumber(this.maxLength, this.maxlength), minLength: getNumber(this.minLength, this.minlength), name: this.name, wrap: this.wrap, spellcheck: this.spellCheck, autocomplete: this.autocomplete, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), value: (_c = this.value) !== null && _c !== void 0 ? _c : this._value, "aria-describedby": (_d = this.ariaDescribedBy) !== null && _d !== void 0 ? _d : this._descByIds, placeholder: (_e = this.placeholder) !== null && _e !== void 0 ? _e : DEFAULT_PLACEHOLDER, rows: getNumber(this.rows, DEFAULT_ROWS), cols: getNumber(this.cols) }), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'dc153c224d3acafa0a8d7f3ad37317b76cba01b8', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '21cd2120d06ec2891979d7a7fc0f1041031dabf2', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+                getBoolean(this.readonly, "readonly"), form: this.form, maxLength: getNumber(this.maxLength, this.maxlength), minLength: getNumber(this.minLength, this.minlength), name: this.name, wrap: this.wrap, spellcheck: this.spellCheck, autocomplete: this.autocomplete, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), value: (_c = this.value) !== null && _c !== void 0 ? _c : this._value, "aria-describedby": (_d = this.ariaDescribedBy) !== null && _d !== void 0 ? _d : this._descByIds, placeholder: (_e = this.placeholder) !== null && _e !== void 0 ? _e : DEFAULT_PLACEHOLDER, rows: getNumber(this.rows, DEFAULT_ROWS), cols: getNumber(this.cols) }), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '7e4779a8d59cdf989d50efcb9327bb388afed965', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'c1dd840156dc108c653c0f0b6c7d4a8e4af5c8a0', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-textarea"; }
     static get properties() {

package/dist/collection/components/tooltip/tooltip.js

@@ -37,7 +37,7 @@ export class DBTooltip {
             return;
         if (this._ref) {
             // This is a workaround for angular
-            utilsDelay(() => {
+            void utilsDelay(() => {
                 var _a;
                 // Due to race conditions we need to check for _ref again
                 if (this._ref) {
@@ -77,12 +77,16 @@ export class DBTooltip {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    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");
@@ -110,6 +114,7 @@ export class DBTooltip {
         if (this._ref && this.initialized && this._id) {
             const parent = this.getParent();
             if (parent) {
+                this.handleAutoPlacement(parent);
                 ["mouseenter", "focusin"].forEach((event) => {
                     parent.addEventListener(event, () => this.handleEnter(parent));
                 });
@@ -148,9 +153,9 @@ export class DBTooltip {
     }
     render() {
         var _a, _b;
-        return (h("i", { key: '51ba2dd002f118a398f57615af7ce30b2e1e93d9', class: cls("db-tooltip", this.className), role: "tooltip", "aria-hidden": "true", "data-gap": "true", ref: (el) => {
+        return (h("i", { key: 'c7945ff2b0ac7baf8b2f7d7c2eae448815889415', class: cls("db-tooltip", this.className), role: "tooltip", "aria-hidden": "true", "data-gap": "true", ref: (el) => {
                 this._ref = el;
-            }, id: this._id, "data-emphasis": this.emphasis, "data-animation": getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-delay": this.delay, "data-width": this.width, "data-show-arrow": getBooleanAsString((_b = this.showArrow) !== null && _b !== void 0 ? _b : true), "data-placement": this.placement, onClick: (event) => this.handleClick(event) }, h("slot", { key: '0edebe953574e4949fc3ead41f283d79a5bf946f' })));
+            }, id: this._id, "data-emphasis": this.emphasis, "data-animation": getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-delay": this.delay, "data-width": this.width, "data-show-arrow": getBooleanAsString((_b = this.showArrow) !== null && _b !== void 0 ? _b : true), "data-placement": this.placement, onClick: (event) => this.handleClick(event) }, h("slot", { key: '3d170c76cc0d05c75a65daaac4b3570ed522d0d1' })));
     }
     static get is() { return "db-tooltip"; }
     static get properties() {

package/dist/collection/utils/floating-components.js

@@ -228,10 +228,54 @@ export const getFloatingProps = (element, parent, placement) => {
         innerHeight
     };
 };
+const MAX_ANCESTOR_DEPTH = 10;
+const ancestorCache = new WeakMap();
+const getAncestorHasCorrectedPlacement = (element) => {
+    if (ancestorCache.has(element)) {
+        return ancestorCache.get(element);
+    }
+    let current = element.parentElement;
+    let anchor = 0;
+    while (current && anchor < MAX_ANCESTOR_DEPTH) {
+        if (current.dataset['correctedPlacement']) {
+            ancestorCache.set(element, current);
+            return current;
+        }
+        current = current.parentElement;
+        anchor += 1;
+    }
+    ancestorCache.set(element, null);
+    return null;
+};
 export const handleFixedPopover = (element, parent, placement) => {
-    var _a;
-    const distance = (_a = getComputedStyle(element).getPropertyValue('--db-popover-distance')) !== null && _a !== void 0 ? _a : '0px';
-    const { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
+    var _a, _b;
+    const parentComputedStyles = getComputedStyle(parent);
+    const parentHasFloatingPosition = ['absolute', 'fixed'].includes(parentComputedStyles.position);
+    const ancestorWithCorrectedPlacement = getAncestorHasCorrectedPlacement(element);
+    const noFloatingAncestor = !ancestorWithCorrectedPlacement && !parentHasFloatingPosition;
+    const distance = (_b = (_a = getComputedStyle(element)) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--db-popover-distance')) !== null && _b !== void 0 ? _b : '0px';
+    let { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
+    if (ancestorWithCorrectedPlacement) {
+        const ancestorRect = ancestorWithCorrectedPlacement.getBoundingClientRect();
+        left = Math.abs(left - ancestorRect.left);
+        right = (width + Math.abs(right - ancestorRect.right)) * 1.5; // We add a transform -50% later
+        top = Math.abs(top - ancestorRect.top);
+        bottom = (height + Math.abs(bottom - ancestorRect.bottom)) * 1.5; // We add a transform -50% later
+    }
+    if (parentHasFloatingPosition) {
+        /*
+         * If we have a floating element inside an element with position:absolute/fixed
+         * we need to calculate with relative values
+         * */
+        left = 0;
+        right = width;
+        top = 0;
+        bottom = height;
+        if (['auto', 'inherit', '0'].includes(parentComputedStyles.zIndex)) {
+            // We need the default zIndex for floating elements on the parent
+            parent.style.zIndex = '1';
+        }
+    }
     // Tooltip arrow position
     if (childWidth > width && (correctedPlacement.startsWith('bottom') || correctedPlacement.startsWith('top'))) {
         const diff = width / 2 / childWidth * 100;
@@ -241,6 +285,9 @@ export const handleFixedPopover = (element, parent, placement) => {
         else if (correctedPlacement.endsWith('end')) {
             element.style.setProperty('--db-tooltip-arrow-inline-start', `${100 - diff}%`);
         }
+        else {
+            element.style.setProperty('--db-tooltip-arrow-inline-start', `50%`);
+        }
     }
     if (childHeight > height && (correctedPlacement.startsWith('left') || correctedPlacement.startsWith('bottom'))) {
         const diff = height / 2 / childHeight * 100;
@@ -250,6 +297,9 @@ export const handleFixedPopover = (element, parent, placement) => {
         else if (correctedPlacement.endsWith('end')) {
             element.style.setProperty('--db-tooltip-arrow-block-start', `${100 - diff}%`);
         }
+        else {
+            element.style.setProperty('--db-tooltip-arrow-block-start', `50%`);
+        }
     }
     // Popover position
     if (correctedPlacement === 'right' || correctedPlacement === 'left') {
@@ -259,11 +309,11 @@ export const handleFixedPopover = (element, parent, placement) => {
     else if (correctedPlacement === 'right-start' || correctedPlacement === 'left-start') {
         const end = top + childHeight;
         element.style.insetBlockStart = `${top}px`;
-        element.style.insetBlockEnd = `${end > innerHeight ? innerHeight : end}px`;
+        element.style.insetBlockEnd = `${!parentHasFloatingPosition && end > innerHeight ? innerHeight : end}px`;
     }
     else if (correctedPlacement === 'right-end' || correctedPlacement === 'left-end') {
         const start = bottom - childHeight;
-        element.style.insetBlockStart = `${start < 0 ? 0 : start}px`;
+        element.style.insetBlockStart = `${!parentHasFloatingPosition && start < 0 ? 0 : start}px`;
         element.style.insetBlockEnd = `${bottom}px`;
     }
     else if (correctedPlacement === 'top' || correctedPlacement === 'bottom') {
@@ -273,32 +323,32 @@ export const handleFixedPopover = (element, parent, placement) => {
     else if (correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
         const end = left + childWidth;
         element.style.insetInlineStart = `${left}px`;
-        element.style.insetInlineEnd = `${end > innerWidth ? innerWidth : end}px`;
+        element.style.insetInlineEnd = `${!parentHasFloatingPosition && end > innerWidth ? innerWidth : end}px`;
     }
     else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
-        const start = left - childWidth;
-        element.style.insetInlineStart = `${right - childWidth}px`;
-        element.style.insetInlineEnd = `${start < 0 ? 0 : start}px`;
+        const start = right - childWidth;
+        element.style.insetInlineStart = `${!parentHasFloatingPosition && start < 0 ? 0 : start}px`;
+        element.style.insetInlineEnd = `${right}px`;
     }
     if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('right')) {
         const end = right + childWidth;
         element.style.insetInlineStart = `calc(${right}px + ${distance})`;
-        element.style.insetInlineEnd = `calc(${end > innerWidth ? innerWidth : end}px + ${distance})`;
+        element.style.insetInlineEnd = `calc(${noFloatingAncestor && end > innerWidth ? innerWidth : end}px + ${distance})`;
     }
     else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('left')) {
         const start = left - childWidth;
-        element.style.insetInlineStart = `calc(${start < 0 ? 0 : start}px - ${distance})`;
+        element.style.insetInlineStart = `calc(${noFloatingAncestor && start < 0 ? 0 : start}px - ${distance})`;
         element.style.insetInlineEnd = `calc(${right}px - ${distance})`;
     }
     else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('top')) {
         const start = top - childHeight;
-        element.style.insetBlockStart = `calc(${start < 0 ? 0 : start}px - ${distance})`;
-        element.style.insetBlockEnd = `calc(${bottom}px - ${distance})`;
+        element.style.insetBlockStart = `calc(${noFloatingAncestor && start < 0 ? 0 : start}px - ${distance})`;
+        element.style.insetBlockEnd = `calc(${parentHasFloatingPosition ? start : bottom}px - ${distance})`;
     }
     else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('bottom')) {
         const end = bottom + childHeight;
-        element.style.insetBlockStart = `calc(${bottom}px + ${distance})`;
-        element.style.insetBlockEnd = `calc(${end > innerHeight ? innerHeight : end}px + ${distance})`;
+        element.style.insetBlockStart = `calc(${parentHasFloatingPosition ? end : bottom}px + ${distance})`;
+        element.style.insetBlockEnd = `calc(${noFloatingAncestor && end > innerHeight ? innerHeight : end}px + ${distance})`;
     }
     element.style.position = 'fixed';
     element.dataset['correctedPlacement'] = correctedPlacement;