@scania/tegel 1.32.2-multibrand-beta.5 → 1.33.0

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

@@ -1,6 +1,3 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: table-footer-group;
@@ -10,8 +7,8 @@
   box-sizing: border-box;
 }
 :host .tds-table__footer-row {
-  background-color: var(--table-footer);
-  color: var(--table-text);
+  background-color: var(--tds-table-footer-background);
+  color: var(--tds-table-color);
 }
 :host .tds-table__footer-cell {
   padding: 0 var(--tds-spacing-element-16);
@@ -38,27 +35,23 @@
   margin-right: var(--tds-spacing-element-8);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-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);
-  background-color: var(--table-footer-page-selector-input);
-  color: var(--table-text);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  background-color: var(--tds-table-footer-page-selector-input-background);
+  color: var(--tds-table-color);
   width: 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-right: var(--tds-spacing-element-8);
+  padding-left: var(--tds-spacing-element-16);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover {
-  background-color: var(--table-footer-page-selector-input-hover);
+  background-color: var(--tds-table-footer-page-selector-input-background-hover);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled {
-  color: var(--table-footer-page-selector-input-color-disabled);
+  color: var(--tds-table-footer-page-selector-input-color-disabled);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake {
   animation: tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
@@ -67,13 +60,9 @@
   perspective: 1000px;
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text {
-  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;
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  padding: 1px 8px 0 0;
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn {
   display: flex;
@@ -86,14 +75,14 @@
   width: var(--tds-spacing-element-32);
   border-radius: var(--tds-spacing-element-4);
   transition: background-color 250ms ease;
-  color: var(--table-icon);
+  color: var(--tds-table-footer-page-selector-icon);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover {
-  background-color: var(--table-footer-button-hover);
+  background-color: var(--tds-table-footer-btn-hover);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled {
   cursor: default;
-  color: var(--table-icon-disabled);
+  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;
@@ -101,7 +90,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(--table-text);
+  fill: var(--tds-table-color);
 }
 
 :host(.tds-table--compact) {
@@ -137,18 +126,4 @@
   40%, 60% {
     transform: translate3d(4px, 0, 0);
   }
-}
-tds-dropdown:focus-within::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background-color: transparent;
-  border-radius: var(--tds-spacing-element-4);
-  pointer-events: none;
-  outline: 2px solid var(--tds-blue-400);
-  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: '7cfc3ea42663922b79d37538e0649c19ebc712ff', class: {
+        return (h(Host, { key: 'fd6a5604adc116a78c9723ce3f16535ea6fa7edf', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, 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) => {
+            }, 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) => {
             return (h("tds-dropdown-option", { value: `${value}` }, value));
-        }))))), 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" })))))))));
+        }))))), 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" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,3 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: table-header-group;
@@ -9,17 +6,13 @@
   box-sizing: border-box;
 }
 :host .tds-table__header-cell--checkbox {
-  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);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
   display: table-cell;
   text-align: left;
-  color: var(--table-text);
-  background-color: var(--table-header);
-  border-bottom: 1px solid var(--table-divider);
+  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;
@@ -57,7 +50,7 @@
   transform: rotate(180deg);
 }
 :host ::slotted(tds-header-cell:hover) {
-  background-color: var(--table-header-hover);
+  background-color: var(--tds-table-header-background-hover);
 }
 
 :host(.tds-table--compact) .tds-table__header-cell--checkbox {
@@ -68,7 +61,7 @@
 }
 
 :host(.tds-table--divider) .tds-table__header-cell--checkbox {
-  border-right: 1px solid var(--table-divider);
+  border-right: 1px solid var(--tds-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: '6f2fe80cd2493ad5c3bba50129c5d9f673e71897', class: {
+        return (h(Host, { key: '968ef371db492d005ac3156d8b4a15de0966d117', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, 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' }))));
+            } }, 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' }))));
     }
     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,19 +1,12 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host(.tds-table__header-cell) {
   box-sizing: border-box;
-  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);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
   display: table-cell;
   text-align: left;
-  color: var(--table-text);
-  background-color: var(--table-header);
-  border-bottom: 1px solid var(--table-divider);
+  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;
@@ -43,27 +36,22 @@
   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(--table-header-button-focus);
+  outline: 2px solid var(--tds-table-header-btn-focus);
   outline-offset: -2px;
 }
 :host(.tds-table__header-cell--sortable) .tds-table__header-button:focus .tds-table__header-button-icon {
   opacity: 1;
 }
 :host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-text {
-  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);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
   text-align: left;
-  color: var(--table-text);
+  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 */
@@ -73,17 +61,17 @@
   opacity: 0;
   transform-origin: center;
   transition: opacity 200ms ease-in, transform 200ms ease;
-  fill: var(--table-text);
+  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(--table-header-button);
+  background-color: var(--tds-table-header-btn-background);
 }
 :host(.tds-table__header-cell--is-sorted) .tds-table__header-button:hover {
-  background-color: var(--table-header-button-hover);
+  background-color: var(--tds-table-header-btn-background-hover);
 }
 :host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon {
   opacity: 1;
@@ -97,7 +85,7 @@
 }
 
 :host(.tds-table--divider) {
-  border-right: 1px solid var(--table-divider);
+  border-right: 1px solid var(--tds-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: '9306f586f70affe65e63f3c7545285cf58e05a92', class: {
+        return (h(Host, { key: 'c832982801653ad4ed4be858fa88f6d3d3de02ef', 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,6 +1,3 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   position: relative;
 }
@@ -13,7 +10,7 @@
   display: inline-block;
 }
 :host(.focused-input-wrapper) ::slotted(input:not(:focus)) {
-  background-color: var(--table-input-hover);
+  background-color: var(--tds-table-input-background-hover);
 }
 
 :host(.show-icon) ::slotted(input) {
@@ -21,21 +18,17 @@
 }
 
 tds-icon.search-icon {
-  color: var(--table-input-header-icon);
+  color: var(--tds-table-input-header-icon);
   position: absolute;
   left: 15px;
   top: 1px;
 }
 
 ::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;
-  color: var(--table-text);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-table-color);
   padding-left: var(--tds-spacing-element-16);
   padding-right: var(--tds-spacing-element-16);
   height: 48px;
@@ -46,12 +39,12 @@ tds-icon.search-icon {
 }
 
 ::slotted(input)::placeholder {
-  color: var(--table-input-header-placeholder);
+  color: var(--tds-table-input-header-placeholder);
 }
 
 ::slotted(input:focus) {
   outline: none;
-  background-color: var(--table-input-header-focus);
+  background-color: var(--tds-table-input-header-background-focus);
   border-bottom: 2px solid var(--tds-text-field-bar);
 }
 

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: '5a8057029e82d223a8174544fd374b8e3151d624', class: {
+        return (h(Host, { key: 'e92640dc4c88b52574960d7234b377d7e5eaaa8e', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,

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

@@ -1,12 +1,9 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: table-caption;
   position: relative;
-  background-color: var(--table-toolbar);
-  color: var(--table-text);
+  background-color: var(--tds-table-toolbar-background);
+  color: var(--tds-table-color);
   padding: 0 var(--tds-spacing-element-16);
   height: 64px;
   border-top-left-radius: 4px;
@@ -25,12 +22,8 @@
   display: flex;
 }
 :host .tds-table__title {
-  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);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
   padding-top: var(--tds-spacing-element-16);
   text-align: left;
   margin-right: var(--tds-spacing-element-8);
@@ -67,19 +60,15 @@
 }
 :host .tds-table__searchbar:focus-within, :host .tds-table__searchbar.tds-table__searchbar--active {
   width: 208px;
-  background-color: var(--table-toolbar-searchbar);
+  background-color: var(--tds-table-toolbar-searchbar-background);
 }
 :host .tds-table__searchbar:focus-within:hover, :host .tds-table__searchbar.tds-table__searchbar--active:hover {
-  background-color: var(--table-toolbar-searchbar);
+  background-color: var(--tds-table-toolbar-searchbar-background);
 }
 :host .tds-table__searchbar .tds-table__searchbar-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);
-  color: var(--table-text);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-table-color);
   z-index: 1;
   width: 100%;
   height: 100%;
@@ -90,10 +79,10 @@
   cursor: pointer;
 }
 :host .tds-table__searchbar .tds-table__searchbar-input :focus {
-  background-color: var(--table-toolbar-searchbar);
+  background-color: var(--tds-table-toolbar-searchbar-background);
 }
 :host .tds-table__searchbar:hover {
-  background-color: var(--table-toolbar-searchbar-hover);
+  background-color: var(--tds-table-toolbar-searchbar-background-hover);
 }
 :host .tds-table__searchbar .tds-table__searchbar-icon {
   z-index: 0;

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

@@ -68,10 +68,10 @@ export class TdsTableToolbar {
         return styles;
     }
     render() {
-        return (h(Host, { key: '7cf6fffdb988f525b5ff9fca25588f2b4770f9df', class: {
+        return (h(Host, { key: '76acde1b3c55f421cedae9bf932f923813272fe3', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: 'd071dcc92ba9d045c7322eec7bde32afc16616d6', class: "tds-table__upper-bar-flex" }, h("div", { key: '9cee0628c8c81614fb43ec2453644f7dd5001f54', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: '90949e76eb225021d4dd9645968bd544b6ec9e71', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: 'fe27e4a5f5fb81040deb6df122fafa9172fc2c54', name: "start" })), h("div", { key: '2d146dfb716542c6c44a67404e2b537dfd730887', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'a2aee3c2a1dc9873c66e9e916af036a5e4851cf5', class: "tds-table__searchbar" }, h("input", { key: 'a8d9cc52b1e90d43ef9be1d198962d2c8bc54ea8', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '77bf8cff14864f3f36a2e94d34cbcbba361b700c', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: 'a4de427ffa05d9d08b183ecedfd6105abe9d9e35', name: "search", size: "20px" })))), h("slot", { key: '95c49753b2cc07b4dc211dc8b18ae88eb1170838', name: "end" })))));
+            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: 'e6fe2f411ebde77befeb99992b5157bba3651fbf', class: "tds-table__upper-bar-flex" }, h("div", { key: 'f61dc1de54a73c28a2ef10dcae2a5a629ae76c57', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: 'ca50269d08eab742cb759d371937739fd0a87eff', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '275b233ff233a9f90d936553fa31015f72f21899', name: "start" })), h("div", { key: 'd2ed2b7918e8f8d8e23c34bd8114ee1e69cdb681', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'cd0bd112e3ab6b31c96e10bc4b2eb32715766d58', class: "tds-table__searchbar" }, h("input", { key: '3dbcdf5394477fb55d41c2ee0ddcea1e50ffcd64', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '0a34bfd7cd50c88604af01dfc9bef1adae7d8999', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '98a376c6db7d249e060dafffef18c9345730e25c', name: "search", size: "20px" })))), h("slot", { key: 'e4400d9ddb0f6435315569e1f64f34bc04d8054f', name: "end" })))));
     }
     static get is() { return "tds-table-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.css

@@ -24,9 +24,10 @@
   border-left-color: transparent;
 }
 :host ::slotted(*:focus-visible) {
-  outline: 2px solid var(--tds-blue-400);
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
 :host div:not(.selected) {
   background-color: var(--tds-folder-tab-background);

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.js

@@ -35,10 +35,10 @@ export class TdsFolderTab {
         }
     }
     render() {
-        return (h(Host, { key: '584a1fcf43299d27e3fb2150214830c7964e3895', "aria-selected": this.selected }, h("div", { key: 'ed0f0d8acafaf35c36a22d34ef4c9ac240ba5311', class: {
+        return (h(Host, { key: '19a42f7143a8f32130642bd50dd6817f871fdf20', "aria-selected": this.selected }, h("div", { key: '51bef3bebff5e13d7c949529919865780d8b33de', class: {
                 selected: this.selected,
                 disabled: this.disabled,
-            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: 'ac2fb5ed4062e9e83297e9a6c2f3ea6b9f514b06' }))));
+            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '2b661d3518f047f7bd0e50a121987eb62c5d42e8' }))));
     }
     static get is() { return "tds-folder-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/folder-tabs/folder-tabs.css

@@ -55,9 +55,10 @@
 }
 :host .scroll-right-button:focus,
 :host .scroll-left-button:focus {
-  outline: 2px solid var(--tds-blue-400);
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
 :host .scroll-right-button svg,
 :host .scroll-left-button svg {

package/dist/collection/components/tabs/folder-tabs/folder-tabs.js

@@ -162,9 +162,9 @@ export class TdsFolderTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'f97a75dc1b7bf12757a7e96e4075387c27459e7e', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '92299f0dc356d448d901569d314fa6afaa21fdb1', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'c56bf987e23ade8b30cd2470ab1ed0f4273bd191', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'afab8a86427918d5ac4bbc17dd2a436a986df577', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: 'f00e92acb5a9071173c25d2c8334fa32cc32cca8', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: 'eb113eeecf5c89a9b6e3e3c4306f3557c574b3e7', name: "chevron_left", size: "20px" })), h("slot", { key: '4136a2b52af81b9406cffc74a6ad84f428d18273', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '0d5177b9eff827616a3252992a6dc7e79e58f5e1', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'a575af766f02d2427760aa1f5911e63f32c28d1d', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: '0b82a953932e888d05478d82944c90768f97bb36', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '50cd22c5be43ae452e0896b449570774c3ab0151', name: "chevron_left", size: "20px" })), h("slot", { key: '3cb17dddc8592241c467167b3a0028355f2b7d5e', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '23c289b70d723b2d0705692835a510b8a650fcfa', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'fff2bfcbcf916d1b391aa25ee5f6fda3c8e63d23', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-folder-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.js

@@ -30,11 +30,11 @@ export class TdsInlineTab {
         }
     }
     render() {
-        return (h(Host, { key: 'a907b7c8f2bfcf9f4930fef152a9b6cb8b63c090', "aria-selected": this.selected }, h("div", { key: '6401ba8aaccdf59aaf457d3c6684e1f98119d25b', class: {
+        return (h(Host, { key: '496b56fa31a50e26ceea5275e29873d030ea2937', "aria-selected": this.selected }, h("div", { key: 'c67bfb892ea721b1ad329e00453fe62dcf4681c0', class: {
                 'inline-tab-item': true,
                 'selected': this.selected,
                 'disabled': this.disabled,
-            } }, h("slot", { key: '6bca555b29cac021978fcb5c9feacbc014c731b1' }))));
+            } }, h("slot", { key: 'bae7788e0625279f4eb82129da1256fbb7f1c95b' }))));
     }
     static get is() { return "tds-inline-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/inline-tabs/inline-tabs.css

@@ -67,9 +67,10 @@
 }
 :host .scroll-right-button:focus,
 :host .scroll-left-button:focus {
-  outline: 2px solid var(--tds-blue-400);
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
 :host .scroll-right-button svg,
 :host .scroll-left-button svg {

package/dist/collection/components/tabs/inline-tabs/inline-tabs.js

@@ -169,9 +169,9 @@ export class TdsInlineTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'ffa1e0a85855080f19e5beadf00dd608728574f1', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '98bc41d5bc921882facd666c207e57c1d5b1a087', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '9fa2d8cb54ac480fb5875432440506b0c12efaa5', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'aecb68d56088f84e271f3c829c84da4e732df9b8', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'd500b299f2758ec13c4451859c51e9a961c42039', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'd84805f953384f3f59ec26ff74b79b84885bb4d4', name: "chevron_left", size: "20px" })), h("slot", { key: 'd392fafeb4bf2f7bb129a2e55eddee128ebd2ce7', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'ceada0ebd126600199b675bc5251762e29f6b4d6', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '9175ce89c1c65a3ab7cd779483020555161e530f', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '9b97d342cfe66209063b504b49480d587cd626d5', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'a447ce946eb5bc02a2527f210322aa76ca5ad5b8', name: "chevron_left", size: "20px" })), h("slot", { key: '1df34e68bbea35ef76de48e7b8fe96b3a8655792', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '7c753dd66c173265c32a7b49197df12fbecc78d1', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'f76934b67470db5ff6ddb6fbae86f87fd3d0bdee', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-inline-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.js

@@ -30,8 +30,8 @@ export class TdsNavigationTab {
         }
     }
     render() {
-        return (h(Host, { key: 'dc5a2d7616f927f2519664e4f98674b995889789' }, h("div", { key: '0a6aab0c2eeb77b1376a0d0abfbd4d825cf9449e', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '6525c55249fb9fff0db0b1fc8140339f7550e838' }))));
+        return (h(Host, { key: '28ba6f5bedc4f2a31e5011e37bf92d3b38fa8abe' }, h("div", { key: 'ac5aad203d8a13dc42a8f9e99b2ccdd7c784c9af', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'da6292612753748f6cac68e0b282ecde642cb5b5' }))));
     }
     static get is() { return "tds-navigation-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css

@@ -67,9 +67,10 @@
 }
 :host .scroll-right-button:focus,
 :host .scroll-left-button:focus {
-  outline: 2px solid var(--tds-blue-400);
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
 :host .scroll-right-button svg,
 :host .scroll-left-button svg {

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js

@@ -169,15 +169,15 @@ export class TdsNavigationTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '510a2d554f93a011f5281730aa6ef7a91112f683', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '56cebbe8cc41c197c5c0ff521e3cad213355907c', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '2fc278cacc04614ca43b70f52b12f79b31227fbb', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '50357810903ea3bff83fde4478960de0866c7c15', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '74a5fb3b9b09987d7e9f368ecdf4dc3af49e9128', "aria-label": this.tdsScrollLeftAriaLabel, class: {
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'b5b05a2f9bce1618c71594cf388dc83efce98915', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'a14c88213417a161d90cb3db00105c63e5aab2e0', name: "chevron_left", size: "20px" })), h("slot", { key: 'c8eb07f136a9057a7962957a0bcc8bf1ababb579', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '7a681cbdbacc3f2e536035910d3f486cdff738f0', "aria-label": this.tdsScrollRightAriaLabel, class: {
+            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'aad19852d36ff8e1642ba464f9618a57ff37169c', name: "chevron_left", size: "20px" })), h("slot", { key: '3dcf0d7e6900df33a69863868a3a48dcb4aa8141', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '352539955226aecf92deb0c0db83c42a5b021e43', "aria-label": this.tdsScrollRightAriaLabel, class: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '93e3d0530d4402b249f8f3da4541bac913b15ff6', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '0e3fe531374dd82b6ee5de1a5a1bea4a38e03500', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-navigation-tabs"; }
     static get encapsulation() { return "shadow"; }