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

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
+var index = require('./index-CSMPhlzz.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CsHqnQII.js');
-var formComponents = require('./form-components-LsqVohyb.js');
+var index$1 = require('./index-2_9ESkQu.js');
+var formComponents = require('./form-components-_ncB_U2D.js');
 
 const DBSelect = class {
     constructor(hostRef) {
@@ -104,6 +104,15 @@ const DBSelect = class {
         // Default: show empty option for non-required selects
         return !this.required;
     }
+    resetIds() {
+        var _a, _b, _c;
+        const mId = (_c = (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `select-${index$1.uuid()}`;
+        this._id = mId;
+        this._messageId = mId + constants.DEFAULT_MESSAGE_ID_SUFFIX;
+        this._validMessageId = mId + constants.DEFAULT_VALID_MESSAGE_ID_SUFFIX;
+        this._invalidMessageId = mId + constants.DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
+        this._placeholderId = mId + constants.DEFAULT_PLACEHOLDER_ID_SUFFIX;
+    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -115,12 +124,16 @@ const DBSelect = class {
             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");
@@ -137,16 +150,25 @@ const DBSelect = class {
         }
     }
     watch0Fn() {
+        var _a, _b;
+        if ((_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
+            this.resetIds();
+        }
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
         var _a;
         this._invalidMessage =
             this.invalidMessage ||
                 ((_a = this._ref) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
                 constants.DEFAULT_INVALID_MESSAGE;
     }
-    watch0() {
-        this.watch0Fn();
+    watch1() {
+        this.watch1Fn();
     }
-    watch1Fn() {
+    watch2Fn() {
         if (this._id && this.initialized) {
             const messageId = this._id + constants.DEFAULT_MESSAGE_ID_SUFFIX;
             const placeholderId = this._id + constants.DEFAULT_PLACEHOLDER_ID_SUFFIX;
@@ -167,16 +189,16 @@ const DBSelect = class {
             this.initialized = false;
         }
     }
-    watch1() {
-        this.watch1Fn();
-    }
-    watch2Fn() {
-        this._value = this.value;
-    }
     watch2() {
         this.watch2Fn();
     }
     watch3Fn() {
+        this._value = this.value;
+    }
+    watch3() {
+        this.watch3Fn();
+    }
+    watch4Fn() {
         // If angular uses ngModel value and _value are null
         // then the value will be set afterward and the _ref will be refreshed
         const addResetListener = true;
@@ -196,24 +218,19 @@ const DBSelect = class {
             }, controller.signal);
         }
     }
-    watch3() {
-        this.watch3Fn();
+    watch4() {
+        this.watch4Fn();
     }
     componentDidLoad() {
-        var _a;
         this.enableAttributePassing(this._ref, "db-select");
         this.initialized = true;
-        const mId = (_a = this.id) !== null && _a !== void 0 ? _a : `select-${index$1.uuid()}`;
-        this._id = mId;
-        this._messageId = mId + constants.DEFAULT_MESSAGE_ID_SUFFIX;
-        this._validMessageId = mId + constants.DEFAULT_VALID_MESSAGE_ID_SUFFIX;
-        this._invalidMessageId = mId + constants.DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
-        this._placeholderId = mId + constants.DEFAULT_PLACEHOLDER_ID_SUFFIX;
+        this.resetIds();
         this._invalidMessage = this.invalidMessage || constants.DEFAULT_INVALID_MESSAGE;
         this.watch0Fn();
         this.watch1Fn();
         this.watch2Fn();
         this.watch3Fn();
+        this.watch4Fn();
     }
     disconnectedCallback() {
         var _a;
@@ -221,32 +238,38 @@ const DBSelect = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (index.h("div", { key: '50e43dc0ffe52d1683df95a336201616975d7e22', class: index$1.cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": index$1.getHideProp(this.showLabel), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon) }, index.h("label", { key: '5bbc909caa2c33aea4e4e2956d8bc133f939fd13', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("select", { key: 'b6ef5a4f622219ee38433f643959c7db039a67db', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (index.h("div", { key: '0e3ebb6a472cbd86ec971d96062c6779e11c9ff4', class: index$1.cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": index$1.getHideProp(this.showLabel), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon) }, index.h("label", { key: '7d22cdb4c487037568a185719165efeaf4825b38', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("select", { key: '6a4e62ac9f68e9ec0cf8379b812b8868bf47beb0', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
             }, required: index$1.getBoolean(this.required, "required"), disabled: index$1.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 ? (index.h("option", { class: "placeholder", value: "", "data-show-empty-option": index$1.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 (index.h(index.Fragment, null, option.options ? (index.h("optgroup", { label: this.getOptionLabel(option), key: undefined }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (index.h("option", { value: optgroupOption.value, selected: optgroupOption.selected, disabled: optgroupOption.disabled, key: undefined }, this.getOptionLabel(optgroupOption)))))) : (index.h("option", { value: option.value, disabled: option.disabled, selected: option.selected, key: undefined }, this.getOptionLabel(option)))));
-        })) : (index.h("slot", null))), this.placeholder ? (index.h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '79703f10ff7c61b481e34e98ef2ad45133a3e2a4', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: 'e4667735054c370c14a954219060cc27b0a9007f', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+        })) : (index.h("slot", null))), this.placeholder ? (index.h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '736b83b341e8161f463a3131fc6cb39f6c966fc7', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '1353c1a7cf3ae895b6108bc4800ab40ca808c596', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
-        "_ref": [{
+        "id": [{
                 "watch0": 0
+            }],
+        "propOverrides?.id": [{
+                "watch0": 0
+            }],
+        "_ref": [{
+                "watch1": 0
             }, {
-                "watch3": 0
+                "watch4": 0
             }],
         "invalidMessage": [{
-                "watch0": 0
+                "watch1": 0
             }],
         "_id": [{
-                "watch1": 0
+                "watch2": 0
             }],
         "initialized": [{
-                "watch1": 0
+                "watch2": 0
             }],
         "value": [{
-                "watch2": 0
+                "watch3": 0
             }]
     }; }
 };

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
-var index$1 = require('./index-CsHqnQII.js');
+var index = require('./index-CSMPhlzz.js');
+var index$1 = require('./index-2_9ESkQu.js');
 
 const DBStack = class {
     constructor(hostRef) {
@@ -18,12 +18,16 @@ const DBStack = class {
             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");
@@ -43,9 +47,10 @@ const DBStack = class {
         this.enableAttributePassing(this._ref, "db-stack");
     }
     render() {
-        return (index.h("div", { key: '64a5a45be3cfecebbe4fff818f6cbfeee462513c', class: index$1.cls("db-stack", this.className), ref: (el) => {
+        var _a, _b;
+        return (index.h("div", { key: '6927a665a08e7383c992d2b93d264a991e871969', class: index$1.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": index$1.getBooleanAsString(this.wrap) }, index.h("slot", { key: '69bd35bb73645e26b9819c7d9fc062cba032b4d7' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-gap": this.gap, "data-variant": this.variant, "data-direction": this.direction, "data-alignment": this.alignment, "data-justify-content": this.justifyContent, "data-wrap": index$1.getBooleanAsString(this.wrap) }, index.h("slot", { key: '0c5f39afc50167b38e39797c240f32a696d93adb' })));
     }
 };
 

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
+var index = require('./index-CSMPhlzz.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CsHqnQII.js');
-var formComponents = require('./form-components-LsqVohyb.js');
+var index$1 = require('./index-2_9ESkQu.js');
+var formComponents = require('./form-components-_ncB_U2D.js');
 
 const DBSwitch = class {
     constructor(hostRef) {
@@ -84,6 +84,14 @@ const DBSwitch = class {
             }
         }
     }
+    resetIds() {
+        var _a, _b, _c;
+        const mId = (_c = (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `switch-${index$1.uuid()}`;
+        this._id = mId;
+        this._messageId = `${mId}${constants.DEFAULT_MESSAGE_ID_SUFFIX}`;
+        this._validMessageId = `${mId}${constants.DEFAULT_VALID_MESSAGE_ID_SUFFIX}`;
+        this._invalidMessageId = `${mId}${constants.DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`;
+    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -95,12 +103,16 @@ const DBSwitch = class {
             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");
@@ -117,12 +129,31 @@ const DBSwitch = class {
         }
     }
     watch0Fn() {
-        this.handleValidation();
+        var _a, _b;
+        if ((_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
+            this.resetIds();
+        }
     }
     watch0() {
         this.watch0Fn();
     }
     watch1Fn() {
+        this.handleValidation();
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
+        var _a;
+        this._invalidMessage =
+            this.invalidMessage ||
+                ((_a = this._ref) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
+                constants.DEFAULT_INVALID_MESSAGE;
+    }
+    watch2() {
+        this.watch2Fn();
+    }
+    watch3Fn() {
         if (this._ref) {
             const defaultChecked = undefined;
             let controller = this.abortController;
@@ -138,54 +169,63 @@ const DBSwitch = class {
             }, controller.signal);
         }
     }
-    watch1() {
-        this.watch1Fn();
+    watch3() {
+        this.watch3Fn();
     }
     componentDidLoad() {
-        var _a;
         this.enableAttributePassing(this._ref, "db-switch");
-        this._id = (_a = this.id) !== null && _a !== void 0 ? _a : `switch-${index$1.uuid()}`;
-        this._messageId = `${this._id}${constants.DEFAULT_MESSAGE_ID_SUFFIX}`;
-        this._validMessageId = `${this._id}${constants.DEFAULT_VALID_MESSAGE_ID_SUFFIX}`;
-        this._invalidMessageId = `${this._id}${constants.DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`;
+        this.resetIds();
         this.handleValidation();
+        this._invalidMessage = this.invalidMessage || constants.DEFAULT_INVALID_MESSAGE;
         this.watch0Fn();
         this.watch1Fn();
+        this.watch2Fn();
+        this.watch3Fn();
     }
     disconnectedCallback() {
         var _a;
         (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
     }
     render() {
-        var _a, _b, _c, _d;
-        return (index.h("div", { key: 'f2dab897c89fa8aadd97abe59e81b4d7ef4561c5', class: index$1.cls("db-switch", this.className), "data-visual-aid": index$1.getBooleanAsString(this.visualAid), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, index.h("label", { key: '8d7c3e44a9f7c565224124d499abe6c3b96582f6', htmlFor: this._id }, index.h("input", { key: '1cba4d3dbe46c97cd9039442e61eb0d9baab0587', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
+        var _a, _b;
+        return (index.h("div", { key: '5d55932625984fa62f0ee9d86f3d89f5b63f9072', class: index$1.cls("db-switch", this.className), "data-visual-aid": index$1.getBooleanAsString(this.visualAid), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, index.h("label", { key: '711ab3c882dbd490e19400ecf5d926f5bf80e95e', htmlFor: this._id }, index.h("input", { key: 'aa50031870b7ee76e1f1e6f9bd5dd14b9013de18', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
                 this._ref = el;
-            }, checked: index$1.getBoolean(this.checked, "checked"), value: this.value, disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: index$1.getBoolean(this.required, "required"), "data-aid-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-aid-icon-trailing": this.iconTrailing, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => this.handleKeyDown(event) }), this.label ? this.label : index.h("slot", null)), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '9495dfc7fb2e3947f21b834792c4caeab411bbd0', size: "small", semantic: "critical", id: this._invalidMessageId }, (_d = (_c = this._invalidMessage) !== null && _c !== void 0 ? _c : this.invalidMessage) !== null && _d !== void 0 ? _d : constants.DEFAULT_INVALID_MESSAGE), index.h("span", { key: '6e6b325689130fc5cdeef86d3a4f59299b5f8450', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, checked: index$1.getBoolean(this.checked, "checked"), value: this.value, disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: index$1.getBoolean(this.required, "required"), "data-aid-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-aid-icon-trailing": this.iconTrailing, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => this.handleKeyDown(event) }), this.label ? this.label : index.h("slot", null)), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '95f846f3de48f29bef0406c3c19d0314a2a0cfc6', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '297a64a0c5b5faf97a3f685ab78eea7145fe700e', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
-        "validation": [{
+        "id": [{
                 "watch0": 0
             }],
-        "required": [{
+        "propOverrides?.id": [{
                 "watch0": 0
             }],
+        "validation": [{
+                "watch1": 0
+            }],
+        "required": [{
+                "watch1": 0
+            }],
         "message": [{
-                "watch0": 0
+                "watch1": 0
             }],
         "showMessage": [{
-                "watch0": 0
+                "watch1": 0
             }],
         "validMessage": [{
-                "watch0": 0
+                "watch1": 0
             }],
         "invalidMessage": [{
-                "watch0": 0
+                "watch1": 0
+            }, {
+                "watch2": 0
             }],
         "checked": [{
-                "watch0": 0
+                "watch1": 0
             }],
         "_ref": [{
-                "watch1": 0
+                "watch2": 0
+            }, {
+                "watch3": 0
             }]
     }; }
 };

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
-var index$1 = require('./index-CsHqnQII.js');
+var index = require('./index-CSMPhlzz.js');
+var index$1 = require('./index-2_9ESkQu.js');
 
 const DBTabItem = class {
     constructor(hostRef) {
@@ -44,12 +44,16 @@ const DBTabItem = class {
             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,10 +113,10 @@ const DBTabItem = class {
         }
     }
     render() {
-        var _a, _b;
-        return (index.h("li", { key: '9bbc9bdc6c450f62ce790a2662b165f9fad484ea', class: index$1.cls("db-tab-item", this.className), role: "none" }, index.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": index$1.getBooleanAsString((_b = this.showIconLeading) !== null && _b !== void 0 ? _b : this.showIcon), "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing), "data-no-text": index$1.getBooleanAsString(this.noText) }, index.h("input", { key: '372cd912646fd40dc31f49d344d60526442a0f7a', type: "radio", role: "tab", disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: index$1.getBoolean(this.checked, "checked"), ref: (el) => {
+        var _a, _b, _c, _d, _e, _f;
+        return (index.h("li", { key: 'aa5a73d9a5f1482623ebdb8a79846b478ecf9fd1', class: index$1.cls("db-tab-item", this.className), role: "none" }, index.h("label", { key: 'b6148c23f64ffd2d9153db7e8e3d39a90f009da3', htmlFor: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-icon-trailing": this.iconTrailing, "data-show-icon": index$1.getBooleanAsString((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing), "data-no-text": index$1.getBooleanAsString(this.noText) }, index.h("input", { key: 'c7d167364eaa4f9cee156d9260553b14d60ffb13', type: "radio", role: "tab", disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: index$1.getBoolean(this.checked, "checked"), ref: (el) => {
                 this._ref = el;
-            }, name: this._name, id: this.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, index.h("slot", { key: '843e696cad853b5ce9d582f210efe86f3d270cb8' }))));
+            }, name: this._name, id: (_e = this.id) !== null && _e !== void 0 ? _e : (_f = this.propOverrides) === null || _f === void 0 ? void 0 : _f.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, index.h("slot", { key: 'aab78a92118a8ea9b7ffcb446ead8211294a6e6c' }))));
     }
     static get watchers() { return {
         "_ref": [{
@@ -145,12 +149,16 @@ const DBTabList = class {
             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");
@@ -170,9 +178,10 @@ const DBTabList = class {
         this.enableAttributePassing(this._ref, "db-tab-list");
     }
     render() {
-        return (index.h("div", { key: 'a2d1cf85f398ee76b560e9aa1c7f84871d752432', class: index$1.cls("db-tab-list", this.className), ref: (el) => {
+        var _a, _b;
+        return (index.h("div", { key: '9d2121250cb2a12971ea33774d8ff9e79117d18e', class: index$1.cls("db-tab-list", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, index.h("ul", { key: '03498821ff3ff623e16313782c67384e7708eecf', role: "tablist" }, index.h("slot", { key: '10eba579352100e449568b7ec38e4cc73efb0463' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("ul", { key: 'db93a3777f11ee39e15633b0b5ae501b0526d73d', role: "tablist" }, index.h("slot", { key: '14d45a6c1693c5c2bdb2d422397e6ddeb93bf5b3' }))));
     }
 };
 
@@ -191,12 +200,16 @@ const DBTabPanel = class {
             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,9 +229,10 @@ const DBTabPanel = class {
         this.enableAttributePassing(this._ref, "db-tab-panel");
     }
     render() {
-        return (index.h("section", { key: '312ef04379d3b4a094999f02ac919e3b0ac31877', class: index$1.cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
+        var _a, _b;
+        return (index.h("section", { key: '3cae700e240af4818416120b8c85fc91839c7fa1', class: index$1.cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, this.content ? this.content : null, index.h("slot", { key: '7848155bb7734db6835c0fe7fcf85eb37635110d' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, this.content ? this.content : null, index.h("slot", { key: '25595de165921a31119ffd785bd5c569c42fa557' })));
     }
 };
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
-var index$1 = require('./index-CsHqnQII.js');
+var index = require('./index-CSMPhlzz.js');
+var index$1 = require('./index-2_9ESkQu.js');
 
 const DBTabs = class {
     constructor(hostRef) {
@@ -145,12 +145,16 @@ const DBTabs = class {
             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");
@@ -203,11 +207,11 @@ const DBTabs = class {
         this._resizeObserver = undefined;
     }
     render() {
-        var _a, _b, _c, _d;
-        return (index.h("div", { key: '0ba78eeed24756c5a55acef3080c4d66db43139b', class: index$1.cls("db-tabs", this.className), ref: (el) => {
+        var _a, _b, _c, _d, _e, _f;
+        return (index.h("div", { key: '6d273b967668288248c3853be80261a877d3ae04', class: index$1.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 ? (index.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 ? (index.h(index.Fragment, null, index.h("db-tab-list", null, (_c = this.convertTabs()) === null || _c === void 0 ? void 0 : _c.map((tab, index$1) => (index.h("db-tab-item", { key: this.name + "tab-item" + index$1, 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$1) => (index.h("db-tab-panel", { key: this.name + "tab-panel" + index$1, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (index.h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, index.h("slot", { key: '30e17d6cbc5899d97c5f1ffc73e4c09ccbff1dc1' })));
+            }, 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 ? (index.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 ? (index.h(index.Fragment, null, index.h("db-tab-list", null, (_e = this.convertTabs()) === null || _e === void 0 ? void 0 : _e.map((tab, index$1) => (index.h("db-tab-item", { key: this.name + "tab-item" + index$1, 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$1) => (index.h("db-tab-panel", { key: this.name + "tab-panel" + index$1, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (index.h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, index.h("slot", { key: '04f5d96f32695ae2661ace77827ee783eb0f23d0' })));
     }
     static get watchers() { return {
         "_ref": [{