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

package/dist/collection/components/radio-button/radio-button.css

@@ -34,10 +34,10 @@
   box-sizing: border-box;
 }
 .tds-radio-button .tds-form-input[type=radio]::before {
-  width: 24px;
-  height: 24px;
-  left: 0;
-  top: 0;
+  width: 22px;
+  height: 22px;
+  left: 1px;
+  top: 1px;
 }
 .tds-radio-button .tds-form-input[type=radio]::after {
   border: 1px solid var(--tds-radio-button-interaction-01);
@@ -49,11 +49,9 @@
 }
 .tds-radio-button .tds-form-input[type=radio]:hover::before {
   background-color: var(--tds-radio-button-background-hover);
-  opacity: 0.12;
 }
 .tds-radio-button .tds-form-input[type=radio]:focus::before {
   background-color: var(--tds-radio-button-background-focus);
-  opacity: 0.24;
   animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
 }
 .tds-radio-button .tds-form-input[type=radio]:disabled, .tds-radio-button .tds-form-input[type=radio].disabled {
@@ -96,6 +94,5 @@
   }
   100% {
     transform: scale(1);
-    opacity: 0.24;
   }
 }

package/dist/collection/components/radio-button/radio-button.js

@@ -20,8 +20,14 @@ export class TdsRadioButton {
         this.tdsAriaLabel = undefined;
         this.tdsTabIndex = undefined;
     }
+    /** Method to programmatically focus the radio button element */
+    async focusElement() {
+        if (this.inputElement) {
+            this.inputElement.focus();
+        }
+    }
     render() {
-        return (h("div", { key: 'ca977bcef62ce81be1c0387bc1db7a5bb669f164', class: "tds-radio-button" }, h("input", { key: '939027d597b396cfdab2b47a11465b6e46040036', "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: 'f40293c0fcce1dac843087b71b5e34bdd8e911fa', htmlFor: this.radioId }, h("slot", { key: '4190d41d4e90cd4125c4f997f46cefa44682dae7', name: "label" }))));
+        return (h("div", { key: '6f44a40cb5ccf890bdee47d36f47a79d5f8b603c', class: "tds-radio-button" }, h("input", { key: '1da8f9df168c631a634172385c3471a5c6bb03aa', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: '0acf59236ffd3ee0136f2bdef9db8a36afe666ff', htmlFor: this.radioId }, h("slot", { key: 'add4ebdebbb4d5e15126a876c0c0940734b7b068', name: "label" }))));
     }
     static get is() { return "tds-radio-button"; }
     static get encapsulation() { return "scoped"; }
@@ -197,5 +203,26 @@ export class TdsRadioButton {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "focusElement": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to programmatically focus the radio button element",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "host"; }
 }

package/dist/collection/components/side-menu/side-menu-close-button/side-menu-close-button.css

@@ -2,7 +2,7 @@
   height: 64px;
   width: 100%;
   text-align: left;
-  padding: 0 24px;
+  padding: 0 22px;
   border: none;
   background-color: var(--tds-sidebar-side-menu-background-cover);
   font: var(--tds-headline-07);

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.css

@@ -36,15 +36,19 @@
 }
 :host .component ::slotted(a:focus-visible) {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host .component.component-selected ::slotted(a),
 :host .component.component-selected ::slotted(button) {
-  border-left: 4px solid var(--tds-nav-item-border-color-active);
-  padding-left: 20px;
+  box-shadow: inset 4px 0 0 var(--tds-nav-item-border-color-active);
   background-color: var(--tds-header-nav-item-dropdown-opened-background-selected);
 }
 :host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(a),
 :host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(button) {
-  padding-left: 56px;
+  padding: 16px 48px 16px 58px;
+}
+:host .component.component-dropdown-has-user:not(.component-collapsed) ::slotted(a),
+:host .component.component-dropdown-has-user:not(.component-collapsed) ::slotted(button) {
+  padding: 16px 48px 16px 64px;
 }

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.js

@@ -6,6 +6,7 @@ export class TdsSideMenuDropdownListItem {
     constructor() {
         this.selected = false;
         this.dropdownHasIcon = false;
+        this.dropdownHasUser = false;
         this.collapsed = false;
     }
     collapseSideMenuEventHandler(event) {
@@ -19,6 +20,7 @@ export class TdsSideMenuDropdownListItem {
     componentDidLoad() {
         var _a;
         const dropdownEl = this.host.closest('tds-side-menu-dropdown');
+        const hasUserMenu = dropdownEl === null || dropdownEl === void 0 ? void 0 : dropdownEl.querySelector('tds-side-menu-user');
         const dropdownBtnIconSlotEl = dropdownEl.shadowRoot.querySelector('slot[name="icon"]');
         const btnIconSlottedEls = dropdownBtnIconSlotEl.assignedElements();
         const hasBtnIcon = (btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls.length) > 0;
@@ -26,14 +28,18 @@ export class TdsSideMenuDropdownListItem {
         if (hasBtnIcon && !btnIconIsUserImage) {
             this.dropdownHasIcon = true;
         }
+        if (hasUserMenu) {
+            this.dropdownHasUser = true;
+        }
     }
     render() {
-        return (h(Host, { key: 'c9b0be9e374bddb8ef0ed9599ed578fc9c32f262', role: "listitem" }, h("div", { key: 'ae043823f7aec1bb444be5400d9ad781078ac04d', class: {
+        return (h(Host, { key: '7aedc4c01840378247f5b6f06f55f8763cd6533d', role: "listitem" }, h("div", { key: '60dd4aa980084396fb930f28a95d811fb394375a', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-dropdown-has-icon': this.dropdownHasIcon,
+                'component-dropdown-has-user': this.dropdownHasUser,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", { key: '5c7bc7730d7a1bde8caa2a54db2ec6ccadb92726' }))));
+            } }, h("slot", { key: '75a256ed4d6674cb5d3bd7bc29026ea1e13b6489' }))));
     }
     static get is() { return "tds-side-menu-dropdown-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -72,6 +78,7 @@ export class TdsSideMenuDropdownListItem {
     static get states() {
         return {
             "dropdownHasIcon": {},
+            "dropdownHasUser": {},
             "collapsed": {}
         };
     }

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

@@ -12,8 +12,24 @@
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 0 24px;
+  gap: 10px;
+  padding: 0 22px;
+  border: none;
+  background-color: var(--tds-sidebar-side-menu-background-cover);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  color: var(--tds-sidebar-side-menu-single-item-color);
+  cursor: pointer;
+}
+:host .component ::slotted(tds-side-menu-user), :host .component-has-user ::slotted(button) {
+  all: unset;
+  box-sizing: border-box;
+  height: 68px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0 22px 0 16px;
   border: none;
   background-color: var(--tds-sidebar-side-menu-background-cover);
   font: var(--tds-headline-07);
@@ -27,7 +43,8 @@
 :host .component ::slotted(a:focus-visible),
 :host .component ::slotted(button:focus-visible) {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host .component:hover ::slotted(a),
 :host .component:hover ::slotted(button) {
@@ -46,11 +63,22 @@
   position: relative;
 }
 :host .component-selected:not(:host .component-active) ::slotted(a),
-:host .component-selected:not(:host .component-active) ::slotted(button) {
-  border-left: 4px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);
-  padding-left: 20px;
+:host .component-selected:not(:host .component-active) ::slotted(button),
+:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user) {
+  position: relative;
   background-color: var(--tds-sidebar-item-state-selected);
 }
+:host .component-selected:not(:host .component-active) ::slotted(a)::before,
+:host .component-selected:not(:host .component-active) ::slotted(button)::before,
+:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background-color: var(--tds-sidebar-side-menu-single-subitem-selected-border-color);
+}
 
 @media (min-width: 992px) {
   :host .component.component-collapsed ::slotted(a),

package/dist/collection/components/side-menu/side-menu-item/side-menu-item.js

@@ -8,14 +8,15 @@ export class TdsSideMenuItem {
         this.selected = false;
         this.active = false;
         this.collapsed = false;
+        this.hasUserComponent = false;
     }
-    updateSlotted(searchPredicate, mutationCallback) {
+    findSlottedAndExecute(searchPredicate, callback) {
         const assignedElements = this.slotEl.assignedElements({ flatten: true });
         const firstSlottedElement = assignedElements[0];
         if (firstSlottedElement) {
             const foundElement = dfs(firstSlottedElement, searchPredicate);
             if (foundElement) {
-                mutationCallback(foundElement);
+                callback(foundElement);
             }
         }
     }
@@ -34,7 +35,16 @@ export class TdsSideMenuItem {
                     element.classList.remove('__tds-side-menu-item-icon-collapsed');
                 }
             };
-            this.updateSlotted(isIconOrSvg, addIconClass);
+            this.findSlottedAndExecute(isIconOrSvg, addIconClass);
+        }
+    }
+    updateHasUserComponent() {
+        if (this.slotEl) {
+            const isUserComponent = (element) => element.tagName.toLowerCase() === 'tds-side-menu-user';
+            this.hasUserComponent = false;
+            this.findSlottedAndExecute(isUserComponent, () => {
+                this.hasUserComponent = true;
+            });
         }
     }
     connectedCallback() {
@@ -47,19 +57,25 @@ export class TdsSideMenuItem {
     componentDidLoad() {
         this.slotEl = this.host.shadowRoot.querySelector('slot');
         this.updateSlottedElements();
-        this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+        this.updateHasUserComponent();
+        this.slotEl.addEventListener('slotchange', () => {
+            this.updateSlottedElements();
+            this.updateHasUserComponent();
+        });
     }
     collapseSideMenuEventHandler(event) {
         this.collapsed = event.detail.collapsed;
         this.updateSlottedElements();
+        this.updateHasUserComponent();
     }
     render() {
-        return (h(Host, { key: 'fac92e8ccc60dac3d6929d30283729f8055c1633' }, h("div", { key: '0cdecbaab4f888daa53c796919644e17732c43ea', class: {
+        return (h(Host, { key: '714394a875c4fc72f95f9a4a1d1fd928b6e4cb01' }, h("div", { key: 'b9686737469cbdae97f940c4e20364f45ae4e568', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", { key: 'a5ac7145049bac0fb11d9a5ac1d4cbfa764f3bcc' }))));
+                'component-has-user': this.hasUserComponent,
+            } }, h("slot", { key: 'cde3ca8b26d12e652d11ef11c9ac1dc6852f5860' }))));
     }
     static get is() { return "tds-side-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -115,7 +131,8 @@ export class TdsSideMenuItem {
     }
     static get states() {
         return {
-            "collapsed": {}
+            "collapsed": {},
+            "hasUserComponent": {}
         };
     }
     static get elementRef() { return "host"; }

package/dist/collection/components/side-menu/side-menu-user/side-menu-user.css

@@ -1,9 +1,6 @@
 :host {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 16px;
   height: 68px;
-}
-:host tds-side-menu-user-image {
-  margin-left: -4px;
 }

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

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

package/dist/collection/components/spinner/spinner.css

@@ -1,44 +1,3 @@
-/* Component variables aka overrides */
-:root {
-  --spinner-background-inverted: rgba(255, 255, 255, 1);
-}
-
-:root,
-.scania,
-.scania .tds-mode-light {
-  --spinner-background: rgba(43, 112, 211, 1);
-}
-
-.scania .tds-mode-dark {
-  --spinner-background: rgba(74, 137, 243, 1);
-}
-
-.traton,
-.traton .tds-mode-light {
-  --spinner-background: rgba(0, 72, 82, 1);
-}
-
-.traton .tds-mode-dark {
-  --spinner-background: rgba(194, 191, 182, 1);
-}
-
-/* Component variables */
-:root {
-  --spinner-speed: 1.8s;
-  --spinner-speed-lg: 2s;
-  --spinner-radius-xs: 8px;
-  --spinner-radius-sm: 12px;
-  --spinner-radius-md: 26px;
-  --spinner-radius-lg: 42px;
-  --spinner-radius: var(--spinner-radius-lg);
-  --spinner-stroke-width-xs: 3px;
-  --spinner-stroke-width-sm: 4px;
-  --spinner-stroke-width-md: 6px;
-  --spinner-stroke-width-lg: 8px;
-  --spinner-stroke-width: var(--spinner-stroke-width-lg);
-  --PI: 3.14159265358979;
-}
-
 :host {
   box-sizing: border-box;
   display: block;
@@ -47,42 +6,53 @@
   box-sizing: border-box;
 }
 
+/* Size configuration */
+/* Animation mixin */
 .tds-spinner-svg {
+  /* Component variables */
+  --radius: var(--radius-lg);
+  --stroke-width: var(--stroke-width-lg);
+  --animation-speed: var(--speed-lg);
+  --PI: 3.14159265358979;
   display: block;
-  width: calc(var(--spinner-radius) * 2);
-  height: calc(var(--spinner-radius) * 2);
+  width: calc(var(--radius) * 2);
+  height: calc(var(--radius) * 2);
   transform: scale(-1, 1) rotate(-90deg);
+  /* Generate size variants */
 }
 .tds-spinner-svg-xs {
-  --spinner-radius: var(--spinner-radius-xs);
-  --spinner-stroke-width: var(--spinner-stroke-width-xs);
-  --spinner-animation-speed: var(--spinner-speed);
+  --radius: 8px;
+  --stroke-width: 3px;
+  --animation-speed: 1.8s;
 }
 .tds-spinner-svg-sm {
-  --spinner-radius: var(--spinner-radius-sm);
-  --spinner-stroke-width: var(--spinner-stroke-width-sm);
-  --spinner-animation-speed: var(--spinner-speed);
+  --radius: 12px;
+  --stroke-width: 4px;
+  --animation-speed: 1.8s;
 }
 .tds-spinner-svg-md {
-  --spinner-radius: var(--spinner-radius-md);
-  --spinner-stroke-width: var(--spinner-stroke-width-md);
-  --spinner-animation-speed: var(--spinner-speed);
+  --radius: 26px;
+  --stroke-width: 6px;
+  --animation-speed: 1.8s;
 }
 .tds-spinner-svg-lg {
-  --spinner-radius: var(--spinner-radius-lg);
-  --spinner-stroke-width: var(--spinner-stroke-width-lg);
-  --spinner-animation-speed: var(--spinner-speed-lg);
+  --radius: 42px;
+  --stroke-width: 8px;
+  --animation-speed: 2s;
 }
 
 .tds-spinner-circle {
-  cx: var(--spinner-radius);
-  cy: var(--spinner-radius);
-  r: calc(var(--spinner-radius) - var(--spinner-stroke-width) / 2);
+  /* Circle configuration */
+  cx: var(--radius);
+  cy: var(--radius);
+  r: calc(var(--radius) - var(--stroke-width) / 2);
   fill: none;
-  --spinner-stroke-dash: calc((2 * var(--PI)) * var(--spinner-radius));
-  stroke-dasharray: var(--spinner-stroke-dash);
-  stroke-width: var(--spinner-stroke-width);
-  animation: dash var(--spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
+  /* Stroke configuration */
+  --stroke-dash: calc((2 * var(--PI)) * var(--radius));
+  stroke-dasharray: var(--stroke-dash);
+  stroke-width: var(--stroke-width);
+  animation: dash var(--animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
+  /* Color variants */
 }
 .tds-spinner-circle-standard {
   stroke: var(--spinner-background);
@@ -93,9 +63,9 @@
 
 @keyframes dash {
   from {
-    stroke-dashoffset: calc(-1 * var(--spinner-stroke-dash));
+    stroke-dashoffset: calc(-1 * var(--stroke-dash));
   }
   to {
-    stroke-dashoffset: var(--spinner-stroke-dash);
+    stroke-dashoffset: var(--stroke-dash);
   }
 }

package/dist/collection/components/spinner/spinner.js

@@ -1,13 +1,14 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class TdsSpinner {
     constructor() {
         this.size = 'lg';
         this.variant = 'standard';
     }
     render() {
-        return (h("div", { key: 'de6aa9263fc0e7189002156e7e0f24b58a615149', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: '40d43902392034b39f7497369ade14caf6259385', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: 'ef94a92d9b0fe8cbf468a6dbce51ab19de071e43', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
+        return (h(Host, { key: 'bf2c551b6aae9bb2c6b8c67154fd8a81bb331c6e', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: 'ddfe38e85892d3bd72d56dd6c9483f22d164e415', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: 'e2ba6926fdb28d085bdd0f0a23170fc5fb908e9e', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
     }
     static get is() { return "tds-spinner"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["spinner.scss"]

package/dist/collection/components/stepper/step/step.css

@@ -30,8 +30,7 @@
 :host [role=listitem].lg.vertical::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 36px;
   width: 1px;
   top: 40px;
@@ -40,8 +39,7 @@
 :host [role=listitem].lg.horizontal::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   left: calc(50% + 24px);
   right: 0;
@@ -50,8 +48,7 @@
 :host [role=listitem].lg.horizontal::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   right: calc(50% + 24px);
   left: 0;
@@ -60,8 +57,7 @@
 :host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 16px;
   width: 10px;
@@ -71,8 +67,7 @@
 :host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 16px;
   width: 10px;
@@ -100,8 +95,7 @@
 :host [role=listitem].sm.vertical::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 20px;
   width: 1px;
   top: 34px;
@@ -110,8 +104,7 @@
 :host [role=listitem].sm.vertical::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 20px;
   width: 1px;
   top: 34px;
@@ -120,8 +113,7 @@
 :host [role=listitem].sm.horizontal::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   left: calc(50% + 16px + 8px);
   right: 0;
@@ -130,8 +122,7 @@
 :host [role=listitem].sm.horizontal::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   left: 0;
   right: calc(50% + 24px);
@@ -140,8 +131,7 @@
 :host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 13px;
   width: 10px;
@@ -151,8 +141,7 @@
 :host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-icon-step-background-after);
-  opacity: 0.16;
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 13px;
   width: 10px;
@@ -166,19 +155,22 @@
   position: relative;
 }
 :host [role=listitem] .content-container.error {
-  border-color: var(--tds-negative);
-  color: var(--tds-negative);
+  border-color: var(--tds-stepper-icon-step-border-color-warning);
+  color: var(--tds-stepper-icon-step-border-color-warning);
 }
 :host [role=listitem] .content-container.success {
-  background-color: var(--tds-positive);
-  border-color: var(--tds-positive);
+  background-color: var(--tds-stepper-icon-step-border-color-success);
+  border-color: var(--tds-stepper-icon-step-border-color-success);
   color: var(--tds-white);
 }
+:host [role=listitem] .content-container.current {
+  background-color: var(--tds-stepper-background);
+  color: var(--tds-stepper-color);
+}
 :host [role=listitem] .content-container.upcoming {
   background-color: transparent;
   border-color: var(--tds-stepper-label-border-color-upcoming);
   color: var(--tds-stepper-label-text-color-upcoming);
-  opacity: var(--tds-stepper-label-text-opacity-upcoming);
 }
 :host [role=listitem] .label {
   text-align: center;

package/dist/collection/components/stepper/step/step.js

@@ -40,7 +40,7 @@ export class TdsStep {
         }
     }
     render() {
-        return (h(Host, { key: 'f049d976121a1179979026cd3087ad459183de06' }, h("div", { key: '52caba69725b8716dc229659e0082e5388b513d3', role: "listitem", "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: '0dcc74fe5edf2c9333bcfe195be72b07d5f67b92', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '3313463d27273a53000c327a2578a8c67446c17e', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: 'ce4985e94df5453bd62733677977137c279e6f35', name: "label" }))))));
+        return (h(Host, { key: 'f049d976121a1179979026cd3087ad459183de06' }, h("div", { key: '1f961578e8e54ffc9e0d0c2966c86e3e32f8ddd8', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'f83033e0a0761227d911ac77cac9c64c31fe4c11', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '83c92f388cfebe37e0fb94c81d14adc391fbbbfa', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '1c6381a25f8af42afe54c0c8eaff4090bf14ee80', name: "label" }))))));
     }
     static get is() { return "tds-step"; }
     static get encapsulation() { return "shadow"; }

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

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