@db-ux/wc-core-components 4.5.4-mcp-e4cd7e6 → 4.5.4-table-c758ae7

package/dist/esm/db-radio.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-kHKR5QG5.js';
+import { r as registerInstance, c as createEvent, h } from './index-LpjjuLKB.js';
 import { u as uuid, e as getBoolean, l as getHideProp, c as cls, d as delay } from './index-xkoBSP8R.js';
 import { b as addResetEventListener } from './form-components-D6LQfJvq.js';
 
@@ -125,7 +125,7 @@ const DBRadio = class {
         (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
     }
     render() {
-        return (h("label", { key: 'b77bbb3335c0b3f3813e11c7ac7228a84a40769a', class: cls("db-radio", this.className), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), htmlFor: this._id }, h("input", { key: '4fe82a7b57a6dd06e556e26d50df574a541129f9', type: "radio", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (h("label", { key: '1450495bf8a887db244427529a5811c8aba388e9', class: cls("db-radio", this.className), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), htmlFor: this._id }, h("input", { key: 'f0d89d24058e1c77c64cc7f1a26fcc86392900c5', type: "radio", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
             }, id: this._id, name: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, required: getBoolean(this.required, "required"), onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event) }), this.label ? this.label : h("slot", null)));
     }

package/dist/esm/db-section.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-kHKR5QG5.js';
+import { r as registerInstance, h } from './index-LpjjuLKB.js';
 import { c as cls } from './index-xkoBSP8R.js';
 
 const DBSection = class {
@@ -46,9 +46,9 @@ const DBSection = class {
     }
     render() {
         var _a, _b;
-        return (h("section", { key: 'd2cb50a43641ef50d901bd488c7d31911e0f5487', class: cls("db-section", this.className), ref: (el) => {
+        return (h("section", { key: '21276e8ff993a9db126db60f13ec9b61ee903d52', class: cls("db-section", 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-spacing": this.spacing || "medium", "data-width": this.width }, h("slot", { key: '90ce1533ea3392317c7e271ad6d2880d0434321e' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-spacing": this.spacing || "medium", "data-width": this.width }, h("slot", { key: '5f239ac66f8caaf528db0e9af88ac7950894ff2a' })));
     }
 };
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-kHKR5QG5.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-LpjjuLKB.js';
 import { l as DEFAULT_INVALID_MESSAGE, f as DEFAULT_MESSAGE_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, i as DEFAULT_PLACEHOLDER_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE, a as DEFAULT_LABEL } from './constants-BdL-nI5y.js';
 import { h as hasVoiceOver, d as delay, s as stringPropVisible, u as uuid, e as getBoolean, g as getBooleanAsString, l as getHideProp, c as cls } from './index-xkoBSP8R.js';
 import { c as addValueResetEventListener } from './form-components-D6LQfJvq.js';
@@ -236,14 +236,14 @@ const DBSelect = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: 'e083b3de98c929310348ef084f614b6115cc79cb', 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: 'f2dab8efe5a3c299268da1f5c58d09752b6b8ca5', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("select", { key: '197c8e2861449bed151348411043d5acb9c7b57c', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (h("div", { key: 'b5781f8679a45319dd04b45aad3a8da9f60b8f86', 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: 'cf6035ebd7f8906dd6d91eec96e225e11b5532d1', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("select", { key: '42c6d79acf18ef26bf6b3b56b457f777d845a324', "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: '613305a3087d33f6ce2e9a90f6709897067f4355', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '6f3d17afd859cd7f58c64f7d030509478a7fb438', "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: '705a3194b49b644c53729a74277f2fb339fffdc7', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '201aea9cd882406033990555b71030d7b9899cde', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
         "id": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-kHKR5QG5.js';
+import { r as registerInstance, h } from './index-LpjjuLKB.js';
 import { g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
 
 const DBStack = class {
@@ -46,9 +46,9 @@ const DBStack = class {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: 'e8a95918ab5412c03412b92adb3f2a2d5979d492', class: cls("db-stack", this.className), ref: (el) => {
+        return (h("div", { key: '4792ed6d6adf369b6b031e4545476b4461be0bde', class: cls("db-stack", 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-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: 'b95b19d6ff1a61f416eadfb14d9e19647e4f6cb4' })));
+            }, 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": getBooleanAsString(this.wrap) }, h("slot", { key: 'e4104abeed53330037edfc294fa9315e4d553783' })));
     }
 };
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-kHKR5QG5.js';
+import { r as registerInstance, c as createEvent, h } from './index-LpjjuLKB.js';
 import { l as DEFAULT_INVALID_MESSAGE, f as DEFAULT_MESSAGE_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE } from './constants-BdL-nI5y.js';
 import { h as hasVoiceOver, d as delay, s as stringPropVisible, u as uuid, e as getBoolean, l as getHideProp, g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
 import { a as addCheckedResetEventListener } from './form-components-D6LQfJvq.js';
@@ -186,9 +186,9 @@ const DBSwitch = class {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '66c2badcfc403e68d44d93cd1a79d087b212bbd6', 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: 'c22fc86dd012f6de327f861cca3c1b4ab4f3605d', htmlFor: this._id }, h("input", { key: '3d1532eee9a137f2a1db1ba1574856ecc61833d8', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
+        return (h("div", { key: '15af22a47433a33d2c9329ae58e61e0fe990618b', 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: '0b219e038aa70ce09b9369721b9441d7a302cfbc', htmlFor: this._id }, h("input", { key: '119c82316aabc99df99d5d1da5dc6b85803abd51', 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: 'd24f80874212a9a9669d5731d9e5b6f4f3be6001', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'cb3420bd986f1398094fbac151d27a5c2f392d7d', "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: '895a6b540bc1e23d9d928aa6321776075afef39a', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '6439487fcbda2df868b233dfca151f8f678b9de3', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
         "id": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-kHKR5QG5.js';
+import { r as registerInstance, c as createEvent, h } from './index-LpjjuLKB.js';
 import { g as getBooleanAsString, e as getBoolean, c as cls } from './index-xkoBSP8R.js';
 
 const DBTabItem = class {
@@ -112,9 +112,9 @@ const DBTabItem = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (h("li", { key: '0b8687c942d18b49bdf25249be3f0ae1ca727256', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: 'b9eaa4d53de58d78d7f968d18b021c9cfe013502', 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": getBooleanAsString((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-no-text": getBooleanAsString(this.noText) }, h("input", { key: '81cf38a1a39e88fc85282e8b82d43768ce6f70a4', type: "radio", role: "tab", disabled: getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: getBoolean(this.checked, "checked"), ref: (el) => {
+        return (h("li", { key: 'db7c124385c66f1f62679fae9a8dfb91f76f76c5', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: 'fd4471af1096f1c577f38c0fcf34e4dd73944623', 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": getBooleanAsString((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-no-text": getBooleanAsString(this.noText) }, h("input", { key: '36283eb7682b3080fbe4f65712629c7f28bd7c47', 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: (_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, h("slot", { key: '89a4ba46af36e8dcc3bc53f87d17977c5827cd12' }))));
+            }, 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, h("slot", { key: '0984f4b39959be344e5fd15a38ae2d3fef4d15cc' }))));
     }
     static get watchers() { return {
         "_ref": [{
@@ -177,9 +177,9 @@ const DBTabList = class {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '8f02145864a04b79d94d5d5923b6eff32346a0c3', class: cls("db-tab-list", this.className), ref: (el) => {
+        return (h("div", { key: '64ae135babefc16c3173fbc67ed1605a74c009a0', class: cls("db-tab-list", 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 }, h("ul", { key: '759fdba6e69209ca915148c8b190f9311cb6f1ff', role: "tablist" }, h("slot", { key: '96bf4a10d3b422d6eb6be68c46f926b9f55eb0e6' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("ul", { key: '7f587632a62e52d03cb0f4831e48c9ec2f0060cc', role: "tablist" }, h("slot", { key: 'e1b7531ea0c97b907697cd0a637b51534bee9eb7' }))));
     }
 };
 
@@ -228,9 +228,9 @@ const DBTabPanel = class {
     }
     render() {
         var _a, _b;
-        return (h("section", { key: 'c10873d5857be6ea8653189ab735784939c53474', class: cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
+        return (h("section", { key: '6dcccad8702b6c097e5d6ed208698caecf68c403', class: cls("db-tab-panel", this.className), role: "tabpanel", 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 }, this.content ? this.content : null, h("slot", { key: '57a98a1b7e26ca61b16397b7615f71d883bfbd28' })));
+            }, 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, h("slot", { key: 'c2db0f4c48fb5a509a7ca7d1095133c171ea821a' })));
     }
 };
 

package/dist/esm/db-table-body_3.entry.js

@@ -0,0 +1,169 @@
+import { r as registerInstance, h } from './index-LpjjuLKB.js';
+import { u as uuid, c as cls } from './index-xkoBSP8R.js';
+
+const DBTableHead = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    getCells(cells) {
+        return cells === null || cells === void 0 ? void 0 : cells.map((cell) => (Object.assign(Object.assign({}, cell), { headerCell: true })));
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                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");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-table-head");
+    }
+    render() {
+        var _a;
+        return (h("thead", { key: 'fc59a3bac4953eaf10bbd04f29716804c98b05c8', class: cls("db-table-head", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id }, this.rows ? ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.map((row, index) => {
+            var _a, _b;
+            return (h("db-table-row", { class: (_a = row.className) !== null && _a !== void 0 ? _a : row.class, key: `${(_b = this.id) !== null && _b !== void 0 ? _b : uuid()}-table-head-row-${index}`, cells: this.getCells(row.cells), subHeaderEmphasis: row.subHeaderEmphasis, id: row.id }));
+        })) : (h("slot", null))));
+    }
+};
+
+const DBTableBody = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                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");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-table-body");
+    }
+    render() {
+        var _a;
+        return (h("tbody", { key: 'f32625da9123926d08a779f2b04f907249153f8b', class: cls("db-table-body", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id }, this.rows ? ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.map((row, index) => {
+            var _a, _b;
+            return (h("db-table-row", { class: (_a = row.className) !== null && _a !== void 0 ? _a : row.class, key: `${(_b = this.id) !== null && _b !== void 0 ? _b : uuid()}-table-body-row-${index}`, cells: row.cells, id: row.id }));
+        })) : (h("slot", null))));
+    }
+};
+
+const DBTableFooter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                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");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-table-footer");
+    }
+    render() {
+        var _a;
+        return (h("tfoot", { key: '97d0abedb46046365f4d1a713133cd31a86c12c7', class: cls("db-table-footer", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id }, this.rows ? ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.map((row, index) => {
+            var _a, _b;
+            return (h("db-table-row", { class: (_a = row.className) !== null && _a !== void 0 ? _a : row.class, key: `${(_b = this.id) !== null && _b !== void 0 ? _b : uuid()}-table-footer-row-${index}`, cells: row.cells, id: row.id }));
+        })) : (h("slot", null))));
+    }
+};
+
+export { DBTableBody as db_table_body, DBTableFooter as db_table_footer, DBTableHead as db_table_head };

package/dist/esm/{db-link.entry.js → db-table-caption.entry.js}

@@ -1,7 +1,7 @@
-import { r as registerInstance, h } from './index-kHKR5QG5.js';
-import { g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
+import { r as registerInstance, h } from './index-LpjjuLKB.js';
+import { c as cls } from './index-xkoBSP8R.js';
 
-const DBLink = class {
+const DBTableCaption = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
@@ -42,14 +42,13 @@ const DBLink = class {
         }
     }
     componentDidLoad() {
-        this.enableAttributePassing(this._ref, "db-link");
+        this.enableAttributePassing(this._ref, "db-table-caption");
     }
     render() {
-        var _a, _b, _c, _d;
-        return (h("a", { key: '71c5ab28a592fe182048091df4ed2d34f4cafe96', class: cls("db-link", this.className), ref: (el) => {
+        return (h("caption", { key: 'baeddf92648dcbf2965b0c3832e54f196a95dabe', class: cls("db-table-caption", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, href: this.href, target: this.target, rel: this.rel, role: this.role, referrerPolicy: (_c = this.referrerpolicy) !== null && _c !== void 0 ? _c : this.referrerPolicy, hrefLang: this.hreflang, "aria-disabled": getBooleanAsString(this.disabled), tabIndex: this.disabled ? -1 : 0, "data-size": this.size, "data-show-icon-trailing": getBooleanAsString((_d = this.showIcon) !== null && _d !== void 0 ? _d : true), "data-variant": this.variant, "data-content": this.content || "internal", "data-wrap": getBooleanAsString(this.wrap) }, this.text ? this.text : h("slot", null)));
+            }, id: this.id }, h("slot", { key: '46e4b15773e65ae78bd93699c41b463a2783fcd3' })));
     }
 };
 
-export { DBLink as db_link };
+export { DBTableCaption as db_table_caption };

package/dist/esm/db-table.entry.js

@@ -0,0 +1,134 @@
+import { r as registerInstance, h, F as Fragment } from './index-LpjjuLKB.js';
+import { d as delay, g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
+
+const DBTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this._data = undefined;
+        this._style = undefined;
+    }
+    convertData() {
+        try {
+            if (typeof this.data === "string") {
+                return JSON.parse(this.data);
+            }
+            return this.data;
+        }
+        catch (error) {
+            console.error(error);
+        }
+        return {};
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                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");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    watch0Fn() {
+        if (this.data) {
+            this._data = this.convertData();
+        }
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
+        if (this._ref && this.mobileVariant === "list") {
+            // Delay for angular
+            void delay(() => {
+                const table = this._ref;
+                if (!table)
+                    return;
+                const headerCells = table.querySelectorAll("thead tr th");
+                if (headerCells.length) {
+                    const otherRows = table.querySelectorAll(":is(tbody,tfoot) tr");
+                    otherRows.forEach((row) => {
+                        const cells = row.querySelectorAll(":is(td,th)");
+                        cells.forEach((cell, index) => {
+                            const headerCell = headerCells[index];
+                            if (headerCell &&
+                                headerCell.textContent &&
+                                !cell.dataset["header"]) {
+                                cell.dataset["header"] = headerCell.textContent.trim();
+                            }
+                        });
+                    });
+                }
+            }, 1);
+        }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
+        if (this.columnSizes) {
+            const columnStyles = {};
+            Object.entries(this.columnSizes).forEach(([key, value]) => {
+                columnStyles[`--db-table-column-size-${key}`] = value;
+            });
+            this._style = columnStyles;
+        }
+    }
+    watch2() {
+        this.watch2Fn();
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-table");
+        this.watch0Fn();
+        this.watch1Fn();
+        this.watch2Fn();
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        return (h("div", { key: 'f64631aec68b83467db063e5e0923144743bce72', class: cls("db-table", this.className), style: this._style, "data-width": this.width, "data-size": this.size, "data-divider": this.divider, "data-variant": this.variant, "data-mobile-variant": this.mobileVariant, "data-show-caption": getBooleanAsString(this.showCaption), "data-sticky-header": this.stickyHeader }, h("table", { key: '6cce6265d3907c99c333d8c4d209493548f22b36', ref: (el) => {
+                this._ref = el;
+            }, id: this.id }, h("caption", { key: '3ad5a7a85bd195180b842b39a5b2aeaebdd3bee7' }, this.captionPlain ? (this.captionPlain) : (h("slot", { name: "caption" }))), this._data ? (h(Fragment, null, ((_a = this._data) === null || _a === void 0 ? void 0 : _a.header) ? (h("db-table-head", { rows: (_b = this._data) === null || _b === void 0 ? void 0 : _b.header })) : null, ((_c = this._data) === null || _c === void 0 ? void 0 : _c.body) ? (h("db-table-body", { rows: (_d = this._data) === null || _d === void 0 ? void 0 : _d.body })) : null, ((_e = this._data) === null || _e === void 0 ? void 0 : _e.footer) ? (h("db-table-footer", { rows: (_f = this._data) === null || _f === void 0 ? void 0 : _f.footer })) : null)) : (h("slot", null)))));
+    }
+    static get watchers() { return {
+        "data": [{
+                "watch0": 0
+            }],
+        "mobileVariant": [{
+                "watch1": 0
+            }],
+        "_ref": [{
+                "watch1": 0
+            }],
+        "columnSizes": [{
+                "watch2": 0
+            }]
+    }; }
+};
+
+export { DBTable as db_table };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-kHKR5QG5.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-LpjjuLKB.js';
 import { u as uuid, c as cls } from './index-xkoBSP8R.js';
 
 const DBTabs = class {
@@ -206,10 +206,10 @@ const DBTabs = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (h("div", { key: '20d8d662866ff60717de87ad4deb98a3b647672a', class: cls("db-tabs", this.className), ref: (el) => {
+        return (h("div", { key: 'f3fb4ac197d61be6eafccb2f467c6f3aa70e3063', class: cls("db-tabs", this.className), ref: (el) => {
                 this._ref = el;
             }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-orientation": this.orientation, "data-scroll-behavior": this.behavior, "data-alignment": (_c = this.alignment) !== null && _c !== void 0 ? _c : "start", "data-width": (_d = this.width) !== null && _d !== void 0 ? _d : "auto", onInput: (event) => this.handleChange(event), onChange: (event) => this.handleChange(event) }, this.showScrollLeft ? (h("db-button", { class: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: () => this.scroll(true) }, "Scroll left")) : null, this.tabs ? (h(Fragment, null, h("db-tab-list", null, (_e = this.convertTabs()) === null || _e === void 0 ? void 0 : _e.map((tab, index) => (h("db-tab-item", { key: this.name + "tab-item" + index, active: tab.active, label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText })))), (_f = this.convertTabs()) === null || _f === void 0 ? void 0 :
-            _f.map((tab, index) => (h("db-tab-panel", { key: this.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, h("slot", { key: 'f9803a647f9a01adc0b20eb6bdb999f38c3602af' })));
+            _f.map((tab, index) => (h("db-tab-panel", { key: this.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, h("slot", { key: 'e0ff10fbe01c7e4f60c3d401636c351be31d2197' })));
     }
     static get watchers() { return {
         "_ref": [{

package/dist/esm/db-textarea.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-kHKR5QG5.js';
+import { r as registerInstance, c as createEvent, h } from './index-LpjjuLKB.js';
 import { l as DEFAULT_INVALID_MESSAGE, f as DEFAULT_MESSAGE_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE, b as DEFAULT_PLACEHOLDER, r as DEFAULT_ROWS, a as DEFAULT_LABEL } from './constants-BdL-nI5y.js';
 import { h as hasVoiceOver, d as delay, s as stringPropVisible, u as uuid, f as getNumber, e as getBoolean, l as getHideProp, c as cls } from './index-xkoBSP8R.js';
 import { c as addValueResetEventListener } from './form-components-D6LQfJvq.js';
@@ -201,10 +201,10 @@ const DBTextarea = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: 'acb23abfb477beeceebdf88503a51a6aa90e268e', 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: '03df1963dce7436d616df5f26c8fbff37243421f', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("textarea", { key: 'b09e8a714ee44c18a2af738d90c6939309eb143c', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
+        return (h("div", { key: '1df1ca2804c2bee763a928d48324437be67fabef', 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: 'ee3f721a5fb4c79d57de1942cae4a8fd232d22da', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("textarea", { key: '431cc52f6b2d373e2d25c85cda4bc7fa7b35bb55', "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: 'c62d3e639536d955cc454b43c289b0ad11e9d7b3', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '430d5b39be9fa9eb29c7720f46be601fa1f25161', "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: '654ff4562dc5f762ba52c0e0761a1376d4d88fdc', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '5c5af1f93bb8b1494d22f6278076c2cf25887f86', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
         "id": [{

package/dist/esm/db-tooltip.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-kHKR5QG5.js';
+import { r as registerInstance, h } from './index-LpjjuLKB.js';
 import { D as DEFAULT_ID } from './constants-BdL-nI5y.js';
 import { d as delay, u as uuid, g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
 import { D as DocumentScrollListener } from './document-scroll-listener-DOBe3Oa9.js';
@@ -156,9 +156,9 @@ const DBTooltip = class {
     }
     render() {
         var _a, _b;
-        return (h("i", { key: 'df7b27f485e4029f51329dd73e50603f6965efb8', class: cls("db-tooltip", this.className), role: "tooltip", "aria-hidden": "true", "data-gap": "true", ref: (el) => {
+        return (h("i", { key: '28e7ae8a00ad233525996c1fdda68465d5fbe33e', 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-wrap": getBooleanAsString(this.wrap), "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: '7c1aee92a530f8b0899231f55122f6109c72bc46' })));
+            }, id: this._id, "data-emphasis": this.emphasis, "data-wrap": getBooleanAsString(this.wrap), "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: '30baf105fab31565512655e1823ee1c2a7311a0a' })));
     }
     static get watchers() { return {
         "id": [{