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

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-09-23T02:10:36.663Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-09-23T15:12:15.510Z, llm-md export.
 
 ## Modules
 
@@ -1690,8 +1690,7 @@ Outputs:
 
 Properties:
 - `closeButton: unknown = viewChild.required<EclButtonComponent>('closeButton')` — Reference to the close button component.
-- `eclThemeService: unknown = inject(EclThemeService)`
-- `variant: unknown = signal<'information' | 'success' | 'warning' | 'error' | string>(undefined)` — Defines the visual variant of the modal. Determines which icon is shown in the header. Possible values: 'information', 'success', 'warning', 'error', or any custom string.
+- `variant: unknown = computed<'information' | 'success' | 'warning' | 'error' | string | undefined>( () => this.modal.variant(), )` — Defines the visual variant of the modal. Determines which icon is shown in the header. Derived reactively from the parent modal's variant input, so the header icon updates automatically when the parent variant changes at runtime. Possible values: 'information', 'success', 'warning', 'error', or any custom string.
 
 Methods:
 - `getIcon(): "information" | "check-filled" | "warning" | "error" | null` — Returns the name of the icon associated with the current variant.
@@ -5104,7 +5103,7 @@ Outputs:
 - `modalClose` — Event emitted when the element is clicked and the modal should be closed.
 
 Methods:
-- `onClick(evt: MouseEvent): void` — Handles click events and emits the modalClose event.
+- `onClick(): void` — Handles click events and emits the modalClose event.
 - `getCssClasses(rootClass: string): string`
 
 ### EclModalTriggerDirective
@@ -5121,7 +5120,7 @@ Inputs:
 - `tabindex: number`
 
 Methods:
-- `onClick(evt: MouseEvent): void` — Handles click event and opens the target modal.
+- `onClick(): void` — Handles click event and opens the target modal.
 - `getCssClasses(rootClass: string): string`
 
 ### EclMultiselectOptionDirective
@@ -7565,10 +7564,10 @@ Properties:
 
 ## Public variables
 
-- `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
-  Defined in `packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts`
 - `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
   Defined in `packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts`
+- `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
+  Defined in `packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts`
 - `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
   Defined in `packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts`
 - `AVAILABLE_NON_EU_LOGO_COUNTRY_CODES: string[] = ['ar', 'ca', 'is', 'jp', 'lb', 'no', 'ru', 'sw', 'tr', 'uk', 'zh'] as const`

package/docs/miscellaneous/variables.html

@@ -138,10 +138,10 @@
                 <td class="col-md-4">
                     <ul class="index-list">
                         <li>
-                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-language.component.ts)</span></a>
+                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-login.component.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-login.component.ts)</span></a>
+                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-language.component.ts)</span></a>
                         </li>
                         <li>
                             <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-search.component.ts)</span></a>
@@ -411,7 +411,7 @@
     </table>
 </section>
 
-    <h3>packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts</h3>
+    <h3>packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts</h3>
     <section data-compodoc="block-properties">
     <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
@@ -445,67 +445,67 @@
 
         </tbody>
     </table>
-</section>
-    <h3>packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts</h3>
-    <section data-compodoc="block-properties">
-    <h3></h3>    <table class="table table-sm table-bordered">
+    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="ARROW_SIZE"></a>
+                    <a name="RESIZE_DEBOUNCE"></a>
                     <span class="name">
-                        <span ><b>ARROW_SIZE</b></span>
-                        <a href="#ARROW_SIZE"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>RESIZE_DEBOUNCE</b></span>
+                        <a href="#RESIZE_DEBOUNCE"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>&#x27;0.5rem&#x27;</code>
+                        <i>Default value : </i><code>200</code>
                     </td>
                 </tr>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-description"><p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>
+                    <div class="io-description"><p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>
 </div>
                 </td>
             </tr>
 
         </tbody>
     </table>
-    <table class="table table-sm table-bordered">
+</section>
+    <h3>packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="RESIZE_DEBOUNCE"></a>
+                    <a name="ARROW_SIZE"></a>
                     <span class="name">
-                        <span ><b>RESIZE_DEBOUNCE</b></span>
-                        <a href="#RESIZE_DEBOUNCE"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>ARROW_SIZE</b></span>
+                        <a href="#ARROW_SIZE"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>200</code>
+                        <i>Default value : </i><code>&#x27;0.5rem&#x27;</code>
                     </td>
                 </tr>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-description"><p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>
+                    <div class="io-description"><p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>
 </div>
                 </td>
             </tr>

package/docs/properties.html

@@ -128,7 +128,7 @@
     </ol>
     <ul class="properties-list">
         <li>
-            <b>Version</b> : 22.0.0-alpha.15</li>
+            <b>Version</b> : 22.0.0-alpha.17</li>
     </ul>
 
 

package/fesm2022/eui-ecl-components-ecl-modal.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, output, HostListener, Directive, inject, signal, viewChild, HostBinding, Component, contentChild, forwardRef, contentChildren, DOCUMENT, PLATFORM_ID, effect } from '@angular/core';
-import { ECLBaseDirective, EclBaseEvent, EclThemeService } from '@eui/ecl/core';
+import { input, output, Directive, inject, forwardRef, computed, viewChild, Component, signal, contentChild, contentChildren, DOCUMENT, PLATFORM_ID } from '@angular/core';
+import { ECLBaseDirective, EclBaseEvent } from '@eui/ecl/core';
 import { TranslatePipe } from '@ngx-translate/core';
 import * as i2 from '@eui/ecl/components/ecl-button';
 import { EUI_ECL_BUTTON, EclButtonComponent } from '@eui/ecl/components/ecl-button';
@@ -36,21 +36,21 @@ class EclModalCloseDirective extends ECLBaseDirective {
     /**
      * Handles click events and emits the `modalClose` event.
      */
-    onClick(evt) {
+    onClick() {
         this.modalClose.emit(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclModalCloseDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EclModalCloseDirective, isStandalone: true, selector: "[eclModalClose]", inputs: { eclModalResult: { classPropertyName: "eclModalResult", publicName: "eclModalClose", isSignal: true, isRequired: false, transformFunction: null }, eclModalRole: { classPropertyName: "eclModalRole", publicName: "eclModalRole", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalClose: "modalClose" }, host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EclModalCloseDirective, isStandalone: true, selector: "[eclModalClose]", inputs: { eclModalResult: { classPropertyName: "eclModalResult", publicName: "eclModalClose", isSignal: true, isRequired: false, transformFunction: null }, eclModalRole: { classPropertyName: "eclModalRole", publicName: "eclModalRole", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalClose: "modalClose" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclModalCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclModalClose]',
+                    host: {
+                        '(click)': 'onClick()',
+                    },
                 }]
-        }], propDecorators: { eclModalResult: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclModalClose", required: false }] }], eclModalRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclModalRole", required: false }] }], modalClose: [{ type: i0.Output, args: ["modalClose"] }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
+        }], propDecorators: { eclModalResult: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclModalClose", required: false }] }], eclModalRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclModalRole", required: false }] }], modalClose: [{ type: i0.Output, args: ["modalClose"] }] } });
 
 class EclModalOpenEvent extends EclBaseEvent {
 }
@@ -73,13 +73,22 @@ class EclModalCloseEvent extends EclBaseEvent {
 class EclModalHeaderComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
-        this.eclThemeService = inject(EclThemeService);
+        /**
+         * Reference to the parent modal the header is projected into.
+         * Injected with `forwardRef` to avoid a circular module-import issue.
+         * A header is only valid inside an `EclModalComponent`, so this is a
+         * required injection: using the header outside a modal throws at
+         * construction, surfacing the misuse immediately.
+         */
+        this.modal = inject(forwardRef(() => EclModalComponent));
         /**
          * Defines the visual variant of the modal.
          * Determines which icon is shown in the header.
+         * Derived reactively from the parent modal's `variant` input, so the header
+         * icon updates automatically when the parent variant changes at runtime.
          * Possible values: 'information', 'success', 'warning', 'error', or any custom string.
          */
-        this.variant = signal(undefined, /* @ts-ignore */
+        this.variant = computed(() => this.modal.variant(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
         /**
          * Event emitted when the close button is clicked.
@@ -128,7 +137,7 @@ class EclModalHeaderComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclModalHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclModalHeaderComponent, isStandalone: true, selector: "[eclModalHeader]", outputs: { modalClose: "modalClose" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-modal__header-content\">\n    @if(getIcon()) {\n    @if(variant() === 'warning') {\n    <span class=\"ecl-modal__icon-background\"></span>\n    }\n    <ecl-icon [icon]=\"getIcon()\" size=\"l\" class=\"ecl-modal__icon\" [title]=\"variant()\"></ecl-icon>\n    }\n    <ng-content></ng-content>\n</div>\n<button #closeButton eclButton variant=\"tertiary\" size=\"m\" eclStyle=\"neutral\" isIconOnly class=\"ecl-modal__close\" type=\"button\"\n    (click)=\"onCloseClick()\">\n    <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n    <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n</button>", dependencies: [{ kind: "component", type: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i2.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclModalHeaderComponent, isStandalone: true, selector: "[eclModalHeader]", outputs: { modalClose: "modalClose" }, host: { properties: { "class": "cssClasses" } }, viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-modal__header-content\">\n    @if(getIcon()) {\n    @if(variant() === 'warning') {\n    <span class=\"ecl-modal__icon-background\"></span>\n    }\n    <ecl-icon [icon]=\"getIcon()\" size=\"l\" class=\"ecl-modal__icon\" [title]=\"variant()\"></ecl-icon>\n    }\n    <ng-content></ng-content>\n</div>\n<button #closeButton eclButton variant=\"tertiary\" size=\"m\" eclStyle=\"neutral\" isIconOnly class=\"ecl-modal__close\" type=\"button\"\n    (click)=\"onCloseClick()\">\n    <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n    <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n</button>", dependencies: [{ kind: "component", type: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i2.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclModalHeaderComponent, decorators: [{
             type: Component,
@@ -136,11 +145,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         ...EUI_ECL_ICON,
                         TranslatePipe,
                         ...EUI_ECL_BUTTON,
-                    ], template: "<div class=\"ecl-modal__header-content\">\n    @if(getIcon()) {\n    @if(variant() === 'warning') {\n    <span class=\"ecl-modal__icon-background\"></span>\n    }\n    <ecl-icon [icon]=\"getIcon()\" size=\"l\" class=\"ecl-modal__icon\" [title]=\"variant()\"></ecl-icon>\n    }\n    <ng-content></ng-content>\n</div>\n<button #closeButton eclButton variant=\"tertiary\" size=\"m\" eclStyle=\"neutral\" isIconOnly class=\"ecl-modal__close\" type=\"button\"\n    (click)=\"onCloseClick()\">\n    <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n    <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n</button>" }]
-        }], propDecorators: { modalClose: [{ type: i0.Output, args: ["modalClose"] }], closeButton: [{ type: i0.ViewChild, args: ['closeButton', { isSignal: true }] }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+                    ], host: {
+                        '[class]': 'cssClasses',
+                    }, template: "<div class=\"ecl-modal__header-content\">\n    @if(getIcon()) {\n    @if(variant() === 'warning') {\n    <span class=\"ecl-modal__icon-background\"></span>\n    }\n    <ecl-icon [icon]=\"getIcon()\" size=\"l\" class=\"ecl-modal__icon\" [title]=\"variant()\"></ecl-icon>\n    }\n    <ng-content></ng-content>\n</div>\n<button #closeButton eclButton variant=\"tertiary\" size=\"m\" eclStyle=\"neutral\" isIconOnly class=\"ecl-modal__close\" type=\"button\"\n    (click)=\"onCloseClick()\">\n    <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n    <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n</button>" }]
+        }], propDecorators: { modalClose: [{ type: i0.Output, args: ["modalClose"] }], closeButton: [{ type: i0.ViewChild, args: ['closeButton', { isSignal: true }] }] } });
 
 /**
  * Body component used inside the ECL Modal.
@@ -167,20 +175,19 @@ class EclModalBodyComponent extends ECLBaseDirective {
         ].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclModalBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclModalBodyComponent, isStandalone: true, selector: "[eclModalBody]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-modal__body-scroll\" [id]=\"eclModalBodyId()\">\n    <ng-content></ng-content>\n</div>\n<div class=\"ecl-modal__body-overflow\" aria-hidden=\"true\"></div>\n<ng-content select=\"[eclModalBodyFixedContent]\"></ng-content>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclModalBodyComponent, isStandalone: true, selector: "[eclModalBody]", host: { properties: { "class": "cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-modal__body-scroll\" [id]=\"eclModalBodyId()\">\n    <ng-content></ng-content>\n</div>\n<div class=\"ecl-modal__body-overflow\" aria-hidden=\"true\"></div>\n<ng-content select=\"[eclModalBodyFixedContent]\"></ng-content>" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclModalBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[eclModalBody]', template: "<div class=\"ecl-modal__body-scroll\" [id]=\"eclModalBodyId()\">\n    <ng-content></ng-content>\n</div>\n<div class=\"ecl-modal__body-overflow\" aria-hidden=\"true\"></div>\n<ng-content select=\"[eclModalBodyFixedContent]\"></ng-content>" }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{ selector: '[eclModalBody]', host: {
+                        '[class]': 'cssClasses',
+                    }, template: "<div class=\"ecl-modal__body-scroll\" [id]=\"eclModalBodyId()\">\n    <ng-content></ng-content>\n</div>\n<div class=\"ecl-modal__body-overflow\" aria-hidden=\"true\"></div>\n<ng-content select=\"[eclModalBodyFixedContent]\"></ng-content>" }]
+        }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class EclModalComponent extends ECLBaseDirective {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * Defines the visual variant of the modal.
          * Possible values: 'information', 'success', 'warning', 'error', or a custom string.
@@ -227,15 +234,37 @@ class EclModalComponent extends ECLBaseDirective {
          */
         this.eclModalBody = contentChild(EclModalBodyComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "eclModalBody" }] : /* istanbul ignore next */ []));
-        this.previousOverflow = null;
+        this.previousOverflow = '';
         this.document = inject(DOCUMENT);
         this.platformId = inject(PLATFORM_ID);
-        effect(() => {
-            const header = this.eclModalHeader();
-            if (header) {
-                header.variant.set(this.variant());
-            }
+    }
+    /**
+     * Wires the projected header and close directives, and passes the body id to
+     * the projected body, once content is initialized. The projected content is
+     * static for the modal's lifetime, so a one-time setup is sufficient.
+     */
+    ngAfterContentInit() {
+        // The header derives its own `variant` reactively from this modal, so no
+        // manual sync is needed here. We only wire the close event.
+        const header = this.eclModalHeader();
+        if (header) {
+            header.modalClose.subscribe(() => {
+                this.closeModal({ eclModalRole: 'cancel' });
+            });
+        }
+        // Wire every projected close directive to close the modal with its
+        // configured role and result. `modalClose` is an `output()`, so its
+        // subscription is cleaned up automatically when this component is destroyed.
+        this.eclModalCloseComponents().forEach((closeCmp) => {
+            closeCmp.modalClose.subscribe(() => {
+                this.closeModal({
+                    eclModalData: closeCmp.eclModalResult(),
+                    eclModalRole: closeCmp.eclModalRole(),
+                });
+            });
         });
+        // Pass the modal body id to the projected body for aria-describedby wiring.
+        this.eclModalBody()?.eclModalBodyId.set(this.eclModalBodyId);
     }
     /**
      * Binds the `open` attribute to the modal element.
@@ -266,45 +295,30 @@ class EclModalComponent extends ECLBaseDirective {
     onEscapeKeydownHandler() {
         this.closeModal({ eclModalRole: 'cancel' });
     }
-    /**
-     * Subscribes to close events from header and close directives after content is initialized.
-     */
-    ngAfterContentInit() {
-        const header = this.eclModalHeader();
-        if (header) {
-            header.variant.set(this.variant());
-            header.modalClose.subscribe(() => {
-                this.closeModal({ eclModalRole: 'cancel' });
-            });
-        }
-        this.eclModalCloseComponents()?.forEach((eclModalCloseCmp) => {
-            eclModalCloseCmp.modalClose.subscribe(() => {
-                this.closeModal({
-                    eclModalData: eclModalCloseCmp.eclModalResult(),
-                    eclModalRole: eclModalCloseCmp.eclModalRole(),
-                });
-            });
-        });
-        this.eclModalBody().eclModalBodyId.set(this.eclModalBodyId);
-    }
     /**
      * Opens the modal and emits a `modalOpen` event.
      * If the event is not prevented, the modal will be displayed.
      */
     openModal() {
+        // Ignore repeated open calls so the saved overflow value is not overwritten
+        // with the already-hidden value while the modal is open.
+        if (this.isOpen()) {
+            return;
+        }
         const event = new EclModalOpenEvent();
         this.modalOpen.emit(event);
-        if (!event.defaultPrevented) {
-            this.isOpen.set(true);
+        if (event.defaultPrevented) {
+            return;
         }
+        this.isOpen.set(true);
         const header = this.eclModalHeader();
         if (header) {
             setTimeout(() => header.closeButton().el.nativeElement.focus(), 100);
         }
         // To prevent scrolling in main document
         if (isPlatformBrowser(this.platformId)) {
-            this.previousOverflow = document.body.style.overflow;
-            document.body.style.overflow = 'hidden';
+            this.previousOverflow = this.document.body.style.overflow;
+            this.document.body.style.overflow = 'hidden';
         }
     }
     /**
@@ -322,29 +336,22 @@ class EclModalComponent extends ECLBaseDirective {
                 this.isOpen.set(false);
             }
             if (isPlatformBrowser(this.platformId)) {
-                document.body.style.overflow = this.previousOverflow;
+                this.document.body.style.overflow = this.previousOverflow;
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclModalComponent, isStandalone: true, selector: "dialog[eclModal]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalClose: "modalClose", modalOpen: "modalOpen" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "attr.open": "this.isModalOpened", "attr.aria-describedby": "this.hostAriaDescribedBy", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclModalHeader", first: true, predicate: i0.forwardRef(() => EclModalHeaderComponent), descendants: true, isSignal: true }, { propertyName: "eclModalCloseComponents", predicate: i0.forwardRef(() => EclModalCloseDirective), descendants: true, isSignal: true }, { propertyName: "eclModalBody", first: true, predicate: EclModalBodyComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-modal__container\">\n    <div class=\"ecl-modal__content ecl-container\" cdkTrapFocus cdkTrapFocusAutoCapture>\n        <ng-content></ng-content>\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclModalComponent, isStandalone: true, selector: "dialog[eclModal]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalClose: "modalClose", modalOpen: "modalOpen" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "attr.open": "isModalOpened", "attr.aria-describedby": "hostAriaDescribedBy", "class": "cssClasses" } }, queries: [{ propertyName: "eclModalHeader", first: true, predicate: i0.forwardRef(() => EclModalHeaderComponent), descendants: true, isSignal: true }, { propertyName: "eclModalCloseComponents", predicate: i0.forwardRef(() => EclModalCloseDirective), descendants: true, isSignal: true }, { propertyName: "eclModalBody", first: true, predicate: EclModalBodyComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-modal__container\">\n    <div class=\"ecl-modal__content ecl-container\" cdkTrapFocus cdkTrapFocusAutoCapture>\n        <ng-content></ng-content>\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dialog[eclModal]', imports: [A11yModule], template: "<div class=\"ecl-modal__container\">\n    <div class=\"ecl-modal__content ecl-container\" cdkTrapFocus cdkTrapFocusAutoCapture>\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], modalClose: [{ type: i0.Output, args: ["modalClose"] }], modalOpen: [{ type: i0.Output, args: ["modalOpen"] }], eclModalHeader: [{ type: i0.ContentChild, args: [forwardRef(() => EclModalHeaderComponent), { isSignal: true }] }], eclModalCloseComponents: [{ type: i0.ContentChildren, args: [forwardRef(() => EclModalCloseDirective), { ...{ descendants: true }, isSignal: true }] }], eclModalBody: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclModalBodyComponent), { isSignal: true }] }], isModalOpened: [{
-                type: HostBinding,
-                args: ['attr.open']
-            }], hostAriaDescribedBy: [{
-                type: HostBinding,
-                args: ['attr.aria-describedby']
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], onEscapeKeydownHandler: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }] } });
+            args: [{ selector: 'dialog[eclModal]', imports: [A11yModule], host: {
+                        '[attr.open]': 'isModalOpened',
+                        '[attr.aria-describedby]': 'hostAriaDescribedBy',
+                        '[class]': 'cssClasses',
+                        '(document:keydown.escape)': 'onEscapeKeydownHandler()',
+                    }, template: "<div class=\"ecl-modal__container\">\n    <div class=\"ecl-modal__content ecl-container\" cdkTrapFocus cdkTrapFocusAutoCapture>\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], modalClose: [{ type: i0.Output, args: ["modalClose"] }], modalOpen: [{ type: i0.Output, args: ["modalOpen"] }], eclModalHeader: [{ type: i0.ContentChild, args: [forwardRef(() => EclModalHeaderComponent), { isSignal: true }] }], eclModalCloseComponents: [{ type: i0.ContentChildren, args: [forwardRef(() => EclModalCloseDirective), { ...{ descendants: true }, isSignal: true }] }], eclModalBody: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclModalBodyComponent), { isSignal: true }] }] } });
 
 /**
  * Footer component used within the ECL Modal.
@@ -380,15 +387,14 @@ class EclModalFooterComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclModalFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclModalFooterComponent, isStandalone: true, selector: "[eclModalFooter]", host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(() => EclButtonComponent), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-modal__footer-content\">\n    <ng-content></ng-content>\n</div>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclModalFooterComponent, isStandalone: true, selector: "[eclModalFooter]", host: { properties: { "class": "cssClasses" } }, queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(() => EclButtonComponent), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-modal__footer-content\">\n    <ng-content></ng-content>\n</div>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclModalFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[eclModalFooter]', template: "<div class=\"ecl-modal__footer-content\">\n    <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { buttonComponents: [{ type: i0.ContentChildren, args: [forwardRef(() => EclButtonComponent), { ...{ descendants: true }, isSignal: true }] }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{ selector: '[eclModalFooter]', host: {
+                        '[class]': 'cssClasses',
+                    }, template: "<div class=\"ecl-modal__footer-content\">\n    <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { buttonComponents: [{ type: i0.ContentChildren, args: [forwardRef(() => EclButtonComponent), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /**
  * Directive for styling fixed content inside the modal body.
@@ -404,17 +410,17 @@ class EclModalBodyFixedContentDirective extends ECLBaseDirective {
         this.className = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclModalBodyFixedContentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclModalBodyFixedContentDirective, isStandalone: true, selector: "[eclModalBodyFixedContent]", host: { properties: { "class.ecl-modal__body-fixed": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclModalBodyFixedContentDirective, isStandalone: true, selector: "[eclModalBodyFixedContent]", host: { properties: { "class.ecl-modal__body-fixed": "className" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclModalBodyFixedContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclModalBodyFixedContent]',
+                    host: {
+                        '[class.ecl-modal__body-fixed]': 'className',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.ecl-modal__body-fixed']
-            }] } });
+        }] });
 
 /**
  * Directive used to trigger opening of a target ECL modal on click.
@@ -432,21 +438,21 @@ class EclModalTriggerDirective extends ECLBaseDirective {
     /**
      * Handles click event and opens the target modal.
      */
-    onClick(evt) {
+    onClick() {
         this.eclModalTriggerFor()?.openModal();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclModalTriggerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EclModalTriggerDirective, isStandalone: true, selector: "[eclModalTriggerFor]", inputs: { eclModalTriggerFor: { classPropertyName: "eclModalTriggerFor", publicName: "eclModalTriggerFor", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EclModalTriggerDirective, isStandalone: true, selector: "[eclModalTriggerFor]", inputs: { eclModalTriggerFor: { classPropertyName: "eclModalTriggerFor", publicName: "eclModalTriggerFor", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclModalTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclModalTriggerFor]',
+                    host: {
+                        '(click)': 'onClick()',
+                    },
                 }]
-        }], propDecorators: { eclModalTriggerFor: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclModalTriggerFor", required: false }] }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
+        }], propDecorators: { eclModalTriggerFor: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclModalTriggerFor", required: false }] }] } });
 
 const EUI_ECL_MODAL = [
     EclModalComponent,