@scania/tegel 1.18.0-1.18.0-tdsheaderitembeta.2 → 1.18.0-beta.2

package/dist/esm/tds-step.entry.js

@@ -1,6 +1,8 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { g as getPrefixedTagNames } from './tagName-2e4b5836.js';
+import { f as findClosestComponent } from './findClosestComponent-884d0262.js';
 
-const stepCss = ":host{position:relative;display:table-cell}:host [role=listitem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listitem].text-below{flex-direction:column}:host [role=listitem].lg{padding:0 20px;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem].lg .content-container{height:30px;min-width:30px}:host [role=listitem].lg .content-container tds-icon{vertical-align:bottom}:host [role=listitem].lg .content-container .index-container{vertical-align:sub}:host [role=listitem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listitem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;right:calc(50% + 24px);left:0;top:18px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listitem].sm{padding:0 20px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem].sm .index-container{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline}:host [role=listitem].sm .content-container{height:24px;min-width:24px}:host [role=listitem].sm .tds-step-icon{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;margin-top:-2px}:host [role=listitem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listitem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listitem] .content-container{border-radius:100px;border:1px solid var(--tds-stepper-icon-background);text-align:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--tds-negative);color:var(--tds-negative)}:host [role=listitem] .content-container.success{background-color:var(--tds-positive);border-color:var(--tds-positive);color:var(--tds-white)}:host [role=listitem] .content-container.upcoming{background-color:transparent;border-color:var(--tds-stepper-label-border-color-upcoming);color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host [role=listitem] .label{text-align:center}:host [role=listitem] .label.lg{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem] .label.sm{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem] .label.upcoming{color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host(:last-of-type) [role=listitem].horizontal{padding-right:0}:host(:last-of-type) [role=listitem].sm::after,:host(:last-of-type) [role=listitem].lg::after{display:none}:host(:last-of-type) [role=listitem].sm.vertical::before{display:none}:host(:first-of-type) [role=listitem].horizontal{padding-left:0}:host(:first-of-type) [role=listitem].sm::before,:host(:first-of-type) [role=listitem].lg::before{display:none}";
+const stepCss = ":host{position:relative;display:table-cell}:host [role=listitem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listitem].text-below{flex-direction:column}:host [role=listitem].lg{padding:0 20px;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem].lg .content-container{height:30px;min-width:30px}:host [role=listitem].lg .content-container .tds-icon__icon{vertical-align:bottom}:host [role=listitem].lg .content-container .index-container{vertical-align:sub}:host [role=listitem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listitem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;right:calc(50% + 24px);left:0;top:18px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listitem].sm{padding:0 20px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem].sm .index-container{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline}:host [role=listitem].sm .content-container{height:24px;min-width:24px}:host [role=listitem].sm .tds-step-icon{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;margin-top:-2px}:host [role=listitem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listitem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listitem] .content-container{border-radius:100px;border:1px solid var(--tds-stepper-icon-background);text-align:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--tds-negative);color:var(--tds-negative)}:host [role=listitem] .content-container.success{background-color:var(--tds-positive);border-color:var(--tds-positive);color:var(--tds-white)}:host [role=listitem] .content-container.upcoming{background-color:transparent;border-color:var(--tds-stepper-label-border-color-upcoming);color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host [role=listitem] .label{text-align:center}:host [role=listitem] .label.lg{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem] .label.sm{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem] .label.upcoming{color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host(:last-of-type) [role=listitem].horizontal{padding-right:0}:host(:last-of-type) [role=listitem].sm::after,:host(:last-of-type) [role=listitem].lg::after{display:none}:host(:last-of-type) [role=listitem].sm.vertical::before{display:none}:host(:first-of-type) [role=listitem].horizontal{padding-left:0}:host(:first-of-type) [role=listitem].sm::before,:host(:first-of-type) [role=listitem].lg::before{display:none}";
 const TdsStepStyle0 = stepCss;
 
 const propToStateMap = {
@@ -21,7 +23,7 @@ const TdsStep = class {
     }
     /* Needs to be onload to do this on any updates. */
     componentWillLoad() {
-        this.stepperEl = this.el.closest('tds-stepper');
+        this.stepperEl = findClosestComponent(this.host, 'tdsStepper');
         this.orientation = this.stepperEl.orientation;
         this.labelPosition = this.stepperEl.labelPosition;
         this.size = this.stepperEl.size;
@@ -41,9 +43,10 @@ const TdsStep = class {
         }
     }
     render() {
-        return (h(Host, { key: '6c7a2673bbe13e518f2052cac2b8bcc948c7c5ea' }, h("div", { key: '7df6c87c7743fcd539abcbde7c2396ba8d7fa4d6', role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'b2902e638345c79401405b9c16dd6f4d196c8bac', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: 'b35127501be3ab9cc6f3bf0b9f54709f0d98ec36', class: `label ${this.size} ${this.state}` }, h("slot", { key: '43499d45d42401e384b8c9f20885873d23351110', name: "label" }))))));
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '29992ccdc6089419be59ca3004a260d001ce09bc' }, h("div", { key: '8b357d9c3e503d706b8417afa3cf98bf0afaa2db', role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'a75819750c696683abb1c4ed88256ee65ea2ee4e', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h(prefixedTagNames.tdsIcon, { class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: 'ae0b4e9fb600402086c0c3840b14cad4743c10c5', class: `label ${this.size} ${this.state}` }, h("slot", { key: '529bba8ee45dd888f31550d95bbf1a836d0fab43', name: "label" }))))));
     }
-    get el() { return getElement(this); }
+    get host() { return getElement(this); }
 };
 TdsStep.style = TdsStepStyle0;
 

package/dist/esm/tds-table-body-input-wrapper.entry.js

@@ -1,6 +1,8 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { g as getPrefixedTagNames } from './tagName-2e4b5836.js';
+import { f as findClosestComponent } from './findClosestComponent-884d0262.js';
 
-const tableBodyInputWrapperCss = ":host{position:relative}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.show-icon) ::slotted(input){padding-right:var(--tds-spacing-element-24)}:host(:hover) tds-icon{display:inline-block}:host(:hover) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}tds-icon.edit-icon{display:none;position:absolute;right:10px;top:1px;pointer-events:none;cursor:pointer}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);color:var(--tds-table-color);background-color:transparent;height:48px;border-radius:0;border:0;border-bottom:2px solid transparent;width:100%;cursor:pointer}::slotted(input)::placeholder{color:var(--tds-table-color)}::slotted(input:disabled){background-color:var(--tds-table-input-background-disabled)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}";
+const tableBodyInputWrapperCss = ":host{position:relative}:host(.focused-input-wrapper) .edit-icon{display:inline-block}:host(.show-icon) ::slotted(input){padding-right:var(--tds-spacing-element-24)}:host(:hover) .edit-icon{display:inline-block}:host(:hover) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}.edit-icon{display:none;position:absolute;right:10px;top:1px;pointer-events:none;cursor:pointer}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);color:var(--tds-table-color);background-color:transparent;height:48px;border-radius:0;border:0;border-bottom:2px solid transparent;width:100%;cursor:pointer}::slotted(input)::placeholder{color:var(--tds-table-color)}::slotted(input:disabled){background-color:var(--tds-table-input-background-disabled)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}";
 const TdsTableBodyInputWrapperStyle0 = tableBodyInputWrapperCss;
 
 const relevantTableProps = ['compactDesign'];
@@ -27,7 +29,7 @@ const TdsTableBodyInputWrapper = class {
         }
     }
     connectedCallback() {
-        const tableEl = this.host.closest('tds-table');
+        const tableEl = findClosestComponent(this.host, 'tdsTable');
         if (tableEl) {
             this.tableId = tableEl.getAttribute('table-id');
         }
@@ -36,7 +38,7 @@ const TdsTableBodyInputWrapper = class {
         }
     }
     componentWillLoad() {
-        const tableEl = this.host.closest('tds-table');
+        const tableEl = findClosestComponent(this.host, 'tdsTable');
         if (tableEl) {
             relevantTableProps.forEach((tablePropName) => {
                 this[tablePropName] = tableEl[tablePropName];
@@ -68,11 +70,12 @@ const TdsTableBodyInputWrapper = class {
         }
     }
     render() {
-        return (h(Host, { key: 'c40a17a264d914934ea4f0e5c4a27b58f06d8055', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '20eb879a6a7699ae79768bd7e99cc5e2c23465a0', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
-            } }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h("tds-icon", { class: "edit-icon", slot: "icon", size: "16px", name: "edit" })) : null));
+            } }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h(prefixedTagNames.tdsIcon, { class: "edit-icon", slot: "icon", size: "16px", name: "edit" })) : null));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-table-body-row-expandable.entry.js

@@ -1,5 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
 import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
+import { f as findClosestComponent } from './findClosestComponent-884d0262.js';
+import './tagName-2e4b5836.js';
 
 const tableBodyRowExpandableCss = ":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host .tds-table__row--expanded{border-bottom:none}:host .tds-table__row:hover,:host .tds-table__row-extend:hover{background-color:var(--tds-table-body-row-background-hover)}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand--expanded{border-bottom:1px solid var(--tds-table-divider)}:host .tds-table__row-expand .tds-table__cell-expand{max-width:1px;overflow:auto;padding:16px 16px 16px 66px;color:var(--tds-table-color)}:host .tds-table__row-expand .tds-table__cell-expand--overflow-visible{overflow:visible}:host .tds-table__row-expand .tds-table__cell-expand--overflow-hidden{overflow:hidden}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{padding:8px 16px 8px 66px}:host(.tds-table__row--hidden){display:none}:host(.tds-table--divider) .tds-table__cell--expand{border-right:1px solid var(--tds-table-divider)}";
 const TdsTableBodyRowExpandableStyle0 = tableBodyRowExpandableCss;
@@ -74,7 +76,7 @@ const TdsTableBodyRowExpandable = class {
         if (this.expanded !== undefined) {
             this.isExpanded = this.expanded;
         }
-        this.tableEl = this.host.closest('tds-table');
+        this.tableEl = findClosestComponent(this.host, 'tdsTable');
         this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
@@ -87,7 +89,7 @@ const TdsTableBodyRowExpandable = class {
             this.columnsNumber = this.colSpan;
         }
         else {
-            this.columnsNumber = this.tableEl.querySelector('tds-table-header').childElementCount + 1;
+            this.columnsNumber = this.tableEl.querySelector('.tds-table__header').childElementCount + 1;
         }
     }
     sendValue() {
@@ -99,26 +101,27 @@ const TdsTableBodyRowExpandable = class {
         this.sendValue();
     }
     render() {
-        return (h(Host, { key: '802679e89bc19447faa87010bd47d17447c08aca', class: {
+        return (h(Host, { key: 'e275194131e3b901f08e84674b705b5bd4b73dab', class: {
                 'tds-table__row': true,
+                'tds-table__row-expandable': true,
                 'tds-table__row-expand--active': this.isExpanded,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, h("tr", { key: '1c089710478c5effb5f6eb727e22879a80e9003d', class: {
+            } }, h("tr", { key: '8a488cfb99978c2066d51d0d7eeec350aaf59401', class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, h("td", { key: '6f2b7ad6cffef0c33b9cc177e423eb3edbb5b806', class: {
+            }, part: "row" }, h("td", { key: '38e261d4dd352b63fda51e5deab4b43e248b0d42', class: {
                 'tds-table__cell-expand': true,
-            } }, h("label", { key: 'bfe1cc4c8bb91c3e50b1cc3abb823ce22a8c8cad', class: "tds-table__expand-control-container" }, h("input", { key: '65be9c515bccfa2bd42dfdfa869b764ca863d009', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: 'fbf0df316c42061b1800c2db37a26ba6114a2037', class: "tds-expendable-row-icon" }, h("svg", { key: '26057fa763a2debe0ef180c4e7d7e96fdd4a08a7', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '4d66ac5c686c5c0c9ba3a02dff9d7a89f5f15e1a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: 'b6b611bc514d9e3e74b7c275c407da8d7b1a5ef4' })), h("tr", { key: '8cb106ff4e548936195a6ffbb18739a07cd17ad1', class: {
+            } }, h("label", { key: 'e4082d9ce72f3f6468fde0dcba42e7e7dad89694', class: "tds-table__expand-control-container" }, h("input", { key: '14caacf5fce60d40c88a9867ccc6aa65ab64ba7d', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: 'a726e3de3ec5f2d1c428b6b212344f8f9bdf75f4', class: "tds-expendable-row-icon" }, h("svg", { key: '8f7bb2b5c774f56af390f0c698ee4b1d856ba91d', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '9591cbc63658dff5264e8a71a192f3a2f9433353', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '835d2581036aa51becf36911bc5f777722cd7e4d' })), h("tr", { key: 'd2f07ef2ab2eed65c9fff301bcc371b9000fb6f1', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, h("td", { key: '248e880b6793a6a36eb738646a07d82d91e15e8b', class: {
+            }, part: "expand-row" }, h("td", { key: 'b98c7704015cc08c0561b591ea0a9c59e5d10d43', class: {
                 'tds-table__cell-expand': true,
                 'tds-table__cell-expand--overflow-hidden': this.overflow === 'hidden',
                 'tds-table__cell-expand--overflow-visible': this.overflow === 'visible',
-            }, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: '7489853de5d7a2cbe0168f7e873f7bb0be01a215', style: {
+            }, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: 'dd5e53a20718e92dda6ff93d6a715054289bab51', style: {
                 overflow: this.overflow,
-            } }, h("slot", { key: '3f4d7715c224969fb2d798432019c3e45685731f', name: "expand-row" }))))));
+            } }, h("slot", { key: '7e919ed8681143d6bdf13afe6b94d6a8e23be046', name: "expand-row" }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/tds-table-body-row.entry.js

@@ -1,4 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { g as getPrefixedTagNames } from './tagName-2e4b5836.js';
+import { f as findClosestComponent } from './findClosestComponent-884d0262.js';
 
 const tableBodyRowCss = ":host(.tds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host(.tds-table__row) *{box-sizing:border-box}:host(.tds-table__row) .tds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.tds-table__row:hover){background-color:var(--tds-table-body-row-background-hover)}:host(.tds-table__row--selected){background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row--selected:hover){background-color:var(--tds-table-body-row-background-selected-hover)}:host(.tds-table__row--hidden){display:none}:host(.tds-table__row--expended){width:100%;background-color:pink}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.tds-table__compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__body-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table__row--clickable){cursor:pointer}:host(.tds-table__row--clickable:focus-visible){outline:var(--focus-outline, 2px solid blue)}";
 const TdsTableBodyRowStyle0 = tableBodyRowCss;
@@ -60,7 +62,7 @@ const TdsTableBodyRow = class {
         }
     }
     connectedCallback() {
-        this.tableEl = this.host.closest('tds-table');
+        this.tableEl = findClosestComponent(this.host, 'tdsTable');
         this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
@@ -69,13 +71,14 @@ const TdsTableBodyRow = class {
         });
     }
     render() {
-        return (h(Host, { key: '47571b7325bea2c32791792aee4813ce4364e8eb', tabindex: this.clickable ? '0' : null, class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'cfd1becf3ee22ac65136c27fdaca6f959223ef3e', tabindex: this.clickable ? '0' : null, class: {
                 'tds-table__row': true,
                 'tds-table__row--selected': this.selected,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table__row--clickable': this.clickable,
-            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e) }, this.multiselect && (h("td", { key: 'ad8bb61ead16afe42e6100dc4fe842c058556a20', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '37844a08f73175f234168a016a9527d01ad2209e', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: 'e7beb86f278f2476f23c365197addd4f22ce2a69' })));
+            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e) }, this.multiselect && (h("td", { key: 'c2ccf6b1f7a66f1bd4c52cce338a1def6266213b', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h(prefixedTagNames.tdsCheckbox, { key: '119932b4933f138bc2e70b11ade59a93ff27e576', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '94e8b65e4a5cd1bc64db114c0de0ea914846fa44' })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-table-body.entry.js

@@ -1,6 +1,9 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { f as findClosestComponent } from './findClosestComponent-884d0262.js';
+import { g as getDirectChildHTMLElementOfKind } from './getDirectChildHTMLElementOfKind-96e23d9f.js';
+import './tagName-2e4b5836.js';
 
-const tableBodyCss = ":host,tds-table-body{box-sizing:border-box;display:table-row-group}:host *,tds-table-body *{box-sizing:border-box}:host .tds-table__info-message,tds-table-body .tds-table__info-message{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell.tds-table__body-cell--hover:nth-child(odd){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell.tds-table__body-cell--hover:nth-child(even){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-table-body-row:hover tds-body-cell,tds-table-body.tds-table--zebra-mode-columns-odd tds-table-body-row:hover tds-body-cell{background-color:transparent}";
+const tableBodyCss = ":host,.tds-table__body{box-sizing:border-box;display:table-row-group}:host *,.tds-table__body *{box-sizing:border-box}:host .tds-table__info-message,.tds-table__body .tds-table__info-message{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}.tds-table__body.tds-table--zebra-mode-rows-odd .tds-table__row:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}.tds-table__body.tds-table--zebra-mode-rows-odd .tds-table__row:nth-child(odd):hover{background-color:var(--tds-table-body-row-background-hover)}.tds-table__body.tds-table--zebra-mode-rows-even .tds-table__row:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}.tds-table__body.tds-table--zebra-mode-rows-even .tds-table__row:nth-child(even):hover{background-color:var(--tds-table-body-row-background-hover)}.tds-table__body.tds-table--zebra-mode-columns-odd .tds-table__body-cell:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}.tds-table__body.tds-table--zebra-mode-columns-odd .tds-table__body-cell.tds-table__body-cell--hover:nth-child(odd){background-color:var(--tds-table-body-cell-background-hover)}.tds-table__body.tds-table--zebra-mode-columns-even .tds-table__body-cell:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}.tds-table__body.tds-table--zebra-mode-columns-even .tds-table__body-cell.tds-table__body-cell--hover:nth-child(even){background-color:var(--tds-table-body-cell-background-hover)}.tds-table__body.tds-table--zebra-mode-columns-even .tds-table__row:hover .tds-table__body-cell,.tds-table__body.tds-table--zebra-mode-columns-odd .tds-table__row:hover .tds-table__body-cell{background-color:transparent}";
 const TdsTableBodyStyle0 = tableBodyCss;
 
 const relevantTableProps = [
@@ -43,7 +46,7 @@ const TdsTableBody = class {
         this.bodyCheckBoxClicked();
     }
     connectedCallback() {
-        this.tableEl = this.host.closest('tds-table');
+        this.tableEl = findClosestComponent(this.host, 'tdsTable');
         this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
@@ -52,8 +55,10 @@ const TdsTableBody = class {
         });
     }
     componentWillRender() {
-        const headerColumnsNo = this.host.parentElement.querySelector('tds-table-header').children.length;
-        // multiselect and expended features requires one extra column for controls...
+        const table = findClosestComponent(this.host, 'tdsTable');
+        const tableHeader = getDirectChildHTMLElementOfKind(table, 'tds-table-header')[0];
+        const headerColumnsNo = tableHeader.children.length;
+        // Adjust column count for controls
         if (this.multiselect || this.expandableRows) {
             this.columnsNumber = headerColumnsNo + 1;
         }
@@ -62,12 +67,13 @@ const TdsTableBody = class {
         }
     }
     render() {
-        return (h(Host, { key: '0e5ac81e32535901ac4940316a474472368cca86', "data-selected-rows": this.multiselectArrayJSON, class: {
+        return (h(Host, { key: 'd449c07d33d9bee1367b30575ac0235ca4c23c48', "data-selected-rows": this.multiselectArrayJSON, class: {
+                'tds-table__body': true,
                 'tds-table--zebra-mode-rows-odd': this.zebraMode === 'rows-odd',
                 'tds-table--zebra-mode-rows-even': this.zebraMode === 'rows-even',
                 'tds-table--zebra-mode-columns-odd': this.zebraMode === 'columns-odd',
                 'tds-table--zebra-mode-columns-even': this.zebraMode === 'columns-even',
-            } }, h("slot", { key: 'c43f3047fc836b0d7f147e00680befd56b25721c' })));
+            } }, h("slot", { key: '8eb5de644e4aa6d05fdaad9c0cab9baa7c0ad3e0' })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-table-footer.entry.js

@@ -1,6 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { g as getPrefixedTagNames } from './tagName-2e4b5836.js';
+import { f as findClosestComponent } from './findClosestComponent-884d0262.js';
 
-const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:var(--tds-spacing-element-48)}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--tds-table-footer-background);color:var(--tds-table-color)}:host .tds-table__footer-cell{padding:0 var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-48);display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page{display:flex;align-items:center;margin-right:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p{margin-right:var(--tds-spacing-element-8)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-table-footer-page-selector-input-background);color:var(--tds-table-color);width:54px;height:30px;border:none;border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;margin-right:var(--tds-spacing-element-4);padding-left:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--tds-table-footer-page-selector-input-background-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--tds-table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:1px 8px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:var(--tds-spacing-element-32);width:var(--tds-spacing-element-32);border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;color:var(--tds-table-footer-page-selector-icon)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--tds-table-footer-btn-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{cursor:default;color:var(--tds-table-footer-page-selector-icon-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{height:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);fill:var(--tds-table-color)}:host(.tds-table--compact){height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:var(--tds-spacing-element-24)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;width:28px}:host(.footer__horizontal-scroll){display:inline-table;position:absolute;margin-top:10px}@keyframes tds-shake-animation{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}tds-dropdown:focus-within::after{content:\"\";position:absolute;bottom:0;left:0;height:100%;width:100%;background-color:transparent;border-radius:var(--tds-spacing-element-4);pointer-events:none;outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
+const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:var(--tds-spacing-element-48)}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--tds-table-footer-background);color:var(--tds-table-color)}:host .tds-table__footer-cell{padding:0 var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-48);display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page{display:flex;align-items:center;margin-right:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p{margin-right:var(--tds-spacing-element-8)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-table-footer-page-selector-input-background);color:var(--tds-table-color);width:54px;height:30px;border:none;border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;margin-right:var(--tds-spacing-element-4);padding-left:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--tds-table-footer-page-selector-input-background-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--tds-table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:1px 8px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:var(--tds-spacing-element-32);width:var(--tds-spacing-element-32);border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;color:var(--tds-table-footer-page-selector-icon)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--tds-table-footer-btn-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{cursor:default;color:var(--tds-table-footer-page-selector-icon-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{height:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);fill:var(--tds-table-color)}:host(.tds-table--compact){height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:var(--tds-spacing-element-24)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;width:28px}:host(.footer__horizontal-scroll){display:inline-table;position:absolute;margin-top:10px}@keyframes tds-shake-animation{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}.page-dropdown:focus-within::after{content:\"\";position:absolute;bottom:0;left:0;height:100%;width:100%;background-color:transparent;border-radius:var(--tds-spacing-element-4);pointer-events:none;outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
 const TdsTableFooterStyle0 = tableFooterCss;
 
 const relevantTableProps = [
@@ -83,16 +85,16 @@ const TdsTableFooter = class {
         }
     }
     connectedCallback() {
-        this.tableEl = this.host.closest('tds-table');
+        this.tableEl = findClosestComponent(this.host, 'tdsTable');
         this.tableId = this.tableEl.tableId;
     }
-    componentWillLoad() {
+    componentDidLoad() {
         relevantTableProps.forEach((tablePropName) => {
             this[tablePropName] = this.tableEl[tablePropName];
         });
         this.storeLastCorrectValue(this.paginationValue);
         /** Get the number of columns. */
-        const numberOfColumns = this.host.parentElement.querySelector('tds-table-header').childElementCount;
+        const numberOfColumns = this.host.parentElement.querySelector('.tds-table__header').childElementCount;
         if (this.cols) {
             this.columnsNumber = this.cols;
         }
@@ -133,12 +135,14 @@ const TdsTableFooter = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'ef2cd69929908fa46254c82d0799c1b1a4ee52b3', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'da39085487ba931d60e338e75b4dff13481cfaf1', class: {
+                'tds-table__footer': true,
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: 'f18eb0b2a49d1d8df9dacc998138dae4e5f8d256', class: "tds-table__footer-row" }, h("td", { key: 'abb1f6f2971c9fa9b68bfb856882817406d0d87f', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '8226ac0aee40b97cad90035ff9aba54b8365b960', class: "tds-table__pagination" }, h("div", { key: '9b604d5ccb7dbdac0cdb1bc96567d7b29d7fa250', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '716b6830e891305611ceb6213bd696298dbcfe12', class: "rows-per-page" }, h("p", { key: 'd6b7bfff5262fcf0174f6b2d92dcfdedda97dfc2' }, "Rows per page"), h("tds-dropdown", { key: '9da6799f30172a1628a4630aa5474456f6351089', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
-            return (h("tds-dropdown-option", { value: `${value}` }, value));
-        }))))), h("div", { key: '73c5849886a0144c22b79d31b92a607d8f794483', class: "tds-table__page-selector" }, h("input", { key: 'a297fd5b739df5d4353b045a25ba6e480dbad03e', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: 'f6d1257c745638b2152843d52c494db23d26b2ca', class: "tds-table__footer-text" }, "of ", h("span", { key: '81b8c076cf322798709eafae1fad43b036127ada' }, this.pages), " pages"), h("button", { key: 'd9789d9d6ccd45f1d0c4e4d427c3ed1bb13e7440', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: 'dac60e50f54fd71ae1d89e21e6140bbcbbda6680', name: "skip_backwards", size: "20px" })), h("button", { key: '39810bac01a38c71427192beea48257b7d2dd2b1', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '2987abbbdc7be2c7485d7bfcabcafe94983f5f54', name: "chevron_left", size: "20px" })), h("button", { key: '2252c555a816a4014c130b05ae70d2e25893f460', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'a19c83f25082c82cdac308d3538c274bbce62826', name: "chevron_right", size: "20px" })), h("button", { key: 'e06ec885711559b6e7893d90ada5057292f624e0', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '6a8f4218a45cc5bdbb0c8b0711e802ce5f2dfed1', name: "skip_forward", size: "20px" })))))))));
+            }, style: this.getStyles() }, h("tr", { key: 'b7de7d5272df212a14b0e873b189abd1a7fae0b8', class: "tds-table__footer-row" }, h("td", { key: 'c667e0a78cda25e62ea7572628056691c5dce2e7', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '5ace612f33fe8e28730a2d8e2d698b4e8310c2d7', class: "tds-table__pagination" }, h("div", { key: 'fc2f7fee9ba348087e192531a2f77ddf4ba6393e', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: 'ac6d4d17ace7ec7688ad340eecdeb9d5050f576b', class: "rows-per-page" }, h("p", { key: 'fba8bf499d2fe16f10a198469095083d963ad6d3' }, "Rows per page"), h(prefixedTagNames.tdsDropdown, { key: '7c041e6c1d778f0d24bb059fa7e37192d4225bf9', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
+            return (h(prefixedTagNames.tdsDropdownOption, { value: `${value}` }, value));
+        }))))), h("div", { key: '2e32b948d847694ad74f833b5676c804cf6c2157', class: "tds-table__page-selector" }, h("input", { key: '901d8d532d200ae0507272c686f90c966bb587ed', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: 'bb89fdd72f40f31536e82b681083484d1efae714', class: "tds-table__footer-text" }, "of ", h("span", { key: 'fd449fbd27cc1d3192b51a3a97f8167579e2556f' }, this.pages), " pages"), h("button", { key: 'e70a18bc1f868944f7c0f264722afd7cee140b42', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h(prefixedTagNames.tdsIcon, { key: '41ddc6f0c58e635c3d4200c55ab7a34fd3288686', name: "skip_backwards", size: "20px" })), h("button", { key: '56c33b756010d733ed3a473b969e70c7a2a5f676', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h(prefixedTagNames.tdsIcon, { key: '8d5a509cbd314765d1633d5e5b32b6f1290b87df', name: "chevron_left", size: "20px" })), h("button", { key: 'ab75710a3bcc777f21790ab325c8fcee7bf89dfd', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h(prefixedTagNames.tdsIcon, { key: '9b809581458e37542336b93be50c220024317469', name: "chevron_right", size: "20px" })), h("button", { key: 'efa985cfc9a9bbca26a4f95bc9ea6dd073f62ae0', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h(prefixedTagNames.tdsIcon, { key: 'db64e73b8acb3a1ae3498d13a5c2c545394f55ce', name: "skip_forward", size: "20px" })))))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-table-header-input-wrapper.entry.js

@@ -1,6 +1,8 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { g as getPrefixedTagNames } from './tagName-2e4b5836.js';
+import { f as findClosestComponent } from './findClosestComponent-884d0262.js';
 
-const tableHeaderInputWrapperCss = ":host{position:relative}:host(:hover) tds-icon{display:inline-block}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.focused-input-wrapper) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}:host(.show-icon) ::slotted(input){padding-left:35px}tds-icon.search-icon{color:var(--tds-table-input-header-icon);position:absolute;left:15px;top:1px}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);height:48px;border-radius:0;background-color:transparent;border:0;border-bottom:2px solid transparent}::slotted(input)::placeholder{color:var(--tds-table-input-header-placeholder)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-header-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}";
+const tableHeaderInputWrapperCss = ":host{position:relative}:host(:hover) .search-icon{display:inline-block}:host(.focused-input-wrapper) .search-icon{display:inline-block}:host(.focused-input-wrapper) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}:host(.show-icon) ::slotted(input){padding-left:35px}.search-icon{color:var(--tds-table-input-header-icon);position:absolute;left:15px;top:1px}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);height:48px;border-radius:0;background-color:transparent;border:0;border-bottom:2px solid transparent}::slotted(input)::placeholder{color:var(--tds-table-input-header-placeholder)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-header-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}";
 const TdsTableHeaderInputWrapperStyle0 = tableHeaderInputWrapperCss;
 
 const relevantTableProps = ['compactDesign'];
@@ -27,7 +29,7 @@ const TdsTableHeaderInputWrapper = class {
         }
     }
     connectedCallback() {
-        const tableEl = this.host.closest('tds-table');
+        const tableEl = findClosestComponent(this.host, 'tdsTable');
         if (tableEl) {
             this.tableId = tableEl.getAttribute('table-id');
         }
@@ -36,7 +38,7 @@ const TdsTableHeaderInputWrapper = class {
         }
     }
     componentWillLoad() {
-        const tableEl = this.host.closest('tds-table');
+        const tableEl = findClosestComponent(this.host, 'tdsTable');
         if (tableEl) {
             relevantTableProps.forEach((tablePropName) => {
                 this[tablePropName] = tableEl[tablePropName];
@@ -68,11 +70,12 @@ const TdsTableHeaderInputWrapper = class {
         }
     }
     render() {
-        return (h(Host, { key: '733f9d487fd530eea4b597368c5ecdc46fd8dedd', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'f46f163de241ce331dca3089eb15528e9e7d6baf', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
-            } }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h("tds-icon", { class: "search-icon", slot: "icon", size: "16px", name: "search" })) : null));
+            } }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h(prefixedTagNames.tdsIcon, { class: "search-icon", slot: "icon", size: "16px", name: "search" })) : null));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-table-header.entry.js

@@ -1,4 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { g as getPrefixedTagNames } from './tagName-2e4b5836.js';
+import { f as findClosestComponent } from './findClosestComponent-884d0262.js';
+import { g as getDirectChildHTMLElementOfKind } from './getDirectChildHTMLElementOfKind-96e23d9f.js';
 
 const tableHeaderCss = ":host{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .tds-table__header-cell--checkbox{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);display:table-cell;text-align:left;color:var(--tds-table-color);background-color:var(--tds-table-header-background);border-bottom:1px solid var(--tds-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:48px;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input{display:none}:host .tds-table__expand-control-container .tds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__expand-control-container .tds-expandable-row-icon--opened{transform:rotate(180deg)}:host ::slotted(tds-header-cell:hover){background-color:var(--tds-table-header-background-hover)}:host(.tds-table--compact) .tds-table__header-cell--checkbox{height:32px}:host(.tds-table--compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__header-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table--toolbar-available) .tds-table__header-cell--checkbox{border-top-left-radius:0}";
 const TdsTableHeaderStyle0 = tableHeaderCss;
@@ -51,11 +54,11 @@ const TdsTableHeaderRow = class {
     }
     bodyExpandClicked() {
         const numberOfExtendRowsActive = this.host.parentElement
-            .querySelector('tds-table-body')
+            .querySelector('.tds-table__body')
             .getElementsByClassName('tds-table__row-extend--active').length;
         const numberOfExtendRows = this.host.parentElement
-            .querySelector('tds-table-body')
-            .getElementsByTagName('tds-table-body-row-expendable').length;
+            .querySelector('.tds-table__body')
+            .getElementsByClassName('.tds-table__row-expandable').length;
         if (numberOfExtendRows === numberOfExtendRowsActive) {
             this.mainExpendSelected = true;
         }
@@ -64,7 +67,7 @@ const TdsTableHeaderRow = class {
         }
     }
     connectedCallback() {
-        this.tableEl = this.host.closest('tds-table');
+        this.tableEl = findClosestComponent(this.host, 'tdsTable');
         this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
@@ -73,8 +76,9 @@ const TdsTableHeaderRow = class {
         });
     }
     componentWillRender() {
+        const tdsTableElement = findClosestComponent(this.host, 'tdsTable');
         this.enableToolbarDesign =
-            this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
+            getDirectChildHTMLElementOfKind(tdsTableElement, 'tds-table-toolbar').length >= 1;
     }
     async handleCheckboxChange(event) {
         this.allSelected = event.detail.checked;
@@ -85,11 +89,13 @@ const TdsTableHeaderRow = class {
         });
     }
     render() {
-        return (h(Host, { key: '08dd2d38a8df4e8715c780dde55d81d52a26b26f', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '986af13197816825c30a3b299cc2f7d1679db040', class: {
+                'tds-table__header': true,
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: '5d5d3f8fa7293ce9e8b09fdb241225ce16e4b0d5' }, this.multiselect && (h("th", { key: '7b3034bd06348bc8df55a90fe13991f4910715a2', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '0cae18f657cb4121c8ed21437ff55cefa308a5ff', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '423b6ff577d3b65e7eb4f6e8a5f3f914d810904a', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '74eb896f4b1de85cf9b561b9aa10e6d9e309031c', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: 'a9b444c190c08a4eb53fa634281e2ff591046c5a' }))));
+            } }, h("tr", { key: 'd6c4d067f46bb8ec9163c2376f8a69ea62672fa5' }, this.multiselect && (h("th", { key: '783cc35039a6b41d9dce45a3a55620aed9a3453b', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '4a9db9d553a30ae7928b2048386fb5847f49eb76', class: "tds-form-label tds-form-label--table" }, h(prefixedTagNames.tdsCheckbox, { key: '404ae6e1aaab093519956f6b48c7f7fee716577c', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '3b317b08db740ead4af6f4dcdd095cbaac85060c', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: 'bac9254f26d399eb273e00ccee193d4e3ddd673d' }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-table-toolbar.entry.js

@@ -1,4 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { g as getPrefixedTagNames } from './tagName-2e4b5836.js';
+import { f as findClosestComponent } from './findClosestComponent-884d0262.js';
 
 const tableToolbarCss = ":host{box-sizing:border-box;display:table-caption;position:relative;background-color:var(--tds-table-toolbar-background);color:var(--tds-table-color);padding:0 var(--tds-spacing-element-16);height:64px;border-top-left-radius:4px;border-top-right-radius:4px}:host *{box-sizing:border-box}:host .tds-table__upper-bar-flex{width:100%;height:100%;display:flex;justify-content:space-between}:host .tds-table__title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding-top:var(--tds-spacing-element-16);text-align:left}:host .tds-table__actionbar,:host slot[name=end]::slotted(*){display:flex;align-self:center}:host .tds-table__searchbar{display:flex;align-self:center;position:relative;height:40px;width:40px;border-radius:4px 4px 0 0;transition:background-color 250ms ease, width 250ms ease;overflow:hidden;background-color:transparent}:host .tds-table__searchbar::after{content:\"\";width:100%;height:2px;position:absolute;bottom:0;background-color:var(--tds-blue-400);transform:scaleX(0);transition:transform 150ms ease}:host .tds-table__searchbar:focus-within::after{transform:scaleX(100%)}:host .tds-table__searchbar:focus-within,:host .tds-table__searchbar.tds-table__searchbar--active{width:208px;background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:focus-within:hover,:host .tds-table__searchbar.tds-table__searchbar--active:hover{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar .tds-table__searchbar-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);z-index:1;width:100%;height:100%;border:none;padding:0 36px 0 16px;background-color:transparent;outline:none;cursor:pointer}:host .tds-table__searchbar .tds-table__searchbar-input :focus{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:hover{background-color:var(--tds-table-toolbar-searchbar-background-hover)}:host .tds-table__searchbar .tds-table__searchbar-icon{z-index:0;position:absolute;right:9px;top:9px;width:20px;height:20px}:host(.toolbar__horizontal-scroll){position:absolute;top:var(--tds-spacing-element-16)}:host(.tds-table--compact){height:56px}";
 const TdsTableToolbarStyle0 = tableToolbarCss;
@@ -35,7 +37,7 @@ const TdsTableToolbar = class {
         }
     }
     connectedCallback() {
-        this.tableEl = this.host.closest('tds-table');
+        this.tableEl = findClosestComponent(this.host, 'tdsTable');
         this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
@@ -66,10 +68,11 @@ const TdsTableToolbar = class {
         return styles;
     }
     render() {
-        return (h(Host, { key: 'c3488722c0a27313efa13acafeab81ca23c6c765', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'dd9f4aa5fe5fc7d2601800f1458ed867e36cc87c', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("div", { key: '688e2903c9b447cb0770a8ee15dc8d1c4d3608d3', class: "tds-table__upper-bar-flex" }, h("caption", { key: 'a9c57a3b3cdbc61d7176163310cd8acda8ed58a2', class: "tds-table__title" }, this.tableTitle), h("div", { key: 'ae28004762b94923faa433a9f13245ab8595493b', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '0d85e682ee8a733fc61df0855ed1a56bd7356069', class: "tds-table__searchbar" }, h("input", { key: '50b9c945f34cb13d440ed448f8be58ea2900f9f7', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: 'eff520922329f0379f22cb31171b81887c6bbdf7', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '09c7d084aed40ec2a3a25dc1ca86d978b8ef39ec', name: "search", size: "20px" })))), h("slot", { key: '1b7dc61ec5ec9d5ac7e5ea116cedfd6a773d5628', name: "end" })))));
+            }, style: this.getStyles() }, h("div", { key: '58a85d8024c69d67b0295a5e79bbac90cf86d39d', class: "tds-table__upper-bar-flex" }, h("caption", { key: 'd7420a5f0fa606a3ef441a61a0fd10618fbe1fa5', class: "tds-table__title" }, this.tableTitle), h("div", { key: 'afe576548c355196dff3b2e2355453d33d5f5b4a', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '0ccc225cf7c0c1e2ef03c19595f7714c6daca195', class: "tds-table__searchbar" }, h("input", { key: '723a44980b18901bee2408a5f4af80e8e8b11773', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: '11888fa68284d352979cdb3fe9868db5d0e5e129', class: "tds-table__searchbar-icon" }, h(prefixedTagNames.tdsIcon, { key: '30df3849b8a69eee6a42c1ce689aad6334f6b9e5', name: "search", size: "20px" })))), h("slot", { key: '11f4ae49fcfca3241fabfbbc5532090d358e0dbe', name: "end" })))));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,5 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
 import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
+import { f as findClosestComponent } from './findClosestComponent-884d0262.js';
+import { g as getDirectChildHTMLElementOfKind } from './getDirectChildHTMLElementOfKind-96e23d9f.js';
+import './tagName-2e4b5836.js';
 
 const tableCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host,.tds-table{border-collapse:collapse;display:table;box-sizing:border-box}:host *,.tds-table *{box-sizing:border-box}:host(.tds-table--responsive),.tds-table--responsive{width:100%}.tds-table--horizontal-scroll{display:block;overflow-x:scroll;white-space:nowrap}.tds-table--horizontal-scroll:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}.tds-table--horizontal-scroll::-webkit-scrollbar{height:var(--tds-scrollbar-height)}.tds-table--horizontal-scroll::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}.tds-table--horizontal-scroll::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}.tds-table--horizontal-scroll::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){.tds-table--horizontal-scroll{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}.tds-table--horizontal-scroll-toolbar{margin-top:64px}.tds-table--horizontal-scroll-toolbar-compact{margin-top:56px}.tds-table--horizontal-scroll-footer{margin-bottom:49px}.tds-table--horizontal-scroll-footer-compact{margin-bottom:33px}";
 const TdsTableStyle0 = tableCss;
@@ -31,11 +34,11 @@ const TdsTable = class {
     /** Returns all selected rows data. */
     async getSelectedRows() {
         let selectedRowsData = [];
-        const tableBody = this.host.querySelector('tds-table-body');
-        const selectedRows = Array.from(tableBody.querySelectorAll('tds-table-body-row')).filter((element) => element.selected);
+        const tableBody = this.host.querySelector('.tds-table__body');
+        const selectedRows = Array.from(tableBody.querySelectorAll('.tds-table__row')).filter((element) => element.selected);
         selectedRows.forEach((row) => {
             let selectedRow = [];
-            const rowCells = Array.from(row.getElementsByTagName('tds-body-cell'));
+            const rowCells = Array.from(row.querySelectorAll('.tds-table__body-cell'));
             rowCells.forEach((cell) => {
                 var _a;
                 const cellObject = {
@@ -81,20 +84,21 @@ const TdsTable = class {
     widthChanged(newValue) {
         this.emitInternalTdsPropChange('horizontalScrollWidth', newValue);
     }
-    componentWillRender() {
+    componentDidRender() {
         if (this.horizontalScrollWidth) {
+            const tdsTableElement = findClosestComponent(this.host, 'tdsTable');
             this.enableHorizontalScrollToolbarDesign =
-                this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
+                getDirectChildHTMLElementOfKind(tdsTableElement, 'tds-table-toolbar').length >= 1;
             this.enableHorizontalScrollFooterDesign =
-                this.host.closest('tds-table').getElementsByTagName('tds-table-footer').length >= 1;
+                getDirectChildHTMLElementOfKind(tdsTableElement, 'tds-table-footer').length >= 1;
         }
     }
     render() {
-        return (h(Host, { key: '4d156fac32972a0493c44dc235134370f503c43c', class: {
+        return (h(Host, { key: '55301935993e5fc7a526a7132df15cbcd0107206', class: {
                 'tds-table--responsive': this.responsive,
                 'tds-mode-variant-primary': this.modeVariant === 'primary',
                 'tds-mode-variant-secondary': this.modeVariant === 'secondary',
-            } }, h("table", { key: 'da2663a9406f0f5a68ba789fd9ae16e474f28b6e', style: this.getStyles(), class: {
+            } }, h("table", { key: '970da50a6e4990808c846975dafc79de1263c8e6', style: this.getStyles(), class: {
                 'tds-table': true,
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
@@ -105,7 +109,7 @@ const TdsTable = class {
                 'tds-table--horizontal-scroll-toolbar-compact': this.enableHorizontalScrollToolbarDesign && this.compactDesign,
                 'tds-table--horizontal-scroll-footer': this.enableHorizontalScrollFooterDesign && !this.compactDesign,
                 'tds-table--horizontal-scroll-footer-compact': this.enableHorizontalScrollFooterDesign && this.compactDesign,
-            } }, h("slot", { key: '1fc2d3dc9a43c87adea2ad500f573838c23bd2ca' }))));
+            } }, h("slot", { key: 'df9ef8fd03af6a5e43b6b2681b3c8de4d6711853' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {