@scania/tegel 1.33.0 → 1.34.0-multibrand-beta.0

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

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: block;
@@ -8,10 +11,13 @@
 }
 :host ::slotted(*) {
   all: unset;
-  /* !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);
+  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);
   text-decoration: none;
   display: block;
   position: relative;
@@ -23,13 +29,16 @@
   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;
-  outline: 2px solid var(--tds-blue-400);
+}
+:host ::slotted(*:hover) {
+  color: var(--inline-tabs-tab-hover);
 }
 :host .inline-tab-item:not(.selected)::after {
   width: 0%;
@@ -46,6 +55,7 @@
   width: 100%;
 }
 :host .inline-tab-item::after {
+  background-color: var(--inline-tabs-tab-indicator-hover);
   content: " ";
   position: absolute;
   bottom: 0;
@@ -55,21 +65,20 @@
   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(--tds-inline-tabs-tab-color-selected);
+  color: var(--inline-tabs-tab-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(--tds-inline-tabs-tab-color-disabled);
+  color: var(--inline-tabs-tab-disabled);
 }
 :host .disabled ::slotted(*) {
-  opacity: var(--tds-inline-tabs-tab-color-opacity-disabled);
+  color: var(--inline-tabs-tab-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: '496b56fa31a50e26ceea5275e29873d030ea2937', "aria-selected": this.selected }, h("div", { key: 'c67bfb892ea721b1ad329e00453fe62dcf4681c0', class: {
+        return (h(Host, { key: 'a907b7c8f2bfcf9f4930fef152a9b6cb8b63c090', "aria-selected": this.selected }, h("div", { key: '6401ba8aaccdf59aaf457d3c6684e1f98119d25b', class: {
                 'inline-tab-item': true,
                 'selected': this.selected,
                 'disabled': this.disabled,
-            } }, h("slot", { key: 'bae7788e0625279f4eb82129da1256fbb7f1c95b' }))));
+            } }, h("slot", { key: '6bca555b29cac021978fcb5c9feacbc014c731b1' }))));
     }
     static get is() { return "tds-inline-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,16 +1,15 @@
 :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;
@@ -38,11 +37,11 @@
 }
 :host .scroll-right-button,
 :host .scroll-left-button {
-  color: var(--tds-folder-tabs-scroll-btn-color);
+  background-color: var(--inline-tabs-scroll-button);
+  color: var(--inline-tabs-scroll-button-text);
   cursor: pointer;
   border: 0;
   width: 0;
-  background-color: var(--tds-inline-tabs-scroll-btn-background);
   display: none;
   justify-content: center;
   align-items: center;
@@ -57,22 +56,7 @@
   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(--tds-folder-tabs-scroll-btn-color);
+  fill: var(--inline-tabs-scroll-button-text);
 }

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

@@ -169,9 +169,9 @@ export class TdsInlineTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '9fa2d8cb54ac480fb5875432440506b0c12efaa5', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'aecb68d56088f84e271f3c829c84da4e732df9b8', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'ffa1e0a85855080f19e5beadf00dd608728574f1', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '98bc41d5bc921882facd666c207e57c1d5b1a087', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, 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" })))));
+            }, 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" })))));
     }
     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,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: block;
@@ -7,10 +10,13 @@
 }
 :host ::slotted(*) {
   all: unset;
-  /* !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;
+  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);
   text-decoration: none;
   display: block;
   position: relative;
@@ -22,13 +28,19 @@
   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;
-  outline: 2px solid var(--tds-blue-400);
+}
+:host ::slotted(*:hover) {
+  color: var(--navigation-tabs-tab-hover);
+}
+:host ::slotted(*:focus-visible) {
+  color: var(--navigation-tabs-tab-focus);
 }
 :host .navigation-tab-item:not(.selected)::after {
   width: 0%;
@@ -45,6 +57,7 @@
   width: 100%;
 }
 :host .navigation-tab-item::after {
+  background-color: var(--navigation-tabs-tab-indicator-hover);
   content: " ";
   position: absolute;
   bottom: 0;
@@ -54,21 +67,20 @@
   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(--tds-navigation-tabs-tab-color-selected);
+  color: var(--navigation-tabs-tab-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(--tds-navigation-tabs-tab-color-disabled);
+  color: var(--navigation-tabs-tab-disabled);
 }
 :host .disabled ::slotted(*) {
-  opacity: var(--tds-navigation-tabs-tab-color-opacity-disabled);
+  color: var(--navigation-tabs-tab-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: '28ba6f5bedc4f2a31e5011e37bf92d3b38fa8abe' }, h("div", { key: 'ac5aad203d8a13dc42a8f9e99b2ccdd7c784c9af', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'da6292612753748f6cac68e0b282ecde642cb5b5' }))));
+        return (h(Host, { key: 'dc5a2d7616f927f2519664e4f98674b995889789' }, h("div", { key: '0a6aab0c2eeb77b1376a0d0abfbd4d825cf9449e', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '6525c55249fb9fff0db0b1fc8140339f7550e838' }))));
     }
     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 {
-  color: var(--tds-folder-tabs-scroll-btn-color);
+  background-color: var(--navigation-tabs-scroll-button);
+  color: var(--navigation-tabs-scroll-button-icon);
   cursor: pointer;
   border: 0;
   width: 0;
-  background-color: var(--tds-inline-tabs-scroll-btn-background);
   display: none;
   justify-content: center;
   align-items: center;
@@ -57,22 +57,7 @@
   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(--tds-folder-tabs-scroll-btn-color);
+  fill: var(--navigation-tabs-scroll-button-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: '2fc278cacc04614ca43b70f52b12f79b31227fbb', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '50357810903ea3bff83fde4478960de0866c7c15', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '510a2d554f93a011f5281730aa6ef7a91112f683', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '56cebbe8cc41c197c5c0ff521e3cad213355907c', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'b5b05a2f9bce1618c71594cf388dc83efce98915', "aria-label": this.tdsScrollLeftAriaLabel, class: {
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '74a5fb3b9b09987d7e9f368ecdf4dc3af49e9128', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, 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: {
+            }, 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: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '0e3fe531374dd82b6ee5de1a5a1bea4a38e03500', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '93e3d0530d4402b249f8f3da4541bac913b15ff6', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-navigation-tabs"; }
     static get encapsulation() { return "shadow"; }