@scania/tegel 1.38.0 → 1.40.0-stencil-core-4.38.1-beta.0

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

@@ -5,20 +5,20 @@ import generateUniqueId from "../../utils/generateUniqueId";
  */
 export class TdsRadioButton {
     constructor() {
+        /** Unique Radio Button identifier. */
+        this.radioId = generateUniqueId();
+        /** Decides if the Radio Button is checked or not. */
+        this.checked = false;
+        /** Decides if the Radio Button is required or not. */
+        this.required = false;
+        /** Decides if the Radio Button is disabled or not. */
+        this.disabled = false;
         this.handleChange = () => {
             this.tdsChange.emit({
                 radioId: this.radioId,
                 value: this.value,
             });
         };
-        this.name = undefined;
-        this.value = undefined;
-        this.radioId = generateUniqueId();
-        this.checked = false;
-        this.required = false;
-        this.disabled = false;
-        this.tdsAriaLabel = undefined;
-        this.tdsTabIndex = undefined;
     }
     /** Method to programmatically focus the radio button element */
     async focusElement() {
@@ -27,7 +27,7 @@ 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: '48a31826daeef320097430deec2f57188ad3cd80', class: "tds-radio-button" }, h("input", { key: '6bc9711fae2e1ea4b8bc18cd441a364eb0bc4d9c', 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: 'b2dbeea2ca194adea717086ba0d69d023860324d', htmlFor: this.radioId }, h("slot", { key: '422fab6ae9d579cf46d4110a61782a501dfb6a2a', name: "label" }))));
     }
     static get is() { return "tds-radio-button"; }
     static get encapsulation() { return "scoped"; }
@@ -57,8 +57,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Name of Radio Button, used for reference."
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "value": {
                 "type": "string",
@@ -74,8 +76,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Value of input."
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             },
             "radioId": {
                 "type": "string",
@@ -91,8 +95,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Unique Radio Button identifier."
                 },
-                "attribute": "radio-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "radio-id",
                 "defaultValue": "generateUniqueId()"
             },
             "checked": {
@@ -109,8 +115,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Decides if the Radio Button is checked or not."
                 },
-                "attribute": "checked",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "required": {
@@ -127,8 +135,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Decides if the Radio Button is required or not."
                 },
-                "attribute": "required",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "disabled": {
@@ -145,8 +155,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Decides if the Radio Button is disabled or not."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -163,8 +175,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Provides an accessible name for the component"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             },
             "tdsTabIndex": {
                 "type": "number",
@@ -180,8 +194,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Provides a tabindex used when radio buttons are grouped"
                 },
-                "attribute": "tds-tab-index",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-tab-index"
             }
         };
     }

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

@@ -12,7 +12,7 @@ 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: 'de98375064e94f8bfc19a60db7464c6b1c20a46f' }, h("button", Object.assign({ key: '4b9284c8b220d5b9fb0d1e3b346a5dfc209e59e2' }, buttonProps), h("tds-icon", { key: '78a639c37f7a307f42ce68ec239b28c6da8a3221', 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.js

@@ -4,6 +4,7 @@ import { h, Host } from "@stencil/core";
  * */
 export class TdsSideMenuCollapseButton {
     constructor() {
+        this.collapsed = false;
         this.handleClick = () => {
             /** Emit a public event that the user can prevent. */
             const tdsCollapseEvent = this.tdsCollapse.emit({
@@ -18,7 +19,6 @@ export class TdsSideMenuCollapseButton {
                 });
             }
         };
-        this.collapsed = false;
     }
     collapseSideMenuEventHandler(event) {
         this.collapsed = event.detail.collapsed;
@@ -28,14 +28,12 @@ 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: () => {
-                this.handleClick();
-            } }, h("div", { key: '6d7ae7bd95d8c4c37895d06ce8d4eaebe08e91dd', class: {
+        return (h(Host, { key: 'e8b3276624a214cfa8d8c8a7bbb6757d1a6fe1c3' }, h("div", { key: '1c17452256ad8ca0f901178bdf2120076508ee84', class: {
                 'wrapper': true,
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '2cc8087248c6f9eee7943039092c5a45f9c2376d', 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("tds-side-menu-item", { key: '064ec6d7ea6ed2b13223cba39268f484146fee0a', class: { button: true } }, h("button", { key: 'd391bfe9a1e31e85f168b7261b92941b3e64693e', type: "button", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
+                this.handleClick();
+            } }, h("svg", { key: '23a6362a7d6ab754d08ac439314fc94e37ec3a88', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '17a188de96b29b501b76294d8dac4f852edc22a3', "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: 'a1a2408ee34830a190408c808935e33eed8bce5b' }))))));
     }
     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.js

@@ -6,11 +6,12 @@ import { Fragment, h, Host } from "@stencil/core";
  * */
 export class TdsSideMenuDropdown {
     constructor() {
+        /** If the dropdown should be open from the start. */
         this.defaultOpen = false;
-        this.buttonLabel = undefined;
+        /** If the button that opens the dropdown should appear selected. */
         this.selected = false;
+        /** Toggle open state programmatically */
         this.open = false;
-        this.hoverState = undefined;
         this.collapsed = false;
     }
     collapsedSideMenuEventHandler(event) {
@@ -56,13 +57,13 @@ export class TdsSideMenuDropdown {
         this.open = this.defaultOpen;
     }
     render() {
-        return (h(Host, { key: '78a5c58e58b38e84cae96a9afd8166bfe3125a02' }, h("div", { key: '70e8e68e6db938cb2177169ca1836e84eb48cce6', class: {
+        return (h(Host, { key: '2c3887fe8ec9334f7f3b3f46b3bce64712957ae3' }, h("div", { key: 'bedb9fc6f22d0c608b77c2d0d2fe7c8c17eadd59', 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: '83cb1486e99c0f699b02be91bf53df1249076902', 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: 'e21c03415c48022813b3289f8dd80f21486414f0' }, h("slot", { key: '4462d95bf8e7945741cb54d9f363b8d9cac158e0', name: "icon" }), !this.collapsed && (h(Fragment, { key: '1a65252df105ef6ad9bca35f873fe19e71289b80' }, this.buttonLabel, h("slot", { key: 'e35a184bae5c65fde366ed287062becbc6633cac', name: "label" }), h("tds-icon", { key: '7a4328715c67aaf91a3675574f5aadca9ce8ae3d', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: '1e4e674c5e9b8901b5306bee36bf121aa37112e3', class: "menu", tabindex: this.collapsed ? '0' : null }, this.collapsed && (h("h3", { key: '54a5f5f89d595aeae6ac6e41ac553e96466fe4a1', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '20477b6be2c477c48412d0f4bc34f1181bcb00d3', name: "label" }))), h("slot", { key: '9740e5c9cb493e52c104223ec62b47bffc8adc5d' })))));
     }
     static get is() { return "tds-side-menu-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -92,8 +93,10 @@ export class TdsSideMenuDropdown {
                     "tags": [],
                     "text": "If the dropdown should be open from the start."
                 },
-                "attribute": "default-open",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "default-open",
                 "defaultValue": "false"
             },
             "buttonLabel": {
@@ -110,8 +113,10 @@ export class TdsSideMenuDropdown {
                     "tags": [],
                     "text": "The label of the button that opens the dropdown.\nThis is an alternative to the label slot."
                 },
-                "attribute": "button-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-label"
             },
             "selected": {
                 "type": "boolean",
@@ -127,8 +132,10 @@ export class TdsSideMenuDropdown {
                     "tags": [],
                     "text": "If the button that opens the dropdown should appear selected."
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "selected",
                 "defaultValue": "false"
             },
             "open": {
@@ -145,8 +152,10 @@ export class TdsSideMenuDropdown {
                     "tags": [],
                     "text": "Toggle open state programmatically"
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "open",
                 "defaultValue": "false"
             }
         };

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: '38e9f561720b3a68528ae69878138ea8e9085e3c', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '9f2e5ea13fe7f4483ae07d5a58208b27a64bbd1b', class: {
                 'state-collapsed': this.collapsed,
-            } }, h("slot", { key: 'f9fe71e7c9b14c9791d51b758b495c56fa95f8e6' }))));
+            } }, h("slot", { key: '10543e9547fc64683e4f96e0ecb72ff82e3ed3ad' }))));
     }
     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

@@ -26,24 +26,103 @@
 }
 :host .component ::slotted(a:hover),
 :host .component ::slotted(button:hover) {
-  background-color: var(--tds-header-nav-item-dropdown-opened-background-hover);
+  background-color: var(--tds-sidebar-item-state-hover);
   cursor: pointer;
+  position: relative;
+}
+:host .component ::slotted(a:hover)::before,
+:host .component ::slotted(button:hover)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background-color: var(--tds-side-menu-item-hover-indicator);
+}
+:host .component ::slotted(a:hover:focus-visible),
+:host .component ::slotted(button:hover:focus-visible) {
+  background-color: var(--tds-sidebar-item-state-hover);
+  cursor: pointer;
+  position: relative;
+}
+:host .component ::slotted(a:hover:focus-visible)::before,
+:host .component ::slotted(button:hover:focus-visible)::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 4px;
+  height: calc(100% - 6px);
+  background-color: var(--tds-side-menu-item-hover-indicator);
 }
 :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(--tds-sidemenu-item-state-active) !important;
   cursor: pointer;
+  position: relative;
+}
+:host .component ::slotted(a:active)::before,
+:host .component ::slotted(button:active)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background-color: var(--tds-side-menu-item-pressed-indicator);
+}
+:host .component ::slotted(a:active:focus-visible),
+:host .component ::slotted(button:active:focus-visible) {
+  background-color: var(--tds-sidemenu-item-state-active) !important;
+  cursor: pointer;
+  position: relative;
+}
+:host .component ::slotted(a:active:focus-visible)::before,
+:host .component ::slotted(button:active:focus-visible)::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 4px;
+  height: calc(100% - 6px);
+  background-color: var(--tds-side-menu-item-pressed-indicator);
 }
 :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;
+  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline-offset: -2px;
   z-index: 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);
+  position: relative;
+}
+:host .component.component-selected ::slotted(a)::before,
+:host .component.component-selected ::slotted(button)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background-color: var(--tds-sidebar-side-menu-single-subitem-selected-border-color);
+}
+:host .component.component-selected ::slotted(a:focus-visible),
+:host .component.component-selected ::slotted(button:focus-visible) {
+  background-color: var(--tds-header-nav-item-dropdown-opened-background-selected);
+  position: relative;
+}
+:host .component.component-selected ::slotted(a:focus-visible)::before,
+:host .component.component-selected ::slotted(button:focus-visible)::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 4px;
+  height: calc(100% - 6px);
+  background-color: var(--tds-sidebar-side-menu-single-subitem-selected-border-color);
 }
 :host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(a),
 :host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(button) {

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

@@ -4,6 +4,7 @@ import { h, Host } from "@stencil/core";
  * */
 export class TdsSideMenuDropdownListItem {
     constructor() {
+        /** If the item should appear selected. */
         this.selected = false;
         this.dropdownHasIcon = false;
         this.dropdownHasUser = false;
@@ -33,13 +34,13 @@ export class TdsSideMenuDropdownListItem {
         }
     }
     render() {
-        return (h(Host, { key: '7aedc4c01840378247f5b6f06f55f8763cd6533d', role: "listitem" }, h("div", { key: '60dd4aa980084396fb930f28a95d811fb394375a', class: {
+        return (h(Host, { key: '7d711b603579ec67a9f0312071519e31f4a15709', role: "listitem" }, h("div", { key: 'db890287036e3e85f10f7c76454e8ca91ada6f7c', 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("slot", { key: '944534e13549524e2e40fd8ad8e0b1d61e1bdbcf' }))));
     }
     static get is() { return "tds-side-menu-dropdown-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -69,8 +70,10 @@ export class TdsSideMenuDropdownListItem {
                     "tags": [],
                     "text": "If the item should appear selected."
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "selected",
                 "defaultValue": "false"
             }
         };

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

@@ -43,17 +43,77 @@
 :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;
+  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline-offset: -2px;
   z-index: 1;
 }
 :host .component:hover ::slotted(a),
-:host .component:hover ::slotted(button) {
+:host .component:hover ::slotted(button),
+:host .component:hover ::slotted(tds-side-menu-user) {
   background-color: var(--tds-sidebar-item-state-hover);
+  position: relative;
+}
+:host .component:hover ::slotted(a)::before,
+:host .component:hover ::slotted(button)::before,
+:host .component:hover ::slotted(tds-side-menu-user)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background-color: var(--tds-side-menu-item-hover-indicator);
+}
+:host .component:hover ::slotted(a:focus-visible),
+:host .component:hover ::slotted(button:focus-visible),
+:host .component:hover ::slotted(tds-side-menu-user:focus-visible) {
+  background-color: var(--tds-sidebar-item-state-hover);
+  position: relative;
+}
+:host .component:hover ::slotted(a:focus-visible)::before,
+:host .component:hover ::slotted(button:focus-visible)::before,
+:host .component:hover ::slotted(tds-side-menu-user:focus-visible)::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 4px;
+  height: calc(100% - 6px);
+  background-color: var(--tds-side-menu-item-hover-indicator);
 }
 :host .component:active ::slotted(a),
-:host .component:active ::slotted(button) {
+:host .component:active ::slotted(button),
+:host .component:active ::slotted(tds-side-menu-user) {
+  background-color: var(--tds-sidemenu-item-state-active);
+  position: relative;
+}
+:host .component:active ::slotted(a)::before,
+:host .component:active ::slotted(button)::before,
+:host .component:active ::slotted(tds-side-menu-user)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background-color: var(--tds-side-menu-item-pressed-indicator);
+}
+:host .component:active ::slotted(a:focus-visible),
+:host .component:active ::slotted(button:focus-visible),
+:host .component:active ::slotted(tds-side-menu-user:focus-visible) {
   background-color: var(--tds-sidemenu-item-state-active);
+  position: relative;
+}
+:host .component:active ::slotted(a:focus-visible)::before,
+:host .component:active ::slotted(button:focus-visible)::before,
+:host .component:active ::slotted(tds-side-menu-user:focus-visible)::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 4px;
+  height: calc(100% - 6px);
+  background-color: var(--tds-side-menu-item-pressed-indicator);
 }
 :host .component-collapsed ::slotted(a),
 :host .component-collapsed ::slotted(button) {
@@ -66,8 +126,8 @@
 :host .component-selected:not(:host .component-active) ::slotted(a),
 :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);
+  position: relative;
 }
 :host .component-selected:not(:host .component-active) ::slotted(a)::before,
 :host .component-selected:not(:host .component-active) ::slotted(button)::before,
@@ -80,6 +140,23 @@
   height: 100%;
   background-color: var(--tds-sidebar-side-menu-single-subitem-selected-border-color);
 }
+:host .component-selected:not(:host .component-active) ::slotted(a:focus-visible),
+:host .component-selected:not(:host .component-active) ::slotted(button:focus-visible),
+:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user:focus-visible) {
+  background-color: var(--tds-sidebar-item-state-selected);
+  position: relative;
+}
+:host .component-selected:not(:host .component-active) ::slotted(a:focus-visible)::before,
+:host .component-selected:not(:host .component-active) ::slotted(button:focus-visible)::before,
+:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user:focus-visible)::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 4px;
+  height: calc(100% - 6px);
+  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

@@ -5,7 +5,10 @@ import dfs from "../../../utils/dfs";
  * */
 export class TdsSideMenuItem {
     constructor() {
+        /** If the item should appear selected. */
         this.selected = false;
+        /** If the item should appear active. Can be used when the item is
+         * triggering a dropdown, and the dropdown is open, for example. */
         this.active = false;
         this.collapsed = false;
         this.hasUserComponent = false;
@@ -69,13 +72,13 @@ export class TdsSideMenuItem {
         this.updateHasUserComponent();
     }
     render() {
-        return (h(Host, { key: '714394a875c4fc72f95f9a4a1d1fd928b6e4cb01' }, h("div", { key: 'b9686737469cbdae97f940c4e20364f45ae4e568', class: {
+        return (h(Host, { key: '94dc12f57a0eedb5ab1528394352c4a7fcea55ff' }, h("div", { key: '3336a6d1af3c573fdbbbf590fae2be3381c89163', 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: '5c92976a5aa367142e2af23fdacb6d67c3d2b36c' }))));
     }
     static get is() { return "tds-side-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -105,8 +108,10 @@ export class TdsSideMenuItem {
                     "tags": [],
                     "text": "If the item should appear selected."
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "selected",
                 "defaultValue": "false"
             },
             "active": {
@@ -123,8 +128,10 @@ export class TdsSideMenuItem {
                     "tags": [],
                     "text": "If the item should appear active. Can be used when the item is\ntriggering a dropdown, and the dropdown is open, for example."
                 },
-                "attribute": "active",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "active",
                 "defaultValue": "false"
             }
         };

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: '15e4b102af83962079d9bc9104c3e4d243cea947' }, h("div", { key: '52ed88b0ccf8ae02c3d83849f610475b0ad55065' })));
     }
     static get is() { return "tds-side-menu-overlay"; }
     static get encapsulation() { return "shadow"; }