@scania/tegel 1.33.0 → 1.34.0-internal-variables-demo.0

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

@@ -1,10 +1,10 @@
 :host(.tds-table__row) {
   box-sizing: border-box;
+  background-color: var(--table-body-row);
+  border-bottom: 1px solid var(--table-divider);
+  color: var(--table-text);
   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;
@@ -16,15 +16,15 @@
 }
 
 :host(.tds-table__row:hover) {
-  background-color: var(--tds-table-body-row-background-hover);
+  background-color: var(--table-body-row-hover);
 }
 
 :host(.tds-table__row--selected) {
-  background-color: var(--tds-table-body-row-background-selected);
+  background-color: var(--table-body-row-selected);
 }
 
 :host(.tds-table__row--selected:hover) {
-  background-color: var(--tds-table-body-row-background-selected-hover);
+  background-color: var(--table-body-row-selected-hover);
 }
 
 :host(.tds-table__row--hidden) {
@@ -33,7 +33,6 @@
 
 :host(.tds-table__row--expended) {
   width: 100%;
-  background-color: pink;
 }
 
 :host .tds-form-label--table {
@@ -50,7 +49,7 @@
 }
 
 :host(.tds-table--divider) .tds-table__body-cell--checkbox {
-  border-right: 1px solid var(--tds-table-divider);
+  border-right: 1px solid var(--table-divider);
 }
 
 :host(.tds-table__row--clickable) {
@@ -58,5 +57,7 @@
 }
 
 :host(.tds-table__row--clickable:focus-visible) {
-  outline: var(--focus-outline, 2px solid blue);
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline-offset: 1px;
 }

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

@@ -68,13 +68,13 @@ export class TdsTableBodyRow {
         }
     }
     render() {
-        return (h(Host, { key: '13b790e1c4586e110853125bb2856166f8090cc3', tabindex: this.clickable ? '0' : null, class: {
+        return (h(Host, { key: '7ba4597616440e7767243890c79864259f494809', 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), role: "row" }, this.multiselect && (h("td", { key: '3a966516c5a227907f9530d047e6e1c19eb5362c', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '90811b5dd064a36dfe9363dae55376fb7b4ca78d', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '4a16bce9add5ec4b9e4119e5361d556f5ee104f9' })));
+            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: 'd21a3062ed62bf5f3ecfbcf0fdecf09164b51a2f', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'c77ff16d0a994cc06ea7cb2268e519b86d64f085', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: 'f17bed1fc5675e091e18d51745f654189773f11d' })));
     }
     static get is() { return "tds-table-body-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.css

@@ -7,18 +7,18 @@
 }
 :host .tds-table__row,
 :host .tds-table__row-extend {
+  background-color: var(--table-body-row);
+  border-bottom: 1px solid var(--table-divider);
+  color: var(--table-text);
   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);
+  background-color: var(--table-body-row-hover);
 }
 :host .tds-table__expand-control-container {
   display: flex;
@@ -39,10 +39,9 @@
   cursor: pointer;
 }
 :host .tds-table__expand-control-container .tds-table__expand-input:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
   outline-offset: 1px;
-  z-index: 1;
 }
 :host .tds-table__expand-control-container .tds-expendable-row-icon {
   height: 16px;
@@ -55,13 +54,13 @@
   transition: background-color 200ms ease;
 }
 :host .tds-table__row-expand--expanded {
-  border-bottom: 1px solid var(--tds-table-divider);
+  border-bottom: 1px solid var(--table-divider);
 }
 :host .tds-table__row-expand .tds-table__cell-expand {
+  color: var(--table-text);
   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;
@@ -71,13 +70,13 @@
 }
 
 :host(.tds-table__row-expand--active) .tds-table__row {
-  background-color: var(--tds-table-body-row-background-selected);
+  background-color: var(--table-body-row-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);
+  background-color: var(--table-body-row-selected);
   display: table-row;
 }
 
@@ -93,5 +92,5 @@
 }
 
 :host(.tds-table--divider) .tds-table__cell--expand {
-  border-right: 1px solid var(--tds-table-divider);
+  border-right: 1px solid var(--table-divider);
 }

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

@@ -101,26 +101,26 @@ export class TdsTableBodyRowExpandable {
         this.sendValue();
     }
     render() {
-        return (h(Host, { key: '36be80e7cd0916cb8e196f52676281fcabc1996e', class: {
+        return (h(Host, { key: 'ce2f0459371d7b5ae0e61850a023eb550ea1918b', class: {
                 'tds-table__row': true,
                 'tds-table__row-expand--active': this.isExpanded,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, h("tr", { key: '868377d055d9d66fcf1824ed811e4a56f67b79e0', id: `expandable-content-${this.rowId}`, class: {
+            } }, h("tr", { key: '945cc2da086748eeb743c2b953cbc2439187ff2a', id: `expandable-content-${this.rowId}`, class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, h("td", { key: '059858ff5293deda48d039fdc81dd4a5d8ae6fce', class: {
+            }, part: "row" }, h("td", { key: 'f6ef8298bf105ca9d2f3370f82ac374237b67a41', class: {
                 'tds-table__cell-expand': true,
-            } }, h("label", { key: '6e05d93a509cb77cb3fd76f3d869b820b5d83163', class: "tds-table__expand-control-container" }, h("input", { key: 'ed7091d4dfdac43c082ee63548c7bff2e87379dd', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: '84622275a00b28685834e0de8552f5c7a36bc983', class: "tds-expendable-row-icon" }, h("svg", { key: '633d1030453895343295b30142410ece7f15dec3', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: 'e4d21588ca0bb6fbcd68af3a7afb48bafe180bc1', "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: '5c66154a24fe8d21bb6b9d91930ad7efd4cb1ec5' })), h("tr", { key: '1417c7143b8aaafbb2143557e53443cde9afcbde', class: {
+            } }, h("label", { key: '9952502bf560b48421ee37ae122ece5f0da3ef97', class: "tds-table__expand-control-container" }, h("input", { key: 'a7369527c6b2ef079837c63b22274dda8e62fefc', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: 'de8cc51db3ea6d5ff6936fe34664d5d96fc60ab3', class: "tds-expendable-row-icon" }, h("svg", { key: '62b247929999b2a01f05592826835bd70048d370', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '843c725fd0f9404752d4f4e7694c342f44f687c5', "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: '210f15581be86a7b1ec185eddb3127052011b5dd' })), h("tr", { key: 'e5093efd395986a9756d8642e9df1acf61102bae', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, h("td", { key: 'b72d532f22b5c7c0bc7c7b23caf5887d4228b9d0', class: {
+            }, part: "expand-row" }, h("td", { key: 'e3c982507e9a9e9d188c546d28b2eaf1a35ea483', 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: '256a827b43a8099b9ea4e5a5a43023ff9bf0b828', style: {
+            }, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: 'f56682afa6d59fd03d42526859309e286458b539', style: {
                 overflow: this.overflow,
-            } }, h("slot", { key: '6bbc0eeca7b7a654da9c1b7da6992aa8928e1974', name: "expand-row" }))))));
+            } }, h("slot", { key: '722cbdebb09838b5e1ea045f6d3066d24368e419', name: "expand-row" }))))));
     }
     static get is() { return "tds-table-body-row-expandable"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: table-footer-group;
@@ -7,8 +10,8 @@
   box-sizing: border-box;
 }
 :host .tds-table__footer-row {
-  background-color: var(--tds-table-footer-background);
-  color: var(--tds-table-color);
+  background-color: var(--table-footer);
+  color: var(--table-text);
 }
 :host .tds-table__footer-cell {
   padding: 0 var(--tds-spacing-element-16);
@@ -26,32 +29,36 @@
 }
 :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 {
+  margin-right: var(--tds-spacing-element-16);
   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);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  background-color: var(--table-footer-page-selector-input);
+  border-radius: var(--tds-spacing-element-4);
+  color: var(--table-text);
+  margin-right: var(--tds-spacing-element-4);
+  padding-right: var(--tds-spacing-element-8);
   width: 74px;
   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);
+  background-color: var(--table-footer-page-selector-input-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);
+  color: var(--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;
@@ -60,37 +67,41 @@
   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;
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  padding: 1px 22px 0 0;
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn {
+  border-radius: var(--tds-spacing-element-4);
+  color: var(--table-icon);
+  height: var(--tds-spacing-element-32);
+  width: var(--tds-spacing-element-32);
   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);
+  background-color: var(--table-footer-button-hover);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled {
+  color: var(--table-icon-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 {
+  fill: var(--table-text);
   height: var(--tds-spacing-element-20);
   width: var(--tds-spacing-element-20);
-  fill: var(--tds-table-color);
 }
 
 :host(.tds-table--compact) {

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

@@ -127,12 +127,12 @@ export class TdsTableFooter {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'fd6a5604adc116a78c9723ce3f16535ea6fa7edf', class: {
+        return (h(Host, { key: 'ef10157de8bd21d020eab709b8b1cfbd0497cf12', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: '5ec3649f1e76f54a1d09cc023f52f165bf55a175', class: "tds-table__footer-row" }, h("td", { key: '0815d2e9083b0b3793dbf3572869b76c2445396e', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '3bdc6acf5b034f8ee141e1fde58e32cb76e7ab33', class: "tds-table__pagination" }, h("div", { key: 'd8bd734bb3890593404d7950b5cb353e0af1b37f', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '0cc09dd7662a2ceba454fb1e1c3eb3a389e9eb4d', class: "rows-per-page" }, h("p", { key: '57ae73ac509c9cd7ce9c93ae60737724035fb376' }, "Rows per page"), h("tds-dropdown", { key: '6fc1d8794bb2cecc406d9143c1e501733a990993', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
+            }, style: this.getStyles() }, h("tr", { key: '25987ea6cf6cdb1116fa1a18303553e168675a26', class: "tds-table__footer-row" }, h("td", { key: 'dc2e516eb866d3f8618593cb902b1616be26702e', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '1f72626867f49dd3dfb6a75d1c5c9ae442a5dca0', class: "tds-table__pagination" }, h("div", { key: '46c99c1e03eaa2c72b01b5476097f67542dcf873', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '4126adc0bc4629e7f9244c5f74fa9c03b8ca9475', class: "rows-per-page" }, h("p", { key: '795fe282730d46353c66c3aca916760d7bf5ad56' }, "Rows per page"), h("tds-dropdown", { key: '43e70ffc5418c48d87fb69c7b070d84ac78b4a2e', 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: '71e30ccac9cb36acf61f46de47fc39d4b45c49d3', class: "tds-table__page-selector" }, h("input", { key: 'fe99cbdae18c4b297e0823de2f2a5529f24ed7f4', 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: 'd49b93524aeaddacd2e6c431d8f191fd87c768be', class: "tds-table__footer-text" }, "of ", h("span", { key: '1d6f7429e0837f200db90259e1e23cb879643756' }, this.pages), " pages"), h("button", { key: 'b5e0a8d72a1e7ff35570dfd2c131735f91ebb824', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '06ffe814de254c6c194ab88d89fe5f6da5239c44', name: "skip_backwards", size: "20px" })), h("button", { key: '271a59221429937f24873f984526fe55dd12c874', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: 'b2231b490bdd4234d62399f2785edf3136789af5', name: "chevron_left", size: "20px" })), h("button", { key: '6b06a0fad602d8593bb834672e934afb00d45edf', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '384751f9299ce4078e35fc15be37d2d529ddeffa', name: "chevron_right", size: "20px" })), h("button", { key: 'cf0fa5f2967d7f249ffbd548039e8021e4121bec', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '6da11c4f01f58a7e39698b7a91034567527464e6', name: "skip_forward", size: "20px" })))))))));
+        }))))), h("div", { key: '8e5ad50f7acde8786633ae3e1bfc743e3dcff64c', class: "tds-table__page-selector" }, h("input", { key: 'fd91b13f5c9c9ef0a6ecce7613cf9e1805c90a60', 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: "rtl", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: '6a14f3235cf6d95e7b733b424c94a91304ea9a6e', class: "tds-table__footer-text" }, "of ", h("span", { key: 'b844edce0c9d68ba0a4b3bcf95be7b6acbb17616' }, this.pages), " pages"), h("button", { key: 'f808fa27c7ce60ec963355442550b2ee4b684254', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '8b795215e40ff0f5dffd3c053c791b9bc19035aa', name: "skip_backwards", size: "20px" })), h("button", { key: 'f30422518268f30195f8411b70c91dd58cd8ea3c', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '2d024cea17fd5a7e021fc0c7e244ffaecdb10062', name: "chevron_left", size: "20px" })), h("button", { key: 'c6e8733c92c9d36fe807916c1af69e2f0e3a9604', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '23e0c5bd4c97ded51a5d346e1492997dedf77fa5', name: "chevron_right", size: "20px" })), h("button", { key: '81fcc39bbf208f610d06151614c90fbd0bb1951e', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: 'ce19da46b8345c9ceb69ff2e775a85d78ad3b6fb', name: "skip_forward", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: table-header-group;
@@ -6,13 +9,17 @@
   box-sizing: border-box;
 }
 :host .tds-table__header-cell--checkbox {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  background-color: var(--table-header);
+  border-bottom: 1px solid var(--table-divider);
+  color: var(--table-text);
   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;
@@ -50,7 +57,7 @@
   transform: rotate(180deg);
 }
 :host ::slotted(tds-header-cell:hover) {
-  background-color: var(--tds-table-header-background-hover);
+  background-color: var(--table-header-hover);
 }
 
 :host(.tds-table--compact) .tds-table__header-cell--checkbox {
@@ -61,7 +68,7 @@
 }
 
 :host(.tds-table--divider) .tds-table__header-cell--checkbox {
-  border-right: 1px solid var(--tds-table-divider);
+  border-right: 1px solid var(--table-divider);
 }
 
 :host(.tds-table--toolbar-available) .tds-table__header-cell--checkbox {

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

@@ -82,11 +82,11 @@ export class TdsTableHeaderRow {
         });
     }
     render() {
-        return (h(Host, { key: '968ef371db492d005ac3156d8b4a15de0966d117', class: {
+        return (h(Host, { key: '75f1971a9e5da0235c05bd6df404e00ef5e00ebe', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: 'cc9fdb8e36b29c4dccf01961060df330fb50c6f2' }, this.multiselect && (h("th", { key: 'e306755b170ef4edc6d3c2f32941dfbb51eefaf6', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '2903d76304e4f3428aa63ba7e0aa65e48d21f232', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'd9acae7cae023f412395663c607b3293ce40a2e2', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: 'cea8e7da2c5a4a728ea55ead114f790674fc1a0c', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '5ad238c2ceaabc721970c28ea9d58ecedac8152d' }))));
+            } }, h("tr", { key: 'b5a11da2da4150e10670bd337d54a52ff374f0c4' }, this.multiselect && (h("th", { key: '4e3306cac508165e6275f1d25003ded464f46d96', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '3a56745e002253a5c5600f84c1ca5079a7f3b337', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'fdcaf57c308efe9fef3ac0769903cd0803b48b71', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: 'fa98bc0ad7ae71ab5e0dc68aee1d75ca36b1e83a', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '0b5f62c41e92984f42db820a57a89be2f5a57993' }))));
     }
     static get is() { return "tds-table-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,12 +1,19 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host(.tds-table__header-cell) {
   box-sizing: border-box;
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  background-color: var(--table-header);
+  border-bottom: 1px solid var(--table-divider);
+  color: var(--table-text);
   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-header-background-hover);
   padding: 0;
   height: 48px;
   min-width: 192px;
@@ -27,6 +34,7 @@
 }
 
 :host(.tds-table__header-cell--sortable) .tds-table__header-button {
+  color: var(--table-text);
   display: flex;
   align-items: center;
   gap: 8px;
@@ -41,37 +49,43 @@
   transition: background-color 200ms ease;
 }
 :host(.tds-table__header-cell--sortable) .tds-table__header-button:focus {
-  outline: 2px solid var(--tds-table-header-btn-focus);
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline-offset: 1px;
   outline-offset: -2px;
 }
 :host(.tds-table__header-cell--sortable) .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 {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  color: var(--table-text);
   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 {
   /* not to shrink on lot of text */
+  fill: var(--table-text);
   flex: 0 0 16px;
   height: 16px;
   width: 16px;
   opacity: 0;
   transform-origin: center;
   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 {
   opacity: 1;
 }
 
 :host(.tds-table__header-cell--is-sorted) .tds-table__header-button {
-  background-color: var(--tds-table-header-btn-background);
+  background-color: var(--table-header-button);
 }
 :host(.tds-table__header-cell--is-sorted) .tds-table__header-button:hover {
-  background-color: var(--tds-table-header-btn-background-hover);
+  background-color: var(--table-header-button-hover);
 }
 :host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon {
   opacity: 1;
@@ -85,7 +99,7 @@
 }
 
 :host(.tds-table--divider) {
-  border-right: 1px solid var(--tds-table-divider);
+  border-right: 1px solid var(--table-divider);
 }
 
 :host(.tds-table--divider:last-of-type) {

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

@@ -113,7 +113,7 @@ export class TdsTableHeaderCell {
         return 'none';
     }
     render() {
-        return (h(Host, { key: 'c832982801653ad4ed4be858fa88f6d3d3de02ef', class: {
+        return (h(Host, { key: '18922f48d3b403ee3e1f244ddcc6a56f5cbd3ac2', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,

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

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   position: relative;
 }
@@ -10,7 +13,7 @@
   display: inline-block;
 }
 :host(.focused-input-wrapper) ::slotted(input:not(:focus)) {
-  background-color: var(--tds-table-input-background-hover);
+  background-color: var(--table-input-hover);
 }
 
 :host(.show-icon) ::slotted(input) {
@@ -18,19 +21,23 @@
 }
 
 tds-icon.search-icon {
-  color: var(--tds-table-input-header-icon);
+  color: var(--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);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--table-text);
   padding-left: var(--tds-spacing-element-16);
   padding-right: var(--tds-spacing-element-16);
+  box-sizing: border-box;
   height: 48px;
   border-radius: 0;
   background-color: transparent;
@@ -39,13 +46,13 @@ tds-icon.search-icon {
 }
 
 ::slotted(input)::placeholder {
-  color: var(--tds-table-input-header-placeholder);
+  color: var(--table-input-header-placeholder);
 }
 
 ::slotted(input:focus) {
-  outline: none;
-  background-color: var(--tds-table-input-header-background-focus);
+  background-color: var(--table-input-header-focus);
   border-bottom: 2px solid var(--tds-text-field-bar);
+  outline: none;
 }
 
 :host(.tds-table__compact) ::slotted(input) {

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

@@ -63,7 +63,7 @@ export class TdsTableHeaderInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: 'e92640dc4c88b52574960d7234b377d7e5eaaa8e', class: {
+        return (h(Host, { key: '13e05f7cd1dbe0a06611ffacc4e4b842d6469eba', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,