@eui/eds 22.0.0-alpha.33 → 22.0.0-alpha.35

package/docs/json/documentation.json

@@ -12653,12 +12653,12 @@
         },
         {
             "name": "EdsMaxlengthDirective",
-            "id": "directive-EdsMaxlengthDirective-c80304ea49d2dc5f5235c4e3d0542f114e9ffc94d0188a9c5b52c7c60ca08c012f7106d6e56fb76648573d14f3418af240d90d5cd78f1f8e25923b580e16d1ed",
+            "id": "directive-EdsMaxlengthDirective-d07ceb165ce10f9c8985f2d45d61ab1abf9f3c483945664731038dfef7b24962c038f2bb852d93f8fb6d10f57d8f6e64978e5961d64fbcd799148cd9a53398d1",
             "file": "packages/eds/shared/eds-maxlength.directive.ts",
             "type": "directive",
             "description": "<p>Directive that adds maxLength functionality to input/textarea elements with visual feedback.\nShows remaining characters count and provides visual indication when the limit is reached.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;input edsInputText [edsMaxlength]=&quot;100&quot; /&gt;\n&lt;textarea [edsMaxlength]=&quot;200&quot; [isShowMaxlength]=&quot;false&quot;&gt;&lt;/textarea&gt;</code></pre></div>",
             "rawdescription": "\n\nDirective that adds maxLength functionality to input/textarea elements with visual feedback.\nShows remaining characters count and provides visual indication when the limit is reached.\n\n```html\n<input edsInputText [edsMaxlength]=\"100\" />\n<textarea [edsMaxlength]=\"200\" [isShowMaxlength]=\"false\"></textarea>\n```\n",
-            "sourceCode": "import {\n    Directive,\n    ElementRef,\n    Renderer2,\n    inject,\n    input,\n    output,\n    numberAttribute,\n    booleanAttribute,\n    AfterContentInit,\n    OnDestroy,\n    OnChanges,\n    SimpleChanges,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { Subscription } from 'rxjs';\n\n/**\n * @description\n * Directive that adds maxLength functionality to input/textarea elements with visual feedback.\n * Shows remaining characters count and provides visual indication when the limit is reached.\n *\n * @usageNotes\n * ```html\n * <input edsInputText [edsMaxlength]=\"100\" />\n * <textarea [edsMaxlength]=\"200\" [isShowMaxlength]=\"false\"></textarea>\n * ```\n */\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: 'input[edsMaxlength], textarea[edsMaxlength], [ngModel][edsMaxlength], [formControlName][edsMaxlength]',\n    host: {\n        '(input)': '_onInput()',\n        '(change)': '_onInput()',\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        '(paste)': '_onPaste($any($event))',\n    },\n})\nexport class EdsMaxlengthDirective implements AfterContentInit, OnDestroy, OnChanges {\n    /** Maximum character length. Set to null to disable. */\n    edsMaxlength = input(0, { transform: numberAttribute });\n\n    /** Controls visibility of the maxLength counter indicator. */\n    isShowMaxlength = input(true, { transform: booleanAttribute });\n\n    /** Emits true when max length is reached, false when below limit. */\n    maxLengthReached = output<boolean>();\n\n    private _el = inject(ElementRef);\n    private _renderer = inject(Renderer2);\n    private _control = inject(NgControl, { self: true, optional: true });\n    private _maxLengthSpan: HTMLSpanElement | undefined;\n    private _wrapper: HTMLDivElement | undefined;\n    private _valueChangesSub: Subscription | undefined;\n\n    ngAfterContentInit(): void {\n        if (this.edsMaxlength()) {\n            this._createMaxLengthBox();\n            this._refresh();\n        }\n\n        if (this._control?.valueChanges) {\n            this._valueChangesSub = this._control.valueChanges.subscribe(() => this._refresh());\n        }\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['isShowMaxlength']) {\n            if (this.isShowMaxlength()) {\n                this._createMaxLengthBox();\n                this._refresh();\n            } else {\n                this._destroyMaxLengthBox();\n            }\n        }\n        if (changes['edsMaxlength']) {\n            const maxLen = this.edsMaxlength();\n            if (maxLen < 0) {\n                throw new Error('edsMaxlength cannot be negative.');\n            }\n            if (maxLen) {\n                if (this.isShowMaxlength() && !this._maxLengthSpan) {\n                    this._createMaxLengthBox();\n                }\n                this._refresh();\n            } else {\n                this._renderer.removeAttribute(this._el.nativeElement, 'maxLength');\n                this._destroyMaxLengthBox();\n            }\n        }\n    }\n\n    ngOnDestroy(): void {\n        this._destroyMaxLengthBox();\n        this._valueChangesSub?.unsubscribe();\n    }\n\n    protected _onInput(): void {\n        this._refresh();\n    }\n\n    protected _onPaste(event: ClipboardEvent): void {\n        const value = (event.clipboardData || (window as unknown as Record<string, unknown>)['clipboardData'] as DataTransfer | undefined)?.getData('text') || '';\n        const input = this._el.nativeElement as HTMLInputElement;\n        if (this.edsMaxlength()) {\n            this._renderer.setProperty(input, 'maxLength', this._calculateMaxLength(value));\n        }\n    }\n\n    private _calculateMaxLength(pastedValue?: string): number {\n        const currentValue = this._getValue();\n        const currentLen = currentValue?.length || 0;\n        const valueLen = this._getValueLength();\n        return (pastedValue?.length || currentLen - valueLen) + this.edsMaxlength();\n    }\n\n    private _getValueLength(): number {\n        return this._getValue()?.length || 0;\n    }\n\n    private _getValue(): string {\n        const input = this._el.nativeElement as HTMLInputElement;\n        return this._control && this._control.control?.updateOn === 'change'\n            ? this._control.value\n            : input.value;\n    }\n\n    private _refresh(): void {\n        const maxLen = this.edsMaxlength();\n        if (isNaN(maxLen) || !maxLen) {\n            return;\n        }\n        const input = this._el.nativeElement as HTMLInputElement;\n        const valueLength = this._getValueLength();\n        const remaining = maxLen - valueLength;\n\n        this._renderer.setProperty(input, 'maxLength', this._calculateMaxLength());\n\n        if (this._maxLengthSpan) {\n            if (remaining <= 0) {\n                this._maxLengthSpan.style.backgroundColor = 'var(--eds-c-surface-warning)';\n                this._maxLengthSpan.style.borderColor = 'var(--eds-c-border-warning)';\n                this._maxLengthSpan.style.color = 'var(--eds-c-foreground-critical)';\n                this.maxLengthReached.emit(true);\n            } else {\n                this._maxLengthSpan.style.backgroundColor = 'var(--eds-c-surface-elevation)';\n                this._maxLengthSpan.style.borderColor = 'var(--eds-c-border-neutral)';\n                this._maxLengthSpan.style.color = 'var(--eds-c-foreground)';\n                this.maxLengthReached.emit(false);\n            }\n\n            if (remaining < 0) {\n                if (this._control) {\n                    this._control.control!.setValue(input.value.substring(0, this._calculateMaxLength()));\n                } else {\n                    input.value = input.value.substring(0, this._calculateMaxLength());\n                }\n                this._renderer.setProperty(this._maxLengthSpan, 'textContent', '0');\n            } else {\n                this._renderer.setProperty(this._maxLengthSpan, 'textContent', remaining.toString());\n            }\n        }\n    }\n\n    private _createMaxLengthBox(): void {\n        if (this._maxLengthSpan) {\n            this._destroyMaxLengthBox();\n        }\n\n        this._maxLengthSpan = this._renderer.createElement('span');\n        this._renderer.addClass(this._maxLengthSpan, 'eds-maxlength');\n        this._renderer.setProperty(this._maxLengthSpan, 'textContent', (this.edsMaxlength() || 0).toString());\n        // Inline styles (self-contained, no global stylesheet dependency)\n        this._maxLengthSpan.setAttribute('style', [\n            'font: var(--eds-f-microcopy-xs)',\n            'background-color: var(--eds-c-surface-neutral-subtle, #f0f0f0)',\n            'border: 1px solid var(--eds-c-border-neutral)',\n            'border-radius: var(--eds-br-xs)',\n            'color: var(--eds-c-foreground)',\n            'padding: 0 var(--eds-sp-3xs)',\n            'position: absolute',\n            'right: calc(-1 * var(--eds-sp-xs))',\n            'top: calc(-1 * var(--eds-sp-xs))',\n            'z-index: 1',\n            'line-height: 1.6',\n        ].join(';'));\n\n        const nativeElement: HTMLElement = this._el.nativeElement;\n        const parent = nativeElement.parentNode;\n        if (parent && this.isShowMaxlength()) {\n            this._renderer.setStyle(nativeElement, 'width', '100%');\n            this._wrapper = this._renderer.createElement('div');\n            this._renderer.addClass(this._wrapper, 'eds-maxlength-wrapper');\n            this._wrapper.setAttribute('style', 'position: relative; width: 100%;');\n            parent.replaceChild(this._wrapper, nativeElement);\n            this._renderer.appendChild(this._wrapper, nativeElement);\n            this._renderer.appendChild(this._wrapper, this._maxLengthSpan);\n        }\n    }\n\n    private _destroyMaxLengthBox(): void {\n        if (this._maxLengthSpan) {\n            this._renderer.removeChild(this._maxLengthSpan.parentElement, this._maxLengthSpan);\n            this._maxLengthSpan = undefined;\n        }\n        if (this._wrapper) {\n            const parent = this._wrapper.parentNode;\n            const nativeElement = this._el.nativeElement;\n            parent?.replaceChild(nativeElement, this._wrapper);\n            this._wrapper = undefined;\n        }\n    }\n}\n",
+            "sourceCode": "import {\n    Directive,\n    ElementRef,\n    Renderer2,\n    inject,\n    input,\n    output,\n    numberAttribute,\n    booleanAttribute,\n    AfterContentInit,\n    OnDestroy,\n    OnChanges,\n    SimpleChanges,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { Subscription } from 'rxjs';\n\n/**\n * @description\n * Directive that adds maxLength functionality to input/textarea elements with visual feedback.\n * Shows remaining characters count and provides visual indication when the limit is reached.\n *\n * @usageNotes\n * ```html\n * <input edsInputText [edsMaxlength]=\"100\" />\n * <textarea [edsMaxlength]=\"200\" [isShowMaxlength]=\"false\"></textarea>\n * ```\n */\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: 'input[edsMaxlength], textarea[edsMaxlength], [ngModel][edsMaxlength], [formControlName][edsMaxlength]',\n    host: {\n        '(input)': '_onInput()',\n        '(change)': '_onInput()',\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        '(paste)': '_onPaste($any($event))',\n    },\n})\nexport class EdsMaxlengthDirective implements AfterContentInit, OnDestroy, OnChanges {\n    /** Maximum character length. Set to null to disable. */\n    edsMaxlength = input(0, { transform: numberAttribute });\n\n    /** Controls visibility of the maxLength counter indicator. */\n    isShowMaxlength = input(true, { transform: booleanAttribute });\n\n    /** Emits true when max length is reached, false when below limit. */\n    maxLengthReached = output<boolean>();\n\n    private _el = inject(ElementRef);\n    private _renderer = inject(Renderer2);\n    private _control = inject(NgControl, { self: true, optional: true });\n    private _maxLengthSpan: HTMLSpanElement | undefined;\n    private _wrapper: HTMLDivElement | undefined;\n    private _valueChangesSub: Subscription | undefined;\n\n    ngAfterContentInit(): void {\n        if (this.edsMaxlength()) {\n            this._createMaxLengthBox();\n            this._refresh();\n        }\n\n        if (this._control?.valueChanges) {\n            this._valueChangesSub = this._control.valueChanges.subscribe(() => this._refresh());\n        }\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['isShowMaxlength']) {\n            if (this.isShowMaxlength()) {\n                this._createMaxLengthBox();\n                this._refresh();\n            } else {\n                this._destroyMaxLengthBox();\n            }\n        }\n        if (changes['edsMaxlength']) {\n            const maxLen = this.edsMaxlength();\n            if (maxLen < 0) {\n                throw new Error('edsMaxlength cannot be negative.');\n            }\n            if (maxLen) {\n                if (this.isShowMaxlength() && !this._maxLengthSpan) {\n                    this._createMaxLengthBox();\n                }\n                this._refresh();\n            } else {\n                this._renderer.removeAttribute(this._el.nativeElement, 'maxLength');\n                this._destroyMaxLengthBox();\n            }\n        }\n    }\n\n    ngOnDestroy(): void {\n        this._destroyMaxLengthBox();\n        this._valueChangesSub?.unsubscribe();\n    }\n\n    protected _onInput(): void {\n        this._refresh();\n    }\n\n    protected _onPaste(event: ClipboardEvent): void {\n        const value = (event.clipboardData || (window as unknown as Record<string, unknown>)['clipboardData'] as DataTransfer | undefined)?.getData('text') || '';\n        const input = this._el.nativeElement as HTMLInputElement;\n        if (this.edsMaxlength()) {\n            this._renderer.setProperty(input, 'maxLength', this._calculateMaxLength(value));\n        }\n    }\n\n    private _calculateMaxLength(pastedValue?: string): number {\n        const currentValue = this._getValue();\n        const currentLen = currentValue?.length || 0;\n        const valueLen = this._getValueLength();\n        return (pastedValue?.length || currentLen - valueLen) + this.edsMaxlength();\n    }\n\n    private _getValueLength(): number {\n        return this._getValue()?.length || 0;\n    }\n\n    private _getValue(): string {\n        const input = this._el.nativeElement as HTMLInputElement;\n        return this._control && this._control.control?.updateOn === 'change'\n            ? this._control.value\n            : input.value;\n    }\n\n    private _refresh(): void {\n        const maxLen = this.edsMaxlength();\n        if (isNaN(maxLen) || !maxLen) {\n            return;\n        }\n        const input = this._el.nativeElement as HTMLInputElement;\n        const valueLength = this._getValueLength();\n        const remaining = maxLen - valueLength;\n\n        this._renderer.setProperty(input, 'maxLength', this._calculateMaxLength());\n\n        if (this._maxLengthSpan) {\n            if (remaining <= 0) {\n                this._maxLengthSpan.style.color = 'var(--eds-c-foreground-critical)';\n                this.maxLengthReached.emit(true);\n            } else {\n                this._maxLengthSpan.style.color = 'var(--eds-c-foreground-subtler)';\n                this.maxLengthReached.emit(false);\n            }\n\n            if (remaining < 0) {\n                if (this._control) {\n                    this._control.control!.setValue(input.value.substring(0, this._calculateMaxLength()));\n                } else {\n                    input.value = input.value.substring(0, this._calculateMaxLength());\n                }\n                this._renderer.setProperty(this._maxLengthSpan, 'textContent', `${maxLen} / ${maxLen}`);\n            } else {\n                // Display current character count over the maximum, e.g. \"12 / 100\".\n                this._renderer.setProperty(this._maxLengthSpan, 'textContent', `${valueLength} / ${maxLen}`);\n            }\n        }\n    }\n\n    private _createMaxLengthBox(): void {\n        if (this._maxLengthSpan) {\n            this._destroyMaxLengthBox();\n        }\n\n        this._maxLengthSpan = this._renderer.createElement('span');\n        this._renderer.addClass(this._maxLengthSpan, 'eds-maxlength');\n        const initialLength = Math.min(this._getValueLength(), this.edsMaxlength() || 0);\n        this._renderer.setProperty(this._maxLengthSpan, 'textContent', `${initialLength} / ${this.edsMaxlength() || 0}`);\n        // Inline styles (self-contained, no global stylesheet dependency).\n        // No border, no background — only the foreground color. The counter sits\n        // above the top-right corner of the element it is attached to.\n        this._maxLengthSpan.setAttribute('style', [\n            'font: var(--eds-f-microcopy-xs)',\n            'color: var(--eds-c-foreground-subtler)',\n            'padding: 0 var(--eds-sp-3xs)',\n            'position: absolute',\n            'right: 0',\n            'bottom: 100%',\n            'z-index: 1',\n            'line-height: 1.6',\n            'pointer-events: none',\n        ].join(';'));\n\n        const nativeElement: HTMLElement = this._el.nativeElement;\n        const parent = nativeElement.parentNode;\n        if (parent && this.isShowMaxlength()) {\n            this._renderer.setStyle(nativeElement, 'width', '100%');\n            this._wrapper = this._renderer.createElement('div');\n            this._renderer.addClass(this._wrapper, 'eds-maxlength-wrapper');\n            this._wrapper.setAttribute('style', 'position: relative; width: 100%;');\n            parent.replaceChild(this._wrapper, nativeElement);\n            this._renderer.appendChild(this._wrapper, nativeElement);\n            this._renderer.appendChild(this._wrapper, this._maxLengthSpan);\n        }\n    }\n\n    private _destroyMaxLengthBox(): void {\n        if (this._maxLengthSpan) {\n            this._renderer.removeChild(this._maxLengthSpan.parentElement, this._maxLengthSpan);\n            this._maxLengthSpan = undefined;\n        }\n        if (this._wrapper) {\n            const parent = this._wrapper.parentNode;\n            const nativeElement = this._el.nativeElement;\n            parent?.replaceChild(nativeElement, this._wrapper);\n            this._wrapper = undefined;\n        }\n    }\n}\n",
             "selector": "input[edsMaxlength], textarea[edsMaxlength], [ngModel][edsMaxlength], [formControlName][edsMaxlength]",
             "providers": [],
             "hostDirectives": [],
@@ -51416,7 +51416,7 @@
         },
         {
             "name": "EdsMultiselect",
-            "id": "component-EdsMultiselect-38cfb435a8a2aadd759f9db4802d988bb624c697085ce6512b133361b054af31b2b9b858e35bdfbe55a65359cbb2d11a2982d46569894ddbd28843b49bd58a54",
+            "id": "component-EdsMultiselect-e011ce4eae884a3661c043c9015b190fbfdfeda0d6aab7c04238498731ec74efc62c28f94dbda0f7bc30e9bec3121bd0c9fb4abdff01e26a243d8f6509f58cb3",
             "file": "packages/eds/eds-multiselect/eds-multiselect.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -51451,20 +51451,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Aria-label for the combobox trigger.\n&#39;Select options&#39;</p>\n",
-                    "line": 119,
+                    "line": 121,
                     "rawdescription": "\n\nAria-label for the combobox trigger.\n'Select options'\n",
                     "jsdoctags": [
                         {
-                            "pos": 3662,
-                            "end": 3693,
+                            "pos": 3816,
+                            "end": 3847,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 3663,
-                                "end": 3670,
+                                "pos": 3817,
+                                "end": 3824,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -51476,6 +51476,76 @@
                     ],
                     "required": false
                 },
+                {
+                    "name": "cancelLabel",
+                    "coverageIgnore": false,
+                    "defaultValue": "'Cancel'",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Label for the panel-footer &quot;Cancel&quot; button.\n&#39;Cancel&#39;</p>\n",
+                    "line": 127,
+                    "rawdescription": "\n\nLabel for the panel-footer \"Cancel\" button.\n'Cancel'\n",
+                    "jsdoctags": [
+                        {
+                            "pos": 3958,
+                            "end": 3981,
+                            "kind": 328,
+                            "id": 0,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "tagName": {
+                                "pos": 3959,
+                                "end": 3966,
+                                "kind": 80,
+                                "id": 0,
+                                "flags": 16842752,
+                                "transformFlags": 0,
+                                "escapedText": "default"
+                            },
+                            "comment": "<p>&#39;Cancel&#39;</p>\n"
+                        }
+                    ],
+                    "required": false
+                },
+                {
+                    "name": "confirmLabel",
+                    "coverageIgnore": false,
+                    "defaultValue": "'Confirm choice'",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Label for the panel-footer &quot;Confirm choice&quot; button.\n&#39;Confirm choice&#39;</p>\n",
+                    "line": 133,
+                    "rawdescription": "\n\nLabel for the panel-footer \"Confirm choice\" button.\n'Confirm choice'\n",
+                    "jsdoctags": [
+                        {
+                            "pos": 4094,
+                            "end": 4125,
+                            "kind": 328,
+                            "id": 0,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "tagName": {
+                                "pos": 4095,
+                                "end": 4102,
+                                "kind": 80,
+                                "id": 0,
+                                "flags": 16842752,
+                                "transformFlags": 0,
+                                "escapedText": "default"
+                            },
+                            "comment": "<p>&#39;Confirm choice&#39;</p>\n"
+                        }
+                    ],
+                    "required": false
+                },
                 {
                     "name": "disabled",
                     "coverageIgnore": false,
@@ -51486,20 +51556,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Controls whether the multiselect is disabled.\nfalse</p>\n",
-                    "line": 107,
+                    "line": 109,
                     "rawdescription": "\n\nControls whether the multiselect is disabled.\nfalse\n",
                     "jsdoctags": [
                         {
-                            "pos": 3345,
-                            "end": 3365,
+                            "pos": 3499,
+                            "end": 3519,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 3346,
-                                "end": 3353,
+                                "pos": 3500,
+                                "end": 3507,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -51521,20 +51591,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Data attribute value for end-to-end testing identification.\n&#39;eds-multiselect&#39;</p>\n",
-                    "line": 95,
+                    "line": 97,
                     "rawdescription": "\n\nData attribute value for end-to-end testing identification.\n'eds-multiselect'\n",
                     "jsdoctags": [
                         {
-                            "pos": 3044,
-                            "end": 3076,
+                            "pos": 3198,
+                            "end": 3230,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 3045,
-                                "end": 3052,
+                                "pos": 3199,
+                                "end": 3206,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -51556,20 +51626,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Controls whether the multiselect shows an invalid/error state.\nfalse</p>\n",
-                    "line": 113,
+                    "line": 115,
                     "rawdescription": "\n\nControls whether the multiselect shows an invalid/error state.\nfalse\n",
                     "jsdoctags": [
                         {
-                            "pos": 3516,
-                            "end": 3536,
+                            "pos": 3670,
+                            "end": 3690,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 3517,
-                                "end": 3524,
+                                "pos": 3671,
+                                "end": 3678,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -51591,20 +51661,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Placeholder text displayed when no options are selected.\n&#39;Select options&#39;</p>\n",
-                    "line": 101,
+                    "line": 103,
                     "rawdescription": "\n\nPlaceholder text displayed when no options are selected.\n'Select options'\n",
                     "jsdoctags": [
                         {
-                            "pos": 3199,
-                            "end": 3230,
+                            "pos": 3353,
+                            "end": 3384,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 3200,
-                                "end": 3207,
+                                "pos": 3354,
+                                "end": 3361,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -51618,6 +51688,32 @@
                 }
             ],
             "outputsClass": [
+                {
+                    "name": "cancelled",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "void",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Emits when the &quot;Cancel&quot; button is clicked (selection reverted to its pre-open state).</p>\n",
+                    "line": 148,
+                    "rawdescription": "\n\nEmits when the \"Cancel\" button is clicked (selection reverted to its pre-open state).\n",
+                    "required": false
+                },
+                {
+                    "name": "confirmed",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string[]",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Emits the confirmed selection when the &quot;Confirm choice&quot; button is clicked.</p>\n",
+                    "line": 143,
+                    "rawdescription": "\n\nEmits the confirmed selection when the \"Confirm choice\" button is clicked.\n",
+                    "required": false
+                },
                 {
                     "name": "valueChange",
                     "coverageIgnore": false,
@@ -51627,7 +51723,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Emits the current selection whenever it changes.</p>\n",
-                    "line": 124,
+                    "line": 138,
                     "rawdescription": "\n\nEmits the current selection whenever it changes.\n",
                     "required": false
                 }
@@ -51643,7 +51739,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The active descendant ID for screen readers.</p>\n",
-                    "line": 165,
+                    "line": 192,
                     "rawdescription": "\nThe active descendant ID for screen readers.",
                     "modifierKind": [
                         124
@@ -51659,7 +51755,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The display value shown in the trigger.</p>\n",
-                    "line": 148,
+                    "line": 175,
                     "rawdescription": "\nThe display value shown in the trigger.",
                     "modifierKind": [
                         124
@@ -51675,7 +51771,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Reference to the dropdown template for the overlay.</p>\n",
-                    "line": 130,
+                    "line": 154,
                     "rawdescription": "\nReference to the dropdown template for the overlay.",
                     "modifierKind": [
                         148
@@ -51691,7 +51787,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Internal disabled state (supports CVA setDisabledState).</p>\n",
-                    "line": 142,
+                    "line": 169,
                     "rawdescription": "\nInternal disabled state (supports CVA setDisabledState).",
                     "modifierKind": [
                         124
@@ -51707,7 +51803,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Internal invalid state.</p>\n",
-                    "line": 145,
+                    "line": 172,
                     "rawdescription": "\nInternal invalid state.",
                     "modifierKind": [
                         124
@@ -51723,7 +51819,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Internal selected values.</p>\n",
-                    "line": 139,
+                    "line": 163,
                     "rawdescription": "\nInternal selected values.",
                     "modifierKind": [
                         124
@@ -51739,7 +51835,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether the dropdown popup is open.</p>\n",
-                    "line": 136,
+                    "line": 160,
                     "rawdescription": "\nWhether the dropdown popup is open."
                 },
                 {
@@ -51752,7 +51848,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether the placeholder is shown (no selection).</p>\n",
-                    "line": 162,
+                    "line": 189,
                     "rawdescription": "\nWhether the placeholder is shown (no selection).",
                     "modifierKind": [
                         124
@@ -51768,7 +51864,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The projected option components.</p>\n",
-                    "line": 127,
+                    "line": 151,
                     "rawdescription": "\nThe projected option components.",
                     "modifierKind": [
                         148
@@ -51784,7 +51880,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Reference to the trigger element.</p>\n",
-                    "line": 133,
+                    "line": 157,
                     "rawdescription": "\nReference to the trigger element.",
                     "modifierKind": [
                         148
@@ -51799,7 +51895,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 189,
+                    "line": 216,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -51812,20 +51908,36 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 194,
+                    "line": 221,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": ""
                 },
                 {
-                    "name": "onDoneClick",
+                    "name": "onCancelClick",
                     "coverageIgnore": false,
                     "args": [],
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 276,
+                    "line": 308,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n",
+                    "description": "",
+                    "modifierKind": [
+                        124
+                    ]
+                },
+                {
+                    "name": "onConfirmClick",
+                    "coverageIgnore": false,
+                    "args": [],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 303,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -51850,7 +51962,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 266,
+                    "line": 293,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -51888,7 +52000,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 280,
+                    "line": 318,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -51917,7 +52029,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 221,
+                    "line": 248,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -51942,7 +52054,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 232,
+                    "line": 259,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -51990,7 +52102,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 207,
+                    "line": 234,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -52036,7 +52148,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 211,
+                    "line": 238,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -52072,7 +52184,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 215,
+                    "line": 242,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -52107,7 +52219,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 202,
+                    "line": 229,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -52144,33 +52256,39 @@
                 },
                 {
                     "name": "EDS_ICON"
+                },
+                {
+                    "name": "EDS_INPUT_CHECKBOX"
+                },
+                {
+                    "name": "EDS_BUTTON"
                 }
             ],
             "description": "<p>EDS Multiselect component — a combobox-style dropdown that allows multiple selections.\nImplements the WAI-ARIA multiselect listbox pattern with full keyboard navigation.\nStyled to match eds-input-text default/hover/focus/disabled states.</p>\n<p>Integrates with Angular Reactive Forms and Template-driven Forms via ControlValueAccessor.</p>\n<h3>Basic usage</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-multiselect placeholder=&quot;Select labels&quot; [(value)]=&quot;selectedLabels&quot;&gt;\n  &lt;eds-multiselect-option value=&quot;important&quot; label=&quot;Important&quot; /&gt;\n  &lt;eds-multiselect-option value=&quot;starred&quot; label=&quot;Starred&quot; /&gt;\n  &lt;eds-multiselect-option value=&quot;work&quot; label=&quot;Work&quot; /&gt;\n&lt;/eds-multiselect&gt;</code></pre></div><h3>With Reactive Forms</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-multiselect placeholder=&quot;Select options&quot; [formControl]=&quot;myControl&quot;&gt;\n  &lt;eds-multiselect-option value=&quot;a&quot; label=&quot;Option A&quot; /&gt;\n  &lt;eds-multiselect-option value=&quot;b&quot; label=&quot;Option B&quot; /&gt;\n&lt;/eds-multiselect&gt;</code></pre></div><h3>Accessibility</h3>\n<ul>\n<li>Implements ARIA combobox pattern with <code>role=&quot;combobox&quot;</code> on the trigger</li>\n<li>Listbox popup uses <code>role=&quot;listbox&quot;</code> with <code>aria-multiselectable=&quot;true&quot;</code></li>\n<li>Arrow keys navigate options, Space toggles selection, Escape closes</li>\n<li>Active descendant pattern for screen reader announcements</li>\n</ul>\n",
             "rawdescription": "\n\nEDS Multiselect component — a combobox-style dropdown that allows multiple selections.\nImplements the WAI-ARIA multiselect listbox pattern with full keyboard navigation.\nStyled to match eds-input-text default/hover/focus/disabled states.\n\nIntegrates with Angular Reactive Forms and Template-driven Forms via ControlValueAccessor.\n\n### Basic usage\n```html\n<eds-multiselect placeholder=\"Select labels\" [(value)]=\"selectedLabels\">\n  <eds-multiselect-option value=\"important\" label=\"Important\" />\n  <eds-multiselect-option value=\"starred\" label=\"Starred\" />\n  <eds-multiselect-option value=\"work\" label=\"Work\" />\n</eds-multiselect>\n```\n\n### With Reactive Forms\n```html\n<eds-multiselect placeholder=\"Select options\" [formControl]=\"myControl\">\n  <eds-multiselect-option value=\"a\" label=\"Option A\" />\n  <eds-multiselect-option value=\"b\" label=\"Option B\" />\n</eds-multiselect>\n```\n\n### Accessibility\n- Implements ARIA combobox pattern with `role=\"combobox\"` on the trigger\n- Listbox popup uses `role=\"listbox\"` with `aria-multiselectable=\"true\"`\n- Arrow keys navigate options, Space toggles selection, Escape closes\n- Active descendant pattern for screen reader announcements\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    output,\n    signal,\n    computed,\n    contentChildren,\n    viewChild,\n    ElementRef,\n    TemplateRef,\n    ViewContainerRef,\n    inject,\n    booleanAttribute,\n    effect,\n    OnDestroy,\n    AfterContentInit,\n    DestroyRef,\n} from '@angular/core';\n/* eslint-disable @typescript-eslint/member-ordering */\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport {\n    Overlay,\n    OverlayRef,\n    OverlayModule,\n    FlexibleConnectedPositionStrategy,\n    ConnectionPositionPair,\n} from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { ActiveDescendantKeyManager } from '@angular/cdk/a11y';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\n\nimport { EdsMultiselectOption } from './eds-multiselect-option';\n\n/**\n * @description\n * EDS Multiselect component — a combobox-style dropdown that allows multiple selections.\n * Implements the WAI-ARIA multiselect listbox pattern with full keyboard navigation.\n * Styled to match eds-input-text default/hover/focus/disabled states.\n *\n * Integrates with Angular Reactive Forms and Template-driven Forms via ControlValueAccessor.\n *\n * @usageNotes\n * ### Basic usage\n * ```html\n * <eds-multiselect placeholder=\"Select labels\" [(value)]=\"selectedLabels\">\n *   <eds-multiselect-option value=\"important\" label=\"Important\" />\n *   <eds-multiselect-option value=\"starred\" label=\"Starred\" />\n *   <eds-multiselect-option value=\"work\" label=\"Work\" />\n * </eds-multiselect>\n * ```\n *\n * ### With Reactive Forms\n * ```html\n * <eds-multiselect placeholder=\"Select options\" [formControl]=\"myControl\">\n *   <eds-multiselect-option value=\"a\" label=\"Option A\" />\n *   <eds-multiselect-option value=\"b\" label=\"Option B\" />\n * </eds-multiselect>\n * ```\n *\n * ### Accessibility\n * - Implements ARIA combobox pattern with `role=\"combobox\"` on the trigger\n * - Listbox popup uses `role=\"listbox\"` with `aria-multiselectable=\"true\"`\n * - Arrow keys navigate options, Space toggles selection, Escape closes\n * - Active descendant pattern for screen reader announcements\n */\n@Component({\n    selector: 'eds-multiselect',\n    templateUrl: './eds-multiselect.html',\n    styleUrl: './eds-multiselect.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [OverlayModule, A11yModule, ...EDS_ICON],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: EdsMultiselect,\n            multi: true,\n        },\n    ],\n    host: {\n        class: 'eds-multiselect',\n        '[attr.disabled]': 'internalDisabled() || null',\n        '[attr.invalid]': 'internalInvalid() || null',\n        '[attr.open]': 'isOpen() || null',\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsMultiselect implements ControlValueAccessor, OnDestroy, AfterContentInit {\n    /**\n     * Data attribute value for end-to-end testing identification.\n     * @default 'eds-multiselect'\n     */\n    e2eAttr = input('eds-multiselect');\n\n    /**\n     * Placeholder text displayed when no options are selected.\n     * @default 'Select options'\n     */\n    placeholder = input('Select options');\n\n    /**\n     * Controls whether the multiselect is disabled.\n     * @default false\n     */\n    disabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * Controls whether the multiselect shows an invalid/error state.\n     * @default false\n     */\n    isInvalid = input(false, { transform: booleanAttribute });\n\n    /**\n     * Aria-label for the combobox trigger.\n     * @default 'Select options'\n     */\n    ariaLabel = input('Select options');\n\n    /**\n     * Emits the current selection whenever it changes.\n     */\n    valueChange = output<string[]>();\n\n    /** The projected option components. */\n    readonly options = contentChildren(EdsMultiselectOption);\n\n    /** Reference to the dropdown template for the overlay. */\n    readonly dropdownTemplate = viewChild<TemplateRef<unknown>>('dropdownTemplate');\n\n    /** Reference to the trigger element. */\n    readonly triggerRef = viewChild<ElementRef<HTMLElement>>('triggerRef');\n\n    /** Whether the dropdown popup is open. */\n    isOpen = signal(false);\n\n    /** Internal selected values. */\n    protected internalValue = signal<string[]>([]);\n\n    /** Internal disabled state (supports CVA setDisabledState). */\n    protected internalDisabled = signal(false);\n\n    /** Internal invalid state. */\n    protected internalInvalid = signal(false);\n\n    /** The display value shown in the trigger. */\n    protected displayValue = computed(() => {\n        const selected = this.internalValue();\n        if (selected.length === 0) {\n            return this.placeholder();\n        }\n        const opts = this.options();\n        const firstLabel = opts.find(o => o.value() === selected[0])?.label() ?? selected[0];\n        if (selected.length === 1) {\n            return firstLabel;\n        }\n        return `${firstLabel} + ${selected.length - 1} more`;\n    });\n\n    /** Whether the placeholder is shown (no selection). */\n    protected isPlaceholderShown = computed(() => this.internalValue().length === 0);\n\n    /** The active descendant ID for screen readers. */\n    protected activeDescendantId = signal<string | null>(null);\n\n    private overlay = inject(Overlay);\n    private viewContainerRef = inject(ViewContainerRef);\n    private destroyRef = inject(DestroyRef);\n    private overlayRef: OverlayRef | null = null;\n    private templatePortal: TemplatePortal | null = null;\n    private keyManager: ActiveDescendantKeyManager<EdsMultiselectOption> | null = null;\n\n    constructor() {\n        // Sync disabled input → internal state\n        effect(() => {\n            this.internalDisabled.set(this.disabled());\n        });\n\n        // Sync isInvalid input → internal state\n        effect(() => {\n            this.internalInvalid.set(this.isInvalid());\n        });\n    }\n\n    private _onChange: (value: string[]) => void = () => { /* noop */ };\n    private _onTouched: () => void = () => { /* noop */ };\n\n    ngAfterContentInit(): void {\n        // Sync option selected states from internalValue whenever options change\n        this.syncOptionsFromValue();\n    }\n\n    ngOnDestroy(): void {\n        this.closeDropdown();\n        this.overlayRef?.dispose();\n        this.overlayRef = null;\n    }\n\n    // --- ControlValueAccessor ---\n\n    writeValue(value: string[]): void {\n        this.internalValue.set(value ?? []);\n        this.syncOptionsFromValue();\n    }\n\n    registerOnChange(fn: (value: string[]) => void): void {\n        this._onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this._onTouched = fn;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.internalDisabled.set(isDisabled);\n    }\n\n    // --- Trigger interactions ---\n\n    protected onTriggerClick(): void {\n        if (this.internalDisabled()) {\n            return;\n        }\n        if (this.isOpen()) {\n            this.closeDropdown();\n        } else {\n            this.openDropdown();\n        }\n    }\n\n    protected onTriggerKeydown(event: KeyboardEvent): void {\n        if (this.internalDisabled()) {\n            return;\n        }\n\n        switch (event.key) {\n            case 'Enter':\n            case ' ':\n                event.preventDefault();\n                if (!this.isOpen()) {\n                    this.openDropdown();\n                }\n                break;\n            case 'ArrowDown':\n                event.preventDefault();\n                if (!this.isOpen()) {\n                    this.openDropdown();\n                }\n                break;\n            case 'ArrowUp':\n                event.preventDefault();\n                if (!this.isOpen()) {\n                    this.openDropdown();\n                }\n                break;\n            case 'Escape':\n                event.preventDefault();\n                if (this.isOpen()) {\n                    this.closeDropdown();\n                }\n                break;\n        }\n    }\n\n    protected onOptionClick(option: EdsMultiselectOption): void {\n        if (option.isDisabled()) {\n            return;\n        }\n        option.onSelect();\n        this.syncValueFromOptions();\n        this.keyManager?.setActiveItem(option);\n        this.updateActiveDescendant();\n    }\n\n    protected onDoneClick(): void {\n        this.closeDropdown();\n    }\n\n    protected onPanelKeydown(event: KeyboardEvent): void {\n        switch (event.key) {\n            case 'ArrowDown':\n                event.preventDefault();\n                this.keyManager?.setNextItemActive();\n                this.updateActiveDescendant();\n                this.scrollActiveOptionIntoView();\n                break;\n            case 'ArrowUp':\n                event.preventDefault();\n                this.keyManager?.setPreviousItemActive();\n                this.updateActiveDescendant();\n                this.scrollActiveOptionIntoView();\n                break;\n            case 'Home':\n                event.preventDefault();\n                this.keyManager?.setFirstItemActive();\n                this.updateActiveDescendant();\n                this.scrollActiveOptionIntoView();\n                break;\n            case 'End':\n                event.preventDefault();\n                this.keyManager?.setLastItemActive();\n                this.updateActiveDescendant();\n                this.scrollActiveOptionIntoView();\n                break;\n            case 'Enter':\n            case ' ':\n                event.preventDefault();\n                this.toggleActiveOption();\n                break;\n            case 'Escape':\n                event.preventDefault();\n                this.closeDropdown();\n                break;\n            default:\n                // Type-ahead: single printable character moves focus to next matching option\n                if (event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey) {\n                    this.handleTypeAhead(event.key);\n                }\n                break;\n        }\n    }\n\n    // --- Dropdown management (private) ---\n\n    private openDropdown(): void {\n        if (this.isOpen() || !this.dropdownTemplate()) {\n            return;\n        }\n\n        const triggerEl = this.triggerRef()?.nativeElement;\n        if (!triggerEl) {\n            return;\n        }\n\n        const positionStrategy = this.overlay\n            .position()\n            .flexibleConnectedTo(triggerEl)\n            .withPositions([\n                new ConnectionPositionPair(\n                    { originX: 'start', originY: 'bottom' },\n                    { overlayX: 'start', overlayY: 'top' },\n                ),\n                new ConnectionPositionPair(\n                    { originX: 'start', originY: 'top' },\n                    { overlayX: 'start', overlayY: 'bottom' },\n                ),\n            ])\n            .withFlexibleDimensions(false)\n            .withPush(true);\n\n        const scrollStrategy = this.overlay.scrollStrategies.reposition();\n\n        this.overlayRef = this.overlay.create({\n            positionStrategy,\n            scrollStrategy,\n            hasBackdrop: true,\n            backdropClass: 'cdk-overlay-transparent-backdrop',\n            width: triggerEl.offsetWidth,\n            disposeOnNavigation: true,\n        });\n\n        this.templatePortal = new TemplatePortal(this.dropdownTemplate(), this.viewContainerRef);\n        this.overlayRef.attach(this.templatePortal);\n\n        // Focus the panel wrapper so keyboard events are captured\n        const panelEl = this.overlayRef.overlayElement.querySelector<HTMLElement>('.eds-multiselect__panel-wrapper');\n        panelEl?.focus();\n\n        this.overlayRef.backdropClick()\n            .pipe(takeUntilDestroyed(this.destroyRef))\n            .subscribe(() => this.closeDropdown());\n\n        this.overlayRef.keydownEvents()\n            .pipe(takeUntilDestroyed(this.destroyRef))\n            .subscribe((event) => {\n                if (event.key === 'Escape') {\n                    event.preventDefault();\n                    this.closeDropdown();\n                }\n            });\n\n        // Setup key manager\n        const opts = this.options();\n        if (opts.length > 0) {\n            // Reset all active states from previous opening\n            opts.forEach(o => o.setInactiveStyles());\n\n            this.keyManager = new ActiveDescendantKeyManager(opts as unknown as EdsMultiselectOption[])\n                .withVerticalOrientation(true)\n                .withHomeAndEnd(true)\n                .withWrap();\n\n            // APG: If options are selected, focus first selected option; otherwise first option\n            const firstSelectedIndex = opts.findIndex(o => o.selected());\n            if (firstSelectedIndex >= 0) {\n                this.keyManager.setActiveItem(firstSelectedIndex);\n            } else {\n                this.keyManager.setFirstItemActive();\n            }\n            this.updateActiveDescendant();\n        }\n\n        this.isOpen.set(true);\n    }\n\n    private closeDropdown(): void {\n        if (!this.isOpen()) {\n            return;\n        }\n        // Clear active styles on all options\n        this.options().forEach(o => o.setInactiveStyles());\n\n        this.overlayRef?.detach();\n        this.overlayRef?.dispose();\n        this.overlayRef = null;\n        this.templatePortal = null;\n        this.keyManager = null;\n        this.activeDescendantId.set(null);\n        this.isOpen.set(false);\n        this._onTouched();\n        this.triggerRef()?.nativeElement?.focus();\n    }\n\n    private toggleActiveOption(): void {\n        const active = this.keyManager?.activeItem;\n        if (active && !active.isDisabled()) {\n            active.onSelect();\n            this.syncValueFromOptions();\n        }\n    }\n\n    private handleTypeAhead(char: string): void {\n        const opts = this.options();\n        const activeIndex = this.keyManager?.activeItemIndex ?? 0;\n        const lowerChar = char.toLowerCase();\n\n        // Search from after the active item, then wrap around\n        for (let i = 1; i <= opts.length; i++) {\n            const index = (activeIndex + i) % opts.length;\n            const option = opts[index];\n            if (!option.isDisabled() && option.label().toLowerCase().startsWith(lowerChar)) {\n                this.keyManager?.setActiveItem(index);\n                this.updateActiveDescendant();\n                this.scrollActiveOptionIntoView();\n                break;\n            }\n        }\n    }\n\n    private scrollActiveOptionIntoView(): void {\n        const activeId = this.activeDescendantId();\n        if (!activeId || !this.overlayRef) {\n            return;\n        }\n        const activeEl = this.overlayRef.overlayElement.querySelector<HTMLElement>(`#${activeId}`);\n        if (activeEl && typeof activeEl.scrollIntoView === 'function') {\n            activeEl.scrollIntoView({ block: 'nearest' });\n        }\n    }\n\n    private updateActiveDescendant(): void {\n        const active = this.keyManager?.activeItem;\n        this.activeDescendantId.set(active ? active.optionId() : null);\n    }\n\n    private syncValueFromOptions(): void {\n        const selectedValues = this.options()\n            .filter(o => o.selected())\n            .map(o => o.value());\n        this.internalValue.set(selectedValues);\n        this._onChange(selectedValues);\n        this.valueChange.emit(selectedValues);\n    }\n\n    private syncOptionsFromValue(): void {\n        const currentValue = this.internalValue();\n        this.options().forEach(option => {\n            option.selected.set(currentValue.includes(option.value()));\n        });\n    }\n}\n",
+            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    output,\n    signal,\n    computed,\n    contentChildren,\n    viewChild,\n    ElementRef,\n    TemplateRef,\n    ViewContainerRef,\n    inject,\n    booleanAttribute,\n    effect,\n    OnDestroy,\n    AfterContentInit,\n    DestroyRef,\n} from '@angular/core';\n/* eslint-disable @typescript-eslint/member-ordering */\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport {\n    Overlay,\n    OverlayRef,\n    OverlayModule,\n    FlexibleConnectedPositionStrategy,\n    ConnectionPositionPair,\n} from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { ActiveDescendantKeyManager } from '@angular/cdk/a11y';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_INPUT_CHECKBOX } from '@eui/eds/eds-input-checkbox';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\n\nimport { EdsMultiselectOption } from './eds-multiselect-option';\n\n/**\n * @description\n * EDS Multiselect component — a combobox-style dropdown that allows multiple selections.\n * Implements the WAI-ARIA multiselect listbox pattern with full keyboard navigation.\n * Styled to match eds-input-text default/hover/focus/disabled states.\n *\n * Integrates with Angular Reactive Forms and Template-driven Forms via ControlValueAccessor.\n *\n * @usageNotes\n * ### Basic usage\n * ```html\n * <eds-multiselect placeholder=\"Select labels\" [(value)]=\"selectedLabels\">\n *   <eds-multiselect-option value=\"important\" label=\"Important\" />\n *   <eds-multiselect-option value=\"starred\" label=\"Starred\" />\n *   <eds-multiselect-option value=\"work\" label=\"Work\" />\n * </eds-multiselect>\n * ```\n *\n * ### With Reactive Forms\n * ```html\n * <eds-multiselect placeholder=\"Select options\" [formControl]=\"myControl\">\n *   <eds-multiselect-option value=\"a\" label=\"Option A\" />\n *   <eds-multiselect-option value=\"b\" label=\"Option B\" />\n * </eds-multiselect>\n * ```\n *\n * ### Accessibility\n * - Implements ARIA combobox pattern with `role=\"combobox\"` on the trigger\n * - Listbox popup uses `role=\"listbox\"` with `aria-multiselectable=\"true\"`\n * - Arrow keys navigate options, Space toggles selection, Escape closes\n * - Active descendant pattern for screen reader announcements\n */\n@Component({\n    selector: 'eds-multiselect',\n    templateUrl: './eds-multiselect.html',\n    styleUrl: './eds-multiselect.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [OverlayModule, A11yModule, ...EDS_ICON, ...EDS_INPUT_CHECKBOX, ...EDS_BUTTON],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: EdsMultiselect,\n            multi: true,\n        },\n    ],\n    host: {\n        class: 'eds-multiselect',\n        '[attr.disabled]': 'internalDisabled() || null',\n        '[attr.invalid]': 'internalInvalid() || null',\n        '[attr.open]': 'isOpen() || null',\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsMultiselect implements ControlValueAccessor, OnDestroy, AfterContentInit {\n    /**\n     * Data attribute value for end-to-end testing identification.\n     * @default 'eds-multiselect'\n     */\n    e2eAttr = input('eds-multiselect');\n\n    /**\n     * Placeholder text displayed when no options are selected.\n     * @default 'Select options'\n     */\n    placeholder = input('Select options');\n\n    /**\n     * Controls whether the multiselect is disabled.\n     * @default false\n     */\n    disabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * Controls whether the multiselect shows an invalid/error state.\n     * @default false\n     */\n    isInvalid = input(false, { transform: booleanAttribute });\n\n    /**\n     * Aria-label for the combobox trigger.\n     * @default 'Select options'\n     */\n    ariaLabel = input('Select options');\n\n    /**\n     * Label for the panel-footer \"Cancel\" button.\n     * @default 'Cancel'\n     */\n    cancelLabel = input('Cancel');\n\n    /**\n     * Label for the panel-footer \"Confirm choice\" button.\n     * @default 'Confirm choice'\n     */\n    confirmLabel = input('Confirm choice');\n\n    /**\n     * Emits the current selection whenever it changes.\n     */\n    valueChange = output<string[]>();\n\n    /**\n     * Emits the confirmed selection when the \"Confirm choice\" button is clicked.\n     */\n    confirmed = output<string[]>();\n\n    /**\n     * Emits when the \"Cancel\" button is clicked (selection reverted to its pre-open state).\n     */\n    cancelled = output<void>();\n\n    /** The projected option components. */\n    readonly options = contentChildren(EdsMultiselectOption);\n\n    /** Reference to the dropdown template for the overlay. */\n    readonly dropdownTemplate = viewChild<TemplateRef<unknown>>('dropdownTemplate');\n\n    /** Reference to the trigger element. */\n    readonly triggerRef = viewChild<ElementRef<HTMLElement>>('triggerRef');\n\n    /** Whether the dropdown popup is open. */\n    isOpen = signal(false);\n\n    /** Internal selected values. */\n    protected internalValue = signal<string[]>([]);\n\n    /** Snapshot of the selection taken when the dropdown opens, used to revert on Cancel. */\n    private valueSnapshot: string[] = [];\n\n    /** Internal disabled state (supports CVA setDisabledState). */\n    protected internalDisabled = signal(false);\n\n    /** Internal invalid state. */\n    protected internalInvalid = signal(false);\n\n    /** The display value shown in the trigger. */\n    protected displayValue = computed(() => {\n        const selected = this.internalValue();\n        if (selected.length === 0) {\n            return this.placeholder();\n        }\n        const opts = this.options();\n        const firstLabel = opts.find(o => o.value() === selected[0])?.label() ?? selected[0];\n        if (selected.length === 1) {\n            return firstLabel;\n        }\n        return `${firstLabel} + ${selected.length - 1} more`;\n    });\n\n    /** Whether the placeholder is shown (no selection). */\n    protected isPlaceholderShown = computed(() => this.internalValue().length === 0);\n\n    /** The active descendant ID for screen readers. */\n    protected activeDescendantId = signal<string | null>(null);\n\n    private overlay = inject(Overlay);\n    private viewContainerRef = inject(ViewContainerRef);\n    private destroyRef = inject(DestroyRef);\n    private overlayRef: OverlayRef | null = null;\n    private templatePortal: TemplatePortal | null = null;\n    private keyManager: ActiveDescendantKeyManager<EdsMultiselectOption> | null = null;\n\n    constructor() {\n        // Sync disabled input → internal state\n        effect(() => {\n            this.internalDisabled.set(this.disabled());\n        });\n\n        // Sync isInvalid input → internal state\n        effect(() => {\n            this.internalInvalid.set(this.isInvalid());\n        });\n    }\n\n    private _onChange: (value: string[]) => void = () => { /* noop */ };\n    private _onTouched: () => void = () => { /* noop */ };\n\n    ngAfterContentInit(): void {\n        // Sync option selected states from internalValue whenever options change\n        this.syncOptionsFromValue();\n    }\n\n    ngOnDestroy(): void {\n        this.closeDropdown();\n        this.overlayRef?.dispose();\n        this.overlayRef = null;\n    }\n\n    // --- ControlValueAccessor ---\n\n    writeValue(value: string[]): void {\n        this.internalValue.set(value ?? []);\n        this.syncOptionsFromValue();\n    }\n\n    registerOnChange(fn: (value: string[]) => void): void {\n        this._onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this._onTouched = fn;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.internalDisabled.set(isDisabled);\n    }\n\n    // --- Trigger interactions ---\n\n    protected onTriggerClick(): void {\n        if (this.internalDisabled()) {\n            return;\n        }\n        if (this.isOpen()) {\n            this.closeDropdown();\n        } else {\n            this.openDropdown();\n        }\n    }\n\n    protected onTriggerKeydown(event: KeyboardEvent): void {\n        if (this.internalDisabled()) {\n            return;\n        }\n\n        switch (event.key) {\n            case 'Enter':\n            case ' ':\n                event.preventDefault();\n                if (!this.isOpen()) {\n                    this.openDropdown();\n                }\n                break;\n            case 'ArrowDown':\n                event.preventDefault();\n                if (!this.isOpen()) {\n                    this.openDropdown();\n                }\n                break;\n            case 'ArrowUp':\n                event.preventDefault();\n                if (!this.isOpen()) {\n                    this.openDropdown();\n                }\n                break;\n            case 'Escape':\n                event.preventDefault();\n                if (this.isOpen()) {\n                    this.closeDropdown();\n                }\n                break;\n        }\n    }\n\n    protected onOptionClick(option: EdsMultiselectOption): void {\n        if (option.isDisabled() || option.isGroup()) {\n            return;\n        }\n        option.onSelect();\n        this.syncValueFromOptions();\n        this.keyManager?.setActiveItem(option);\n        this.updateActiveDescendant();\n    }\n\n    protected onConfirmClick(): void {\n        this.confirmed.emit(this.internalValue());\n        this.closeDropdown();\n    }\n\n    protected onCancelClick(): void {\n        // Revert selection to the snapshot taken when the dropdown opened.\n        this.internalValue.set([...this.valueSnapshot]);\n        this.syncOptionsFromValue();\n        this._onChange(this.valueSnapshot);\n        this.valueChange.emit(this.valueSnapshot);\n        this.cancelled.emit();\n        this.closeDropdown();\n    }\n\n    protected onPanelKeydown(event: KeyboardEvent): void {\n        switch (event.key) {\n            case 'ArrowDown':\n                event.preventDefault();\n                this.keyManager?.setNextItemActive();\n                this.updateActiveDescendant();\n                this.scrollActiveOptionIntoView();\n                break;\n            case 'ArrowUp':\n                event.preventDefault();\n                this.keyManager?.setPreviousItemActive();\n                this.updateActiveDescendant();\n                this.scrollActiveOptionIntoView();\n                break;\n            case 'Home':\n                event.preventDefault();\n                this.keyManager?.setFirstItemActive();\n                this.updateActiveDescendant();\n                this.scrollActiveOptionIntoView();\n                break;\n            case 'End':\n                event.preventDefault();\n                this.keyManager?.setLastItemActive();\n                this.updateActiveDescendant();\n                this.scrollActiveOptionIntoView();\n                break;\n            case 'Enter':\n            case ' ':\n                event.preventDefault();\n                this.toggleActiveOption();\n                break;\n            case 'Escape':\n                event.preventDefault();\n                this.closeDropdown();\n                break;\n            default:\n                // Type-ahead: single printable character moves focus to next matching option\n                if (event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey) {\n                    this.handleTypeAhead(event.key);\n                }\n                break;\n        }\n    }\n\n    // --- Dropdown management (private) ---\n\n    private openDropdown(): void {\n        if (this.isOpen() || !this.dropdownTemplate()) {\n            return;\n        }\n\n        const triggerEl = this.triggerRef()?.nativeElement;\n        if (!triggerEl) {\n            return;\n        }\n\n        // Snapshot current selection so Cancel can revert to it.\n        this.valueSnapshot = [...this.internalValue()];\n\n        const positionStrategy = this.overlay\n            .position()\n            .flexibleConnectedTo(triggerEl)\n            .withPositions([\n                new ConnectionPositionPair(\n                    { originX: 'start', originY: 'bottom' },\n                    { overlayX: 'start', overlayY: 'top' },\n                ),\n                new ConnectionPositionPair(\n                    { originX: 'start', originY: 'top' },\n                    { overlayX: 'start', overlayY: 'bottom' },\n                ),\n            ])\n            .withFlexibleDimensions(false)\n            .withPush(true);\n\n        const scrollStrategy = this.overlay.scrollStrategies.reposition();\n\n        this.overlayRef = this.overlay.create({\n            positionStrategy,\n            scrollStrategy,\n            hasBackdrop: true,\n            backdropClass: 'cdk-overlay-transparent-backdrop',\n            width: triggerEl.offsetWidth,\n            disposeOnNavigation: true,\n        });\n\n        this.templatePortal = new TemplatePortal(this.dropdownTemplate(), this.viewContainerRef);\n        this.overlayRef.attach(this.templatePortal);\n\n        // Focus the panel wrapper so keyboard events are captured\n        const panelEl = this.overlayRef.overlayElement.querySelector<HTMLElement>('.eds-multiselect__panel-wrapper');\n        panelEl?.focus();\n\n        this.overlayRef.backdropClick()\n            .pipe(takeUntilDestroyed(this.destroyRef))\n            .subscribe(() => this.closeDropdown());\n\n        this.overlayRef.keydownEvents()\n            .pipe(takeUntilDestroyed(this.destroyRef))\n            .subscribe((event) => {\n                if (event.key === 'Escape') {\n                    event.preventDefault();\n                    this.closeDropdown();\n                }\n            });\n\n        // Setup key manager\n        const opts = this.options();\n        if (opts.length > 0) {\n            // Reset all active states from previous opening\n            opts.forEach(o => o.setInactiveStyles());\n\n            this.keyManager = new ActiveDescendantKeyManager(opts as unknown as EdsMultiselectOption[])\n                .withVerticalOrientation(true)\n                .withHomeAndEnd(true)\n                .withWrap();\n\n            // APG: If options are selected, focus first selected option; otherwise first option\n            const firstSelectedIndex = opts.findIndex(o => o.selected());\n            if (firstSelectedIndex >= 0) {\n                this.keyManager.setActiveItem(firstSelectedIndex);\n            } else {\n                this.keyManager.setFirstItemActive();\n            }\n            this.updateActiveDescendant();\n        }\n\n        this.isOpen.set(true);\n    }\n\n    private closeDropdown(): void {\n        if (!this.isOpen()) {\n            return;\n        }\n        // Clear active styles on all options\n        this.options().forEach(o => o.setInactiveStyles());\n\n        this.overlayRef?.detach();\n        this.overlayRef?.dispose();\n        this.overlayRef = null;\n        this.templatePortal = null;\n        this.keyManager = null;\n        this.activeDescendantId.set(null);\n        this.isOpen.set(false);\n        this._onTouched();\n        this.triggerRef()?.nativeElement?.focus();\n    }\n\n    private toggleActiveOption(): void {\n        const active = this.keyManager?.activeItem;\n        if (active && !active.isDisabled()) {\n            active.onSelect();\n            this.syncValueFromOptions();\n        }\n    }\n\n    private handleTypeAhead(char: string): void {\n        const opts = this.options();\n        const activeIndex = this.keyManager?.activeItemIndex ?? 0;\n        const lowerChar = char.toLowerCase();\n\n        // Search from after the active item, then wrap around\n        for (let i = 1; i <= opts.length; i++) {\n            const index = (activeIndex + i) % opts.length;\n            const option = opts[index];\n            if (!option.isDisabled() && option.label().toLowerCase().startsWith(lowerChar)) {\n                this.keyManager?.setActiveItem(index);\n                this.updateActiveDescendant();\n                this.scrollActiveOptionIntoView();\n                break;\n            }\n        }\n    }\n\n    private scrollActiveOptionIntoView(): void {\n        const activeId = this.activeDescendantId();\n        if (!activeId || !this.overlayRef) {\n            return;\n        }\n        const activeEl = this.overlayRef.overlayElement.querySelector<HTMLElement>(`#${activeId}`);\n        if (activeEl && typeof activeEl.scrollIntoView === 'function') {\n            activeEl.scrollIntoView({ block: 'nearest' });\n        }\n    }\n\n    private updateActiveDescendant(): void {\n        const active = this.keyManager?.activeItem;\n        this.activeDescendantId.set(active ? active.optionId() : null);\n    }\n\n    private syncValueFromOptions(): void {\n        const selectedValues = this.options()\n            .filter(o => o.selected() && !o.isGroup())\n            .map(o => o.value());\n        this.internalValue.set(selectedValues);\n        this._onChange(selectedValues);\n        this.valueChange.emit(selectedValues);\n    }\n\n    private syncOptionsFromValue(): void {\n        const currentValue = this.internalValue();\n        this.options().forEach(option => {\n            option.selected.set(!option.isGroup() && currentValue.includes(option.value()));\n        });\n    }\n}\n",
             "styleUrl": "./eds-multiselect.scss",
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n        position: relative;\n        width: 100%;\n\n        .eds-multiselect__trigger {\n            @include base.eds-ellipsis();\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n            font: var(--eds-f-paragraph-m);\n            appearance: none;\n            background-color: var(--eds-c-surface-elevation);\n            border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n            border-radius: var(--eds-br-s);\n            box-shadow: none;\n            color: var(--eds-c-foreground-default);\n            min-height: var(--eds-si-3xl);\n            padding: var(--eds-sp-xs) var(--eds-sp-s);\n            width: 100%;\n            cursor: pointer;\n            outline: none;\n            transition: border-color 0.15s ease;\n\n            &:hover:not([aria-disabled=\"true\"]) {\n                border-color: var(--eds-c-border-primary);\n            }\n\n            &:focus-visible:not([aria-disabled=\"true\"]) {\n                outline: 2px solid var(--eds-c-border-primary);\n                outline-offset: -2px;\n            }\n        }\n\n        .eds-multiselect__display {\n            flex: 1;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n\n            &--placeholder {\n                color: var(--eds-c-foreground-subtler);\n            }\n        }\n\n        .eds-multiselect__caret {\n            flex-shrink: 0;\n            font-size: 20px;\n            color: var(--eds-c-foreground-default);\n            transition: transform 0.2s ease;\n        }\n\n    }\n\n    // Open state\n    :host([open]) {\n        .eds-multiselect__trigger {\n            border-color: var(--eds-c-border-primary);\n            outline: 2px solid var(--eds-c-border-primary);\n            outline-offset: -2px;\n        }\n\n        .eds-multiselect__caret {\n            transform: rotate(180deg);\n        }\n    }\n\n    // Disabled state\n    :host([disabled]) {\n        .eds-multiselect__trigger {\n            background-color: var(--eds-c-surface-disabled);\n            border-color: var(--eds-c-border-disabled);\n            color: var(--eds-c-foreground-subtler);\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n\n        .eds-multiselect__caret {\n            color: var(--eds-c-foreground-subtler);\n        }\n    }\n\n    // Invalid state\n    :host([invalid]) {\n        .eds-multiselect__trigger {\n            border-color: var(--eds-c-border-critical);\n        }\n\n        .eds-multiselect__trigger:focus-visible {\n            outline-color: var(--eds-c-border-critical);\n        }\n    }\n}\n\n// Dropdown panel (rendered in CDK overlay, outside :host)\n.eds-multiselect__panel-wrapper {\n    background-color: var(--eds-c-surface-elevation);\n    border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n    border-radius: var(--eds-br-s);\n    box-shadow: var(--eds-sh-1);\n    display: flex;\n    flex-direction: column;\n    max-height: 280px;\n    min-width: 100%;\n    box-sizing: border-box;\n    outline: none;\n}\n\n.eds-multiselect__panel {\n    flex: 1;\n    max-height: 240px;\n    overflow-y: auto;\n    padding: var(--eds-sp-3xs) 0;\n    outline: none;\n\n    .eds-multiselect-option {\n        display: flex;\n        align-items: center;\n        gap: var(--eds-sp-s);\n        padding: var(--eds-sp-xs) var(--eds-sp-s);\n        cursor: pointer;\n        font: var(--eds-f-paragraph-m);\n        color: var(--eds-c-foreground-default);\n        user-select: none;\n        transition: background-color 0.1s ease;\n\n        .eds-multiselect-option__label {\n            flex: 1;\n        }\n\n        .eds-multiselect-option__check {\n            opacity: 0;\n            font-size: 16px;\n            color: var(--eds-c-foreground-primary);\n            transition: opacity 0.1s ease;\n        }\n\n        &:hover:not(.eds-multiselect-option--disabled) {\n            background-color: var(--eds-c-surface-hover);\n        }\n\n        &--active:not(.eds-multiselect-option--disabled) {\n            background-color: var(--eds-c-surface-hover);\n            outline: var(--eds-bw-s) solid var(--eds-c-border-primary);\n            outline-offset: -2px;\n        }\n\n        &--selected {\n            .eds-multiselect-option__check {\n                opacity: 1;\n            }\n        }\n\n        &--disabled {\n            color: var(--eds-c-foreground-subtler);\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n}\n\n.eds-multiselect__panel-footer {\n    display: flex;\n    justify-content: flex-start;\n    padding: var(--eds-sp-xs) var(--eds-sp-s);\n    border-top: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n}\n\n.eds-multiselect__done-button {\n    font: var(--eds-f-label-m-semibold);\n    color: var(--eds-c-foreground-primary);\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: var(--eds-sp-3xs) var(--eds-sp-s);\n    border-radius: var(--eds-br-s);\n    transition: background-color 0.1s ease;\n\n    &:hover {\n        background-color: var(--eds-c-surface-hover);\n    }\n\n    &:focus-visible {\n        outline: 2px solid var(--eds-c-border-primary);\n        outline-offset: -2px;\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n        position: relative;\n        width: 100%;\n\n        .eds-multiselect__trigger {\n            @include base.eds-ellipsis();\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n            font: var(--eds-f-paragraph-m);\n            appearance: none;\n            background-color: var(--eds-c-surface-elevation);\n            border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n            border-radius: var(--eds-br-s);\n            box-shadow: none;\n            color: var(--eds-c-foreground-default);\n            min-height: var(--eds-si-3xl);\n            padding: var(--eds-sp-xs) var(--eds-sp-s);\n            width: 100%;\n            cursor: pointer;\n            outline: none;\n            transition: border-color 0.15s ease;\n\n            &:hover:not([aria-disabled=\"true\"]) {\n                border-color: var(--eds-c-border-primary);\n            }\n\n            &:focus-visible:not([aria-disabled=\"true\"]) {\n                outline: 2px solid var(--eds-c-border-primary);\n                outline-offset: -2px;\n            }\n        }\n\n        .eds-multiselect__display {\n            flex: 1;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n\n            &--placeholder {\n                color: var(--eds-c-foreground-subtler);\n            }\n        }\n\n        .eds-multiselect__caret {\n            flex-shrink: 0;\n            font-size: 20px;\n            color: var(--eds-c-foreground-default);\n            transition: transform 0.2s ease;\n        }\n\n    }\n\n    // Open state\n    :host([open]) {\n        .eds-multiselect__trigger {\n            border-color: var(--eds-c-border-primary);\n            outline: 2px solid var(--eds-c-border-primary);\n            outline-offset: -2px;\n        }\n\n        .eds-multiselect__caret {\n            transform: rotate(180deg);\n        }\n    }\n\n    // Disabled state\n    :host([disabled]) {\n        .eds-multiselect__trigger {\n            background-color: var(--eds-c-surface-disabled);\n            border-color: var(--eds-c-border-disabled);\n            color: var(--eds-c-foreground-subtler);\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n\n        .eds-multiselect__caret {\n            color: var(--eds-c-foreground-subtler);\n        }\n    }\n\n    // Invalid state\n    :host([invalid]) {\n        .eds-multiselect__trigger {\n            border-color: var(--eds-c-border-critical);\n        }\n\n        .eds-multiselect__trigger:focus-visible {\n            outline-color: var(--eds-c-border-critical);\n        }\n    }\n}\n\n// Dropdown panel (rendered in CDK overlay, outside :host)\n.eds-multiselect__panel-wrapper {\n    background-color: var(--eds-c-surface-elevation);\n    border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n    border-radius: var(--eds-br-s);\n    box-shadow: var(--eds-sh-1);\n    display: flex;\n    flex-direction: column;\n    max-height: 280px;\n    min-width: 100%;\n    box-sizing: border-box;\n    outline: none;\n}\n\n.eds-multiselect__panel {\n    flex: 1;\n    max-height: 240px;\n    overflow-y: auto;\n    padding: var(--eds-sp-3xs) 0;\n    outline: none;\n\n    .eds-multiselect-group {\n        padding: var(--eds-sp-xs) var(--eds-sp-s);\n        font: var(--eds-f-label-m-medium);\n        color: var(--eds-c-foreground-subtle);\n        cursor: default;\n        user-select: none;\n    }\n\n    .eds-multiselect-option {\n        display: flex;\n        align-items: center;\n        gap: var(--eds-sp-s);\n        padding: var(--eds-sp-xs) var(--eds-sp-s);\n        cursor: pointer;\n        font: var(--eds-f-paragraph-m);\n        color: var(--eds-c-foreground-default);\n        user-select: none;\n        transition: background-color 0.1s ease;\n\n        .eds-multiselect-option__label {\n            flex: 1;\n        }\n\n        .eds-multiselect-option__checkbox {\n            flex-shrink: 0;\n            pointer-events: none;\n        }\n\n        &:hover:not(.eds-multiselect-option--disabled) {\n            background-color: var(--eds-c-surface-hover);\n        }\n\n        &--active:not(.eds-multiselect-option--disabled) {\n            outline: var(--eds-bw-s) solid var(--eds-c-border-primary);\n            outline-offset: -2px;\n        }\n\n        &--selected {\n            background-color: var(--eds-c-surface-selected);\n\n            &:hover:not(.eds-multiselect-option--disabled) {\n                background-color: var(--eds-c-surface-selected);\n            }\n        }\n\n        &--disabled {\n            color: var(--eds-c-foreground-subtler);\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n}\n\n.eds-multiselect__panel-footer {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--eds-sp-xs);\n    padding: var(--eds-sp-xs) var(--eds-sp-s);\n    border-top: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n}\n",
                     "styleUrl": "./eds-multiselect.scss"
                 }
             ],
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 952,
-                    "end": 1315,
+                    "pos": 1068,
+                    "end": 1431,
                     "kind": 328,
                     "id": 0,
                     "flags": 16777216,
                     "modifierFlagsCache": 0,
                     "transformFlags": 0,
                     "tagName": {
-                        "pos": 953,
-                        "end": 964,
+                        "pos": 1069,
+                        "end": 1080,
                         "kind": 80,
                         "id": 0,
                         "flags": 16777216,
@@ -52180,16 +52298,16 @@
                     "comment": "<p>EDS Multiselect component — a combobox-style dropdown that allows multiple selections.\nImplements the WAI-ARIA multiselect listbox pattern with full keyboard navigation.\nStyled to match eds-input-text default/hover/focus/disabled states.</p>\n<p>Integrates with Angular Reactive Forms and Template-driven Forms via ControlValueAccessor.</p>\n"
                 },
                 {
-                    "pos": 1315,
-                    "end": 2229,
+                    "pos": 1431,
+                    "end": 2345,
                     "kind": 328,
                     "id": 0,
                     "flags": 16777216,
                     "modifierFlagsCache": 0,
                     "transformFlags": 0,
                     "tagName": {
-                        "pos": 1316,
-                        "end": 1326,
+                        "pos": 1432,
+                        "end": 1442,
                         "kind": 80,
                         "id": 0,
                         "flags": 16777216,
@@ -52205,7 +52323,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 172,
+                "line": 199,
                 "rawdescription": "\n"
             },
             "extends": [],
@@ -52229,6 +52347,14 @@
                         "name": "EDS_ICON",
                         "type": "module"
                     },
+                    {
+                        "name": "EDS_INPUT_CHECKBOX",
+                        "type": "module"
+                    },
+                    {
+                        "name": "EDS_BUTTON",
+                        "type": "module"
+                    },
                     {
                         "name": "ControlValueAccessor",
                         "type": "interface"
@@ -52243,11 +52369,11 @@
                     }
                 ]
             },
-            "templateData": "<!-- Combobox trigger -->\n<div\n    #triggerRef\n    class=\"eds-multiselect__trigger\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"isOpen() ? 'eds-multiselect-listbox' : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-disabled]=\"internalDisabled() || null\"\n    [attr.tabindex]=\"internalDisabled() ? -1 : 0\"\n    (click)=\"onTriggerClick()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n>\n    <span\n        class=\"eds-multiselect__display\"\n        [class.eds-multiselect__display--placeholder]=\"isPlaceholderShown()\"\n    >\n        {{ displayValue() }}\n    </span>\n    <eds-icon\n        class=\"eds-multiselect__caret\"\n        [icon]=\"'caret-down'\"\n        aria-hidden=\"true\"\n    />\n</div>\n\n<!-- Dropdown panel (rendered in overlay) -->\n<ng-template #dropdownTemplate>\n    <div class=\"eds-multiselect__panel-wrapper\" tabindex=\"-1\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n        <div\n            class=\"eds-multiselect__panel\"\n            id=\"eds-multiselect-listbox\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (keydown)=\"onPanelKeydown($event)\"\n        >\n            @for (option of options(); track option.value()) {\n                <div\n                    class=\"eds-multiselect-option\"\n                    [class.eds-multiselect-option--selected]=\"option.selected()\"\n                    [class.eds-multiselect-option--active]=\"option.isActive()\"\n                    [class.eds-multiselect-option--disabled]=\"option.isDisabled()\"\n                    [attr.role]=\"'option'\"\n                    [attr.aria-selected]=\"option.selected()\"\n                    [attr.aria-disabled]=\"option.isDisabled() || null\"\n                    [id]=\"option.optionId()\"\n                    (click)=\"onOptionClick(option)\"\n                >\n                    <eds-icon\n                        class=\"eds-multiselect-option__check\"\n                        [icon]=\"'check'\"\n                        edsSizeS\n                        aria-hidden=\"true\"\n                    />\n                    <span class=\"eds-multiselect-option__label\">{{ option.label() }}</span>\n                </div>\n            }\n        </div>\n        <div class=\"eds-multiselect__panel-footer\">\n            <button\n                type=\"button\"\n                class=\"eds-multiselect__done-button\"\n                (click)=\"onDoneClick()\"\n            >\n                Done\n            </button>\n        </div>\n    </div>\n</ng-template>\n"
+            "templateData": "<!-- Combobox trigger -->\n<div\n    #triggerRef\n    class=\"eds-multiselect__trigger\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"isOpen() ? 'eds-multiselect-listbox' : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-disabled]=\"internalDisabled() || null\"\n    [attr.tabindex]=\"internalDisabled() ? -1 : 0\"\n    (click)=\"onTriggerClick()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n>\n    <span\n        class=\"eds-multiselect__display\"\n        [class.eds-multiselect__display--placeholder]=\"isPlaceholderShown()\"\n    >\n        {{ displayValue() }}\n    </span>\n    <eds-icon\n        class=\"eds-multiselect__caret\"\n        [icon]=\"'caret-down'\"\n        aria-hidden=\"true\"\n    />\n</div>\n\n<!-- Dropdown panel (rendered in overlay) -->\n<ng-template #dropdownTemplate>\n    <div class=\"eds-multiselect__panel-wrapper\" tabindex=\"-1\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n        <div\n            class=\"eds-multiselect__panel\"\n            id=\"eds-multiselect-listbox\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (keydown)=\"onPanelKeydown($event)\"\n        >\n            @for (option of options(); track option.value()) {\n                @if (option.isGroup()) {\n                    <div\n                        class=\"eds-multiselect-group\"\n                        role=\"presentation\"\n                        [id]=\"option.optionId()\"\n                    >\n                        {{ option.label() }}\n                    </div>\n                } @else {\n                    <div\n                        class=\"eds-multiselect-option\"\n                        [class.eds-multiselect-option--selected]=\"option.selected()\"\n                        [class.eds-multiselect-option--active]=\"option.isActive()\"\n                        [class.eds-multiselect-option--disabled]=\"option.isDisabled()\"\n                        [attr.role]=\"'option'\"\n                        [attr.aria-selected]=\"option.selected()\"\n                        [attr.aria-disabled]=\"option.isDisabled() || null\"\n                        [id]=\"option.optionId()\"\n                        (click)=\"onOptionClick(option)\"\n                    >\n                        <input\n                            class=\"eds-multiselect-option__checkbox\"\n                            edsInputCheckbox\n                            tabindex=\"-1\"\n                            aria-hidden=\"true\"\n                            [checked]=\"option.selected()\"\n                            [disabled]=\"option.isDisabled()\"\n                        />\n                        <span class=\"eds-multiselect-option__label\">{{ option.label() }}</span>\n                    </div>\n                }\n            }\n        </div>\n        <div class=\"eds-multiselect__panel-footer\">\n            <button\n                edsButton\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"s\"\n                (click)=\"onCancelClick()\"\n            >\n                {{ cancelLabel() }}\n            </button>\n            <button\n                edsButton\n                type=\"button\"\n                variant=\"secondary\"\n                size=\"s\"\n                (click)=\"onConfirmClick()\"\n            >\n                {{ confirmLabel() }}\n            </button>\n        </div>\n    </div>\n</ng-template>\n"
         },
         {
             "name": "EdsMultiselectOption",
-            "id": "component-EdsMultiselectOption-836eb5077243e6dc13b742dcf3bc11918de074d762c0c41faada04e58d314c8c6c0e0f58315b9355c8da99deb95ff39c54cb49764c05829c40255f427f98fe6e",
+            "id": "component-EdsMultiselectOption-c797474cbcb53cae2916275084f3211f3783e34626856841c73443a831f1f4083fd8fb78aa4e8a203b72dcfe20e71dcec6232a4c5985e75f099f2de82b796fad",
             "file": "packages/eds/eds-multiselect/eds-multiselect-option.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -52302,6 +52428,41 @@
                     ],
                     "required": false
                 },
+                {
+                    "name": "isGroup",
+                    "coverageIgnore": false,
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "boolean",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Whether this entry is a non-selectable group header.\nWhen true the entry renders as plain label text, is skipped by keyboard\nnavigation, and cannot be selected.\nfalse</p>\n",
+                    "line": 73,
+                    "rawdescription": "\n\nWhether this entry is a non-selectable group header.\nWhen true the entry renders as plain label text, is skipped by keyboard\nnavigation, and cannot be selected.\nfalse\n",
+                    "jsdoctags": [
+                        {
+                            "pos": 2017,
+                            "end": 2037,
+                            "kind": 328,
+                            "id": 0,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "tagName": {
+                                "pos": 2018,
+                                "end": 2025,
+                                "kind": 80,
+                                "id": 0,
+                                "flags": 16842752,
+                                "transformFlags": 0,
+                                "escapedText": "default"
+                            },
+                            "comment": "<p>false</p>\n"
+                        }
+                    ],
+                    "required": false
+                },
                 {
                     "name": "label",
                     "coverageIgnore": false,
@@ -52341,7 +52502,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 83,
+                    "line": 92,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -52357,7 +52518,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether this option is the active descendant (highlighted via keyboard).</p>\n",
-                    "line": 78,
+                    "line": 87,
                     "rawdescription": "\nWhether this option is the active descendant (highlighted via keyboard)."
                 },
                 {
@@ -52370,7 +52531,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Unique ID for the option element (used for aria-activedescendant).</p>\n",
-                    "line": 81,
+                    "line": 90,
                     "rawdescription": "\nUnique ID for the option element (used for aria-activedescendant)."
                 },
                 {
@@ -52383,7 +52544,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether this option is currently selected.</p>\n",
-                    "line": 75,
+                    "line": 84,
                     "rawdescription": "\nWhether this option is currently selected."
                 }
             ],
@@ -52395,7 +52556,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 97,
+                    "line": 106,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -52408,7 +52569,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 87,
+                    "line": 96,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -52421,7 +52582,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 91,
+                    "line": 100,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -52442,7 +52603,7 @@
             "description": "<p>An individual option within the EDS Multiselect dropdown.\nSupports selection state, disabled state, and keyboard navigation via CDK ActiveDescendantKeyManager.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-multiselect-option value=&quot;opt1&quot; label=&quot;Option 1&quot; /&gt;</code></pre></div>",
             "rawdescription": "\n\nAn individual option within the EDS Multiselect dropdown.\nSupports selection state, disabled state, and keyboard navigation via CDK ActiveDescendantKeyManager.\n\n```html\n<eds-multiselect-option value=\"opt1\" label=\"Option 1\" />\n```\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    signal,\n    computed,\n    booleanAttribute,\n    ElementRef,\n    inject,\n} from '@angular/core';\nimport { Highlightable } from '@angular/cdk/a11y';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\n\n/**\n * @description\n * An individual option within the EDS Multiselect dropdown.\n * Supports selection state, disabled state, and keyboard navigation via CDK ActiveDescendantKeyManager.\n *\n * @usageNotes\n * ```html\n * <eds-multiselect-option value=\"opt1\" label=\"Option 1\" />\n * ```\n */\n@Component({\n    selector: 'eds-multiselect-option',\n    template: `\n        <span class=\"eds-multiselect-option__label\">{{ label() }}</span>\n        <eds-icon\n            class=\"eds-multiselect-option__check\"\n            [icon]=\"'check'\"\n            aria-hidden=\"true\"\n        />\n    `,\n    styleUrl: './eds-multiselect-option.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [...EDS_ICON],\n    host: {\n        class: 'eds-multiselect-option',\n        '[attr.selected]': 'selected() || null',\n        '[attr.active]': 'isActive() || null',\n        '[attr.disabled]': 'isDisabled() || null',\n        role: 'option',\n        '[attr.aria-selected]': 'selected()',\n        '[attr.aria-disabled]': 'isDisabled() || null',\n        '[attr.data-e2e]': '\"eds-multiselect-option\"',\n        '[id]': 'optionId()',\n        '(click)': 'onSelect()',\n    },\n})\nexport class EdsMultiselectOption implements Highlightable {\n    /**\n     * The value associated with this option.\n     */\n    value = input.required<string>();\n\n    /**\n     * The display label for this option.\n     */\n    label = input.required<string>();\n\n    /**\n     * Whether this option is disabled.\n     * @default false\n     */\n    isDisabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * Required by Highlightable interface — reads the signal value.\n     */\n    get disabled(): boolean {\n        return this.isDisabled();\n    }\n\n    /** Whether this option is currently selected. */\n    selected = signal(false);\n\n    /** Whether this option is the active descendant (highlighted via keyboard). */\n    isActive = signal(false);\n\n    /** Unique ID for the option element (used for aria-activedescendant). */\n    optionId = computed(() => `eds-multiselect-option-${this.value()}`);\n\n    readonly elementRef = inject(ElementRef);\n\n    // --- Highlightable interface ---\n\n    setActiveStyles(): void {\n        this.isActive.set(true);\n    }\n\n    setInactiveStyles(): void {\n        this.isActive.set(false);\n    }\n\n    // --- Interaction ---\n\n    onSelect(): void {\n        if (!this.isDisabled()) {\n            this.selected.set(!this.selected());\n        }\n    }\n}\n",
+            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    signal,\n    computed,\n    booleanAttribute,\n    ElementRef,\n    inject,\n} from '@angular/core';\nimport { Highlightable } from '@angular/cdk/a11y';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\n\n/**\n * @description\n * An individual option within the EDS Multiselect dropdown.\n * Supports selection state, disabled state, and keyboard navigation via CDK ActiveDescendantKeyManager.\n *\n * @usageNotes\n * ```html\n * <eds-multiselect-option value=\"opt1\" label=\"Option 1\" />\n * ```\n */\n@Component({\n    selector: 'eds-multiselect-option',\n    template: `\n        <span class=\"eds-multiselect-option__label\">{{ label() }}</span>\n        <eds-icon\n            class=\"eds-multiselect-option__check\"\n            [icon]=\"'check'\"\n            aria-hidden=\"true\"\n        />\n    `,\n    styleUrl: './eds-multiselect-option.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [...EDS_ICON],\n    host: {\n        class: 'eds-multiselect-option',\n        '[attr.selected]': 'selected() || null',\n        '[attr.active]': 'isActive() || null',\n        '[attr.disabled]': 'isDisabled() || null',\n        role: 'option',\n        '[attr.aria-selected]': 'selected()',\n        '[attr.aria-disabled]': 'isDisabled() || null',\n        '[attr.data-e2e]': '\"eds-multiselect-option\"',\n        '[id]': 'optionId()',\n        '(click)': 'onSelect()',\n    },\n})\nexport class EdsMultiselectOption implements Highlightable {\n    /**\n     * The value associated with this option.\n     */\n    value = input.required<string>();\n\n    /**\n     * The display label for this option.\n     */\n    label = input.required<string>();\n\n    /**\n     * Whether this option is disabled.\n     * @default false\n     */\n    isDisabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * Whether this entry is a non-selectable group header.\n     * When true the entry renders as plain label text, is skipped by keyboard\n     * navigation, and cannot be selected.\n     * @default false\n     */\n    isGroup = input(false, { transform: booleanAttribute });\n\n    /**\n     * Required by Highlightable interface — reads the signal value.\n     * Group headers are treated as \"disabled\" so the key manager skips them.\n     */\n    get disabled(): boolean {\n        return this.isDisabled() || this.isGroup();\n    }\n\n    /** Whether this option is currently selected. */\n    selected = signal(false);\n\n    /** Whether this option is the active descendant (highlighted via keyboard). */\n    isActive = signal(false);\n\n    /** Unique ID for the option element (used for aria-activedescendant). */\n    optionId = computed(() => `eds-multiselect-option-${this.value()}`);\n\n    readonly elementRef = inject(ElementRef);\n\n    // --- Highlightable interface ---\n\n    setActiveStyles(): void {\n        this.isActive.set(true);\n    }\n\n    setInactiveStyles(): void {\n        this.isActive.set(false);\n    }\n\n    // --- Interaction ---\n\n    onSelect(): void {\n        if (!this.isDisabled() && !this.isGroup()) {\n            this.selected.set(!this.selected());\n        }\n    }\n}\n",
             "styleUrl": "./eds-multiselect-option.scss",
             "assetsDirs": [],
             "styleUrlsData": [
@@ -52503,9 +52664,9 @@
                         "name": "disabled",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 70,
-                        "rawdescription": "\n\nRequired by Highlightable interface — reads the signal value.\n",
-                        "description": "<p>Required by Highlightable interface — reads the signal value.</p>\n"
+                        "line": 79,
+                        "rawdescription": "\n\nRequired by Highlightable interface — reads the signal value.\nGroup headers are treated as \"disabled\" so the key manager skips them.\n",
+                        "description": "<p>Required by Highlightable interface — reads the signal value.\nGroup headers are treated as &quot;disabled&quot; so the key manager skips them.</p>\n"
                     }
                 }
             },