@scania/tegel 1.32.0 → 1.32.2-multibrand-beta.0

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

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host,
 tds-table-body {
   box-sizing: border-box;
@@ -9,11 +12,15 @@ tds-table-body * {
 }
 :host .tds-table__info-message,
 tds-table-body .tds-table__info-message {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  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);
   display: table-cell;
   box-sizing: border-box;
-  color: var(--tds-table-color);
+  color: var(--table-text);
   padding: var(--tds-spacing-element-16);
   min-width: 192px;
   vertical-align: top;
@@ -22,28 +29,28 @@ tds-table-body .tds-table__info-message {
 }
 
 tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd) {
-  background-color: var(--tds-table-zebra-mode-backround);
+  background-color: var(--table-zebra-mode);
 }
 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);
+  background-color: var(--table-body-row-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);
+  background-color: var(--table-zebra-mode);
 }
 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);
+  background-color: var(--table-body-row-hover);
 }
 tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell:nth-child(odd) {
-  background-color: var(--tds-table-zebra-mode-backround);
+  background-color: var(--table-zebra-mode);
 }
 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);
+  background-color: var(--table-body-cell-hover);
 }
 tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell:nth-child(even) {
-  background-color: var(--tds-table-zebra-mode-backround);
+  background-color: var(--table-zebra-mode);
 }
 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);
+  background-color: var(--table-body-cell-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;

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

@@ -1,10 +1,17 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host(.tds-table__body-cell) {
   box-sizing: border-box;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  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);
   display: table-cell;
   box-sizing: border-box;
-  color: var(--tds-table-color);
+  color: var(--table-text);
   padding: var(--tds-spacing-element-16);
   min-width: 192px;
   vertical-align: top;
@@ -16,7 +23,7 @@
 }
 
 :host(.tds-table__body-cell--hover) {
-  background-color: var(--tds-table-body-cell-background-hover);
+  background-color: var(--table-body-cell-hover);
 }
 
 :host(.tds-table__compact) {
@@ -24,7 +31,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-body-input-wrapper/table-body-input-wrapper.css

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   position: relative;
 }
@@ -14,7 +17,7 @@
   display: inline-block;
 }
 :host(:hover) ::slotted(input:not(:focus)) {
-  background-color: var(--tds-table-input-background-hover);
+  background-color: var(--table-input-hover);
 }
 
 tds-icon.edit-icon {
@@ -27,12 +30,16 @@ tds-icon.edit-icon {
 }
 
 ::slotted(input) {
+  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);
   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);
+  color: var(--table-text);
   background-color: transparent;
   height: 48px;
   border-radius: 0;
@@ -43,16 +50,18 @@ tds-icon.edit-icon {
 }
 
 ::slotted(input)::placeholder {
-  color: var(--tds-table-color);
+  color: var(--table-text);
 }
 
 ::slotted(input:disabled) {
-  background-color: var(--tds-table-input-background-disabled);
+  background-color: var(--table-input-disabled);
+  cursor: not-allowed;
+  color: var(--table-input-text-disabled);
 }
 
 ::slotted(input:focus) {
   outline: none;
-  background-color: var(--tds-table-input-background-focus);
+  background-color: var(--table-input-focus);
   border-bottom: 2px solid var(--tds-text-field-bar);
 }
 

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

@@ -85,7 +85,7 @@ export class TdsTableBodyInputWrapper {
                 '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", { key: 'ef7332417d9f9c0c2e2e9f4b030b84b0f67b251a', onSlotchange: () => this.handleSlotChange() }), this.showIcon && h("tds-icon", { key: '102e26b6821c0987244a7452341865259ce5f5d7', class: "edit-icon", slot: "icon", size: "16px", name: "edit" })));
     }
     static get is() { return "tds-table-body-input-wrapper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,10 +1,10 @@
 :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);
+  border-bottom: 1px solid var(--table-divider);
+  background-color: var(--table-body-row);
   transition: background-color 200ms ease;
-  color: var(--tds-table-color);
+  color: var(--table-text);
 }
 :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) {

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: 'e9e619ee732dc9d3f3f34cc47abf84ae1d194e1d', 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: 'b8be33901f5097ae612521cda831db3c5ff7334a', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '62b918b9aca497c5187a90ffbe8a91ac3b83c1f5', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '570b47dae5bae13f75b7cab00a1b8b2c51912cd5' })));
     }
     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

@@ -8,17 +8,17 @@
 :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);
+  border-bottom: 1px solid var(--table-divider);
+  background-color: var(--table-body-row);
   transition: background-color 200ms ease;
-  color: var(--tds-table-color);
+  color: var(--table-text);
 }
 :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;
@@ -40,7 +40,8 @@
 }
 :host .tds-table__expand-control-container .tds-table__expand-input:focus {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host .tds-table__expand-control-container .tds-expendable-row-icon {
   height: 16px;
@@ -53,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 {
   max-width: 1px;
   overflow: auto;
   padding: 16px 16px 16px 66px;
-  color: var(--tds-table-color);
+  color: var(--table-text);
 }
 :host .tds-table__row-expand .tds-table__cell-expand--overflow-visible {
   overflow: visible;
@@ -69,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;
 }
 
@@ -91,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: 'da3c577b253c47cd33ee07d3d028efd923fdb25d', 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: '7f97fa880a101483167624cfc75d522444ad0824', 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: 'e51d8a91442882c1ae412d32524fdc7d1db32714', 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: '4ad4a3c78f1494f27874b305b1c04a4ed4a0bf5c', class: "tds-table__expand-control-container" }, h("input", { key: '853ffba9075c6b4e78f79fe965cb52a71b1db8dd', 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: '870e9118534a8bd6772d3edc81ed6b58326ea56d', class: "tds-expendable-row-icon" }, h("svg", { key: 'a09133d67f9b768747da1c962e21107c0e6403c1', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '32d527f58e37c9fd797fd8437eb55dd5ae65495b', "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: 'd4be14761d18b718cf976749771c3252b7f3d873' })), h("tr", { key: '58c0d4956ff101d90ac48efe2fe748efa1b4d6b9', 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: '29264749d12132c22ec96574eaeb8d2384ad653c', 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: 'd11b97f03ac06b1f1d64c183619bf56e62b064e8', style: {
                 overflow: this.overflow,
-            } }, h("slot", { key: '6bbc0eeca7b7a654da9c1b7da6992aa8928e1974', name: "expand-row" }))))));
+            } }, h("slot", { key: 'c2feed89d38a97a47a0f07823ab4bca9bb8ae283', 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);
@@ -35,23 +38,27 @@
   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);
+  color: var(--table-text);
   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);
+  padding-right: var(--tds-spacing-element-8);
 }
 :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,9 +67,13 @@
   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 {
   display: flex;
@@ -75,14 +86,14 @@
   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);
+  color: var(--table-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 {
   cursor: default;
-  color: var(--tds-table-footer-page-selector-icon-disabled);
+  color: var(--table-icon-disabled);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover {
   background-color: transparent;
@@ -90,7 +101,7 @@
 :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);
+  fill: var(--table-text);
 }
 
 :host(.tds-table--compact) {
@@ -138,5 +149,6 @@ tds-dropdown:focus-within::after {
   border-radius: var(--tds-spacing-element-4);
   pointer-events: none;
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }

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: '7cfc3ea42663922b79d37538e0649c19ebc712ff', 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: '3ad36497b515800372f57dcaf92589620d69b42b', class: "tds-table__footer-row" }, h("td", { key: '622408b38d7ea483d50283679d8ee9d3a42098aa', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '3f119143b7000a692b4b9575eae1bc0c7909d681', class: "tds-table__pagination" }, h("div", { key: '8c4a3e17f23a3febf61702aef85b9e2eb6588612', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '04a80b602eb4af3cb4a5857152dfde0fc2763713', class: "rows-per-page" }, h("p", { key: '97e08ed3804491bbc8f3ed906fec42a02dfc4346' }, "Rows per page"), h("tds-dropdown", { key: 'df2b970e5175c21927fea11f22e991c50f998c25', 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: '22ed5e4131d22d961f6742c8fa21c648b5738de5', class: "tds-table__page-selector" }, h("input", { key: 'bc43dd6fed5f554013872f9774c11da89be10a2f', 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: '6c4ccd34133a5b14a8d3bbeb47a6c75c7604fcb0', class: "tds-table__footer-text" }, "of ", h("span", { key: 'c136a3bbb26e0d915d4a009c85b9b2c03f3cf018' }, this.pages), " pages"), h("button", { key: '16dafa158dc8181c56031cad5253a36104ae2df5', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: 'f2a5edf16a2b164c2bd85801d2582f85c8d5aa22', name: "skip_backwards", size: "20px" })), h("button", { key: 'e7a73b61dfe85440cce8a76917bc68cde05241bd', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '55d7e648e0d731dec4e6aabe99d5e19a77d59d7b', name: "chevron_left", size: "20px" })), h("button", { key: '61856f668fed5d3085a9718204607f1e753fe7f1', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'f468fde63814f4f906b85390979aed45163f6705', name: "chevron_right", size: "20px" })), h("button", { key: '35cfa4a7f8f680abb7a77c035f4cc8a7920e5d67', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '44dba6b889241055ce393f021b1b68cb7ed5e162', 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);
   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);
+  color: var(--table-text);
+  background-color: var(--table-header);
+  border-bottom: 1px solid var(--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: '6f2fe80cd2493ad5c3bba50129c5d9f673e71897', 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: 'b409f610aca3da5fa322e7e69f6efc06ab82165a' }, this.multiselect && (h("th", { key: '89e063b17bc2fa11ba2425b88d7a4896deef164d', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: 'eb44702a1169731a5587adaf7f4d0a28beb4b6db', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '5a3bb99a515fb6e87f39de70e530a67c10c3e2f7', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '8463b7990b37ffb6eb36eaffe9e3f3e159fdf5ba', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '2f31f807f5f3744ffe05c0eebac93c6c8374b046' }))));
     }
     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);
   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);
+  color: var(--table-text);
+  background-color: var(--table-header);
+  border-bottom: 1px solid var(--table-divider);
   padding: 0;
   height: 48px;
   min-width: 192px;
@@ -36,22 +43,27 @@
   height: 100%;
   padding: 0 16px;
   background-color: transparent;
+  color: var(--table-text);
   border: none;
   cursor: pointer;
   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: 2px solid var(--table-header-button-focus);
   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);
   text-align: left;
-  color: var(--tds-table-header-btn-color);
+  color: var(--table-text);
 }
 :host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-icon {
   /* not to shrink on lot of text */
@@ -61,17 +73,17 @@
   opacity: 0;
   transform-origin: center;
   transition: opacity 200ms ease-in, transform 200ms ease;
-  fill: var(--tds-table-color);
+  fill: var(--table-text);
 }
 :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 +97,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: '9306f586f70affe65e63f3c7545285cf58e05a92', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,