@scania/tegel 1.33.0 → 1.34.0-internal-variables-demo.0

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

@@ -1,11 +1,18 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 .tds-radio-button {
   box-sizing: border-box;
+  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(--radio-button-label);
   display: flex;
   align-items: center;
   margin-left: -4px;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-radio-button-color);
 }
 .tds-radio-button * {
   box-sizing: border-box;
@@ -24,7 +31,7 @@
   align-self: flex-start;
 }
 .tds-radio-button .tds-form-input[type=radio] + label {
-  padding: var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) var(--tds-spacing-element-4);
+  padding: var(--radio-button-spacing-4);
   cursor: pointer;
 }
 .tds-radio-button .tds-form-input[type=radio]::before, .tds-radio-button .tds-form-input[type=radio]::after {
@@ -40,52 +47,61 @@
   top: 1px;
 }
 .tds-radio-button .tds-form-input[type=radio]::after {
-  border: 1px solid var(--tds-radio-button-interaction-01);
-  background-color: var(--tds-radio-button-interaction-02);
+  background-color: var(--radio-button-background-inverse);
+  border: 1px solid var(--radio-button-border);
   width: 16px;
   height: 16px;
   left: 4px;
   top: 4px;
 }
-.tds-radio-button .tds-form-input[type=radio]:hover::before {
-  background-color: var(--tds-radio-button-background-hover);
+.tds-radio-button .tds-form-input[type=radio]:hover::after {
+  outline: 2px solid var(--radio-button-background-hover);
 }
 .tds-radio-button .tds-form-input[type=radio]:focus::before {
-  background-color: var(--tds-radio-button-background-focus);
+  background-color: var(--radio-button-focus);
   animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
 }
+.tds-radio-button .tds-form-input[type=radio]:focus::after {
+  outline: 1px solid var(--tds-radio-button-interaction-outline);
+}
 .tds-radio-button .tds-form-input[type=radio]:disabled, .tds-radio-button .tds-form-input[type=radio].disabled {
   cursor: not-allowed;
 }
+.tds-radio-button .tds-form-input[type=radio]:disabled::before, .tds-radio-button .tds-form-input[type=radio].disabled::before {
+  outline: 1px solid var(--radio-button-border-disabled);
+  outline-offset: -4px;
+}
 .tds-radio-button .tds-form-input[type=radio]:disabled::after, .tds-radio-button .tds-form-input[type=radio].disabled::after {
-  border-color: var(--tds-radio-button-border-color-disabled-after);
-  background-color: var(--tds-radio-button-interaction-02);
+  background-color: var(--radio-button-background-disabled);
+  border-color: var(--radio-button-background-disabled);
 }
 .tds-radio-button .tds-form-input[type=radio]:disabled + label, .tds-radio-button .tds-form-input[type=radio].disabled + label {
-  color: var(--tds-radio-button-disabled);
+  color: var(--radio-button-label-disabled);
   cursor: not-allowed;
 }
-.tds-radio-button .tds-form-input[type=radio]:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio].disabled:hover::before {
-  display: none;
-  opacity: 1;
+.tds-radio-button .tds-form-input[type=radio]:disabled:hover::after, .tds-radio-button .tds-form-input[type=radio].disabled:hover::after {
+  outline: none;
+}
+.tds-radio-button .tds-form-input[type=radio]:checked:focus::after {
+  outline: 4px solid var(--radio-button-focus);
 }
 .tds-radio-button .tds-form-input[type=radio]:checked::after {
-  border: 4px solid var(--tds-radio-button-interaction-01);
+  border: 4px solid var(--radio-button-border);
 }
-.tds-radio-button .tds-form-input[type=radio]:checked:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked:disabled::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::before {
+.tds-radio-button .tds-form-input[type=radio]:checked:disabled::before {
+  border: 1px solid var(--radio-button-border-disabled);
   display: block;
   width: 16px;
   height: 16px;
-  left: 4px;
-  top: 4px;
-  border: 1px solid var(--tds-radio-button-color-disabled-before);
+  left: 3px;
+  top: 3px;
   box-sizing: content-box;
 }
-.tds-radio-button .tds-form-input[type=radio]:checked:disabled::after, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::after {
-  border: 4px solid var(--tds-radio-button-interaction-02);
-  background-color: var(--tds-radio-button-color-disabled-after);
-  left: 5px;
-  top: 5px;
+.tds-radio-button .tds-form-input[type=radio]:checked:disabled::after {
+  border: 4px solid var(--radio-button-background-disabled);
+  background-color: var(--radio-button-checked-disabled);
+  left: 4px;
+  top: 4px;
 }
 @keyframes rb-focus {
   0% {

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

@@ -27,7 +27,9 @@ export class TdsRadioButton {
         }
     }
     render() {
-        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" }))));
+        return (h("div", { key: '6f44a40cb5ccf890bdee47d36f47a79d5f8b603c', class: "tds-radio-button" }, h("input", { key: '9f40ae91078cf4ebaff05897d792423b95e5b123', 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: '7309cddb34f1e3bb734e26d534f330d1f7b18fd1', htmlFor: this.radioId }, h("slot", { key: '068c0375f5f8c66bbe8159533a629c8adb21d152', name: "label" }))));
     }
     static get is() { return "tds-radio-button"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,22 +1,8 @@
-:host button {
-  height: 64px;
-  width: 100%;
-  text-align: left;
-  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);
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
-}
-:host button:hover {
-  cursor: pointer;
-  background-color: var(--tds-sidebar-item-state-hover);
-}
-:host button:focus-visible {
-  cursor: pointer;
-  border: 1px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
+:host {
+  margin: 0 var(--side-menu-space-top-level-left);
+  border-bottom: 1px solid var(--side-menu-bottom-menu-border-top);
+  height: var(--side-menu-close-button-wrapper-height);
 }

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

@@ -12,7 +12,9 @@ export class TdsSideMenuCloseButton {
         const sideMenuEl = this.host.closest('tds-side-menu');
         const sideMenuId = sideMenuEl ? sideMenuEl.id : '';
         const buttonProps = Object.assign(Object.assign(Object.assign({ 'aria-label': 'Close' }, (sideMenuId && { 'aria-controls': sideMenuId })), inheritAriaAttributes(this.host)), { 'onClick': TdsSideMenuCloseButton.handleClick });
-        return (h(Host, { key: 'b0e953d2148179c2a4fd1ed352b9024f6939c77c' }, h("button", Object.assign({ key: 'cd5f48b31d9eb62f4327a2918351920d961c446f' }, buttonProps), h("tds-icon", { key: 'f007bf92a2ba7186006aa4dd5126820108badecf', name: "cross", size: "20px", svgTitle: "Cross" }))));
+        return (h(Host, { key: '06e72329fe5335cc157d67b961f32c0e2b14b15c' }, h("tds-side-menu-item", { key: 'b8a4ee2860eb2f437d76870eb7bbcbe8bc167c88', class: {
+                button: true,
+            } }, h("a", { key: '2718a01f4435e774b4ad9589ef6f43db7a6783e2' }, h("div", Object.assign({ key: '4e9f558601da7ff35084cb52a9c8bc55abef66b0', role: "button" }, buttonProps), h("tds-icon", { key: '745174357d1844f6378027f2b9145a0f4f4a2d30', name: "cross", size: "20px", svgTitle: "Cross" }))))));
     }
     static get is() { return "tds-side-menu-close-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,17 +7,19 @@
   bottom: 0;
   display: none;
   height: 68px;
-  border-top: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
+  border-top: 1px solid var(--side-menu-bottom-menu-border-top);
+  margin: 0 var(--side-menu-space-top-level-left);
+  margin-bottom: var(--side-menu-space-top-level-bottom-collapsible);
 }
 :host .icon {
   transform: rotateZ(90deg);
   transition: all 0.2s ease-in-out;
-  width: 20px;
-  height: 20px;
+  width: var(--side-menu-size-icon);
+  height: var(--side-menu-size-icon);
 }
 :host .state-collapsed .icon {
   transform: translateX(-50%) rotateZ(90deg) rotateX(180deg);
-  color: var(--tds-sidebar-side-menu-single-item-color);
+  color: var(--side-menu-single-item-color);
   margin-left: 0;
   position: absolute;
   left: 50%;

package/dist/collection/components/side-menu/side-menu-collapse-button/side-menu-collapse-button.js

@@ -28,14 +28,14 @@ export class TdsSideMenuCollapseButton {
         this.collapsed = this.sideMenuEl.collapsed;
     }
     render() {
-        return (h(Host, { key: 'fecd00dc0ef2ce899b82ce304034b5b6f75704ed', role: "button", tabindex: "0", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
+        return (h(Host, { key: '10cf7ac2dda882a9b8327fb2508a0cb1f9750130', role: "button", tabindex: "0", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
                 this.handleClick();
-            } }, h("div", { key: '6d7ae7bd95d8c4c37895d06ce8d4eaebe08e91dd', class: {
+            } }, h("div", { key: 'd09e8d4c26980a305e8ccb5763f01c34ff1fb374', class: {
                 'wrapper': true,
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '2cc8087248c6f9eee7943039092c5a45f9c2376d', class: {
+            } }, h("tds-side-menu-item", { key: '1977b3d25f2d21fb1dc26e17d05fe27ae2c8756d', class: {
                 button: true,
-            } }, h("a", { key: 'e2510c1f475b5f6ff3d1de367360fc2e34e0c0c0' }, h("svg", { key: '7ea54a6bcfb144cab3045fb34316eac400c59e43', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '3db930370416d9906ccdf821e6d43d0e6633534a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: '7fba28f202ca8089ffce93c051c8d6afc23afef7' }))))));
+            } }, h("a", { key: 'cc6e0f7a1d24dc73b118b426a8f1da20047408af' }, h("svg", { key: 'b6e2bd90c31ea38f012a3bf1d9f925d6255d93fe', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", class: "icon", slot: "icon", fill: "none" }, h("path", { key: '7a99bb435c7e00431ade1f4d1468c52bb57a65fd', fill: "currentColor", d: "M24.59 16.59 17 24.17V4h-2v20.17L7.41 16.6 6 18l10 10 10-10-1.41-1.41Z" })), !this.collapsed && h("slot", { key: '15f34432f5f604a8563efc1cab2a3671e7261d38' }))))));
     }
     static get is() { return "tds-side-menu-collapse-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,12 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   display: block;
+  --side-menu-dropdown-list-item-custom-background: var(--side-menu-background-cover);
+  --side-menu-dropdown-list-item-custom-background-hover: var(--side-menu-item-state-hover);
+  --side-menu-dropdown-list-item-custom-background-active: var(--side-menu-item-state-active);
+  --side-menu-dropdown-list-item-custom-background-selected: var(--side-menu-item-state-selected);
 }
 :host .wrapper {
   display: flex;
@@ -15,23 +22,44 @@
 :host .state-open .menu {
   display: block;
 }
+:host .state-collapsed {
+  --side-menu-dropdown-list-item-custom-background: var(
+    --side-menu-collapsed-dropdown-background
+  );
+  --side-menu-dropdown-list-item-custom-background-hover: var(
+    --side-menu-collapsed-dropdown-background-hover
+  );
+  --side-menu-dropdown-list-item-custom-background-active: var(
+    --side-menu-collapsed-dropdown-background-active
+  );
+  --side-menu-dropdown-list-item-custom-background-selected: var(
+    --side-menu-collapsed-dropdown-background-selected
+  );
+}
 :host .state-collapsed .menu {
   --side-menu-width: 69px;
   position: absolute;
   left: var(--side-menu-width);
-  box-shadow: var(--tds-nav-dropdown-menu-box);
-  background-color: var(--tds-sidebar-side-menu-subnav-background);
+  box-shadow: var(--side-menu-subnav-box-shadow);
+  background-color: var(--side-menu-subnav-background);
+  padding: var(--side-menu-space-top-level-left);
+  padding-top: 0;
+  border-radius: var(--side-menu-subnav-border-radius);
 }
 :host .state-collapsed .menu .heading-collapsed {
   all: unset;
   box-sizing: border-box;
-  padding: 16px 24px 15px;
+  padding: 16px var(--side-menu-collapsed-dropdown-heading-padding-left) 15px;
   min-height: 48px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  border-bottom: 1px solid var(--side-menu-bottom-menu-border-top);
+  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 :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list) {
   width: 100%;

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

@@ -56,13 +56,13 @@ export class TdsSideMenuDropdown {
         this.open = this.defaultOpen;
     }
     render() {
-        return (h(Host, { key: '78a5c58e58b38e84cae96a9afd8166bfe3125a02' }, h("div", { key: '70e8e68e6db938cb2177169ca1836e84eb48cce6', class: {
+        return (h(Host, { key: 'ae900d67fe5245f219b2fb71a41eeb78ad497bea' }, h("div", { key: 'b5cfdc40e8583e35e2657e931a497a61479e32ca', class: {
                 'wrapper': true,
                 'state-open': this.getIsOpenState(),
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '5834d5e804ad422937f2971637b3a70fb1fb676e', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+            } }, h("tds-side-menu-item", { key: '9a55c1f32267e429114830c0f062585be1767819', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
                 this.open = !this.open;
-            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'd454e6148a12c0bd1864b6c148f169ac342e9da2' }, h("slot", { key: '8a2579b751421d9df8e3dd5a84b04a5f844d383c', name: "icon" }), !this.collapsed && (h(Fragment, { key: 'f3419cc2993191186dccc9a208ff8150bf592eeb' }, this.buttonLabel, h("slot", { key: 'ff616384d76d6f3df82ac6abb12d65e4f6a5906d', name: "label" }), h("tds-icon", { key: 'a4acd9c0de3f437766673c57b4d73ac13cc8917b', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: 'db1ec059f4f1910d1fef432baff29810883ec2ef', class: "menu", tabindex: this.collapsed ? '0' : null }, this.collapsed && (h("h3", { key: 'a9f35f976da7ceaf38eb1c1641b43617e4e583c6', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: 'ef8b02b77b93b54f0a9aa4c5fb367356c12e9b82', name: "label" }))), h("slot", { key: '15c7c9e5a6a0615f478c5f93de8753211d17b3c3' })))));
+            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'a97466a591926c54747faebe3faa60c5ef3c0bdf' }, h("slot", { key: '1120e0cd904ee2238f6ff9b6c6d0879323f3e2bb', name: "icon" }), !this.collapsed && (h(Fragment, { key: '3c6853db5e528e45af5a135fff10dace17249862' }, this.buttonLabel, h("slot", { key: '7be68064ccd582bbcc270aae27645ad83258cc80', name: "label" }), h("tds-icon", { key: 'ab532e6d71f82bae89c06739d3d2f7b3abe1c8b5', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: '3b44c7d907275fdd06fae056c2b1cb70f1aa2ae9', class: "menu", tabindex: this.collapsed ? '0' : null }, this.collapsed && (h("h3", { key: '8138edd8dcb7aac405ed2283962b921da8f4e8ef', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '23618d87dbb1bcc0c2be9e0e3785fb522e6d9c2f', name: "label" }))), h("slot", { key: 'f69c3b01c24bc5fb74313a9d3429a49902b0ae99' })))));
     }
     static get is() { return "tds-side-menu-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,7 @@
 :host {
   display: block;
   width: 190px;
+  margin-top: var(--side-menu-space-sub-page-top-group);
 }
 :host [role=list] {
   padding: 0;
@@ -9,6 +10,11 @@
   border-radius: none;
   background-color: var(--tds-header-app-launcher-menu-bg);
 }
+:host > div {
+  display: flex;
+  flex-direction: column;
+  gap: var(--side-menu-space-top-level-vertical-gap-padding);
+}
 :host .state-collapsed ::slotted(*) {
-  border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
+  border-bottom: var(--side-menu-bottom-menu-border-top-collapsed);
 }

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

@@ -15,9 +15,9 @@ export class TdsSideMenuDropdownList {
         this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
     }
     render() {
-        return (h(Host, { key: '3b6baf50c44b45c9b31d90512fcf06e0f7bfec25', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '56e8ee677d733e9a0198856cb97a270fab78d69a', class: {
+        return (h(Host, { key: '8a2c452334c7d90e214bf2f0aa591dbe9191b7b7', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '91808cb38226166fcbbb14da4f873bf58e210d10', class: {
                 'state-collapsed': this.collapsed,
-            } }, h("slot", { key: 'f9fe71e7c9b14c9791d51b758b495c56fa95f8e6' }))));
+            } }, h("slot", { key: '6e82fe0b35eb8959687ffb27ce12434571fae83a' }))));
     }
     static get is() { return "tds-side-menu-dropdown-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,10 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   display: block;
   box-sizing: border-box;
-  height: 48px;
+  height: var(--side-menu-dropdown-list-item-height);
   width: 100%;
 }
 :host .component {
@@ -16,40 +19,60 @@
   display: flex;
   align-items: center;
   height: 100%;
-  padding: 0 24px;
+  padding: 0 var(--side-menu-space-sub-page-left-no-icon);
   width: 100%;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  background-color: var(--tds-header-nav-item-dropdown-opened-background);
-  color: var(--tds-header-nav-item-dropdown-opened-color);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  background-color: var(--side-menu-dropdown-list-item-custom-background);
+  color: var(--side-menu-dropdown-list-item-color);
   border: none;
+  border-radius: var(--side-menu-radius-corner);
 }
 :host .component ::slotted(a:hover),
 :host .component ::slotted(button:hover) {
-  background-color: var(--tds-header-nav-item-dropdown-opened-background-hover);
+  background-color: var(--side-menu-dropdown-list-item-custom-background-hover);
   cursor: pointer;
 }
 :host .component ::slotted(a:active),
 :host .component ::slotted(button:active) {
-  background-color: var(--tds-header-nav-item-dropdown-opened-background-active) !important;
+  background-color: var(--side-menu-dropdown-list-item-custom-background-active);
   cursor: pointer;
 }
 :host .component ::slotted(a:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
-  outline-offset: 1px;
-  z-index: 1;
+  outline: var(--dimension-radius-focus-width-side-menu) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline-offset: calc(var(--dimension-radius-focus-width-side-menu) * -1);
 }
 :host .component.component-selected ::slotted(a),
 :host .component.component-selected ::slotted(button) {
-  box-shadow: inset 4px 0 0 var(--tds-nav-item-border-color-active);
-  background-color: var(--tds-header-nav-item-dropdown-opened-background-selected);
+  background-color: var(--side-menu-dropdown-list-item-custom-background-selected);
+  font-weight: var(--text-component-title-01-font-weight);
+  color: var(--color-foreground-text-strong);
+}
+:host .slot-wrapper {
+  position: relative;
+  height: 100%;
+}
+:host .component.component-selected .slot-wrapper::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: var(--side-menu-space-sub-page-selected-marker-width);
+  height: var(--side-menu-space-sub-page-selected-marker-height);
+  background-color: var(--side-menu-single-subitem-selected-border-color);
+  border-radius: var(--side-menu-radius-corner) 0 0 var(--side-menu-radius-corner);
 }
 :host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(a),
 :host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(button) {
-  padding: 16px 48px 16px 58px;
+  padding: var(--side-menu-space-sub-page-top-bottom) 48px var(--side-menu-space-sub-page-top-bottom) var(--side-menu-space-sub-page-left-with-icon);
 }
 :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;
+  padding: var(--side-menu-space-sub-page-top-bottom) 48px var(--side-menu-space-sub-page-top-bottom) var(--side-menu-space-sub-page-left-profile);
 }

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

@@ -33,13 +33,13 @@ export class TdsSideMenuDropdownListItem {
         }
     }
     render() {
-        return (h(Host, { key: '7aedc4c01840378247f5b6f06f55f8763cd6533d', role: "listitem" }, h("div", { key: '60dd4aa980084396fb930f28a95d811fb394375a', class: {
+        return (h(Host, { key: '20b0ec5c4a2ee927f242a65e328329dc16ac6c2c', role: "listitem" }, h("div", { key: '4b3a9be7eab12fac5366837ca48599005ab6c923', 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: '75a256ed4d6674cb5d3bd7bc29026ea1e13b6489' }))));
+            } }, h("div", { key: 'c8fbacf9ef59a42e30ab95f2805c04ede3a90955', class: "slot-wrapper" }, h("slot", { key: '502c7ab22655b45d07dfa5e7bd256d69be7fd28c' })))));
     }
     static get is() { return "tds-side-menu-dropdown-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,9 @@
 /*
   Contains spacing variables for the layout
 */
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   display: block;
 }
@@ -8,56 +11,66 @@
 :host .component ::slotted(button) {
   all: unset;
   box-sizing: border-box;
-  height: 68px;
+  height: var(--side-menu-single-item-height);
   width: 100%;
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 0 22px;
+  padding: var(--side-menu-space-sub-menu-item-top-and-bottom) var(--side-menu-space-sub-menu-item-chevron-right-padding) var(--side-menu-space-sub-menu-item-top-and-bottom) var(--side-menu-space-sub-menu-item-left);
   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);
+  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-weight: var(--side-menu-text-items-font-weight);
+  color: var(--side-menu-single-item-color);
   cursor: pointer;
+  border-radius: var(--side-menu-radius-corner);
 }
 :host .component ::slotted(tds-side-menu-user), :host .component-has-user ::slotted(button) {
   all: unset;
   box-sizing: border-box;
-  height: 68px;
+  height: var(--side-menu-single-item-height);
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 16px;
-  padding: 0 22px 0 16px;
+  gap: var(--side-menu-space-sub-menu-item-profile-gap);
+  padding: var(--side-menu-space-sub-menu-item-profile-top-bottom) var(--side-menu-space-sub-menu-item-chevron-right-padding) var(--side-menu-space-sub-menu-item-profile-top-bottom) var(--side-menu-space-sub-menu-item-profile-left);
   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);
+  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(--side-menu-single-item-color);
   cursor: pointer;
+  border-radius: var(--side-menu-radius-corner);
 }
 :host .component tds-icon {
   color: red !important;
 }
 :host .component ::slotted(a:focus-visible),
 :host .component ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
-  outline-offset: 1px;
-  z-index: 1;
+  outline: var(--dimension-radius-focus-width-side-menu) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline-offset: calc(var(--dimension-radius-focus-width-side-menu) * -1);
 }
 :host .component:hover ::slotted(a),
 :host .component:hover ::slotted(button) {
-  background-color: var(--tds-sidebar-item-state-hover);
+  background-color: var(--side-menu-item-state-hover);
 }
 :host .component:active ::slotted(a),
 :host .component:active ::slotted(button) {
-  background-color: var(--tds-sidemenu-item-state-active);
+  background-color: var(--side-menu-item-state-active);
 }
 :host .component-collapsed ::slotted(a),
 :host .component-collapsed ::slotted(button) {
-  padding: 0;
+  padding: var(--side-menu-space-collapsed-item-left-right-inner-icon-padding);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -67,7 +80,7 @@
 :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);
+  background-color: var(--side-menu-item-state-selected);
 }
 :host .component-selected:not(:host .component-active) ::slotted(a)::before,
 :host .component-selected:not(:host .component-active) ::slotted(button)::before,
@@ -76,9 +89,10 @@
   position: absolute;
   top: 0;
   left: 0;
-  width: 4px;
-  height: 100%;
-  background-color: var(--tds-sidebar-side-menu-single-subitem-selected-border-color);
+  width: var(--side-menu-space-sub-page-selected-marker-width);
+  height: var(--side-menu-space-sub-menu-item-selected-marker-height);
+  background-color: var(--side-menu-single-subitem-selected-border-color);
+  border-radius: var(--side-menu-radius-corner) 0 0 var(--side-menu-radius-corner);
 }
 
 @media (min-width: 992px) {

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

@@ -69,13 +69,13 @@ export class TdsSideMenuItem {
         this.updateHasUserComponent();
     }
     render() {
-        return (h(Host, { key: '714394a875c4fc72f95f9a4a1d1fd928b6e4cb01' }, h("div", { key: 'b9686737469cbdae97f940c4e20364f45ae4e568', class: {
+        return (h(Host, { key: '019b612aa015b474fcf4df90b8f0302efc095247' }, h("div", { key: '6024a7f1d82368ded88e61db523a753740e9235b', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
                 'component-has-user': this.hasUserComponent,
-            } }, h("slot", { key: 'cde3ca8b26d12e652d11ef11c9ac1dc6852f5860' }))));
+            } }, h("slot", { key: 'c032ef2788acf55f8760d1a668a98c099efd8ae1' }))));
     }
     static get is() { return "tds-side-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TdsSideMenuOverlay {
     render() {
-        return (h(Host, { key: '3ead27185a3cba465ce4789a58d9f5081a3ba476' }, h("div", { key: '5da2afb06899169815745785b3c9dc766a7b51bd' })));
+        return (h(Host, { key: 'c9e7a99c94f16e1d760ccad9928b7bd7a3fc0d95' }, h("div", { key: 'd65c9b859b1f593609f75d41451448cb61fcfa1a' })));
     }
     static get is() { return "tds-side-menu-overlay"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,5 @@
 :host {
   display: flex;
   align-items: center;
-  gap: 16px;
-  height: 68px;
+  gap: var(--side-menu-space-sub-menu-item-profile-gap);
 }

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

@@ -10,7 +10,7 @@ export class TdsSideMenuUser {
         this.imgAlt = undefined;
     }
     render() {
-        return (h(Host, { key: '768662a142cf0f40f24566fedff52e1e25df8bee' }, h("tds-side-menu-user-image", { key: 'fb02fcf45d21aa198bcba356f0502a3aa8cf3d0b', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '658ba6d53ded1f760c2ec2327de765374ba5b6b9', name: "image" })), h("tds-side-menu-user-label", { key: '1ab756a2538fd7bdde5a1714e25dc0d0fae9f7ea', heading: this.heading, subheading: this.subheading })));
+        return (h(Host, { key: '3ff04242fe7bf3f46d0d1fc6620ef48c7d8f587d' }, h("tds-side-menu-user-image", { key: 'f4a77f7cde0219c87e07ebd19ef942c518620c5a', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '6e86ee972bc6163910e1994d9d7f131598d9377e', name: "image" })), h("tds-side-menu-user-label", { key: '1cea8f353bcf0d4aad002895ef1aee4e5fa07268', heading: this.heading, subheading: this.subheading })));
     }
     static get is() { return "tds-side-menu-user"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,9 @@
+:host {
+  height: var(--side-menu-profile-user-image-size);
+}
 :host img,
 :host ::slotted(*) {
-  width: 34px;
-  height: 34px;
+  width: var(--side-menu-profile-user-image-size);
+  height: var(--side-menu-profile-user-image-size);
   border-radius: 50%;
 }

package/dist/collection/components/side-menu/side-menu-user-image/side-menu-user-image.js

@@ -12,7 +12,7 @@ export class TdsSideMenuUserImage {
         this.alt = undefined;
     }
     render() {
-        return (h(Host, { key: 'f673e69a1f9064b9b70def6942bb357b0fbbef1a' }, h("slot", { key: 'd2b6b1b29dd8ab033e229aac63aa864a2d866be6' }), this.src && h("img", { key: 'f72afa71088d565a19d43dec0646f657eba9c5c3', src: this.src, alt: this.alt })));
+        return (h(Host, { key: '3476e2623438191d035d87649197c21f9c973ff8' }, h("slot", { key: 'eac3a23214c41872bd2fc23090c018d829dad25a' }), this.src && h("img", { key: '638d73993aade857ea7b1844b3601a5354490c22', src: this.src, alt: this.alt })));
     }
     static get is() { return "tds-side-menu-user-image"; }
     static get encapsulation() { return "shadow"; }