@eui/ecl 22.0.0-alpha.15 → 22.0.0-alpha.17

package/docs/json/documentation.json

@@ -26400,12 +26400,12 @@
         },
         {
             "name": "EclModalBodyFixedContentDirective",
-            "id": "directive-EclModalBodyFixedContentDirective-c54251ee62ee2667bd0d6c99f3dfa29a1414b71187b155e6de6a1e336739fbc6729f643475b9ad0a81a145d8d6e06d2aeb65e12e63d48d863c55c26d632e6140",
+            "id": "directive-EclModalBodyFixedContentDirective-2d5d6d441c418ed62688108877d43d0ef18d40eec5b063c19d0ab10532bb5ce53ec887752a400226fe98cc2dd9d52d6fe863f444f2e59abab150df8dcd22ab65",
             "file": "packages/ecl/components/ecl-modal/ecl-modal-body-fixed.directive.ts",
             "type": "directive",
             "description": "<p>Directive for styling fixed content inside the modal body.</p>\n<p>Applies the appropriate CSS class to mark the element as fixed inside the modal body.</p>\n",
             "rawdescription": "\n\nDirective for styling fixed content inside the modal body.\n\nApplies the appropriate CSS class to mark the element as fixed inside the modal body.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive for styling fixed content inside the modal body.\n *\n * Applies the appropriate CSS class to mark the element as fixed inside the modal body.\n */\n@Directive({\n    selector: '[eclModalBodyFixedContent]',\n})\nexport class EclModalBodyFixedContentDirective extends ECLBaseDirective {\n    /**\n     * Applies the `ecl-modal__body-fixed` class to the host element.\n     */\n    @HostBinding('class.ecl-modal__body-fixed') className = true;\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive for styling fixed content inside the modal body.\n *\n * Applies the appropriate CSS class to mark the element as fixed inside the modal body.\n */\n@Directive({\n    selector: '[eclModalBodyFixedContent]',\n    host: {\n        '[class.ecl-modal__body-fixed]': 'className',\n    },\n})\nexport class EclModalBodyFixedContentDirective extends ECLBaseDirective {\n    /**\n     * Applies the `ecl-modal__body-fixed` class to the host element.\n     */\n    className = true;\n}\n",
             "selector": "[eclModalBodyFixedContent]",
             "providers": [],
             "hostDirectives": [],
@@ -26458,21 +26458,7 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-modal__body-fixed",
-                    "actualName": "className",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies the `ecl-modal__body-fixed` class to the host element.\n",
-                    "description": "<p>Applies the <code>ecl-modal__body-fixed</code> class to the host element.</p>\n",
-                    "line": 16,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [
                 {
@@ -26485,17 +26471,8 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Applies the <code>ecl-modal__body-fixed</code> class to the host element.</p>\n",
-                    "line": 16,
-                    "rawdescription": "\n\nApplies the `ecl-modal__body-fixed` class to the host element.\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-modal__body-fixed'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "line": 19,
+                    "rawdescription": "\n\nApplies the `ecl-modal__body-fixed` class to the host element.\n"
                 }
             ],
             "methodsClass": [
@@ -26541,8 +26518,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 268,
+                    "pos": 94,
+                    "end": 255,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -26566,12 +26543,12 @@
         },
         {
             "name": "EclModalCloseDirective",
-            "id": "directive-EclModalCloseDirective-3606e79ddf1b31fe139dc50bd86e2f3d54c9c91f1ee4bd99937dd3f5e04e3adfde7217b64cf4a35245f753f2449d71d2ef9afdb75d928916eaecf563144d1335",
+            "id": "directive-EclModalCloseDirective-cdd0de7bd8d092d20122ce20740b2c5c2f9234534d8351253dd720841d70be3843e6bd67f8b468c5f48dca23eee057ea08f901b8c706728a7da4c61e5d9522aa",
             "file": "packages/ecl/components/ecl-modal/ecl-modal-close.directive.ts",
             "type": "directive",
             "description": "<p>Directive that allows an element to close the modal on click.</p>\n<p>Can emit a result and indicate the role (e.g., confirm, cancel).</p>\n",
             "rawdescription": "\n\nDirective that allows an element to close the modal on click.\n\nCan emit a result and indicate the role (e.g., confirm, cancel).\n",
-            "sourceCode": "import { Directive, HostListener, input, output } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that allows an element to close the modal on click.\n *\n * Can emit a result and indicate the role (e.g., confirm, cancel).\n */\n@Directive({\n    selector: '[eclModalClose]',\n})\nexport class EclModalCloseDirective<T> extends ECLBaseDirective {\n    /**\n     * Optional result value to emit when modal is closed.\n     */\n    eclModalResult = input<T>(undefined, { alias: 'eclModalClose' });\n    \n    /**\n     * Optional role associated with the modal close action (e.g., confirm, cancel).\n     */\n    eclModalRole = input<'confirm' | 'cancel' | string>();\n    \n    /**\n     * Event emitted when the element is clicked and the modal should be closed.\n     */\n    modalClose = output();\n\n    /**\n     * Handles click events and emits the `modalClose` event.\n     */\n    @HostListener('click', ['$event'])\n    onClick(evt: MouseEvent): void {\n        this.modalClose.emit(null);\n    }\n}\n",
+            "sourceCode": "import { Directive, input, output } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that allows an element to close the modal on click.\n *\n * Can emit a result and indicate the role (e.g., confirm, cancel).\n */\n@Directive({\n    selector: '[eclModalClose]',\n    host: {\n        '(click)': 'onClick()',\n    },\n})\nexport class EclModalCloseDirective<T> extends ECLBaseDirective {\n    /**\n     * Optional result value to emit when modal is closed.\n     */\n    eclModalResult = input<T>(undefined, { alias: 'eclModalClose' });\n    \n    /**\n     * Optional role associated with the modal close action (e.g., confirm, cancel).\n     */\n    eclModalRole = input<'confirm' | 'cancel' | string>();\n    \n    /**\n     * Event emitted when the element is clicked and the modal should be closed.\n     */\n    modalClose = output();\n\n    /**\n     * Handles click events and emits the `modalClose` event.\n     */\n    onClick(): void {\n        this.modalClose.emit(null);\n    }\n}\n",
             "selector": "[eclModalClose]",
             "providers": [],
             "hostDirectives": [],
@@ -26587,7 +26564,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Optional result value to emit when modal is closed.</p>\n",
-                    "line": 16,
+                    "line": 19,
                     "rawdescription": "\n\nOptional result value to emit when modal is closed.\n",
                     "required": false
                 },
@@ -26600,7 +26577,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Optional role associated with the modal close action (e.g., confirm, cancel).</p>\n",
-                    "line": 21,
+                    "line": 24,
                     "rawdescription": "\n\nOptional role associated with the modal close action (e.g., confirm, cancel).\n",
                     "required": false
                 },
@@ -26657,7 +26634,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Event emitted when the element is clicked and the modal should be closed.</p>\n",
-                    "line": 26,
+                    "line": 29,
                     "rawdescription": "\n\nEvent emitted when the element is clicked and the modal should be closed.\n",
                     "required": false
                 }
@@ -26665,75 +26642,21 @@
             "deprecated": false,
             "deprecationMessage": "",
             "hostBindings": [],
-            "hostListeners": [
-                {
-                    "coverageIgnore": false,
-                    "name": "click",
-                    "args": [
-                        {
-                            "name": "evt",
-                            "type": "MouseEvent",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "argsDecorator": [
-                        "$event"
-                    ],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nHandles click events and emits the `modalClose` event.\n",
-                    "description": "<p>Handles click events and emits the <code>modalClose</code> event.</p>\n",
-                    "line": 32
-                }
-            ],
+            "hostListeners": [],
             "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "onClick",
                     "coverageIgnore": false,
-                    "args": [
-                        {
-                            "name": "evt",
-                            "type": "MouseEvent",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
+                    "args": [],
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 32,
+                    "line": 34,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles click events and emits the `modalClose` event.\n",
-                    "description": "<p>Handles click events and emits the <code>modalClose</code> event.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'click', ['$event']"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ],
-                    "jsdoctags": [
-                        {
-                            "name": "evt",
-                            "type": "MouseEvent",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "tagName": {
-                                "text": "param"
-                            }
-                        }
-                    ]
+                    "description": "<p>Handles click events and emits the <code>modalClose</code> event.</p>\n"
                 },
                 {
                     "name": "getCssClasses",
@@ -26777,8 +26700,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 123,
-                    "end": 266,
+                    "pos": 109,
+                    "end": 252,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -26802,12 +26725,12 @@
         },
         {
             "name": "EclModalTriggerDirective",
-            "id": "directive-EclModalTriggerDirective-b0a4ff59fbbfbc09655592c43ba52a946ac63fafb0d36e8a7ed165e2d74d2483963c11d3ca32b7bcc4e5158dd8a5bd8ccc31ddffeeb04f2618c98d575af27f67",
+            "id": "directive-EclModalTriggerDirective-3cabf08e65904957e68565d1a86d095d64ead9ab28a9bd58e305df5a14cc787666a5c0f0306654ae4420671e31aa359fd90ef70f628dbac049fbfe18214770be",
             "file": "packages/ecl/components/ecl-modal/ecl-modal-trigger.directive.ts",
             "type": "directive",
             "description": "<p>Directive used to trigger opening of a target ECL modal on click.</p>\n",
             "rawdescription": "\n\nDirective used to trigger opening of a target ECL modal on click.\n",
-            "sourceCode": "import { Directive, HostListener, input } from '@angular/core';\nimport { EclModalComponent } from './ecl-modal.component';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive used to trigger opening of a target ECL modal on click.\n */\n@Directive({\n    selector: '[eclModalTriggerFor]',\n})\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport class EclModalTriggerDirective<T = any> extends ECLBaseDirective {\n    /**\n     * Reference to the modal component that should be opened on click.\n     */\n    eclModalTriggerFor = input<EclModalComponent<T>>();\n\n    /**\n     * Handles click event and opens the target modal.\n     */\n    @HostListener('click', ['$event'])\n    onClick(evt: MouseEvent): void {\n        this.eclModalTriggerFor()?.openModal();\n    }\n}\n",
+            "sourceCode": "import { Directive, input } from '@angular/core';\nimport { EclModalComponent } from './ecl-modal.component';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive used to trigger opening of a target ECL modal on click.\n */\n@Directive({\n    selector: '[eclModalTriggerFor]',\n    host: {\n        '(click)': 'onClick()',\n    },\n})\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport class EclModalTriggerDirective<T = any> extends ECLBaseDirective {\n    /**\n     * Reference to the modal component that should be opened on click.\n     */\n    eclModalTriggerFor = input<EclModalComponent<T>>();\n\n    /**\n     * Handles click event and opens the target modal.\n     */\n    onClick(): void {\n        this.eclModalTriggerFor()?.openModal();\n    }\n}\n",
             "selector": "[eclModalTriggerFor]",
             "providers": [],
             "hostDirectives": [],
@@ -26822,7 +26745,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Reference to the modal component that should be opened on click.</p>\n",
-                    "line": 16,
+                    "line": 19,
                     "rawdescription": "\n\nReference to the modal component that should be opened on click.\n",
                     "required": false
                 },
@@ -26874,75 +26797,21 @@
             "deprecated": false,
             "deprecationMessage": "",
             "hostBindings": [],
-            "hostListeners": [
-                {
-                    "coverageIgnore": false,
-                    "name": "click",
-                    "args": [
-                        {
-                            "name": "evt",
-                            "type": "MouseEvent",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "argsDecorator": [
-                        "$event"
-                    ],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nHandles click event and opens the target modal.\n",
-                    "description": "<p>Handles click event and opens the target modal.</p>\n",
-                    "line": 22
-                }
-            ],
+            "hostListeners": [],
             "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "onClick",
                     "coverageIgnore": false,
-                    "args": [
-                        {
-                            "name": "evt",
-                            "type": "MouseEvent",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
+                    "args": [],
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 22,
+                    "line": 24,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles click event and opens the target modal.\n",
-                    "description": "<p>Handles click event and opens the target modal.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'click', ['$event']"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ],
-                    "jsdoctags": [
-                        {
-                            "name": "evt",
-                            "type": "MouseEvent",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "tagName": {
-                                "text": "param"
-                            }
-                        }
-                    ]
+                    "description": "<p>Handles click event and opens the target modal.</p>\n"
                 },
                 {
                     "name": "getCssClasses",
@@ -26986,8 +26855,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 174,
-                    "end": 250,
+                    "pos": 160,
+                    "end": 236,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -66003,10 +65872,11 @@
         },
         {
             "name": "EclModalBodyComponent",
-            "id": "component-EclModalBodyComponent-e5858ad044a0b70bce4757e5e90738713ccc0844750213c06a4befce73575f97b9989d078279d8c67c96e691e76618118dd29007eb204a31a51a198fdfc6c636",
+            "id": "component-EclModalBodyComponent-51a6777d8815a01a89ceeb132b9d4ca1cd0163566773d44b6dfcca83101399c6f50a69482a9c742ab70683f13018ea66f1c2c817f3cdc331adb5165a1ad04f82",
             "file": "packages/ecl/components/ecl-modal/ecl-modal-body.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -66076,7 +65946,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Unique ID for the modal body, used for accessibility (<code>aria-describedby</code>).\nThis ID is passed from the parent <code>EclModalComponent</code>.</p>\n",
-                    "line": 20,
+                    "line": 22,
                     "rawdescription": "\n\nUnique ID for the modal body, used for accessibility (`aria-describedby`).\nThis ID is passed from the parent `EclModalComponent`.\n"
                 }
             ],
@@ -66123,34 +65993,21 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies CSS classes for the modal body and scrollable modifier if enabled.\n",
-                    "description": "<p>Applies CSS classes for the modal body and scrollable modifier if enabled.</p>\n",
-                    "line": 26,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "<p>Body component used inside the ECL Modal.</p>\n<p>Optionally allows scrollable content inside the modal body.</p>\n",
             "rawdescription": "\n\nBody component used inside the ECL Modal.\n\nOptionally allows scrollable content inside the modal body.\n",
             "type": "component",
-            "sourceCode": "import { Component, HostBinding, signal } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { NgTemplateOutlet } from '@angular/common';\n\n/**\n * Body component used inside the ECL Modal.\n *\n * Optionally allows scrollable content inside the modal body.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclModalBody]',\n    templateUrl: './ecl-modal-body.component.html',\n})\nexport class EclModalBodyComponent extends ECLBaseDirective {\n    /**\n     * Unique ID for the modal body, used for accessibility (`aria-describedby`).\n     * This ID is passed from the parent `EclModalComponent`.\n     */\n    eclModalBodyId = signal<string>('');\n\n    /**\n     * Applies CSS classes for the modal body and scrollable modifier if enabled.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-modal__body'),\n            'ecl-modal__body--has-scroll',\n        ].join(' ').trim();\n    }\n}\n",
+            "sourceCode": "import { Component, signal } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Body component used inside the ECL Modal.\n *\n * Optionally allows scrollable content inside the modal body.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclModalBody]',\n    templateUrl: './ecl-modal-body.component.html',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclModalBodyComponent extends ECLBaseDirective {\n    /**\n     * Unique ID for the modal body, used for accessibility (`aria-describedby`).\n     * This ID is passed from the parent `EclModalComponent`.\n     */\n    eclModalBodyId = signal<string>('');\n\n    /**\n     * Applies CSS classes for the modal body and scrollable modifier if enabled.\n     */\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-modal__body'),\n            'ecl-modal__body--has-scroll',\n        ].join(' ').trim();\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 167,
-                    "end": 285,
+                    "pos": 102,
+                    "end": 220,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -66169,7 +66026,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 26,
+                        "line": 27,
                         "rawdescription": "\n\nApplies CSS classes for the modal body and scrollable modifier if enabled.\n",
                         "description": "<p>Applies CSS classes for the modal body and scrollable modifier if enabled.</p>\n"
                     }
@@ -66188,10 +66045,11 @@
         },
         {
             "name": "EclModalComponent",
-            "id": "component-EclModalComponent-81a7aca45ff5d9d62d53c7475ec8e80b765721cedc18a4a78d3f16e212bc6436fc18cb7c654afeb84e15531fba20a81a5ead218c8f55969f04556f84aa08883f",
+            "id": "component-EclModalComponent-1cf92a1dab40108fd3f9998ebb4665501233c834f3b5c448baa91d4789f231a54150d0c01e74aa4ad1fd2d1def62eec79cd7b91f1f74dd26f9786b292f588177",
             "file": "packages/ecl/components/ecl-modal/ecl-modal.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -66215,7 +66073,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Defines the size of the modal.\nPossible values: &#39;s&#39;, &#39;m&#39;, &#39;l&#39; (default), &#39;full&#39;.</p>\n",
-                    "line": 47,
+                    "line": 50,
                     "rawdescription": "\n\nDefines the size of the modal.\nPossible values: 's', 'm', 'l' (default), 'full'.\n",
                     "required": false
                 },
@@ -66228,7 +66086,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Defines the visual variant of the modal.\nPossible values: &#39;information&#39;, &#39;success&#39;, &#39;warning&#39;, &#39;error&#39;, or a custom string.</p>\n",
-                    "line": 41,
+                    "line": 44,
                     "rawdescription": "\n\nDefines the visual variant of the modal.\nPossible values: 'information', 'success', 'warning', 'error', or a custom string.\n",
                     "required": false
                 },
@@ -66286,7 +66144,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Emits when the modal is closed.\nCarries an instance of <code>EclModalCloseEvent</code>.</p>\n",
-                    "line": 64,
+                    "line": 67,
                     "rawdescription": "\n\nEmits when the modal is closed.\nCarries an instance of `EclModalCloseEvent`.\n",
                     "required": false
                 },
@@ -66299,7 +66157,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Emits when the modal is opened.\nCarries an instance of <code>EclModalOpenEvent</code>.</p>\n",
-                    "line": 70,
+                    "line": 73,
                     "rawdescription": "\n\nEmits when the modal is opened.\nCarries an instance of `EclModalOpenEvent`.\n",
                     "required": false
                 }
@@ -66315,7 +66173,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Body component projected into the modal.</p>\n",
-                    "line": 85,
+                    "line": 88,
                     "rawdescription": "\n\nBody component projected into the modal.\n"
                 },
                 {
@@ -66328,7 +66186,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Unique ID for the modal body.\nUsed for accessibility (<code>aria-describedby</code> on the modal container).</p>\n",
-                    "line": 53,
+                    "line": 56,
                     "rawdescription": "\n\nUnique ID for the modal body.\nUsed for accessibility (`aria-describedby` on the modal container).\n"
                 },
                 {
@@ -66341,7 +66199,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>All close directives projected inside the modal.</p>\n",
-                    "line": 80,
+                    "line": 83,
                     "rawdescription": "\n\nAll close directives projected inside the modal.\n"
                 },
                 {
@@ -66354,7 +66212,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Header component projected into the modal.</p>\n",
-                    "line": 75,
+                    "line": 78,
                     "rawdescription": "\n\nHeader component projected into the modal.\n"
                 },
                 {
@@ -66367,7 +66225,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Controls whether the modal is open.</p>\n",
-                    "line": 58,
+                    "line": 61,
                     "rawdescription": "\n\nControls whether the modal is open.\n"
                 }
             ],
@@ -66388,7 +66246,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 187,
+                    "line": 193,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCloses the modal and emits a `modalClose` event with optional result data.\nIf the event is not prevented, the modal will be hidden.\n",
@@ -66414,11 +66272,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 141,
+                    "line": 99,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nSubscribes to close events from header and close directives after content is initialized.\n",
-                    "description": "<p>Subscribes to close events from header and close directives after content is initialized.</p>\n"
+                    "rawdescription": "\n\nWires the projected header and close directives, and passes the body id to\nthe projected body, once content is initialized. The projected content is\nstatic for the modal's lifetime, so a one-time setup is sufficient.\n",
+                    "description": "<p>Wires the projected header and close directives, and passes the body id to\nthe projected body, once content is initialized. The projected content is\nstatic for the modal&#39;s lifetime, so a one-time setup is sufficient.</p>\n"
                 },
                 {
                     "name": "onEscapeKeydownHandler",
@@ -66427,20 +66285,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 134,
+                    "line": 154,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles ESC key press to close the modal with `cancel` role.\n",
-                    "description": "<p>Handles ESC key press to close the modal with <code>cancel</code> role.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'document:keydown.escape'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "description": "<p>Handles ESC key press to close the modal with <code>cancel</code> role.</p>\n"
                 },
                 {
                     "name": "openModal",
@@ -66449,7 +66298,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 165,
+                    "line": 162,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOpens the modal and emits a `modalOpen` event.\nIf the event is not prevented, the modal will be displayed.\n",
@@ -66497,57 +66346,8 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.aria-describedby",
-                    "actualName": "hostAriaDescribedBy",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nBinds the `aria-describedby` attribute to the modal element.\nConnects the dialog with the modal body via its unique ID for accessibility.\n",
-                    "description": "<p>Binds the <code>aria-describedby</code> attribute to the modal element.\nConnects the dialog with the modal body via its unique ID for accessibility.</p>\n",
-                    "line": 115,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.open",
-                    "actualName": "isModalOpened",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nBinds the `open` attribute to the modal element.\nUsed by the native `<dialog>` element.\n",
-                    "description": "<p>Binds the <code>open</code> attribute to the modal element.\nUsed by the native <code>&lt;dialog&gt;</code> element.</p>\n",
-                    "line": 106,
-                    "type": "boolean | null",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies base and variant CSS classes to the modal element.\n",
-                    "description": "<p>Applies base and variant CSS classes to the modal element.</p>\n",
-                    "line": 123,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "hostListeners": [
-                {
-                    "coverageIgnore": false,
-                    "name": "document:keydown.escape",
-                    "args": [],
-                    "argsDecorator": [],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nHandles ESC key press to close the modal with `cancel` role.\n",
-                    "description": "<p>Handles ESC key press to close the modal with <code>cancel</code> role.</p>\n",
-                    "line": 134
-                }
-            ],
+            "hostBindings": [],
+            "hostListeners": [],
             "standalone": false,
             "imports": [
                 {
@@ -66558,19 +66358,10 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n    AfterContentInit,\n    Component,\n    contentChild,\n    contentChildren,\n    forwardRef,\n    HostBinding,\n    HostListener,\n    input,\n    output,\n    signal,\n    effect,\n    inject,\n    DOCUMENT,\n    PLATFORM_ID,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclModalCloseDirective } from './ecl-modal-close.directive';\nimport { EclModalHeaderComponent } from './ecl-modal-header.component';\nimport { EclModalResult } from './models/ecl-modal-result.model';\nimport { EclModalCloseEvent } from './events';\nimport { EclModalOpenEvent } from './events';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { uniqueId } from '@eui/core';\nimport { EclModalBodyComponent } from './ecl-modal-body.component';\nimport { isPlatformBrowser } from '@angular/common';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'dialog[eclModal]',\n    templateUrl: './ecl-modal.component.html',\n    imports: [A11yModule],\n})\n \nexport class EclModalComponent<T = any> extends ECLBaseDirective implements AfterContentInit {\n    /**\n     * Defines the visual variant of the modal.\n     * Possible values: 'information', 'success', 'warning', 'error', or a custom string.\n     */\n    variant = input<'information' | 'success' | 'warning' | 'error' | string>();\n    \n    /**\n     * Defines the size of the modal.\n     * Possible values: 's', 'm', 'l' (default), 'full'.\n     */\n    size = input<'s' | 'm' | 'l' | 'full' | string>('l');\n    \n    /**\n     * Unique ID for the modal body.\n     * Used for accessibility (`aria-describedby` on the modal container).\n     */\n    eclModalBodyId = `ecl-modal-body-${uniqueId()}`;\n    \n    /**\n     * Controls whether the modal is open.\n     */\n    isOpen = signal(false);\n    \n    /**\n     * Emits when the modal is closed.\n     * Carries an instance of `EclModalCloseEvent`.\n     */\n    modalClose = output<EclModalCloseEvent<T>>();\n    \n    /**\n     * Emits when the modal is opened.\n     * Carries an instance of `EclModalOpenEvent`.\n     */\n    modalOpen = output<EclModalOpenEvent>();\n    \n    /**\n     * Header component projected into the modal.\n     */\n    eclModalHeader = contentChild(forwardRef(() => EclModalHeaderComponent));\n    \n    /**\n     * All close directives projected inside the modal.\n     */\n    eclModalCloseComponents = contentChildren(forwardRef(() => EclModalCloseDirective), { descendants: true });\n    \n    /**\n     * Body component projected into the modal.\n     */\n    eclModalBody = contentChild(EclModalBodyComponent);\n\n    private previousOverflow = null;\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly platformId = inject(PLATFORM_ID);\n\n    constructor() {\n        super();\n        effect(() => {\n            const header = this.eclModalHeader();\n            if (header) {\n                header.variant.set(this.variant());\n            }\n        });\n    }\n\n    /**\n     * Binds the `open` attribute to the modal element.\n     * Used by the native `<dialog>` element.\n     */\n    @HostBinding('attr.open')\n    get isModalOpened(): boolean | null {\n        return this.isOpen() || null;\n    }\n\n    /**\n     * Binds the `aria-describedby` attribute to the modal element.\n     * Connects the dialog with the modal body via its unique ID for accessibility.\n     */\n    @HostBinding('attr.aria-describedby')\n    get hostAriaDescribedBy(): string {\n        return this.eclModalBodyId;\n    }\n\n    /**\n     * Applies base and variant CSS classes to the modal element.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-modal'),\n            this.variant() ? `ecl-modal--${this.variant()}` : '',\n            `ecl-modal--${this.size()}`,\n        ].join(' ').trim();\n    }\n\n    /**\n     * Handles ESC key press to close the modal with `cancel` role.\n     */\n    @HostListener('document:keydown.escape')\n    onEscapeKeydownHandler(): void {\n        this.closeModal({ eclModalRole: 'cancel' });\n    }\n\n    /**\n     * Subscribes to close events from header and close directives after content is initialized.\n     */\n    ngAfterContentInit(): void {\n        const header = this.eclModalHeader();\n        if (header) {\n            header.variant.set(this.variant());\n            header.modalClose.subscribe(() => {\n                this.closeModal({ eclModalRole: 'cancel' });\n            });\n        }\n\n        this.eclModalCloseComponents()?.forEach((eclModalCloseCmp) => {\n            eclModalCloseCmp.modalClose.subscribe(() => {\n                this.closeModal({\n                    eclModalData: eclModalCloseCmp.eclModalResult(),\n                    eclModalRole: eclModalCloseCmp.eclModalRole(),\n                });\n            });\n        });\n        this.eclModalBody().eclModalBodyId.set(this.eclModalBodyId);\n    }\n\n    /**\n     * Opens the modal and emits a `modalOpen` event.\n     * If the event is not prevented, the modal will be displayed.\n     */\n    openModal(): void {\n        const event = new EclModalOpenEvent();\n        this.modalOpen.emit(event);\n\n        if (!event.defaultPrevented) {\n            this.isOpen.set(true);\n        }\n        const header = this.eclModalHeader();\n        if (header) {\n            setTimeout(() => header.closeButton().el.nativeElement.focus(), 100);\n        }\n        // To prevent scrolling in main document\n        if (isPlatformBrowser(this.platformId)) {\n            this.previousOverflow = document.body.style.overflow;\n            document.body.style.overflow = 'hidden';\n        }\n    }\n\n    /**\n     * Closes the modal and emits a `modalClose` event with optional result data.\n     * If the event is not prevented, the modal will be hidden.\n     */\n    closeModal(result?: EclModalResult<T>): void {\n        if (this.isOpen()) {\n            const event = new EclModalCloseEvent({\n                eclModalData: result?.eclModalData,\n                eclModalRole: result?.eclModalRole,\n            });\n            this.modalClose.emit(event);\n\n            if (!event.defaultPrevented) {\n                this.isOpen.set(false);\n            }\n\n            if (isPlatformBrowser(this.platformId)) {\n                document.body.style.overflow = this.previousOverflow;\n            }\n        }\n    }\n}\n",
+            "sourceCode": "import {\n    AfterContentInit,\n    Component,\n    contentChild,\n    contentChildren,\n    forwardRef,\n    input,\n    output,\n    signal,\n    inject,\n    DOCUMENT,\n    PLATFORM_ID,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclModalCloseDirective } from './ecl-modal-close.directive';\nimport { EclModalHeaderComponent } from './ecl-modal-header.component';\nimport { EclModalResult } from './models/ecl-modal-result.model';\nimport { EclModalCloseEvent } from './events';\nimport { EclModalOpenEvent } from './events';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { uniqueId } from '@eui/core';\nimport { EclModalBodyComponent } from './ecl-modal-body.component';\nimport { isPlatformBrowser } from '@angular/common';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'dialog[eclModal]',\n    templateUrl: './ecl-modal.component.html',\n    imports: [A11yModule],\n    host: {\n        '[attr.open]': 'isModalOpened',\n        '[attr.aria-describedby]': 'hostAriaDescribedBy',\n        '[class]': 'cssClasses',\n        '(document:keydown.escape)': 'onEscapeKeydownHandler()',\n    },\n})\n \nexport class EclModalComponent<T = any> extends ECLBaseDirective implements AfterContentInit {\n    /**\n     * Defines the visual variant of the modal.\n     * Possible values: 'information', 'success', 'warning', 'error', or a custom string.\n     */\n    variant = input<'information' | 'success' | 'warning' | 'error' | string>();\n    \n    /**\n     * Defines the size of the modal.\n     * Possible values: 's', 'm', 'l' (default), 'full'.\n     */\n    size = input<'s' | 'm' | 'l' | 'full' | string>('l');\n    \n    /**\n     * Unique ID for the modal body.\n     * Used for accessibility (`aria-describedby` on the modal container).\n     */\n    eclModalBodyId = `ecl-modal-body-${uniqueId()}`;\n    \n    /**\n     * Controls whether the modal is open.\n     */\n    isOpen = signal(false);\n    \n    /**\n     * Emits when the modal is closed.\n     * Carries an instance of `EclModalCloseEvent`.\n     */\n    modalClose = output<EclModalCloseEvent<T>>();\n    \n    /**\n     * Emits when the modal is opened.\n     * Carries an instance of `EclModalOpenEvent`.\n     */\n    modalOpen = output<EclModalOpenEvent>();\n    \n    /**\n     * Header component projected into the modal.\n     */\n    eclModalHeader = contentChild(forwardRef(() => EclModalHeaderComponent));\n    \n    /**\n     * All close directives projected inside the modal.\n     */\n    eclModalCloseComponents = contentChildren(forwardRef(() => EclModalCloseDirective), { descendants: true });\n    \n    /**\n     * Body component projected into the modal.\n     */\n    eclModalBody = contentChild(EclModalBodyComponent);\n\n    private previousOverflow = '';\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly platformId = inject(PLATFORM_ID);\n\n    /**\n     * Wires the projected header and close directives, and passes the body id to\n     * the projected body, once content is initialized. The projected content is\n     * static for the modal's lifetime, so a one-time setup is sufficient.\n     */\n    ngAfterContentInit(): void {\n        // The header derives its own `variant` reactively from this modal, so no\n        // manual sync is needed here. We only wire the close event.\n        const header = this.eclModalHeader();\n        if (header) {\n            header.modalClose.subscribe(() => {\n                this.closeModal({ eclModalRole: 'cancel' });\n            });\n        }\n\n        // Wire every projected close directive to close the modal with its\n        // configured role and result. `modalClose` is an `output()`, so its\n        // subscription is cleaned up automatically when this component is destroyed.\n        this.eclModalCloseComponents().forEach((closeCmp) => {\n            closeCmp.modalClose.subscribe(() => {\n                this.closeModal({\n                    eclModalData: closeCmp.eclModalResult(),\n                    eclModalRole: closeCmp.eclModalRole(),\n                });\n            });\n        });\n\n        // Pass the modal body id to the projected body for aria-describedby wiring.\n        this.eclModalBody()?.eclModalBodyId.set(this.eclModalBodyId);\n    }\n\n    /**\n     * Binds the `open` attribute to the modal element.\n     * Used by the native `<dialog>` element.\n     */\n    get isModalOpened(): boolean | null {\n        return this.isOpen() || null;\n    }\n\n    /**\n     * Binds the `aria-describedby` attribute to the modal element.\n     * Connects the dialog with the modal body via its unique ID for accessibility.\n     */\n    get hostAriaDescribedBy(): string {\n        return this.eclModalBodyId;\n    }\n\n    /**\n     * Applies base and variant CSS classes to the modal element.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-modal'),\n            this.variant() ? `ecl-modal--${this.variant()}` : '',\n            `ecl-modal--${this.size()}`,\n        ].join(' ').trim();\n    }\n\n    /**\n     * Handles ESC key press to close the modal with `cancel` role.\n     */\n    onEscapeKeydownHandler(): void {\n        this.closeModal({ eclModalRole: 'cancel' });\n    }\n\n    /**\n     * Opens the modal and emits a `modalOpen` event.\n     * If the event is not prevented, the modal will be displayed.\n     */\n    openModal(): void {\n        // Ignore repeated open calls so the saved overflow value is not overwritten\n        // with the already-hidden value while the modal is open.\n        if (this.isOpen()) {\n            return;\n        }\n\n        const event = new EclModalOpenEvent();\n        this.modalOpen.emit(event);\n\n        if (event.defaultPrevented) {\n            return;\n        }\n\n        this.isOpen.set(true);\n\n        const header = this.eclModalHeader();\n        if (header) {\n            setTimeout(() => header.closeButton().el.nativeElement.focus(), 100);\n        }\n        // To prevent scrolling in main document\n        if (isPlatformBrowser(this.platformId)) {\n            this.previousOverflow = this.document.body.style.overflow;\n            this.document.body.style.overflow = 'hidden';\n        }\n    }\n\n    /**\n     * Closes the modal and emits a `modalClose` event with optional result data.\n     * If the event is not prevented, the modal will be hidden.\n     */\n    closeModal(result?: EclModalResult<T>): void {\n        if (this.isOpen()) {\n            const event = new EclModalCloseEvent({\n                eclModalData: result?.eclModalData,\n                eclModalRole: result?.eclModalRole,\n            });\n            this.modalClose.emit(event);\n\n            if (!event.defaultPrevented) {\n                this.isOpen.set(false);\n            }\n\n            if (isPlatformBrowser(this.platformId)) {\n                this.document.body.style.overflow = this.previousOverflow;\n            }\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
-            "constructorObj": {
-                "name": "constructor",
-                "description": "",
-                "deprecated": false,
-                "deprecationMessage": "",
-                "args": [],
-                "line": 89,
-                "rawdescription": "\n"
-            },
             "extends": [
                 "ECLBaseDirective"
             ],
@@ -66584,7 +66375,7 @@
                         "name": "isModalOpened",
                         "type": "unknown",
                         "returnType": "boolean | null",
-                        "line": 106,
+                        "line": 129,
                         "rawdescription": "\n\nBinds the `open` attribute to the modal element.\nUsed by the native `<dialog>` element.\n",
                         "description": "<p>Binds the <code>open</code> attribute to the modal element.\nUsed by the native <code>&lt;dialog&gt;</code> element.</p>\n"
                     }
@@ -66595,7 +66386,7 @@
                         "name": "hostAriaDescribedBy",
                         "type": "string",
                         "returnType": "string",
-                        "line": 115,
+                        "line": 137,
                         "rawdescription": "\n\nBinds the `aria-describedby` attribute to the modal element.\nConnects the dialog with the modal body via its unique ID for accessibility.\n",
                         "description": "<p>Binds the <code>aria-describedby</code> attribute to the modal element.\nConnects the dialog with the modal body via its unique ID for accessibility.</p>\n"
                     }
@@ -66606,7 +66397,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 123,
+                        "line": 144,
                         "rawdescription": "\n\nApplies base and variant CSS classes to the modal element.\n",
                         "description": "<p>Applies base and variant CSS classes to the modal element.</p>\n"
                     }
@@ -66633,10 +66424,11 @@
         },
         {
             "name": "EclModalFooterComponent",
-            "id": "component-EclModalFooterComponent-0846cb5091ede4a11344f5796db71e4e7fc5fddcbddb0217ac00cdb0cc33f47886e7b574954ce1e09a62460ed0bd027d25358fd01e22c05def92d8a8839b591e",
+            "id": "component-EclModalFooterComponent-778180b0f635bf979a25184664e1d989290f51ac23553b6f8c9c3a8c78bd8ccd16265a7b3c08580b4ee12ea90a98cc51d2d1ff3b7f3fcc95d2a3937fba14facd",
             "file": "packages/ecl/components/ecl-modal/ecl-modal-footer.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -66706,7 +66498,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Queries all button components projected into the footer.</p>\n",
-                    "line": 19,
+                    "line": 22,
                     "rawdescription": "\n\nQueries all button components projected into the footer.\n"
                 }
             ],
@@ -66718,7 +66510,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 33,
+                    "line": 35,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nLifecycle hook that runs after content projection.\nApplies `ecl-modal__button` class to each projected button component.\n",
@@ -66766,34 +66558,21 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies the ECL CSS class for modal footer container.\n",
-                    "description": "<p>Applies the ECL CSS class for modal footer container.</p>\n",
-                    "line": 25,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "<p>Footer component used within the ECL Modal.</p>\n<p>Automatically applies styling to buttons projected into the footer.</p>\n",
             "rawdescription": "\n\nFooter component used within the ECL Modal.\n\nAutomatically applies styling to buttons projected into the footer.\n",
             "type": "component",
-            "sourceCode": "import { AfterContentInit, Component, contentChildren, forwardRef, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclButtonComponent } from '@eui/ecl/components/ecl-button';\n\n/**\n * Footer component used within the ECL Modal.\n *\n * Automatically applies styling to buttons projected into the footer.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclModalFooter]',\n    templateUrl: './ecl-modal-footer.component.html',\n})\nexport class EclModalFooterComponent extends ECLBaseDirective implements AfterContentInit {\n    /**\n     * Queries all button components projected into the footer.\n     */\n    buttonComponents = contentChildren(forwardRef(() => EclButtonComponent), { descendants: true });\n\n    /**\n     * Applies the ECL CSS class for modal footer container.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-modal__footer')].join(' ').trim();\n    }\n\n    /**\n     * Lifecycle hook that runs after content projection.\n     * Applies `ecl-modal__button` class to each projected button component.\n     */\n    ngAfterContentInit(): void {\n        const buttons = this.buttonComponents();\n        if (buttons) {\n            setTimeout(() => {\n                buttons.forEach((btn) => {\n                    btn.class = 'ecl-modal__button';\n                });\n            });\n        }\n    }\n}\n",
+            "sourceCode": "import { AfterContentInit, Component, contentChildren, forwardRef } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclButtonComponent } from '@eui/ecl/components/ecl-button';\n\n/**\n * Footer component used within the ECL Modal.\n *\n * Automatically applies styling to buttons projected into the footer.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclModalFooter]',\n    templateUrl: './ecl-modal-footer.component.html',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclModalFooterComponent extends ECLBaseDirective implements AfterContentInit {\n    /**\n     * Queries all button components projected into the footer.\n     */\n    buttonComponents = contentChildren(forwardRef(() => EclButtonComponent), { descendants: true });\n\n    /**\n     * Applies the ECL CSS class for modal footer container.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-modal__footer')].join(' ').trim();\n    }\n\n    /**\n     * Lifecycle hook that runs after content projection.\n     * Applies `ecl-modal__button` class to each projected button component.\n     */\n    ngAfterContentInit(): void {\n        const buttons = this.buttonComponents();\n        if (buttons) {\n            setTimeout(() => {\n                buttons.forEach((btn) => {\n                    btn.class = 'ecl-modal__button';\n                });\n            });\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 223,
-                    "end": 351,
+                    "pos": 210,
+                    "end": 338,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -66815,7 +66594,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 25,
+                        "line": 27,
                         "rawdescription": "\n\nApplies the ECL CSS class for modal footer container.\n",
                         "description": "<p>Applies the ECL CSS class for modal footer container.</p>\n"
                     }
@@ -66838,10 +66617,11 @@
         },
         {
             "name": "EclModalHeaderComponent",
-            "id": "component-EclModalHeaderComponent-9cfd1f5f67efa4b306b99ece653974ed4f92933ad1b03667dc431850ae8fa172be022a2de1305702240461cc86ceb23f78cc6a46741f92cfbb3aa53535db2589",
+            "id": "component-EclModalHeaderComponent-6d03b2a86fe5e8353c5a09a0395b1f922e73d023edb7f1ad63b3631ba463fcd16d0680902bed575e92f9378a94c142e7cf987abcc11f2837847cc9ab5bc5f5cb",
             "file": "packages/ecl/components/ecl-modal/ecl-modal-header.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -66909,7 +66689,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Event emitted when the close button is clicked.\nEmits an <code>EclModalCloseEvent</code> object.</p>\n",
-                    "line": 41,
+                    "line": 55,
                     "rawdescription": "\n\nEvent emitted when the close button is clicked.\nEmits an `EclModalCloseEvent` object.\n",
                     "required": false
                 }
@@ -66925,34 +66705,21 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Reference to the close button component.</p>\n",
-                    "line": 46,
+                    "line": 60,
                     "rawdescription": "\n\nReference to the close button component.\n"
                 },
-                {
-                    "name": "eclThemeService",
-                    "coverageIgnore": false,
-                    "defaultValue": "inject(EclThemeService)",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 28,
-                    "rawdescription": "\n"
-                },
                 {
                     "name": "variant",
                     "coverageIgnore": false,
-                    "defaultValue": "signal<'information' | 'success' | 'warning' | 'error' | string>(undefined)",
+                    "defaultValue": "computed<'information' | 'success' | 'warning' | 'error' | string | undefined>(\n        () => this.modal.variant(),\n    )",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>Defines the visual variant of the modal.\nDetermines which icon is shown in the header.\nPossible values: &#39;information&#39;, &#39;success&#39;, &#39;warning&#39;, &#39;error&#39;, or any custom string.</p>\n",
-                    "line": 35,
-                    "rawdescription": "\n\nDefines the visual variant of the modal.\nDetermines which icon is shown in the header.\nPossible values: 'information', 'success', 'warning', 'error', or any custom string.\n"
+                    "description": "<p>Defines the visual variant of the modal.\nDetermines which icon is shown in the header.\nDerived reactively from the parent modal&#39;s <code>variant</code> input, so the header\nicon updates automatically when the parent variant changes at runtime.\nPossible values: &#39;information&#39;, &#39;success&#39;, &#39;warning&#39;, &#39;error&#39;, or any custom string.</p>\n",
+                    "line": 47,
+                    "rawdescription": "\n\nDefines the visual variant of the modal.\nDetermines which icon is shown in the header.\nDerived reactively from the parent modal's `variant` input, so the header\nicon updates automatically when the parent variant changes at runtime.\nPossible values: 'information', 'success', 'warning', 'error', or any custom string.\n"
                 }
             ],
             "methodsClass": [
@@ -66963,7 +66730,7 @@
                     "optional": false,
                     "returnType": "\"information\" | \"check-filled\" | \"warning\" | \"error\" | null",
                     "typeParameters": [],
-                    "line": 68,
+                    "line": 81,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns the name of the icon associated with the current variant.\n",
@@ -66971,8 +66738,8 @@
                     "jsdoctags": [
                         {
                             "tagName": {
-                                "pos": 2255,
-                                "end": 2262,
+                                "pos": 2877,
+                                "end": 2884,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -66990,7 +66757,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 60,
+                    "line": 73,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles the click event on the close button.\nEmits a `modalClose` event with no payload.\n",
@@ -67038,20 +66805,7 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies the ECL CSS class for modal header container.\n",
-                    "description": "<p>Applies the ECL CSS class for modal header container.</p>\n",
-                    "line": 52,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [
@@ -67069,14 +66823,14 @@
             "description": "<p>Header component used within the ECL Modal.</p>\n<p>Displays an icon depending on the modal variant, user-defined content,\nand a close button that emits a close event.</p>\n",
             "rawdescription": "\n\nHeader component used within the ECL Modal.\n\nDisplays an icon depending on the modal variant, user-defined content,\nand a close button that emits a close event.\n",
             "type": "component",
-            "sourceCode": "import { Component, HostBinding, output, viewChild, inject, signal } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclThemeService } from '@eui/ecl/core';\nimport { EclModalCloseEvent } from './events';\nimport { EclButtonComponent } from '@eui/ecl/components/ecl-button';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/**\n * Header component used within the ECL Modal.\n *\n * Displays an icon depending on the modal variant, user-defined content,\n * and a close button that emits a close event.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclModalHeader]',\n    templateUrl: './ecl-modal-header.component.html',\n    imports: [\n        ...EUI_ECL_ICON,\n        TranslatePipe,\n        ...EUI_ECL_BUTTON,\n    ],\n})\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport class EclModalHeaderComponent<T = any> extends ECLBaseDirective {\n    eclThemeService = inject(EclThemeService);\n    \n    /**\n     * Defines the visual variant of the modal.\n     * Determines which icon is shown in the header.\n     * Possible values: 'information', 'success', 'warning', 'error', or any custom string.\n     */\n    variant = signal<'information' | 'success' | 'warning' | 'error' | string>(undefined);\n    \n    /**\n     * Event emitted when the close button is clicked.\n     * Emits an `EclModalCloseEvent` object.\n     */\n    modalClose = output<EclModalCloseEvent<T>>();\n    \n    /**\n     * Reference to the close button component.\n     */\n    closeButton = viewChild.required<EclButtonComponent>('closeButton');\n    \n    /**\n     * Applies the ECL CSS class for modal header container.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-modal__header')].join(' ').trim();\n    }\n\n    /**\n     * Handles the click event on the close button.\n     * Emits a `modalClose` event with no payload.\n     */\n    onCloseClick(): void {\n        this.modalClose.emit(new EclModalCloseEvent());\n    }\n\n    /**\n     * Returns the name of the icon associated with the current variant.\n     * @returns The icon name, or `null` if no matching variant exists.\n     */\n    getIcon(): 'information' | 'check-filled' | 'warning' | 'error' | null {\n        const v = this.variant();\n        if (v === 'information') {\n            return 'information';\n        } else if (v === 'success') {\n            return 'check-filled';\n        } else if (v === 'warning') {\n            return 'warning';\n        } else if (v === 'error') {\n            return 'error';\n        } else {\n            return null;\n        }\n    }\n}\n",
+            "sourceCode": "import { Component, output, viewChild, computed, inject, forwardRef } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclModalCloseEvent } from './events';\nimport { EclButtonComponent } from '@eui/ecl/components/ecl-button';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclModalComponent } from './ecl-modal.component';\n\n/**\n * Header component used within the ECL Modal.\n *\n * Displays an icon depending on the modal variant, user-defined content,\n * and a close button that emits a close event.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclModalHeader]',\n    templateUrl: './ecl-modal-header.component.html',\n    imports: [\n        ...EUI_ECL_ICON,\n        TranslatePipe,\n        ...EUI_ECL_BUTTON,\n    ],\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport class EclModalHeaderComponent<T = any> extends ECLBaseDirective {\n    /**\n     * Reference to the parent modal the header is projected into.\n     * Injected with `forwardRef` to avoid a circular module-import issue.\n     * A header is only valid inside an `EclModalComponent`, so this is a\n     * required injection: using the header outside a modal throws at\n     * construction, surfacing the misuse immediately.\n     */\n    private readonly modal = inject(forwardRef(() => EclModalComponent));\n\n    /**\n     * Defines the visual variant of the modal.\n     * Determines which icon is shown in the header.\n     * Derived reactively from the parent modal's `variant` input, so the header\n     * icon updates automatically when the parent variant changes at runtime.\n     * Possible values: 'information', 'success', 'warning', 'error', or any custom string.\n     */\n    variant = computed<'information' | 'success' | 'warning' | 'error' | string | undefined>(\n        () => this.modal.variant(),\n    );\n    \n    /**\n     * Event emitted when the close button is clicked.\n     * Emits an `EclModalCloseEvent` object.\n     */\n    modalClose = output<EclModalCloseEvent<T>>();\n    \n    /**\n     * Reference to the close button component.\n     */\n    closeButton = viewChild.required<EclButtonComponent>('closeButton');\n    \n    /**\n     * Applies the ECL CSS class for modal header container.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-modal__header')].join(' ').trim();\n    }\n\n    /**\n     * Handles the click event on the close button.\n     * Emits a `modalClose` event with no payload.\n     */\n    onCloseClick(): void {\n        this.modalClose.emit(new EclModalCloseEvent());\n    }\n\n    /**\n     * Returns the name of the icon associated with the current variant.\n     * @returns The icon name, or `null` if no matching variant exists.\n     */\n    getIcon(): 'information' | 'check-filled' | 'warning' | 'error' | null {\n        const v = this.variant();\n        if (v === 'information') {\n            return 'information';\n        } else if (v === 'success') {\n            return 'check-filled';\n        } else if (v === 'warning') {\n            return 'warning';\n        } else if (v === 'error') {\n            return 'error';\n        } else {\n            return null;\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 486,
-                    "end": 665,
+                    "pos": 497,
+                    "end": 676,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -67095,7 +66849,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 52,
+                        "line": 65,
                         "rawdescription": "\n\nApplies the ECL CSS class for modal header container.\n",
                         "description": "<p>Applies the ECL CSS class for modal header container.</p>\n"
                     }