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

package/dist/collection/components/stepper/step/step.css

@@ -41,28 +41,45 @@
   position: absolute;
   background-color: var(--tds-stepper-divider-line);
   height: 1px;
-  left: calc(50% + 24px);
+  left: calc(50% + 16px + 16px);
   right: 0;
-  top: 18px;
+  top: 16px;
 }
 :host [role=listitem].lg.horizontal::before {
   content: " ";
   position: absolute;
   background-color: var(--tds-stepper-divider-line);
   height: 1px;
-  right: calc(50% + 24px);
+  right: calc(50% + 16px + 16px);
   left: 0;
-  top: 18px;
+  top: 16px;
 }
-:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after {
+:host [role=listitem].lg.horizontal.hide-labels::after {
   content: " ";
   position: absolute;
   background-color: var(--tds-stepper-divider-line);
   height: 1px;
+  left: calc(50% + 16px + 8px);
+  right: 0;
   top: 16px;
-  width: 10px;
+}
+:host [role=listitem].lg.horizontal.hide-labels::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-divider-line);
+  height: 1px;
+  right: calc(50% + 16px + 8px);
+  left: 0;
+  top: 16px;
+}
+:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-divider-line);
+  height: 1px;
   left: auto;
   right: -10px;
+  width: 10px;
 }
 :host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before {
   content: " ";
@@ -70,9 +87,9 @@
   background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 16px;
-  width: 10px;
   left: -10px;
   right: auto;
+  width: 10px;
 }
 :host [role=listitem].sm {
   padding: 0 20px;
@@ -115,7 +132,7 @@
   position: absolute;
   background-color: var(--tds-stepper-divider-line);
   height: 1px;
-  left: calc(50% + 16px + 8px);
+  left: calc(50% + 12px + 16px);
   right: 0;
   top: 13px;
 }
@@ -125,7 +142,25 @@
   background-color: var(--tds-stepper-divider-line);
   height: 1px;
   left: 0;
-  right: calc(50% + 24px);
+  right: calc(50% + 12px + 16px);
+  top: 13px;
+}
+:host [role=listitem].sm.horizontal.hide-labels::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-divider-line);
+  height: 1px;
+  left: calc(50% + 12px + 8px);
+  right: 0;
+  top: 13px;
+}
+:host [role=listitem].sm.horizontal.hide-labels::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-divider-line);
+  height: 1px;
+  right: calc(50% + 12px + 8px);
+  left: 0;
   top: 13px;
 }
 :host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after {
@@ -134,9 +169,9 @@
   background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 13px;
-  width: 10px;
   left: auto;
   right: -10px;
+  width: 10px;
 }
 :host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before {
   content: " ";
@@ -144,9 +179,9 @@
   background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 13px;
-  width: 10px;
   left: -10px;
   right: auto;
+  width: 10px;
 }
 :host [role=listitem] .content-container {
   border-radius: 100px;
@@ -164,7 +199,7 @@
   color: var(--tds-white);
 }
 :host [role=listitem] .content-container.current {
-  background-color: var(--tds-stepper-background);
+  background-color: var(--tds-stepper-icon-step-border-color-current);
   color: var(--tds-stepper-color);
 }
 :host [role=listitem] .content-container.upcoming {
@@ -188,8 +223,25 @@
   opacity: var(--tds-stepper-label-text-opacity-upcoming);
 }
 
-:host(:last-of-type) [role=listitem].horizontal {
+:host(:last-of-type) [role=listitem].horizontal.text-aside {
   padding-right: 0;
+  padding-left: 20px;
+}
+:host(:last-of-type) [role=listitem].horizontal.text-aside::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-divider-line);
+  height: 1px;
+  width: 20px;
+  left: -10px;
+  right: auto;
+  top: 16px;
+}
+:host(:last-of-type) [role=listitem].horizontal.text-aside.sm.hide-labels::before {
+  top: 13px;
+  width: 13px;
+  left: 0;
+  right: calc(50% + 20px);
 }
 :host(:last-of-type) [role=listitem].sm::after, :host(:last-of-type) [role=listitem].lg::after {
   display: none;
@@ -198,9 +250,6 @@
   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;
 }

package/dist/collection/components/stepper/step/step.js

@@ -10,13 +10,8 @@ const propToStateMap = {
  */
 export class TdsStep {
     constructor() {
-        this.index = undefined;
+        /** State of the Step */
         this.state = 'upcoming';
-        this.tdsAriaCurrent = undefined;
-        this.hideLabels = undefined;
-        this.size = undefined;
-        this.orientation = undefined;
-        this.labelPosition = undefined;
     }
     /* Needs to be onload to do this on any updates. */
     componentWillLoad() {
@@ -42,7 +37,7 @@ export class TdsStep {
         }
     }
     render() {
-        return (h(Host, { key: '0589d81b64f547deb8f0d9db7c9d377ee9d8db67' }, h("div", { key: '7d01660a996d9c3a63b6c9765aa9e97a3c465f72', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'f11f36b998a8b40842517a4032fe25aad488ccf3', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '0e707ca85c128c486906e893f20f7a171ef693f7', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '265d2e99ba2b59749a1ee841895127c90c7750ac', name: "label" }))))));
+        return (h(Host, { key: '02d1b6ed29a07f3734f66c1d52fe076fcfce51a3' }, h("div", { key: 'b57393eea78ab1868ec1f1f745a4d5d50a68df3a', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'ee0e109c683ec2ae5ee63bffcba78db4ac01b41c', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '0649edfcf0a1b5be4cbeb4904a185b0d62d933a2', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '1e75c2ab1172c03914b43f2c041a656e53230b36', name: "label" }))))));
     }
     static get is() { return "tds-step"; }
     static get encapsulation() { return "shadow"; }
@@ -72,8 +67,10 @@ export class TdsStep {
                     "tags": [],
                     "text": "Index of the step. Will be displayed in the step if the state is current/upcoming."
                 },
-                "attribute": "index",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "index"
             },
             "state": {
                 "type": "string",
@@ -89,8 +86,10 @@ export class TdsStep {
                     "tags": [],
                     "text": "State of the Step"
                 },
-                "attribute": "state",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "state",
                 "defaultValue": "'upcoming'"
             },
             "tdsAriaCurrent": {
@@ -107,8 +106,10 @@ export class TdsStep {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "tds-aria-current",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-current"
             }
         };
     }

package/dist/collection/components/stepper/stepper.js

@@ -5,11 +5,21 @@ import generateUniqueId from "../../utils/generateUniqueId";
  */
 export class TdsStepper {
     constructor() {
+        /** The orientation the Steps */
         this.orientation = 'horizontal';
+        /** Text position, only available on a direction: horizontal */
         this.labelPosition = 'below';
+        /** Size of the component and it's children. */
         this.size = 'lg';
+        /** Hides the label for the child components if true. */
         this.hideLabels = false;
+        /** ID used for internal Stepper functionality and events, must be unique.
+         *
+         * **NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,
+         * as the default ID is random and will be different every time.
+         */
         this.stepperId = generateUniqueId();
+        /** Label for the stepper component, for screen reader users */
         this.tdsAriaLabel = 'Progress steps';
     }
     componentWillLoad() {
@@ -76,8 +86,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "The orientation the Steps"
                 },
-                "attribute": "orientation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "orientation",
                 "defaultValue": "'horizontal'"
             },
             "labelPosition": {
@@ -94,8 +106,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "Text position, only available on a direction: horizontal"
                 },
-                "attribute": "label-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "label-position",
                 "defaultValue": "'below'"
             },
             "size": {
@@ -112,8 +126,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "Size of the component and it's children."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'lg'"
             },
             "hideLabels": {
@@ -130,8 +146,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "Hides the label for the child components if true."
                 },
-                "attribute": "hide-labels",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "hide-labels",
                 "defaultValue": "false"
             },
             "stepperId": {
@@ -148,8 +166,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "ID used for internal Stepper functionality and events, must be unique.\n\n**NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,\nas the default ID is random and will be different every time."
                 },
-                "attribute": "stepper-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "stepper-id",
                 "defaultValue": "generateUniqueId()"
             },
             "tdsAriaLabel": {
@@ -166,8 +186,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "Label for the stepper component, for screen reader users"
                 },
-                "attribute": "tds-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-aria-label",
                 "defaultValue": "'Progress steps'"
             }
         };

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

@@ -7,15 +7,32 @@ import generateUniqueId from "../../../utils/generateUniqueId";
  */
 export class TdsTable {
     constructor() {
+        /** Enables style with vertical dividers between columns */
         this.verticalDividers = false;
+        /** Enables style where Table toolbar, rows and footer are less high */
         this.compactDesign = false;
-        this.noMinWidth = undefined;
+        // TODO: Due to unknown reason, one of this items has to be left as is.
+        //  If all are false, it seems like emitting is not properly done and it affects other events in Table.
+        //  Try setting it and observe text-align set on header cell
+        /** Enables multiselect feature of Table */
         this.multiselect = false;
+        /** Enables extended row feature of Table */
         this.expandableRows = false;
+        /** Enables Table to take 100% available width with equal spacing of columns */
         this.responsive = false;
+        /** Variant of the component, based on current mode. */
         this.modeVariant = null;
+        /** Enables zebra stripe mode on the table rows or columns. */
         this.zebraMode = 'none';
+        /** Width of the table, used as the constraint for horizontal scrolling.
+         * **NOTE**: this will disable usage of the responsive flag
+         * */
         this.horizontalScrollWidth = null;
+        /** ID used for internal Table functionality and events, must be unique.
+         *
+         * **NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table,
+         * as the default ID is random and will be different every time.
+         */
         this.tableId = generateUniqueId();
         this.enableHorizontalScrollToolbarDesign = false;
         this.enableHorizontalScrollFooterDesign = false;
@@ -29,10 +46,13 @@ export class TdsTable {
     }
     /** Returns all selected rows data. */
     async getSelectedRows() {
-        var _a;
+        var _a, _b;
         let selectedRowsData = [];
         const tableBody = this.host.querySelector('tds-table-body');
-        const selectedRows = Array.from((_a = tableBody === null || tableBody === void 0 ? void 0 : tableBody.querySelectorAll('tds-table-body-row')) !== null && _a !== void 0 ? _a : []).filter((element) => element.selected);
+        // Get both regular rows and expandable rows
+        const regularRows = Array.from((_a = tableBody === null || tableBody === void 0 ? void 0 : tableBody.querySelectorAll('tds-table-body-row')) !== null && _a !== void 0 ? _a : []).filter((element) => element.selected);
+        const expandableRows = Array.from((_b = tableBody === null || tableBody === void 0 ? void 0 : tableBody.querySelectorAll('tds-table-body-row-expandable')) !== null && _b !== void 0 ? _b : []).filter((element) => element.selected);
+        const selectedRows = [...regularRows, ...expandableRows];
         selectedRows.forEach((row) => {
             let selectedRow = [];
             const rowCells = Array.from(row.getElementsByTagName('tds-body-cell'));
@@ -91,11 +111,11 @@ export class TdsTable {
         }
     }
     render() {
-        return (h(Host, { key: '2518c49a6d15147aed6989edfbd4cd658ac2219a', class: {
+        return (h(Host, { key: '677bf0b8c1df0154c90438ad8af1c947b701a1f8', class: {
                 'tds-table--responsive': this.responsive,
                 'tds-mode-variant-primary': this.modeVariant === 'primary',
                 'tds-mode-variant-secondary': this.modeVariant === 'secondary',
-            } }, h("table", { key: '1a845328df98203bd3b4bc3c058310c75ebd83a6', style: this.getStyles(), class: {
+            } }, h("table", { key: '673a4b1bae0b0430760697b0312611d0a91421bf', style: this.getStyles(), class: {
                 'tds-table': true,
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
@@ -106,7 +126,7 @@ export class TdsTable {
                 '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: 'ded1d53ea8e07514e45797c0feffa83f58cce6b4' }))));
+            } }, h("slot", { key: '218dfb52cd9498b0c72839dd6d0c2f4bb71a89cb' }))));
     }
     static get is() { return "tds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -136,8 +156,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables style with vertical dividers between columns"
                 },
-                "attribute": "vertical-dividers",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "vertical-dividers",
                 "defaultValue": "false"
             },
             "compactDesign": {
@@ -154,8 +176,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables style where Table toolbar, rows and footer are less high"
                 },
-                "attribute": "compact-design",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "compact-design",
                 "defaultValue": "false"
             },
             "noMinWidth": {
@@ -172,8 +196,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables to customize width on Table columns"
                 },
-                "attribute": "no-min-width",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "no-min-width"
             },
             "multiselect": {
                 "type": "boolean",
@@ -189,8 +215,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables multiselect feature of Table"
                 },
-                "attribute": "multiselect",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "multiselect",
                 "defaultValue": "false"
             },
             "expandableRows": {
@@ -207,8 +235,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables extended row feature of Table"
                 },
-                "attribute": "expandable-rows",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "expandable-rows",
                 "defaultValue": "false"
             },
             "responsive": {
@@ -225,8 +255,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables Table to take 100% available width with equal spacing of columns"
                 },
-                "attribute": "responsive",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "responsive",
                 "defaultValue": "false"
             },
             "modeVariant": {
@@ -243,8 +275,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Variant of the component, based on current mode."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             },
             "zebraMode": {
@@ -261,8 +295,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables zebra stripe mode on the table rows or columns."
                 },
-                "attribute": "zebra-mode",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "zebra-mode",
                 "defaultValue": "'none'"
             },
             "horizontalScrollWidth": {
@@ -279,8 +315,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Width of the table, used as the constraint for horizontal scrolling.\n**NOTE**: this will disable usage of the responsive flag"
                 },
-                "attribute": "horizontal-scroll-width",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "horizontal-scroll-width",
                 "defaultValue": "null"
             },
             "tableId": {
@@ -297,8 +335,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "ID used for internal Table functionality and events, must be unique.\n\n**NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table,\nas the default ID is random and will be different every time."
                 },
-                "attribute": "table-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "table-id",
                 "defaultValue": "generateUniqueId()"
             }
         };
@@ -359,6 +399,10 @@ export class TdsTable {
                             "location": "global",
                             "id": "global::HTMLTdsTableBodyRowElement"
                         },
+                        "HTMLTdsTableBodyRowExpandableElement": {
+                            "location": "global",
+                            "id": "global::HTMLTdsTableBodyRowExpandableElement"
+                        },
                         "HTMLTdsBodyCellElement": {
                             "location": "global",
                             "id": "global::HTMLTdsBodyCellElement"

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

@@ -9,11 +9,6 @@ const relevantTableProps = [
  */
 export class TdsTableBody {
     constructor() {
-        this.bodyCheckBoxClicked = () => {
-            const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
-            const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
-            this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
-        };
         this.multiselect = false;
         this.enablePaginationTableBody = false;
         this.expandableRows = false;
@@ -23,6 +18,11 @@ export class TdsTableBody {
         this.columnsNumber = 0;
         this.zebraMode = 'none';
         this.tableId = '';
+        this.bodyCheckBoxClicked = () => {
+            const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
+            const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
+            this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
+        };
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -64,12 +64,12 @@ export class TdsTableBody {
         }
     }
     render() {
-        return (h(Host, { key: '38f8bf195ef802dbf2ee50e5ea6eb1ecc6d35549', "data-selected-rows": this.multiselectArrayJSON, class: {
+        return (h(Host, { key: 'd61524e078103156a13685d1071258a674767f5f', "data-selected-rows": this.multiselectArrayJSON, class: {
                 '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: '30787d97aa3a0f2a1f447d7ebc5434b6345fd7c3' })));
+            } }, h("slot", { key: '2e7d10195e21f906269ae74f262debc2d3b4f38b' })));
     }
     static get is() { return "tds-table-body"; }
     static get originalStyleUrls() {

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

@@ -1,8 +1,11 @@
-:host(.tds-table__body-cell) {
+:host {
+  display: contents;
+}
+
+:host(.tds-table__body-cell) td {
   box-sizing: border-box;
   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);
@@ -11,26 +14,26 @@
   background-color: transparent;
   transition: background-color 200ms ease;
 }
-:host(.tds-table__body-cell) * {
+:host(.tds-table__body-cell) td * {
   box-sizing: border-box;
 }
 
-:host(.tds-table__body-cell--hover) {
+:host(.tds-table__body-cell--hover) td {
   background-color: var(--tds-table-body-cell-background-hover);
 }
 
-:host(.tds-table__compact) {
+:host(.tds-table__compact) td {
   padding: var(--tds-spacing-element-8) var(--tds-spacing-element-16);
 }
 
-:host(.tds-table--divider) {
+:host(.tds-table--divider) td {
   border-right: 1px solid var(--tds-table-divider);
 }
 
-:host(.tds-table--divider:last-of-type) {
+:host(.tds-table--divider:last-of-type) td {
   border-right: none;
 }
 
-:host(.tds-table--no-min-width) {
+:host(.tds-table--no-min-width) td {
   min-width: unset;
 }