@eui/ecl 22.0.0-alpha.41 → 22.0.0-alpha.43

package/docs/json/documentation.json

@@ -550,12 +550,12 @@
         },
         {
             "name": "EclCarouselItem",
-            "id": "interface-EclCarouselItem-b36ad254f7e1cb13d1e9a4f805e1503f0f1a68329e2a453085d2675d8a29c27afe0ed74cb12d6c9ae36032f7eddd2d8a0df8e8f8f467c1746b679af7e6a7f7d2",
+            "id": "interface-EclCarouselItem-7964cfc0ebacfeea8652d9abe2ca3eb45818f49396ea90651426cb6880541e9ffaa17f7b08d16ca0ac086a61926b86366a8538439f244fbf346dfb752312b0b5",
             "file": "packages/ecl/components/ecl-carousel/models/ecl-carousel-item.model.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "export interface EclCarouselItem {\n\tisCurrent: boolean;\n\tindex: number;\n\tid?: string;\n}",
+            "sourceCode": "import { Signal, WritableSignal } from '@angular/core';\n\nexport interface EclCarouselItem {\n\tisCurrent: WritableSignal<boolean>;\n\tindex: WritableSignal<number | undefined>;\n\tid?: Signal<string | undefined>;\n}\n",
             "displayName": "EclCarouselItem",
             "properties": [
                 {
@@ -563,11 +563,11 @@
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string",
+                    "type": "Signal<string | undefined>",
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 4,
+                    "line": 6,
                     "rawdescription": "\n"
                 },
                 {
@@ -575,11 +575,11 @@
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "number",
+                    "type": "WritableSignal<number | undefined>",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 3,
+                    "line": 5,
                     "rawdescription": "\n"
                 },
                 {
@@ -587,11 +587,11 @@
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "boolean",
+                    "type": "WritableSignal<boolean>",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 2,
+                    "line": 4,
                     "rawdescription": "\n"
                 }
             ],
@@ -612,12 +612,12 @@
         },
         {
             "name": "EclCategoryFilterItem",
-            "id": "interface-EclCategoryFilterItem-12b36cd7bb56e720d7ef99549871b7de6f32aa3ff0b227e9053627fdb34cde988ed663c98073ed354894a94c6e982f55427357db60eabc4508198299118779e4",
+            "id": "interface-EclCategoryFilterItem-8eae5c286418d1778e568836cbe18608960d66a4ab9c1a0c317f48af27915d614058f06c4d25c7d1fa808216c78da0731d25cf101793e83484ceba40dfebc211",
             "file": "packages/ecl/components/ecl-category-filter/models/ecl-category-filter-item.model.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "export interface EclCategoryFilterItem {\n    id?: string;\n    isCurrent?: boolean;\n    isExpanded?: boolean;\n    isRootItem?: boolean;\n}\n",
+            "sourceCode": "import { Signal } from '@angular/core';\n\nexport interface EclCategoryFilterItem {\n    id?: Signal<string | undefined>;\n    isCurrent?: Signal<boolean>;\n    isExpanded?: Signal<boolean>;\n    isRootItem?: boolean;\n}\n",
             "displayName": "EclCategoryFilterItem",
             "properties": [
                 {
@@ -625,11 +625,11 @@
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string",
+                    "type": "Signal<string | undefined>",
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 2,
+                    "line": 4,
                     "rawdescription": "\n"
                 },
                 {
@@ -637,11 +637,11 @@
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "boolean",
+                    "type": "Signal<boolean>",
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 3,
+                    "line": 5,
                     "rawdescription": "\n"
                 },
                 {
@@ -649,11 +649,11 @@
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "boolean",
+                    "type": "Signal<boolean>",
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 4,
+                    "line": 6,
                     "rawdescription": "\n"
                 },
                 {
@@ -665,7 +665,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 5,
+                    "line": 7,
                     "rawdescription": "\n"
                 }
             ],
@@ -13154,55 +13154,67 @@
         },
         {
             "name": "EclCheckboxDirective",
-            "id": "directive-EclCheckboxDirective-bc92b42f52860eeedf311e72844e90fbbfe61b7851d28840c107b56f22ca572cad37532e6a29c328412b9cc0b8ca99b46bff7b5f8a1b859dccabbcb85be80e70",
+            "id": "directive-EclCheckboxDirective-4a68a789c8fbb7593ee9ff2c1b9db33edde049228b7b6de0e0c921d3eb5956978997d47cc5aa5a54b035157830dd687a962c0de6d47a6eda03f73310dc2bace8",
             "file": "packages/ecl/components/ecl-checkbox/ecl-checkbox.directive.ts",
             "type": "directive",
             "description": "<p>Directive that applies ECL styles and manages state for checkbox groups or standalone checkboxes.</p>\n",
             "rawdescription": "\n\nDirective that applies ECL styles and manages state for checkbox groups or standalone checkboxes.\n",
-            "sourceCode": "import {\n    AfterContentInit,\n    Directive,\n    HostBinding,\n    Input,\n    OnChanges,\n    booleanAttribute,\n    forwardRef,\n    contentChild,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclFormLabelComponent } from '@eui/ecl/components/ecl-form-label';\nimport { EclHelpBlockDirective } from '@eui/ecl/components/ecl-help-block';\nimport { EclCheckboxHelpComponent } from './ecl-checkbox-help.component';\nimport { EclCheckboxLabelComponent } from './ecl-checkbox-label.component';\n\n/**\n * Directive that applies ECL styles and manages state for checkbox groups or standalone checkboxes.\n */\n@Directive({\n    selector: '[eclCheckbox]',\n})\nexport class EclCheckboxDirective extends ECLBaseDirective implements AfterContentInit, OnChanges {\n    /**\n     * Indicates whether the checkbox is disabled.\n     */\n    @Input({ transform: booleanAttribute }) @HostBinding('class.ecl-checkbox--disabled') isDisabled = false;\n\n    /**\n     * Indicates whether the checkbox is in an invalid state.\n     */\n    @Input({ transform: booleanAttribute }) @HostBinding('class.ecl-checkbox--invalid') isInvalid = false;\n\n    /**\n     * Indicates whether the checkbox is rendered as a single (standalone) item.\n     */\n    @Input({ transform: booleanAttribute }) @HostBinding('class.ecl-checkbox--single') isSingle = false;\n\n    /**\n     * Child label component projected into the checkbox.\n     */\n    readonly eclCheckboxLabelComponent = contentChild(forwardRef(() => EclCheckboxLabelComponent));\n\n    /**\n     * Child help component projected into the checkbox.\n     */\n    readonly eclCheckboxHelpComponent = contentChild(forwardRef(() => EclCheckboxHelpComponent));\n\n    /**\n     * Optional form label component projected into the checkbox.\n     */\n    readonly eclFormLabelDirective = contentChild(forwardRef(() => EclFormLabelComponent));\n\n    /**\n     * Optional help block directive projected into the checkbox.\n     */\n    readonly eclHelpBlockDirective = contentChild(forwardRef(() => EclHelpBlockDirective));\n\n    /**\n     * Applies base CSS classes for the checkbox container.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-checkbox')].join(' ');\n    }\n\n    ngAfterContentInit(): void {\n        this.updateChildElements();\n    }\n\n    ngOnChanges(): void {\n        this.updateChildElements();\n    }\n\n    private updateChildElements(): void {\n        const eclCheckboxLabelComponent = this.eclCheckboxLabelComponent();\n        if (eclCheckboxLabelComponent) {\n            eclCheckboxLabelComponent.isInvalid = this.isInvalid;\n            eclCheckboxLabelComponent.isDisabled = this.isDisabled;\n        }\n\n        const eclCheckboxHelpComponent = this.eclCheckboxHelpComponent();\n        if (eclCheckboxHelpComponent) {\n            eclCheckboxHelpComponent.isDisabled = this.isDisabled;\n        }\n    }\n}\n",
+            "sourceCode": "import {\n    Directive,\n    booleanAttribute,\n    computed,\n    forwardRef,\n    input,\n    linkedSignal,\n    effect,\n    contentChild,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclFormLabelComponent } from '@eui/ecl/components/ecl-form-label';\nimport { EclHelpBlockDirective } from '@eui/ecl/components/ecl-help-block';\nimport { EclCheckboxHelpComponent } from './ecl-checkbox-help.component';\nimport { EclCheckboxLabelComponent } from './ecl-checkbox-label.component';\n\n/**\n * Directive that applies ECL styles and manages state for checkbox groups or standalone checkboxes.\n */\n@Directive({\n    selector: '[eclCheckbox]',\n    host: {\n        '[class]': 'cssClasses()',\n        '[class.ecl-checkbox--disabled]': 'isDisabled()',\n        '[class.ecl-checkbox--invalid]': 'isInvalid()',\n        '[class.ecl-checkbox--single]': 'isSingle()',\n    },\n})\nexport class EclCheckboxDirective extends ECLBaseDirective {\n    /**\n     * Input controlling whether the checkbox starts disabled.\n     * Automatically coerced to a boolean value.\n     */\n    readonly isDisabledInput = input(false, { alias: 'isDisabled', transform: booleanAttribute });\n\n    /**\n     * Indicates whether the checkbox is disabled.\n     * Seeded from the `isDisabled` input but can be updated imperatively by the\n     * checkbox input directive as the associated control's state changes.\n     */\n    readonly isDisabled = linkedSignal(() => this.isDisabledInput());\n\n    /**\n     * Input controlling whether the checkbox starts in an invalid state.\n     * Automatically coerced to a boolean value.\n     */\n    readonly isInvalidInput = input(false, { alias: 'isInvalid', transform: booleanAttribute });\n\n    /**\n     * Indicates whether the checkbox is in an invalid state.\n     * Seeded from the `isInvalid` input but can be updated imperatively by the\n     * checkbox input directive as the associated control's validity changes.\n     */\n    readonly isInvalid = linkedSignal(() => this.isInvalidInput());\n\n    /**\n     * Indicates whether the checkbox is rendered as a single (standalone) item.\n     */\n    readonly isSingle = input(false, { transform: booleanAttribute });\n\n    /**\n     * Child label component projected into the checkbox.\n     */\n    readonly eclCheckboxLabelComponent = contentChild(forwardRef(() => EclCheckboxLabelComponent));\n\n    /**\n     * Child help component projected into the checkbox.\n     */\n    readonly eclCheckboxHelpComponent = contentChild(forwardRef(() => EclCheckboxHelpComponent));\n\n    /**\n     * Optional form label component projected into the checkbox.\n     */\n    readonly eclFormLabelDirective = contentChild(forwardRef(() => EclFormLabelComponent));\n\n    /**\n     * Optional help block directive projected into the checkbox.\n     */\n    readonly eclHelpBlockDirective = contentChild(forwardRef(() => EclHelpBlockDirective));\n\n    /**\n     * Applies base CSS classes for the checkbox container.\n     */\n    readonly cssClasses = computed(() => super.getCssClasses('ecl-checkbox'));\n\n    constructor() {\n        super();\n        // Propagate disabled/invalid state to the projected child components\n        // whenever those states (or the queried children) change.\n        effect(() => {\n            this.updateChildElements();\n        });\n    }\n\n    private updateChildElements(): void {\n        const isDisabled = this.isDisabled();\n        const isInvalid = this.isInvalid();\n\n        const eclCheckboxLabelComponent = this.eclCheckboxLabelComponent();\n        if (eclCheckboxLabelComponent) {\n            eclCheckboxLabelComponent.isInvalid.set(isInvalid);\n            eclCheckboxLabelComponent.isDisabled.set(isDisabled);\n        }\n\n        const eclCheckboxHelpComponent = this.eclCheckboxHelpComponent();\n        if (eclCheckboxHelpComponent) {\n            eclCheckboxHelpComponent.isDisabled.set(isDisabled);\n        }\n    }\n}\n",
             "selector": "[eclCheckbox]",
             "providers": [],
             "hostDirectives": [],
             "standalone": false,
             "inputsClass": [
                 {
-                    "coverageIgnore": false,
-                    "required": false,
                     "name": "isDisabled",
+                    "coverageIgnore": false,
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nIndicates whether the checkbox is disabled.\n",
-                    "description": "<p>Indicates whether the checkbox is disabled.</p>\n",
-                    "line": 27,
                     "type": "boolean",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Input controlling whether the checkbox starts disabled.\nAutomatically coerced to a boolean value.</p>\n",
+                    "line": 34,
+                    "rawdescription": "\n\nInput controlling whether the checkbox starts disabled.\nAutomatically coerced to a boolean value.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
-                    "coverageIgnore": false,
-                    "required": false,
                     "name": "isInvalid",
+                    "coverageIgnore": false,
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nIndicates whether the checkbox is in an invalid state.\n",
-                    "description": "<p>Indicates whether the checkbox is in an invalid state.</p>\n",
-                    "line": 32,
                     "type": "boolean",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Input controlling whether the checkbox starts in an invalid state.\nAutomatically coerced to a boolean value.</p>\n",
+                    "line": 47,
+                    "rawdescription": "\n\nInput controlling whether the checkbox starts in an invalid state.\nAutomatically coerced to a boolean value.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
-                    "coverageIgnore": false,
-                    "required": false,
                     "name": "isSingle",
+                    "coverageIgnore": false,
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nIndicates whether the checkbox is rendered as a single (standalone) item.\n",
-                    "description": "<p>Indicates whether the checkbox is rendered as a single (standalone) item.</p>\n",
-                    "line": 37,
                     "type": "boolean",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Indicates whether the checkbox is rendered as a single (standalone) item.</p>\n",
+                    "line": 59,
+                    "rawdescription": "\n\nIndicates whether the checkbox is rendered as a single (standalone) item.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
                     "name": "class",
@@ -13287,22 +13299,25 @@
             ],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [
                 {
+                    "name": "cssClasses",
                     "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
+                    "defaultValue": "computed(() => super.getCssClasses('ecl-checkbox'))",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies base CSS classes for the checkbox container.\n",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
                     "description": "<p>Applies base CSS classes for the checkbox container.</p>\n",
-                    "line": 63,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "hostListeners": [],
-            "propertiesClass": [
+                    "line": 84,
+                    "rawdescription": "\n\nApplies base CSS classes for the checkbox container.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
                 {
                     "name": "eclCheckboxHelpComponent",
                     "coverageIgnore": false,
@@ -13313,7 +13328,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Child help component projected into the checkbox.</p>\n",
-                    "line": 47,
+                    "line": 69,
                     "rawdescription": "\n\nChild help component projected into the checkbox.\n",
                     "modifierKind": [
                         148
@@ -13329,7 +13344,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Child label component projected into the checkbox.</p>\n",
-                    "line": 42,
+                    "line": 64,
                     "rawdescription": "\n\nChild label component projected into the checkbox.\n",
                     "modifierKind": [
                         148
@@ -13345,7 +13360,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Optional form label component projected into the checkbox.</p>\n",
-                    "line": 52,
+                    "line": 74,
                     "rawdescription": "\n\nOptional form label component projected into the checkbox.\n",
                     "modifierKind": [
                         148
@@ -13361,40 +13376,46 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Optional help block directive projected into the checkbox.</p>\n",
-                    "line": 57,
+                    "line": 79,
                     "rawdescription": "\n\nOptional help block directive projected into the checkbox.\n",
                     "modifierKind": [
                         148
                     ]
-                }
-            ],
-            "methodsClass": [
+                },
                 {
-                    "name": "ngAfterContentInit",
+                    "name": "isDisabled",
                     "coverageIgnore": false,
-                    "args": [],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 67,
+                    "defaultValue": "linkedSignal(() => this.isDisabledInput())",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": ""
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Indicates whether the checkbox is disabled.\nSeeded from the <code>isDisabled</code> input but can be updated imperatively by the\ncheckbox input directive as the associated control&#39;s state changes.</p>\n",
+                    "line": 41,
+                    "rawdescription": "\n\nIndicates whether the checkbox is disabled.\nSeeded from the `isDisabled` input but can be updated imperatively by the\ncheckbox input directive as the associated control's state changes.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
-                    "name": "ngOnChanges",
+                    "name": "isInvalid",
                     "coverageIgnore": false,
-                    "args": [],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 71,
+                    "defaultValue": "linkedSignal(() => this.isInvalidInput())",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": ""
-                },
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Indicates whether the checkbox is in an invalid state.\nSeeded from the <code>isInvalid</code> input but can be updated imperatively by the\ncheckbox input directive as the associated control&#39;s validity changes.</p>\n",
+                    "line": 54,
+                    "rawdescription": "\n\nIndicates whether the checkbox is in an invalid state.\nSeeded from the `isInvalid` input but can be updated imperatively by the\ncheckbox input directive as the associated control's validity changes.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                }
+            ],
+            "methodsClass": [
                 {
                     "name": "getCssClasses",
                     "coverageIgnore": false,
@@ -13437,8 +13458,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 522,
-                    "end": 630,
+                    "pos": 512,
+                    "end": 620,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -13450,22 +13471,14 @@
             "extends": [
                 "ECLBaseDirective"
             ],
-            "implements": [
-                "AfterContentInit",
-                "OnChanges"
-            ],
-            "accessors": {
-                "cssClasses": {
-                    "name": "cssClasses",
-                    "getSignature": {
-                        "name": "cssClasses",
-                        "type": "string",
-                        "returnType": "string",
-                        "line": 63,
-                        "rawdescription": "\n\nApplies base CSS classes for the checkbox container.\n",
-                        "description": "<p>Applies base CSS classes for the checkbox container.</p>\n"
-                    }
-                }
+            "constructorObj": {
+                "name": "constructor",
+                "description": "",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "args": [],
+                "line": 84,
+                "rawdescription": "\n"
             },
             "relationships": {
                 "incoming": [
@@ -13479,26 +13492,18 @@
                     {
                         "name": "ECLBaseDirective",
                         "type": "directive"
-                    },
-                    {
-                        "name": "AfterContentInit",
-                        "type": "interface"
-                    },
-                    {
-                        "name": "OnChanges",
-                        "type": "interface"
                     }
                 ]
             }
         },
         {
             "name": "EclCheckboxInputDirective",
-            "id": "directive-EclCheckboxInputDirective-9d7e77fcd7abf507259c8b12a987e51039c4c983e25ee96b4b1e89cf94f7efffdb2add2521f86edf5424292560409f17b0aff52a2c8486f04a6910170163d3a3",
+            "id": "directive-EclCheckboxInputDirective-1a2c7e9c5cd1dffbca2ccc6e6b8bfb76cf45bde46a9b97e8f2adba240f4855930784d82d99f2d5e38a038fc48d1c83241afcb2c585f676a683b706c6f6723ca2",
             "file": "packages/ecl/components/ecl-checkbox/ecl-checkbox-input.directive.ts",
             "type": "directive",
             "description": "<p>Directive that decorates the native checkbox input with ECL styles and syncs validation state.</p>\n",
             "rawdescription": "\n\nDirective that decorates the native checkbox input with ECL styles and syncs validation state.\n",
-            "sourceCode": "import { Directive, DoCheck, HostBinding, inject } from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclCheckboxDirective } from './ecl-checkbox.directive';\n\n/**\n * Directive that decorates the native checkbox input with ECL styles and syncs validation state.\n */\n@Directive({\n    selector: 'input[eclCheckboxInput]',\n})\nexport class EclCheckboxInputDirective extends ECLBaseDirective implements DoCheck {\n    eclCheckbox = inject(EclCheckboxDirective);\n    protected ngControl = inject(NgControl, { optional: true, self: true });\n\n    /**\n     * Applies base CSS classes for checkbox input.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-checkbox__input')].join(' ');\n    }\n\n    ngDoCheck(): void {\n        if (this.ngControl) {\n            if (this.eclCheckbox) {\n                this.eclCheckbox.isInvalid = this.ngControl.invalid && this.ngControl.touched;\n                this.eclCheckbox.isDisabled = this.ngControl.disabled;\n            }\n        }\n    }\n}\n",
+            "sourceCode": "import { Directive, DoCheck, computed, inject } from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclCheckboxDirective } from './ecl-checkbox.directive';\n\n/**\n * Directive that decorates the native checkbox input with ECL styles and syncs validation state.\n */\n@Directive({\n    selector: 'input[eclCheckboxInput]',\n    host: {\n        '[class]': 'cssClasses()',\n    },\n})\nexport class EclCheckboxInputDirective extends ECLBaseDirective implements DoCheck {\n    eclCheckbox = inject(EclCheckboxDirective);\n    protected ngControl = inject(NgControl, { optional: true, self: true });\n\n    /**\n     * Applies base CSS classes for checkbox input.\n     */\n    readonly cssClasses = computed(() => super.getCssClasses('ecl-checkbox__input'));\n\n    ngDoCheck(): void {\n        if (this.ngControl) {\n            if (this.eclCheckbox) {\n                this.eclCheckbox.isInvalid.set(!!this.ngControl.invalid && !!this.ngControl.touched);\n                this.eclCheckbox.isDisabled.set(!!this.ngControl.disabled);\n            }\n        }\n    }\n}\n",
             "selector": "input[eclCheckboxInput]",
             "providers": [],
             "hostDirectives": [],
@@ -13587,22 +13592,25 @@
             ],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [
                 {
+                    "name": "cssClasses",
                     "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
+                    "defaultValue": "computed(() => super.getCssClasses('ecl-checkbox__input'))",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies base CSS classes for checkbox input.\n",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
                     "description": "<p>Applies base CSS classes for checkbox input.</p>\n",
-                    "line": 20,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "hostListeners": [],
-            "propertiesClass": [
+                    "line": 22,
+                    "rawdescription": "\n\nApplies base CSS classes for checkbox input.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
                 {
                     "name": "eclCheckbox",
                     "coverageIgnore": false,
@@ -13613,7 +13621,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 13,
+                    "line": 16,
                     "rawdescription": "\n"
                 },
                 {
@@ -13626,7 +13634,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 14,
+                    "line": 17,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -13689,8 +13697,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 233,
-                    "end": 338,
+                    "pos": 230,
+                    "end": 335,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -13705,19 +13713,6 @@
             "implements": [
                 "DoCheck"
             ],
-            "accessors": {
-                "cssClasses": {
-                    "name": "cssClasses",
-                    "getSignature": {
-                        "name": "cssClasses",
-                        "type": "string",
-                        "returnType": "string",
-                        "line": 20,
-                        "rawdescription": "\n\nApplies base CSS classes for checkbox input.\n",
-                        "description": "<p>Applies base CSS classes for checkbox input.</p>\n"
-                    }
-                }
-            },
             "relationships": {
                 "incoming": [],
                 "outgoing": [
@@ -19946,28 +19941,17 @@
         },
         {
             "name": "EclFeaturedItemLinkDirective",
-            "id": "directive-EclFeaturedItemLinkDirective-0b941042f47eee35a364756b0f4161270e33abcdcaad5e97ae56d67b42fa6535a4ef08535037dba46af392ee95efa6f20f3c5b4eceb4c02903e5b3442f762ebb",
+            "id": "directive-EclFeaturedItemLinkDirective-a8ed460e3775d86dbb1f934cc829cdaddf7aff6dbc6f4b7e712bee58e1180cecf15854a8464994a404e8642f7a33b278ac3aaf9c5a7950b852093af21abae008",
             "file": "packages/ecl/components/ecl-featured/ecl-featured-item-link.directive.ts",
             "type": "directive",
             "description": "<p>Applies specific additional class for the eclLink directive, used in <ecl-featured-item> construction.</p>\n",
             "rawdescription": "\n\nApplies specific additional class for the eclLink directive, used in <ecl-featured-item> construction.\n",
-            "sourceCode": "import { Directive, ElementRef, Input, Renderer2, HostBinding, inject, input, computed } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Applies specific additional class for the eclLink directive, used in <ecl-featured-item> construction.\n */\n@Directive({\n    selector: '[eclFeaturedItemLink]',\n})\nexport class EclFeaturedItemLinkDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-featured-item__link') className = true;\n\n    @Input()\n    set ariaDescribedBy(value: string | null) {\n        if (value) {\n        this.renderer.setAttribute(this.el.nativeElement, 'aria-describedby', value);\n        } else {\n        this.renderer.removeAttribute(this.el.nativeElement, 'aria-describedby');\n        }\n    }\n    private el = inject(ElementRef);\n    private renderer = inject(Renderer2);\n}\n\n@Directive({\n    selector: '[eclFeaturedMediaAnchor]',\n    host: {\n    '[style.--ecl-image-anchor]': 'cssAnchor()',\n  },\n})\nexport class EclFeaturedMediaAnchorDirective extends ECLBaseDirective {\n    eclFeaturedMediaAnchor = input<'left' | 'right' | '20%' | 'center' | undefined>();\n\n    readonly cssAnchor = computed(() => {\n    const value = this.eclFeaturedMediaAnchor();\n\n    if (!value || value === 'center') {\n      return null;\n    }\n\n    return value;\n  });\n}\n",
+            "sourceCode": "import { Directive, computed, input, signal } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Applies specific additional class for the eclLink directive, used in <ecl-featured-item> construction.\n */\n@Directive({\n    selector: '[eclFeaturedItemLink]',\n    host: {\n        'class': 'ecl-featured-item__link',\n        '[attr.aria-describedby]': 'ariaDescribedBy()',\n    },\n})\nexport class EclFeaturedItemLinkDirective extends ECLBaseDirective {\n    /**\n     * The id of the element describing this link. Set imperatively by the parent\n     * featured item once the title id is known.\n     */\n    readonly ariaDescribedBy = signal<string | null>(null);\n}\n\n@Directive({\n    selector: '[eclFeaturedMediaAnchor]',\n    host: {\n    '[style.--ecl-image-anchor]': 'cssAnchor()',\n  },\n})\nexport class EclFeaturedMediaAnchorDirective extends ECLBaseDirective {\n    eclFeaturedMediaAnchor = input<'left' | 'right' | '20%' | 'center' | undefined>();\n\n    readonly cssAnchor = computed(() => {\n    const value = this.eclFeaturedMediaAnchor();\n\n    if (!value || value === 'center') {\n      return null;\n    }\n\n    return value;\n  });\n}\n",
             "selector": "[eclFeaturedItemLink]",
             "providers": [],
             "hostDirectives": [],
             "standalone": false,
             "inputsClass": [
-                {
-                    "coverageIgnore": false,
-                    "name": "ariaDescribedBy",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 14,
-                    "type": "string | null",
-                    "decorators": []
-                },
                 {
                     "name": "class",
                     "coverageIgnore": false,
@@ -20051,43 +20035,23 @@
             ],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-featured-item__link",
-                    "actualName": "className",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 11,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [
                 {
-                    "name": "className",
+                    "name": "ariaDescribedBy",
                     "coverageIgnore": false,
-                    "defaultValue": "true",
+                    "defaultValue": "signal<string | null>(null)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "",
-                    "line": 11,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-featured-item__link'"
-                        }
-                    ],
+                    "description": "<p>The id of the element describing this link. Set imperatively by the parent\nfeatured item once the title id is known.</p>\n",
+                    "line": 19,
+                    "rawdescription": "\n\nThe id of the element describing this link. Set imperatively by the parent\nfeatured item once the title id is known.\n",
                     "modifierKind": [
-                        171
+                        148
                     ]
                 }
             ],
@@ -20134,8 +20098,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 162,
-                    "end": 275,
+                    "pos": 119,
+                    "end": 232,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -20147,44 +20111,6 @@
             "extends": [
                 "ECLBaseDirective"
             ],
-            "accessors": {
-                "ariaDescribedBy": {
-                    "name": "ariaDescribedBy",
-                    "setSignature": {
-                        "name": "ariaDescribedBy",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "string | null",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 14,
-                        "rawdescription": "\n",
-                        "description": "",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "string | null",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    }
-                }
-            },
             "relationships": {
                 "incoming": [],
                 "outgoing": [
@@ -20197,12 +20123,12 @@
         },
         {
             "name": "EclFeaturedMediaAnchorDirective",
-            "id": "directive-EclFeaturedMediaAnchorDirective-0b941042f47eee35a364756b0f4161270e33abcdcaad5e97ae56d67b42fa6535a4ef08535037dba46af392ee95efa6f20f3c5b4eceb4c02903e5b3442f762ebb",
+            "id": "directive-EclFeaturedMediaAnchorDirective-a8ed460e3775d86dbb1f934cc829cdaddf7aff6dbc6f4b7e712bee58e1180cecf15854a8464994a404e8642f7a33b278ac3aaf9c5a7950b852093af21abae008",
             "file": "packages/ecl/components/ecl-featured/ecl-featured-item-link.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { Directive, ElementRef, Input, Renderer2, HostBinding, inject, input, computed } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Applies specific additional class for the eclLink directive, used in <ecl-featured-item> construction.\n */\n@Directive({\n    selector: '[eclFeaturedItemLink]',\n})\nexport class EclFeaturedItemLinkDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-featured-item__link') className = true;\n\n    @Input()\n    set ariaDescribedBy(value: string | null) {\n        if (value) {\n        this.renderer.setAttribute(this.el.nativeElement, 'aria-describedby', value);\n        } else {\n        this.renderer.removeAttribute(this.el.nativeElement, 'aria-describedby');\n        }\n    }\n    private el = inject(ElementRef);\n    private renderer = inject(Renderer2);\n}\n\n@Directive({\n    selector: '[eclFeaturedMediaAnchor]',\n    host: {\n    '[style.--ecl-image-anchor]': 'cssAnchor()',\n  },\n})\nexport class EclFeaturedMediaAnchorDirective extends ECLBaseDirective {\n    eclFeaturedMediaAnchor = input<'left' | 'right' | '20%' | 'center' | undefined>();\n\n    readonly cssAnchor = computed(() => {\n    const value = this.eclFeaturedMediaAnchor();\n\n    if (!value || value === 'center') {\n      return null;\n    }\n\n    return value;\n  });\n}\n",
+            "sourceCode": "import { Directive, computed, input, signal } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Applies specific additional class for the eclLink directive, used in <ecl-featured-item> construction.\n */\n@Directive({\n    selector: '[eclFeaturedItemLink]',\n    host: {\n        'class': 'ecl-featured-item__link',\n        '[attr.aria-describedby]': 'ariaDescribedBy()',\n    },\n})\nexport class EclFeaturedItemLinkDirective extends ECLBaseDirective {\n    /**\n     * The id of the element describing this link. Set imperatively by the parent\n     * featured item once the title id is known.\n     */\n    readonly ariaDescribedBy = signal<string | null>(null);\n}\n\n@Directive({\n    selector: '[eclFeaturedMediaAnchor]',\n    host: {\n    '[style.--ecl-image-anchor]': 'cssAnchor()',\n  },\n})\nexport class EclFeaturedMediaAnchorDirective extends ECLBaseDirective {\n    eclFeaturedMediaAnchor = input<'left' | 'right' | '20%' | 'center' | undefined>();\n\n    readonly cssAnchor = computed(() => {\n    const value = this.eclFeaturedMediaAnchor();\n\n    if (!value || value === 'center') {\n      return null;\n    }\n\n    return value;\n  });\n}\n",
             "selector": "[eclFeaturedMediaAnchor]",
             "providers": [],
             "hostDirectives": [],
@@ -20217,7 +20143,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 32,
+                    "line": 29,
                     "rawdescription": "\n",
                     "required": false
                 },
@@ -20317,7 +20243,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 34,
+                    "line": 31,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -24427,12 +24353,12 @@
         },
         {
             "name": "EclLayoutItemDirective",
-            "id": "directive-EclLayoutItemDirective-067c6b88e76f1f48021f95f6a1ea8fd6eac3624fc5e17258f09927c318a47034b7726a3cfb506fb005b2910b8211d141129bddcf4a5621c3b46468b6f6badc9d",
+            "id": "directive-EclLayoutItemDirective-c66e89e20290d5f484869deef858036ae0baa714fa695a6e93fb4a7d9e922f3a3505972877f712a421ca1adf627bbd75ceee66e6974826736a1052998d463d09",
             "file": "packages/ecl/components/ecl-layout-wrapper/ecl-layout-wrapper.directives.ts",
             "type": "directive",
             "description": "<p>Directive for individual items inside the layout wrapper grid.\nWraps each content element (e.g., card) and applies positional CSS classes.</p>\n<p>The index is automatically assigned by the parent <code>EclLayoutWrapperComponent</code>.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;div eclLayoutItem&gt;&lt;article eclCard&gt;...&lt;/article&gt;&lt;/div&gt;</code></pre></div>",
             "rawdescription": "\n\nDirective for individual items inside the layout wrapper grid.\nWraps each content element (e.g., card) and applies positional CSS classes.\n\nThe index is automatically assigned by the parent `EclLayoutWrapperComponent`.\n\n```html\n<div eclLayoutItem><article eclCard>...</article></div>\n```",
-            "sourceCode": "import { computed, Directive, ElementRef, inject, signal } from '@angular/core';\n\n/**\n * Directive for the layout wrapper title.\n * Applies the `ecl-layout-wrapper__title` class to the host element.\n *\n * @example\n * ```html\n * <h2 eclLayoutWrapperTitle>Heading</h2>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperTitle]',\n    host: {\n        class: 'ecl-layout-wrapper__title',\n    },\n})\nexport class EclLayoutWrapperTitleDirective {}\n\n/**\n * Directive for the layout wrapper description.\n * Applies the `ecl-layout-wrapper__description` class to the host element.\n *\n * @example\n * ```html\n * <div eclLayoutWrapperDescription>Lorem ipsum...</div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperDescription]',\n    host: {\n        class: 'ecl-layout-wrapper__description',\n    },\n})\nexport class EclLayoutWrapperDescriptionDirective {}\n\n/**\n * Directive for the layout wrapper \"view all\" link.\n * Applies the `ecl-layout-wrapper__view-all-link` class to the link element.\n *\n * @example\n * ```html\n * <a eclLayoutWrapperViewAll eclLink [standalone]=\"true\" icon=\"arrow-left\">View all</a>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperViewAll]',\n    host: {\n        class: 'ecl-layout-wrapper__view-all-link',\n    },\n})\nexport class EclLayoutWrapperViewAllDirective {}\n\n/**\n * Directive for individual items inside the layout wrapper grid.\n * Wraps each content element (e.g., card) and applies positional CSS classes.\n *\n * The index is automatically assigned by the parent `EclLayoutWrapperComponent`.\n *\n * @example\n * ```html\n * <div eclLayoutItem><article eclCard>...</article></div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutItem]',\n    host: {\n        '[class]': 'cssClasses()',\n    },\n})\nexport class EclLayoutItemDirective {\n\n    /** Positional index (1-based), assigned by the parent layout wrapper. */\n    readonly index = signal(0);\n\n    /** Computed CSS classes based on the assigned index. */\n    readonly cssClasses = computed(() => {\n        const idx = this.index();\n        return idx > 0 ? `ecl-layout-item ecl-layout-item--${idx}` : 'ecl-layout-item';\n    });\n}\n",
+            "sourceCode": "import { computed, Directive, ElementRef, inject, signal } from '@angular/core';\n\n/**\n * Directive for the layout wrapper title.\n * Applies the `ecl-layout-wrapper__title` class to the host element.\n *\n * @example\n * ```html\n * <h2 eclLayoutWrapperTitle>Heading</h2>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperTitle]',\n    host: {\n        class: 'ecl-layout-wrapper__title',\n    },\n})\nexport class EclLayoutWrapperTitleDirective {}\n\n/**\n * Directive for the layout wrapper description.\n * Applies the `ecl-layout-wrapper__description` class to the host element.\n *\n * @example\n * ```html\n * <div eclLayoutWrapperDescription>Lorem ipsum...</div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperDescription]',\n    host: {\n        class: 'ecl-layout-wrapper__description',\n    },\n})\nexport class EclLayoutWrapperDescriptionDirective {}\n\n/**\n * Directive for the layout wrapper \"view all\" link.\n * Applies the `ecl-layout-wrapper__view-all-link` class to the link element.\n *\n * @example\n * ```html\n * <a eclLayoutWrapperViewAll eclLink icon=\"arrow-left\">View all</a>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperViewAll]',\n    host: {\n        class: 'ecl-layout-wrapper__view-all-link',\n    },\n})\nexport class EclLayoutWrapperViewAllDirective {}\n\n/**\n * Directive for individual items inside the layout wrapper grid.\n * Wraps each content element (e.g., card) and applies positional CSS classes.\n *\n * The index is automatically assigned by the parent `EclLayoutWrapperComponent`.\n *\n * @example\n * ```html\n * <div eclLayoutItem><article eclCard>...</article></div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutItem]',\n    host: {\n        '[class]': 'cssClasses()',\n    },\n})\nexport class EclLayoutItemDirective {\n\n    /** Positional index (1-based), assigned by the parent layout wrapper. */\n    readonly index = signal(0);\n\n    /** Computed CSS classes based on the assigned index. */\n    readonly cssClasses = computed(() => {\n        const idx = this.index();\n        return idx > 0 ? `ecl-layout-item ecl-layout-item--${idx}` : 'ecl-layout-item';\n    });\n}\n",
             "selector": "[eclLayoutItem]",
             "providers": [],
             "hostDirectives": [],
@@ -24481,16 +24407,16 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 1536,
-                    "end": 1623,
+                    "pos": 1516,
+                    "end": 1603,
                     "kind": 328,
                     "id": 0,
                     "flags": 16777216,
                     "modifierFlagsCache": 0,
                     "transformFlags": 0,
                     "tagName": {
-                        "pos": 1537,
-                        "end": 1544,
+                        "pos": 1517,
+                        "end": 1524,
                         "kind": 80,
                         "id": 0,
                         "flags": 16777216,
@@ -24508,12 +24434,12 @@
         },
         {
             "name": "EclLayoutWrapperDescriptionDirective",
-            "id": "directive-EclLayoutWrapperDescriptionDirective-067c6b88e76f1f48021f95f6a1ea8fd6eac3624fc5e17258f09927c318a47034b7726a3cfb506fb005b2910b8211d141129bddcf4a5621c3b46468b6f6badc9d",
+            "id": "directive-EclLayoutWrapperDescriptionDirective-c66e89e20290d5f484869deef858036ae0baa714fa695a6e93fb4a7d9e922f3a3505972877f712a421ca1adf627bbd75ceee66e6974826736a1052998d463d09",
             "file": "packages/ecl/components/ecl-layout-wrapper/ecl-layout-wrapper.directives.ts",
             "type": "directive",
             "description": "<p>Directive for the layout wrapper description.\nApplies the <code>ecl-layout-wrapper__description</code> class to the host element.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;div eclLayoutWrapperDescription&gt;Lorem ipsum...&lt;/div&gt;</code></pre></div>",
             "rawdescription": "\n\nDirective for the layout wrapper description.\nApplies the `ecl-layout-wrapper__description` class to the host element.\n\n```html\n<div eclLayoutWrapperDescription>Lorem ipsum...</div>\n```",
-            "sourceCode": "import { computed, Directive, ElementRef, inject, signal } from '@angular/core';\n\n/**\n * Directive for the layout wrapper title.\n * Applies the `ecl-layout-wrapper__title` class to the host element.\n *\n * @example\n * ```html\n * <h2 eclLayoutWrapperTitle>Heading</h2>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperTitle]',\n    host: {\n        class: 'ecl-layout-wrapper__title',\n    },\n})\nexport class EclLayoutWrapperTitleDirective {}\n\n/**\n * Directive for the layout wrapper description.\n * Applies the `ecl-layout-wrapper__description` class to the host element.\n *\n * @example\n * ```html\n * <div eclLayoutWrapperDescription>Lorem ipsum...</div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperDescription]',\n    host: {\n        class: 'ecl-layout-wrapper__description',\n    },\n})\nexport class EclLayoutWrapperDescriptionDirective {}\n\n/**\n * Directive for the layout wrapper \"view all\" link.\n * Applies the `ecl-layout-wrapper__view-all-link` class to the link element.\n *\n * @example\n * ```html\n * <a eclLayoutWrapperViewAll eclLink [standalone]=\"true\" icon=\"arrow-left\">View all</a>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperViewAll]',\n    host: {\n        class: 'ecl-layout-wrapper__view-all-link',\n    },\n})\nexport class EclLayoutWrapperViewAllDirective {}\n\n/**\n * Directive for individual items inside the layout wrapper grid.\n * Wraps each content element (e.g., card) and applies positional CSS classes.\n *\n * The index is automatically assigned by the parent `EclLayoutWrapperComponent`.\n *\n * @example\n * ```html\n * <div eclLayoutItem><article eclCard>...</article></div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutItem]',\n    host: {\n        '[class]': 'cssClasses()',\n    },\n})\nexport class EclLayoutItemDirective {\n\n    /** Positional index (1-based), assigned by the parent layout wrapper. */\n    readonly index = signal(0);\n\n    /** Computed CSS classes based on the assigned index. */\n    readonly cssClasses = computed(() => {\n        const idx = this.index();\n        return idx > 0 ? `ecl-layout-item ecl-layout-item--${idx}` : 'ecl-layout-item';\n    });\n}\n",
+            "sourceCode": "import { computed, Directive, ElementRef, inject, signal } from '@angular/core';\n\n/**\n * Directive for the layout wrapper title.\n * Applies the `ecl-layout-wrapper__title` class to the host element.\n *\n * @example\n * ```html\n * <h2 eclLayoutWrapperTitle>Heading</h2>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperTitle]',\n    host: {\n        class: 'ecl-layout-wrapper__title',\n    },\n})\nexport class EclLayoutWrapperTitleDirective {}\n\n/**\n * Directive for the layout wrapper description.\n * Applies the `ecl-layout-wrapper__description` class to the host element.\n *\n * @example\n * ```html\n * <div eclLayoutWrapperDescription>Lorem ipsum...</div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperDescription]',\n    host: {\n        class: 'ecl-layout-wrapper__description',\n    },\n})\nexport class EclLayoutWrapperDescriptionDirective {}\n\n/**\n * Directive for the layout wrapper \"view all\" link.\n * Applies the `ecl-layout-wrapper__view-all-link` class to the link element.\n *\n * @example\n * ```html\n * <a eclLayoutWrapperViewAll eclLink icon=\"arrow-left\">View all</a>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperViewAll]',\n    host: {\n        class: 'ecl-layout-wrapper__view-all-link',\n    },\n})\nexport class EclLayoutWrapperViewAllDirective {}\n\n/**\n * Directive for individual items inside the layout wrapper grid.\n * Wraps each content element (e.g., card) and applies positional CSS classes.\n *\n * The index is automatically assigned by the parent `EclLayoutWrapperComponent`.\n *\n * @example\n * ```html\n * <div eclLayoutItem><article eclCard>...</article></div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutItem]',\n    host: {\n        '[class]': 'cssClasses()',\n    },\n})\nexport class EclLayoutItemDirective {\n\n    /** Positional index (1-based), assigned by the parent layout wrapper. */\n    readonly index = signal(0);\n\n    /** Computed CSS classes based on the assigned index. */\n    readonly cssClasses = computed(() => {\n        const idx = this.index();\n        return idx > 0 ? `ecl-layout-item ecl-layout-item--${idx}` : 'ecl-layout-item';\n    });\n}\n",
             "selector": "[eclLayoutWrapperDescription]",
             "providers": [],
             "hostDirectives": [],
@@ -24556,12 +24482,12 @@
         },
         {
             "name": "EclLayoutWrapperTitleDirective",
-            "id": "directive-EclLayoutWrapperTitleDirective-067c6b88e76f1f48021f95f6a1ea8fd6eac3624fc5e17258f09927c318a47034b7726a3cfb506fb005b2910b8211d141129bddcf4a5621c3b46468b6f6badc9d",
+            "id": "directive-EclLayoutWrapperTitleDirective-c66e89e20290d5f484869deef858036ae0baa714fa695a6e93fb4a7d9e922f3a3505972877f712a421ca1adf627bbd75ceee66e6974826736a1052998d463d09",
             "file": "packages/ecl/components/ecl-layout-wrapper/ecl-layout-wrapper.directives.ts",
             "type": "directive",
             "description": "<p>Directive for the layout wrapper title.\nApplies the <code>ecl-layout-wrapper__title</code> class to the host element.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;h2 eclLayoutWrapperTitle&gt;Heading&lt;/h2&gt;</code></pre></div>",
             "rawdescription": "\n\nDirective for the layout wrapper title.\nApplies the `ecl-layout-wrapper__title` class to the host element.\n\n```html\n<h2 eclLayoutWrapperTitle>Heading</h2>\n```",
-            "sourceCode": "import { computed, Directive, ElementRef, inject, signal } from '@angular/core';\n\n/**\n * Directive for the layout wrapper title.\n * Applies the `ecl-layout-wrapper__title` class to the host element.\n *\n * @example\n * ```html\n * <h2 eclLayoutWrapperTitle>Heading</h2>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperTitle]',\n    host: {\n        class: 'ecl-layout-wrapper__title',\n    },\n})\nexport class EclLayoutWrapperTitleDirective {}\n\n/**\n * Directive for the layout wrapper description.\n * Applies the `ecl-layout-wrapper__description` class to the host element.\n *\n * @example\n * ```html\n * <div eclLayoutWrapperDescription>Lorem ipsum...</div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperDescription]',\n    host: {\n        class: 'ecl-layout-wrapper__description',\n    },\n})\nexport class EclLayoutWrapperDescriptionDirective {}\n\n/**\n * Directive for the layout wrapper \"view all\" link.\n * Applies the `ecl-layout-wrapper__view-all-link` class to the link element.\n *\n * @example\n * ```html\n * <a eclLayoutWrapperViewAll eclLink [standalone]=\"true\" icon=\"arrow-left\">View all</a>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperViewAll]',\n    host: {\n        class: 'ecl-layout-wrapper__view-all-link',\n    },\n})\nexport class EclLayoutWrapperViewAllDirective {}\n\n/**\n * Directive for individual items inside the layout wrapper grid.\n * Wraps each content element (e.g., card) and applies positional CSS classes.\n *\n * The index is automatically assigned by the parent `EclLayoutWrapperComponent`.\n *\n * @example\n * ```html\n * <div eclLayoutItem><article eclCard>...</article></div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutItem]',\n    host: {\n        '[class]': 'cssClasses()',\n    },\n})\nexport class EclLayoutItemDirective {\n\n    /** Positional index (1-based), assigned by the parent layout wrapper. */\n    readonly index = signal(0);\n\n    /** Computed CSS classes based on the assigned index. */\n    readonly cssClasses = computed(() => {\n        const idx = this.index();\n        return idx > 0 ? `ecl-layout-item ecl-layout-item--${idx}` : 'ecl-layout-item';\n    });\n}\n",
+            "sourceCode": "import { computed, Directive, ElementRef, inject, signal } from '@angular/core';\n\n/**\n * Directive for the layout wrapper title.\n * Applies the `ecl-layout-wrapper__title` class to the host element.\n *\n * @example\n * ```html\n * <h2 eclLayoutWrapperTitle>Heading</h2>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperTitle]',\n    host: {\n        class: 'ecl-layout-wrapper__title',\n    },\n})\nexport class EclLayoutWrapperTitleDirective {}\n\n/**\n * Directive for the layout wrapper description.\n * Applies the `ecl-layout-wrapper__description` class to the host element.\n *\n * @example\n * ```html\n * <div eclLayoutWrapperDescription>Lorem ipsum...</div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperDescription]',\n    host: {\n        class: 'ecl-layout-wrapper__description',\n    },\n})\nexport class EclLayoutWrapperDescriptionDirective {}\n\n/**\n * Directive for the layout wrapper \"view all\" link.\n * Applies the `ecl-layout-wrapper__view-all-link` class to the link element.\n *\n * @example\n * ```html\n * <a eclLayoutWrapperViewAll eclLink icon=\"arrow-left\">View all</a>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperViewAll]',\n    host: {\n        class: 'ecl-layout-wrapper__view-all-link',\n    },\n})\nexport class EclLayoutWrapperViewAllDirective {}\n\n/**\n * Directive for individual items inside the layout wrapper grid.\n * Wraps each content element (e.g., card) and applies positional CSS classes.\n *\n * The index is automatically assigned by the parent `EclLayoutWrapperComponent`.\n *\n * @example\n * ```html\n * <div eclLayoutItem><article eclCard>...</article></div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutItem]',\n    host: {\n        '[class]': 'cssClasses()',\n    },\n})\nexport class EclLayoutItemDirective {\n\n    /** Positional index (1-based), assigned by the parent layout wrapper. */\n    readonly index = signal(0);\n\n    /** Computed CSS classes based on the assigned index. */\n    readonly cssClasses = computed(() => {\n        const idx = this.index();\n        return idx > 0 ? `ecl-layout-item ecl-layout-item--${idx}` : 'ecl-layout-item';\n    });\n}\n",
             "selector": "[eclLayoutWrapperTitle]",
             "providers": [],
             "hostDirectives": [],
@@ -24604,12 +24530,12 @@
         },
         {
             "name": "EclLayoutWrapperViewAllDirective",
-            "id": "directive-EclLayoutWrapperViewAllDirective-067c6b88e76f1f48021f95f6a1ea8fd6eac3624fc5e17258f09927c318a47034b7726a3cfb506fb005b2910b8211d141129bddcf4a5621c3b46468b6f6badc9d",
+            "id": "directive-EclLayoutWrapperViewAllDirective-c66e89e20290d5f484869deef858036ae0baa714fa695a6e93fb4a7d9e922f3a3505972877f712a421ca1adf627bbd75ceee66e6974826736a1052998d463d09",
             "file": "packages/ecl/components/ecl-layout-wrapper/ecl-layout-wrapper.directives.ts",
             "type": "directive",
-            "description": "<p>Directive for the layout wrapper &quot;view all&quot; link.\nApplies the <code>ecl-layout-wrapper__view-all-link</code> class to the link element.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;a eclLayoutWrapperViewAll eclLink [standalone]=&quot;true&quot; icon=&quot;arrow-left&quot;&gt;View all&lt;/a&gt;</code></pre></div>",
-            "rawdescription": "\n\nDirective for the layout wrapper \"view all\" link.\nApplies the `ecl-layout-wrapper__view-all-link` class to the link element.\n\n```html\n<a eclLayoutWrapperViewAll eclLink [standalone]=\"true\" icon=\"arrow-left\">View all</a>\n```",
-            "sourceCode": "import { computed, Directive, ElementRef, inject, signal } from '@angular/core';\n\n/**\n * Directive for the layout wrapper title.\n * Applies the `ecl-layout-wrapper__title` class to the host element.\n *\n * @example\n * ```html\n * <h2 eclLayoutWrapperTitle>Heading</h2>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperTitle]',\n    host: {\n        class: 'ecl-layout-wrapper__title',\n    },\n})\nexport class EclLayoutWrapperTitleDirective {}\n\n/**\n * Directive for the layout wrapper description.\n * Applies the `ecl-layout-wrapper__description` class to the host element.\n *\n * @example\n * ```html\n * <div eclLayoutWrapperDescription>Lorem ipsum...</div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperDescription]',\n    host: {\n        class: 'ecl-layout-wrapper__description',\n    },\n})\nexport class EclLayoutWrapperDescriptionDirective {}\n\n/**\n * Directive for the layout wrapper \"view all\" link.\n * Applies the `ecl-layout-wrapper__view-all-link` class to the link element.\n *\n * @example\n * ```html\n * <a eclLayoutWrapperViewAll eclLink [standalone]=\"true\" icon=\"arrow-left\">View all</a>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperViewAll]',\n    host: {\n        class: 'ecl-layout-wrapper__view-all-link',\n    },\n})\nexport class EclLayoutWrapperViewAllDirective {}\n\n/**\n * Directive for individual items inside the layout wrapper grid.\n * Wraps each content element (e.g., card) and applies positional CSS classes.\n *\n * The index is automatically assigned by the parent `EclLayoutWrapperComponent`.\n *\n * @example\n * ```html\n * <div eclLayoutItem><article eclCard>...</article></div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutItem]',\n    host: {\n        '[class]': 'cssClasses()',\n    },\n})\nexport class EclLayoutItemDirective {\n\n    /** Positional index (1-based), assigned by the parent layout wrapper. */\n    readonly index = signal(0);\n\n    /** Computed CSS classes based on the assigned index. */\n    readonly cssClasses = computed(() => {\n        const idx = this.index();\n        return idx > 0 ? `ecl-layout-item ecl-layout-item--${idx}` : 'ecl-layout-item';\n    });\n}\n",
+            "description": "<p>Directive for the layout wrapper &quot;view all&quot; link.\nApplies the <code>ecl-layout-wrapper__view-all-link</code> class to the link element.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;a eclLayoutWrapperViewAll eclLink icon=&quot;arrow-left&quot;&gt;View all&lt;/a&gt;</code></pre></div>",
+            "rawdescription": "\n\nDirective for the layout wrapper \"view all\" link.\nApplies the `ecl-layout-wrapper__view-all-link` class to the link element.\n\n```html\n<a eclLayoutWrapperViewAll eclLink icon=\"arrow-left\">View all</a>\n```",
+            "sourceCode": "import { computed, Directive, ElementRef, inject, signal } from '@angular/core';\n\n/**\n * Directive for the layout wrapper title.\n * Applies the `ecl-layout-wrapper__title` class to the host element.\n *\n * @example\n * ```html\n * <h2 eclLayoutWrapperTitle>Heading</h2>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperTitle]',\n    host: {\n        class: 'ecl-layout-wrapper__title',\n    },\n})\nexport class EclLayoutWrapperTitleDirective {}\n\n/**\n * Directive for the layout wrapper description.\n * Applies the `ecl-layout-wrapper__description` class to the host element.\n *\n * @example\n * ```html\n * <div eclLayoutWrapperDescription>Lorem ipsum...</div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperDescription]',\n    host: {\n        class: 'ecl-layout-wrapper__description',\n    },\n})\nexport class EclLayoutWrapperDescriptionDirective {}\n\n/**\n * Directive for the layout wrapper \"view all\" link.\n * Applies the `ecl-layout-wrapper__view-all-link` class to the link element.\n *\n * @example\n * ```html\n * <a eclLayoutWrapperViewAll eclLink icon=\"arrow-left\">View all</a>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperViewAll]',\n    host: {\n        class: 'ecl-layout-wrapper__view-all-link',\n    },\n})\nexport class EclLayoutWrapperViewAllDirective {}\n\n/**\n * Directive for individual items inside the layout wrapper grid.\n * Wraps each content element (e.g., card) and applies positional CSS classes.\n *\n * The index is automatically assigned by the parent `EclLayoutWrapperComponent`.\n *\n * @example\n * ```html\n * <div eclLayoutItem><article eclCard>...</article></div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutItem]',\n    host: {\n        '[class]': 'cssClasses()',\n    },\n})\nexport class EclLayoutItemDirective {\n\n    /** Positional index (1-based), assigned by the parent layout wrapper. */\n    readonly index = signal(0);\n\n    /** Computed CSS classes based on the assigned index. */\n    readonly cssClasses = computed(() => {\n        const idx = this.index();\n        return idx > 0 ? `ecl-layout-item ecl-layout-item--${idx}` : 'ecl-layout-item';\n    });\n}\n",
             "selector": "[eclLayoutWrapperViewAll]",
             "providers": [],
             "hostDirectives": [],
@@ -24626,7 +24552,7 @@
             "jsdoctags": [
                 {
                     "pos": 996,
-                    "end": 1113,
+                    "end": 1093,
                     "kind": 328,
                     "id": 0,
                     "flags": 16777216,
@@ -24641,7 +24567,7 @@
                         "transformFlags": 0,
                         "escapedText": "example"
                     },
-                    "comment": "<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;a eclLayoutWrapperViewAll eclLink [standalone]=&quot;true&quot; icon=&quot;arrow-left&quot;&gt;View all&lt;/a&gt;</code></pre></div>"
+                    "comment": "<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;a eclLayoutWrapperViewAll eclLink icon=&quot;arrow-left&quot;&gt;View all&lt;/a&gt;</code></pre></div>"
                 }
             ],
             "extends": [],
@@ -48751,7 +48677,7 @@
         },
         {
             "name": "EclBreadcrumbSegmentComponent",
-            "id": "component-EclBreadcrumbSegmentComponent-6ad4b38813f12240cc38bf1c9135a255e87344b67f89845937a9c6b5497d71f638ee9403aac54ca288505cce60a684fe3759329869dce31883fa386f132f4d68",
+            "id": "component-EclBreadcrumbSegmentComponent-90600f912629a6082799177cb2530104128a166c0134016db334c99f3a0bf9045937a0d0e3201e370698a5d6d783b2d87414e802be4ec6ef981e16fe2bec4650",
             "file": "packages/ecl/components/ecl-breadcrumb/ecl-breadcrumb-segment.component.ts",
             "encapsulation": [
                 "ViewEncapsulation.None"
@@ -49016,7 +48942,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 111,
+                    "line": 102,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles the click event on the segment.\n",
@@ -49111,7 +49037,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nComputes the CSS classes applied to the segment.\n",
                     "description": "<p>Computes the CSS classes applied to the segment.</p>\n",
-                    "line": 100,
+                    "line": 91,
                     "type": "string",
                     "decorators": []
                 }
@@ -49138,7 +49064,7 @@
             "description": "<p>Displays a single breadcrumb segment with optional navigation or ellipsis.</p>\n",
             "rawdescription": "\n\nDisplays a single breadcrumb segment with optional navigation or ellipsis.\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    ElementRef,\n    HostBinding,\n    input,\n    output,\n    ViewEncapsulation,\n    booleanAttribute,\n    inject,\n    signal,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { Params, QueryParamsHandling, RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclBreadcrumbSegmentClickEvent } from './events/ecl-breadcrumb-segment-click.event';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\n\n/**\n * Displays a single breadcrumb segment with optional navigation or ellipsis.\n */\n@Component({\n    selector: 'li[eclBreadcrumbSegment]',\n    templateUrl: './ecl-breadcrumb-segment.component.html',\n    imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_ICON, ...EUI_ECL_LINK],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n      '[attr.aria-current]': 'ariaCurrent'\n    }\n})\nexport class EclBreadcrumbSegmentComponent extends ECLBaseDirective {\n    el = inject(ElementRef);\n\n    /**\n     * Defines the tabindex attribute for accessibility.\n     */\n    @HostBinding('attr.tabindex') tabIndex = '-1';\n\n    /**\n     * Router link for navigation.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    routerLink = input<string | any[] | null>(null);\n\n    /**\n     * Query parameters used with routerLink.\n     */\n    queryParams = input<Params | null>(null);\n\n    /**\n     * Href used for standard navigation.\n     */\n    href = input('');\n\n    /**\n     * Strategy for handling existing query parameters during navigation.\n     */\n    queryParamsHandling = input<QueryParamsHandling>(null);\n\n    /**\n     * Displays the segment as an ellipsis instead of a link.\n     */\n    isEllipsis = input(false, { transform: booleanAttribute });\n\n    /**\n     * Highlights the segment as the current page.\n     */\n    isCurrentPage = input(false, { transform: booleanAttribute });\n\n    /**\n     * Hides the segment visually and from assistive technologies.\n     */\n    isHidden = signal(false);\n\n    @HostBinding('attr.aria-hidden')\n    get ariaHidden() {\n        return this.isHidden();\n    }\n\n    /**\n     * Emits when the segment is clicked.\n     */\n    segmentClick = output<EclBreadcrumbSegmentClickEvent>();\n\n    get ariaCurrent() { return this.isCurrentPage() ? 'page' : null; }\n\n    constructor() {\n        super();\n        const el = this.el;\n\n        if (el.nativeElement.tagName.toLowerCase() === 'ecl-breadcrumb-segment') {\n            console.warn('\"ecl-breadcrumb-segment\" selector is deprecated; use \"li[eclBreadcrumbSegment]\" instead.');\n        }\n    }\n\n    /**\n     * Computes the CSS classes applied to the segment.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-breadcrumb__segment'),\n            this.isCurrentPage() ? 'ecl-breadcrumb__current-page' : '',\n            this.isEllipsis() ? 'ecl-breadcrumb__segment--ellipsis' : '',\n        ].join(' ').trim();\n    }\n\n    /**\n     * Handles the click event on the segment.\n     */\n    onSegmentClick(evt: MouseEvent): void {\n        this.segmentClick.emit(new EclBreadcrumbSegmentClickEvent());\n        if (!this.href()) {\n            evt.stopPropagation();\n        }\n    }\n}\n",
+            "sourceCode": "import {\n    Component,\n    ElementRef,\n    HostBinding,\n    input,\n    output,\n    ViewEncapsulation,\n    booleanAttribute,\n    inject,\n    signal,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { Params, QueryParamsHandling, RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclBreadcrumbSegmentClickEvent } from './events/ecl-breadcrumb-segment-click.event';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\n\n/**\n * Displays a single breadcrumb segment with optional navigation or ellipsis.\n */\n@Component({\n    selector: 'li[eclBreadcrumbSegment]',\n    templateUrl: './ecl-breadcrumb-segment.component.html',\n    imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_ICON, ...EUI_ECL_LINK],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n      '[attr.aria-current]': 'ariaCurrent'\n    }\n})\nexport class EclBreadcrumbSegmentComponent extends ECLBaseDirective {\n    el = inject(ElementRef);\n\n    /**\n     * Defines the tabindex attribute for accessibility.\n     */\n    @HostBinding('attr.tabindex') tabIndex = '-1';\n\n    /**\n     * Router link for navigation.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    routerLink = input<string | any[] | null>(null);\n\n    /**\n     * Query parameters used with routerLink.\n     */\n    queryParams = input<Params | null>(null);\n\n    /**\n     * Href used for standard navigation.\n     */\n    href = input('');\n\n    /**\n     * Strategy for handling existing query parameters during navigation.\n     */\n    queryParamsHandling = input<QueryParamsHandling>(null);\n\n    /**\n     * Displays the segment as an ellipsis instead of a link.\n     */\n    isEllipsis = input(false, { transform: booleanAttribute });\n\n    /**\n     * Highlights the segment as the current page.\n     */\n    isCurrentPage = input(false, { transform: booleanAttribute });\n\n    /**\n     * Hides the segment visually and from assistive technologies.\n     */\n    isHidden = signal(false);\n\n    @HostBinding('attr.aria-hidden')\n    get ariaHidden() {\n        return this.isHidden();\n    }\n\n    /**\n     * Emits when the segment is clicked.\n     */\n    segmentClick = output<EclBreadcrumbSegmentClickEvent>();\n\n    get ariaCurrent() { return this.isCurrentPage() ? 'page' : null; }\n\n    /**\n     * Computes the CSS classes applied to the segment.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-breadcrumb__segment'),\n            this.isCurrentPage() ? 'ecl-breadcrumb__current-page' : '',\n            this.isEllipsis() ? 'ecl-breadcrumb__segment--ellipsis' : '',\n        ].join(' ').trim();\n    }\n\n    /**\n     * Handles the click event on the segment.\n     */\n    onSegmentClick(evt: MouseEvent): void {\n        this.segmentClick.emit(new EclBreadcrumbSegmentClickEvent());\n        if (!this.href()) {\n            evt.stopPropagation();\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -49154,15 +49080,6 @@
                     "comment": "Displays a single breadcrumb segment with optional navigation or ellipsis."
                 }
             ],
-            "constructorObj": {
-                "name": "constructor",
-                "description": "",
-                "deprecated": false,
-                "deprecationMessage": "",
-                "args": [],
-                "line": 85,
-                "rawdescription": "\n"
-            },
             "extends": [
                 "ECLBaseDirective"
             ],
@@ -49195,7 +49112,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 100,
+                        "line": 91,
                         "rawdescription": "\n\nComputes the CSS classes applied to the segment.\n",
                         "description": "<p>Computes the CSS classes applied to the segment.</p>\n"
                     }
@@ -50124,7 +50041,7 @@
         },
         {
             "name": "EclCarouselComponent",
-            "id": "component-EclCarouselComponent-9c85cf8c9f0d397b30b05d84b3ce3984900186bd565b4c506af926a74ee9cdbe9a46ace3d1e77b8d7a058596810e9b537f4bc6ba1224eedb7a3e3b0b93afbca9",
+            "id": "component-EclCarouselComponent-81802f77cb029f9a31bae0e2e00876a8015269bd44101dfed3992760c714f3ea38181b0c017e161873914f305cc00bf95a967eb84338ffdccc2ba13678786aab",
             "file": "packages/ecl/components/ecl-carousel/ecl-carousel.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -50988,7 +50905,7 @@
             "description": "<p>Component responsible for rendering a carousel (slideshow) with autoplay, keyboard navigation,\nand support for RTL layouts. Extends the ECLBaseDirective for consistent styling and behavior.</p>\n",
             "rawdescription": "\n\nComponent responsible for rendering a carousel (slideshow) with autoplay, keyboard navigation,\nand support for RTL layouts. Extends the ECLBaseDirective for consistent styling and behavior.\n",
             "type": "component",
-            "sourceCode": "import { BreakpointObserver } from '@angular/cdk/layout';\nimport {\n    AfterContentInit,\n    ChangeDetectorRef,\n    Component,\n    DOCUMENT,\n    ElementRef,\n    OnDestroy,\n    OnInit,\n    Renderer2,\n    afterNextRender,\n    booleanAttribute,\n    forwardRef,\n    inject,\n    numberAttribute,\n    output,\n    input,\n    viewChild,\n    contentChildren,\n    viewChildren,\n} from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective, EclRtlService, KeyCode } from '@eui/ecl/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { Subject, auditTime, fromEvent, interval, switchMap, takeUntil } from 'rxjs';\nimport { EclCarouselItemComponent } from './ecl-carousel-item.component';\nimport { EclSlideEvent } from './events/ecl-slide.event';\n\n/**\n * Component responsible for rendering a carousel (slideshow) with autoplay, keyboard navigation,\n * and support for RTL layouts. Extends the ECLBaseDirective for consistent styling and behavior.\n */\n@Component({\n    selector: 'ecl-carousel',\n    templateUrl: './ecl-carousel.component.html',\n    imports: [\n        TranslatePipe,\n        EclIconComponent,\n        EclCarouselItemComponent,\n    ],\n    host: {\n        '[attr.aria-label]': 'ariaLabel()',\n        '[attr.aria-roledescription]': '\"carousel\"',\n        '[class]': 'cssClasses',\n    },\n    styles: [\n        `\n            .ecl-carousel__slides {\n                transition-duration: 0.4s;\n            }\n        `,\n    ],\n})\nexport class EclCarouselComponent extends ECLBaseDirective implements OnInit, OnDestroy, AfterContentInit {\n    /**\n     * Aria-label for screen readers to describe the carousel.\n     */\n    readonly ariaLabel = input<string | null>('Carousel description here', { alias: 'aria-label' });\n\n    /**\n     * Determines whether the carousel should autoplay.\n     */\n    readonly isAutoplay = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n\n    /**\n     * Interval in milliseconds between automatic slide transitions.\n     */\n    readonly playInterval = input(5000, { transform: numberAttribute });\n\n    /**\n     * Event emitted when a slide change occurs.\n     */\n    readonly slide = output<EclSlideEvent>();\n\n    /**\n     * Reference to the main carousel container element.\n     */\n    readonly carouselContainerElement = viewChild<ElementRef>('carouselContainer');\n\n    /**\n     * Collection of slide components rendered inside the carousel.\n     */\n    readonly slides = contentChildren(forwardRef(() => EclCarouselItemComponent));\n\n    /**\n     * References to the navigation buttons corresponding to each slide.\n     */\n    readonly navigationButtons = viewChildren<ElementRef>('currButton');\n\n    /**\n     * Reference to the play button element.\n     */\n    readonly playButton = viewChild<ElementRef>('playButton');\n\n    /**\n     * Reference to the pause button element.\n     */\n    readonly pauseButton = viewChild<ElementRef>('pauseButton');\n\n    /**\n     * Reference to the first hidden slide item (used for focus management).\n     */\n    readonly firstHiddenItem = viewChild<EclCarouselItemComponent>('firstHiddenItem');\n\n    /**\n     * Reference to the last hidden slide item (used for focus management).\n     */\n    readonly lastHiddenItem = viewChild<EclCarouselItemComponent>('lastHiddenItem');\n\n    /**\n     * Reference to the slides container element.\n     */\n    readonly slidesContainer = viewChild<ElementRef>('slidesContainer');\n\n    /**\n     * Indicates whether autoplay is currently active.\n     */\n    public isPlaying = false;\n\n    /**\n     * Indicates whether autoplay was manually paused.\n     */\n    public isPausedForced = false;\n\n    /**\n     * Indicates whether the layout is currently in RTL mode.\n     */\n    public isRtl = false;\n\n    /**\n     * Duration of the slide transition animation (in seconds).\n     */\n    transitionDuration = 0.4;\n\n    private isMobileBreakpoint = false;\n    private isSmallTabletBreakpoint = false;\n    private isTabletBreakpoint = false;\n    private isDesktopBreakpoint = false;\n    private isLargeBreakpoint = false;\n    private playSubject = new Subject<void>();\n    private stopSubject = new Subject<void>();\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private unsubscribeListener: () => void;\n\n    /**\n     * Debounce interval (ms) used internally for timing and transitions.\n     */\n    private readonly TIMEOUT_INTERVAL = 400;\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n    private cd = inject(ChangeDetectorRef);\n    private renderer2 = inject(Renderer2);\n    private eclRtlService = inject(EclRtlService);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly window = this.document.defaultView; // Window | null\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.observeElementSizeChanges();\n            this.cd.detectChanges();\n            this.observeBreakpointChanges();\n\n            fromEvent(this.window, 'resize').pipe(\n                auditTime(50),\n                takeUntil(this.destroy$)).subscribe(() => {\n                this.transitionDuration = 0;\n                this.cd.detectChanges();\n                // Restore transition after layout settles\n                setTimeout(() => {\n                    this.transitionDuration = 0.4;\n                    this.cd.detectChanges();\n                });\n                this.observeElementSizeChanges();\n            });\n        });\n    }\n\n    /**\n     * Returns the computed CSS class list for the component.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-carousel')].join(' ').trim();\n    }\n\n    /**\n     * Angular lifecycle hook: initializes autoplay and RTL detection.\n     */\n    ngOnInit(): void {\n        this.initAutoplay();\n        this.handleRtlChangeState();\n    }\n\n    /**\n     * Angular lifecycle hook: called after content (slides) is initialized.\n     */\n    ngAfterContentInit(): void {\n        setTimeout(() => {\n            this.initializeSlider();\n        });\n    }\n\n    /**\n     * Angular lifecycle hook: cleans up subscriptions and event listeners.\n     */\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n        if (this.unsubscribeListener) {\n            this.unsubscribeListener();\n        }\n    }\n\n    /**\n     * Starts autoplay and focuses the pause button.\n     */\n    onPlayClick(): void {\n        this.startPlaying();\n        this.focusOnButton(this.pauseButton());\n    }\n\n    /**\n     * Stops autoplay and focuses the play button.\n     */\n    onPauseClick(): void {\n        this.stopPlaying();\n        this.focusOnButton(this.playButton());\n    }\n\n    /**\n     * Handles key press on the first carousel element to stop autoplay if TAB is pressed.\n     */\n    onFirstCarouselElementPress(e): void {\n        if (e.key === KeyCode.TAB) {\n            if (this.isPlaying) {\n                this.stopPlaying();\n            }\n        }\n    }\n\n    /**\n     * Handles keyboard interaction on the play button.\n     */\n    onPlayKeyboardPress(e): void {\n        if (e.key === KeyCode.TAB && e.shiftKey) {\n            return;\n        }\n        if ([KeyCode.TAB].includes(e.key)) {\n            if (this.isPlaying) {\n                this.focusOnButton(this.navigationButtons().at(this.getCurrentSlideIndex()));\n                this.stopPlaying();\n            } else {\n                this.focusOnButton(this.navigationButtons().at(this.getCurrentSlideIndex()));\n            }\n            e.preventDefault();\n        } else if (!this.isPlaying && [KeyCode.ARROW_RIGHT].includes(e.key)) {\n            this.focusOnButton(this.navigationButtons().at(this.getCurrentSlideIndex()));\n        }\n    }\n\n    /**\n     * Handles keyboard navigation for the navigation buttons.\n     */\n    onNavBtnKeyboardPress(e: KeyboardEvent, index: number): void {\n        if (e.key === KeyCode.ARROW_RIGHT) {\n            this.onNavigationButtonArrowRight(e);\n        } else if (e.key === KeyCode.ARROW_LEFT) {\n            this.onNavigationButtonArrowLeft(e, index);\n        }\n        return;\n    }\n\n    /**\n     * Checks whether a given button is currently visible (not hidden via style).\n     */\n    isButtonVisible(button: ElementRef): boolean {\n        if (!button) {\n            return false;\n        }\n        return button.nativeElement.style.display === '';\n    }\n\n    /**\n     * Sets focus on the specified button.\n     */\n    focusOnButton(button: ElementRef): void {\n        if (!button) {\n            return;\n        }\n        button.nativeElement.focus();\n    }\n\n    /**\n     * Handles user interaction with a slide control button.\n     */\n    onSlideControlClick(slide: EclCarouselItemComponent): void {\n        this.stopPlaying();\n        this.activateSlide(slide, true);\n    }\n\n    /**\n     * Navigates to the next slide and stops autoplay.\n     */\n    onNextSlideClick(): void {\n        this.stopPlaying();\n        this.goToNextSlide(true);\n    }\n\n    /**\n     * Navigates to the previous slide and stops autoplay.\n     */\n    onPreviousSlideClick(): void {\n        this.stopPlaying();\n        this.goToPreviousSlide(true);\n    }\n\n    /**\n     * Pauses autoplay on mouse hover.\n     */\n    onSlideHover(): void {\n        this.pausePlaying();\n    }\n\n    /**\n     * Resumes autoplay on mouse leave, if not manually paused.\n     */\n    onSlideHoverout(): void {\n        if (!this.isStopButtonPressed()) {\n            this.resumePlaying();\n        }\n    }\n\n    /**\n     * Returns whether the stop button (pause) has been pressed by the user.\n     */\n    public isStopButtonPressed(): boolean {\n        return this.isPausedForced;\n    }\n\n    /**\n     * Returns whether the carousel has padding applied (e.g., on desktop breakpoint).\n     */\n    public isPadded(): boolean {\n        return this.isDesktopBreakpoint;\n    }\n\n    /**\n     * Checks whether there are enough slides to render controls.\n     */\n    public hasControls(): boolean {\n        return this.getSlidesCount() > 1;\n    }\n\n    /**\n     * Retrieves the current active slide index.\n     * Corrects index for internal structure with hidden buffer slides.\n     */\n    public getCurrentSlideIndex(): number {\n        let currentIndex: number;\n\n        this.getAllSlidesArray().forEach((item, idx) => {\n            if (item && item.isCurrent) {\n                currentIndex = idx;\n            }\n        });\n        if (currentIndex === this.getAllSlidesCount() - 1) {\n            return 0;\n        } else if (currentIndex === 0) {\n            return this.getSlidesCount() - 1;\n        }\n        return currentIndex - 1;\n    }\n\n    /**\n     * Computes the left offset to shift the slides container.\n     */\n    public getCarouselSlidesOffsetLeft(): number {\n        return -1 * this.carouselContainerElement()?.nativeElement.offsetWidth * this.getCurrentItemIndex();\n    }\n\n    /**\n     * Computes the right offset to shift the slides container (same logic as left in RTL).\n     */\n    public getCarouselSlidesOffsetRight(): number {\n        return -1 * this.carouselContainerElement()?.nativeElement.offsetWidth * this.getCurrentItemIndex();\n    }\n\n    /**\n     * Subscribes to RTL layout state changes to adapt carousel behavior.\n     */\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            this.isRtl = rtlState;\n        });\n    }\n\n    /**\n     * Initializes autoplay logic using RxJS intervals and subject triggers.\n     */\n    private initAutoplay(): void {\n        const start$ = this.playSubject.asObservable();\n        const stop$ = this.stopSubject.asObservable();\n\n        start$\n            .pipe(\n                switchMap(() => interval(this.playInterval()).pipe(takeUntil(stop$))),\n                takeUntil(this.destroy$),\n            )\n            .subscribe(() => {\n                this.goToNextSlide(true);\n            });\n    }\n\n    /**\n     * Returns the index of the currently active slide item.\n     */\n    private getCurrentItemIndex(): number {\n        let result = 0;\n        this.getAllSlidesArray().forEach((item, index) => {\n            if (item && item.isCurrent) {\n                result = index;\n            }\n        });\n        return result;\n    }\n\n    /**\n     * Initializes slides, hidden buffer items, and sets default active slide.\n     */\n    private initializeSlider(): void {\n        this.slides().forEach((item, idx) => {\n            this.initSlide(item, idx);\n        });\n\n        if (this.hasControls()) {\n            this.initHiddenItems();\n            if (this.isNoSlideSelected()) {\n                this.activateSlide(this.slides().at(0)!, false);\n            }\n        }\n    }\n\n    /**\n     * Initializes hidden first and last slide clones used for infinite scroll illusion.\n     */\n    private initHiddenItems(): void {\n        this.firstHiddenItem().el.nativeElement.innerHTML = this.getLastContentChild();\n        this.firstHiddenItem().isCurrent = false;\n        this.lastHiddenItem().el.nativeElement.innerHTML = this.getFirstContentChild();\n        this.lastHiddenItem().isCurrent = false;\n        this.unsubscribeListener = this.renderer2.listen(this.slidesContainer().nativeElement, 'transitionend', () => this.checkIndex());\n    }\n\n    /**\n     * Verifies current index and resets to actual slide if hidden clone is reached.\n     */\n    private checkIndex(): void {\n        if (this.getCurrentItemIndex() === this.getAllSlidesCount() - 1) {\n            const item = this.slides().at(0)!;\n            this.activateSlide(item, false);\n        } else if (this.getCurrentItemIndex() === 0) {\n            const item = this.slides().at(-1)!;\n            this.activateSlide(item, false);\n        }\n    }\n\n    /**\n     * Returns the inner HTML of the last real slide (used for buffer item).\n     */\n    private getLastContentChild(): string {\n        return this.getSlidesCount() > 0 ? this.slides().at(this.getSlidesCount() - 1).el.nativeElement.innerHTML : '';\n    }\n\n    /**\n     * Returns the inner HTML of the first real slide (used for buffer item).\n     */\n    private getFirstContentChild(): string {\n        return this.getSlidesCount() > 0 ? this.slides().at(0).el.nativeElement.innerHTML : '';\n    }\n\n    /**\n     * Sets up a slide with index and ARIA label.\n     */\n    private initSlide(item: EclCarouselItemComponent, idx: number): void {\n        item.index = idx;\n        item.ariaLabel = `slide ${idx + 1} of ${this.getSlidesCount()}`;\n        const banner = item.banner();\n        if (banner) {\n            banner.skipHeightManagement = true;\n        }\n    }\n\n    /**\n     * Activates the next slide, with option to loop.\n     */\n    private goToNextSlide(isLoop: boolean): void {\n        this.activateSlide(this.getNextSlide(isLoop), true);\n    }\n\n    /**\n     * Activates the previous slide, with option to loop.\n     */\n    private goToPreviousSlide(isLoop: boolean): void {\n        this.activateSlide(this.getPreviousSlide(isLoop), true);\n    }\n\n    /**\n     * Activates a specific slide and triggers slide change event if needed.\n     */\n    private activateSlide(slideItem: EclCarouselItemComponent, withTransition: boolean): void {\n        if (withTransition) {\n            this.transitionDuration = 0.4;\n        } else {\n            this.transitionDuration = 0;\n        }\n        if (slideItem) {\n            this.getAllSlidesArray().forEach((item) => {\n                item.isCurrent = false;\n            });\n            slideItem.isCurrent = true;\n        }\n        this.cd.detectChanges();\n        if (withTransition) {\n            this.slide.emit(new EclSlideEvent(this.slides().at(this.getCurrentSlideIndex())));\n        }\n    }\n\n    /**\n     * Checks if the currently focused button is the last in the list.\n     */\n    private isLastButton(index): boolean {\n        const buttonsList = this.navigationButtons();\n        return index + 1 >= buttonsList.length;\n    }\n\n    /**\n     * Checks if the currently focused button is the first in the list.\n     */\n    private isFirstButton(index): boolean {\n        return index <= 0;\n    }\n\n    /**\n     * Starts autoplay mode and updates state.\n     */\n    private startPlaying(): void {\n        this.isPlaying = true;\n        this.cd.detectChanges();\n        this.isPausedForced = false;\n        this.playSubject.next();\n    }\n\n    /**\n     * Stops autoplay mode and updates state.\n     */\n    private stopPlaying(): void {\n        this.isPlaying = false;\n        this.cd.detectChanges();\n        this.isPausedForced = true;\n        this.stopSubject.next();\n    }\n\n    /**\n     * Temporarily pauses autoplay (e.g. on mouse hover).\n     */\n    private pausePlaying(): void {\n        this.isPlaying = false;\n        this.cd.detectChanges();\n        this.stopSubject.next();\n    }\n\n    /**\n     * Resumes autoplay after being paused.\n     */\n    private resumePlaying(): void {\n        this.isPlaying = true;\n        this.cd.detectChanges();\n        this.playSubject.next();\n    }\n\n    /**\n     * Retrieves the next slide based on the current index and loop setting.\n     */\n    private getNextSlide(isLoop: boolean): EclCarouselItemComponent {\n        const slidesCount = this.getSlidesCount();\n        const currentIndex = this.getCurrentSlideIndex();\n\n        if (currentIndex >= slidesCount - 1) {\n            if (isLoop) {\n                return this.getAllSlidesArray()[this.getAllSlidesCount() - 1];\n            } else {\n                return this.slides().at(-1)!;\n            }\n        } else {\n            return this.slides().at(currentIndex + 1);\n        }\n    }\n\n    /**\n     * Returns all slides, including the hidden buffer items.\n     */\n    private getAllSlidesArray(): EclCarouselItemComponent[] {\n        return [...[this.firstHiddenItem()], ...this.slides(), ...[this.lastHiddenItem()]];\n    }\n\n    /**\n     * Retrieves the previous slide based on the current index and loop setting.\n     */\n    private getPreviousSlide(isLoop: boolean): EclCarouselItemComponent {\n        const currentIndex = this.getCurrentSlideIndex();\n\n        if (currentIndex <= 0) {\n            if (isLoop) {\n                return this.getAllSlidesArray()[0];\n            } else {\n                return this.slides().at(0)!;\n            }\n        } else {\n            return this.slides().at(currentIndex - 1);\n        }\n    }\n\n    /**\n     * Returns the number of actual visible slides (excluding hidden buffer).\n     */\n    private getSlidesCount(): number {\n        return this.slides().length;\n    }\n\n    /**\n     * Returns total number of slides, including buffer (hidden) items.\n     */\n    private getAllSlidesCount(): number {\n        if (this.hasControls()) {\n            return this.slides().length + 2;\n        } else {\n            return this.slides().length;\n        }\n    }\n\n    /**\n     * Determines whether no slide is currently marked as active.\n     */\n    private isNoSlideSelected(): boolean {\n        return !this.slides().some((item) => item.isCurrent);\n    }\n\n    /**\n     * Handles right arrow key navigation for buttons.\n     */\n    private onNavigationButtonArrowRight(e: KeyboardEvent): void {\n        setTimeout(() => {\n            this.goToNextSlide(false);\n            const button: ElementRef = this.navigationButtons().at(this.getCurrentSlideIndex());\n            this.focusOnButton(button);\n        }, this.TIMEOUT_INTERVAL);\n        e.preventDefault();\n    }\n\n    /**\n     * Handles left arrow key navigation for buttons.\n     */\n    private onNavigationButtonArrowLeft(e: KeyboardEvent, index: number): void {\n        if (this.isFirstButton(index)) {\n            const playButton = this.playButton();\n            if (playButton) {\n                this.focusOnButton(playButton);\n            }\n            const pauseButton = this.pauseButton();\n            if (pauseButton) {\n                this.focusOnButton(pauseButton);\n            }\n        } else {\n            setTimeout(() => {\n                this.goToPreviousSlide(false);\n                const button: ElementRef = this.navigationButtons().at(this.getCurrentSlideIndex());\n                this.focusOnButton(button);\n            }, this.TIMEOUT_INTERVAL);\n            e.preventDefault();\n        }\n    }\n\n    /**\n     * Observes screen breakpoint changes to adjust autoplay and layout behavior.\n     */\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe([\n                '(max-width: 768px)',\n                '(max-width: 997px)',\n                '(min-width: 998px)',\n                '(min-width: 1140px)',\n                '(min-width: 1140px) and (max-width: 1260px)',\n            ])\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((result) => {\n                this.isMobileBreakpoint = result.breakpoints['(max-width: 768px)'];\n                this.isSmallTabletBreakpoint = result.breakpoints['(max-width: 997px)'];\n                this.isTabletBreakpoint = result.breakpoints['(min-width: 998px)'];\n                this.isLargeBreakpoint = result.breakpoints['(min-width: 1140px)'];\n                this.isDesktopBreakpoint = result.breakpoints['(min-width: 1140px) and (max-width: 1260px)'];\n                const isAutoplay = this.isAutoplay();\n                if (this.isMobileBreakpoint && !isAutoplay) {\n                    this.stopPlaying();\n                }\n\n                if (this.isTabletBreakpoint) {\n                    if (isAutoplay || isAutoplay === undefined) {\n                        this.startPlaying();\n                    }\n                }\n            });\n    }\n\n    /**\n     * Observes changes to the carousel's container element size using ResizeObserver.\n     */\n    private observeElementSizeChanges(): void {\n        setTimeout(() => {\n            if (this.isLargeBreakpoint) {\n                this.checkBannerHeights();\n            } else {\n                this.resetHeight();\n            }\n        }, this.TIMEOUT_INTERVAL);\n    }\n\n    /**\n     * Normalizes the height of all banners to match the tallest banner.\n     */\n    private checkBannerHeights(): void {\n        // First, let each banner calculate its own height (like ECL's bannerInstance.setHeight(ratio))\n        this.slides().forEach((slide) => {\n            const banner = slide.banner();\n            if (banner) {\n                banner.calculateHeight();\n            }\n        });\n\n        const heightValues = this.slides().map((slide) => {\n            const el = slide.banner()?.el.nativeElement;\n            if (!el) return undefined;\n\n            const styleHeight = el.style.height;\n\n            if (styleHeight === 'auto' || styleHeight === '') {\n                return el.offsetHeight;\n            }\n\n            const height = parseInt(styleHeight, 10);\n            if (Number.isNaN(height) || height === 100) {\n                return 1;\n            }\n\n            return height;\n        });\n\n        const elementHeights = heightValues.filter((h) => h !== undefined) as number[];\n        const tallestElementHeight = Math.max(...elementHeights);\n\n        const slides = this.slides();\n        if (tallestElementHeight > 1 && elementHeights.length === slides.length) {\n            slides.forEach((slide) => {\n                const banner = slide.banner();\n                if (!banner) return;\n\n                const el = banner.el.nativeElement;\n                const bannerImage = banner.eclBannerImage;\n                const bannerVideo = banner.eclBannerVideo;\n\n                this.renderer2.setStyle(el, 'height', `${tallestElementHeight}px`);\n                this.renderer2.setStyle(el, 'aspect-ratio', 'auto');\n\n                if (bannerImage) {\n                    this.renderer2.setStyle(bannerImage.el.nativeElement, 'aspect-ratio', 'auto');\n                }\n                if (bannerVideo) {\n                    this.renderer2.setStyle(bannerVideo.el.nativeElement, 'aspect-ratio', 'auto');\n                }\n            });\n            this.resetHiddenItems();\n        }\n    }\n\n    /**\n     * Clears all explicit banner height and aspect ratio styling for smaller breakpoints.\n     */\n    private resetHeight(): void {\n        this.slides().forEach((slide) => {\n            const banner = slide.banner();\n            if (banner) {\n                const bannerImage = banner.eclBannerImage;\n                const bannerVideo = banner.eclBannerVideo;\n                this.renderer2.removeStyle(banner.el.nativeElement, 'height');\n                this.renderer2.removeStyle(banner.el.nativeElement, 'aspect-ratio');\n                if (bannerImage) {\n                    this.renderer2.removeStyle(bannerImage.el.nativeElement, 'aspect-ratio');\n                }\n                if (bannerVideo) {\n                    this.renderer2.removeStyle(bannerVideo.el.nativeElement, 'aspect-ratio');\n                }\n            }\n        });\n        this.resetHiddenItems();\n    }\n\n    /**\n     * Re-renders the content of hidden buffer items after style reset.\n     */\n    private resetHiddenItems(): void {\n        if (this.hasControls()) {\n            this.firstHiddenItem().el.nativeElement.innerHTML = this.getLastContentChild();\n            this.lastHiddenItem().el.nativeElement.innerHTML = this.getFirstContentChild();\n        }\n    }\n}\n",
+            "sourceCode": "import { BreakpointObserver } from '@angular/cdk/layout';\nimport {\n    AfterContentInit,\n    ChangeDetectorRef,\n    Component,\n    DOCUMENT,\n    ElementRef,\n    OnDestroy,\n    OnInit,\n    Renderer2,\n    afterNextRender,\n    booleanAttribute,\n    forwardRef,\n    inject,\n    numberAttribute,\n    output,\n    input,\n    viewChild,\n    contentChildren,\n    viewChildren,\n} from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective, EclRtlService, KeyCode } from '@eui/ecl/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { Subject, auditTime, fromEvent, interval, switchMap, takeUntil } from 'rxjs';\nimport { EclCarouselItemComponent } from './ecl-carousel-item.component';\nimport { EclSlideEvent } from './events/ecl-slide.event';\n\n/**\n * Component responsible for rendering a carousel (slideshow) with autoplay, keyboard navigation,\n * and support for RTL layouts. Extends the ECLBaseDirective for consistent styling and behavior.\n */\n@Component({\n    selector: 'ecl-carousel',\n    templateUrl: './ecl-carousel.component.html',\n    imports: [\n        TranslatePipe,\n        EclIconComponent,\n        EclCarouselItemComponent,\n    ],\n    host: {\n        '[attr.aria-label]': 'ariaLabel()',\n        '[attr.aria-roledescription]': '\"carousel\"',\n        '[class]': 'cssClasses',\n    },\n    styles: [\n        `\n            .ecl-carousel__slides {\n                transition-duration: 0.4s;\n            }\n        `,\n    ],\n})\nexport class EclCarouselComponent extends ECLBaseDirective implements OnInit, OnDestroy, AfterContentInit {\n    /**\n     * Aria-label for screen readers to describe the carousel.\n     */\n    readonly ariaLabel = input<string | null>('Carousel description here', { alias: 'aria-label' });\n\n    /**\n     * Determines whether the carousel should autoplay.\n     */\n    readonly isAutoplay = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n\n    /**\n     * Interval in milliseconds between automatic slide transitions.\n     */\n    readonly playInterval = input(5000, { transform: numberAttribute });\n\n    /**\n     * Event emitted when a slide change occurs.\n     */\n    readonly slide = output<EclSlideEvent>();\n\n    /**\n     * Reference to the main carousel container element.\n     */\n    readonly carouselContainerElement = viewChild<ElementRef>('carouselContainer');\n\n    /**\n     * Collection of slide components rendered inside the carousel.\n     */\n    readonly slides = contentChildren(forwardRef(() => EclCarouselItemComponent));\n\n    /**\n     * References to the navigation buttons corresponding to each slide.\n     */\n    readonly navigationButtons = viewChildren<ElementRef>('currButton');\n\n    /**\n     * Reference to the play button element.\n     */\n    readonly playButton = viewChild<ElementRef>('playButton');\n\n    /**\n     * Reference to the pause button element.\n     */\n    readonly pauseButton = viewChild<ElementRef>('pauseButton');\n\n    /**\n     * Reference to the first hidden slide item (used for focus management).\n     */\n    readonly firstHiddenItem = viewChild<EclCarouselItemComponent>('firstHiddenItem');\n\n    /**\n     * Reference to the last hidden slide item (used for focus management).\n     */\n    readonly lastHiddenItem = viewChild<EclCarouselItemComponent>('lastHiddenItem');\n\n    /**\n     * Reference to the slides container element.\n     */\n    readonly slidesContainer = viewChild<ElementRef>('slidesContainer');\n\n    /**\n     * Indicates whether autoplay is currently active.\n     */\n    public isPlaying = false;\n\n    /**\n     * Indicates whether autoplay was manually paused.\n     */\n    public isPausedForced = false;\n\n    /**\n     * Indicates whether the layout is currently in RTL mode.\n     */\n    public isRtl = false;\n\n    /**\n     * Duration of the slide transition animation (in seconds).\n     */\n    transitionDuration = 0.4;\n\n    private isMobileBreakpoint = false;\n    private isSmallTabletBreakpoint = false;\n    private isTabletBreakpoint = false;\n    private isDesktopBreakpoint = false;\n    private isLargeBreakpoint = false;\n    private playSubject = new Subject<void>();\n    private stopSubject = new Subject<void>();\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private unsubscribeListener: () => void;\n\n    /**\n     * Debounce interval (ms) used internally for timing and transitions.\n     */\n    private readonly TIMEOUT_INTERVAL = 400;\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n    private cd = inject(ChangeDetectorRef);\n    private renderer2 = inject(Renderer2);\n    private eclRtlService = inject(EclRtlService);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly window = this.document.defaultView; // Window | null\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.observeElementSizeChanges();\n            this.cd.detectChanges();\n            this.observeBreakpointChanges();\n\n            fromEvent(this.window, 'resize').pipe(\n                auditTime(50),\n                takeUntil(this.destroy$)).subscribe(() => {\n                this.transitionDuration = 0;\n                this.cd.detectChanges();\n                // Restore transition after layout settles\n                setTimeout(() => {\n                    this.transitionDuration = 0.4;\n                    this.cd.detectChanges();\n                });\n                this.observeElementSizeChanges();\n            });\n        });\n    }\n\n    /**\n     * Returns the computed CSS class list for the component.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-carousel')].join(' ').trim();\n    }\n\n    /**\n     * Angular lifecycle hook: initializes autoplay and RTL detection.\n     */\n    ngOnInit(): void {\n        this.initAutoplay();\n        this.handleRtlChangeState();\n    }\n\n    /**\n     * Angular lifecycle hook: called after content (slides) is initialized.\n     */\n    ngAfterContentInit(): void {\n        setTimeout(() => {\n            this.initializeSlider();\n        });\n    }\n\n    /**\n     * Angular lifecycle hook: cleans up subscriptions and event listeners.\n     */\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n        if (this.unsubscribeListener) {\n            this.unsubscribeListener();\n        }\n    }\n\n    /**\n     * Starts autoplay and focuses the pause button.\n     */\n    onPlayClick(): void {\n        this.startPlaying();\n        this.focusOnButton(this.pauseButton());\n    }\n\n    /**\n     * Stops autoplay and focuses the play button.\n     */\n    onPauseClick(): void {\n        this.stopPlaying();\n        this.focusOnButton(this.playButton());\n    }\n\n    /**\n     * Handles key press on the first carousel element to stop autoplay if TAB is pressed.\n     */\n    onFirstCarouselElementPress(e): void {\n        if (e.key === KeyCode.TAB) {\n            if (this.isPlaying) {\n                this.stopPlaying();\n            }\n        }\n    }\n\n    /**\n     * Handles keyboard interaction on the play button.\n     */\n    onPlayKeyboardPress(e): void {\n        if (e.key === KeyCode.TAB && e.shiftKey) {\n            return;\n        }\n        if ([KeyCode.TAB].includes(e.key)) {\n            if (this.isPlaying) {\n                this.focusOnButton(this.navigationButtons().at(this.getCurrentSlideIndex()));\n                this.stopPlaying();\n            } else {\n                this.focusOnButton(this.navigationButtons().at(this.getCurrentSlideIndex()));\n            }\n            e.preventDefault();\n        } else if (!this.isPlaying && [KeyCode.ARROW_RIGHT].includes(e.key)) {\n            this.focusOnButton(this.navigationButtons().at(this.getCurrentSlideIndex()));\n        }\n    }\n\n    /**\n     * Handles keyboard navigation for the navigation buttons.\n     */\n    onNavBtnKeyboardPress(e: KeyboardEvent, index: number): void {\n        if (e.key === KeyCode.ARROW_RIGHT) {\n            this.onNavigationButtonArrowRight(e);\n        } else if (e.key === KeyCode.ARROW_LEFT) {\n            this.onNavigationButtonArrowLeft(e, index);\n        }\n        return;\n    }\n\n    /**\n     * Checks whether a given button is currently visible (not hidden via style).\n     */\n    isButtonVisible(button: ElementRef): boolean {\n        if (!button) {\n            return false;\n        }\n        return button.nativeElement.style.display === '';\n    }\n\n    /**\n     * Sets focus on the specified button.\n     */\n    focusOnButton(button: ElementRef): void {\n        if (!button) {\n            return;\n        }\n        button.nativeElement.focus();\n    }\n\n    /**\n     * Handles user interaction with a slide control button.\n     */\n    onSlideControlClick(slide: EclCarouselItemComponent): void {\n        this.stopPlaying();\n        this.activateSlide(slide, true);\n    }\n\n    /**\n     * Navigates to the next slide and stops autoplay.\n     */\n    onNextSlideClick(): void {\n        this.stopPlaying();\n        this.goToNextSlide(true);\n    }\n\n    /**\n     * Navigates to the previous slide and stops autoplay.\n     */\n    onPreviousSlideClick(): void {\n        this.stopPlaying();\n        this.goToPreviousSlide(true);\n    }\n\n    /**\n     * Pauses autoplay on mouse hover.\n     */\n    onSlideHover(): void {\n        this.pausePlaying();\n    }\n\n    /**\n     * Resumes autoplay on mouse leave, if not manually paused.\n     */\n    onSlideHoverout(): void {\n        if (!this.isStopButtonPressed()) {\n            this.resumePlaying();\n        }\n    }\n\n    /**\n     * Returns whether the stop button (pause) has been pressed by the user.\n     */\n    public isStopButtonPressed(): boolean {\n        return this.isPausedForced;\n    }\n\n    /**\n     * Returns whether the carousel has padding applied (e.g., on desktop breakpoint).\n     */\n    public isPadded(): boolean {\n        return this.isDesktopBreakpoint;\n    }\n\n    /**\n     * Checks whether there are enough slides to render controls.\n     */\n    public hasControls(): boolean {\n        return this.getSlidesCount() > 1;\n    }\n\n    /**\n     * Retrieves the current active slide index.\n     * Corrects index for internal structure with hidden buffer slides.\n     */\n    public getCurrentSlideIndex(): number {\n        let currentIndex: number;\n\n        this.getAllSlidesArray().forEach((item, idx) => {\n            if (item && item.isCurrent()) {\n                currentIndex = idx;\n            }\n        });\n        if (currentIndex === this.getAllSlidesCount() - 1) {\n            return 0;\n        } else if (currentIndex === 0) {\n            return this.getSlidesCount() - 1;\n        }\n        return currentIndex - 1;\n    }\n\n    /**\n     * Computes the left offset to shift the slides container.\n     */\n    public getCarouselSlidesOffsetLeft(): number {\n        return -1 * this.carouselContainerElement()?.nativeElement.offsetWidth * this.getCurrentItemIndex();\n    }\n\n    /**\n     * Computes the right offset to shift the slides container (same logic as left in RTL).\n     */\n    public getCarouselSlidesOffsetRight(): number {\n        return -1 * this.carouselContainerElement()?.nativeElement.offsetWidth * this.getCurrentItemIndex();\n    }\n\n    /**\n     * Subscribes to RTL layout state changes to adapt carousel behavior.\n     */\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            this.isRtl = rtlState;\n        });\n    }\n\n    /**\n     * Initializes autoplay logic using RxJS intervals and subject triggers.\n     */\n    private initAutoplay(): void {\n        const start$ = this.playSubject.asObservable();\n        const stop$ = this.stopSubject.asObservable();\n\n        start$\n            .pipe(\n                switchMap(() => interval(this.playInterval()).pipe(takeUntil(stop$))),\n                takeUntil(this.destroy$),\n            )\n            .subscribe(() => {\n                this.goToNextSlide(true);\n            });\n    }\n\n    /**\n     * Returns the index of the currently active slide item.\n     */\n    private getCurrentItemIndex(): number {\n        let result = 0;\n        this.getAllSlidesArray().forEach((item, index) => {\n            if (item && item.isCurrent()) {\n                result = index;\n            }\n        });\n        return result;\n    }\n\n    /**\n     * Initializes slides, hidden buffer items, and sets default active slide.\n     */\n    private initializeSlider(): void {\n        this.slides().forEach((item, idx) => {\n            this.initSlide(item, idx);\n        });\n\n        if (this.hasControls()) {\n            this.initHiddenItems();\n            if (this.isNoSlideSelected()) {\n                this.activateSlide(this.slides().at(0)!, false);\n            }\n        }\n    }\n\n    /**\n     * Initializes hidden first and last slide clones used for infinite scroll illusion.\n     */\n    private initHiddenItems(): void {\n        this.firstHiddenItem().el.nativeElement.innerHTML = this.getLastContentChild();\n        this.firstHiddenItem().isCurrent.set(false);\n        this.lastHiddenItem().el.nativeElement.innerHTML = this.getFirstContentChild();\n        this.lastHiddenItem().isCurrent.set(false);\n        this.unsubscribeListener = this.renderer2.listen(this.slidesContainer().nativeElement, 'transitionend', () => this.checkIndex());\n    }\n\n    /**\n     * Verifies current index and resets to actual slide if hidden clone is reached.\n     */\n    private checkIndex(): void {\n        if (this.getCurrentItemIndex() === this.getAllSlidesCount() - 1) {\n            const item = this.slides().at(0)!;\n            this.activateSlide(item, false);\n        } else if (this.getCurrentItemIndex() === 0) {\n            const item = this.slides().at(-1)!;\n            this.activateSlide(item, false);\n        }\n    }\n\n    /**\n     * Returns the inner HTML of the last real slide (used for buffer item).\n     */\n    private getLastContentChild(): string {\n        return this.getSlidesCount() > 0 ? this.slides().at(this.getSlidesCount() - 1).el.nativeElement.innerHTML : '';\n    }\n\n    /**\n     * Returns the inner HTML of the first real slide (used for buffer item).\n     */\n    private getFirstContentChild(): string {\n        return this.getSlidesCount() > 0 ? this.slides().at(0).el.nativeElement.innerHTML : '';\n    }\n\n    /**\n     * Sets up a slide with index and ARIA label.\n     */\n    private initSlide(item: EclCarouselItemComponent, idx: number): void {\n        item.index.set(idx);\n        item.ariaLabel.set(`slide ${idx + 1} of ${this.getSlidesCount()}`);\n        const banner = item.banner();\n        if (banner) {\n            banner.skipHeightManagement = true;\n        }\n    }\n\n    /**\n     * Activates the next slide, with option to loop.\n     */\n    private goToNextSlide(isLoop: boolean): void {\n        this.activateSlide(this.getNextSlide(isLoop), true);\n    }\n\n    /**\n     * Activates the previous slide, with option to loop.\n     */\n    private goToPreviousSlide(isLoop: boolean): void {\n        this.activateSlide(this.getPreviousSlide(isLoop), true);\n    }\n\n    /**\n     * Activates a specific slide and triggers slide change event if needed.\n     */\n    private activateSlide(slideItem: EclCarouselItemComponent, withTransition: boolean): void {\n        if (withTransition) {\n            this.transitionDuration = 0.4;\n        } else {\n            this.transitionDuration = 0;\n        }\n        if (slideItem) {\n            this.getAllSlidesArray().forEach((item) => {\n                item.isCurrent.set(false);\n            });\n            slideItem.isCurrent.set(true);\n        }\n        this.cd.detectChanges();\n        if (withTransition) {\n            this.slide.emit(new EclSlideEvent(this.slides().at(this.getCurrentSlideIndex())));\n        }\n    }\n\n    /**\n     * Checks if the currently focused button is the last in the list.\n     */\n    private isLastButton(index): boolean {\n        const buttonsList = this.navigationButtons();\n        return index + 1 >= buttonsList.length;\n    }\n\n    /**\n     * Checks if the currently focused button is the first in the list.\n     */\n    private isFirstButton(index): boolean {\n        return index <= 0;\n    }\n\n    /**\n     * Starts autoplay mode and updates state.\n     */\n    private startPlaying(): void {\n        this.isPlaying = true;\n        this.cd.detectChanges();\n        this.isPausedForced = false;\n        this.playSubject.next();\n    }\n\n    /**\n     * Stops autoplay mode and updates state.\n     */\n    private stopPlaying(): void {\n        this.isPlaying = false;\n        this.cd.detectChanges();\n        this.isPausedForced = true;\n        this.stopSubject.next();\n    }\n\n    /**\n     * Temporarily pauses autoplay (e.g. on mouse hover).\n     */\n    private pausePlaying(): void {\n        this.isPlaying = false;\n        this.cd.detectChanges();\n        this.stopSubject.next();\n    }\n\n    /**\n     * Resumes autoplay after being paused.\n     */\n    private resumePlaying(): void {\n        this.isPlaying = true;\n        this.cd.detectChanges();\n        this.playSubject.next();\n    }\n\n    /**\n     * Retrieves the next slide based on the current index and loop setting.\n     */\n    private getNextSlide(isLoop: boolean): EclCarouselItemComponent {\n        const slidesCount = this.getSlidesCount();\n        const currentIndex = this.getCurrentSlideIndex();\n\n        if (currentIndex >= slidesCount - 1) {\n            if (isLoop) {\n                return this.getAllSlidesArray()[this.getAllSlidesCount() - 1];\n            } else {\n                return this.slides().at(-1)!;\n            }\n        } else {\n            return this.slides().at(currentIndex + 1);\n        }\n    }\n\n    /**\n     * Returns all slides, including the hidden buffer items.\n     */\n    private getAllSlidesArray(): EclCarouselItemComponent[] {\n        return [...[this.firstHiddenItem()], ...this.slides(), ...[this.lastHiddenItem()]];\n    }\n\n    /**\n     * Retrieves the previous slide based on the current index and loop setting.\n     */\n    private getPreviousSlide(isLoop: boolean): EclCarouselItemComponent {\n        const currentIndex = this.getCurrentSlideIndex();\n\n        if (currentIndex <= 0) {\n            if (isLoop) {\n                return this.getAllSlidesArray()[0];\n            } else {\n                return this.slides().at(0)!;\n            }\n        } else {\n            return this.slides().at(currentIndex - 1);\n        }\n    }\n\n    /**\n     * Returns the number of actual visible slides (excluding hidden buffer).\n     */\n    private getSlidesCount(): number {\n        return this.slides().length;\n    }\n\n    /**\n     * Returns total number of slides, including buffer (hidden) items.\n     */\n    private getAllSlidesCount(): number {\n        if (this.hasControls()) {\n            return this.slides().length + 2;\n        } else {\n            return this.slides().length;\n        }\n    }\n\n    /**\n     * Determines whether no slide is currently marked as active.\n     */\n    private isNoSlideSelected(): boolean {\n        return !this.slides().some((item) => item.isCurrent());\n    }\n\n    /**\n     * Handles right arrow key navigation for buttons.\n     */\n    private onNavigationButtonArrowRight(e: KeyboardEvent): void {\n        setTimeout(() => {\n            this.goToNextSlide(false);\n            const button: ElementRef = this.navigationButtons().at(this.getCurrentSlideIndex());\n            this.focusOnButton(button);\n        }, this.TIMEOUT_INTERVAL);\n        e.preventDefault();\n    }\n\n    /**\n     * Handles left arrow key navigation for buttons.\n     */\n    private onNavigationButtonArrowLeft(e: KeyboardEvent, index: number): void {\n        if (this.isFirstButton(index)) {\n            const playButton = this.playButton();\n            if (playButton) {\n                this.focusOnButton(playButton);\n            }\n            const pauseButton = this.pauseButton();\n            if (pauseButton) {\n                this.focusOnButton(pauseButton);\n            }\n        } else {\n            setTimeout(() => {\n                this.goToPreviousSlide(false);\n                const button: ElementRef = this.navigationButtons().at(this.getCurrentSlideIndex());\n                this.focusOnButton(button);\n            }, this.TIMEOUT_INTERVAL);\n            e.preventDefault();\n        }\n    }\n\n    /**\n     * Observes screen breakpoint changes to adjust autoplay and layout behavior.\n     */\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe([\n                '(max-width: 768px)',\n                '(max-width: 997px)',\n                '(min-width: 998px)',\n                '(min-width: 1140px)',\n                '(min-width: 1140px) and (max-width: 1260px)',\n            ])\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((result) => {\n                this.isMobileBreakpoint = result.breakpoints['(max-width: 768px)'];\n                this.isSmallTabletBreakpoint = result.breakpoints['(max-width: 997px)'];\n                this.isTabletBreakpoint = result.breakpoints['(min-width: 998px)'];\n                this.isLargeBreakpoint = result.breakpoints['(min-width: 1140px)'];\n                this.isDesktopBreakpoint = result.breakpoints['(min-width: 1140px) and (max-width: 1260px)'];\n                const isAutoplay = this.isAutoplay();\n                if (this.isMobileBreakpoint && !isAutoplay) {\n                    this.stopPlaying();\n                }\n\n                if (this.isTabletBreakpoint) {\n                    if (isAutoplay || isAutoplay === undefined) {\n                        this.startPlaying();\n                    }\n                }\n            });\n    }\n\n    /**\n     * Observes changes to the carousel's container element size using ResizeObserver.\n     */\n    private observeElementSizeChanges(): void {\n        setTimeout(() => {\n            if (this.isLargeBreakpoint) {\n                this.checkBannerHeights();\n            } else {\n                this.resetHeight();\n            }\n        }, this.TIMEOUT_INTERVAL);\n    }\n\n    /**\n     * Normalizes the height of all banners to match the tallest banner.\n     */\n    private checkBannerHeights(): void {\n        // First, let each banner calculate its own height (like ECL's bannerInstance.setHeight(ratio))\n        this.slides().forEach((slide) => {\n            const banner = slide.banner();\n            if (banner) {\n                banner.calculateHeight();\n            }\n        });\n\n        const heightValues = this.slides().map((slide) => {\n            const el = slide.banner()?.el.nativeElement;\n            if (!el) return undefined;\n\n            const styleHeight = el.style.height;\n\n            if (styleHeight === 'auto' || styleHeight === '') {\n                return el.offsetHeight;\n            }\n\n            const height = parseInt(styleHeight, 10);\n            if (Number.isNaN(height) || height === 100) {\n                return 1;\n            }\n\n            return height;\n        });\n\n        const elementHeights = heightValues.filter((h) => h !== undefined) as number[];\n        const tallestElementHeight = Math.max(...elementHeights);\n\n        const slides = this.slides();\n        if (tallestElementHeight > 1 && elementHeights.length === slides.length) {\n            slides.forEach((slide) => {\n                const banner = slide.banner();\n                if (!banner) return;\n\n                const el = banner.el.nativeElement;\n                const bannerImage = banner.eclBannerImage;\n                const bannerVideo = banner.eclBannerVideo;\n\n                this.renderer2.setStyle(el, 'height', `${tallestElementHeight}px`);\n                this.renderer2.setStyle(el, 'aspect-ratio', 'auto');\n\n                if (bannerImage) {\n                    this.renderer2.setStyle(bannerImage.el.nativeElement, 'aspect-ratio', 'auto');\n                }\n                if (bannerVideo) {\n                    this.renderer2.setStyle(bannerVideo.el.nativeElement, 'aspect-ratio', 'auto');\n                }\n            });\n            this.resetHiddenItems();\n        }\n    }\n\n    /**\n     * Clears all explicit banner height and aspect ratio styling for smaller breakpoints.\n     */\n    private resetHeight(): void {\n        this.slides().forEach((slide) => {\n            const banner = slide.banner();\n            if (banner) {\n                const bannerImage = banner.eclBannerImage;\n                const bannerVideo = banner.eclBannerVideo;\n                this.renderer2.removeStyle(banner.el.nativeElement, 'height');\n                this.renderer2.removeStyle(banner.el.nativeElement, 'aspect-ratio');\n                if (bannerImage) {\n                    this.renderer2.removeStyle(bannerImage.el.nativeElement, 'aspect-ratio');\n                }\n                if (bannerVideo) {\n                    this.renderer2.removeStyle(bannerVideo.el.nativeElement, 'aspect-ratio');\n                }\n            }\n        });\n        this.resetHiddenItems();\n    }\n\n    /**\n     * Re-renders the content of hidden buffer items after style reset.\n     */\n    private resetHiddenItems(): void {\n        if (this.hasControls()) {\n            this.firstHiddenItem().el.nativeElement.innerHTML = this.getLastContentChild();\n            this.lastHiddenItem().el.nativeElement.innerHTML = this.getFirstContentChild();\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            .ecl-carousel__slides {\n                transition-duration: 0.4s;\n            }\n        \n",
@@ -51073,7 +50990,7 @@
         },
         {
             "name": "EclCarouselItemComponent",
-            "id": "component-EclCarouselItemComponent-5a402575e4c1780710542854b77c0d13fbeb658e9c1c3bffc13e1ede7d43bcc714d7ff2b04e7d6002ce8760ed9125406de24e818ca97f63f7e285d87765150c3",
+            "id": "component-EclCarouselItemComponent-61598d42368be99e298cb595f5e141f5ff67636b905bbe7f98c8cdea6654af12f62fc5556898714c15edf566542d32247cd8d004ecc2cd420f0279fc1f89e4d5",
             "file": "packages/ecl/components/ecl-carousel/ecl-carousel-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -51094,28 +51011,37 @@
             "hostDirectives": [],
             "inputsClass": [
                 {
-                    "coverageIgnore": false,
                     "name": "id",
+                    "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nThe unique identifier of the slide.\n",
-                    "description": "<p>The unique identifier of the slide.</p>\n",
-                    "line": 52,
                     "type": "string",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>The unique identifier of the slide.</p>\n",
+                    "line": 54,
+                    "rawdescription": "\n\nThe unique identifier of the slide.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
-                    "coverageIgnore": false,
-                    "required": false,
                     "name": "isCurrent",
+                    "coverageIgnore": false,
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nIndicates whether this slide is currently active/visible.\nAutomatically coerced to a boolean value.\n",
-                    "description": "<p>Indicates whether this slide is currently active/visible.\nAutomatically coerced to a boolean value.</p>\n",
-                    "line": 58,
                     "type": "boolean",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Input controlling whether this slide starts as the active/visible one.\nAutomatically coerced to a boolean value.</p>\n",
+                    "line": 60,
+                    "rawdescription": "\n\nInput controlling whether this slide starts as the active/visible one.\nAutomatically coerced to a boolean value.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
                     "name": "class",
@@ -51186,7 +51112,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Emits an event when the slide is clicked.</p>\n",
-                    "line": 63,
+                    "line": 72,
                     "rawdescription": "\n\nEmits an event when the slide is clicked.\n",
                     "modifierKind": [
                         148
@@ -51218,14 +51144,18 @@
                 {
                     "name": "ariaLabel",
                     "coverageIgnore": false,
+                    "defaultValue": "signal<string | undefined>(undefined)",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The aria-label for the slide, assigned dynamically by the carousel.</p>\n",
-                    "line": 47,
-                    "rawdescription": "\n\nThe aria-label for the slide, assigned dynamically by the carousel.\n"
+                    "line": 49,
+                    "rawdescription": "\n\nThe aria-label for the slide, assigned dynamically by the carousel.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
                     "name": "banner",
@@ -51237,7 +51167,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Optionally captures a banner component projected into the slide.</p>\n",
-                    "line": 68,
+                    "line": 77,
                     "rawdescription": "\n\nOptionally captures a banner component projected into the slide.\n",
                     "modifierKind": [
                         148
@@ -51253,22 +51183,39 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 42,
+                    "line": 44,
                     "rawdescription": "\n"
                 },
                 {
                     "name": "index",
                     "coverageIgnore": false,
+                    "defaultValue": "signal<number | undefined>(undefined)",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "number",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Internal slide index, assigned dynamically by the carousel.</p>\n",
-                    "line": 73,
+                    "line": 82,
                     "rawdescription": "\n\nInternal slide index, assigned dynamically by the carousel.\n",
                     "modifierKind": [
-                        125
+                        148
+                    ]
+                },
+                {
+                    "name": "isCurrent",
+                    "coverageIgnore": false,
+                    "defaultValue": "linkedSignal(() => this.isCurrentInput())",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Indicates whether this slide is currently active/visible.\nSeeded from the <code>isCurrent</code> input but can be updated imperatively by the\nparent carousel as the user navigates between slides.</p>\n",
+                    "line": 67,
+                    "rawdescription": "\n\nIndicates whether this slide is currently active/visible.\nSeeded from the `isCurrent` input but can be updated imperatively by the\nparent carousel as the user navigates between slides.\n",
+                    "modifierKind": [
+                        148
                     ]
                 }
             ],
@@ -51280,20 +51227,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 86,
+                    "line": 94,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles click events on the slide and emits a slideClick event.\n",
-                    "description": "<p>Handles click events on the slide and emits a slideClick event.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'click'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "description": "<p>Handles click events on the slide and emits a slideClick event.</p>\n"
                 },
                 {
                     "name": "getCssClasses",
@@ -51338,32 +51276,20 @@
             "deprecated": false,
             "deprecationMessage": "",
             "hostBindings": [],
-            "hostListeners": [
-                {
-                    "coverageIgnore": false,
-                    "name": "click",
-                    "args": [],
-                    "argsDecorator": [],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nHandles click events on the slide and emits a slideClick event.\n",
-                    "description": "<p>Handles click events on the slide and emits a slideClick event.</p>\n",
-                    "line": 86
-                }
-            ],
+            "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "<p>Represents a single item (slide) within the ECL Carousel.\nEach slide can optionally include an EclBannerComponent and supports click events.</p>\n",
             "rawdescription": "\n\nRepresents a single item (slide) within the ECL Carousel.\nEach slide can optionally include an EclBannerComponent and supports click events.\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    ElementRef,\n    HostListener,\n    Input,\n    booleanAttribute,\n    forwardRef,\n    inject,\n    output,\n    contentChild,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclBannerComponent } from '@eui/ecl/components/ecl-banner';\nimport { EclSlideEvent } from './events/ecl-slide.event';\nimport { EclCarouselItem } from './models/ecl-carousel-item.model';\n\n/**\n * Represents a single item (slide) within the ECL Carousel.\n * Each slide can optionally include an EclBannerComponent and supports click events.\n */\n@Component({\n    selector: 'ecl-carousel-item',\n    templateUrl: './ecl-carousel-item.component.html',\n    host: {\n        role: 'tabpanel',\n        '[attr.aria-label]': 'ariaLabel',\n        '[attr.aria-roledescription]': '\"slide\"',\n        '[attr.inert]': '!isCurrent || undefined',\n        '[class]': 'cssClasses',\n    },\n    styles: [\n        `\n            /* TODO: remove by implementing full ECL specs */\n            :host:before {\n                left: 0 !important;\n                display: none;\n            }\n        `,\n    ],\n})\nexport class EclCarouselItemComponent extends ECLBaseDirective implements EclCarouselItem {\n    el = inject(ElementRef);\n\n    /**\n     * The aria-label for the slide, assigned dynamically by the carousel.\n     */\n    ariaLabel: string;\n\n    /**\n     * The unique identifier of the slide.\n     */\n    @Input() id: string;\n\n    /**\n     * Indicates whether this slide is currently active/visible.\n     * Automatically coerced to a boolean value.\n     */\n    @Input({ transform: booleanAttribute }) isCurrent = false;\n\n    /**\n     * Emits an event when the slide is clicked.\n     */\n    readonly slideClick = output<EclSlideEvent>();\n\n    /**\n     * Optionally captures a banner component projected into the slide.\n     */\n    readonly banner = contentChild(forwardRef(() => EclBannerComponent));\n\n    /**\n     * Internal slide index, assigned dynamically by the carousel.\n     */\n    public index: number;\n\n    /**\n     * Computes the slide's CSS class.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-carousel__slide')].join(' ').trim();\n    }\n\n    /**\n     * Handles click events on the slide and emits a slideClick event.\n     */\n    @HostListener('click')\n    onSlideClick(): void {\n        this.slideClick.emit(new EclSlideEvent(this));\n    }\n}\n",
+            "sourceCode": "import {\n    Component,\n    ElementRef,\n    booleanAttribute,\n    forwardRef,\n    inject,\n    input,\n    linkedSignal,\n    output,\n    signal,\n    contentChild,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclBannerComponent } from '@eui/ecl/components/ecl-banner';\nimport { EclSlideEvent } from './events/ecl-slide.event';\nimport { EclCarouselItem } from './models/ecl-carousel-item.model';\n\n/**\n * Represents a single item (slide) within the ECL Carousel.\n * Each slide can optionally include an EclBannerComponent and supports click events.\n */\n@Component({\n    selector: 'ecl-carousel-item',\n    templateUrl: './ecl-carousel-item.component.html',\n    host: {\n        role: 'tabpanel',\n        '[attr.aria-label]': 'ariaLabel()',\n        '[attr.aria-roledescription]': '\"slide\"',\n        '[attr.inert]': '!isCurrent() || undefined',\n        '[class]': 'cssClasses',\n        '(click)': 'onSlideClick()',\n    },\n    styles: [\n        `\n            /* TODO: remove by implementing full ECL specs */\n            :host:before {\n                left: 0 !important;\n                display: none;\n            }\n        `,\n    ],\n})\nexport class EclCarouselItemComponent extends ECLBaseDirective implements EclCarouselItem {\n    el = inject(ElementRef);\n\n    /**\n     * The aria-label for the slide, assigned dynamically by the carousel.\n     */\n    readonly ariaLabel = signal<string | undefined>(undefined);\n\n    /**\n     * The unique identifier of the slide.\n     */\n    readonly id = input<string>();\n\n    /**\n     * Input controlling whether this slide starts as the active/visible one.\n     * Automatically coerced to a boolean value.\n     */\n    readonly isCurrentInput = input(false, { alias: 'isCurrent', transform: booleanAttribute });\n\n    /**\n     * Indicates whether this slide is currently active/visible.\n     * Seeded from the `isCurrent` input but can be updated imperatively by the\n     * parent carousel as the user navigates between slides.\n     */\n    readonly isCurrent = linkedSignal(() => this.isCurrentInput());\n\n    /**\n     * Emits an event when the slide is clicked.\n     */\n    readonly slideClick = output<EclSlideEvent>();\n\n    /**\n     * Optionally captures a banner component projected into the slide.\n     */\n    readonly banner = contentChild(forwardRef(() => EclBannerComponent));\n\n    /**\n     * Internal slide index, assigned dynamically by the carousel.\n     */\n    readonly index = signal<number | undefined>(undefined);\n\n    /**\n     * Computes the slide's CSS class.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-carousel__slide')].join(' ').trim();\n    }\n\n    /**\n     * Handles click events on the slide and emits a slideClick event.\n     */\n    onSlideClick(): void {\n        this.slideClick.emit(new EclSlideEvent(this));\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            /* TODO: remove by implementing full ECL specs */\n            :host:before {\n                left: 0 !important;\n                display: none;\n            }\n        \n",
             "jsdoctags": [
                 {
-                    "pos": 419,
-                    "end": 573,
+                    "pos": 431,
+                    "end": 585,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -51385,7 +51311,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 78,
+                        "line": 87,
                         "rawdescription": "\n\nComputes the slide's CSS class.\n",
                         "description": "<p>Computes the slide&#39;s CSS class.</p>\n"
                     }
@@ -51414,7 +51340,7 @@
         },
         {
             "name": "EclCategoryFilterComponent",
-            "id": "component-EclCategoryFilterComponent-ca0a9a64af386ecfbf3280aae381be951ef493a43f291d38ee699091c309c77aac670db9e4f997d2c6ce8393ba2363c39ce23d978e457d8884b8c95093cdfa6a",
+            "id": "component-EclCategoryFilterComponent-bc641fe099a962ae0cd9f4ff1085d7504897879f32fc6a502be3ab3a061037b06d0cacccb1d8af12dc39b0eb514cbe1747d637507161ef7da6be8a580a8ab4a9",
             "file": "packages/ecl/components/ecl-category-filter/ecl-category-filter/ecl-category-filter.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -51435,17 +51361,21 @@
             "hostDirectives": [],
             "inputsClass": [
                 {
-                    "coverageIgnore": false,
                     "name": "aria-label",
-                    "actualName": "ariaLabel",
+                    "coverageIgnore": false,
                     "defaultValue": "'Category filter'",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nAria-label for the navigation role. Defaults to \"Category filter\".\n",
+                    "type": "string | null",
+                    "indexKey": "",
+                    "optional": false,
                     "description": "<p>Aria-label for the navigation role. Defaults to &quot;Category filter&quot;.</p>\n",
                     "line": 45,
-                    "type": "string | null",
-                    "decorators": []
+                    "rawdescription": "\n\nAria-label for the navigation role. Defaults to \"Category filter\".\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
                     "name": "currentItemId",
@@ -51642,7 +51572,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    forwardRef,\n    Input,\n    OnDestroy,\n    input,\n    contentChild,\n    contentChildren,\n    effect,\n    untracked,\n} from '@angular/core';\nimport { Subject, takeUntil } from 'rxjs';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclCategoryFilterItem } from '../models/ecl-category-filter-item.model';\nimport { EclCategoryFilterItemSelectEvent } from '../events/ecl-category-filter-item-select.event';\nimport { EclCategoryFilterItemComponent } from '../ecl-category-filter-list';\nimport { EclCategoryFilterListComponent } from '../ecl-category-filter-list';\n\n@Component({\n    selector: 'ecl-category-filter',\n    templateUrl: './ecl-category-filter.component.html',\n    host: {\n        'class': 'ecl-category-filter',\n        'role': 'navigation',\n        '[attr.aria-label]': 'ariaLabel',\n    },\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclCategoryFilterComponent extends ECLBaseDirective implements OnDestroy {\n    /**\n     * ID of the currently selected item. When provided, the item with the matching ID\n     * will be marked as current and automatically expanded on initialization.\n     */\n    readonly currentItemId = input<string>(undefined);\n\n    /**\n     * Aria-label for the navigation role. Defaults to \"Category filter\".\n     */\n    @Input('aria-label') ariaLabel: string | null = 'Category filter';\n\n    readonly eclCategoryList = contentChild(forwardRef(() => EclCategoryFilterListComponent));\n\n    /**\n     * Signal-based query for all descendant category filter items.\n     */\n    readonly eclCategoryFilterItemsAll = contentChildren<EclCategoryFilterItemComponent>(\n        forwardRef(() => EclCategoryFilterItemComponent), { descendants: true }\n    );\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private readonly initializedItems = new WeakSet<EclCategoryFilterItemComponent>();\n\n    constructor() {\n        super();\n\n        // Reacts to item changes and performs all setup:\n        // - subscribes to itemSelect events (guarded by WeakSet)\n        // - assigns IDs where missing\n        // - propagates levels through the tree\n        // - handles preselection of currentItemId\n        effect(() => {\n            const items = this.eclCategoryFilterItemsAll();\n            untracked(() => {\n                for (const item of items) {\n                    this.connectCategoryfilterItemEventsOnce(item);\n                }\n                this.setIds(items);\n                this.eclCategoryList().updateChildrenItemsLevel(0);\n\n                if (this.currentItemId() !== undefined) {\n                    this.setPreselectedCurrentItem();\n                }\n            });\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    private connectCategoryfilterItemEventsOnce(item: EclCategoryFilterItemComponent): void {\n        if (this.initializedItems.has(item)) return;\n\n        this.initializedItems.add(item);\n        this.connectCategoryfilterItemEvents(item);\n    }\n\n    private setIds(items: readonly EclCategoryFilterItemComponent[]): void {\n        for (const item of items) {\n            if (!item.id) {\n                item.id = crypto.randomUUID();\n            }\n            const eclCategoryList = item.eclCategoryList();\n            if (eclCategoryList && !eclCategoryList.id) {\n                eclCategoryList.id = `${item.id}-list`;\n            }\n        }\n    }\n\n    private connectCategoryfilterItemEvents(item: EclCategoryFilterItemComponent): void {\n        item.itemSelect.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onItemSelected(evt);\n        });\n    }\n\n    private onItemSelected(evt: EclCategoryFilterItemSelectEvent): void {\n        if (evt.item.isRootItem) {\n            this.closeAllItemsButOne(evt.item);\n        } else {\n            this.deselectAllItemsButOne(evt.item);\n        }\n    }\n\n    private setPreselectedCurrentItem(): void {\n        const items = this.eclCategoryFilterItemsAll();\n        const currItem = items.find((item) => item.id === this.currentItemId());\n        if (currItem) {\n            currItem.isCurrent = true;\n            if (currItem.hasChildren) {\n                currItem.isExpanded = true;\n            }\n            this.expandParents(currItem);\n        }\n    }\n\n    private expandParents(currItem: EclCategoryFilterItem): void {\n        if (currItem.isRootItem) {\n            return;\n        }\n        const items = this.eclCategoryFilterItemsAll();\n        const parent = items.find(\n            (item) => item.hasChildren && item.children.find((child) => child.id === currItem.id) !== undefined,\n        );\n        if (parent) {\n            parent.isExpanded = true;\n            this.expandParents(parent);\n        }\n    }\n\n    private closeAllItemsButOne(item: EclCategoryFilterItem): void {\n        const items = this.eclCategoryFilterItemsAll();\n        for (const it of items) {\n            if (it !== item) {\n                it.isExpanded = false;\n                it.isCurrent = false;\n            }\n        }\n    }\n\n    private deselectAllItemsButOne(item: EclCategoryFilterItem): void {\n        const items = this.eclCategoryFilterItemsAll();\n        for (const it of items) {\n            if (it !== item) {\n                it.isCurrent = false;\n            }\n        }\n    }\n}\n",
+            "sourceCode": "import {\n    Component,\n    forwardRef,\n    OnDestroy,\n    input,\n    contentChild,\n    contentChildren,\n    effect,\n    untracked,\n} from '@angular/core';\nimport { outputToObservable } from '@angular/core/rxjs-interop';\nimport { Subject, takeUntil } from 'rxjs';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclCategoryFilterItem } from '../models/ecl-category-filter-item.model';\nimport { EclCategoryFilterItemSelectEvent } from '../events/ecl-category-filter-item-select.event';\nimport { EclCategoryFilterItemComponent } from '../ecl-category-filter-list';\nimport { EclCategoryFilterListComponent } from '../ecl-category-filter-list';\n\n@Component({\n    selector: 'ecl-category-filter',\n    templateUrl: './ecl-category-filter.component.html',\n    host: {\n        'class': 'ecl-category-filter',\n        'role': 'navigation',\n        '[attr.aria-label]': 'ariaLabel()',\n    },\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclCategoryFilterComponent extends ECLBaseDirective implements OnDestroy {\n    /**\n     * ID of the currently selected item. When provided, the item with the matching ID\n     * will be marked as current and automatically expanded on initialization.\n     */\n    readonly currentItemId = input<string>(undefined);\n\n    /**\n     * Aria-label for the navigation role. Defaults to \"Category filter\".\n     */\n    readonly ariaLabel = input<string | null>('Category filter', { alias: 'aria-label' });\n\n    readonly eclCategoryList = contentChild(forwardRef(() => EclCategoryFilterListComponent));\n\n    /**\n     * Signal-based query for all descendant category filter items.\n     */\n    readonly eclCategoryFilterItemsAll = contentChildren<EclCategoryFilterItemComponent>(\n        forwardRef(() => EclCategoryFilterItemComponent), { descendants: true }\n    );\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private readonly initializedItems = new WeakSet<EclCategoryFilterItemComponent>();\n\n    constructor() {\n        super();\n\n        // Reacts to item changes and performs all setup:\n        // - subscribes to itemSelect events (guarded by WeakSet)\n        // - assigns IDs where missing\n        // - propagates levels through the tree\n        // - handles preselection of currentItemId\n        effect(() => {\n            const items = this.eclCategoryFilterItemsAll();\n            untracked(() => {\n                for (const item of items) {\n                    this.connectCategoryfilterItemEventsOnce(item);\n                }\n                this.setIds(items);\n                this.eclCategoryList().updateChildrenItemsLevel(0);\n\n                if (this.currentItemId() !== undefined) {\n                    this.setPreselectedCurrentItem();\n                }\n            });\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    private connectCategoryfilterItemEventsOnce(item: EclCategoryFilterItemComponent): void {\n        if (this.initializedItems.has(item)) return;\n\n        this.initializedItems.add(item);\n        this.connectCategoryfilterItemEvents(item);\n    }\n\n    private setIds(items: readonly EclCategoryFilterItemComponent[]): void {\n        for (const item of items) {\n            if (!item.id()) {\n                item.setFallbackId(crypto.randomUUID());\n            }\n            const eclCategoryList = item.eclCategoryList();\n            if (eclCategoryList && !eclCategoryList.id()) {\n                eclCategoryList.id.set(`${item.id()}-list`);\n            }\n        }\n    }\n\n    private connectCategoryfilterItemEvents(item: EclCategoryFilterItemComponent): void {\n        outputToObservable(item.itemSelect).pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.onItemSelected(evt);\n        });\n    }\n\n    private onItemSelected(evt: EclCategoryFilterItemSelectEvent): void {\n        if (evt.item.isRootItem) {\n            this.closeAllItemsButOne(evt.item);\n        } else {\n            this.deselectAllItemsButOne(evt.item);\n        }\n    }\n\n    private setPreselectedCurrentItem(): void {\n        const items = this.eclCategoryFilterItemsAll();\n        const currItem = items.find((item) => item.id() === this.currentItemId());\n        if (currItem) {\n            currItem.isCurrent.set(true);\n            if (currItem.hasChildren) {\n                currItem.isExpanded.set(true);\n            }\n            this.expandParents(currItem);\n        }\n    }\n\n    private expandParents(currItem: EclCategoryFilterItem): void {\n        if (currItem.isRootItem) {\n            return;\n        }\n        const items = this.eclCategoryFilterItemsAll();\n        const parent = items.find(\n            (item) => item.hasChildren && item.children.find((child) => child.id() === currItem.id()) !== undefined,\n        );\n        if (parent) {\n            parent.isExpanded.set(true);\n            this.expandParents(parent);\n        }\n    }\n\n    private closeAllItemsButOne(item: EclCategoryFilterItem): void {\n        const items = this.eclCategoryFilterItemsAll();\n        for (const it of items) {\n            if (it !== item) {\n                it.isExpanded.set(false);\n                it.isCurrent.set(false);\n            }\n        }\n    }\n\n    private deselectAllItemsButOne(item: EclCategoryFilterItem): void {\n        const items = this.eclCategoryFilterItemsAll();\n        for (const it of items) {\n            if (it !== item) {\n                it.isCurrent.set(false);\n            }\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            :host {\n                display: block;\n            }\n        \n",
@@ -51678,7 +51608,7 @@
         },
         {
             "name": "EclCategoryFilterItemComponent",
-            "id": "component-EclCategoryFilterItemComponent-e199e1e36f1fa13ca6feb60bd9cd525f32e1a111b823be0322e4a8248c5dfb018d962a372453158fbb664d57d3880230772a432fcda0fa951926cf6e58583754",
+            "id": "component-EclCategoryFilterItemComponent-192af51ae114c8c2a94379b9ee5bbe0a13b1b17964743d1f862ce1e5a56b572a52dcf8c6eb0df495fad2fa0e887039c5d2eda627704d9139a16d9ec0900e43b7",
             "file": "packages/ecl/components/ecl-category-filter/ecl-category-filter-list/ecl-category-filter-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -51697,18 +51627,24 @@
             "hostDirectives": [],
             "inputsClass": [
                 {
+                    "name": "href",
                     "coverageIgnore": false,
-                    "name": "id",
+                    "defaultValue": "undefined",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nUnique identifier for the item. Used to manage selection state.\n",
-                    "description": "<p>Unique identifier for the item. Used to manage selection state.</p>\n",
-                    "line": 32,
                     "type": "string",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Link URL associated with this category filter item.\nIf not provided, the item acts as a toggle only.</p>\n",
+                    "line": 27,
+                    "rawdescription": "\n\nLink URL associated with this category filter item.\nIf not provided, the item acts as a toggle only.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
-                    "name": "href",
+                    "name": "id",
                     "coverageIgnore": false,
                     "defaultValue": "undefined",
                     "deprecated": false,
@@ -51716,9 +51652,9 @@
                     "type": "string",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>Link URL associated with this category filter item.\nIf not provided, the item acts as a toggle only.</p>\n",
-                    "line": 27,
-                    "rawdescription": "\n\nLink URL associated with this category filter item.\nIf not provided, the item acts as a toggle only.\n",
+                    "description": "<p>Input for the unique identifier of the item.\nWhen omitted, the parent assigns a generated fallback id.</p>\n",
+                    "line": 33,
+                    "rawdescription": "\n\nInput for the unique identifier of the item.\nWhen omitted, the parent assigns a generated fallback id.\n",
                     "modifierKind": [
                         148
                     ],
@@ -51787,13 +51723,18 @@
                 {
                     "name": "itemSelect",
                     "coverageIgnore": false,
-                    "defaultValue": "new EventEmitter<EclCategoryFilterItemSelectEvent>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nEmits when the item is selected by the user (clicked).\n",
+                    "type": "EclCategoryFilterItemSelectEvent",
+                    "indexKey": "",
+                    "optional": false,
                     "description": "<p>Emits when the item is selected by the user (clicked).</p>\n",
-                    "line": 37,
-                    "type": "EventEmitter"
+                    "line": 44,
+                    "rawdescription": "\n\nEmits when the item is selected by the user (clicked).\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
                     "name": "class",
@@ -51827,11 +51768,59 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Child list component if the item has nested children.</p>\n",
-                    "line": 66,
+                    "line": 61,
                     "rawdescription": "\n\nChild list component if the item has nested children.\n",
                     "modifierKind": [
                         148
                     ]
+                },
+                {
+                    "name": "id",
+                    "coverageIgnore": false,
+                    "defaultValue": "computed(() => this.idInput() ?? this.fallbackId())",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Unique identifier for the item. Used to manage selection state.\nResolves to the <code>id</code> input when provided, otherwise the parent-assigned fallback.</p>\n",
+                    "line": 39,
+                    "rawdescription": "\n\nUnique identifier for the item. Used to manage selection state.\nResolves to the `id` input when provided, otherwise the parent-assigned fallback.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "isCurrent",
+                    "coverageIgnore": false,
+                    "defaultValue": "signal(false)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Whether the item is currently selected.\nWritable so that the parent can update selection as the user navigates.</p>\n",
+                    "line": 56,
+                    "rawdescription": "\n\nWhether the item is currently selected.\nWritable so that the parent can update selection as the user navigates.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "isExpanded",
+                    "coverageIgnore": false,
+                    "defaultValue": "signal(false)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Whether the item is currently expanded (open).\nWritable so that the parent can toggle it as the tree state changes.</p>\n",
+                    "line": 50,
+                    "rawdescription": "\n\nWhether the item is currently expanded (open).\nWritable so that the parent can toggle it as the tree state changes.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 }
             ],
             "methodsClass": [
@@ -51851,7 +51840,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 130,
+                    "line": 125,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles user click interaction, updates state and emits selection event.\nPrevents navigation if no `href` is defined.\n",
@@ -51870,6 +51859,41 @@
                         }
                     ]
                 },
+                {
+                    "name": "setFallbackId",
+                    "coverageIgnore": false,
+                    "args": [
+                        {
+                            "name": "id",
+                            "type": "string",
+                            "optional": false,
+                            "dotDotDotToken": false,
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 138,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nAssigns a fallback id. Used by the parent category filter when no `id` input was provided.\n",
+                    "description": "<p>Assigns a fallback id. Used by the parent category filter when no <code>id</code> input was provided.</p>\n",
+                    "jsdoctags": [
+                        {
+                            "name": "id",
+                            "type": "string",
+                            "optional": false,
+                            "dotDotDotToken": false,
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
                 {
                     "name": "getCssClasses",
                     "coverageIgnore": false,
@@ -51926,7 +51950,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component, EventEmitter, forwardRef, Input, Output, input, contentChild, signal } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclCategoryFilterItem } from '../models/ecl-category-filter-item.model';\nimport { EclCategoryFilterItemSelectEvent } from '../events/ecl-category-filter-item-select.event';\nimport { EclCategoryFilterListComponent } from './ecl-category-filter-list.component';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { NgTemplateOutlet } from '@angular/common';\n\n@Component({\n    selector: 'ecl-category-filter-item',\n    templateUrl: './ecl-category-filter-item.component.html',\n    imports: [\n        NgTemplateOutlet,\n        ...EUI_ECL_ICON,\n    ],\n    host: {\n        'class': 'ecl-category-filter__list-item',\n        'role': 'listitem',\n        '[class.ecl-category-filter__list-item--open]': 'hasChildren ? isExpanded : null',\n    },\n})\nexport class EclCategoryFilterItemComponent extends ECLBaseDirective implements EclCategoryFilterItem {\n    /**\n     * Link URL associated with this category filter item.\n     * If not provided, the item acts as a toggle only.\n     */\n    readonly href = input<string>(undefined);\n\n    /**\n     * Unique identifier for the item. Used to manage selection state.\n     */\n    @Input() id: string;\n\n    /**\n     * Emits when the item is selected by the user (clicked).\n     */\n    @Output() itemSelect = new EventEmitter<EclCategoryFilterItemSelectEvent>();\n\n    /**\n     * Whether the item is currently expanded (open).\n     * Backed by a signal so that parent mutations trigger template updates.\n     */\n    get isExpanded(): boolean {\n        return this._isExpanded();\n    }\n    set isExpanded(value: boolean) {\n        this._isExpanded.set(value);\n    }\n    private readonly _isExpanded = signal(false);\n\n    /**\n     * Whether the item is currently selected.\n     * Backed by a signal so that parent mutations trigger template updates.\n     */\n    get isCurrent(): boolean {\n        return this._isCurrent();\n    }\n    set isCurrent(value: boolean) {\n        this._isCurrent.set(value);\n    }\n    private readonly _isCurrent = signal(false);\n\n    /**\n     * Child list component if the item has nested children.\n     */\n    readonly eclCategoryList = contentChild(forwardRef(() => EclCategoryFilterListComponent));\n\n    /**\n     * Returns the hierarchical level of the item within the tree.\n     */\n    get level(): number {\n        return this._level;\n    }\n\n    /**\n     * Sets the level and updates the level of the child list accordingly.\n     */\n    set level(value: number) {\n        this._level = ++value;\n        this.updateChildListLevel(this._level);\n    }\n    private _level: number;\n\n    /**\n     * Returns the CSS class for the current level of the item.\n     */\n    get levelClass(): string {\n        return `ecl-category-filter__item--level-${this._level}`;\n    }\n\n    /**\n     * Indicates whether the item has child elements.\n     */\n    get hasChildren(): boolean {\n        return this.eclCategoryList() !== undefined;\n    }\n\n    /**\n     * Returns the child components of this item, if any.\n     */\n    get children(): readonly EclCategoryFilterItemComponent[] {\n        return this.eclCategoryList().children;\n    }\n\n    /**\n     * Returns true if this is a root-level item and has children.\n     */\n    get isRootItemWithChildren(): boolean {\n        return this.hasChildren && this.isRootItem;\n    }\n\n    /**\n     * Returns true if this is a child item and has its own children.\n     */\n    get isChildItemWithChildren(): boolean {\n        return this.hasChildren && !this.isRootItem;\n    }\n\n    /**\n     * Returns true if this is a root-level item (level === 1).\n     */\n    get isRootItem(): boolean {\n        return this.level === 1;\n    }\n\n    /**\n     * Handles user click interaction, updates state and emits selection event.\n     * Prevents navigation if no `href` is defined.\n     */\n    onItemClick(evt: MouseEvent): void {\n        this.isExpanded = !this.isExpanded;\n        this.isCurrent = true;\n        this.itemSelect.next(new EclCategoryFilterItemSelectEvent(this));\n        if (!this.href()) {\n            evt.preventDefault();\n        }\n        evt.stopPropagation();\n    }\n\n    private updateChildListLevel(value: number): void {\n        const eclCategoryList = this.eclCategoryList();\n        if (eclCategoryList) {\n            eclCategoryList.level = value;\n        }\n    }\n}\n",
+            "sourceCode": "import { Component, computed, forwardRef, input, output, contentChild, signal } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclCategoryFilterItem } from '../models/ecl-category-filter-item.model';\nimport { EclCategoryFilterItemSelectEvent } from '../events/ecl-category-filter-item-select.event';\nimport { EclCategoryFilterListComponent } from './ecl-category-filter-list.component';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { NgTemplateOutlet } from '@angular/common';\n\n@Component({\n    selector: 'ecl-category-filter-item',\n    templateUrl: './ecl-category-filter-item.component.html',\n    imports: [\n        NgTemplateOutlet,\n        ...EUI_ECL_ICON,\n    ],\n    host: {\n        'class': 'ecl-category-filter__list-item',\n        'role': 'listitem',\n        '[class.ecl-category-filter__list-item--open]': 'hasChildren ? isExpanded() : null',\n    },\n})\nexport class EclCategoryFilterItemComponent extends ECLBaseDirective implements EclCategoryFilterItem {\n    /**\n     * Link URL associated with this category filter item.\n     * If not provided, the item acts as a toggle only.\n     */\n    readonly href = input<string>(undefined);\n\n    /**\n     * Input for the unique identifier of the item.\n     * When omitted, the parent assigns a generated fallback id.\n     */\n    readonly idInput = input<string>(undefined, { alias: 'id' });\n\n    /**\n     * Unique identifier for the item. Used to manage selection state.\n     * Resolves to the `id` input when provided, otherwise the parent-assigned fallback.\n     */\n    readonly id = computed(() => this.idInput() ?? this.fallbackId());\n\n    /**\n     * Emits when the item is selected by the user (clicked).\n     */\n    readonly itemSelect = output<EclCategoryFilterItemSelectEvent>();\n\n    /**\n     * Whether the item is currently expanded (open).\n     * Writable so that the parent can toggle it as the tree state changes.\n     */\n    readonly isExpanded = signal(false);\n\n    /**\n     * Whether the item is currently selected.\n     * Writable so that the parent can update selection as the user navigates.\n     */\n    readonly isCurrent = signal(false);\n\n    /**\n     * Child list component if the item has nested children.\n     */\n    readonly eclCategoryList = contentChild(forwardRef(() => EclCategoryFilterListComponent));\n\n    /**\n     * Returns the hierarchical level of the item within the tree.\n     */\n    get level(): number {\n        return this._level;\n    }\n\n    /**\n     * Sets the level and updates the level of the child list accordingly.\n     */\n    set level(value: number) {\n        this._level = ++value;\n        this.updateChildListLevel(this._level);\n    }\n    private _level: number;\n\n    /**\n     * Returns the CSS class for the current level of the item.\n     */\n    get levelClass(): string {\n        return `ecl-category-filter__item--level-${this._level}`;\n    }\n\n    /**\n     * Indicates whether the item has child elements.\n     */\n    get hasChildren(): boolean {\n        return this.eclCategoryList() !== undefined;\n    }\n\n    /**\n     * Returns the child components of this item, if any.\n     */\n    get children(): readonly EclCategoryFilterItemComponent[] {\n        return this.eclCategoryList().children;\n    }\n\n    /**\n     * Returns true if this is a root-level item and has children.\n     */\n    get isRootItemWithChildren(): boolean {\n        return this.hasChildren && this.isRootItem;\n    }\n\n    /**\n     * Returns true if this is a child item and has its own children.\n     */\n    get isChildItemWithChildren(): boolean {\n        return this.hasChildren && !this.isRootItem;\n    }\n\n    /**\n     * Returns true if this is a root-level item (level === 1).\n     */\n    get isRootItem(): boolean {\n        return this.level === 1;\n    }\n\n    /**\n     * Handles user click interaction, updates state and emits selection event.\n     * Prevents navigation if no `href` is defined.\n     */\n    onItemClick(evt: MouseEvent): void {\n        this.isExpanded.set(!this.isExpanded());\n        this.isCurrent.set(true);\n        this.itemSelect.emit(new EclCategoryFilterItemSelectEvent(this));\n        if (!this.href()) {\n            evt.preventDefault();\n        }\n        evt.stopPropagation();\n    }\n\n    /**\n     * Assigns a fallback id. Used by the parent category filter when no `id` input was provided.\n     */\n    setFallbackId(id: string): void {\n        this.fallbackId.set(id);\n    }\n\n    /**\n     * Fallback id assigned by the parent when no `id` input was provided.\n     */\n    private readonly fallbackId = signal<string | undefined>(undefined);\n\n    private updateChildListLevel(value: number): void {\n        const eclCategoryList = this.eclCategoryList();\n        if (eclCategoryList) {\n            eclCategoryList.level = value;\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -51937,94 +51961,6 @@
                 "EclCategoryFilterItem"
             ],
             "accessors": {
-                "isExpanded": {
-                    "name": "isExpanded",
-                    "setSignature": {
-                        "name": "isExpanded",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "boolean",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 46,
-                        "rawdescription": "\n",
-                        "description": "",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "boolean",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    },
-                    "getSignature": {
-                        "name": "isExpanded",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 43,
-                        "rawdescription": "\n\nWhether the item is currently expanded (open).\nBacked by a signal so that parent mutations trigger template updates.\n",
-                        "description": "<p>Whether the item is currently expanded (open).\nBacked by a signal so that parent mutations trigger template updates.</p>\n"
-                    }
-                },
-                "isCurrent": {
-                    "name": "isCurrent",
-                    "setSignature": {
-                        "name": "isCurrent",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "boolean",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 58,
-                        "rawdescription": "\n",
-                        "description": "",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "boolean",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    },
-                    "getSignature": {
-                        "name": "isCurrent",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 55,
-                        "rawdescription": "\n\nWhether the item is currently selected.\nBacked by a signal so that parent mutations trigger template updates.\n",
-                        "description": "<p>Whether the item is currently selected.\nBacked by a signal so that parent mutations trigger template updates.</p>\n"
-                    }
-                },
                 "level": {
                     "name": "level",
                     "setSignature": {
@@ -52043,7 +51979,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 78,
+                        "line": 73,
                         "rawdescription": "\n\nSets the level and updates the level of the child list accordingly.\n",
                         "description": "<p>Sets the level and updates the level of the child list accordingly.</p>\n",
                         "jsdoctags": [
@@ -52064,7 +52000,7 @@
                         "name": "level",
                         "type": "number",
                         "returnType": "number",
-                        "line": 71,
+                        "line": 66,
                         "rawdescription": "\n\nReturns the hierarchical level of the item within the tree.\n",
                         "description": "<p>Returns the hierarchical level of the item within the tree.</p>\n"
                     }
@@ -52075,7 +52011,7 @@
                         "name": "levelClass",
                         "type": "string",
                         "returnType": "string",
-                        "line": 87,
+                        "line": 82,
                         "rawdescription": "\n\nReturns the CSS class for the current level of the item.\n",
                         "description": "<p>Returns the CSS class for the current level of the item.</p>\n"
                     }
@@ -52086,7 +52022,7 @@
                         "name": "hasChildren",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 94,
+                        "line": 89,
                         "rawdescription": "\n\nIndicates whether the item has child elements.\n",
                         "description": "<p>Indicates whether the item has child elements.</p>\n"
                     }
@@ -52097,7 +52033,7 @@
                         "name": "children",
                         "type": "unknown",
                         "returnType": "readonly EclCategoryFilterItemComponent[]",
-                        "line": 101,
+                        "line": 96,
                         "rawdescription": "\n\nReturns the child components of this item, if any.\n",
                         "description": "<p>Returns the child components of this item, if any.</p>\n"
                     }
@@ -52108,7 +52044,7 @@
                         "name": "isRootItemWithChildren",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 108,
+                        "line": 103,
                         "rawdescription": "\n\nReturns true if this is a root-level item and has children.\n",
                         "description": "<p>Returns true if this is a root-level item and has children.</p>\n"
                     }
@@ -52119,7 +52055,7 @@
                         "name": "isChildItemWithChildren",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 115,
+                        "line": 110,
                         "rawdescription": "\n\nReturns true if this is a child item and has its own children.\n",
                         "description": "<p>Returns true if this is a child item and has its own children.</p>\n"
                     }
@@ -52130,7 +52066,7 @@
                         "name": "isRootItem",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 122,
+                        "line": 117,
                         "rawdescription": "\n\nReturns true if this is a root-level item (level === 1).\n",
                         "description": "<p>Returns true if this is a root-level item (level === 1).</p>\n"
                     }
@@ -52157,11 +52093,11 @@
                     }
                 ]
             },
-            "templateData": "@if (hasChildren) {\n    <button\n        class=\"ecl-category-filter__item {{ levelClass }}\"\n        [class.ecl-category-filter__item--has-children]=\"hasChildren\"\n        [class.ecl-category-filter__item--current]=\"isCurrent\"\n        [attr.aria-current]=\"isCurrent ? true : null\"\n        [attr.aria-expanded]=\"isExpanded\"\n        [attr.aria-controls]=\"eclCategoryList()?.id\"\n        (click)=\"onItemClick($event)\">\n        @if(isChildItemWithChildren) {\n            <ecl-icon icon=\"solid-arrow\" size=\"xs\" transform=\"rotate-90\" class=\"ecl-category-filter__item-icon\"> </ecl-icon>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n        @if(isRootItemWithChildren) {\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-category-filter__item-icon\"> </ecl-icon>\n        }\n    </button>\n} @else {\n    <a\n        [href]=\"href()\"\n        class=\"ecl-category-filter__item {{ levelClass }}\"\n        [class.ecl-category-filter__item--has-children]=\"hasChildren\"\n        [class.ecl-category-filter__item--current]=\"isCurrent\"\n        [attr.aria-current]=\"isCurrent ? true : null\"\n        (click)=\"onItemClick($event)\">\n        @if(isChildItemWithChildren) {\n            <ecl-icon icon=\"solid-arrow\" size=\"xs\" transform=\"rotate-90\" class=\"ecl-category-filter__item-icon\"> </ecl-icon>\n        }\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        @if(isRootItemWithChildren) {\n            <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-category-filter__item-icon\"> </ecl-icon>\n        }\n    </a>\n}\n<ng-content select=\"ecl-category-filter-list\"></ng-content>\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n"
+            "templateData": "@if (hasChildren) {\n    <button\n        class=\"ecl-category-filter__item {{ levelClass }}\"\n        [class.ecl-category-filter__item--has-children]=\"hasChildren\"\n        [class.ecl-category-filter__item--current]=\"isCurrent()\"\n        [attr.aria-current]=\"isCurrent() ? true : null\"\n        [attr.aria-expanded]=\"isExpanded()\"\n        [attr.aria-controls]=\"eclCategoryList()?.id()\"\n        (click)=\"onItemClick($event)\">\n        @if(isChildItemWithChildren) {\n            <ecl-icon icon=\"solid-arrow\" size=\"xs\" transform=\"rotate-90\" class=\"ecl-category-filter__item-icon\"> </ecl-icon>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n        @if(isRootItemWithChildren) {\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-category-filter__item-icon\"> </ecl-icon>\n        }\n    </button>\n} @else {\n    <a\n        [href]=\"href()\"\n        class=\"ecl-category-filter__item {{ levelClass }}\"\n        [class.ecl-category-filter__item--has-children]=\"hasChildren\"\n        [class.ecl-category-filter__item--current]=\"isCurrent()\"\n        [attr.aria-current]=\"isCurrent() ? true : null\"\n        (click)=\"onItemClick($event)\">\n        @if(isChildItemWithChildren) {\n            <ecl-icon icon=\"solid-arrow\" size=\"xs\" transform=\"rotate-90\" class=\"ecl-category-filter__item-icon\"> </ecl-icon>\n        }\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        @if(isRootItemWithChildren) {\n            <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-category-filter__item-icon\"> </ecl-icon>\n        }\n    </a>\n}\n<ng-content select=\"ecl-category-filter-list\"></ng-content>\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n"
         },
         {
             "name": "EclCategoryFilterListComponent",
-            "id": "component-EclCategoryFilterListComponent-47e464fbf74b6bcb699e884902518ed798e7c7122866d78f38efd8a36006a9954beb5ada092491c660e2b88b3567b3ca335e240ebc785aebc76a91b35f1e9c19",
+            "id": "component-EclCategoryFilterListComponent-cbedefc2d4a0798413395ef24590d4e2c4e614e72e78ebccec16288a20a0ee1f39df4c7739d700420478163982df5157b99b58a12bac683feddaa7ad58546163",
             "file": "packages/ecl/components/ecl-category-filter/ecl-category-filter-list/ecl-category-filter-list.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -52280,14 +52216,18 @@
                 {
                     "name": "id",
                     "coverageIgnore": false,
+                    "defaultValue": "signal<string | undefined>(undefined)",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>ID of this list element, referenced by the parent item&#39;s aria-controls.</p>\n",
                     "line": 18,
-                    "rawdescription": "\n\nID of this list element, referenced by the parent item's aria-controls.\n"
+                    "rawdescription": "\n\nID of this list element, referenced by the parent item's aria-controls.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 }
             ],
             "methodsClass": [
@@ -52315,8 +52255,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 1779,
-                                "end": 1784,
+                                "pos": 1830,
+                                "end": 1835,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -52329,8 +52269,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 1773,
-                                "end": 1778,
+                                "pos": 1824,
+                                "end": 1829,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -52390,7 +52330,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component, forwardRef, contentChildren } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclCategoryFilterItemComponent } from './ecl-category-filter-item.component';\n\n@Component({\n    selector: 'ecl-category-filter-list',\n    templateUrl: './ecl-category-filter-list.component.html',\n    host: {\n        'class': 'ecl-category-filter__list',\n        'role': 'list',\n        '[attr.id]': 'id',\n    },\n})\nexport class EclCategoryFilterListComponent extends ECLBaseDirective {\n    /**\n     * ID of this list element, referenced by the parent item's aria-controls.\n     */\n    id: string;\n\n    /**\n     * List of all category filter items projected inside this list.\n     */\n    readonly eclCategoryFilterItems = contentChildren<EclCategoryFilterItemComponent>(forwardRef(() => EclCategoryFilterItemComponent));\n\n    /**\n     * Gets the nesting level of this list in the category tree.\n     */\n    get level(): number {\n        return this._level;\n    }\n\n    /**\n     * Sets the level of the list and applies it to all its children.\n     */\n    set level(value: number) {\n        this._level = value;\n        this.updateChildrenItemsLevel(value);\n    }\n    private _level: number;\n\n    /**\n     * Returns true if the list contains one or more category filter items.\n     */\n    get hasChildren(): boolean {\n        const eclCategoryFilterItems = this.eclCategoryFilterItems();\n        return eclCategoryFilterItems !== undefined && eclCategoryFilterItems.length > 0;\n    }\n\n    /**\n     * Returns the list of child components.\n     */\n    get children(): readonly EclCategoryFilterItemComponent[] {\n        return this.eclCategoryFilterItems();\n    }\n\n    /**\n     * Propagates the current level to all direct children items.\n     * @param value Level value to set on each child.\n     */\n    updateChildrenItemsLevel(value: number): void {\n        const eclCategoryFilterItems = this.eclCategoryFilterItems();\n        if (eclCategoryFilterItems) {\n            eclCategoryFilterItems.forEach((item) =>\n                (item.level = value));\n        }\n    }\n}\n",
+            "sourceCode": "import { Component, forwardRef, contentChildren, signal } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclCategoryFilterItemComponent } from './ecl-category-filter-item.component';\n\n@Component({\n    selector: 'ecl-category-filter-list',\n    templateUrl: './ecl-category-filter-list.component.html',\n    host: {\n        'class': 'ecl-category-filter__list',\n        'role': 'list',\n        '[attr.id]': 'id()',\n    },\n})\nexport class EclCategoryFilterListComponent extends ECLBaseDirective {\n    /**\n     * ID of this list element, referenced by the parent item's aria-controls.\n     */\n    readonly id = signal<string | undefined>(undefined);\n\n    /**\n     * List of all category filter items projected inside this list.\n     */\n    readonly eclCategoryFilterItems = contentChildren<EclCategoryFilterItemComponent>(forwardRef(() => EclCategoryFilterItemComponent));\n\n    /**\n     * Gets the nesting level of this list in the category tree.\n     */\n    get level(): number {\n        return this._level;\n    }\n\n    /**\n     * Sets the level of the list and applies it to all its children.\n     */\n    set level(value: number) {\n        this._level = value;\n        this.updateChildrenItemsLevel(value);\n    }\n    private _level: number;\n\n    /**\n     * Returns true if the list contains one or more category filter items.\n     */\n    get hasChildren(): boolean {\n        const eclCategoryFilterItems = this.eclCategoryFilterItems();\n        return eclCategoryFilterItems !== undefined && eclCategoryFilterItems.length > 0;\n    }\n\n    /**\n     * Returns the list of child components.\n     */\n    get children(): readonly EclCategoryFilterItemComponent[] {\n        return this.eclCategoryFilterItems();\n    }\n\n    /**\n     * Propagates the current level to all direct children items.\n     * @param value Level value to set on each child.\n     */\n    updateChildrenItemsLevel(value: number): void {\n        const eclCategoryFilterItems = this.eclCategoryFilterItems();\n        if (eclCategoryFilterItems) {\n            eclCategoryFilterItems.forEach((item) =>\n                (item.level = value));\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -52478,10 +52418,11 @@
         },
         {
             "name": "EclCheckboxHelpComponent",
-            "id": "component-EclCheckboxHelpComponent-37a6a46ee08fe7cc5c6a088058ae389f343021ff1b4ded09f3da895189207ffd6a72f68b53903b6f3a5421fdb9e7298e7b57119238f14dfa1cb4a138d1a71aa7",
+            "id": "component-EclCheckboxHelpComponent-d97e6a47abb9cfc4b0e81cd3ba92d7bbbb0d7712e27e793a5a07163f7d1ab552739758960f583f664195de59ce86ea561ccc4c569ebc5678812d796cc88deece",
             "file": "packages/ecl/components/ecl-checkbox/ecl-checkbox-help.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -52496,17 +52437,21 @@
             "hostDirectives": [],
             "inputsClass": [
                 {
-                    "coverageIgnore": false,
-                    "required": false,
                     "name": "isDisabled",
+                    "coverageIgnore": false,
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nIndicates whether the help text is disabled (e.g. visually muted).\n",
-                    "description": "<p>Indicates whether the help text is disabled (e.g. visually muted).</p>\n",
-                    "line": 16,
                     "type": "boolean",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Input controlling whether the help text starts in a disabled (visually muted) state.</p>\n",
+                    "line": 20,
+                    "rawdescription": "\n\nInput controlling whether the help text starts in a disabled (visually muted) state.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
                     "name": "class",
@@ -52589,7 +52534,40 @@
                     }
                 }
             ],
-            "propertiesClass": [],
+            "propertiesClass": [
+                {
+                    "name": "cssClasses",
+                    "coverageIgnore": false,
+                    "defaultValue": "computed(() => super.getCssClasses('ecl-checkbox__help'))",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Applies base CSS classes for checkbox help.</p>\n",
+                    "line": 32,
+                    "rawdescription": "\n\nApplies base CSS classes for checkbox help.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "isDisabled",
+                    "coverageIgnore": false,
+                    "defaultValue": "linkedSignal(() => this.isDisabledInput())",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Indicates whether the help text is disabled (e.g. visually muted).\nSeeded from the <code>isDisabled</code> input but can be updated imperatively by the\nparent checkbox directive.</p>\n",
+                    "line": 27,
+                    "rawdescription": "\n\nIndicates whether the help text is disabled (e.g. visually muted).\nSeeded from the `isDisabled` input but can be updated imperatively by the\nparent checkbox directive.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                }
+            ],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -52633,34 +52611,21 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies base CSS classes for checkbox help.\n",
-                    "description": "<p>Applies base CSS classes for checkbox help.</p>\n",
-                    "line": 22,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "<p>Displays help text associated with a checkbox.</p>\n",
             "rawdescription": "\n\nDisplays help text associated with a checkbox.\n",
             "type": "component",
-            "sourceCode": "import { Component, HostBinding, Input, booleanAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Displays help text associated with a checkbox.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclCheckboxHelp]',\n    templateUrl: './ecl-checkbox-help.component.html',\n})\nexport class EclCheckboxHelpComponent extends ECLBaseDirective {\n    /**\n     * Indicates whether the help text is disabled (e.g. visually muted).\n     */\n    @Input({ transform: booleanAttribute }) @HostBinding('class.ecl-checkbox__help--disabled') isDisabled = false;\n\n    /**\n     * Applies base CSS classes for checkbox help.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-checkbox__help')].join(' ');\n    }\n}\n",
+            "sourceCode": "import { Component, booleanAttribute, computed, input, linkedSignal } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Displays help text associated with a checkbox.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclCheckboxHelp]',\n    templateUrl: './ecl-checkbox-help.component.html',\n    host: {\n        '[class]': 'cssClasses()',\n        '[class.ecl-checkbox__help--disabled]': 'isDisabled()',\n    },\n})\nexport class EclCheckboxHelpComponent extends ECLBaseDirective {\n    /**\n     * Input controlling whether the help text starts in a disabled (visually muted) state.\n     */\n    readonly isDisabledInput = input(false, { alias: 'isDisabled', transform: booleanAttribute });\n\n    /**\n     * Indicates whether the help text is disabled (e.g. visually muted).\n     * Seeded from the `isDisabled` input but can be updated imperatively by the\n     * parent checkbox directive.\n     */\n    readonly isDisabled = linkedSignal(() => this.isDisabledInput());\n\n    /**\n     * Applies base CSS classes for checkbox help.\n     */\n    readonly cssClasses = computed(() => super.getCssClasses('ecl-checkbox__help'));\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 132,
-                    "end": 189,
+                    "pos": 143,
+                    "end": 200,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -52672,19 +52637,6 @@
             "extends": [
                 "ECLBaseDirective"
             ],
-            "accessors": {
-                "cssClasses": {
-                    "name": "cssClasses",
-                    "getSignature": {
-                        "name": "cssClasses",
-                        "type": "string",
-                        "returnType": "string",
-                        "line": 22,
-                        "rawdescription": "\n\nApplies base CSS classes for checkbox help.\n",
-                        "description": "<p>Applies base CSS classes for checkbox help.</p>\n"
-                    }
-                }
-            },
             "relationships": {
                 "incoming": [],
                 "outgoing": [
@@ -52698,12 +52650,13 @@
         },
         {
             "name": "EclCheckboxLabelComponent",
-            "id": "component-EclCheckboxLabelComponent-6afec6cc910d94651a860a3c68a521ebcae3a9a55c9ce579e543f7322189f5f7567b4d986183709d35d0bafa03640d5fed91bd860ca7bbe0aad1150cc21b67d5",
+            "id": "component-EclCheckboxLabelComponent-ab9a1b0061fe4717fbc5e3440f450c1c5b92a1a291c0b1df5d53c18fe94bda9a547f4870f4cde04e5e3fd0540de82dbd8b92a0d2871f43a216822a909a02b7fc",
             "file": "packages/ecl/components/ecl-checkbox/ecl-checkbox-label.component.ts",
             "encapsulation": [
                 "ViewEncapsulation.None"
             ],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -52717,32 +52670,6 @@
             "viewProviders": [],
             "hostDirectives": [],
             "inputsClass": [
-                {
-                    "coverageIgnore": false,
-                    "required": false,
-                    "name": "isDisabled",
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nIndicates whether the checkbox is disabled.\n",
-                    "description": "<p>Indicates whether the checkbox is disabled.</p>\n",
-                    "line": 24,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "required": false,
-                    "name": "isInvalid",
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nIndicates whether the checkbox is in an invalid state.\n",
-                    "description": "<p>Indicates whether the checkbox is in an invalid state.</p>\n",
-                    "line": 19,
-                    "type": "boolean",
-                    "decorators": []
-                },
                 {
                     "name": "isRequired",
                     "coverageIgnore": false,
@@ -52753,7 +52680,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Indicates whether the checkbox is required.</p>\n",
-                    "line": 29,
+                    "line": 34,
                     "rawdescription": "\n\nIndicates whether the checkbox is required.\n",
                     "modifierKind": [
                         148
@@ -52841,7 +52768,56 @@
                     }
                 }
             ],
-            "propertiesClass": [],
+            "propertiesClass": [
+                {
+                    "name": "cssClasses",
+                    "coverageIgnore": false,
+                    "defaultValue": "computed(() => super.getCssClasses('ecl-checkbox__label'))",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Applies base CSS classes for checkbox label.</p>\n",
+                    "line": 39,
+                    "rawdescription": "\n\nApplies base CSS classes for checkbox label.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "isDisabled",
+                    "coverageIgnore": false,
+                    "defaultValue": "signal(false)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Indicates whether the checkbox is disabled.\nSet imperatively by the parent checkbox directive.</p>\n",
+                    "line": 29,
+                    "rawdescription": "\n\nIndicates whether the checkbox is disabled.\nSet imperatively by the parent checkbox directive.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "isInvalid",
+                    "coverageIgnore": false,
+                    "defaultValue": "signal(false)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Indicates whether the checkbox is in an invalid state.\nSet imperatively by the parent checkbox directive.</p>\n",
+                    "line": 23,
+                    "rawdescription": "\n\nIndicates whether the checkbox is in an invalid state.\nSet imperatively by the parent checkbox directive.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                }
+            ],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -52885,20 +52861,7 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies base CSS classes for checkbox label.\n",
-                    "description": "<p>Applies base CSS classes for checkbox label.</p>\n",
-                    "line": 35,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [
@@ -52909,14 +52872,14 @@
             "description": "<p>Label component for a checkbox, supporting state styles.</p>\n",
             "rawdescription": "\n\nLabel component for a checkbox, supporting state styles.\n",
             "type": "component",
-            "sourceCode": "import { Component, HostBinding, Input, ViewEncapsulation, booleanAttribute, input } from '@angular/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Label component for a checkbox, supporting state styles.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'label[eclCheckboxLabel]',\n    templateUrl: './ecl-checkbox-label.component.html',\n    imports: [...EUI_ECL_ICON],\n    encapsulation: ViewEncapsulation.None,\n})\nexport class EclCheckboxLabelComponent extends ECLBaseDirective {\n    /**\n     * Indicates whether the checkbox is in an invalid state.\n     */\n    @Input({ transform: booleanAttribute }) isInvalid = false;\n\n    /**\n     * Indicates whether the checkbox is disabled.\n     */\n    @Input({ transform: booleanAttribute }) isDisabled = false;\n\n    /**\n     * Indicates whether the checkbox is required.\n     */\n    readonly isRequired = input(false, { transform: booleanAttribute });\n\n    /**\n     * Applies base CSS classes for checkbox label.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-checkbox__label')].join(' ');\n    }\n}\n",
+            "sourceCode": "import { Component, ViewEncapsulation, booleanAttribute, computed, input, signal } from '@angular/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Label component for a checkbox, supporting state styles.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'label[eclCheckboxLabel]',\n    templateUrl: './ecl-checkbox-label.component.html',\n    imports: [...EUI_ECL_ICON],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class]': 'cssClasses()',\n    },\n})\nexport class EclCheckboxLabelComponent extends ECLBaseDirective {\n    /**\n     * Indicates whether the checkbox is in an invalid state.\n     * Set imperatively by the parent checkbox directive.\n     */\n    readonly isInvalid = signal(false);\n\n    /**\n     * Indicates whether the checkbox is disabled.\n     * Set imperatively by the parent checkbox directive.\n     */\n    readonly isDisabled = signal(false);\n\n    /**\n     * Indicates whether the checkbox is required.\n     */\n    readonly isRequired = input(false, { transform: booleanAttribute });\n\n    /**\n     * Applies base CSS classes for checkbox label.\n     */\n    readonly cssClasses = computed(() => super.getCssClasses('ecl-checkbox__label'));\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 219,
-                    "end": 286,
+                    "pos": 217,
+                    "end": 284,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -52928,19 +52891,6 @@
             "extends": [
                 "ECLBaseDirective"
             ],
-            "accessors": {
-                "cssClasses": {
-                    "name": "cssClasses",
-                    "getSignature": {
-                        "name": "cssClasses",
-                        "type": "string",
-                        "returnType": "string",
-                        "line": 35,
-                        "rawdescription": "\n\nApplies base CSS classes for checkbox label.\n",
-                        "description": "<p>Applies base CSS classes for checkbox label.</p>\n"
-                    }
-                }
-            },
             "relationships": {
                 "incoming": [],
                 "outgoing": [
@@ -52954,7 +52904,7 @@
                     }
                 ]
             },
-            "templateData": "<span class=\"ecl-checkbox__box\" [class.ecl-checkbox__box--disabled]=\"isDisabled\" [class.ecl-checkbox__box--invalid]=\"isInvalid\">\n    <ecl-icon size=\"xs\" icon=\"check\" class=\"ecl-checkbox__icon\"></ecl-icon>\n</span>\n\n<span class=\"ecl-checkbox__text\">\n    <ng-content></ng-content>\n</span>\n@if(isRequired()) {\n<span class=\"ecl-form-label__required\" role=\"note\">(required)</span>\n}\n"
+            "templateData": "<span class=\"ecl-checkbox__box\" [class.ecl-checkbox__box--disabled]=\"isDisabled()\" [class.ecl-checkbox__box--invalid]=\"isInvalid()\">\n    <ecl-icon size=\"xs\" icon=\"check\" class=\"ecl-checkbox__icon\"></ecl-icon>\n</span>\n\n<span class=\"ecl-checkbox__text\">\n    <ng-content></ng-content>\n</span>\n@if(isRequired()) {\n<span class=\"ecl-form-label__required\" role=\"note\">(required)</span>\n}\n"
         },
         {
             "name": "EclContentBlockComponent",
@@ -53550,10 +53500,11 @@
         },
         {
             "name": "EclDateBlockComponent",
-            "id": "component-EclDateBlockComponent-d9d6a513627794cc2674cf854797813269cbdd31b9d32310cd714ec65c83a83fe2760430a07643b40187cdf4c8207b7f85999cb06622b72758552cb5f56dfbd7",
+            "id": "component-EclDateBlockComponent-6bb06d3e939ca081df8ec99723a853bf21bc6d4d4e29905fb6d763ff66fc37745a7538d2e1682db6ddd9583cd716d04bfb9bf0c36fda21605666ee3b12b7266b",
             "file": "packages/ecl/components/ecl-date-block/ecl-date-block.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -53567,17 +53518,6 @@
             "viewProviders": [],
             "hostDirectives": [],
             "inputsClass": [
-                {
-                    "coverageIgnore": false,
-                    "name": "datetime",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nSets the `datetime` attribute of the `<time>` element.\nIf not provided, it is derived from `date` and `dateFormat`.\n",
-                    "description": "<p>Sets the <code>datetime</code> attribute of the <code>&lt;time&gt;</code> element.\nIf not provided, it is derived from <code>date</code> and <code>dateFormat</code>.</p>\n",
-                    "line": 96,
-                    "type": "string",
-                    "decorators": []
-                },
                 {
                     "name": "date",
                     "coverageIgnore": false,
@@ -53588,7 +53528,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The date to be displayed. If not null, it&#39;s used to generate the <code>datetime</code> attribute and visual output.</p>\n",
-                    "line": 44,
+                    "line": 48,
                     "rawdescription": "\n\nThe date to be displayed. If not null, it's used to generate the `datetime` attribute and visual output.\n",
                     "modifierKind": [
                         148
@@ -53605,13 +53545,30 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The format to be used when rendering the date string (Angular DatePipe format).\nDefault is <code>&#39;dd/M/yyyy&#39;</code>.</p>\n",
-                    "line": 50,
+                    "line": 54,
                     "rawdescription": "\n\nThe format to be used when rendering the date string (Angular DatePipe format).\nDefault is `'dd/M/yyyy'`.\n",
                     "modifierKind": [
                         148
                     ],
                     "required": false
                 },
+                {
+                    "name": "datetime",
+                    "coverageIgnore": false,
+                    "defaultValue": "undefined",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Explicit value for the <code>datetime</code> attribute of the <code>&lt;time&gt;</code> element (optional).\nIf not provided, it is derived from <code>date</code> and <code>dateFormat</code>.</p>\n",
+                    "line": 91,
+                    "rawdescription": "\n\nExplicit value for the `datetime` attribute of the `<time>` element (optional).\nIf not provided, it is derived from `date` and `dateFormat`.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
+                },
                 {
                     "name": "day",
                     "coverageIgnore": false,
@@ -53622,7 +53579,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Explicit string for day part of the date (optional).\nUsed when date is not set or overridden manually.</p>\n",
-                    "line": 64,
+                    "line": 68,
                     "rawdescription": "\n\nExplicit string for day part of the date (optional).\nUsed when date is not set or overridden manually.\n",
                     "modifierKind": [
                         148
@@ -53639,7 +53596,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Explicit string for month part of the date (optional).\nUsed when date is not set or overridden manually.</p>\n",
-                    "line": 70,
+                    "line": 74,
                     "rawdescription": "\n\nExplicit string for month part of the date (optional).\nUsed when date is not set or overridden manually.\n",
                     "modifierKind": [
                         148
@@ -53656,7 +53613,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Explicit string used as an accessible or verbose label for the month (optional).</p>\n",
-                    "line": 75,
+                    "line": 79,
                     "rawdescription": "\n\nExplicit string used as an accessible or verbose label for the month (optional).\n",
                     "modifierKind": [
                         148
@@ -53673,7 +53630,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Optional visual variant of the date block. Can be:</p>\n<ul>\n<li><code>&#39;ongoing&#39;</code>: for ongoing events</li>\n<li><code>&#39;past&#39;</code>: for past events\nThis changes styling only.</li>\n</ul>\n",
-                    "line": 58,
+                    "line": 62,
                     "rawdescription": "\n\nOptional visual variant of the date block. Can be:\n- `'ongoing'`: for ongoing events\n- `'past'`: for past events\nThis changes styling only.\n",
                     "modifierKind": [
                         148
@@ -53690,7 +53647,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Explicit string for year part of the date (optional).\nUsed when date is not set or overridden manually.</p>\n",
-                    "line": 81,
+                    "line": 85,
                     "rawdescription": "\n\nExplicit string for year part of the date (optional).\nUsed when date is not set or overridden manually.\n",
                     "modifierKind": [
                         148
@@ -53779,6 +53736,22 @@
                 }
             ],
             "propertiesClass": [
+                {
+                    "name": "datetime",
+                    "coverageIgnore": false,
+                    "defaultValue": "computed(() => this.datetimeInput() || this.getFormattedDate(this.date(), this.dateFormat()))",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>The resolved <code>datetime</code> attribute value. Uses the explicit <code>datetime</code> input\nwhen provided, otherwise derives it from <code>date</code> and <code>dateFormat</code>.</p>\n",
+                    "line": 104,
+                    "rawdescription": "\n\nThe resolved `datetime` attribute value. Uses the explicit `datetime` input\nwhen provided, otherwise derives it from `date` and `dateFormat`.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
                 {
                     "name": "locale",
                     "coverageIgnore": false,
@@ -53789,7 +53762,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 83,
+                    "line": 93,
                     "rawdescription": "\n"
                 }
             ],
@@ -53836,20 +53809,7 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 85,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [
@@ -53861,14 +53821,14 @@
             "description": "<p>Component used to display a formatted date in a styled time element.\nDesigned for use within content components such as content blocks or items.</p>\n",
             "rawdescription": "\n\nComponent used to display a formatted date in a styled time element.\nDesigned for use within content components such as content blocks or items.\n",
             "type": "component",
-            "sourceCode": "import { formatDate, DatePipe } from '@angular/common';\nimport { Component, Input, HostBinding, inject, input } from '@angular/core';\nimport '@angular/common/locales/global/bg';\nimport '@angular/common/locales/global/da';\nimport '@angular/common/locales/global/en';\nimport '@angular/common/locales/global/et';\nimport '@angular/common/locales/global/fr';\nimport '@angular/common/locales/global/hr';\nimport '@angular/common/locales/global/lv';\nimport '@angular/common/locales/global/hu';\nimport '@angular/common/locales/global/nl';\nimport '@angular/common/locales/global/pt';\nimport '@angular/common/locales/global/sk';\nimport '@angular/common/locales/global/fi';\nimport '@angular/common/locales/global/cs';\nimport '@angular/common/locales/global/de';\nimport '@angular/common/locales/global/el';\nimport '@angular/common/locales/global/es';\nimport '@angular/common/locales/global/ga';\nimport '@angular/common/locales/global/it';\nimport '@angular/common/locales/global/lt';\nimport '@angular/common/locales/global/mt';\nimport '@angular/common/locales/global/pl';\nimport '@angular/common/locales/global/ro';\nimport '@angular/common/locales/global/sl';\nimport '@angular/common/locales/global/sv';\nimport { TranslateService } from '@ngx-translate/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Component used to display a formatted date in a styled time element.\n * Designed for use within content components such as content blocks or items.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'time[eclDateBlock]',\n    templateUrl: './ecl-date-block.component.html',\n    imports: [DatePipe],\n})\nexport class EclDateBlockComponent extends ECLBaseDirective {\n    /**\n     * The date to be displayed. If not null, it's used to generate the `datetime` attribute and visual output.\n     */\n    readonly date = input<Date>(undefined);\n\n    /**\n     * The format to be used when rendering the date string (Angular DatePipe format).\n     * Default is `'dd/M/yyyy'`.\n     */\n    readonly dateFormat = input('dd/M/yyyy');\n\n    /**\n     * Optional visual variant of the date block. Can be:\n     * - `'ongoing'`: for ongoing events\n     * - `'past'`: for past events\n     * This changes styling only.\n     */\n    readonly variant = input<'ongoing' | 'past'>(null);\n\n    /**\n     * Explicit string for day part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly day = input<string>(undefined);\n\n    /**\n     * Explicit string for month part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly month = input<string>(undefined);\n\n    /**\n     * Explicit string used as an accessible or verbose label for the month (optional).\n     */\n    readonly monthTitle = input<string>(undefined);\n\n    /**\n     * Explicit string for year part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly year = input<string>(undefined);\n\n    locale = 'en';\n    @HostBinding('class')\n    get cssClasses(): string {\n        const variant = this.variant();\n        return [super.getCssClasses('ecl-date-block'), variant ? `ecl-date-block--${variant}` : ''].join(' ').trim();\n    }\n\n    /**\n     * Sets the `datetime` attribute of the `<time>` element.\n     * If not provided, it is derived from `date` and `dateFormat`.\n     */\n    @Input()\n    @HostBinding('attr.datetime')\n    get datetime(): string {\n        return this.getDatetime();\n    }\n    set datetime(value) {\n        this._datetime = value;\n    }\n    private _datetime: string = null;\n    private translateService = inject(TranslateService);\n\n    constructor() {\n        super();\n        const translateService = this.translateService;\n\n        this.locale = translateService.currentLang();\n    }\n\n    private getDatetime(): string {\n        return this._datetime || this.getFormattedDate(this.date(), this.dateFormat());\n    }\n\n    private getFormattedDate(date: Date, dateFormat: string): string {\n        if (date) {\n            return formatDate(date, dateFormat, this.translateService.currentLang());\n        } else {\n            return null;\n        }\n    }\n}\n",
+            "sourceCode": "import { formatDate, DatePipe } from '@angular/common';\nimport { Component, computed, inject, input } from '@angular/core';\nimport '@angular/common/locales/global/bg';\nimport '@angular/common/locales/global/da';\nimport '@angular/common/locales/global/en';\nimport '@angular/common/locales/global/et';\nimport '@angular/common/locales/global/fr';\nimport '@angular/common/locales/global/hr';\nimport '@angular/common/locales/global/lv';\nimport '@angular/common/locales/global/hu';\nimport '@angular/common/locales/global/nl';\nimport '@angular/common/locales/global/pt';\nimport '@angular/common/locales/global/sk';\nimport '@angular/common/locales/global/fi';\nimport '@angular/common/locales/global/cs';\nimport '@angular/common/locales/global/de';\nimport '@angular/common/locales/global/el';\nimport '@angular/common/locales/global/es';\nimport '@angular/common/locales/global/ga';\nimport '@angular/common/locales/global/it';\nimport '@angular/common/locales/global/lt';\nimport '@angular/common/locales/global/mt';\nimport '@angular/common/locales/global/pl';\nimport '@angular/common/locales/global/ro';\nimport '@angular/common/locales/global/sl';\nimport '@angular/common/locales/global/sv';\nimport { TranslateService } from '@ngx-translate/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Component used to display a formatted date in a styled time element.\n * Designed for use within content components such as content blocks or items.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'time[eclDateBlock]',\n    templateUrl: './ecl-date-block.component.html',\n    imports: [DatePipe],\n    host: {\n        '[class]': 'cssClasses',\n        '[attr.datetime]': 'datetime()',\n    },\n})\nexport class EclDateBlockComponent extends ECLBaseDirective {\n    /**\n     * The date to be displayed. If not null, it's used to generate the `datetime` attribute and visual output.\n     */\n    readonly date = input<Date>(undefined);\n\n    /**\n     * The format to be used when rendering the date string (Angular DatePipe format).\n     * Default is `'dd/M/yyyy'`.\n     */\n    readonly dateFormat = input('dd/M/yyyy');\n\n    /**\n     * Optional visual variant of the date block. Can be:\n     * - `'ongoing'`: for ongoing events\n     * - `'past'`: for past events\n     * This changes styling only.\n     */\n    readonly variant = input<'ongoing' | 'past'>(null);\n\n    /**\n     * Explicit string for day part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly day = input<string>(undefined);\n\n    /**\n     * Explicit string for month part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly month = input<string>(undefined);\n\n    /**\n     * Explicit string used as an accessible or verbose label for the month (optional).\n     */\n    readonly monthTitle = input<string>(undefined);\n\n    /**\n     * Explicit string for year part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly year = input<string>(undefined);\n\n    /**\n     * Explicit value for the `datetime` attribute of the `<time>` element (optional).\n     * If not provided, it is derived from `date` and `dateFormat`.\n     */\n    readonly datetimeInput = input<string>(undefined, { alias: 'datetime' });\n\n    locale = 'en';\n\n    get cssClasses(): string {\n        const variant = this.variant();\n        return [super.getCssClasses('ecl-date-block'), variant ? `ecl-date-block--${variant}` : ''].join(' ').trim();\n    }\n\n    /**\n     * The resolved `datetime` attribute value. Uses the explicit `datetime` input\n     * when provided, otherwise derives it from `date` and `dateFormat`.\n     */\n    readonly datetime = computed(() => this.datetimeInput() || this.getFormattedDate(this.date(), this.dateFormat()));\n\n    private translateService = inject(TranslateService);\n\n    constructor() {\n        super();\n        const translateService = this.translateService;\n\n        this.locale = translateService.currentLang();\n    }\n\n    private getFormattedDate(date: Date, dateFormat: string): string {\n        if (date) {\n            return formatDate(date, dateFormat, this.translateService.currentLang());\n        } else {\n            return null;\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 1297,
-                    "end": 1455,
+                    "pos": 1287,
+                    "end": 1445,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -53883,7 +53843,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 103,
+                "line": 106,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -53896,54 +53856,10 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 85,
+                        "line": 95,
                         "rawdescription": "\n",
                         "description": ""
                     }
-                },
-                "datetime": {
-                    "name": "datetime",
-                    "setSignature": {
-                        "name": "datetime",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "unknown",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 99,
-                        "rawdescription": "\n",
-                        "description": "",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "unknown",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    },
-                    "getSignature": {
-                        "name": "datetime",
-                        "type": "string",
-                        "returnType": "string",
-                        "line": 96,
-                        "rawdescription": "\n\nSets the `datetime` attribute of the `<time>` element.\nIf not provided, it is derived from `date` and `dateFormat`.\n",
-                        "description": "<p>Sets the <code>datetime</code> attribute of the <code>&lt;time&gt;</code> element.\nIf not provided, it is derived from <code>date</code> and <code>dateFormat</code>.</p>\n"
-                    }
                 }
             },
             "relationships": {
@@ -53959,7 +53875,7 @@
                     }
                 ]
             },
-            "templateData": "<span class=\"ecl-date-block__daytime\">{{ datetime || (date() | date: dateFormat()) }}</span>\n<span class=\"ecl-date-block__day\" aria-hidden=\"true\">{{ day() || (date() | date: 'd') }}</span>\n<abbr [title]=\"monthTitle() || month() || (date() | date: 'MMMM' : '' : locale)\" class=\"ecl-date-block__month\" aria-hidden=\"true\">\n    {{ month() || (date() | date: 'MMM' : '' : locale) }}\n</abbr>\n<span class=\"ecl-date-block__year\" aria-hidden=\"true\">{{ year() || (date() | date: 'yyyy') }}</span>\n"
+            "templateData": "<span class=\"ecl-date-block__daytime\">{{ datetime() || (date() | date: dateFormat()) }}</span>\n<span class=\"ecl-date-block__day\" aria-hidden=\"true\">{{ day() || (date() | date: 'd') }}</span>\n<abbr [title]=\"monthTitle() || month() || (date() | date: 'MMMM' : '' : locale)\" class=\"ecl-date-block__month\" aria-hidden=\"true\">\n    {{ month() || (date() | date: 'MMM' : '' : locale) }}\n</abbr>\n<span class=\"ecl-date-block__year\" aria-hidden=\"true\">{{ year() || (date() | date: 'yyyy') }}</span>\n"
         },
         {
             "name": "EclDescriptionListDefinitionComponent",
@@ -55419,7 +55335,7 @@
         },
         {
             "name": "EclFeaturedComponent",
-            "id": "component-EclFeaturedComponent-f1b6e62892849853ed950ee98ed1680291493d6b920e33939c64f1456d6153341b230a88cb9e2e9ef98a9671940661bc02a81874f5615c8e02190ebc1df53dc0",
+            "id": "component-EclFeaturedComponent-59fe7134393781e9fcc694d8fa4f476420a0c1132a3d6d8b9f5e59d566927c55934ed857612e4a5372bce8d6fa6a606ca230d6517463ecdd94ce2f41b73e2d47",
             "file": "packages/ecl/components/ecl-featured/ecl-featured.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -55446,7 +55362,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 26,
+                    "line": 28,
                     "rawdescription": "\n",
                     "required": false
                 },
@@ -55460,7 +55376,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 24,
+                    "line": 26,
                     "rawdescription": "\n",
                     "required": false
                 },
@@ -55474,7 +55390,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Gives a different display for the link in highlighted mode</p>\n",
-                    "line": 31,
+                    "line": 33,
                     "rawdescription": "\nGives a different display for the link in highlighted mode",
                     "modifierKind": [
                         148
@@ -55491,7 +55407,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The position of the image in the component. Can be &#39;left&#39; or &#39;right&#39;. The default value is &#39;left&#39;.</p>\n",
-                    "line": 18,
+                    "line": 20,
                     "rawdescription": "\n\nThe position of the image in the component. Can be 'left' or 'right'. The default value is 'left'.\n",
                     "modifierKind": [
                         148
@@ -55508,7 +55424,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>&#39;highligh&#39; varian, applies class to make more stand out appearance of the component.</p>\n",
-                    "line": 22,
+                    "line": 24,
                     "rawdescription": "\n\n'highligh' varian, applies class to make more stand out appearance of the component.\n",
                     "modifierKind": [
                         148
@@ -55524,7 +55440,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 28,
+                    "line": 30,
                     "rawdescription": "\n",
                     "required": false
                 },
@@ -55611,25 +55527,19 @@
             ],
             "propertiesClass": [
                 {
-                    "name": "role",
+                    "name": "cssClasses",
                     "coverageIgnore": false,
-                    "defaultValue": "'article'",
+                    "defaultValue": "computed(() => {\n        const variant = this.variant();\n        return [\n            super.getCssClasses('ecl-featured-item'),\n            variant ? `ecl-featured-item--${variant}`: '',\n            this.horizontalAlign() === 'center' ? 'ecl-featured-item--hcenter' : '',\n            this.verticalAlign() === 'center' ? 'ecl-featured-item--vcenter' : '',\n            this.isDynamicImage() ? 'ecl-featured-item--dynamic' : '',\n        ].join(' ').trim();\n    })",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "",
-                    "line": 33,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.role'"
-                        }
-                    ],
+                    "description": "<p>Adds specific classes to the component.</p>\n",
+                    "line": 38,
+                    "rawdescription": "\n\nAdds specific classes to the component.\n",
                     "modifierKind": [
-                        171
+                        148
                     ]
                 }
             ],
@@ -55676,47 +55586,21 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.role",
-                    "actualName": "role",
-                    "defaultValue": "'article'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 33,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nAdds specific classes to the component.\n",
-                    "description": "<p>Adds specific classes to the component.</p>\n",
-                    "line": 39,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "<p>Custom ECL component, that adds visual support to a piece of content. Uses <ecl-media-container>.</p>\n",
             "rawdescription": "\n\nCustom ECL component, that adds visual support to a piece of content. Uses <ecl-media-container>.\n",
             "type": "component",
-            "sourceCode": "import { booleanAttribute, Component, HostBinding, input } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Custom ECL component, that adds visual support to a piece of content. Uses <ecl-media-container>.\n */\n@Component({\n    selector: 'ecl-featured, article[eclFeatured]',\n    templateUrl: './ecl-featured.component.html',\n    host: {\n        '[class.ecl-featured-item--link-highlighted]': 'isLinkHighlighted()',\n    },\n})\nexport class EclFeaturedComponent extends ECLBaseDirective {\n    /**\n     * The position of the image in the component. Can be 'left' or 'right'. The default value is 'left'.\n     */\n    readonly position = input<'left' | 'right'>('left');\n    /**\n     * 'highligh' varian, applies class to make more stand out appearance of the component.\n     */\n    readonly variant = input<'highlight'>(undefined);\n\n    isDynamicImage = input(false, { transform: booleanAttribute });\n\n    horizontalAlign = input<'left' | 'center' | undefined>();\n\n    verticalAlign = input<'top' | 'center' | undefined>();\n\n    /** Gives a different display for the link in highlighted mode */\n    readonly isLinkHighlighted = input(false, { transform: booleanAttribute });\n\n    @HostBinding('attr.role') role = 'article';\n\n    /**\n     * Adds specific classes to the component.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        const variant = this.variant();\n        return [\n            super.getCssClasses('ecl-featured-item'),\n            variant ? `ecl-featured-item--${variant}`: '',\n            this.horizontalAlign() === 'center' ? 'ecl-featured-item--hcenter' : '',\n            this.verticalAlign() === 'center' ? 'ecl-featured-item--vcenter' : '',\n            this.isDynamicImage() ? 'ecl-featured-item--dynamic' : '',\n        ].join(' ').trim();\n    }\n}\n",
+            "sourceCode": "import { booleanAttribute, Component, computed, input } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Custom ECL component, that adds visual support to a piece of content. Uses <ecl-media-container>.\n */\n@Component({\n    selector: 'ecl-featured, article[eclFeatured]',\n    templateUrl: './ecl-featured.component.html',\n    host: {\n        'role': 'article',\n        '[class]': 'cssClasses()',\n        '[class.ecl-featured-item--link-highlighted]': 'isLinkHighlighted()',\n    },\n})\nexport class EclFeaturedComponent extends ECLBaseDirective {\n    /**\n     * The position of the image in the component. Can be 'left' or 'right'. The default value is 'left'.\n     */\n    readonly position = input<'left' | 'right'>('left');\n    /**\n     * 'highligh' varian, applies class to make more stand out appearance of the component.\n     */\n    readonly variant = input<'highlight'>(undefined);\n\n    isDynamicImage = input(false, { transform: booleanAttribute });\n\n    horizontalAlign = input<'left' | 'center' | undefined>();\n\n    verticalAlign = input<'top' | 'center' | undefined>();\n\n    /** Gives a different display for the link in highlighted mode */\n    readonly isLinkHighlighted = input(false, { transform: booleanAttribute });\n\n    /**\n     * Adds specific classes to the component.\n     */\n    readonly cssClasses = computed(() => {\n        const variant = this.variant();\n        return [\n            super.getCssClasses('ecl-featured-item'),\n            variant ? `ecl-featured-item--${variant}`: '',\n            this.horizontalAlign() === 'center' ? 'ecl-featured-item--hcenter' : '',\n            this.verticalAlign() === 'center' ? 'ecl-featured-item--vcenter' : '',\n            this.isDynamicImage() ? 'ecl-featured-item--dynamic' : '',\n        ].join(' ').trim();\n    });\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 132,
-                    "end": 240,
+                    "pos": 129,
+                    "end": 237,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -55728,19 +55612,6 @@
             "extends": [
                 "ECLBaseDirective"
             ],
-            "accessors": {
-                "cssClasses": {
-                    "name": "cssClasses",
-                    "getSignature": {
-                        "name": "cssClasses",
-                        "type": "string",
-                        "returnType": "string",
-                        "line": 39,
-                        "rawdescription": "\n\nAdds specific classes to the component.\n",
-                        "description": "<p>Adds specific classes to the component.</p>\n"
-                    }
-                }
-            },
             "relationships": {
                 "incoming": [],
                 "outgoing": [
@@ -55754,10 +55625,11 @@
         },
         {
             "name": "EclFeaturedItemComponent",
-            "id": "component-EclFeaturedItemComponent-3a01f3b697d88d5fd3c773638aaca0628722364c82c8d3701a9cc504b39a9cf9100231d03894acf1e18fd49d63a2fea91efa77cb741469252fb0f2d907a51c69",
+            "id": "component-EclFeaturedItemComponent-ae681931e03c6703c0cc54810c88e85dd2f18a11c725ac70cdf38c6bc13b8c1d2fc365c9a952c51f49784be056eafcbf105eb64ab886a15c8597094b0a9a000f",
             "file": "packages/ecl/components/ecl-featured/ecl-featured-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -55783,7 +55655,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 25,
+                    "line": 28,
                     "rawdescription": "\n",
                     "required": false
                 },
@@ -55797,7 +55669,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 24,
+                    "line": 27,
                     "rawdescription": "\n",
                     "required": false
                 },
@@ -55811,7 +55683,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 26,
+                    "line": 29,
                     "rawdescription": "\n",
                     "required": false
                 },
@@ -55897,28 +55769,6 @@
                 }
             ],
             "propertiesClass": [
-                {
-                    "name": "className",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 30,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-featured-item__item'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                },
                 {
                     "name": "hasMedia",
                     "coverageIgnore": false,
@@ -55929,7 +55779,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 32,
+                    "line": 33,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124,
@@ -55946,7 +55796,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 36,
+                    "line": 37,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124,
@@ -55963,7 +55813,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 35,
+                    "line": 36,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124,
@@ -55980,7 +55830,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 28,
+                    "line": 31,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -55996,7 +55846,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 27,
+                    "line": 30,
                     "rawdescription": "\n"
                 }
             ],
@@ -56008,7 +55858,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 38,
+                    "line": 39,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -56056,21 +55906,7 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-featured-item__item",
-                    "actualName": "className",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 30,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [
@@ -56081,14 +55917,14 @@
             "description": "<p>Container for the text part - title and description of the <ecl-featured> component.</p>\n",
             "rawdescription": "\n\nContainer for the text part - title and description of the <ecl-featured> component.\n",
             "type": "component",
-            "sourceCode": "import { AfterContentInit, Component, HostBinding, contentChild, computed, input, contentChildren } from '@angular/core';\nimport { EclMediaContainerComponent } from '@eui/ecl/components/ecl-media-container';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { uniqueId } from '@eui/core';\nimport { EclFeaturedItemLinkDirective } from './ecl-featured-item-link.directive';\nimport { NgTemplateOutlet } from '@angular/common';\n\n/**\n * Container for the text part - title and description of the <ecl-featured> component.\n */\n@Component({\n    selector: 'ecl-featured-item, div[eclFeaturedItem]',\n    imports: [NgTemplateOutlet],\n    templateUrl: './ecl-featured-item.component.html',\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclFeaturedItemComponent extends ECLBaseDirective implements AfterContentInit {\n    eclTitle = input('');\n    eclMicroTitle = input('');\n    id = input<string>(`ecl-featured-item-${uniqueId()}`);\n    mediaContainer = contentChild(EclMediaContainerComponent);\n    readonly links = contentChildren(EclFeaturedItemLinkDirective, { descendants: true });\n\n    @HostBinding('class.ecl-featured-item__item') className = true;\n\n    protected readonly hasMedia = computed(() => {\n        return !!this.mediaContainer() \n    });\n    protected readonly hasTitle = computed(() => this.eclTitle() !== '');\n    protected readonly hasMicroTitle = computed(() => this.eclMicroTitle() !== '');\n\n    ngAfterContentInit(): void {\n        if (this.mediaContainer()) {\n            this.mediaContainer().class.set('ecl-featured-item__media_container');\n        }\n\n        const describedBy = this.hasTitle() ? `${this.id()}-title` : null;\n        const links = this.links();\n        if (describedBy && links) {\n            links.forEach(link => {\n                link.ariaDescribedBy = describedBy;\n            });\n        }\n    }\n}\n",
+            "sourceCode": "import { AfterContentInit, Component, contentChild, computed, input, contentChildren } from '@angular/core';\nimport { EclMediaContainerComponent } from '@eui/ecl/components/ecl-media-container';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { uniqueId } from '@eui/core';\nimport { EclFeaturedItemLinkDirective } from './ecl-featured-item-link.directive';\nimport { NgTemplateOutlet } from '@angular/common';\n\n/**\n * Container for the text part - title and description of the <ecl-featured> component.\n */\n@Component({\n    selector: 'ecl-featured-item, div[eclFeaturedItem]',\n    imports: [NgTemplateOutlet],\n    templateUrl: './ecl-featured-item.component.html',\n    host: {\n        'class': 'ecl-featured-item__item',\n    },\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclFeaturedItemComponent extends ECLBaseDirective implements AfterContentInit {\n    eclTitle = input('');\n    eclMicroTitle = input('');\n    id = input<string>(`ecl-featured-item-${uniqueId()}`);\n    mediaContainer = contentChild(EclMediaContainerComponent);\n    readonly links = contentChildren(EclFeaturedItemLinkDirective, { descendants: true });\n\n    protected readonly hasMedia = computed(() => {\n        return !!this.mediaContainer() \n    });\n    protected readonly hasTitle = computed(() => this.eclTitle() !== '');\n    protected readonly hasMicroTitle = computed(() => this.eclMicroTitle() !== '');\n\n    ngAfterContentInit(): void {\n        if (this.mediaContainer()) {\n            this.mediaContainer().class.set('ecl-featured-item__media_container');\n        }\n\n        const describedBy = this.hasTitle() ? `${this.id()}-title` : null;\n        const links = this.links();\n        if (describedBy && links) {\n            links.forEach(link => {\n                link.ariaDescribedBy.set(describedBy);\n            });\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            :host {\n                display: block;\n            }\n        \n",
             "jsdoctags": [
                 {
-                    "pos": 432,
-                    "end": 527,
+                    "pos": 419,
+                    "end": 514,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -56124,10 +55960,11 @@
         },
         {
             "name": "EclFeaturedItemDescriptionComponent",
-            "id": "component-EclFeaturedItemDescriptionComponent-4fe79c47d676d2ee1e3ef9329020ac0c26f2ad0d40f0bda28ec23d295a055903a37ce79b57a1861f5d2909b1ed5126275e0494ea710725446aba95e8b084b6ae",
+            "id": "component-EclFeaturedItemDescriptionComponent-e2a58c6d732bce30ad77e5c4dbb163d4f775ea447bd64435c739fbfbe3f766ae1cae0de5fe486cf4ebb0e071f7d9451f8fe62db884e68ef281e7e35db74db996",
             "file": "packages/ecl/components/ecl-featured/ecl-featured-item-description.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -56224,30 +56061,7 @@
                     }
                 }
             ],
-            "propertiesClass": [
-                {
-                    "name": "className",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 20,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-featured-item__description'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -56291,35 +56105,21 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-featured-item__description",
-                    "actualName": "className",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 20,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "<p>Applies specific additional class to style <ecl-featured-item-description> component, as a part of the\n <ecl-featured> component.</p>\n",
             "rawdescription": "\n\nApplies specific additional class to style <ecl-featured-item-description> component, as a part of the\n <ecl-featured> component.\n",
             "type": "component",
-            "sourceCode": "import { Component, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Applies specific additional class to style <ecl-featured-item-description> component, as a part of the\n *  <ecl-featured> component.\n */\n@Component({\n    selector: 'ecl-featured-item-description',\n    templateUrl: './ecl-featured-item-description.component.html',\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclFeaturedItemDescriptionComponent extends ECLBaseDirective {\n    @HostBinding('class.ecl-featured-item__description') className = true;\n}\n",
+            "sourceCode": "import { Component } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Applies specific additional class to style <ecl-featured-item-description> component, as a part of the\n *  <ecl-featured> component.\n */\n@Component({\n    selector: 'ecl-featured-item-description',\n    templateUrl: './ecl-featured-item-description.component.html',\n    host: {\n        'class': 'ecl-featured-item__description',\n    },\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclFeaturedItemDescriptionComponent extends ECLBaseDirective {}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            :host {\n                display: block;\n            }\n        \n",
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 250,
+                    "pos": 94,
+                    "end": 237,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -63103,7 +62903,7 @@
         },
         {
             "name": "EclLayoutWrapperComponent",
-            "id": "component-EclLayoutWrapperComponent-1b22a5b3062125fec7b709afb255f91de623239595f810769a9548cc13ae5e08d533b7423bdc48916ffba37db47fd4bba6c4497042597731d928c0f819c5d8c9",
+            "id": "component-EclLayoutWrapperComponent-85c50f845ab263497008e750a7bfb97eabd87d7658c79e726395aefca73438be4785b8b201e4ea5b5e530d340272fb35f215452677b937c821140fe540a919f6",
             "file": "packages/ecl/components/ecl-layout-wrapper/ecl-layout-wrapper.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -63337,17 +63137,17 @@
             "hostListeners": [],
             "standalone": false,
             "imports": [],
-            "description": "<p>ECL Layout Wrapper component.\nArranges projected content into a responsive grid layout with configurable columns.\nIncludes optional title, description, and &quot;view all&quot; link areas.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;div eclLayoutWrapper [columns]=&quot;3&quot; direction=&quot;horizontal&quot;&gt;\n  &lt;h2 eclLayoutWrapperTitle&gt;Heading&lt;/h2&gt;\n  &lt;div eclLayoutWrapperDescription&gt;Description text&lt;/div&gt;\n___COMPODOC_EMPTY_LINE___\n  &lt;div eclLayoutItem&gt;&lt;article eclCard&gt;...&lt;/article&gt;&lt;/div&gt;\n  &lt;div eclLayoutItem&gt;&lt;article eclCard&gt;...&lt;/article&gt;&lt;/div&gt;\n  &lt;div eclLayoutItem&gt;&lt;article eclCard&gt;...&lt;/article&gt;&lt;/div&gt;\n___COMPODOC_EMPTY_LINE___\n  &lt;a eclLayoutWrapperViewAll eclLink [standalone]=&quot;true&quot; icon=&quot;arrow-left&quot;&gt;View all&lt;/a&gt;\n&lt;/div&gt;</code></pre></div>",
-            "rawdescription": "\n\nECL Layout Wrapper component.\nArranges projected content into a responsive grid layout with configurable columns.\nIncludes optional title, description, and \"view all\" link areas.\n\n```html\n<div eclLayoutWrapper [columns]=\"3\" direction=\"horizontal\">\n  <h2 eclLayoutWrapperTitle>Heading</h2>\n  <div eclLayoutWrapperDescription>Description text</div>\n___COMPODOC_EMPTY_LINE___\n  <div eclLayoutItem><article eclCard>...</article></div>\n  <div eclLayoutItem><article eclCard>...</article></div>\n  <div eclLayoutItem><article eclCard>...</article></div>\n___COMPODOC_EMPTY_LINE___\n  <a eclLayoutWrapperViewAll eclLink [standalone]=\"true\" icon=\"arrow-left\">View all</a>\n</div>\n```",
+            "description": "<p>ECL Layout Wrapper component.\nArranges projected content into a responsive grid layout with configurable columns.\nIncludes optional title, description, and &quot;view all&quot; link areas.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;div eclLayoutWrapper [columns]=&quot;3&quot; direction=&quot;horizontal&quot;&gt;\n  &lt;h2 eclLayoutWrapperTitle&gt;Heading&lt;/h2&gt;\n  &lt;div eclLayoutWrapperDescription&gt;Description text&lt;/div&gt;\n___COMPODOC_EMPTY_LINE___\n  &lt;div eclLayoutItem&gt;&lt;article eclCard&gt;...&lt;/article&gt;&lt;/div&gt;\n  &lt;div eclLayoutItem&gt;&lt;article eclCard&gt;...&lt;/article&gt;&lt;/div&gt;\n  &lt;div eclLayoutItem&gt;&lt;article eclCard&gt;...&lt;/article&gt;&lt;/div&gt;\n___COMPODOC_EMPTY_LINE___\n  &lt;a eclLayoutWrapperViewAll eclLink icon=&quot;arrow-left&quot;&gt;View all&lt;/a&gt;\n&lt;/div&gt;</code></pre></div>",
+            "rawdescription": "\n\nECL Layout Wrapper component.\nArranges projected content into a responsive grid layout with configurable columns.\nIncludes optional title, description, and \"view all\" link areas.\n\n```html\n<div eclLayoutWrapper [columns]=\"3\" direction=\"horizontal\">\n  <h2 eclLayoutWrapperTitle>Heading</h2>\n  <div eclLayoutWrapperDescription>Description text</div>\n___COMPODOC_EMPTY_LINE___\n  <div eclLayoutItem><article eclCard>...</article></div>\n  <div eclLayoutItem><article eclCard>...</article></div>\n  <div eclLayoutItem><article eclCard>...</article></div>\n___COMPODOC_EMPTY_LINE___\n  <a eclLayoutWrapperViewAll eclLink icon=\"arrow-left\">View all</a>\n</div>\n```",
             "type": "component",
-            "sourceCode": "import { booleanAttribute, Component, contentChild, contentChildren, effect, input, numberAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclLayoutItemDirective, EclLayoutWrapperViewAllDirective } from './ecl-layout-wrapper.directives';\n\n/**\n * ECL Layout Wrapper component.\n * Arranges projected content into a responsive grid layout with configurable columns.\n * Includes optional title, description, and \"view all\" link areas.\n *\n * @example\n * ```html\n * <div eclLayoutWrapper [columns]=\"3\" direction=\"horizontal\">\n *   <h2 eclLayoutWrapperTitle>Heading</h2>\n *   <div eclLayoutWrapperDescription>Description text</div>\n *\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *\n *   <a eclLayoutWrapperViewAll eclLink [standalone]=\"true\" icon=\"arrow-left\">View all</a>\n * </div>\n * ```\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclLayoutWrapper]',\n    templateUrl: './ecl-layout-wrapper.component.html',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclLayoutWrapperComponent extends ECLBaseDirective {\n    /** Number of columns for the grid layout. Accepts 2, 3, or 4. Defaults to 3. */\n    columns = input(3, { transform: numberAttribute });\n\n    /** Position of the info block (title + description). */\n    infoPosition = input<'top' | 'side'>('top');\n\n    /** Force column number instead of dynamic management. Use with caution. */\n    forcedColumn = input(false, { transform: booleanAttribute });\n\n    /** Flow of items. */\n    direction = input<'horizontal' | 'vertical'>('horizontal');\n\n    /** Display all the elements at full height. */\n    fullHeight = input(true, { transform: booleanAttribute });\n\n    /** Whether a view-all link is projected. */\n    protected hasViewAll = contentChild(EclLayoutWrapperViewAllDirective);\n\n    /** Projected layout items that will be auto-indexed. */\n    private items = contentChildren(EclLayoutItemDirective);\n\n    /** Host CSS classes based on inputs. */\n    // TODO: change this to computed, when the BaseDirective is migrated to signals.\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-layout-wrapper'),\n            `ecl-layout-wrapper--col-${this.columns()}`,\n            this.infoPosition() === 'side' ? 'ecl-layout-wrapper--info-side' : '',\n            this.direction() === 'vertical' ? 'ecl-layout-wrapper--vertical' : '',\n            this.fullHeight() ? '' : 'ecl-layout-wrapper--height-auto',\n            this.forcedColumn() ? 'ecl-layout-wrapper--forced' : '',\n        ].filter(Boolean).join(' ');\n    }\n\n    constructor() {\n        super();\n        effect(() => {\n            const items = this.items();\n            items.forEach((item, i) => item.index.set(i + 1));\n        });\n    }\n}\n",
+            "sourceCode": "import { booleanAttribute, Component, contentChild, contentChildren, effect, input, numberAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclLayoutItemDirective, EclLayoutWrapperViewAllDirective } from './ecl-layout-wrapper.directives';\n\n/**\n * ECL Layout Wrapper component.\n * Arranges projected content into a responsive grid layout with configurable columns.\n * Includes optional title, description, and \"view all\" link areas.\n *\n * @example\n * ```html\n * <div eclLayoutWrapper [columns]=\"3\" direction=\"horizontal\">\n *   <h2 eclLayoutWrapperTitle>Heading</h2>\n *   <div eclLayoutWrapperDescription>Description text</div>\n *\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *\n *   <a eclLayoutWrapperViewAll eclLink icon=\"arrow-left\">View all</a>\n * </div>\n * ```\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclLayoutWrapper]',\n    templateUrl: './ecl-layout-wrapper.component.html',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclLayoutWrapperComponent extends ECLBaseDirective {\n    /** Number of columns for the grid layout. Accepts 2, 3, or 4. Defaults to 3. */\n    columns = input(3, { transform: numberAttribute });\n\n    /** Position of the info block (title + description). */\n    infoPosition = input<'top' | 'side'>('top');\n\n    /** Force column number instead of dynamic management. Use with caution. */\n    forcedColumn = input(false, { transform: booleanAttribute });\n\n    /** Flow of items. */\n    direction = input<'horizontal' | 'vertical'>('horizontal');\n\n    /** Display all the elements at full height. */\n    fullHeight = input(true, { transform: booleanAttribute });\n\n    /** Whether a view-all link is projected. */\n    protected hasViewAll = contentChild(EclLayoutWrapperViewAllDirective);\n\n    /** Projected layout items that will be auto-indexed. */\n    private items = contentChildren(EclLayoutItemDirective);\n\n    /** Host CSS classes based on inputs. */\n    // TODO: change this to computed, when the BaseDirective is migrated to signals.\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-layout-wrapper'),\n            `ecl-layout-wrapper--col-${this.columns()}`,\n            this.infoPosition() === 'side' ? 'ecl-layout-wrapper--info-side' : '',\n            this.direction() === 'vertical' ? 'ecl-layout-wrapper--vertical' : '',\n            this.fullHeight() ? '' : 'ecl-layout-wrapper--height-auto',\n            this.forcedColumn() ? 'ecl-layout-wrapper--forced' : '',\n        ].filter(Boolean).join(' ');\n    }\n\n    constructor() {\n        super();\n        effect(() => {\n            const items = this.items();\n            items.forEach((item, i) => item.index.set(i + 1));\n        });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
                     "pos": 481,
-                    "end": 967,
+                    "end": 947,
                     "kind": 328,
                     "id": 0,
                     "flags": 16777216,
@@ -63362,7 +63162,7 @@
                         "transformFlags": 0,
                         "escapedText": "example"
                     },
-                    "comment": "<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;div eclLayoutWrapper [columns]=&quot;3&quot; direction=&quot;horizontal&quot;&gt;\n  &lt;h2 eclLayoutWrapperTitle&gt;Heading&lt;/h2&gt;\n  &lt;div eclLayoutWrapperDescription&gt;Description text&lt;/div&gt;\n\n  &lt;div eclLayoutItem&gt;&lt;article eclCard&gt;...&lt;/article&gt;&lt;/div&gt;\n  &lt;div eclLayoutItem&gt;&lt;article eclCard&gt;...&lt;/article&gt;&lt;/div&gt;\n  &lt;div eclLayoutItem&gt;&lt;article eclCard&gt;...&lt;/article&gt;&lt;/div&gt;\n\n  &lt;a eclLayoutWrapperViewAll eclLink [standalone]=&quot;true&quot; icon=&quot;arrow-left&quot;&gt;View all&lt;/a&gt;\n&lt;/div&gt;</code></pre></div>"
+                    "comment": "<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;div eclLayoutWrapper [columns]=&quot;3&quot; direction=&quot;horizontal&quot;&gt;\n  &lt;h2 eclLayoutWrapperTitle&gt;Heading&lt;/h2&gt;\n  &lt;div eclLayoutWrapperDescription&gt;Description text&lt;/div&gt;\n\n  &lt;div eclLayoutItem&gt;&lt;article eclCard&gt;...&lt;/article&gt;&lt;/div&gt;\n  &lt;div eclLayoutItem&gt;&lt;article eclCard&gt;...&lt;/article&gt;&lt;/div&gt;\n  &lt;div eclLayoutItem&gt;&lt;article eclCard&gt;...&lt;/article&gt;&lt;/div&gt;\n\n  &lt;a eclLayoutWrapperViewAll eclLink icon=&quot;arrow-left&quot;&gt;View all&lt;/a&gt;\n&lt;/div&gt;</code></pre></div>"
                 }
             ],
             "constructorObj": {
@@ -99387,7 +99187,7 @@
                 "name": "ARROW_SIZE",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts",
+                "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts",
                 "coverageIgnore": false,
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -99400,7 +99200,7 @@
                 "name": "ARROW_SIZE",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts",
+                "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts",
                 "coverageIgnore": false,
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -100336,23 +100136,23 @@
                 "name": "noop",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "packages/ecl/components/ecl-rating-field/ecl-rating-field.component.ts",
+                "file": "packages/ecl/components/ecl-search-form/ecl-search-form.component.ts",
                 "coverageIgnore": false,
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "unknown",
-                "defaultValue": "(): void => {\n    /** empty */\n}"
+                "defaultValue": "(): void => {\n    /** empty*/\n}"
             },
             {
                 "name": "noop",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "packages/ecl/components/ecl-search-form/ecl-search-form.component.ts",
+                "file": "packages/ecl/components/ecl-rating-field/ecl-rating-field.component.ts",
                 "coverageIgnore": false,
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "unknown",
-                "defaultValue": "(): void => {\n    /** empty*/\n}"
+                "defaultValue": "(): void => {\n    /** empty */\n}"
             },
             {
                 "name": "noop",
@@ -100870,21 +100670,6 @@
             }
         ],
         "groupedVariables": {
-            "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts": [
-                {
-                    "name": "ARROW_SIZE",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts",
-                    "coverageIgnore": false,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "defaultValue": "'0.5rem'",
-                    "rawdescription": "Half the arrow's own width, matching ECL's `arrowSize`.",
-                    "description": "<p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>\n"
-                }
-            ],
             "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts": [
                 {
                     "name": "ARROW_SIZE",
@@ -100913,6 +100698,21 @@
                     "description": "<p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>\n"
                 }
             ],
+            "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts": [
+                {
+                    "name": "ARROW_SIZE",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "defaultValue": "'0.5rem'",
+                    "rawdescription": "Half the arrow's own width, matching ECL's `arrowSize`.",
+                    "description": "<p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>\n"
+                }
+            ],
             "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts": [
                 {
                     "name": "ARROW_SIZE",