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

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

@@ -1,12 +1,9 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   display: block;
 }
 :host slot[name=top]::slotted(*) {
   box-sizing: border-box;
-  background-color: var(--footer-top-background);
+  background-color: var(--tds-footer-top-background);
   padding: 40px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -14,7 +11,7 @@
   width: 100%;
 }
 :host .footer-main {
-  background-color: var(--footer-main-background);
+  background-color: var(--tds-footer-main-background);
   padding: 0 40px;
 }
 :host .footer-main-top {
@@ -38,20 +35,16 @@
   padding: 40px 0;
   display: flex;
   justify-content: space-between;
-  border-top: 1px solid var(--footer-main-divider);
+  border-top: 1px solid var(--tds-footer-main-divider);
 }
 :host .footer-main-bottom small.copyright {
-  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);
   margin: 0;
-  color: var(--footer-main-copyright);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-footer-main-copyright);
 }
 :host .footer-main-bottom .brand {
-  background-image: var(--component-footer-logotype-cdn), var(--component-footer-logotype-local);
+  background-image: var(--tds-background-image-scania-wordmark-white-svg-local), var(--tds-background-image-scania-wordmark-white-svg);
   background-repeat: no-repeat;
   background-size: 117px;
   background-position: right;
@@ -96,10 +89,4 @@
   :host .footer-main-bottom .brand {
     width: 100%;
   }
-  :host .copyright-text {
-    display: none;
-  }
-  :host .copyright-last-part {
-    display: inline-block;
-  }
 }

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

@@ -8,6 +8,7 @@ import hasSlot from "../../utils/hasSlot";
  */
 export class TdsFooter {
     constructor() {
+        this.copyrightText = `Copyright © ${new Date().getFullYear()} Scania`;
         this.modeVariant = null;
     }
     render() {
@@ -15,9 +16,9 @@ export class TdsFooter {
         const usesStartSlot = hasSlot('start', this.host);
         const usesEndSlot = hasSlot('end', this.host);
         const usesCopyrightSlot = hasSlot('copyright', this.host);
-        return (h(Host, { key: 'cd82373a4dc49301758e5063451a5f5b0b4590e6', class: {
+        return (h(Host, { key: 'f9a9a196e8f9b49545edbe7e37ef5c7e6108d032', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
-            } }, h("footer", { key: '794665a563b642724b1c4698128413e776c08ef1' }, usesTopSlot && h("slot", { key: '5034c41b13c47a23f496cba2486ca359f8223911', name: "top" }), h("div", { key: '514699a7c5408c0d0101c79caa60eaca270663b6', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: 'a649a671452d6d70c5d88a17ad1fd9c6bf355ded', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '6bd940362da1700eedc2a07945fb6599cd5f7561', name: "start" }), usesEndSlot && h("slot", { key: '2c5953c2fd29be00f06ed917011a2c5e1b1fc219', name: "end" }))), h("div", { key: '114ce1fc0d15d126cefadc5d28defef0725f30c8', class: "footer-main-bottom" }, h("small", { key: '60b3f78a11678b0f96ff2d5db3095d48b84c4253', class: "copyright" }, usesCopyrightSlot ? (h("slot", { name: "copyright" })) : (h("div", null, h("div", null, "\u00A9 ", h("span", { class: "copyright-text" }, "Copyright"), " ", new Date().getFullYear()), h("div", { class: "copyright-last-part" }, "All rights reserved")))), h("div", { key: '8600b61650cfc9723ad6103ed6b19c8f28b1db60', class: "brand" }, h("p", { key: '5ddb9a0595f67171e00e1d98c8665ce031787c8f' }, "Scania")))))));
+            } }, h("footer", { key: 'b594e0548fb46ef6b5f829296eb616748b647440' }, usesTopSlot && h("slot", { key: '6127b1d29152c1023820d5220c7453cce76b9e5d', name: "top" }), h("div", { key: 'b0f918488b8cf27f19d8410ab5d05e39478dffd5', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: '63aae985dab88e5f31f4bd271d89dd5cf66e521c', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '91c21420d33cb9dd1190324a73b095fdcc655174', name: "start" }), usesEndSlot && h("slot", { key: '672e6d1b2be9bf0d4223662e58d2f92d1e914fb2', name: "end" }))), h("div", { key: '28dd4db6c1ea0de52dfe3c0f0ea19541afdeecc6', class: "footer-main-bottom" }, h("small", { key: '0e760565515a6a57bf7948647bc0c526f70386f8', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: 'ef7647abe740819c88ed202412beb2b7cc0d18fb', class: "brand" }, h("p", { key: 'ab9bf46b2fca845a5d6c365fe3fd9f0b456ba819' }, "Scania")))))));
     }
     static get is() { return "tds-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,18 +25,18 @@ body {
 }
 :host .menu:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
-  background: var(--color-foreground-icon-discrete);
+  background: var(--tds-scrollbar-hover-thumb-color);
   background-clip: padding-box;
 }
 :host .menu::-webkit-scrollbar {
   width: var(--tds-scrollbar-width);
 }
 :host .menu::-webkit-scrollbar-track {
-  background: var(--color-background-layer-01);
+  background: var(--tds-scrollbar-track-color);
 }
 :host .menu::-webkit-scrollbar-thumb {
   border-radius: 40px;
-  background: var(--color-foreground-icon-discrete);
+  background: var(--tds-scrollbar-thumb-color);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;
 }

package/dist/collection/components/header/header-dropdown-list-item/header-dropdown-list-item.css

@@ -27,9 +27,10 @@
   cursor: pointer;
 }
 :host .component ::slotted(a: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;
+  z-index: 1;
 }
 :host .component-selected {
   background-color: var(--tds-nav-item-background-selected);

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

@@ -22,9 +22,10 @@
 }
 :host ::slotted(button:focus-visible),
 :host ::slotted(a: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;
+  z-index: 1;
 }
 :host .component-active ::slotted(button),
 :host .component-active ::slotted(a) {

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

@@ -27,18 +27,18 @@ body {
 }
 :host .wrapper .menu:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
-  background: var(--color-foreground-icon-discrete);
+  background: var(--tds-scrollbar-hover-thumb-color);
   background-clip: padding-box;
 }
 :host .wrapper .menu::-webkit-scrollbar {
   width: var(--tds-scrollbar-width);
 }
 :host .wrapper .menu::-webkit-scrollbar-track {
-  background: var(--color-background-layer-01);
+  background: var(--tds-scrollbar-track-color);
 }
 :host .wrapper .menu::-webkit-scrollbar-thumb {
   border-radius: 40px;
-  background: var(--color-foreground-icon-discrete);
+  background: var(--tds-scrollbar-thumb-color);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;
 }

package/dist/collection/components/header/header-launcher-grid-item/header-launcher-grid-item.css

@@ -32,7 +32,8 @@
 }
 :host ::slotted(a:focus-visible),
 :host ::slotted(button: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;
+  z-index: 1;
 }

package/dist/collection/components/icon/icon.js

@@ -29,12 +29,7 @@ export class Icon {
     }
     detectAndSetBrand() {
         const brandClasses = Object.keys(brandIconMap);
-        // First try to find brand class using closest
-        let matchingBrand = brandClasses.find((brand) => this.host.closest(`.${brand}`));
-        // If closest didn't find anything, check document root
-        if (!matchingBrand) {
-            matchingBrand = brandClasses.find((brand) => document.documentElement.classList.contains(brand));
-        }
+        const matchingBrand = brandClasses.find((brand) => this.host.closest(`.${brand}`));
         // Set the icons_object based on the found brand or default to scania
         this.icons_object = matchingBrand ? brandIconMap[matchingBrand] : scaniaIcons;
         this.arrayDataWatcher(this.icons_object);
@@ -49,7 +44,7 @@ export class Icon {
         this.arrayOfIcons = [...this.arrayOfIcons];
     }
     render() {
-        return h(Host, { key: 'fea032a0b7886986e2d64ec833c83d96f8d4e106' }, this.setIcons());
+        return h(Host, { key: 'e54289a5f2cf5717ffc9aafc0295a6aafd1cb7de' }, this.setIcons());
     }
     static get is() { return "tds-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon/tratonIconsArray.js

@@ -1,5 +1,5 @@
 export const iconsCollection =
-  '[{"name":"arrow_diagonal","definition":"M24 5.75H10v2h12.59L6 24.34l1.41 1.41L24 9.16v12.59h2v-16h-2Z","viewbox":"0 0 32 32"},{"name":"arrow_down","definition":"M24.59 16.59 17 24.17V4h-2v20.17L7.41 16.6 6 18l10 10 10-10-1.41-1.41Z","viewbox":"0 0 32 32"},{"name":"arrow_left","definition":"m4 16 10 10 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16Z","viewbox":"0 0 32 32"},{"name":"arrow_right","definition":"M28 16 18 6l-1.41 1.41L24.17 15H4v2h20.17l-7.58 7.59L18 26l10-10Z","viewbox":"0 0 32 32"},{"name":"arrow_up","definition":"M7.41 15.41 15 7.83V28h2V7.83l7.59 7.58L26 14 16 4 6 14l1.41 1.41Z","viewbox":"0 0 32 32"},{"name":"bento","definition":"M6 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 28a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z","viewbox":"0 0 32 32"},{"name":"burger","definition":"M30 6H2v2h28V6Zm0 9H2v2h28v-2Zm0 9H2v2h28v-2Z","viewbox":"0 0 32 32"},{"name":"calendar","definition":"M26.47 4H22V2h-2v2h-8V2h-2v2H5.53L4 7v18l1.53 3h20.94L28 25V7l-1.53-3ZM10 6v2h2V6h8v2h2V6h3.25L26 7.48V10H6V7.48L6.75 6H10ZM6.75 26 6 24.52V12h20v12.52L25.25 26H6.75Z","viewbox":"0 0 32 32"},{"name":"chevron_down","definition":"m7.13 10.29-1.41 1.42 10 10 10-10-1.41-1.42-8.59 8.59-8.59-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_left","definition":"M21.41 7.41 20 6 10 16l10 10 1.41-1.41L12.83 16l8.58-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_right","definition":"M10.59 7.41 12 6l10 10-10 10-1.41-1.41L19.17 16 10.6 7.41Z","viewbox":"0 0 32 32"},{"name":"chevron_up","definition":"m24.89 21.7 1.4-1.4-10-10-10 10 1.42 1.4 8.59-8.58 8.59 8.58Z","viewbox":"0 0 32 32"},{"name":"cross","definition":"M25 8.41 23.59 7 16 14.59 8.41 7 7 8.41 14.59 16 7 23.59 8.41 25 16 17.41 23.59 25 25 23.59 17.41 16 25 8.41Z","viewbox":"0 0 32 32"},{"name":"edit_inactive","definition":"m21.8 17.3 5.6-5.6c.8-.8.8-2 0-2.8l-4.2-4.2c-.8-.8-2-.8-2.8 0l-5.6 5.6 1.4 1.4 2.1-2.1 4.2 4.2-2.1 2.1 1.4 1.4zm0-11.3 4.2 4.2-2.1 2.1-4.2-4.2L21.8 6zm-9.9 9.9L8 19.7l-1.6 5.8 5.8-1.6 3.9-3.9 1.4 1.4-3.9 3.9c-.2.2-.6.4-.9.5L5.3 28c-.3.1-.7 0-1-.3-.3-.3-.4-.6-.3-1l2.1-7.5c.1-.3.3-.6.5-.9l3.9-3.9 1.4 1.5zM2.3 2.3c.4-.4 1-.4 1.4 0l26 26c.4.4.4 1 0 1.4-.4.4-1 .4-1.4 0l-26-26c-.4-.4-.4-1 0-1.4z","viewbox":"0 0 32 32"},{"name":"edit","definition":"m23 3-6 6L4.13 21.87 3 29l7.13-1.13L23 15l6-6-6-6ZM9.18 26l-3.77.6.59-3.77 12.41-12.42 3.17 3.18L9.18 26ZM23 12.17 19.83 9 23 5.83 26.17 9 23 12.17Z","viewbox":"0 0 32 32"},{"name":"error","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 9h-2v10h2V9Zm0 12h-2v2h2v-2Z","viewbox":"0 0 32 32"},{"name":"info","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 13h-2v10h2V13Zm0-4h-2v2h2V9Z","viewbox":"0 0 32 32"},{"name":"minus","definition":"M28 15H4v2h24v-2Z","viewbox":"0 0 32 32"},{"name":"notification","definition":"M25 19.55V13a9 9 0 0 0-8-8.94V2h-2v2.06A9 9 0 0 0 7 13v6.55L5 21v5h22v-5l-2-1.45ZM25 24H7v-1.98l.03-.02L9 20.57V13a7 7 0 0 1 14 0v7.57L24.97 22l.03.02V24Zm-5 4h-8v2h8v-2Z","viewbox":"0 0 32 32"},{"name":"plus","definition":"M28 15H17V4h-2v11H4v2h11v11h2V17h11v-2Z","viewbox":"0 0 32 32"},{"name":"print","definition":"M28 9h-3V3H7v6H4l-2 3.93V23h5v6h18v-6h5V12.93L28 9ZM9 5h14v4H9V5Zm14 22H9v-9h14v9Zm5-6h-3v-5H7v5H4v-7.59L5.23 11h21.54L28 13.41V21Z","viewbox":"0 0 32 32"},{"name":"refresh","definition":"M19 10h4.98C22.11 7.5 19.2 6 16 6 10.49 6 6 10.49 6 16H4a12.01 12.01 0 0 1 21-7.94V4h2v8h-8v-2Zm-6 12H8.02c1.87 2.5 4.79 4 7.98 4 5.51 0 10-4.49 10-10h2a12.01 12.01 0 0 1-21 7.93V28H5v-8h8v2Z","viewbox":"0 0 32 32"},{"name":"search","definition":"m28 26.59-6.26-6.27A10.01 10.01 0 1 0 4 14a10.01 10.01 0 0 0 16.32 7.74L26.6 28l1.4-1.41ZM14 22a8 8 0 0 1 0-16 8 8 0 0 1 0 16Z","viewbox":"0 0 32 32"},{"name":"share","definition":"M25.1 21a4.08 4.08 0 0 0-3.15 1.48L10.83 16.9a3.75 3.75 0 0 0 .02-1.74l11.12-5.61a4.05 4.05 0 0 0 6.91-1.15 3.96 3.96 0 0 0-1.76-4.85 4.08 4.08 0 0 0-5.13.9 3.97 3.97 0 0 0-.88 3.29L9.93 13.36A4.05 4.05 0 0 0 2.86 16a3.97 3.97 0 0 0 2.61 3.74 4.09 4.09 0 0 0 4.46-1.09l11.2 5.65a3.97 3.97 0 0 0 2.42 4.38 4.08 4.08 0 0 0 4.4-.86A3.99 3.99 0 0 0 25.1 21Zm0-16a2.04 2.04 0 0 1 1.86 1.24 1.98 1.98 0 0 1-.44 2.18 2.03 2.03 0 0 1-3.45-1.41 2.03 2.03 0 0 1 2.02-2ZM6.9 18a2.04 2.04 0 0 1-1.87-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 8.92 16a2.03 2.03 0 0 1-2.02 2Zm18.2 9a2.04 2.04 0 0 1-1.88-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 27.11 25c0 .53-.2 1.04-.59 1.42-.38.37-.9.58-1.43.58Z","viewbox":"0 0 32 32"},{"name":"skip_backwards","definition":"M25.708 4.292a.998.998 0 0 1 0 1.412l-9.872 9.872a.6.6 0 0 0 0 .848l9.872 9.872a.998.998 0 1 1-1.412 1.412l-9.872-9.872a2.596 2.596 0 0 1 0-3.671l9.872-9.873a.998.998 0 0 1 1.412 0ZM7 4.02a1 1 0 0 1 1 1v22a1 1 0 1 1-2 0v-22a1 1 0 0 1 1-1Z","viewbox":"0 0 32 32"},{"name":"skip_forward","definition":"M6.292 27.708a.998.998 0 0 1 0-1.412l9.873-9.872a.6.6 0 0 0 0-.848L6.292 5.704a.998.998 0 0 1 1.412-1.412l9.872 9.873a2.596 2.596 0 0 1 0 3.67l-9.872 9.873a.998.998 0 0 1-1.412 0ZM25 4a1 1 0 0 1 1 1v22a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1Z","viewbox":"0 0 32 32"},{"name":"sorting","definition":"M27.6 20.6 24 24.2V8h-2v16.2l-3.6-3.6L17 22l6 6 6-6-1.4-1.4ZM9 4l-6 6 1.4 1.4L8 7.8V24h2V7.8l3.6 3.6L15 10 9 4Z","viewbox":"0 0 32 32"},{"name":"star","definition":"m30.07 13.39-.63-1.87-8.89-.87L17 2h-2l-3.55 8.65-8.89.87-.63 1.87 6.75 6.24-2 9.23L8.33 30 16 25.21 23.67 30l1.63-1.14-2-9.23 6.77-6.24Zm-13 10.13L16 22.85l-1.06.67-5.83 3.64 1.52-7.11.24-1.12-.87-.77-5.21-4.85 6.86-.67 1.2-.11.46-1.12L16 4.83l2.69 6.58.46 1.12 1.2.11 6.86.67L22 18.16l-.83.77.24 1.12 1.52 7.11-5.86-3.64Z","viewbox":"0 0 32 32"},{"name":"tick","definition":"m28 9-1.41-1.41L13 21.17 5.41 13.6 4 15l9 9L28 9Z","viewbox":"0 0 32 32"},{"name":"truck","definition":"M22 8H10v2h12V8ZM30 8h-4V6.52L23.7 2H8.3L6 6.52V8H2v2h4v20h5.2l1.03-2h7.55l1.02 2H26V10h4V8Zm-7.98 20L21 26H11l-1.02 2H8v-4h3l-1.02-2H8V7l1.53-3h12.94L24 7v15h-1.98L21 24h3v4h-1.98ZM23 16H9l4.08 8h5.84L23 16Zm-5.3 6h-3.4l-2.04-4h7.48l-2.04 4Z","viewbox":"0 0 32 32"},{"name":"warning","definition":"M27.68 23 18 4h-4L4.32 23l-.32.62V28h24v-4.38l-.32-.62ZM6 26v-1.9L15.22 6h1.56L26 24.1V26H6ZM17 11h-2v9h2v-9Zm0 11h-2v2h2v-2Z","viewbox":"0 0 32 32"}]';
+  '[{"name":"arrow_diagonal","definition":"M24 5.75H10v2h12.59L6 24.34l1.41 1.41L24 9.16v12.59h2v-16h-2Z","viewbox":"0 0 32 32"},{"name":"arrow_down","definition":"M24.59 16.59 17 24.17V4h-2v20.17L7.41 16.6 6 18l10 10 10-10-1.41-1.41Z","viewbox":"0 0 32 32"},{"name":"arrow_left","definition":"m4 16 10 10 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16Z","viewbox":"0 0 32 32"},{"name":"arrow_right","definition":"M28 16 18 6l-1.41 1.41L24.17 15H4v2h20.17l-7.58 7.59L18 26l10-10Z","viewbox":"0 0 32 32"},{"name":"arrow_up","definition":"M7.41 15.41 15 7.83V28h2V7.83l7.59 7.58L26 14 16 4 6 14l1.41 1.41Z","viewbox":"0 0 32 32"},{"name":"bento","definition":"M6 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 28a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z","viewbox":"0 0 32 32"},{"name":"burger","definition":"M30 6H2v2h28V6Zm0 9H2v2h28v-2Zm0 9H2v2h28v-2Z","viewbox":"0 0 32 32"},{"name":"calendar","definition":"M26.47 4H22V2h-2v2h-8V2h-2v2H5.53L4 7v18l1.53 3h20.94L28 25V7l-1.53-3ZM10 6v2h2V6h8v2h2V6h3.25L26 7.48V10H6V7.48L6.75 6H10ZM6.75 26 6 24.52V12h20v12.52L25.25 26H6.75Z","viewbox":"0 0 32 32"},{"name":"chevron_down","definition":"m7.13 10.29-1.41 1.42 10 10 10-10-1.41-1.42-8.59 8.59-8.59-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_left","definition":"M21.41 7.41 20 6 10 16l10 10 1.41-1.41L12.83 16l8.58-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_right","definition":"M10.59 7.41 12 6l10 10-10 10-1.41-1.41L19.17 16 10.6 7.41Z","viewbox":"0 0 32 32"},{"name":"chevron_up","definition":"m24.89 21.7 1.4-1.4-10-10-10 10 1.42 1.4 8.59-8.58 8.59 8.58Z","viewbox":"0 0 32 32"},{"name":"cross","definition":"M25 8.41 23.59 7 16 14.59 8.41 7 7 8.41 14.59 16 7 23.59 8.41 25 16 17.41 23.59 25 25 23.59 17.41 16 25 8.41Z","viewbox":"0 0 32 32"},{"name":"edit","definition":"m23 3-6 6L4.13 21.87 3 29l7.13-1.13L23 15l6-6-6-6ZM9.18 26l-3.77.6.59-3.77 12.41-12.42 3.17 3.18L9.18 26ZM23 12.17 19.83 9 23 5.83 26.17 9 23 12.17Z","viewbox":"0 0 32 32"},{"name":"error","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 9h-2v10h2V9Zm0 12h-2v2h2v-2Z","viewbox":"0 0 32 32"},{"name":"info","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 13h-2v10h2V13Zm0-4h-2v2h2V9Z","viewbox":"0 0 32 32"},{"name":"minus","definition":"M28 15H4v2h24v-2Z","viewbox":"0 0 32 32"},{"name":"notification","definition":"M25 19.55V13a9 9 0 0 0-8-8.94V2h-2v2.06A9 9 0 0 0 7 13v6.55L5 21v5h22v-5l-2-1.45ZM25 24H7v-1.98l.03-.02L9 20.57V13a7 7 0 0 1 14 0v7.57L24.97 22l.03.02V24Zm-5 4h-8v2h8v-2Z","viewbox":"0 0 32 32"},{"name":"plus","definition":"M28 15H17V4h-2v11H4v2h11v11h2V17h11v-2Z","viewbox":"0 0 32 32"},{"name":"print","definition":"M28 9h-3V3H7v6H4l-2 3.93V23h5v6h18v-6h5V12.93L28 9ZM9 5h14v4H9V5Zm14 22H9v-9h14v9Zm5-6h-3v-5H7v5H4v-7.59L5.23 11h21.54L28 13.41V21Z","viewbox":"0 0 32 32"},{"name":"refresh","definition":"M19 10h4.98C22.11 7.5 19.2 6 16 6 10.49 6 6 10.49 6 16H4a12.01 12.01 0 0 1 21-7.94V4h2v8h-8v-2Zm-6 12H8.02c1.87 2.5 4.79 4 7.98 4 5.51 0 10-4.49 10-10h2a12.01 12.01 0 0 1-21 7.93V28H5v-8h8v2Z","viewbox":"0 0 32 32"},{"name":"search","definition":"m28 26.59-6.26-6.27A10.01 10.01 0 1 0 4 14a10.01 10.01 0 0 0 16.32 7.74L26.6 28l1.4-1.41ZM14 22a8 8 0 0 1 0-16 8 8 0 0 1 0 16Z","viewbox":"0 0 32 32"},{"name":"share","definition":"M25.1 21a4.08 4.08 0 0 0-3.15 1.48L10.83 16.9a3.75 3.75 0 0 0 .02-1.74l11.12-5.61a4.05 4.05 0 0 0 6.91-1.15 3.96 3.96 0 0 0-1.76-4.85 4.08 4.08 0 0 0-5.13.9 3.97 3.97 0 0 0-.88 3.29L9.93 13.36A4.05 4.05 0 0 0 2.86 16a3.97 3.97 0 0 0 2.61 3.74 4.09 4.09 0 0 0 4.46-1.09l11.2 5.65a3.97 3.97 0 0 0 2.42 4.38 4.08 4.08 0 0 0 4.4-.86A3.99 3.99 0 0 0 25.1 21Zm0-16a2.04 2.04 0 0 1 1.86 1.24 1.98 1.98 0 0 1-.44 2.18 2.03 2.03 0 0 1-3.45-1.41 2.03 2.03 0 0 1 2.02-2ZM6.9 18a2.04 2.04 0 0 1-1.87-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 8.92 16a2.03 2.03 0 0 1-2.02 2Zm18.2 9a2.04 2.04 0 0 1-1.88-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 27.11 25c0 .53-.2 1.04-.59 1.42-.38.37-.9.58-1.43.58Z","viewbox":"0 0 32 32"},{"name":"sorting","definition":"M27.6 20.6 24 24.2V8h-2v16.2l-3.6-3.6L17 22l6 6 6-6-1.4-1.4ZM9 4l-6 6 1.4 1.4L8 7.8V24h2V7.8l3.6 3.6L15 10 9 4Z","viewbox":"0 0 32 32"},{"name":"star","definition":"m30.07 13.39-.63-1.87-8.89-.87L17 2h-2l-3.55 8.65-8.89.87-.63 1.87 6.75 6.24-2 9.23L8.33 30 16 25.21 23.67 30l1.63-1.14-2-9.23 6.77-6.24Zm-13 10.13L16 22.85l-1.06.67-5.83 3.64 1.52-7.11.24-1.12-.87-.77-5.21-4.85 6.86-.67 1.2-.11.46-1.12L16 4.83l2.69 6.58.46 1.12 1.2.11 6.86.67L22 18.16l-.83.77.24 1.12 1.52 7.11-5.86-3.64Z","viewbox":"0 0 32 32"},{"name":"tick","definition":"m28 9-1.41-1.41L13 21.17 5.41 13.6 4 15l9 9L28 9Z","viewbox":"0 0 32 32"},{"name":"truck","definition":"M22 8H10v2h12V8ZM30 8h-4V6.52L23.7 2H8.3L6 6.52V8H2v2h4v20h5.2l1.03-2h7.55l1.02 2H26V10h4V8Zm-7.98 20L21 26H11l-1.02 2H8v-4h3l-1.02-2H8V7l1.53-3h12.94L24 7v15h-1.98L21 24h3v4h-1.98ZM23 16H9l4.08 8h5.84L23 16Zm-5.3 6h-3.4l-2.04-4h7.48l-2.04 4Z","viewbox":"0 0 32 32"},{"name":"warning","definition":"M27.68 23 18 4h-4L4.32 23l-.32.62V28h24v-4.38l-.32-.62ZM6 26v-1.9L15.22 6h1.56L26 24.1V26H6ZM17 11h-2v9h2v-9Zm0 11h-2v2h2v-2Z","viewbox":"0 0 32 32"}]';
 export const iconsNames = [
   'arrow_diagonal',
   'arrow_down',
@@ -14,7 +14,6 @@ export const iconsNames = [
   'chevron_right',
   'chevron_up',
   'cross',
-  'edit_inactive',
   'edit',
   'error',
   'info',
@@ -25,8 +24,6 @@ export const iconsNames = [
   'refresh',
   'search',
   'share',
-  'skip_backwards',
-  'skip_forward',
   'sorting',
   'star',
   'tick',

package/dist/collection/components/link/link.css

@@ -1,6 +1,3 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   display: inline;
 }
@@ -8,36 +5,34 @@
   all: unset;
   cursor: pointer;
   outline: none;
-  color: var(--link);
+  color: var(--tds-link);
   text-decoration: underline;
 }
 :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-offset: 1px;
-  outline-width: var(--link-focus-outline-width);
-  color: var(--link);
+  color: var(--tds-link-focus);
   text-decoration: none;
+  outline: 2px solid var(--tds-link-focus);
+  outline-offset: -2px;
 }
 :host ::slotted(*:active) {
-  color: var(--link);
+  color: var(--tds-link);
   text-decoration: underline;
-  text-decoration-color: var(--link);
+  text-decoration-color: var(--tds-link);
 }
 :host ::slotted(*:hover) {
-  color: var(--link-hover);
+  color: var(--tds-link-hover);
   text-decoration: underline;
-  text-decoration-color: var(--link-hover);
+  text-decoration-color: var(--tds-link-hover);
 }
 :host ::slotted(*:visited) {
-  color: var(--link-visited);
-  text-decoration-color: var(--link-visited);
+  color: var(--tds-link-visited);
+  text-decoration-color: var(--tds-link-visited);
 }
 
 .disabled ::slotted(*),
 .disabled ::slotted(*:visited) {
-  color: var(--link-disabled);
-  text-decoration-color: var(--link-disabled);
+  color: var(--tds-link-disabled);
+  text-decoration-color: var(--tds-link-disabled);
   pointer-events: none;
 }
 
@@ -50,10 +45,6 @@
 }
 
 .standalone ::slotted(*) {
-  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);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
 }

package/dist/collection/components/message/message.css

@@ -2,73 +2,57 @@
 /* Centralized map of typography types */
 /* Utility mixin */
 :host {
+  /* Default values */
+  --tds-message-background: var(--background-elevation-layer-03);
+  --tds-message-background-error: var(--system-danger-subtle-03);
+  --tds-message-background-warning: var(--background-elevation-layer-03);
+  --tds-message-background-success: var(--background-elevation-layer-03);
   /* Variant values */
 }
 :host .tds-mode-variant-primary {
-  --message-main-background: var(--message-mode-primary-background);
+  --tds-message-background: var(--background-elevation-layer-03);
+  --tds-message-background-error: var(--system-danger-subtle-03);
+  --tds-message-background-warning: var(--background-elevation-layer-03);
+  --tds-message-background-success: var(--background-elevation-layer-03);
 }
 :host .tds-mode-variant-secondary {
-  --message-main-background: var(--message-mode-secondary-background);
-}
-:host tds-icon {
-  padding-right: 16px;
-}
-:host .content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  color: var(--message-main-text-color);
-  padding: 2px 0;
-}
-:host .content .header {
-  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);
-}
-:host .content .extended-message {
-  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(--message-main-text-color);
+  --tds-message-background: var(--background-elevation-layer-02);
+  --tds-message-background-error: var(--system-danger-subtle-02);
+  --tds-message-background-warning: var(--background-elevation-layer-02);
+  --tds-message-background-success: var(--background-elevation-layer-02);
 }
 :host .wrapper {
   display: flex;
   padding: 16px;
-  background-color: var(--message-main-background);
+  background-color: var(--tds-message-background);
   border-radius: 4px;
-  border-left-width: 4px;
-  border-left-style: solid;
 }
 :host .wrapper.information {
-  border-left-color: var(--message-info-border-color);
+  border-left: 4px solid var(--system-info-default);
 }
 :host .wrapper.information tds-icon {
-  color: var(--message-info-icon-color);
+  color: var(--system-info-default);
 }
 :host .wrapper.success {
-  border-left-color: var(--message-success-border-color);
+  background-color: var(--tds-message-background-success);
+  border-left: 4px solid var(--system-success-default);
 }
 :host .wrapper.success tds-icon {
-  color: var(--message-success-icon-color);
+  color: var(--system-success-default);
 }
 :host .wrapper.error {
-  border-left-color: var(--message-error-border-color);
-  background-color: var(--message-error-background);
+  background-color: var(--tds-message-background-error);
+  border-left: 4px solid var(--system-danger-default);
 }
 :host .wrapper.error tds-icon {
-  color: var(--message-error-icon-color);
+  color: var(--system-danger-default);
 }
 :host .wrapper.warning {
-  border-left-color: var(--message-warning-border-color);
+  background-color: var(--tds-message-background-warning);
+  border-left: 4px solid var(--system-warning-default);
 }
 :host .wrapper.warning tds-icon {
-  color: var(--message-warning-icon-color);
+  color: var(--system-warning-default);
 }
 :host .wrapper.minimal {
   border: none;
@@ -84,5 +68,32 @@
   text-transform: var(--detail-02-text-transform);
 }
 :host .wrapper.minimal.error .header {
-  color: var(--message-error-header-text-color);
+  color: var(--system-danger-default);
+}
+:host tds-icon {
+  padding-right: 16px;
+}
+:host .content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  color: var(--foreground-text-strong);
+  padding: 2px 0;
+}
+:host .content .header {
+  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);
+}
+:host .content .extended-message {
+  color: var(--foreground-text-strong);
+  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);
 }

package/dist/collection/components/modal/modal.css

@@ -5,11 +5,11 @@
 /* MODAL STYLING */
 .tds-modal {
   box-sizing: border-box;
-  background-color: var(--modal-background);
-  box-shadow: var(--modal-shadow);
+  box-shadow: var(--tds-modal-box-shadow);
+  background-color: var(--background-elevation-layer-02);
   margin: auto;
   position: relative;
-  border-radius: 4px;
+  border-radius: var(--radius-narrow);
   max-height: 85vh;
   overflow-y: auto;
   pointer-events: auto;
@@ -25,7 +25,7 @@
   background-color: transparent;
 }
 .tds-modal::-webkit-scrollbar-thumb {
-  background-color: var(--modal-scroll-bar-thumb);
+  background-color: var(--foreground-elements-transparparent-discrete);
   border-radius: 3px;
 }
 .tds-modal__actions-sticky {
@@ -47,13 +47,13 @@
   bottom: -1px;
   left: 0;
   right: 0;
-  background-color: var(--modal-background);
+  background-color: var(--background-elevation-layer-02);
   padding: 24px 16px 16px;
   display: flex;
   gap: 16px;
 }
 .tds-modal__actions-static slot[name=actions] {
-  background-color: var(--modal-background);
+  background-color: var(--background-elevation-layer-02);
   display: flex;
   gap: 16px;
   padding: 24px 16px 16px;
@@ -147,7 +147,7 @@
   padding: 16px;
   position: sticky;
   top: 0;
-  background-color: var(--modal-background);
+  background-color: var(--background-elevation-layer-02);
   z-index: 1;
 }
 
@@ -159,7 +159,7 @@ slot[name=header]::slotted(*) {
   font-weight: var(--headline-05-font-weight);
   letter-spacing: var(--headline-05-letter-spacing);
   text-transform: var(--headline-05-text-transform);
-  color: var(--modal-text);
+  color: var(--foreground-text-strong);
   margin: 0;
   flex: 1;
 }
@@ -171,7 +171,7 @@ slot[name=header]::slotted(*) {
   font-weight: var(--body-01-font-weight);
   letter-spacing: var(--body-01-letter-spacing);
   text-transform: var(--body-01-text-transform);
-  color: var(--modal-text);
+  color: var(--foreground-text-strong);
   overflow-y: visible;
   padding: 0 16px 16px;
 }
@@ -183,7 +183,7 @@ slot[name=header]::slotted(*) {
   background-color: transparent;
 }
 .body::-webkit-scrollbar-thumb {
-  background-color: var(--modal-scroll-bar-thumb);
+  background-color: var(--foreground-elements-transparparent-discrete);
   border-radius: 3px;
 }
 
@@ -194,7 +194,7 @@ slot[name=header]::slotted(*) {
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: var(--modal-backdrop);
+  background-color: var(--tds-modal-backdrop-background);
   pointer-events: auto;
 }
 .tds-modal-backdrop * {
@@ -212,13 +212,14 @@ button.tds-modal-close {
 .tds-modal-close {
   display: inline-block;
   height: auto;
-  color: var(--modal-text);
+  color: var(--foreground-text-strong);
   cursor: pointer;
 }
 .tds-modal-close:focus {
-  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
 @media (min-width: 320px) {
   .tds-modal-close {
@@ -248,7 +249,7 @@ button.tds-modal-close {
   }
 }
 .tds-modal-close-btn svg {
-  fill: var(--modal-cross-svg);
+  fill: var(--foreground-text-strong);
 }
 
 .tds-modal-overflow {

package/dist/collection/components/popover-canvas/popover-canvas.css

@@ -1,8 +1,8 @@
 .tds-popover-canvas {
   box-sizing: border-box;
   display: inline-block;
-  color: var(--popover-canvas-text);
-  background-color: var(--popover-canvas-background);
+  color: var(--tds-popover-canvas-color);
+  background-color: var(--tds-popover-canvas-background);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   z-index: 900;

package/dist/collection/components/popover-menu/popover-menu-item/popover-menu-item.css

@@ -1,6 +1,3 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: block;
@@ -9,13 +6,9 @@
   box-sizing: border-box;
 }
 :host .wrapper {
-  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(--popover-menu-text);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-popover-menu-color);
   position: relative;
   width: 100%;
   display: flex;
@@ -24,17 +17,17 @@
 }
 :host .wrapper:hover {
   cursor: pointer;
-  background-color: var(--popover-menu-background-hover);
+  background-color: var(--tds-popover-menu-background-hover);
 }
 :host .wrapper.disabled {
   cursor: not-allowed;
-  color: var(--popover-menu-item-disabled);
+  color: var(--tds-popover-menu-divider-disabled-color);
 }
 :host .wrapper.disabled:hover {
   background-color: inherit;
 }
 :host .wrapper.disabled ::slotted(tds-icon) {
-  color: var(--popover-menu-item-icon-disabled);
+  color: var(--tds-popover-menu-divider-disabled-icon-color);
 }
 :host .wrapper.disabled ::slotted(*) {
   pointer-events: none;
@@ -57,6 +50,6 @@
   height: 100%;
   top: 0;
   left: 2px;
-  outline: 1px solid var(--popover-menu-item-outline-focus);
+  outline: 1px solid var(--tds-blue-400);
   outline-offset: 1px;
 }

package/dist/collection/components/popover-menu/popover-menu.css

@@ -2,7 +2,7 @@
   box-sizing: border-box;
   overflow: hidden;
   width: 160px;
-  background-color: var(--popover-menu-background);
+  background-color: var(--tds-popover-menu-background);
   padding: 16px 6px;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;