@scania/tegel 1.47.2 → 1.48.0-beta.0-tabbing-test

package/dist/collection/components/table/table-footer/table-footer.js

@@ -2,12 +2,38 @@ import { h, Host, } from "@stencil/core";
 const relevantTableProps = [
     'compactDesign',
     'horizontalScrollWidth',
+    'multiselect',
+    'expandableRows',
 ];
 function removeShakeAnimation(e) {
     e.target.classList.remove('tds-table__page-selector-input--shake');
 }
 export class TdsTableFooter {
     constructor() {
+        /** Enable pagination and show pagination controls  */
+        this.pagination = false;
+        /** Sets the pagination number. */
+        this.paginationValue = 1;
+        /** Enable rows per page dropdown */
+        this.rowsperpage = true;
+        /** Set available rows per page values */
+        this.rowsPerPageValues = [10, 25, 50];
+        /** Sets the number of pages. */
+        this.pages = 0;
+        /** <b>Client override</b> Used to set the column span of the footer. Use as fallback if the automatic count of columns fails. */
+        this.cols = null;
+        /** State that memorize number of columns to display colSpan correctly - set from parent level */
+        this.columnsNumber = 0;
+        /* Sets the footer to use compact design. */
+        this.compactDesign = false;
+        /* State to track if multiselect is enabled on parent table. */
+        this.multiselect = false;
+        /* State to track if expandableRows is enabled on parent table. */
+        this.expandableRows = false;
+        this.lastCorrectValue = 1;
+        this.tableId = '';
+        this.horizontalScrollWidth = null;
+        this.rowsPerPageValue = this.rowsPerPageValues[0];
         this.emitTdsPagination = () => {
             if (this.rowsperpage) {
                 this.tdsPagination.emit({
@@ -51,18 +77,6 @@ export class TdsTableFooter {
             this.emitTdsPagination();
             this.storeLastCorrectValue(this.paginationValue);
         };
-        this.pagination = false;
-        this.paginationValue = 1;
-        this.rowsperpage = true;
-        this.rowsPerPageValues = [10, 25, 50];
-        this.pages = 0;
-        this.cols = null;
-        this.columnsNumber = 0;
-        this.compactDesign = false;
-        this.lastCorrectValue = 1;
-        this.tableId = '';
-        this.horizontalScrollWidth = null;
-        this.rowsPerPageValue = this.rowsPerPageValues[0];
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -76,6 +90,31 @@ export class TdsTableFooter {
             });
         }
     }
+    colsChanged(newValue) {
+        if (newValue !== null) {
+            this.columnsNumber = newValue;
+        }
+        else {
+            this.updateColumnsNumber();
+        }
+    }
+    updateColumnsNumber() {
+        var _a, _b, _c;
+        if (this.cols) {
+            return;
+        }
+        const numberOfColumns = (_c = (_b = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-header')) === null || _b === void 0 ? void 0 : _b.childElementCount) !== null && _c !== void 0 ? _c : 0;
+        let totalColumns = numberOfColumns;
+        // Add 1 for multiselect checkbox column
+        if (this.multiselect) {
+            totalColumns += 1;
+        }
+        // Add 1 for expandable rows column
+        if (this.expandableRows) {
+            totalColumns += 1;
+        }
+        this.columnsNumber = totalColumns;
+    }
     connectedCallback() {
         var _a;
         this.tableEl = this.host.closest('tds-table');
@@ -94,7 +133,17 @@ export class TdsTableFooter {
             this.columnsNumber = this.cols;
         }
         else {
-            this.columnsNumber = numberOfColumns;
+            // Calculate total columns including multiselect and expandable columns
+            let totalColumns = numberOfColumns;
+            // Add 1 for multiselect checkbox column
+            if (this.multiselect) {
+                totalColumns += 1;
+            }
+            // Add 1 for expandable rows column
+            if (this.expandableRows) {
+                totalColumns += 1;
+            }
+            this.columnsNumber = totalColumns;
         }
     }
     /* Function to store last valid input */
@@ -130,16 +179,14 @@ export class TdsTableFooter {
     }
     render() {
         var _a;
-        return (h(Host, { key: '96d07c2b5e5b667c809b949d68f65be571ad1235', class: {
+        return (h(Host, { key: '961b5b3b5aa0311a2cc962601bbde69cb892c0df', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: '418f2868d0c4e5366f94d725b6cf3e7aa0346f27', class: "tds-table__footer-row" }, h("td", { key: '8734d546ea3cfba0738c4daf78242e4a5e5397ea', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: 'b348c2a48e321423523f1b2a46b916a90dc94889', class: "tds-table__pagination" }, h("div", { key: '5ddf22f56fda6e794e34b5e11cc0f84842c9efde', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '39c3a7bdc7627c7710735804a121165d0fb204c8', class: "rows-per-page" }, h("p", { key: '0e33895d223c3e456f7847137a2242170ebea58b' }, "Rows per page"), h("tds-dropdown", { key: 'efdaba5e2e40e0bb6eaee4b2fa3ac86a36dd99e7', 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: 'aa4872b13712174bfa21c94b15b93816c713fd29', class: "tds-table__page-selector" }, h("input", { key: 'fa1964c83ec002ccc6e4061ae1f8596d9ee15836', ref: (element) => {
+            }, style: this.getStyles() }, h("tr", { key: 'a95c34f7248fe17ff7e6911cb75ac5f8a7e66397', class: "tds-table__footer-row" }, h("td", { key: '3fa687650250154d63515696845c77b25a99a637', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '8484735a6d4d8d805b1a532a9ee3f982ac91aff5', class: "tds-table__pagination" }, h("div", { key: '543cfb0c349fb2a7b4443d4dfadb9b3891864ebc', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '40ee62cc8374dc8113bed771a814289be7d978bd', class: "rows-per-page" }, h("p", { key: '0a1f178e952e55b250c5ad1e0b59f1f8d664a947' }, "Rows per page"), h("tds-dropdown", { key: 'c23f03459dd7bb4c90a646d61d604b1b9c7532aa', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => (h("tds-dropdown-option", { value: `${value}` }, value))))))), h("div", { key: '2ba6b8e4a67f3d82980f48f8d858f9fe228ef04e', class: "tds-table__page-selector" }, h("input", { key: '45c5662f2c314d2616200f0faa10637cfadd8a0c', ref: (element) => {
                 if (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: 'a8b07a6e86e18800f7681eca6377a722f12069ac', class: "tds-table__footer-text" }, "of ", h("span", { key: '17019da6fe48ec045f5d1335d8c08a273dc0ac6a' }, this.pages), " pages"), h("button", { key: 'daa1446d15681d297a024bfa8da1ec2173ed921c', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '6abd73717c6c232ef603f749f68da72600bf48e8', name: "skip_backwards", size: "20px" })), h("button", { key: '1ea33dbc2d1bcdb0b3613a312a43997bfbc39a55', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '66c0d727d030b343d387b293f7cef4773f54e6b1', name: "chevron_left", size: "20px" })), h("button", { key: '05f18129f73975b81f252721b0f33686e32b8211', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '120e02ba680a6dad5cdfaed8002467d8f09565ad', name: "chevron_right", size: "20px" })), h("button", { key: '58e65e438020594246c0f64fc06c751b13879ee3', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '9ea98a3a7f40a9051eb46e300e5d5128dc01a95c', name: "skip_forward", size: "20px" })))))))));
+            }, 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: 'acf03cce754c2e2992af498855a8e65370f80c0e', class: "tds-table__footer-text" }, "of ", h("span", { key: '9fb1b364868e11ae9feb3cd560f17973a36f12bd' }, this.pages), " pages"), h("button", { key: 'd0945e0f2dbd43fb1c433388b14c517d94da4d95', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '8c2c3b150d61e4db7dcbf7558646be0f2b90fe84', name: "skip_backwards", size: "20px" })), h("button", { key: '7df941515765b780c4c72c52b0842c719b88ff2d', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: 'b8af8f6c3eb7680169764124ade9f6f56899b83d', name: "chevron_left", size: "20px" })), h("button", { key: 'd4cfa0117ef5bfbda435584a505d330d5bfb86a3', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'e1fa66d3959ed648952b0fd170b00f43db23385f', name: "chevron_right", size: "20px" })), h("button", { key: 'e8290d680d8ac50cf61089813b94fefa6682b2d1', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '3e26941199388b86bb0069967851d74921300950', name: "skip_forward", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -169,8 +216,10 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "Enable pagination and show pagination controls"
                 },
-                "attribute": "pagination",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "pagination",
                 "defaultValue": "false"
             },
             "paginationValue": {
@@ -187,8 +236,10 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "Sets the pagination number."
                 },
-                "attribute": "pagination-value",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "pagination-value",
                 "defaultValue": "1"
             },
             "rowsperpage": {
@@ -205,8 +256,10 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "Enable rows per page dropdown"
                 },
-                "attribute": "rowsperpage",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "rowsperpage",
                 "defaultValue": "true"
             },
             "rowsPerPageValues": {
@@ -223,6 +276,8 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "Set available rows per page values"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "[10, 25, 50]"
             },
             "pages": {
@@ -239,8 +294,10 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "Sets the number of pages."
                 },
-                "attribute": "pages",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "pages",
                 "defaultValue": "0"
             },
             "cols": {
@@ -257,8 +314,10 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "<b>Client override</b> Used to set the column span of the footer. Use as fallback if the automatic count of columns fails."
                 },
-                "attribute": "cols",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "cols",
                 "defaultValue": "null"
             }
         };
@@ -267,6 +326,8 @@ export class TdsTableFooter {
         return {
             "columnsNumber": {},
             "compactDesign": {},
+            "multiselect": {},
+            "expandableRows": {},
             "lastCorrectValue": {},
             "tableId": {},
             "horizontalScrollWidth": {},
@@ -292,6 +353,18 @@ export class TdsTableFooter {
             }];
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "cols",
+                "methodName": "colsChanged"
+            }, {
+                "propName": "multiselect",
+                "methodName": "updateColumnsNumber"
+            }, {
+                "propName": "expandableRows",
+                "methodName": "updateColumnsNumber"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "internalTdsTablePropChange",

package/dist/collection/components/table/table-header/table-header.css

@@ -49,9 +49,6 @@
 :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;

package/dist/collection/components/table/table-header/table-header.js

@@ -11,9 +11,11 @@ const relevantTableProps = [
  */
 export class TdsTableHeaderRow {
     constructor() {
+        /** @deprecated Deprecated, use selected instead. */
         this.allSelected = false;
-        this.selected = undefined;
+        /** Prop for controlling the enabled/disabled state of the "All selected"-checkbox. */
         this.disabled = false;
+        /** Prop for controlling the indeterminate state of the "All selected"-checkbox. */
         this.indeterminate = false;
         this.multiselect = false;
         this.expandableRows = false;
@@ -88,11 +90,11 @@ export class TdsTableHeaderRow {
         });
     }
     render() {
-        return (h(Host, { key: 'd223210726dcf021431d5dbaae0339f46c948d01', class: {
+        return (h(Host, { key: '88b6399e20ad62915e2fc6b7dc77f0274bcc4c53', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: 'e0378b5a3843b17a322b41a6062edfa44a46fc95' }, this.multiselect && (h("th", { key: '9641cb2e3ee11abb9cf30a7592c0b6d00f5f7575', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: 'a0a02dad1e01d7ffaed5a8069dcd885021076e51', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '5ed55d728588753457e279b955f1eba78b6dc311', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '7a5451320a3909e333bdbc21c2f748f95eafef74', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '841f44149457dfe9f5a9e9d09bdddcd8cd443646' }))));
+            } }, h("tr", { key: '39f977fed7af33525ade2bc1ba56d90689bd95f2' }, this.multiselect && (h("th", { key: '94fdaf3504f4f8a30cc201fce98f094a70936dbb', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '6e614faf8610379510fe440777a20083cb29f818', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '59732675c10272928260a88bcdf7e01ddd5cbc0c', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: 'e359230499f01aed71f6c9c7dc929ebeb95bcde4', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '8d359504221abdb767a8334d2c7ef6d89091f746' }))));
     }
     static get is() { return "tds-table-header"; }
     static get encapsulation() { return "shadow"; }
@@ -125,8 +127,10 @@ export class TdsTableHeaderRow {
                         }],
                     "text": ""
                 },
-                "attribute": "all-selected",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "all-selected",
                 "defaultValue": "false"
             },
             "selected": {
@@ -143,8 +147,10 @@ export class TdsTableHeaderRow {
                     "tags": [],
                     "text": "Prop for controlling the checked/unchecked state of the \"All selected\"-checkbox."
                 },
-                "attribute": "selected",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected"
             },
             "disabled": {
                 "type": "boolean",
@@ -160,8 +166,10 @@ export class TdsTableHeaderRow {
                     "tags": [],
                     "text": "Prop for controlling the enabled/disabled state of the \"All selected\"-checkbox."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "indeterminate": {
@@ -178,8 +186,10 @@ export class TdsTableHeaderRow {
                     "tags": [],
                     "text": "Prop for controlling the indeterminate state of the \"All selected\"-checkbox."
                 },
-                "attribute": "indeterminate",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "indeterminate",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/table/table-header-cell/table-header-cell.css

@@ -1,8 +1,11 @@
-:host(.tds-table__header-cell) {
+:host {
+  display: contents;
+}
+
+:host(.tds-table__header-cell) th {
   box-sizing: border-box;
   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);
@@ -15,18 +18,22 @@
   overflow: hidden;
   transition: background-color 200ms ease;
 }
-:host(.tds-table__header-cell) * {
+:host(.tds-table__header-cell) th * {
   box-sizing: border-box;
 }
-:host(.tds-table__header-cell) .tds-table__header-text {
+:host(.tds-table__header-cell) th .tds-table__header-text {
   padding: 8px 16px;
   margin: 0;
 }
-:host(.tds-table__header-cell) .tds-table__header-text-no-padding {
+:host(.tds-table__header-cell) th .tds-table__header-text-no-padding {
   padding: 0;
 }
 
-:host(.tds-table__header-cell--sortable) .tds-table__header-button {
+:host(.tds-table__header-cell) th:hover {
+  background-color: var(--tds-table-header-background-hover);
+}
+
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -40,20 +47,20 @@
   cursor: pointer;
   transition: background-color 200ms ease;
 }
-:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus {
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button:focus {
   outline: 2px solid var(--tds-table-header-btn-focus);
   outline-offset: -2px;
 }
-:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus .tds-table__header-button-icon {
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button:focus .tds-table__header-button-icon {
   opacity: 1;
 }
-:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-text {
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button .tds-table__header-button-text {
   font: var(--tds-headline-07);
   letter-spacing: var(--tds-headline-07-ls);
   text-align: left;
   color: var(--tds-table-header-btn-color);
 }
-:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-icon {
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button .tds-table__header-button-icon {
   /* not to shrink on lot of text */
   flex: 0 0 16px;
   height: 16px;
@@ -63,67 +70,67 @@
   transition: opacity 200ms ease-in, transform 200ms ease;
   color: var(--tds-table-color);
 }
-:host(.tds-table__header-cell--sortable) .tds-table__header-button:hover .tds-table__header-button-icon {
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button:hover .tds-table__header-button-icon {
   opacity: 1;
 }
 
-:host(.tds-table__header-cell--is-sorted) .tds-table__header-button {
+:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button {
   background-color: var(--tds-table-header-btn-background);
 }
-:host(.tds-table__header-cell--is-sorted) .tds-table__header-button:hover {
+:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button:hover {
   background-color: var(--tds-table-header-btn-background-hover);
 }
-:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon {
+:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button .tds-table__header-button-icon {
   opacity: 1;
 }
-:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon--rotate {
+:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button .tds-table__header-button-icon--rotate {
   transform: rotate(180deg);
 }
 
-:host(.tds-table--compact) {
+:host(.tds-table--compact) th {
   height: 33px;
 }
 
-:host(.tds-table--divider) {
+:host(.tds-table--divider) th {
   border-right: 1px solid var(--tds-table-divider);
 }
 
-:host(.tds-table--divider:last-of-type) {
+:host(.tds-table--divider:last-of-type) th {
   border-right: none;
 }
 
-:host(.tds-table--no-min-width) {
+:host(.tds-table--no-min-width) th {
   min-width: unset;
 }
 
-:host(.tds-table--no-padding) {
+:host(.tds-table--no-padding) th {
   height: unset;
 }
 
-:host(.tds-table__header-cell:first-of-type) {
+:host(.tds-table__header-cell:first-of-type) th {
   border-top-left-radius: 4px;
 }
 
-:host(.tds-table__header-cell:last-of-type) {
+:host(.tds-table__header-cell:last-of-type) th {
   border-top-right-radius: 4px;
 }
 
-:host(.tds-table--extra-column:first-of-type) {
+:host(.tds-table--extra-column:first-of-type) th {
   border-top-left-radius: 0;
 }
 
-:host(.tds-table--toolbar-available) {
+:host(.tds-table--toolbar-available) th {
   border-radius: 0;
 }
 
-:host(.tds-table--extra-column.tds-table--toolbar-available) {
+:host(.tds-table--extra-column.tds-table--toolbar-available) th {
   border-radius: 0;
 }
 
-:host(.tds-table__header-cell.tds-table--toolbar-available:first-of-type) {
+:host(.tds-table__header-cell.tds-table--toolbar-available:first-of-type) th {
   border-top-left-radius: 0;
 }
 
-:host(.tds-table__header-cell.tds-table--toolbar-available:last-of-type) {
+:host(.tds-table__header-cell.tds-table--toolbar-available:last-of-type) th {
   border-top-right-radius: 0;
 }