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

package/dist/collection/components/text-field/text-field.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import hasSlot from "../../utils/hasSlot";
 import generateUniqueId from "../../utils/generateUniqueId";
+import { handlePasteEvent } from "../../utils/handlePasteEvent";
 /**
  * @slot prefix - Slot for the prefix in the component.
  * @slot suffix - Slot for the suffix in the component. Suffix is hidden when the input is in readonly state.
@@ -50,6 +51,30 @@ export class TdsTextField {
         this.value = value;
         this.tdsInput.emit(event);
     }
+    // Handle paste events to ensure input events are triggered
+    handlePaste(event) {
+        const inputEl = event.target;
+        // Create a value processor for number inputs with min/max validation
+        const valueProcessor = (value) => {
+            if (this.type === 'number') {
+                const numericValue = Number(value);
+                if (this.min !== undefined && numericValue < Number(this.min)) {
+                    return String(this.min);
+                }
+                if (this.max !== undefined && numericValue > Number(this.max)) {
+                    return String(this.max);
+                }
+            }
+            return value;
+        };
+        // Create a callback to handle the synthetic input event
+        const onInputCallback = (syntheticEvent) => {
+            this.value = inputEl.value;
+            this.tdsInput.emit(syntheticEvent);
+        };
+        // Use the utility function
+        handlePasteEvent(inputEl, onInputCallback, valueProcessor);
+    }
     /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
     handleFocus(event) {
         this.textInput.focus();
@@ -71,7 +96,7 @@ export class TdsTextField {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: 'b9fa2b03ce2a0b196dc6083614420d6f83675e3d', class: {
+        return (h("div", { key: 'b37e6dd9aa339eeee50726de43b819c9a0dafad3', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -89,19 +114,19 @@ export class TdsTextField {
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (h("div", { key: '7110b867aba9a9ba62b796f67caeccf22a4a8060', class: "text-field-label-outside" }, h("label", { key: '6b0b6c7d17bb236f1203dfaf793ba0a3bc2d8efb', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '5603d3e78b290a78d7c482a0dac7e1f0efb9af7f', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '9accb59dffa061d7947d4392310cb1717a395363', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '7ac5bf6dec464b5216e77a1fefe765b5ebfabfbd', class: "text-field-label-outside" }, h("label", { key: '6b4e66e93f67a3e299e6777006c468bc17c7bef1', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '2e14fcb37fecca77461e15cece8ae0086aa26ad4', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'f6a4d22482c7a036e25386ed2173c9d8689664f7', class: {
                 'text-field-slot-wrap-prefix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
-            } }, h("slot", { key: '739e089cdb9798dc108b68c4858c90bf75e18958', name: "prefix" }))), h("div", { key: 'e4229be4e4bf421319184e798b98afcbaa361413', class: "text-field-input-container" }, h("input", { key: 'f462b4c0d49e4e070090f6a14df52af66b87648d', ref: (inputEl) => {
+            } }, h("slot", { key: '2ab91f5db4dcea2ee7c24e0705593b34f6eccc51', name: "prefix" }))), h("div", { key: '7a6114e3cce7c286292b7f16301a2d11e0ef535b', class: "text-field-input-container" }, h("input", { key: '51c00d7f54c8b49051d50ff5375da082ca4482b0', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
                 'text-field-input-sm': this.size === 'sm',
                 'text-field-input-md': this.size === 'md',
                 'text-field-input-lg': this.size === 'lg',
-            }, type: this.type, disabled: this.disabled, readonly: this.disabled ? false : this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, min: this.min, max: this.max, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
+            }, type: this.type, disabled: this.disabled, readonly: this.disabled ? false : this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, min: this.min, max: this.max, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onPaste: (event) => this.handlePaste(event), onFocus: (event) => {
                 if (!this.readOnly) {
                     this.handleFocus(event);
                 }
@@ -109,13 +134,13 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'ac16cff7856d65503fa30f7eb23d2936377e72d4', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: 'b70453ec36ca62f584b26b0e6dc4b3f0cde2ff54', class: {
+            }, "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'bcdcbaa0abfe6d15519c5bdf4a713c672e4ae039', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '186d2831637d2e5817879a1b8f578c36fba07e06', class: {
                 'text-field-slot-wrap-suffix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
                 'tds-u-display-none': this.readOnly,
-            } }, h("slot", { key: '7e50b20d90a68f9af583b8f2ade5c742e2d52351', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '72e2cf4f2872d247ac6f28e935e8185aafef6dec', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '171bdde8535c6bbd08eec60d87d9aa5bae1f98bd', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '05e7e8898ee3fcf81fb011aa2141092e8b749e37', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '0c16d399b376d9aebed2aabf759cb7319c5745cf', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '280eed9185c8cffa29e3cf62425f1f1f377f3abc', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'ddf07e469173a574a848cd2ff816bcc535940340', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'b5b06dba13fb8911828153341b631facfc016c88', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'a4c41817f19b32e575423d5bbe19c28a38031e6e', class: {
+            } }, h("slot", { key: 'ddb3f21a1189e36530ab62a3166115f0c805974a', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '0a03400c53cdde6795474e38b55ac4a62c738f22', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'f06d7f697adfe89a46b9255f5b2d1fc68c5c391b', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'b1a9cbadc4723e339835685a977978f268c497d3', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: 'bd0fe776e4b7d0500a9c6755635eb6b81dae1b31', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '9e6db2662ec9e2e7f4045ae95b6d5c3de2cddc0f', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '498d9d7f555466aa7c32f7f68c63e06c56470b4e', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '3b90488f2e7e26317789b00d6e33bbb2b329e571', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '0f6d239f926f0287b6e6be3806f57a44a64a422b', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
             } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));

package/dist/collection/components/textarea/textarea.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
+import { handlePasteEvent } from "../../utils/handlePasteEvent";
 export class TdsTextarea {
     constructor() {
         this.uuid = generateUniqueId();
@@ -36,6 +37,19 @@ export class TdsTextarea {
             this.tdsInput.emit(event);
         }
     }
+    // Handle paste events to ensure input events are triggered
+    handlePaste(event) {
+        if (event.target instanceof HTMLTextAreaElement) {
+            const textareaEl = event.target;
+            // Create a callback to handle the synthetic input event
+            const onInputCallback = (syntheticEvent) => {
+                this.value = textareaEl.value;
+                this.tdsInput.emit(syntheticEvent);
+            };
+            // Use the utility function (no value processor needed for textarea)
+            handlePasteEvent(textareaEl, onInputCallback);
+        }
+    }
     /* Set the input as focus when clicking the whole textarea with suffix/prefix */
     handleFocus(event) {
         this.textEl.focus();
@@ -60,7 +74,7 @@ export class TdsTextarea {
     }
     render() {
         var _a;
-        return (h("div", { key: '873fc5866c777549e56d115e7bce64a62fdd5c0c', class: {
+        return (h("div", { key: 'e723f8a641f578ffa97ada5746d900e49eb79252', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
@@ -70,7 +84,7 @@ export class TdsTextarea {
                 'textarea-data': this.value !== '',
                 [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
                 'no-min-width': this.noMinWidth,
-            } }, this.labelPosition !== 'no-label' && (h("label", { key: '09f5df4efb39b7e3eb71d8567adc5cffd374ad66', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '57bd6d6e2e7a1919d668625a675e4a20421af965', class: "textarea-wrapper" }, h("textarea", { key: '69955de378170f86c7a942d5f8101aa2ff9440f4', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (h("label", { key: 'd2dbcc394a2790218f31738d5b5b9525b1fc0846', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '163cd6db0ad8bcbe3d50444c78eea1c38463c450', class: "textarea-wrapper" }, h("textarea", { key: 'b1311130a28ec0a9053d98aff1afd009f22628fb', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
                 this.textEl = inputEl;
             }, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
                 if (!this.readOnly) {
@@ -80,7 +94,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '0fded8e72f3f6d8e6f53cb57df94f480df17ce53', class: "textarea-resizer-icon" }, h("svg", { key: '6b41ae06bbedfa5ba88991bc6856f80ca8a4b6f8', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c4f731e7483bade2d0dbd545302afc278039a122', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '94bc8eed69418751ad240087201827a0ef0185b4', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '231983d3994030724a06358f37dd0e53f91d78d4', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '9e7f16d10939227a5c8c87f00ddd653a58c094ad', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '67222f0c93979caf49881c591cd99eb4c97ebdc1', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: 'cbde13084b090f7eea4bd80da47373ec941e1981', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '5895277b2e07f4c8f2990f624eb0797dffd0b1f0', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '97afedbb5aaf02461a38f39643298b6c2650c52f', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onPaste: (event) => this.handlePaste(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'b423c1b6f9652c3aa95447f33100eba166b7de06', class: "textarea-resizer-icon" }, h("svg", { key: 'c254d5ac9fc72500c2263b49c3c4e3642b9097bb', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a6ee4ec8cbb32d6fbc11fb03cbdc9af6f456805b', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '0e28490b93e622ad1322c1adc591329fde3920cd', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '792b4866942b26634f8cef72d00ca11b03ba3fbe', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '2b809a91f13c09be470feafd622389e78f1ed4ca', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '0c8937b9279a72d4805bb880b38be59e086c5e39', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '77ab9eff4a502d6ebd6959bd4ed957b9a1aa1a58', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: 'a011f0e2c0e7a22fe243c967f67e022e0439d9b2', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'cba5a9f73a0c74826f8722eb1ae861e8ddce5bb5', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -503,4 +517,5 @@ export class TdsTextarea {
             }
         };
     }
+    static get elementRef() { return "host"; }
 }

package/dist/collection/utils/handlePasteEvent.js

@@ -0,0 +1,29 @@
+/**
+ * Utility function to handle paste events and trigger input events
+ * This ensures that paste operations properly trigger tdsInput events
+ *
+ * @param element - The HTMLInputElement or HTMLTextAreaElement that received the paste
+ * @param onInputCallback - Callback function to handle the input event
+ * @param valueProcessor - Optional function to process the value before setting it
+ */
+export function handlePasteEvent(element, onInputCallback, valueProcessor) {
+    // Use setTimeout to ensure the paste content is processed before we trigger the input event
+    setTimeout(() => {
+        let value = element.value;
+        // Apply value processing if provided (e.g., for number inputs with min/max validation)
+        if (valueProcessor) {
+            value = valueProcessor(value);
+            element.value = value;
+        }
+        // Create a synthetic input event to maintain consistency
+        const syntheticInputEvent = new InputEvent('input', {
+            bubbles: true,
+            cancelable: true,
+            inputType: 'insertFromPaste',
+            data: null,
+            isComposing: false,
+        });
+        // Trigger the callback with the synthetic event
+        onInputCallback(syntheticInputEvent);
+    }, 0);
+}

package/dist/components/p-0cf97292.js

@@ -0,0 +1,31 @@
+/**
+ * Utility function to handle paste events and trigger input events
+ * This ensures that paste operations properly trigger tdsInput events
+ *
+ * @param element - The HTMLInputElement or HTMLTextAreaElement that received the paste
+ * @param onInputCallback - Callback function to handle the input event
+ * @param valueProcessor - Optional function to process the value before setting it
+ */
+function handlePasteEvent(element, onInputCallback, valueProcessor) {
+    // Use setTimeout to ensure the paste content is processed before we trigger the input event
+    setTimeout(() => {
+        let value = element.value;
+        // Apply value processing if provided (e.g., for number inputs with min/max validation)
+        if (valueProcessor) {
+            value = valueProcessor(value);
+            element.value = value;
+        }
+        // Create a synthetic input event to maintain consistency
+        const syntheticInputEvent = new InputEvent('input', {
+            bubbles: true,
+            cancelable: true,
+            inputType: 'insertFromPaste',
+            data: null,
+            isComposing: false,
+        });
+        // Trigger the callback with the synthetic event
+        onInputCallback(syntheticInputEvent);
+    }, 0);
+}
+
+export { handlePasteEvent as h };

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;