@scania/tegel 1.38.0-handleValueChange-correct-logic-beta.0 → 1.38.0

package/dist/collection/components/slider/slider.css

@@ -27,6 +27,12 @@ tds-slider .sr-only {
   pointer-events: none;
 }
 
+.tds-slider-wrapper:focus-within {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: 2px;
+  border-radius: var(--tds-spacing-element-4);
+}
+
 .tds-slider {
   width: 100%;
   display: flex;
@@ -38,12 +44,6 @@ tds-slider .sr-only {
   height: 20px;
   position: relative;
 }
-.tds-slider .tds-slider-inner:focus-within .tds-slider__thumb-inner {
-  outline: var(--tds-slider-thumb-focus-outline);
-  box-shadow: var(--tds-slider-thumb-focus-box-shadow);
-  outline-offset: var(--tds-slider-thumb-focus-outline-offset);
-  z-index: 1;
-}
 .tds-slider .tds-slider__controls {
   position: relative;
   top: -25px;
@@ -81,22 +81,29 @@ tds-slider .sr-only {
   justify-content: center;
   border-radius: 4px 4px 0 0;
 }
-.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number] {
-  width: auto;
-  padding: 12px;
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field {
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-slider-inputfield-number-color);
+  border: 0;
+  background-color: transparent;
   text-align: center;
+  padding: 12px;
+  box-shadow: inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);
+  border-radius: 4px 4px 0 0;
   appearance: textfield;
 }
-.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-outer-spin-button,
-.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-inner-spin-button {
-  appearance: none;
-  margin: 0;
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover {
+  box-shadow: inset 0 -1px 0 var(--tds-grey-600);
 }
-.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input:read-only {
-  text-align: left;
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus {
+  box-shadow: inset 0 -2px 0 var(--tds-blue-400);
+  outline: 0;
 }
-.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-icon__readonly {
-  right: 12px;
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field::-webkit-outer-spin-button,
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field::-webkit-inner-spin-button {
+  appearance: none;
+  margin: 0;
 }
 .tds-slider label {
   font: var(--tds-detail-05);
@@ -115,7 +122,7 @@ tds-slider .sr-only {
   letter-spacing: var(--tds-detail-01-ls);
   user-select: none;
   border-radius: 4px;
-  padding: 8px 11px;
+  padding: 8px;
   position: absolute;
   transform: translate(-50%, -100%);
   top: -24px;
@@ -132,9 +139,6 @@ tds-slider .sr-only {
 .tds-slider .tds-slider__thumb {
   position: absolute;
 }
-.tds-slider .tds-slider__thumb:hover .tds-slider__value {
-  display: block;
-}
 .tds-slider .tds-slider__thumb .tds-slider__thumb-inner {
   width: 20px;
   height: 20px;
@@ -160,7 +164,7 @@ tds-slider .sr-only {
 }
 .tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before {
   display: block;
-  background-color: var(--tds-slider-thumb-hover);
+  opacity: 0.08;
 }
 .tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed {
   width: 24px;
@@ -168,7 +172,7 @@ tds-slider .sr-only {
 }
 .tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before {
   display: block;
-  background-color: var(--tds-slider-thumb-pressed);
+  opacity: 0.16 !important;
 }
 .tds-slider .tds-slider__value-dividers-wrapper {
   position: relative;
@@ -303,7 +307,7 @@ tds-slider .sr-only {
 }
 
 .tds-slider .tds-slider__controls .tds-slider__control {
-  cursor: pointer;
+  cursor: default;
 }
 .tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon, .tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon {
   color: var(--tds-slider-controls-color);

package/dist/collection/components/slider/slider.js

@@ -267,25 +267,6 @@ export class TdsSlider {
         const rounded = this.roundToStep(newValue);
         this.forceValueUpdate(rounded.toString());
     }
-    /** Updates the slider value when using tds-text-field (reads value from host element) */
-    updateSliderValueFromTextField(event) {
-        const hostEl = event.target; // tds-text-field host element exposes a value prop
-        const raw = hostEl && typeof hostEl.value !== 'undefined' ? hostEl.value : '';
-        let newValue = parseFloat(raw);
-        if (Number.isNaN(newValue)) {
-            return;
-        }
-        const minNum = parseFloat(this.min);
-        const maxNum = parseFloat(this.max);
-        if (newValue < minNum) {
-            newValue = minNum;
-        }
-        else if (newValue > maxNum) {
-            newValue = maxNum;
-        }
-        const rounded = this.roundToStep(newValue);
-        this.forceValueUpdate(rounded.toString());
-    }
     /** Updates the slider value based on the current input value when enter is pressed */
     handleInputFieldEnterPress(event) {
         event.stopPropagation();
@@ -306,16 +287,7 @@ export class TdsSlider {
         }
     }
     calculateInputSizeFromMax() {
-        const input = this.host.querySelector('tds-text-field input[type="number"]');
-        if (input) {
-            if (this.readOnly) {
-                // explicit size to fit suffix icon
-                input.style.width = `${52 + this.max.length * 8}px`;
-            }
-            else {
-                input.setAttribute('size', `${this.max.length}`);
-            }
-        }
+        return this.max.length;
     }
     controlsStep(delta, event) {
         if (this.readOnly || this.disabled) {
@@ -386,7 +358,6 @@ export class TdsSlider {
         }
     }
     componentDidLoad() {
-        this.calculateInputSizeFromMax();
         if (!this.resizeObserverAdded) {
             this.resizeObserverAdded = true;
             const resizeObserver = new ResizeObserver(() => {
@@ -430,30 +401,30 @@ export class TdsSlider {
     }
     render() {
         const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
-        return (h("div", { key: '6077f356c7723ce54bdee208039af07154499684', class: {
+        return (h("div", { key: 'b4dd7706df0be052f0028a5f8ba6b6158f403b13', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { key: '0ee6d0f1c8661bdcae6a3df5eca7b154306338eb', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: 'cfb2700cf9d16c204182a72f9f00ccd03b58ef89', class: "sr-only", "aria-live": "assertive", ref: (el) => {
+            } }, h("input", { key: '672c2aaa6dfee6489cd5e764ef151728c2af10fc', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: '8c7200436a9ef6524a3b2d554a2556bda8cc6afd', class: "sr-only", "aria-live": "assertive", ref: (el) => {
                 this.ariaLiveElement = el;
-            } }), h("div", { key: 'b90c1d06afd96682a108b24506660e7544c4be38', class: {
+            } }), h("div", { key: '1ce8e7ddccd19ca15733683768900c8fcde514d3', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '3d0bc3f42de59e4397dc8da0edf7ec29802ee8ab', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'c3868e2225cc4dacf60d23e31bdb2b106b85ce22', class: "tds-slider__input-values" }, h("div", { key: 'af100279435087101f37043ea083e5e33d930079', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '83c0078ec0ae39d29582e1ff1f4c3fc5f3a09483', class: "tds-slider__controls" }, h("div", { key: '31947e6cd76c35b8b8e7c0fb92b777e3bf8538b7', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '4c005f8c628236482eecdac51bd43a860f9e38d9', name: "minus", size: "16px" })))), h("div", { key: 'c6f21ded71244d202e255a90039f03872af09d5a', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: 'df1e820e1077ccec24826e38ba1b1fdd8dc0ae90', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: 'f8cadf57f46068f61d1afc2bbcc30997a750705b', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '389ba385948b6772e803b7b9ec858061451f7534', class: "tds-slider__track", ref: (el) => {
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '54616f1cb5e4c13541f6f5fa700ddf4b1c4a9493', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'f6b8283409e9fb74ebf5fe89af5d88c29fde904d', class: "tds-slider__input-values" }, h("div", { key: '30532947c70dc8e0612fea3c01c25a5e86dacfca', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '6c001b8caba4a396bb9f4f4f3ba7b9ee6ca36f84', class: "tds-slider__controls" }, h("div", { key: '7a5804b789f84a4cd749c21d0ecc4b73bf7bae09', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '41db4dc1a8fda4972303fd48400078035648ca5c', name: "minus", size: "16px" })))), h("div", { key: 'f3cb2039ec4245b1d5c58bb819675381c4490197', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '38bf8ca015894f3a42a0e9e33800cc7f0ff9c8d5', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '6a5aaa5d652d55f23db24b1b531664d125fc2a23', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '0c99475a8bdb1fdec04358421ec34630111a63b8', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
             }, tabindex: this.disabled ? '-1' : '0', role: "presentation", onFocus: () => {
                 if (this.thumbElement) {
                     this.thumbElement.focus();
                 }
-            } }, h("div", { key: '5409aec334156fc5c5ac6a2cdbcb38ee50e35259', class: "tds-slider__track-fill", ref: (el) => {
+            } }, h("div", { key: 'd3ece50db5fbc17e4ebbf4272faa17fcf201dccf', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: '8e0953ed9771846db11b9f79f6844065494f1b01', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: 'c304176e6a240820418d80aa8bfad35fbbdaf0f4', class: "tds-slider__thumb", ref: (el) => {
                 this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: 'ed08cca6219adff68babc9c535aff278a1b3325e', class: "tds-slider__value" }, this.value, h("svg", { key: 'dc46d041d7c123400a42ea9c9472cf0a329eb4a1', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3d46edb2069bd056a2ae09efa4bfa7f6319afe3b', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '202f2b005a969cd7eb3396c14ef6f72224fcd56a', class: "tds-slider__thumb-inner", ref: (el) => {
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: '7c46c4f8b3cc3bf3aeae7c841a2f38e7b3d1dfbb', class: "tds-slider__value" }, this.value, h("svg", { key: '871a05a8fc1560c8e94071172c57563d63e10f22', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0c99295a2049b3aac5d0472880e63acc4318fa07', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: 'bf42f5b512d3041a88bd8cc420a5a4aaeb875e49', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: 'ca2e84c4bccc24ebbc58a4915f62b5ecb77462c9', class: "tds-slider__input-values" }, h("div", { key: '58fdb8a9a25b9f15314aab8ffaee9424fbb26458', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '4cba8f4c2b8a89922dbaa9eec4c2f9d12f43b62c', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: '65d311769aa5202134676cf9c4652132fbfc364d', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { key: 'da8881158bee1aec2724a0e71af3faa88bc0eb17', class: "tds-slider__controls" }, h("div", { key: '241b11a3bee6ce8cf3e53ba77a095e2fb0cdb8a6', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: 'c8e5466b53a1fe6abaaab77741e4adb7ec197341', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: '9a1ed941f13b84e738500921b12aeb21ace2464c', class: "tds-slider__input-values" }, h("div", { key: '2bdf5b0fb2687075b2fc12ce931859d2f26a0685', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '480825ddccd550527ac18f046c6a8ce26baaba87', class: "tds-slider__input-field-wrapper" }, h("input", { key: '94a1446990ea0ae3955e8db9f0119e4a0ec71970', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, "aria-label": this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max, step: this.step })))), this.useControls && (h("div", { key: 'b7415e621df023ffe0eca844d9970454d01c72ce', class: "tds-slider__controls" }, h("div", { key: '044a984a7212d56f8c1bcb5709608d90677d7647', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '0b6410f7fb4af32681c3f49f29c9696e871bfd5a', name: "plus", size: "16px" })))))));
     }
     static get is() { return "tds-slider"; }
     static get originalStyleUrls() {

package/dist/components/{p-072bf53a.js → p-63437b77.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
 import { d as defineCustomElement$3 } from './p-9ad61cb5.js';
-import { d as defineCustomElement$2 } from './p-ad6babcd.js';
+import { d as defineCustomElement$2 } from './p-6adb1ce3.js';
 import { d as defineCustomElement$1 } from './p-b390ece5.js';
 
 const headerLauncherButtonCss = ":host{display:block}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}";

package/dist/components/{p-ad6babcd.js → p-6adb1ce3.js}

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { d as dfs } from './p-52bf0fdf.js';
 import { d as defineCustomElement$1 } from './p-9ad61cb5.js';
 
-const headerItemCss = ":host ::slotted(button),:host ::slotted(a){all:unset;box-sizing:border-box;background-color:var(--tds-header-background);border-right:1px solid var(--tds-header--basic-element-border);width:100%;height:100%;cursor:pointer;padding:0 24px;display:flex;align-items:center;gap:8px}:host ::slotted(button) *,:host ::slotted(a) *{box-sizing:border-box}:host ::slotted(button:hover),:host ::slotted(a:hover){background-color:var(--tds-header-item-hover)}:host ::slotted(button:focus-visible),:host ::slotted(a:focus-visible){border:none;outline:2px solid var(--tds-focus-outline-color);box-shadow:inset 0 0 0 3px var(--tds-white);outline-offset:-2px}:host .component-active ::slotted(button),:host .component-active ::slotted(a){background-color:var(--tds-header--basic-element-background-open);color:var(--tds-header-nav-item-dropdown-opened-color);border-color:var(--tds-header--basic-element-border-open)}:host .component-selected:not(.component-active) ::slotted(button),:host .component-selected:not(.component-active) ::slotted(a){background-color:var(--tds-header--basic-element-background-selected);padding-top:4px;border-bottom-style:solid;border-bottom-width:4px;border-bottom-color:var(--tds-nav-item-border-color-active)}";
+const headerItemCss = ":host ::slotted(button),:host ::slotted(a){all:unset;box-sizing:border-box;background-color:var(--tds-header-background);border-right:1px solid var(--tds-header--basic-element-border);width:100%;height:100%;cursor:pointer;padding:0 24px;display:flex;align-items:center;gap:8px}:host ::slotted(button) *,:host ::slotted(a) *{box-sizing:border-box}:host ::slotted(button:hover),:host ::slotted(a:hover){background-color:var(--tds-header-item-hover)}:host ::slotted(button:focus-visible),:host ::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}:host .component-active ::slotted(button),:host .component-active ::slotted(a){background-color:var(--tds-header--basic-element-background-open);color:var(--tds-header-nav-item-dropdown-opened-color);border-color:var(--tds-header--basic-element-border-open)}:host .component-selected:not(.component-active) ::slotted(button),:host .component-selected:not(.component-active) ::slotted(a){background-color:var(--tds-header--basic-element-background-selected);padding-top:4px;border-bottom-style:solid;border-bottom-width:4px;border-bottom-color:var(--tds-nav-item-border-color-active)}";
 const TdsHeaderItemStyle0 = headerItemCss;
 
 const TdsHeaderItem = /*@__PURE__*/ proxyCustomElement(class TdsHeaderItem extends H {

package/dist/components/{p-9a47d831.js → p-94bfc9f4.js}

@@ -67,7 +67,7 @@ const TdsDropdownStyle0 = dropdownCss;
 function hasValueChanged(newValue, currentValue) {
     if (newValue.length !== currentValue.length)
         return true;
-    return newValue.some((val, i) => val !== currentValue[i]);
+    return newValue.some((val) => !currentValue.includes(val));
 }
 const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H {
     constructor() {
@@ -78,7 +78,6 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         this.tdsFocus = createEvent(this, "tdsFocus", 6);
         this.tdsBlur = createEvent(this, "tdsBlur", 6);
         this.tdsInput = createEvent(this, "tdsInput", 6);
-        this.hasFocus = false;
         this.setDefaultOption = () => {
             if (this.internalDefaultValue) {
                 // Convert the internal default value to an array if it's not already
@@ -193,23 +192,19 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             // Add this line to ensure internal value is cleared
             this.internalValue = '';
         };
-        this.handleFocus = () => {
+        this.handleFocus = (event) => {
             this.open = true;
             this.filterFocus = true;
             if (this.multiselect && this.inputElement) {
                 this.inputElement.value = '';
             }
-            // Focus event is now handled by focusin listener
+            this.tdsFocus.emit(event);
             if (this.filter) {
                 this.handleFilter({ target: { value: '' } });
             }
         };
-        this.handleBlur = () => {
-            // Handle internal state changes when component loses focus
-            this.filterFocus = false;
-            if (this.multiselect && this.inputElement) {
-                this.inputElement.value = this.getValue();
-            }
+        this.handleBlur = (event) => {
+            this.tdsBlur.emit(event);
         };
         this.resetInput = () => {
             const inputEl = this.host.querySelector('input');
@@ -384,7 +379,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             }
         }
         // Always trigger the focus event to open the dropdown
-        this.handleFocus();
+        this.handleFocus({});
     }
     /** Method for closing the Dropdown. */
     async close() {
@@ -406,25 +401,6 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             }
         }
     }
-    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
@@ -544,9 +520,9 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         // 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: 'fc01da19c2eeb9c225dea61e473e4c8c64adce9a', class: {
+        return (h(Host, { key: '69cdc96b6983b9556b4a9133ef8a0d2fa1e9e18e', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'f6a3c12162a750dfdaf7069b4c31b1b8e64d6d31', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'c31cab097be72ebebeb9538a721e281f36365405', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '1cc3f825bc81ca34af7bbe845bd900531f724172', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '213f3149de4b9bc4c147ab658d6d5199d3360181', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -563,7 +539,13 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             // 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), onFocus: () => this.handleFocus(), onKeyDown: (event) => {
+            }, 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) => {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
@@ -590,7 +572,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                     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: 'd4fe7a4e58238ff30e1d2edd1adda57363cd35ca', 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: 'af7815b0cb8b36e37278965094d5198a9ff5aba9', 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,
@@ -601,11 +583,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: '883d2ffb1497304b8c3ef8131062769a91516d97', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'cc808c5d33b97f400cd4d6e0544f3da78f81f7a8', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '66226ce4194e4e0c8d7e618b874c52180aa007f2', id: helperId, class: {
+            } }, 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: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: 'c2dd9ccb39957ef4cd2e9e0e0af3dbfdf531f20e', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '936a8bd7db8a0ed994d6827c26bbb6732420fea4', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -646,7 +628,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         "close": [64],
         "updateDisplay": [64],
         "appendValue": [64]
-    }, [[9, "mousedown", "onAnyClick"], [0, "focusin", "onFocusIn"], [0, "focusout", "onFocusOut"], [0, "keydown", "onKeyDown"]], {
+    }, [[9, "mousedown", "onAnyClick"], [0, "keydown", "onKeyDown"]], {
         "value": ["handleValueChange"],
         "open": ["handleOpenState"],
         "defaultValue": ["handleDefaultValueChange"]

package/dist/components/{p-c4318e35.js → p-d64878cb.js}

@@ -66,18 +66,10 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
             }
         };
         this.handleFocus = (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.tdsFocus.emit(event);
         };
         this.handleBlur = (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.tdsBlur.emit(event);
         };
         this.value = undefined;
         this.internalValue = undefined;
@@ -98,7 +90,7 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: '5448be3efbb06ae6d0fa3797f4b724c2d656d7a3' }, h("div", { key: '78945300c0bddb4ce95ab6f8de50eded1383dec7', class: `dropdown-option
+        return (h(Host, { key: 'd35a3153be292b1656d0efca93f06bfc1357041b' }, h("div", { key: '384353f9868a3fb559ca4140d5cd4f5553e024ad', class: `dropdown-option
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -108,8 +100,6 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
                 }
             } }, 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/components/{p-92c2da85.js → p-ea381f94.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { d as dfs } from './p-52bf0fdf.js';
 
-const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:10px;padding:0 22px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component ::slotted(tds-side-menu-user),:host .component-has-user ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:16px;padding:0 22px 0 16px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}: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:inset 0 0 0 3px var(--tds-white);outline-offset:-2px}:host .component:hover ::slotted(a),: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(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){padding:0;display:flex;justify-content:center;align-items:center;position:relative}: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){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,:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user)::before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}: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),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
+const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:10px;padding:0 22px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component ::slotted(tds-side-menu-user),:host .component-has-user ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:16px;padding:0 22px 0 16px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}: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}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--tds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--tds-sidemenu-item-state-active)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center;position:relative}: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)}:host .component-selected:not(:host .component-active) ::slotted(a)::before,:host .component-selected:not(:host .component-active) ::slotted(button)::before,:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user)::before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
 const TdsSideMenuItemStyle0 = sideMenuItemCss;
 
 const TdsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuItem extends H {

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

@@ -1,4 +1,4 @@
-import { T as TdsDropdownOption$1, d as defineCustomElement$1 } from './p-c4318e35.js';
+import { T as TdsDropdownOption$1, d as defineCustomElement$1 } from './p-d64878cb.js';
 
 const TdsDropdownOption = TdsDropdownOption$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-dropdown.js

@@ -1,4 +1,4 @@
-import { T as TdsDropdown$1, d as defineCustomElement$1 } from './p-9a47d831.js';
+import { T as TdsDropdown$1, d as defineCustomElement$1 } from './p-94bfc9f4.js';
 
 const TdsDropdown = TdsDropdown$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-header-brand-symbol.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { d as defineCustomElement$3 } from './p-9ad61cb5.js';
-import { d as defineCustomElement$2 } from './p-ad6babcd.js';
+import { d as defineCustomElement$2 } from './p-6adb1ce3.js';
 
 const headerBrandSymbolCss = ":host tds-header-item{display:none}:host tds-header-item ::slotted(*){background-image:var(--tds-background-image-scania-symbol-svg-local), var(--tds-background-image-scania-symbol-svg);background-size:30px auto;background-position:center;background-repeat:no-repeat}@media (min-width: 992px){:host tds-header-item{display:block}}";
 const TdsHeaderBrandSymbolStyle0 = headerBrandSymbolCss;

package/dist/components/tds-header-dropdown.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { g as generateUniqueId } from './p-11648030.js';
 import { d as defineCustomElement$6 } from './p-9ad61cb5.js';
-import { d as defineCustomElement$5 } from './p-ad6babcd.js';
+import { d as defineCustomElement$5 } from './p-6adb1ce3.js';
 import { d as defineCustomElement$4 } from './p-b390ece5.js';
 import { d as defineCustomElement$3 } from './p-df84759a.js';
 import { d as defineCustomElement$2 } from './p-d3866be7.js';

package/dist/components/tds-header-hamburger.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
 import { d as defineCustomElement$4 } from './p-9ad61cb5.js';
-import { d as defineCustomElement$3 } from './p-ad6babcd.js';
+import { d as defineCustomElement$3 } from './p-6adb1ce3.js';
 import { d as defineCustomElement$2 } from './p-b390ece5.js';
 
 const headerHamburgerCss = ":host{color:var(--tds-white)}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:background 0.2s ease-in-out, color 0.2s ease-in-out}@media screen and (min-width: 992px){:host tds-header-item{display:none}:host([persistent]) tds-header-item{display:block}}";

package/dist/components/tds-header-item.js

@@ -1,4 +1,4 @@
-import { T as TdsHeaderItem$1, d as defineCustomElement$1 } from './p-ad6babcd.js';
+import { T as TdsHeaderItem$1, d as defineCustomElement$1 } from './p-6adb1ce3.js';
 
 const TdsHeaderItem = TdsHeaderItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-header-launcher-button.js

@@ -1,4 +1,4 @@
-import { T as TdsHeaderLauncherButton$1, d as defineCustomElement$1 } from './p-072bf53a.js';
+import { T as TdsHeaderLauncherButton$1, d as defineCustomElement$1 } from './p-63437b77.js';
 
 const TdsHeaderLauncherButton = TdsHeaderLauncherButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-header-launcher.js

@@ -2,8 +2,8 @@ import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { g as generateUniqueId } from './p-11648030.js';
 import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
 import { d as defineCustomElement$7 } from './p-9ad61cb5.js';
-import { d as defineCustomElement$6 } from './p-ad6babcd.js';
-import { d as defineCustomElement$5 } from './p-072bf53a.js';
+import { d as defineCustomElement$6 } from './p-6adb1ce3.js';
+import { d as defineCustomElement$5 } from './p-63437b77.js';
 import { d as defineCustomElement$4 } from './p-b390ece5.js';
 import { d as defineCustomElement$3 } from './p-df84759a.js';
 import { d as defineCustomElement$2 } from './p-d3866be7.js';

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

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-92c2da85.js';
+import { d as defineCustomElement$2 } from './p-ea381f94.js';
 
 const sideMenuCollapseButtonCss = ":host{position:sticky;bottom:0;display:none;height:68px;border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .icon{transform:rotateZ(90deg);transition:all 0.2s ease-in-out;width:20px;height:20px}:host .state-collapsed .icon{transform:translateX(-50%) rotateZ(90deg) rotateX(180deg);color:var(--tds-sidebar-side-menu-single-item-color);margin-left:0;position:absolute;left:50%}@media (min-width: 992px){:host{display:block}}";
 const TdsSideMenuCollapseButtonStyle0 = sideMenuCollapseButtonCss;
@@ -35,12 +35,14 @@ const TdsSideMenuCollapseButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsSi
         this.collapsed = this.sideMenuEl.collapsed;
     }
     render() {
-        return (h(Host, { key: '71376a20166f28551ed139362144a79a20e35213' }, h("div", { key: 'a68ff13ee66ff8866f41bd36dbd5f2a38408ed6c', class: {
+        return (h(Host, { key: 'fecd00dc0ef2ce899b82ce304034b5b6f75704ed', role: "button", tabindex: "0", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
+                this.handleClick();
+            } }, h("div", { key: '6d7ae7bd95d8c4c37895d06ce8d4eaebe08e91dd', class: {
                 'wrapper': true,
                 'state-collapsed': this.collapsed,
-            } }, 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' }))))));
+            } }, 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' }))))));
     }
     get host() { return this; }
     static get style() { return TdsSideMenuCollapseButtonStyle0; }

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 
-const sideMenuDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:48px;width:100%}:host .component{height:100%;width:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--tds-nav-item-border-color);display:flex;align-items:center;height:100%;padding:0 24px;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);border:none}:host .component ::slotted(a:hover),:host .component ::slotted(button: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-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:inset 0 0 0 3px var(--tds-white);outline-offset:-2px}:host .component.component-selected ::slotted(a),:host .component.component-selected ::slotted(button){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){padding:16px 48px 16px 58px}:host .component.component-dropdown-has-user:not(.component-collapsed) ::slotted(a),:host .component.component-dropdown-has-user:not(.component-collapsed) ::slotted(button){padding:16px 48px 16px 64px}";
+const sideMenuDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:48px;width:100%}:host .component{height:100%;width:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--tds-nav-item-border-color);display:flex;align-items:center;height:100%;padding:0 24px;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);border:none}:host .component ::slotted(a:hover),:host .component ::slotted(button:hover){background-color:var(--tds-header-nav-item-dropdown-opened-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;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}: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)}: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}: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}";
 const TdsSideMenuDropdownListItemStyle0 = sideMenuDropdownListItemCss;
 
 const TdsSideMenuDropdownListItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuDropdownListItem extends H {

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, F as Fragment, c as Host } from './p-28ef5186.js';
 import { d as defineCustomElement$3 } from './p-b390ece5.js';
-import { d as defineCustomElement$2 } from './p-92c2da85.js';
+import { d as defineCustomElement$2 } from './p-ea381f94.js';
 
 const sideMenuDropdownCss = ":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}: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)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 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)}:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
 const TdsSideMenuDropdownStyle0 = sideMenuDropdownCss;

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

@@ -1,4 +1,4 @@
-import { T as TdsSideMenuItem$1, d as defineCustomElement$1 } from './p-92c2da85.js';
+import { T as TdsSideMenuItem$1, d as defineCustomElement$1 } from './p-ea381f94.js';
 
 const TdsSideMenuItem = TdsSideMenuItem$1;
 const defineCustomElement = defineCustomElement$1;