@scania/tegel 1.34.0-multibrand-beta.6 → 1.35.0

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

@@ -1,13 +1,10 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   box-sizing: border-box;
-  background-color: var(--table-toolbar);
-  color: var(--table-text);
-  padding: 0 var(--tds-spacing-element-16);
   display: table-caption;
   position: relative;
+  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;
   border-top-right-radius: 4px;
@@ -25,15 +22,11 @@
   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);
-  margin-right: var(--tds-spacing-element-8);
   text-align: left;
+  margin-right: var(--tds-spacing-element-8);
 }
 :host .tds-table__actionbar,
 :host slot[name=end]::slotted(*),
@@ -53,12 +46,12 @@
   background-color: transparent;
 }
 :host .tds-table__searchbar::after {
-  background-color: var(--table-toolbar-searchbar-border-bottom);
   content: "";
   width: 100%;
   height: 2px;
   position: absolute;
   bottom: 0;
+  background-color: var(--tds-blue-400);
   transform: scaleX(0);
   transition: transform 150ms ease;
 }
@@ -66,20 +59,16 @@
   transform: scaleX(100%);
 }
 :host .tds-table__searchbar:focus-within, :host .tds-table__searchbar.tds-table__searchbar--active {
-  background-color: var(--table-toolbar-searchbar);
   width: 208px;
+  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

@@ -1,6 +1,3 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   box-sizing: border-box;
   position: relative;
@@ -10,15 +7,12 @@
 }
 :host ::slotted(*) {
   all: unset;
-  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);
   min-width: 142px;
   display: block;
   width: calc(100% - 32px);
+  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
+  font: var(--tds-headline-07) !important;
+  letter-spacing: var(--tds-headline-07-ls) !important;
   cursor: pointer;
   padding: 16px;
   white-space: nowrap;
@@ -30,30 +24,29 @@
   border-left-color: transparent;
 }
 :host ::slotted(*:focus-visible) {
-  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: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
-  box-shadow: none;
-  outline-offset: -4px;
+  z-index: 1;
 }
 :host div:not(.selected) {
-  background-color: var(--folder-tab-surface);
+  background-color: var(--tds-folder-tab-background);
 }
 :host div:not(.selected) ::slotted(*) {
-  border-left-color: var(--folder-tab-divider-text);
-  border-top: 2px solid var(--folder-tab-surface);
-  color: var(--folder-tab-item-text);
+  border-left-color: var(--tds-folder-tab-divider-color);
+  border-top: 2px solid var(--tds-folder-tab-background);
+  color: var(--tds-folder-tab-item-color);
 }
 :host div:not(.selected):hover:not(.disabled) {
-  background-color: var(--folder-tab-surface-hover);
+  background-color: var(--tds-folder-tab-background-hover);
   cursor: pointer;
 }
 :host div:not(.selected):hover:not(.disabled) ::slotted(*) {
-  border-top-color: var(--folder-tab-surface-hover);
-  color: var(--folder-tab-text);
+  border-top-color: var(--tds-folder-tab-background-hover);
+  color: var(--tds-folder-tab-color);
 }
 :host div:not(.selected).disabled ::slotted(*) {
-  color: var(--folder-tab-item-text-disabled);
+  color: var(--tds-folder-tab-item-color-disabled);
 }
 :host div:not(.selected).disabled ::slotted(*:focus-visible) {
   outline: none;
@@ -65,12 +58,12 @@
   content: none;
 }
 :host .selected {
-  background-color: var(--folder-tab-surface-selected);
-  border-top: 2px solid var(--folder-tab-border-selected);
+  background-color: var(--tds-folder-tab-background-selected);
+  border-top: 2px solid var(--tds-folder-tab-border-selected);
 }
 :host .selected::after {
-  background-color: var(--folder-tab-surface-selected);
   content: " ";
+  background-color: var(--tds-folder-tab-background-selected);
   width: 1px;
   top: 0;
   bottom: 0;
@@ -80,7 +73,7 @@
   z-index: 1;
 }
 :host .selected ::slotted(*) {
-  color: var(--folder-tab-text);
+  color: var(--tds-folder-tab-color);
 }
 
 :host(.first) :not(.selected) ::slotted(*) {

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

@@ -25,12 +25,12 @@
 }
 :host .scroll-right-button,
 :host .scroll-left-button {
-  background-color: var(--folder-tabs-scroll-button-surface);
-  color: var(--folder-tabs-scroll-button-text);
   height: 50px;
+  color: var(--tds-folder-tabs-scroll-btn-color);
   cursor: pointer;
   border: 0;
   width: 0;
+  background-color: var(--tds-folder-tabs-scroll-btn-background);
   display: none;
   justify-content: center;
   align-items: center;
@@ -45,7 +45,22 @@
   opacity: 1;
   pointer-events: all;
 }
+:host .scroll-right-button:hover,
+:host .scroll-left-button:hover {
+  background-color: var(--tds-folder-tabs-scroll-btn-background-hover);
+}
+:host .scroll-right-button:active,
+:host .scroll-left-button:active {
+  background-color: var(--tds-folder-tabs-scroll-btn-background-active);
+}
+:host .scroll-right-button:focus,
+:host .scroll-left-button:focus {
+  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 {
-  fill: var(--folder-tabs-scroll-button-text);
+  fill: var(--tds-folder-tabs-scroll-btn-color);
 }

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.css

@@ -1,6 +1,3 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: block;
@@ -11,13 +8,10 @@
 }
 :host ::slotted(*) {
   all: unset;
-  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(--inline-tabs-tab);
+  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
+  font: var(--tds-headline-07) !important;
+  letter-spacing: var(--tds-headline-07-ls) !important;
+  color: var(--tds-navigation-tabs-tab-color);
   text-decoration: none;
   display: block;
   position: relative;
@@ -29,16 +23,13 @@
   padding: 20px 4px;
 }
 :host ::slotted(*:focus-visible)::before {
-  outline: 2px solid var(--inline-tabs-tab-focus);
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 20px;
   bottom: 20px;
-}
-:host ::slotted(*:hover) {
-  color: var(--inline-tabs-tab-hover);
+  outline: 2px solid var(--tds-blue-400);
 }
 :host .inline-tab-item:not(.selected)::after {
   width: 0%;
@@ -55,7 +46,6 @@
   width: 100%;
 }
 :host .inline-tab-item::after {
-  background-color: var(--inline-tabs-tab-indicator-hover);
   content: " ";
   position: absolute;
   bottom: 0;
@@ -65,20 +55,21 @@
   width: 0%;
   margin-right: auto;
   height: 2px;
+  background-color: var(--tds-inline-tabs-tab-indicator-background-hover);
   z-index: 1;
 }
 :host .selected ::slotted(*) {
-  color: var(--inline-tabs-tab-selected);
+  color: var(--tds-inline-tabs-tab-color-selected);
 }
 :host .selected::after {
-  background-color: var(--inline-tabs-tab-indicator-active);
   width: 100%;
+  background-color: var(--tds-inline-tabs-tab-indicator-background-active);
 }
 :host .disabled {
-  color: var(--inline-tabs-tab-disabled);
+  color: var(--tds-inline-tabs-tab-color-disabled);
 }
 :host .disabled ::slotted(*) {
-  color: var(--inline-tabs-tab-disabled);
+  opacity: var(--tds-inline-tabs-tab-color-opacity-disabled);
 }
 :host .disabled::after {
   content: none;

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

@@ -1,15 +1,16 @@
 :host {
   box-sizing: border-box;
   display: flex;
+  background-color: var(--tds-inline-tabs-background);
   position: relative;
 }
 :host * {
   box-sizing: border-box;
 }
 :host::after {
-  border-bottom: 1px solid var(--inline-tabs-horizontal-divider);
   content: " ";
   display: block;
+  border-bottom: 1px solid var(--tds-inline-tabs-horizontal-divider-background);
   left: 0;
   right: 0;
   bottom: 0;
@@ -37,11 +38,11 @@
 }
 :host .scroll-right-button,
 :host .scroll-left-button {
-  background-color: var(--inline-tabs-scroll-button);
-  color: var(--inline-tabs-scroll-button-text);
+  color: var(--tds-folder-tabs-scroll-btn-color);
   cursor: pointer;
   border: 0;
   width: 0;
+  background-color: var(--tds-inline-tabs-scroll-btn-background);
   display: none;
   justify-content: center;
   align-items: center;
@@ -56,7 +57,22 @@
   opacity: 1;
   pointer-events: all;
 }
+:host .scroll-right-button:hover,
+:host .scroll-left-button:hover {
+  background-color: var(--tds-folder-tabs-scroll-btn-background-hover);
+}
+:host .scroll-right-button:active,
+:host .scroll-left-button:active {
+  background-color: var(--tds-folder-tabs-scroll-btn-background-active);
+}
+:host .scroll-right-button:focus,
+:host .scroll-left-button:focus {
+  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 {
-  fill: var(--inline-tabs-scroll-button-text);
+  fill: var(--tds-folder-tabs-scroll-btn-color);
 }

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.css

@@ -1,6 +1,3 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: block;
@@ -10,13 +7,10 @@
 }
 :host ::slotted(*) {
   all: unset;
-  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(--navigation-tabs-tab);
+  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
+  font: var(--tds-headline-07) !important;
+  letter-spacing: var(--tds-headline-07-ls) !important;
+  color: var(--tds-navigation-tabs-tab-color) !important;
   text-decoration: none;
   display: block;
   position: relative;
@@ -28,19 +22,13 @@
   padding: 26px 4px;
 }
 :host ::slotted(*:focus-visible)::before {
-  outline: 2px solid var(--color-foreground-border-accent-focus);
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 26px;
   bottom: 26px;
-}
-:host ::slotted(*:hover) {
-  color: var(--navigation-tabs-tab-hover);
-}
-:host ::slotted(*:focus-visible) {
-  color: var(--navigation-tabs-tab-focus);
+  outline: 2px solid var(--tds-blue-400);
 }
 :host .navigation-tab-item:not(.selected)::after {
   width: 0%;
@@ -57,7 +45,6 @@
   width: 100%;
 }
 :host .navigation-tab-item::after {
-  background-color: var(--navigation-tabs-tab-indicator-hover);
   content: " ";
   position: absolute;
   bottom: 0;
@@ -67,20 +54,21 @@
   width: 0%;
   margin-right: auto;
   height: 2px;
+  background-color: var(--tds-navigation-tabs-tab-indicator-background-hover);
   z-index: 1;
 }
 :host .selected ::slotted(*) {
-  color: var(--navigation-tabs-tab-selected);
+  color: var(--tds-navigation-tabs-tab-color-selected);
 }
 :host .selected::after {
-  background-color: var(--navigation-tabs-tab-indicator-active);
   width: 100%;
+  background-color: var(--tds-navigation-tabs-tab-indicator-background-active);
 }
 :host .disabled {
-  color: var(--navigation-tabs-tab-disabled);
+  color: var(--tds-navigation-tabs-tab-color-disabled);
 }
 :host .disabled ::slotted(*) {
-  color: var(--navigation-tabs-tab-disabled);
+  opacity: var(--tds-navigation-tabs-tab-color-opacity-disabled);
 }
 :host .disabled::after {
   content: none;

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

@@ -1,16 +1,16 @@
 :host {
   box-sizing: border-box;
-  background-color: var(--navigation-tabs);
   display: flex;
+  background-color: var(--tds-navigation-tabs-background);
   position: relative;
 }
 :host * {
   box-sizing: border-box;
 }
 :host::after {
-  border-bottom: 1px solid var(--navigation-tabs-horizontal-divider);
   content: " ";
   display: block;
+  border-bottom: 1px solid var(--tds-navigation-tabs-horizontal-divider-background);
   left: 0;
   right: 0;
   bottom: 0;
@@ -38,11 +38,11 @@
 }
 :host .scroll-right-button,
 :host .scroll-left-button {
-  background-color: var(--navigation-tabs-scroll-button);
-  color: var(--navigation-tabs-scroll-button-icon);
+  color: var(--tds-folder-tabs-scroll-btn-color);
   cursor: pointer;
   border: 0;
   width: 0;
+  background-color: var(--tds-inline-tabs-scroll-btn-background);
   display: none;
   justify-content: center;
   align-items: center;
@@ -57,7 +57,22 @@
   opacity: 1;
   pointer-events: all;
 }
+:host .scroll-right-button:hover,
+:host .scroll-left-button:hover {
+  background-color: var(--tds-folder-tabs-scroll-btn-background-hover);
+}
+:host .scroll-right-button:active,
+:host .scroll-left-button:active {
+  background-color: var(--tds-folder-tabs-scroll-btn-background-active);
+}
+:host .scroll-right-button:focus,
+:host .scroll-left-button:focus {
+  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 {
-  fill: var(--navigation-tabs-scroll-button-color);
+  fill: var(--tds-folder-tabs-scroll-btn-color);
 }

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"; }