@scania/tegel 1.38.0 → 1.39.0

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

@@ -121,16 +121,20 @@
   margin-left: 0;
   margin-right: var(--tds-spacing-element-16);
 }
-.tds-accordion-item:first-child {
-  margin-bottom: -1px;
-  border-bottom: 1px solid var(--tds-accordion-border);
-}
 .tds-accordion-item:has(.tds-accordion-header-icon-start:focus-visible), .tds-accordion-item:has(.tds-accordion-header-icon-end: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;
   background-color: var(--tds-accordion-background-focus);
+  margin-bottom: -1px;
+  border-bottom: 1px solid var(--tds-accordion-border);
+}
+.tds-accordion-item:has(.tds-accordion-header-icon-start:focus-visible):hover, .tds-accordion-item:has(.tds-accordion-header-icon-end:focus-visible):hover {
+  background-color: var(--tds-accordion-background-hover);
+}
+.tds-accordion-item:has(.tds-accordion-header-icon-start:focus-visible):active, .tds-accordion-item:has(.tds-accordion-header-icon-end:focus-visible):active {
+  background-color: var(--tds-accordion-background-active);
 }
 .tds-accordion-item[disabled=true]:focus-visible {
   border-color: var(--tds-accordion-border);

package/dist/collection/components/card/card.css

@@ -37,6 +37,14 @@
 .card .card-header.below {
   padding-top: 16px;
 }
+.card .card-header.expandable tds-icon {
+  cursor: pointer;
+  margin-left: auto;
+  transition: transform 160ms ease-in-out, opacity 120ms ease-in-out;
+}
+.card .card-header.expandable tds-icon.rotated {
+  transform: rotate(180deg);
+}
 .card .header-subheader {
   display: flex;
   flex-direction: column;
@@ -115,4 +123,8 @@ button:active {
 .above-header-stretch .card-body slot[name=body]::slotted(*) {
   max-width: unset;
   flex-grow: 1;
+}
+
+:host([expandable]:not([expanded])) .card-body slot[name=body] {
+  display: none;
 }

package/dist/collection/components/card/card.js

@@ -11,6 +11,11 @@ import hasSlot from "../../utils/hasSlot";
  */
 export class TdsCard {
     constructor() {
+        this.toggleExpand = () => {
+            if (this.expandable) {
+                this.expanded = !this.expanded;
+            }
+        };
         this.handleClick = () => {
             this.tdsClick.emit({
                 cardId: this.cardId,
@@ -20,7 +25,7 @@ export class TdsCard {
             const usesHeaderSlot = hasSlot('header', this.host);
             const usesSubheaderSlot = hasSlot('subheader', this.host);
             const usesThumbnailSlot = hasSlot('thumbnail', this.host);
-            return (h("div", { class: "card-header" }, usesThumbnailSlot && h("slot", { name: "thumbnail" }), h("div", { class: "header-subheader", id: `header-${this.cardId}` }, this.header && h("span", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("span", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" }))));
+            return (h("div", { class: { 'card-header': true, 'expandable': this.expandable, 'expanded': this.expanded } }, usesThumbnailSlot && h("slot", { name: "thumbnail" }), h("div", { class: "header-subheader", id: `header-${this.cardId}` }, this.header && h("span", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("span", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), this.expandable && (h("tds-button", { type: "button", variant: "ghost", size: "sm", "tds-aria-label": "Toggle card content", "aria-expanded": this.expanded ? 'true' : 'false', onClick: this.toggleExpand }, h("tds-icon", { slot: "icon", size: "16px", name: "chevron_down", svgTitle: "Chevron Down", class: { rotated: this.expanded } })))));
         };
         this.getCardContent = () => {
             const usesBodySlot = hasSlot('body', this.host);
@@ -39,6 +44,8 @@ export class TdsCard {
         this.clickable = false;
         this.stretch = false;
         this.cardId = generateUniqueId();
+        this.expandable = false;
+        this.expanded = false;
     }
     render() {
         const cardStyle = {
@@ -48,7 +55,7 @@ export class TdsCard {
             [`${this.imagePlacement}-stretch`]: this.stretch,
         };
         const ariaLabel = this.header ? this.header : `Card ${this.cardId}`;
-        return (h(Host, { key: '39dde374a44320884af4b8a0da33e24c983417c5', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
+        return (h(Host, { key: '14e4d2ece54e021a186661c8dfef2dae78791782', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
     }
     static get is() { return "tds-card"; }
     static get encapsulation() { return "shadow"; }
@@ -239,6 +246,42 @@ export class TdsCard {
                 "attribute": "card-id",
                 "reflect": false,
                 "defaultValue": "generateUniqueId()"
+            },
+            "expandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables expandable behaviour.\nWhen true, clicking the header toggles content visibility."
+                },
+                "attribute": "expandable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tracks the current expanded state when expandable is enabled."
+                },
+                "attribute": "expanded",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js

@@ -57,10 +57,18 @@ export class TdsDropdownOption {
             }
         };
         this.handleFocus = (event) => {
-            this.tdsFocus.emit(event);
+            // Focus events are now handled by the parent dropdown component
+            // Only emit if this is a standalone option (not within a dropdown)
+            if (!this.parentElement) {
+                this.tdsFocus.emit(event);
+            }
         };
         this.handleBlur = (event) => {
-            this.tdsBlur.emit(event);
+            // Blur events are now handled by the parent dropdown component
+            // Only emit if this is a standalone option (not within a dropdown)
+            if (!this.parentElement) {
+                this.tdsBlur.emit(event);
+            }
         };
         this.value = undefined;
         this.internalValue = undefined;
@@ -81,7 +89,7 @@ export class TdsDropdownOption {
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: 'd35a3153be292b1656d0efca93f06bfc1357041b' }, h("div", { key: '384353f9868a3fb559ca4140d5cd4f5553e024ad', class: `dropdown-option
+        return (h(Host, { key: '5448be3efbb06ae6d0fa3797f4b724c2d656d7a3' }, h("div", { key: '78945300c0bddb4ce95ab6f8de50eded1383dec7', class: `dropdown-option
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -91,6 +99,8 @@ export class TdsDropdownOption {
                 }
             } }, h("tds-checkbox", { onTdsChange: (event) => {
                 this.handleMultiselect(event);
+            }, onTdsBlur: (event) => {
+                event.stopPropagation();
             }, disabled: this.disabled, checked: this.selected, tdsAriaLabel: this.tdsAriaLabel, class: {
                 [this.size]: true,
             } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected, "aria-label": this.tdsAriaLabel, onClick: () => {

package/dist/collection/components/dropdown/dropdown.js

@@ -14,6 +14,7 @@ function hasValueChanged(newValue, currentValue) {
  */
 export class TdsDropdown {
     constructor() {
+        this.hasFocus = false;
         this.setDefaultOption = () => {
             if (this.internalDefaultValue) {
                 // Convert the internal default value to an array if it's not already
@@ -96,6 +97,7 @@ export class TdsDropdown {
         this.handleFilter = (event) => {
             this.tdsInput.emit(event);
             const query = event.target.value.toLowerCase();
+            this.filterQuery = query;
             /* Check if the query is empty, and if so, show all options */
             const children = this.getChildren();
             if (query === '') {
@@ -121,26 +123,33 @@ export class TdsDropdown {
             }
         };
         this.handleFilterReset = () => {
-            this.reset();
+            // only reset selected values when filterquery is blank
+            if (!this.filterQuery.length) {
+                this.reset();
+            }
             this.inputElement.value = '';
             this.handleFilter({ target: { value: '' } });
             this.inputElement.focus();
             // Add this line to ensure internal value is cleared
             this.internalValue = '';
         };
-        this.handleFocus = (event) => {
+        this.handleFocus = () => {
             this.open = true;
             this.filterFocus = true;
-            if (this.multiselect && this.inputElement) {
+            if (this.inputElement) {
                 this.inputElement.value = '';
             }
-            this.tdsFocus.emit(event);
+            // Focus event is now handled by focusin listener
             if (this.filter) {
                 this.handleFilter({ target: { value: '' } });
             }
         };
-        this.handleBlur = (event) => {
-            this.tdsBlur.emit(event);
+        this.handleBlur = () => {
+            // Handle internal state changes when component loses focus
+            this.filterFocus = false;
+            if (this.inputElement) {
+                this.inputElement.value = this.getValue();
+            }
         };
         this.resetInput = () => {
             const inputEl = this.host.querySelector('input');
@@ -172,6 +181,7 @@ export class TdsDropdown {
         this.filterFocus = undefined;
         this.internalDefaultValue = undefined;
         this.selectedOptions = [];
+        this.filterQuery = '';
     }
     handleValueChange(newValue) {
         // Normalize to array
@@ -315,7 +325,7 @@ export class TdsDropdown {
             }
         }
         // Always trigger the focus event to open the dropdown
-        this.handleFocus({});
+        this.handleFocus();
     }
     /** Method for closing the Dropdown. */
     async close() {
@@ -337,6 +347,25 @@ export class TdsDropdown {
             }
         }
     }
+    onFocusIn(event) {
+        // Check if the focus is within this dropdown component
+        if (this.host.contains(event.target)) {
+            if (!this.hasFocus) {
+                this.hasFocus = true;
+                this.tdsFocus.emit(event);
+            }
+        }
+    }
+    onFocusOut(event) {
+        // Only emit blur if focus is actually leaving the entire dropdown component
+        const relatedTarget = event.relatedTarget;
+        // If relatedTarget is null (focus going to body/window) or outside the component, emit blur
+        if (this.hasFocus && (!relatedTarget || !this.host.contains(relatedTarget))) {
+            this.hasFocus = false;
+            this.handleBlur();
+            this.tdsBlur.emit(event);
+        }
+    }
     async onKeyDown(event) {
         var _a;
         // Get the active element
@@ -456,9 +485,9 @@ export class TdsDropdown {
         // Generate unique IDs for associating labels and helpers with the input/button
         const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId()}` : undefined;
         const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId()}` : undefined;
-        return (h(Host, { key: '69cdc96b6983b9556b4a9133ef8a0d2fa1e9e18e', class: {
+        return (h(Host, { key: '66323582950b2ac2a9e15cbcde747ab377af8c4b', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '1cc3f825bc81ca34af7bbe845bd900531f724172', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '213f3149de4b9bc4c147ab658d6d5199d3360181', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'f931805898336e462f931705f6d6b7bec8b2516a', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '56097022f7ae2d0a5501ab0dfbf1f802d3c5802f', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -475,13 +504,7 @@ export class TdsDropdown {
             // eslint-disable-next-line no-return-assign
             ref: (inputEl) => (this.inputElement = inputEl), class: {
                 placeholder: this.labelPosition === 'inside',
-            }, type: "text", placeholder: this.filterFocus ? '' : this.placeholder, value: this.multiselect && this.filterFocus ? '' : this.getValue(), disabled: this.disabled, onInput: (event) => this.handleFilter(event), onBlur: (event) => {
-                this.filterFocus = false;
-                if (this.multiselect) {
-                    this.inputElement.value = this.getValue();
-                }
-                this.handleBlur(event);
-            }, onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => {
+            }, type: "text", placeholder: this.filterFocus ? '' : this.placeholder, value: this.multiselect && this.filterFocus ? this.filterQuery : this.getValue(), disabled: this.disabled, onInput: (event) => this.handleFilter(event), onFocus: () => this.handleFocus(), onKeyDown: (event) => {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
@@ -508,7 +531,7 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'af7815b0cb8b36e37278965094d5198a9ff5aba9', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '165c4d884bd364ecbbc61f071e1302a31213b538', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -519,11 +542,11 @@ export class TdsDropdown {
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: '736b82b5f716fa818c17ae161341bc6b131d9cf2', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'f1c1471cbec4a6dd8830a8540f54e142c559d539', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'aa138a349c073158785ae1177c0879604f6b8d90', id: helperId, class: {
+            } }, h("slot", { key: '3ad8c4742a8f8a8483769be189042b557ed7a37c', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '71918f0b750cf920246034a19444f6e694333031', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'ce6219f445aa2282ef31434b8a363c62c635d347', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: '936a8bd7db8a0ed994d6827c26bbb6732420fea4', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '1868cc5a58e787aa686754cea80b1a9b3b1f3a82', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -865,7 +888,8 @@ export class TdsDropdown {
             "filterResult": {},
             "filterFocus": {},
             "internalDefaultValue": {},
-            "selectedOptions": {}
+            "selectedOptions": {},
+            "filterQuery": {}
         };
     }
     static get events() {
@@ -1112,6 +1136,18 @@ export class TdsDropdown {
                 "target": "window",
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "focusin",
+                "method": "onFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "keydown",
                 "method": "onKeyDown",

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

@@ -22,10 +22,10 @@
 }
 :host ::slotted(button:focus-visible),
 :host ::slotted(a:focus-visible) {
+  border: none;
   outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
-  outline-offset: 1px;
-  z-index: 1;
+  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline-offset: -2px;
 }
 :host .component-active ::slotted(button),
 :host .component-active ::slotted(a) {

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

@@ -8,22 +8,28 @@
   color: var(--tds-link);
   text-decoration: underline;
 }
+:host ::slotted(*:hover) {
+  color: var(--tds-link-hover);
+  text-decoration: none;
+}
+:host .no-underline ::slotted(*) {
+  text-decoration: none;
+}
+:host .no-underline ::slotted(*:hover) {
+  color: var(--tds-link-hover);
+  text-decoration: underline;
+  text-decoration-color: var(--tds-link-hover);
+}
 :host ::slotted(*:focus-visible) {
   color: var(--tds-link-focus);
   text-decoration: none;
-  outline: 2px solid var(--tds-link-focus);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white), 0 0 0 3px var(--tds-link-focus);
 }
 :host ::slotted(*:active) {
   color: var(--tds-link);
   text-decoration: underline;
   text-decoration-color: var(--tds-link);
 }
-:host ::slotted(*:hover) {
-  color: var(--tds-link-hover);
-  text-decoration: underline;
-  text-decoration-color: var(--tds-link-hover);
-}
 :host ::slotted(*:visited) {
   color: var(--tds-link-visited);
   text-decoration-color: var(--tds-link-visited);
@@ -36,14 +42,6 @@
   pointer-events: none;
 }
 
-.no-underline ::slotted(*) {
-  text-decoration: none;
-}
-
-.no-underline:hover ::slotted(*) {
-  text-decoration: none;
-}
-
 .standalone ::slotted(*) {
   font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);

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

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

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

@@ -16,6 +16,7 @@ export class TdsPopoverCanvas {
         this.offsetDistance = 8;
         this.modifiers = [];
         this.tdsAlertDialog = 'dialog';
+        this.modeVariant = null;
         this.childRef = undefined;
     }
     /** Property for closing popover programmatically */
@@ -28,12 +29,14 @@ export class TdsPopoverCanvas {
     }
     render() {
         var _a;
-        return (h(Host, { key: '58db11b606cb1211fc569e0868a602ed935b46fa' }, h("tds-popover-core", Object.assign({ key: 'be884f4ea53cbb76e2c07cd87fba10c66cb18618', role: this.tdsAlertDialog }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '007d1ad318e2819ca95b3f855540308527e9bea4', class: {
+                [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
+            } }, h("tds-popover-core", Object.assign({ key: '3d2c887c763dec9f93cc943a29d108ec4708df25', role: this.tdsAlertDialog }, this.inheritedAttributes, { class: {
                 'tds-popover-canvas': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click', ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: 'b7436bdce7bb19745ac25dfc5a9db16f308db41c' }, h("slot", { key: '6436d57046cde0d03359899690be4af1b17fe506' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: 'b16b226f5b748403ce4a20e2e289b7fb0d0e3554' }, h("slot", { key: 'ecdee2eaebdd35bb0ef634b8a0ef9bbf8e1a3fc7' })))));
     }
     static get is() { return "tds-popover-canvas"; }
     static get encapsulation() { return "scoped"; }
@@ -204,14 +207,9 @@ export class TdsPopoverCanvas {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "Object[]",
-                    "resolved": "Object[]",
-                    "references": {
-                        "Object": {
-                            "location": "global",
-                            "id": "global::Object"
-                        }
-                    }
+                    "original": "object[]",
+                    "resolved": "object[]",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
@@ -238,6 +236,24 @@ export class TdsPopoverCanvas {
                 "attribute": "tds-alert-dialog",
                 "reflect": false,
                 "defaultValue": "'dialog'"
+            },
+            "modeVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mode variant of the component, based on current mode."
+                },
+                "attribute": "mode-variant",
+                "reflect": false,
+                "defaultValue": "null"
             }
         };
     }

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

@@ -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: '71376a20166f28551ed139362144a79a20e35213' }, h("div", { key: 'a68ff13ee66ff8866f41bd36dbd5f2a38408ed6c', 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: '087dae21fe6c6f7f0bb7065d5b8ea4ab1f94a759', class: { button: true } }, h("button", { key: 'fd2202b8a038728b756978fac15eaff80f425d25', type: "button", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
+                this.handleClick();
+            } }, h("svg", { key: '35c741c7fc3a9d009313cb16f6d656033f757b2f', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: 'e9b567c3137eef6b8b309cea7606ebae227ebdf9', "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: 'b6af5dcd3554623803af3d88243eeeef573e20aa' }))))));
     }
     static get is() { return "tds-side-menu-collapse-button"; }
     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,102 @@
 }
 :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;
-  z-index: 1;
+  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline-offset: -2px;
 }
 :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) {