@eui/ecl 22.0.0-alpha.4 → 22.0.0-alpha.6

package/docs/json/documentation.json

@@ -8457,13 +8457,13 @@
         },
         {
             "name": "EclSocialMediaFollowItemClickEvent",
-            "id": "class-EclSocialMediaFollowItemClickEvent-a5a386ce91d38e0d4ebb07c2085b8c669354f1a816b2677b7dde9628c9a14908687d7a7d0f9f6e66e8172233d257ac2a1145254275a03f9216caa201b32c6018",
+            "id": "class-EclSocialMediaFollowItemClickEvent-be2bc74a52d7b183206e23fa9c6edd0706816decad401fed2ccd0e2788dead5b1d6dbb066556634b97683220c7111e50c45fd911c2cccbe1ec6738847a5e6fdf",
             "file": "packages/ecl/components/ecl-social-media-follow/ecl-social-media-follow-item.component.ts",
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import { booleanAttribute, Component, inject, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclBaseEvent } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EclSocialMediaFollowComponent } from './ecl-social-media-follow.component';\n\nexport class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {}\n\n@Component({\n    selector: 'ecl-social-media-follow-item',\n    templateUrl: './ecl-social-media-follow-item.component.html',\n    imports: [...EUI_ECL_ICON, ...EUI_ECL_LINK, NgTemplateOutlet, RouterLink, RouterLinkWithHref],\n    host: {\n        'role': 'listitem',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSocialMediaFollowItemComponent extends ECLBaseDirective {\n    readonly isInverted = input<false, unknown>(undefined, { transform: (booleanAttribute) as any });\n    icon = input<string>();\n    iconSet = input<string>('social-media');\n    readonly href = input('');\n    readonly routerLink = input('');\n    readonly target = input<string>(undefined);\n    readonly size = input('m');\n    readonly extraAttributes = input<{\n        name: string;\n        value?: string | null;\n    }[]>(undefined);\n\n    private parent = inject(EclSocialMediaFollowComponent);\n\n    get isIconOnly(): boolean {\n        return this.parent?.isIconOnly() ?? false;\n    }\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__item')].join(' ').trim();\n    }\n\n    readonly itemClick = output<EclSocialMediaFollowItemClickEvent>();\n\n    onItemClick(evt): void {\n        this.itemClick.emit(new EclSocialMediaFollowItemClickEvent());\n        if (!this.href() && !this.routerLink()) {\n            evt.preventDefault();\n        }\n    }\n}\n",
+            "sourceCode": "import { booleanAttribute, Component, inject, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclBaseEvent } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EclSocialMediaFollowComponent } from './ecl-social-media-follow.component';\n\nexport class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {}\n\n@Component({\n    selector: 'ecl-social-media-follow-item',\n    templateUrl: './ecl-social-media-follow-item.component.html',\n    imports: [...EUI_ECL_ICON, ...EUI_ECL_LINK, NgTemplateOutlet, RouterLink, RouterLinkWithHref],\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSocialMediaFollowItemComponent extends ECLBaseDirective {\n    readonly isInverted = input<false, unknown>(undefined, { transform: (booleanAttribute) as any });\n    icon = input<string>();\n    iconSet = input<string>('social-media');\n    readonly href = input('');\n    readonly routerLink = input('');\n    readonly target = input<string>(undefined);\n    readonly size = input('m');\n    readonly extraAttributes = input<{\n        name: string;\n        value?: string | null;\n    }[]>(undefined);\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__item')].join(' ').trim();\n    }\n\n    readonly itemClick = output<EclSocialMediaFollowItemClickEvent>();\n\n    private parent = inject(EclSocialMediaFollowComponent);\n\n    get isIconOnly(): boolean {\n        return this.parent?.isIconOnly() ?? false;\n    }\n\n    onItemClick(evt: Event): void {\n        this.itemClick.emit(new EclSocialMediaFollowItemClickEvent());\n        if (!this.href() && !this.routerLink()) {\n            evt.preventDefault();\n        }\n    }\n}\n",
             "displayName": "EclSocialMediaFollowItemClickEvent",
             "inputsClass": [],
             "outputsClass": [],
@@ -17281,12 +17281,12 @@
         },
         {
             "name": "EclDescriptionListDefinitionItemDirective",
-            "id": "directive-EclDescriptionListDefinitionItemDirective-fc40220de31177a2dea6fa119107b00bd0082dc3d12e1024ddc9698f4576a056aaa9acd67fc73674f50455461787d9e94fcaaef0d0e765cb8bad05cb42d4de96",
+            "id": "directive-EclDescriptionListDefinitionItemDirective-a5b79a474de70418841c2b7c289fde4ee7297407f61a77dda587317d58ef219eedf6127dd2f6a706d095d4ecb41a18e8e29aabeb41f9b5ebc1cb26aaded13470",
             "file": "packages/ecl/components/ecl-list/ecl-description-list-definition-item.directive.ts",
             "type": "directive",
             "description": "<p>Directive representing a single item in an ECL description list definition.</p>\n<p>Applies the appropriate styling classes and allows visibility control for &quot;see all&quot; behavior.</p>\n",
             "rawdescription": "\n\nDirective representing a single item in an ECL description list definition.\n\nApplies the appropriate styling classes and allows visibility control for \"see all\" behavior.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive representing a single item in an ECL description list definition.\n *\n * Applies the appropriate styling classes and allows visibility control for \"see all\" behavior.\n */\n@Directive({\n    selector: '[eclDescriptionListDefinitionItem]',\n})\nexport class EclDescriptionListDefinitionItemDirective extends ECLBaseDirective {\n    /**\n     * Applies appropriate ECL classes based on visibility state.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-description-list__definition-item'),\n            this.isHidden ? 'ecl-description-list__definition-item--hidden' : '',\n            this.isLastVisible ? 'ecl-description-list__definition-item--last-visible' : '',\n        ].join(' ');\n    }\n\n    /**\n     * Internal state used to hide the item when exceeding the visible limit.\n     */\n    isHidden = false;\n\n    /**\n     * Indicates whether this is the last item visible before the \"see all\" action is triggered.\n     */\n    isLastVisible = false;\n}\n\n/**\n * Directive representing a container for definition list items within an ECL description list.\n *\n * Applies the ECL-specific class for the list wrapper.\n */\n@Directive({\n    selector: '[eclDescriptionListDefinitionList]',\n})\nexport class EclDescriptionListDefinitionListDirective extends ECLBaseDirective {\n    /**\n     * Applies the ECL list container class.\n     */\n    @HostBinding('class.ecl-description-list__definition-list') cmpClass = true;\n}\n",
+            "sourceCode": "import { Directive, signal } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive representing a single item in an ECL description list definition.\n *\n * Applies the appropriate styling classes and allows visibility control for \"see all\" behavior.\n */\n@Directive({\n    selector: '[eclDescriptionListDefinitionItem]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclDescriptionListDefinitionItemDirective extends ECLBaseDirective {\n    /**\n     * Internal state used to hide the item when exceeding the visible limit.\n     */\n    readonly isHidden = signal(false);\n\n    /**\n     * Indicates whether this is the last item visible before the \"see all\" action is triggered.\n     */\n    readonly isLastVisible = signal(false);\n\n    /**\n     * Applies appropriate ECL classes based on visibility state.\n     */\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-description-list__definition-item'),\n            this.isHidden() ? 'ecl-description-list__definition-item--hidden' : '',\n            this.isLastVisible() ? 'ecl-description-list__definition-item--last-visible' : '',\n        ].join(' ');\n    }\n}\n\n/**\n * Directive representing a container for definition list items within an ECL description list.\n *\n * Applies the ECL-specific class for the list wrapper.\n */\n@Directive({\n    selector: '[eclDescriptionListDefinitionList]',\n    host: {\n        class: 'ecl-description-list__definition-list',\n    },\n})\nexport class EclDescriptionListDefinitionListDirective extends ECLBaseDirective {}\n",
             "selector": "[eclDescriptionListDefinitionItem]",
             "providers": [],
             "hostDirectives": [],
@@ -17339,47 +17339,40 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies appropriate ECL classes based on visibility state.\n",
-                    "description": "<p>Applies appropriate ECL classes based on visibility state.</p>\n",
-                    "line": 17,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [
                 {
                     "name": "isHidden",
                     "coverageIgnore": false,
-                    "defaultValue": "false",
+                    "defaultValue": "signal(false)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Internal state used to hide the item when exceeding the visible limit.</p>\n",
-                    "line": 28,
-                    "rawdescription": "\n\nInternal state used to hide the item when exceeding the visible limit.\n"
+                    "line": 19,
+                    "rawdescription": "\n\nInternal state used to hide the item when exceeding the visible limit.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
                     "name": "isLastVisible",
                     "coverageIgnore": false,
-                    "defaultValue": "false",
+                    "defaultValue": "signal(false)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Indicates whether this is the last item visible before the &quot;see all&quot; action is triggered.</p>\n",
-                    "line": 33,
-                    "rawdescription": "\n\nIndicates whether this is the last item visible before the \"see all\" action is triggered.\n"
+                    "line": 24,
+                    "rawdescription": "\n\nIndicates whether this is the last item visible before the \"see all\" action is triggered.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 }
             ],
             "methodsClass": [
@@ -17425,8 +17418,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 293,
+                    "pos": 102,
+                    "end": 288,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -17445,7 +17438,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 17,
+                        "line": 29,
                         "rawdescription": "\n\nApplies appropriate ECL classes based on visibility state.\n",
                         "description": "<p>Applies appropriate ECL classes based on visibility state.</p>\n"
                     }
@@ -17463,12 +17456,12 @@
         },
         {
             "name": "EclDescriptionListDefinitionListDirective",
-            "id": "directive-EclDescriptionListDefinitionListDirective-fc40220de31177a2dea6fa119107b00bd0082dc3d12e1024ddc9698f4576a056aaa9acd67fc73674f50455461787d9e94fcaaef0d0e765cb8bad05cb42d4de96",
+            "id": "directive-EclDescriptionListDefinitionListDirective-a5b79a474de70418841c2b7c289fde4ee7297407f61a77dda587317d58ef219eedf6127dd2f6a706d095d4ecb41a18e8e29aabeb41f9b5ebc1cb26aaded13470",
             "file": "packages/ecl/components/ecl-list/ecl-description-list-definition-item.directive.ts",
             "type": "directive",
             "description": "<p>Directive representing a container for definition list items within an ECL description list.</p>\n<p>Applies the ECL-specific class for the list wrapper.</p>\n",
             "rawdescription": "\n\nDirective representing a container for definition list items within an ECL description list.\n\nApplies the ECL-specific class for the list wrapper.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive representing a single item in an ECL description list definition.\n *\n * Applies the appropriate styling classes and allows visibility control for \"see all\" behavior.\n */\n@Directive({\n    selector: '[eclDescriptionListDefinitionItem]',\n})\nexport class EclDescriptionListDefinitionItemDirective extends ECLBaseDirective {\n    /**\n     * Applies appropriate ECL classes based on visibility state.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-description-list__definition-item'),\n            this.isHidden ? 'ecl-description-list__definition-item--hidden' : '',\n            this.isLastVisible ? 'ecl-description-list__definition-item--last-visible' : '',\n        ].join(' ');\n    }\n\n    /**\n     * Internal state used to hide the item when exceeding the visible limit.\n     */\n    isHidden = false;\n\n    /**\n     * Indicates whether this is the last item visible before the \"see all\" action is triggered.\n     */\n    isLastVisible = false;\n}\n\n/**\n * Directive representing a container for definition list items within an ECL description list.\n *\n * Applies the ECL-specific class for the list wrapper.\n */\n@Directive({\n    selector: '[eclDescriptionListDefinitionList]',\n})\nexport class EclDescriptionListDefinitionListDirective extends ECLBaseDirective {\n    /**\n     * Applies the ECL list container class.\n     */\n    @HostBinding('class.ecl-description-list__definition-list') cmpClass = true;\n}\n",
+            "sourceCode": "import { Directive, signal } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive representing a single item in an ECL description list definition.\n *\n * Applies the appropriate styling classes and allows visibility control for \"see all\" behavior.\n */\n@Directive({\n    selector: '[eclDescriptionListDefinitionItem]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclDescriptionListDefinitionItemDirective extends ECLBaseDirective {\n    /**\n     * Internal state used to hide the item when exceeding the visible limit.\n     */\n    readonly isHidden = signal(false);\n\n    /**\n     * Indicates whether this is the last item visible before the \"see all\" action is triggered.\n     */\n    readonly isLastVisible = signal(false);\n\n    /**\n     * Applies appropriate ECL classes based on visibility state.\n     */\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-description-list__definition-item'),\n            this.isHidden() ? 'ecl-description-list__definition-item--hidden' : '',\n            this.isLastVisible() ? 'ecl-description-list__definition-item--last-visible' : '',\n        ].join(' ');\n    }\n}\n\n/**\n * Directive representing a container for definition list items within an ECL description list.\n *\n * Applies the ECL-specific class for the list wrapper.\n */\n@Directive({\n    selector: '[eclDescriptionListDefinitionList]',\n    host: {\n        class: 'ecl-description-list__definition-list',\n    },\n})\nexport class EclDescriptionListDefinitionListDirective extends ECLBaseDirective {}\n",
             "selector": "[eclDescriptionListDefinitionList]",
             "providers": [],
             "hostDirectives": [],
@@ -17521,46 +17514,9 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-description-list__definition-list",
-                    "actualName": "cmpClass",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies the ECL list container class.\n",
-                    "description": "<p>Applies the ECL list container class.</p>\n",
-                    "line": 48,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "cmpClass",
-                    "coverageIgnore": false,
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "<p>Applies the ECL list container class.</p>\n",
-                    "line": 48,
-                    "rawdescription": "\n\nApplies the ECL list container class.\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-description-list__definition-list'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [
                 {
                     "name": "getCssClasses",
@@ -17604,8 +17560,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 1137,
-                    "end": 1299,
+                    "pos": 1196,
+                    "end": 1358,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -22186,12 +22142,12 @@
         },
         {
             "name": "EclLabelDirective",
-            "id": "directive-EclLabelDirective-87b7bcc0e9fade6e9ad2b3819d411a9ce7034aafc8f630b873bb2423b9e76886c092a0c0e55a92b101b721b316ce6e0d64c47f74047beacf72814feacdf20d37",
+            "id": "directive-EclLabelDirective-1d4333f6129baa7b2cd079990628f7696c131397449388ed0807ea786303a5bd744ee268444bcd218b131494895f217e591960f1b00c660c1376e8ed3be90388",
             "file": "packages/ecl/components/ecl-label/ecl-label.directive.ts",
             "type": "directive",
             "description": "<p>Directive for applying ECL label styles.</p>\n<p>Supports multiple visual variants based on importance or context.\nAdds appropriate ECL classes dynamically.</p>\n",
             "rawdescription": "\n\nDirective for applying ECL label styles.\n\nSupports multiple visual variants based on importance or context.\nAdds appropriate ECL classes dynamically.\n",
-            "sourceCode": "import { Directive, HostBinding, input } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive for applying ECL label styles.\n *\n * Supports multiple visual variants based on importance or context.\n * Adds appropriate ECL classes dynamically.\n */\n@Directive({\n    selector: '[eclLabel]',\n})\nexport class EclLabelDirective extends ECLBaseDirective {\n    /**\n     * Defines the visual variant of the label.\n     * \n     * - `'low'` – default styling\n     * - `'medium'` – medium emphasis\n     * - `'high'` – high emphasis\n     * - `'highlight'` – special highlight\n     *\n     * @default 'low'\n     */\n    readonly variant = input<'low' | 'medium' | 'high' | 'highlight'>('low');\n\n    /**\n     * CSS classes applied to the host element.\n     * Combines base ECL label class with the variant modifier.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-label'), `ecl-label--${this.variant()}`].join(' ').trim();\n    }\n}\n",
+            "sourceCode": "import { Directive, input } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive for applying ECL label styles.\n *\n * Supports multiple visual variants based on importance or context.\n * Adds appropriate ECL classes dynamically.\n */\n@Directive({\n    selector: '[eclLabel]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclLabelDirective extends ECLBaseDirective {\n    /**\n     * Defines the visual variant of the label.\n     * \n     * - `'low'` – default styling\n     * - `'medium'` – medium emphasis\n     * - `'high'` – high emphasis\n     * - `'highlight'` – special highlight\n     *\n     * @default 'low'\n     */\n    readonly variant = input<'low' | 'medium' | 'high' | 'highlight'>('low');\n\n    /**\n     * CSS classes applied to the host element.\n     * Combines base ECL label class with the variant modifier.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-label'), `ecl-label--${this.variant()}`].join(' ').trim();\n    }\n}\n",
             "selector": "[eclLabel]",
             "providers": [],
             "hostDirectives": [],
@@ -22207,23 +22163,23 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Defines the visual variant of the label.</p>\n<ul>\n<li><code>&#39;low&#39;</code> – default styling</li>\n<li><code>&#39;medium&#39;</code> – medium emphasis</li>\n<li><code>&#39;high&#39;</code> – high emphasis</li>\n<li><code>&#39;highlight&#39;</code> – special highlight</li>\n</ul>\n<p>&#39;low&#39;</p>\n",
-                    "line": 24,
+                    "line": 27,
                     "rawdescription": "\n\nDefines the visual variant of the label.\n\n- `'low'` – default styling\n- `'medium'` – medium emphasis\n- `'high'` – high emphasis\n- `'highlight'` – special highlight\n\n'low'\n",
                     "modifierKind": [
                         148
                     ],
                     "jsdoctags": [
                         {
-                            "pos": 613,
-                            "end": 633,
+                            "pos": 652,
+                            "end": 672,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 614,
-                                "end": 621,
+                                "pos": 653,
+                                "end": 660,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -22282,20 +22238,7 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nCSS classes applied to the host element.\nCombines base ECL label class with the variant modifier.\n",
-                    "description": "<p>CSS classes applied to the host element.\nCombines base ECL label class with the variant modifier.</p>\n",
-                    "line": 31,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [],
             "methodsClass": [
@@ -22341,8 +22284,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 114,
-                    "end": 282,
+                    "pos": 101,
+                    "end": 269,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -22361,7 +22304,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 31,
+                        "line": 33,
                         "rawdescription": "\n\nCSS classes applied to the host element.\nCombines base ECL label class with the variant modifier.\n",
                         "description": "<p>CSS classes applied to the host element.\nCombines base ECL label class with the variant modifier.</p>\n"
                     }
@@ -22604,12 +22547,12 @@
         },
         {
             "name": "EclLinkDirective",
-            "id": "directive-EclLinkDirective-739a62b701c6c8fceceac1560ad0dbc240f3b0b4168c9009ce68f360a71af9549945dc5181e5e24dd52baf85cc6540f26d5614d44ffa294316e0d4d71e65874f",
+            "id": "directive-EclLinkDirective-fb6b45fe7d77a582abd56929a240d6a1418c1ca58d979b7d3c29ff7989887b38145c46f3cd3c8055fcab7abe78119fa333c24d646e16e636785744a886b96932",
             "file": "packages/ecl/components/ecl-link/ecl-link.directive.ts",
             "type": "directive",
             "description": "<p>&#39;eclLink&#39; directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.</p>\n",
             "rawdescription": "\n\n'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.\n",
-            "sourceCode": "import { AfterContentInit, booleanAttribute, ChangeDetectorRef, contentChildren, Directive, ElementRef, HostBinding, inject, input, Renderer2, effect, computed, forwardRef } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * 'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.\n */\n@Directive({\n    selector: '[eclLink]',\n})\nexport class EclLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    el = inject(ElementRef);\n    renderer = inject(Renderer2);\n    cd = inject(ChangeDetectorRef);\n\n    /**\n     * Additional HTML attributes to be set on the link element.\n     * Used e.g. by social-media-follow for passing extra_attributes.\n     */\n    extraAttributes = input<{ name: string; value?: string | null }[] | undefined>();\n\n    /**\n     * Property to style the component as 'inverted' (with dark background). Can be used alone or with 'standalone' variant.\n     */\n    isInverted = input(false, { transform: booleanAttribute });\n\n    /**\n     * Property to style the component if it consist only of an icon.\n     */\n    isIconOnly = input(false, { transform: booleanAttribute });\n\n    /** Adds class for hightlighted link (works only with 'primary' variant)\n     * @deprecated - to be removed in v23. Use variant='primary-highlight', as only primary variant can be highlighted.\n    */\n    isHighlight = input(false, { transform: booleanAttribute });\n\n    /**\n     * @deprecated - will be removed in v21. Deprecated on ECL side.\n     */\n    isNoVisited = input(false, { transform: booleanAttribute });\n\n    isBranded = input(false, { transform: booleanAttribute });\n\n    /**\n     * With 'variant' property user can add some more specific styling to the <a> component.\n     */\n    variant = input<'standalone' | 'primary' | 'secondary' | 'secondary-neutral' | 'primary-neutral' | 'primary-highlight'>();\n\n    eclIconComponents = contentChildren(forwardRef(() => EclIconComponent), { descendants: true });\n\n    constructor() {\n        super();\n        effect(() => {\n            const attrs = this.extraAttributes();\n            if (attrs && attrs.length) {\n                attrs.forEach((attr) => {\n                    if (attr?.name) {\n                        this.el.nativeElement.setAttribute(attr.name, attr.value ?? '');\n                    }\n                });\n            }\n        });\n    }\n\n    @HostBinding('class.ecl-link--inverted')\n    get hostIsInverted(): boolean {\n        return (!this.variant() || this.variant() === 'standalone') && this.isInverted();\n    }\n\n    @HostBinding('class.ecl-link--brand')\n    get hostIsBranded(): boolean {\n        return (!this.variant() || this.variant() === 'standalone') && this.isBranded();\n    }\n\n    @HostBinding('class.ecl-link--icon-only')\n    get hostIsIconOnly(): boolean {\n        return this.isIconOnly();\n    }\n\n    @HostBinding('class.ecl-link--icon')\n    get hasIcon(): boolean {\n        return this._hasIcon();\n    }\n\n    private _hasIcon = computed(() => {\n        return this.eclIconComponents()?.length > 0;\n    });\n\n    /**\n     * Adds speific ECL classes to the <a> component.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        const variantClass = this.variant()\n            ? (this.variant() === 'secondary' && this.isInverted()\n                ? 'ecl-link--secondary-inverted'\n                : `ecl-link--${this.variant()}`)\n            : '';\n\n        return [super.getCssClasses('ecl-link'),\n            variantClass,\n            (this.variant() === 'primary' && this.isHighlight()) ? 'ecl-link--primary-highlight' : '',\n        ].join(' ').trim();\n    }\n\n    ngAfterContentInit(): void {\n        // Add additional class to the child icon, if any.\n        if (this.eclIconComponents()?.length > 0 ) {\n            setTimeout(() => {\n                this.eclIconComponents().forEach((icn) => {\n                    icn.addExtraClass('ecl-link__icon');\n                });\n                this.cd.markForCheck();\n            });\n        }\n    }\n\n    /**\n     * Calls the native focus() method of the default HTML element.\n     */\n    onFocus(): void {\n        this.el.nativeElement.focus();\n    }\n\n    /**\n     * Calls the native click() method of the default HTML element.\n     */\n    onClick(): void {\n        this.el.nativeElement.click();\n    }\n\n    /**\n     * Calls the native blur() method of the default HTML element.\n     */\n    onBlur(): void {\n        this.el.nativeElement.blur();\n    }\n}\n",
+            "sourceCode": "import { booleanAttribute, contentChildren, Directive, ElementRef, HostBinding, inject, input, Renderer2, effect, computed, forwardRef } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * 'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.\n */\n@Directive({\n    selector: '[eclLink]',\n})\nexport class EclLinkDirective extends ECLBaseDirective {\n    el = inject(ElementRef);\n    renderer = inject(Renderer2);\n\n    /**\n     * Additional HTML attributes to be set on the link element.\n     * Used e.g. by social-media-follow for passing extra_attributes.\n     */\n    extraAttributes = input<{ name: string; value?: string | null }[] | undefined>();\n\n    /**\n     * Property to style the component as 'inverted' (with dark background). Can be used alone or with 'standalone' variant.\n     */\n    isInverted = input(false, { transform: booleanAttribute });\n\n    /**\n     * Property to style the component if it consist only of an icon.\n     */\n    isIconOnly = input(false, { transform: booleanAttribute });\n\n    /** Adds class for hightlighted link (works only with 'primary' variant)\n     * @deprecated - to be removed in v23. Use variant='primary-highlight', as only primary variant can be highlighted.\n    */\n    isHighlight = input(false, { transform: booleanAttribute });\n\n    /**\n     * @deprecated - will be removed in v21. Deprecated on ECL side.\n     */\n    isNoVisited = input(false, { transform: booleanAttribute });\n\n    isBranded = input(false, { transform: booleanAttribute });\n\n    /**\n     * With 'variant' property user can add some more specific styling to the <a> component.\n     */\n    variant = input<'standalone' | 'primary' | 'secondary' | 'secondary-neutral' | 'primary-neutral' | 'primary-highlight'>();\n\n    eclIconComponents = contentChildren(forwardRef(() => EclIconComponent), { descendants: true });\n\n    constructor() {\n        super();\n        effect(() => {\n            const attrs = this.extraAttributes();\n            if (attrs && attrs.length) {\n                attrs.forEach((attr) => {\n                    if (attr?.name) {\n                        this.el.nativeElement.setAttribute(attr.name, attr.value ?? '');\n                    }\n                });\n            }\n        });\n\n        // Add 'ecl-link__icon' class to child icons reactively.\n        effect(() => {\n            const icons = this.eclIconComponents();\n            if (icons?.length > 0) {\n                icons.forEach((icn) => {\n                    icn.addExtraClass('ecl-link__icon');\n                });\n            }\n        });\n    }\n\n    @HostBinding('class.ecl-link--inverted')\n    get hostIsInverted(): boolean {\n        return (!this.variant() || this.variant() === 'standalone') && this.isInverted();\n    }\n\n    @HostBinding('class.ecl-link--brand')\n    get hostIsBranded(): boolean {\n        return (!this.variant() || this.variant() === 'standalone') && this.isBranded();\n    }\n\n    @HostBinding('class.ecl-link--icon-only')\n    get hostIsIconOnly(): boolean {\n        return this.isIconOnly();\n    }\n\n    @HostBinding('class.ecl-link--icon')\n    get hasIcon(): boolean {\n        return this._hasIcon();\n    }\n\n    private _hasIcon = computed(() => {\n        return this.eclIconComponents()?.length > 0;\n    });\n\n    /**\n     * Adds speific ECL classes to the <a> component.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        const variantClass = this.variant()\n            ? (this.variant() === 'secondary' && this.isInverted()\n                ? 'ecl-link--secondary-inverted'\n                : `ecl-link--${this.variant()}`)\n            : '';\n\n        return [super.getCssClasses('ecl-link'),\n            variantClass,\n            (this.variant() === 'primary' && this.isHighlight()) ? 'ecl-link--primary-highlight' : '',\n        ].join(' ').trim();\n    }\n\n    /**\n     * Calls the native focus() method of the default HTML element.\n     */\n    onFocus(): void {\n        this.el.nativeElement.focus();\n    }\n\n    /**\n     * Calls the native click() method of the default HTML element.\n     */\n    onClick(): void {\n        this.el.nativeElement.click();\n    }\n\n    /**\n     * Calls the native blur() method of the default HTML element.\n     */\n    onBlur(): void {\n        this.el.nativeElement.blur();\n    }\n}\n",
             "selector": "[eclLink]",
             "providers": [],
             "hostDirectives": [],
@@ -22624,7 +22567,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Additional HTML attributes to be set on the link element.\nUsed e.g. by social-media-follow for passing extra_attributes.</p>\n",
-                    "line": 20,
+                    "line": 19,
                     "rawdescription": "\n\nAdditional HTML attributes to be set on the link element.\nUsed e.g. by social-media-follow for passing extra_attributes.\n",
                     "required": false
                 },
@@ -22638,7 +22581,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 42,
+                    "line": 41,
                     "rawdescription": "\n",
                     "required": false
                 },
@@ -22652,20 +22595,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Adds class for hightlighted link (works only with &#39;primary&#39; variant)</p>\n",
-                    "line": 35,
+                    "line": 34,
                     "rawdescription": "\nAdds class for hightlighted link (works only with 'primary' variant)\n",
                     "jsdoctags": [
                         {
-                            "pos": 1354,
-                            "end": 1471,
+                            "pos": 1253,
+                            "end": 1370,
                             "kind": 332,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1355,
-                                "end": 1365,
+                                "pos": 1254,
+                                "end": 1264,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -22687,7 +22630,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Property to style the component if it consist only of an icon.</p>\n",
-                    "line": 30,
+                    "line": 29,
                     "rawdescription": "\n\nProperty to style the component if it consist only of an icon.\n",
                     "required": false
                 },
@@ -22701,7 +22644,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Property to style the component as &#39;inverted&#39; (with dark background). Can be used alone or with &#39;standalone&#39; variant.</p>\n",
-                    "line": 25,
+                    "line": 24,
                     "rawdescription": "\n\nProperty to style the component as 'inverted' (with dark background). Can be used alone or with 'standalone' variant.\n",
                     "required": false
                 },
@@ -22715,20 +22658,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 40,
+                    "line": 39,
                     "rawdescription": "\n\n",
                     "jsdoctags": [
                         {
-                            "pos": 1555,
-                            "end": 1622,
+                            "pos": 1454,
+                            "end": 1521,
                             "kind": 332,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1556,
-                                "end": 1566,
+                                "pos": 1455,
+                                "end": 1465,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -22749,7 +22692,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>With &#39;variant&#39; property user can add some more specific styling to the <a> component.</p>\n",
-                    "line": 47,
+                    "line": 46,
                     "rawdescription": "\n\nWith 'variant' property user can add some more specific styling to the <a> component.\n",
                     "required": false
                 },
@@ -22809,7 +22752,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAdds speific ECL classes to the <a> component.\n",
                     "description": "<p>Adds speific ECL classes to the <a> component.</p>\n",
-                    "line": 93,
+                    "line": 102,
                     "type": "string",
                     "decorators": []
                 },
@@ -22821,7 +22764,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 71,
+                    "line": 80,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -22833,7 +22776,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 81,
+                    "line": 90,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -22845,7 +22788,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 76,
+                    "line": 85,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -22857,26 +22800,13 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 66,
+                    "line": 75,
                     "type": "boolean",
                     "decorators": []
                 }
             ],
             "hostListeners": [],
             "propertiesClass": [
-                {
-                    "name": "cd",
-                    "coverageIgnore": false,
-                    "defaultValue": "inject(ChangeDetectorRef)",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 14,
-                    "rawdescription": "\n"
-                },
                 {
                     "name": "eclIconComponents",
                     "coverageIgnore": false,
@@ -22887,7 +22817,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 49,
+                    "line": 48,
                     "rawdescription": "\n"
                 },
                 {
@@ -22918,19 +22848,6 @@
                 }
             ],
             "methodsClass": [
-                {
-                    "name": "ngAfterContentInit",
-                    "coverageIgnore": false,
-                    "args": [],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 106,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": ""
-                },
                 {
                     "name": "onBlur",
                     "coverageIgnore": false,
@@ -22938,7 +22855,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 135,
+                    "line": 132,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalls the native blur() method of the default HTML element.\n",
@@ -22951,7 +22868,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 128,
+                    "line": 125,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalls the native click() method of the default HTML element.\n",
@@ -22964,7 +22881,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 121,
+                    "line": 118,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalls the native focus() method of the default HTML element.\n",
@@ -23012,8 +22929,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 312,
-                    "end": 446,
+                    "pos": 275,
+                    "end": 409,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -23025,16 +22942,13 @@
             "extends": [
                 "ECLBaseDirective"
             ],
-            "implements": [
-                "AfterContentInit"
-            ],
             "constructorObj": {
                 "name": "constructor",
                 "description": "",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 49,
+                "line": 48,
                 "rawdescription": "\n"
             },
             "accessors": {
@@ -23044,7 +22958,7 @@
                         "name": "hostIsInverted",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 66,
+                        "line": 75,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -23055,7 +22969,7 @@
                         "name": "hostIsBranded",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 71,
+                        "line": 80,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -23066,7 +22980,7 @@
                         "name": "hostIsIconOnly",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 76,
+                        "line": 85,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -23077,7 +22991,7 @@
                         "name": "hasIcon",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 81,
+                        "line": 90,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -23088,7 +23002,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 93,
+                        "line": 102,
                         "rawdescription": "\n\nAdds speific ECL classes to the <a> component.\n",
                         "description": "<p>Adds speific ECL classes to the <a> component.</p>\n"
                     }
@@ -23100,10 +23014,6 @@
                     {
                         "name": "ECLBaseDirective",
                         "type": "directive"
-                    },
-                    {
-                        "name": "AfterContentInit",
-                        "type": "interface"
                     }
                 ]
             }
@@ -23878,12 +23788,12 @@
         },
         {
             "name": "EclLoadingIndicatorLabelDirective",
-            "id": "directive-EclLoadingIndicatorLabelDirective-09d80231d4325c423cc8c21058260306dbebcf16a541c486160192dcbcd3967800aada32b16609fc3195685fceb1866a754839bb8fddfb6fea442465873ae516",
+            "id": "directive-EclLoadingIndicatorLabelDirective-105f4f16a23a68208bc6803868c3a673e2cb0abea445aaa46a19ebc7ce6d14ff4c574689621c8404aff41a107bf365c152478007496029528281429b372411f0",
             "file": "packages/ecl/components/ecl-loading-indicator/ecl-loading-indicator-label.directive.ts",
             "type": "directive",
             "description": "<p>Directive for styling the label text of an ECL loading indicator.</p>\n<p>Adds the <code>ecl-spinner__text</code> class to the host element.</p>\n",
             "rawdescription": "\n\nDirective for styling the label text of an ECL loading indicator.\n\nAdds the `ecl-spinner__text` class to the host element.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\n\n/**\n * Directive for styling the label text of an ECL loading indicator.\n *\n * Adds the `ecl-spinner__text` class to the host element.\n */\n@Directive({\n    selector: '[eclLoadingIndicatorLabel]',\n})\nexport class EclLoadingIndicatorLabelDirective {\n    /**\n     * Applies the ECL class for spinner label text.\n     */\n    @HostBinding('class.ecl-spinner__text') className = true;\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\n\n/**\n * Directive for styling the label text of an ECL loading indicator.\n *\n * Adds the `ecl-spinner__text` class to the host element.\n */\n@Directive({\n    selector: '[eclLoadingIndicatorLabel]',\n    host: {\n        '[class.ecl-spinner__text]': 'className',\n    },\n})\nexport class EclLoadingIndicatorLabelDirective {\n    /**\n     * Applies the ECL class for spinner label text.\n     */\n    className = true;\n}\n",
             "selector": "[eclLoadingIndicatorLabel]",
             "providers": [],
             "hostDirectives": [],
@@ -23892,21 +23802,7 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-spinner__text",
-                    "actualName": "className",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies the ECL class for spinner label text.\n",
-                    "description": "<p>Applies the ECL class for spinner label text.</p>\n",
-                    "line": 15,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [
                 {
@@ -23919,25 +23815,16 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Applies the ECL class for spinner label text.</p>\n",
-                    "line": 15,
-                    "rawdescription": "\n\nApplies the ECL class for spinner label text.\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class.ecl-spinner__text'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "line": 18,
+                    "rawdescription": "\n\nApplies the ECL class for spinner label text.\n"
                 }
             ],
             "methodsClass": [],
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 57,
-                    "end": 195,
+                    "pos": 44,
+                    "end": 182,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -23954,12 +23841,12 @@
         },
         {
             "name": "EclLoadingIndicatorOverlayDirective",
-            "id": "directive-EclLoadingIndicatorOverlayDirective-2a745f05195ebf912b136b0b6b8d3b51b5fec2550ad0455e6e431230a7650b417ac225f4c6e6d1411f7b4f7f16b248633b90835434e490d98b467b23d2e2342c",
+            "id": "directive-EclLoadingIndicatorOverlayDirective-f77d352395d27b2fbc37e7853c5f17b71a8a4077968fb655ababc246774f76ee2aa3cf6e9447c150b97dbebc15f19e1b2b9740a17b725ffe4ab628f86472f558",
             "file": "packages/ecl/components/ecl-loading-indicator/ecl-loading-indicator-overlay.directive.ts",
             "type": "directive",
             "description": "<p>Directive that adds an overlay layer to an ECL loading indicator.</p>\n<p>Automatically applies the ECL spinner overlay classes.</p>\n",
             "rawdescription": "\n\nDirective that adds an overlay layer to an ECL loading indicator.\n\nAutomatically applies the ECL spinner overlay classes.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that adds an overlay layer to an ECL loading indicator.\n *\n * Automatically applies the ECL spinner overlay classes.\n */\n@Directive({\n    selector: '[eclLoadingIndicatorOverlay]',\n})\nexport class EclLoadingIndicatorOverlayDirective extends ECLBaseDirective {\n    /**\n     * Applies the CSS classes for the spinner overlay.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-spinner__overlay ecl-spinner__overlay--visible')].join(' ').trim();\n    }\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that adds an overlay layer to an ECL loading indicator.\n *\n * Automatically applies the ECL spinner overlay classes.\n */\n@Directive({\n    selector: '[eclLoadingIndicatorOverlay]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclLoadingIndicatorOverlayDirective extends ECLBaseDirective {\n    /**\n     * Applies the CSS classes for the spinner overlay.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-spinner__overlay ecl-spinner__overlay--visible')].join(' ').trim();\n    }\n}\n",
             "selector": "[eclLoadingIndicatorOverlay]",
             "providers": [],
             "hostDirectives": [],
@@ -24012,20 +23899,7 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies the CSS classes for the spinner overlay.\n",
-                    "description": "<p>Applies the CSS classes for the spinner overlay.</p>\n",
-                    "line": 17,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [],
             "methodsClass": [
@@ -24071,8 +23945,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 244,
+                    "pos": 94,
+                    "end": 231,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -24091,7 +23965,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 17,
+                        "line": 19,
                         "rawdescription": "\n\nApplies the CSS classes for the spinner overlay.\n",
                         "description": "<p>Applies the CSS classes for the spinner overlay.</p>\n"
                     }
@@ -24109,12 +23983,12 @@
         },
         {
             "name": "EclMediaContainerCaptionDirective",
-            "id": "directive-EclMediaContainerCaptionDirective-ef09225fb961071bf08418a542c37b7576b1c347143c2315f3bf21c91b877d1106b2e434e7b9bd741a74b29526c5bc11a60f689f538c791eb6aa1a57aab04a04",
+            "id": "directive-EclMediaContainerCaptionDirective-8cbae748f044a2b10bf6ac742afd1f1c1aa09c84d98f0f39a369d2635efd4c173547de425b435980d154c2b59f0dcd64d047567527008d1ea0a075cc7d1f571f",
             "file": "packages/ecl/components/ecl-media-container/ecl-media-container-caption.directive.ts",
             "type": "directive",
             "description": "<p>Adds styling and attributes to the media container caption element.</p>\n",
             "rawdescription": "\n\nAdds styling and attributes to the media container caption element.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Adds styling and attributes to the media container caption element.\n */\n@Directive({\n    selector: 'figcaption[eclMediaContainerCaption]',\n})\nexport class EclMediaContainerCaptionDirective extends ECLBaseDirective {\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-media-container__caption')].join(' ').trim();\n    }\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Adds styling and attributes to the media container caption element.\n */\n@Directive({\n    selector: 'figcaption[eclMediaContainerCaption]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclMediaContainerCaptionDirective extends ECLBaseDirective {\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-media-container__caption')].join(' ').trim();\n    }\n}\n",
             "selector": "figcaption[eclMediaContainerCaption]",
             "providers": [],
             "hostDirectives": [],
@@ -24167,20 +24041,7 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 12,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [],
             "methodsClass": [
@@ -24226,8 +24087,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 185,
+                    "pos": 94,
+                    "end": 172,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -24246,7 +24107,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 12,
+                        "line": 14,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -24264,12 +24125,12 @@
         },
         {
             "name": "EclMediaContainerCreditDirective",
-            "id": "directive-EclMediaContainerCreditDirective-fad43448fcb9c60b78c6ed51b4f6cb5995ef17f040acd4a364862f7275a7f026a7f285d23748201a9bb40e5d7270965e23576b636ec0578f84705d485f936cdc",
+            "id": "directive-EclMediaContainerCreditDirective-46dff5a267e45c1ae989bacb6887afc00952df088052300f1af502f6ff875375266d0df406245d6d59b128782e892c2263ae003e6d1050b05730b97d914d1b64",
             "file": "packages/ecl/components/ecl-media-container/ecl-media-container-credit.directive.ts",
             "type": "directive",
             "description": "<p>Adds styling and attributes to the media container credit element.</p>\n",
             "rawdescription": "\n\nAdds styling and attributes to the media container credit element.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Adds styling and attributes to the media container credit element.\n */\n@Directive({\n    selector: 'footer[eclMediaContainerCredit]',\n})\nexport class EclMediaContainerCreditDirective extends ECLBaseDirective {\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-media-container__credit')].join(' ').trim();\n    }\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Adds styling and attributes to the media container credit element.\n */\n@Directive({\n    selector: 'footer[eclMediaContainerCredit]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclMediaContainerCreditDirective extends ECLBaseDirective {\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-media-container__credit')].join(' ').trim();\n    }\n}\n",
             "selector": "footer[eclMediaContainerCredit]",
             "providers": [],
             "hostDirectives": [],
@@ -24322,20 +24183,7 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 12,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [],
             "methodsClass": [
@@ -24381,8 +24229,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 184,
+                    "pos": 94,
+                    "end": 171,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -24401,7 +24249,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 12,
+                        "line": 14,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -24419,28 +24267,17 @@
         },
         {
             "name": "EclMediaContainerIframeDirective",
-            "id": "directive-EclMediaContainerIframeDirective-1eda71da14ca8ab3c509f2717b4246e6406ca4d21a00ebad8f27c906e3c058099cda81e6dc7d9450cfb5e12d597e310eb445748176765568057c3b9564826bcc",
+            "id": "directive-EclMediaContainerIframeDirective-838b18f9ffd6a551b3638d611f9034c2fbd3a8eee0dbd5a34cb184d1cfae5c1390bcee6e5f216f0497de35c6c2d13d118d80d49f97067d2be4d5d00489413a22",
             "file": "packages/ecl/components/ecl-media-container/ecl-media-container-iframe.directive.ts",
             "type": "directive",
             "description": "<p>Adds styling and attributes to the iframe element.</p>\n",
             "rawdescription": "\n\nAdds styling and attributes to the iframe element.\n",
-            "sourceCode": "import { Directive, ElementRef, HostBinding, Input, inject, input } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Adds styling and attributes to the iframe element.\n */\n@Directive({\n    selector: 'iframe[eclMediaContainerIframe]',\n})\nexport class EclMediaContainerIframeDirective extends ECLBaseDirective {\n    readonly width = input(undefined);\n    readonly height = input(undefined);\n    @Input()\n    @HostBinding('style.aspect-ratio')\n    get ratio(): string {\n        return this.hasCustomRatio ? this.calculateCustomRatio() : null;\n    }\n\n    hasCustomRatio = false;\n    private elem = inject(ElementRef);\n\n    calculateCustomRatio(): string {\n        let iframeHeight = this.height();\n        let iframeWidth = this.width();\n        if (!iframeWidth || !iframeHeight) {\n            iframeWidth = this.elem.nativeElement.offsetWidth;\n            iframeHeight = this.elem.nativeElement.offsetHeight;\n        }\n        return `${iframeWidth}/${iframeHeight}`;\n    }\n}\n",
+            "sourceCode": "import { Directive, ElementRef, inject, input } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Adds styling and attributes to the iframe element.\n */\n@Directive({\n    selector: 'iframe[eclMediaContainerIframe]',\n    host: {\n        '[style.aspect-ratio]': 'ratio',\n    },\n})\nexport class EclMediaContainerIframeDirective extends ECLBaseDirective {\n    readonly width = input(undefined);\n    readonly height = input(undefined);\n\n    hasCustomRatio = false;\n    private elem = inject(ElementRef);\n\n    /**\n     * Aspect ratio applied as a host style binding. Derived from the\n     * `width`/`height` inputs (falling back to the element's measured size),\n     * and only produced when a custom ratio is requested.\n     */\n    get ratio(): string | null {\n        return this.hasCustomRatio ? this.calculateCustomRatio() : null;\n    }\n\n    calculateCustomRatio(): string {\n        let iframeHeight = this.height();\n        let iframeWidth = this.width();\n        if (!iframeWidth || !iframeHeight) {\n            iframeWidth = this.elem.nativeElement.offsetWidth;\n            iframeHeight = this.elem.nativeElement.offsetHeight;\n        }\n        return `${iframeWidth}/${iframeHeight}`;\n    }\n}\n",
             "selector": "iframe[eclMediaContainerIframe]",
             "providers": [],
             "hostDirectives": [],
             "standalone": false,
             "inputsClass": [
-                {
-                    "coverageIgnore": false,
-                    "name": "ratio",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 15,
-                    "type": "string",
-                    "decorators": []
-                },
                 {
                     "name": "height",
                     "coverageIgnore": false,
@@ -24450,7 +24287,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 12,
+                    "line": 15,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -24466,7 +24303,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 11,
+                    "line": 14,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -24533,7 +24370,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 19,
+                    "line": 17,
                     "rawdescription": "\n"
                 }
             ],
@@ -24545,7 +24382,7 @@
                     "optional": false,
                     "returnType": "string",
                     "typeParameters": [],
-                    "line": 22,
+                    "line": 29,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -24593,8 +24430,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 141,
-                    "end": 202,
+                    "pos": 121,
+                    "end": 182,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -24611,11 +24448,11 @@
                     "name": "ratio",
                     "getSignature": {
                         "name": "ratio",
-                        "type": "string",
-                        "returnType": "string",
-                        "line": 15,
-                        "rawdescription": "\n",
-                        "description": ""
+                        "type": "unknown",
+                        "returnType": "string | null",
+                        "line": 25,
+                        "rawdescription": "\n\nAspect ratio applied as a host style binding. Derived from the\n`width`/`height` inputs (falling back to the element's measured size),\nand only produced when a custom ratio is requested.\n",
+                        "description": "<p>Aspect ratio applied as a host style binding. Derived from the\n<code>width</code>/<code>height</code> inputs (falling back to the element&#39;s measured size),\nand only produced when a custom ratio is requested.</p>\n"
                     }
                 }
             },
@@ -24631,12 +24468,12 @@
         },
         {
             "name": "EclMediaContainerItemAudioDescriptionDirective",
-            "id": "directive-EclMediaContainerItemAudioDescriptionDirective-4cfde9636b7a587838cee9aa4694078d90cfce8916ff8f431ee1b6c55d7ec0277b5f97445b9a229fc0ff77ac3bc7010a7b8493ecef77e9f1289cf2d0ec075e92",
+            "id": "directive-EclMediaContainerItemAudioDescriptionDirective-b17bc8fb1bc7be353f925e271b35eab6c9200d081b149fa477e1e78583c63cbecedfde7c0d7e62695de2801b5cc4dd08778a24bd1f1773628aa9caeef7e4fa2b",
             "file": "packages/ecl/components/ecl-media-container/ecl-media-container-item-audio-description.directive.ts",
             "type": "directive",
             "description": "<p>Adds styling to the media container description.</p>\n",
             "rawdescription": "\n\nAdds styling to the media container description.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Adds styling to the media container description.\n */\n@Directive({\n    selector: '[eclMediaContainerItemAudioDescription]',\n})\nexport class EclMediaContainerItemAudioDescriptionDirective extends ECLBaseDirective {\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-media-container__media-audio')].join(' ').trim();\n    }\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Adds styling to the media container description.\n */\n@Directive({\n    selector: '[eclMediaContainerItemAudioDescription]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclMediaContainerItemAudioDescriptionDirective extends ECLBaseDirective {\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-media-container__media-audio')].join(' ').trim();\n    }\n}\n",
             "selector": "[eclMediaContainerItemAudioDescription]",
             "providers": [],
             "hostDirectives": [],
@@ -24689,20 +24526,7 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 12,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [],
             "methodsClass": [
@@ -24748,8 +24572,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 166,
+                    "pos": 94,
+                    "end": 153,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -24768,7 +24592,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 12,
+                        "line": 14,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -24786,12 +24610,12 @@
         },
         {
             "name": "EclMediaContainerItemDirective",
-            "id": "directive-EclMediaContainerItemDirective-f31e72c16aae2abbb963be72472f18883f7639a28df901755b1d3b9a18d4b00b2a658fc66d7cb108a80dc4a826c7e4f8db546ca9d03161ffa4fb67e7f6a3a9e2",
+            "id": "directive-EclMediaContainerItemDirective-90aa274c665c54f4dabcca5a22834d9c336f03a9d2ddf1fc78e6880a3bc07c7625392ed6ae7d0d77eb9ffa07269903d6b64567402d559826c7ac28fe456f5929",
             "file": "packages/ecl/components/ecl-media-container/ecl-media-container-item.directive.ts",
             "type": "directive",
             "description": "<p>Adds styling and functionality to the media container item /image.</p>\n",
             "rawdescription": "\n\nAdds styling and functionality to the media container item /image.\n",
-            "sourceCode": "import { AfterContentInit, Directive, ElementRef, HostBinding, PLATFORM_ID, afterNextRender, inject, input, contentChild } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclMediaContainerIframeDirective } from './ecl-media-container-iframe.directive';\nimport { isPlatformBrowser } from '@angular/common';\n\n/**\n * Adds styling and functionality to the media container item /image.\n */\n@Directive({\n    selector: '[eclMediaContainerItem], img[eclMediaContainerImage]',\n})\nexport class EclMediaContainerItemDirective extends ECLBaseDirective implements AfterContentInit {\n    el = inject(ElementRef);\n\n    readonly ratio = input<string>(undefined);\n    readonly contentIframe = contentChild(EclMediaContainerIframeDirective);\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        const ratio = this.ratio();\n        return [\n            super.getCssClasses('ecl-media-container__media'),\n            ratio ? `ecl-media-container__media--ratio-${ratio}` : '',\n            this.isVideo ? 'ecl-video' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    public isVideo = false;\n    private platformId = inject(PLATFORM_ID);\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.setIframeUrl();\n        });\n    }\n\n    ngAfterContentInit(): void {\n        const contentIframe = this.contentIframe();\n        if (contentIframe) {\n            contentIframe.hasCustomRatio = this.ratio() ? false : true;\n        }\n        if (isPlatformBrowser(this.platformId)) {\n            const selector = this.el.nativeElement.tagName;\n            this.isVideo = selector === 'VIDEO';\n        }\n    }\n\n    // TODO: is this really needed?\n    setIframeUrl(): void {\n        if (this.el.nativeElement.lastChild && this.el.nativeElement.lastChild.nodeName === 'IFRAME') {\n            const iframe = this.el.nativeElement.lastChild;\n            const iframeUrl = new URL(iframe.src);\n            if (iframeUrl.host.includes('youtube')) {\n                iframe.src = iframeUrl;\n            }\n        }\n    }\n}\n",
+            "sourceCode": "import { AfterContentInit, Directive, ElementRef, PLATFORM_ID, afterNextRender, inject, input, contentChild } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclMediaContainerIframeDirective } from './ecl-media-container-iframe.directive';\nimport { isPlatformBrowser } from '@angular/common';\n\n/**\n * Adds styling and functionality to the media container item /image.\n */\n@Directive({\n    selector: '[eclMediaContainerItem], img[eclMediaContainerImage]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclMediaContainerItemDirective extends ECLBaseDirective implements AfterContentInit {\n    el = inject(ElementRef);\n\n    readonly ratio = input<string>(undefined);\n    readonly contentIframe = contentChild(EclMediaContainerIframeDirective);\n\n    get cssClasses(): string {\n        const ratio = this.ratio();\n        return [\n            super.getCssClasses('ecl-media-container__media'),\n            ratio ? `ecl-media-container__media--ratio-${ratio}` : '',\n            this.isVideo ? 'ecl-video' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    public isVideo = false;\n    private platformId = inject(PLATFORM_ID);\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.setIframeUrl();\n        });\n    }\n\n    ngAfterContentInit(): void {\n        const contentIframe = this.contentIframe();\n        if (contentIframe) {\n            contentIframe.hasCustomRatio = this.ratio() ? false : true;\n        }\n        if (isPlatformBrowser(this.platformId)) {\n            const selector = this.el.nativeElement.tagName;\n            this.isVideo = selector === 'VIDEO';\n        }\n    }\n\n    // TODO: is this really needed?\n    setIframeUrl(): void {\n        if (this.el.nativeElement.lastChild && this.el.nativeElement.lastChild.nodeName === 'IFRAME') {\n            const iframe = this.el.nativeElement.lastChild;\n            const iframeUrl = new URL(iframe.src);\n            if (iframeUrl.host.includes('youtube')) {\n                iframe.src = iframeUrl;\n            }\n        }\n    }\n}\n",
             "selector": "[eclMediaContainerItem], img[eclMediaContainerImage]",
             "providers": [],
             "hostDirectives": [],
@@ -24807,7 +24631,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 15,
+                    "line": 18,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -24861,20 +24685,7 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 19,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [
                 {
@@ -24887,7 +24698,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 16,
+                    "line": 19,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -24903,7 +24714,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 13,
+                    "line": 16,
                     "rawdescription": "\n"
                 },
                 {
@@ -24916,7 +24727,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 30,
+                    "line": 32,
                     "rawdescription": "\n",
                     "modifierKind": [
                         125
@@ -24931,7 +24742,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 40,
+                    "line": 42,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -24944,7 +24755,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 52,
+                    "line": 54,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -24992,8 +24803,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 340,
-                    "end": 417,
+                    "pos": 327,
+                    "end": 404,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -25014,7 +24825,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 31,
+                "line": 33,
                 "rawdescription": "\n"
             },
             "accessors": {
@@ -25024,7 +24835,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 19,
+                        "line": 21,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -25046,12 +24857,12 @@
         },
         {
             "name": "EclMediaContainerPictureDirective",
-            "id": "directive-EclMediaContainerPictureDirective-76ad555988a2e7db34002e870d0b415402c5465bb0138e23878ae123f341d052d53f196ba85aba6993bdb60aa91e70eb3585d29f098e0694965bff7c3e4cef0d",
+            "id": "directive-EclMediaContainerPictureDirective-208ee2efa1712fe030e5b1b24e8f29d15bb24dda6db7967506d8138ba994efd15b2faf41aa88e84b73ca127c250c2646287b714e7c7b0d4c654f0824fd655275",
             "file": "packages/ecl/components/ecl-media-container/ecl-media-container-picture.directive.ts",
             "type": "directive",
             "description": "<p>Applies styles for the picture element.</p>\n",
             "rawdescription": "\n\nApplies styles for the picture element.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Applies styles for the picture element.\n */\n@Directive({\n    selector: 'picture[eclMediaContainerPicture]',\n})\nexport class EclMediaContainerPictureDirective extends ECLBaseDirective {\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-picture ecl-media-container__picture')].join(' ').trim();\n    }\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Applies styles for the picture element.\n */\n@Directive({\n    selector: 'picture[eclMediaContainerPicture]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclMediaContainerPictureDirective extends ECLBaseDirective {\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-picture ecl-media-container__picture')].join(' ').trim();\n    }\n}\n",
             "selector": "picture[eclMediaContainerPicture]",
             "providers": [],
             "hostDirectives": [],
@@ -25104,20 +24915,7 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 12,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [],
             "methodsClass": [
@@ -25163,8 +24961,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 157,
+                    "pos": 94,
+                    "end": 144,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -25183,7 +24981,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 12,
+                        "line": 14,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -50535,10 +50333,11 @@
         },
         {
             "name": "EclDescriptionListDefinitionComponent",
-            "id": "component-EclDescriptionListDefinitionComponent-d28d376b08ef678ffaf36300ea2ecb3bbccad0ba04ad194e4b8fd771339454c5fa18a481da08d14bb2d70df9519a263b0ba48682b8a2e04fb9eb312821df34a0",
+            "id": "component-EclDescriptionListDefinitionComponent-e3df3158863fb47d29c9bddd99a9c91ace679e9f97138ede1022b3bccfd820f96a584648e8392dea49e34ac45cadce3ff87767c12425f31ff80e3f6374f37d36",
             "file": "packages/ecl/components/ecl-list/ecl-description-list-definition/ecl-description-list-definition.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -50562,7 +50361,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Visual variant of the definition list item.\nOptions: &#39;link&#39;, &#39;inline&#39;, &#39;taxonomy&#39;, &#39;tag&#39;.</p>\n",
-                    "line": 42,
+                    "line": 43,
                     "rawdescription": "\n\nVisual variant of the definition list item.\nOptions: 'link', 'inline', 'taxonomy', 'tag'.\n",
                     "required": false
                 },
@@ -50621,9 +50420,9 @@
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>Signal indicating whether the DOM is ready for manipulation.\nSet to true after first render to ensure projected content exists.</p>\n",
+                    "description": "<p>Signal indicating whether the DOM is ready for manipulation.\nSet to true after first render to ensure the projected <ul> exists before\nthe see-more link is inserted into it. Defers DOM writes in the effect.</p>\n",
                     "line": 76,
-                    "rawdescription": "\n\nSignal indicating whether the DOM is ready for manipulation.\nSet to true after first render to ensure projected content exists.\n",
+                    "rawdescription": "\n\nSignal indicating whether the DOM is ready for manipulation.\nSet to true after first render to ensure the projected <ul> exists before\nthe see-more link is inserted into it. Defers DOM writes in the effect.\n",
                     "modifierKind": [
                         148
                     ]
@@ -50654,7 +50453,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Maximum number of items to display before showing &quot;See all&quot; link.\nControlled by parent EclDescriptionListDirective.</p>\n",
-                    "line": 48,
+                    "line": 49,
                     "rawdescription": "\n\nMaximum number of items to display before showing \"See all\" link.\nControlled by parent EclDescriptionListDirective.\n"
                 }
             ],
@@ -50675,7 +50474,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 135,
+                    "line": 145,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles the \"Show all items\" link click event.\nExpands all hidden items and removes the \"See all\" link from DOM.\n",
@@ -50736,22 +50535,9 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 64,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
-            "standalone": true,
+            "standalone": false,
             "imports": [
                 {
                     "name": "EUI_ECL_LINK"
@@ -50764,14 +50550,14 @@
             "description": "<p>Component for a definition item within an ECL description list.\nSupports variants (link, inline, taxonomy, tag) and collapsible functionality\nwith maxVisibleItems control.</p>\n",
             "rawdescription": "\n\nComponent for a definition item within an ECL description list.\nSupports variants (link, inline, taxonomy, tag) and collapsible functionality\nwith maxVisibleItems control.\n",
             "type": "component",
-            "sourceCode": "import {\n    ApplicationRef,\n    Component,\n    DestroyRef,\n    ElementRef,\n    EmbeddedViewRef,\n    HostBinding,\n    TemplateRef,\n    afterNextRender,\n    computed,\n    contentChildren,\n    effect,\n    inject,\n    input,\n    signal,\n    viewChild,\n} from '@angular/core';\n\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclDescriptionListDefinitionItemDirective } from '../ecl-description-list-definition-item.directive';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { TranslatePipe } from '@ngx-translate/core';\n\n/**\n * Component for a definition item within an ECL description list.\n * Supports variants (link, inline, taxonomy, tag) and collapsible functionality\n * with maxVisibleItems control.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclDescriptionListDefinition]',\n    standalone: true,\n    templateUrl: './ecl-description-list-definition.component.html',\n    imports: [...EUI_ECL_LINK, TranslatePipe],\n})\nexport class EclDescriptionListDefinitionComponent extends ECLBaseDirective {\n\n    /**\n     * Visual variant of the definition list item.\n     * Options: 'link', 'inline', 'taxonomy', 'tag'.\n     */\n    variant = input<'link' | 'inline' | 'taxonomy' | 'tag' | null>(null);\n\n    /**\n     * Maximum number of items to display before showing \"See all\" link.\n     * Controlled by parent EclDescriptionListDirective.\n     */\n    maxVisibleItems = signal<number | null>(null);\n\n    private readonly eclListItems = contentChildren(EclDescriptionListDefinitionItemDirective, {\n        descendants: true,\n    });\n\n    private readonly seeMoreTpl = viewChild.required<TemplateRef<unknown>>('seeMoreTpl');\n\n    private readonly host = inject(ElementRef<HTMLElement>);\n    private readonly appRef = inject(ApplicationRef);\n    private readonly destroyRef = inject(DestroyRef);\n\n    private seeMoreView?: EmbeddedViewRef<unknown>;\n    private appended = false;\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        const v = this.variant();\n        return [\n            super.getCssClasses('ecl-description-list__definition'),\n            v ? `ecl-description-list__definition--${v}` : '',\n        ].join(' ');\n    }\n    // we use this to defer \"append into <ul>\" until the DOM exists\n    /**\n     * Signal indicating whether the DOM is ready for manipulation.\n     * Set to true after first render to ensure projected content exists.\n     */\n    readonly domReady = signal(false);\n    \n    /**\n     * Computed signal that returns the total number of list items.\n     */\n    private readonly currentItemsNumber = computed(() => this.eclListItems().length);\n\n    /**\n     * Computed signal that determines if \"See all\" link should be shown.\n     * Returns true when maxVisibleItems is set and less than total items.\n     */\n    readonly hasSeeAll = computed(() => {\n        const max = this.maxVisibleItems();\n        const total = this.currentItemsNumber();\n        return !!max && total > 0 && max < total;\n    });\n\n    constructor() {\n        super();\n        // Mark DOM ready AFTER first render (projected <ul> will exist)\n        afterNextRender(() => this.domReady.set(true));\n        // TODO: This needs to be refactored in the next version (v22/v23). I am adding this solution, for adding /removing the\n        // 'See all' link now, to be dynamically handled via DOM manipulation, to avoid breaking changes. Can be done in an easier way,\n        // but with minimal change in the way the component is used. To be refactored.\n        effect(() => {\n            const items = this.eclListItems();\n            // If DOM not ready yet, only do state updates (no DOM querying/appending)\n            const ready = this.domReady();\n\n            if (!this.hasSeeAll()) {\n                // show all items\n                items.forEach((it) => {\n                    it.isHidden = false;\n                    it.isLastVisible = false;\n                });\n\n                if (ready) this.removeSeeMoreFromDom();\n                return;\n            }\n\n            // \"See all\" needed → hide beyond max\n            const max = this.maxVisibleItems()!;\n            items.forEach((it, idx) => {\n                it.isHidden = idx >= max;\n                it.isLastVisible = false;\n            });\n            const last = items[max - 1];\n            if (last) last.isLastVisible = true;\n\n            if (ready) this.ensureSeeMoreInsideProjectedUl();\n        });\n\n        this.destroyRef.onDestroy(() => this.removeSeeMoreFromDom());\n    }\n\n    /**\n     * Handles the \"Show all items\" link click event.\n     * Expands all hidden items and removes the \"See all\" link from DOM.\n     */\n    onShowAllItems(evt: Event): void {\n        evt.preventDefault();\n        this.showAllInternal();\n        this.removeSeeMoreFromDom();\n    }\n\n    /**\n     * Shows all items by setting isHidden to false for all items.\n     */\n    private showAllInternal(): void {\n        const items = this.eclListItems();\n        items.forEach((item) => (item.isHidden = false));\n        items.forEach((item) => (item.isLastVisible = false));\n    }\n\n    /**\n     * Ensures the \"See all\" link is appended inside the projected <ul> element.\n     * Creates and attaches the embedded view if needed.\n     */\n    private ensureSeeMoreInsideProjectedUl(): void {\n        if (!this.hasSeeAll()) return;\n\n        const ul = this.findProjectedUl();\n        if (!ul) return;\n\n        // If it's already in there (e.g. reruns), do nothing\n        if (ul.querySelector(':scope > li.ecl-description-list__see_more')) return;\n\n        // Create the embedded view once and append its root <li> into the projected <ul>\n        if (!this.seeMoreView) {\n            this.seeMoreView = this.seeMoreTpl().createEmbeddedView({});\n            this.appRef.attachView(this.seeMoreView);\n            this.seeMoreView.detectChanges();\n        }\n\n        const [liNode] = this.seeMoreView.rootNodes as HTMLElement[];\n        if (liNode && !this.appended) {\n            ul.appendChild(liNode);\n            this.appended = true;\n        } else if (liNode && liNode.parentElement !== ul) {\n            // if it was moved/removed, re-append\n            ul.appendChild(liNode);\n        }\n    }\n\n    /**\n     * Removes the \"See all\" link from the DOM and cleans up the embedded view.\n     */\n    private removeSeeMoreFromDom(): void {\n        const ul = this.findProjectedUl();\n        ul?.querySelector(':scope > li.ecl-description-list__see_more')?.remove();\n\n        this.appended = false;\n\n        if (this.seeMoreView) {\n            this.appRef.detachView(this.seeMoreView);\n            this.seeMoreView.destroy();\n            this.seeMoreView = undefined;\n        }\n    }\n\n    /**\n     * Finds the projected <ul> element with eclDescriptionListDefinitionList directive.\n     * Returns null if not found.\n     */\n    private findProjectedUl(): HTMLUListElement | null {\n        // your projected UL uses this attribute directive\n        return this.host.nativeElement.querySelector(\n            'ul[eclDescriptionListDefinitionList]'\n        ) as HTMLUListElement | null;\n    }\n}",
+            "sourceCode": "import {\n    ApplicationRef,\n    Component,\n    DestroyRef,\n    ElementRef,\n    EmbeddedViewRef,\n    TemplateRef,\n    afterNextRender,\n    computed,\n    contentChildren,\n    effect,\n    inject,\n    input,\n    signal,\n    viewChild,\n} from '@angular/core';\n\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclDescriptionListDefinitionItemDirective } from '../ecl-description-list-definition-item.directive';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { TranslatePipe } from '@ngx-translate/core';\n\n/**\n * Component for a definition item within an ECL description list.\n * Supports variants (link, inline, taxonomy, tag) and collapsible functionality\n * with maxVisibleItems control.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclDescriptionListDefinition]',\n    templateUrl: './ecl-description-list-definition.component.html',\n    imports: [...EUI_ECL_LINK, TranslatePipe],\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclDescriptionListDefinitionComponent extends ECLBaseDirective {\n\n    /**\n     * Visual variant of the definition list item.\n     * Options: 'link', 'inline', 'taxonomy', 'tag'.\n     */\n    variant = input<'link' | 'inline' | 'taxonomy' | 'tag' | null>(null);\n\n    /**\n     * Maximum number of items to display before showing \"See all\" link.\n     * Controlled by parent EclDescriptionListDirective.\n     */\n    maxVisibleItems = signal<number | null>(null);\n\n    private readonly eclListItems = contentChildren(EclDescriptionListDefinitionItemDirective, {\n        descendants: true,\n    });\n\n    private readonly seeMoreTpl = viewChild.required<TemplateRef<unknown>>('seeMoreTpl');\n\n    private readonly host = inject(ElementRef<HTMLElement>);\n    private readonly appRef = inject(ApplicationRef);\n    private readonly destroyRef = inject(DestroyRef);\n\n    private seeMoreView?: EmbeddedViewRef<unknown>;\n    private appended = false;\n\n    get cssClasses(): string {\n        const v = this.variant();\n        return [\n            super.getCssClasses('ecl-description-list__definition'),\n            v ? `ecl-description-list__definition--${v}` : '',\n        ].join(' ');\n    }\n    /**\n     * Signal indicating whether the DOM is ready for manipulation.\n     * Set to true after first render to ensure the projected <ul> exists before\n     * the see-more link is inserted into it. Defers DOM writes in the effect.\n     */\n    readonly domReady = signal(false);\n    \n    /**\n     * Computed signal that returns the total number of list items.\n     */\n    private readonly currentItemsNumber = computed(() => this.eclListItems().length);\n\n    /**\n     * Computed signal that determines if \"See all\" link should be shown.\n     * Returns true when maxVisibleItems is set and less than total items.\n     */\n    readonly hasSeeAll = computed(() => {\n        const max = this.maxVisibleItems();\n        const total = this.currentItemsNumber();\n        return !!max && total > 0 && max < total;\n    });\n\n    constructor() {\n        super();\n        // Mark DOM ready AFTER first render (projected <ul> will exist)\n        afterNextRender(() => this.domReady.set(true));\n\n        // The \"See more\" link must render as a sibling <li> INSIDE the consumer-authored\n        // <ul eclDescriptionListDefinitionList>, because ECL's CSS targets it as a direct\n        // child of that list. Angular has no declarative way to project content into an\n        // element the consumer owns (ng-content only projects into this component's own\n        // template), so the link is inserted into the projected <ul> via controlled DOM\n        // manipulation. This is intentional: keeping the natural <ul><li> markup in the\n        // consumer template is preferred over an API that would force bare <li> authoring.\n        //\n        // This effect keeps two things in sync with reactive state:\n        //   1. Per-item visibility (isHidden / isLastVisible signals) based on maxVisibleItems.\n        //   2. Presence of the \"See more\" <li> in the projected <ul>, driven by hasSeeAll().\n        // DOM writes are deferred until domReady() so the projected <ul> exists.\n        effect(() => {\n            const items = this.eclListItems();\n            // If DOM not ready yet, only do state updates (no DOM querying/appending)\n            const ready = this.domReady();\n\n            if (!this.hasSeeAll()) {\n                // show all items\n                items.forEach((it) => {\n                    it.isHidden.set(false);\n                    it.isLastVisible.set(false);\n                });\n\n                if (ready) this.removeSeeMoreFromDom();\n                return;\n            }\n\n            // \"See all\" needed → hide beyond max\n            const max = this.maxVisibleItems()!;\n            items.forEach((it, idx) => {\n                it.isHidden.set(idx >= max);\n                it.isLastVisible.set(false);\n            });\n            const last = items[max - 1];\n            if (last) last.isLastVisible.set(true);\n\n            if (ready) this.ensureSeeMoreInsideProjectedUl();\n        });\n\n        this.destroyRef.onDestroy(() => this.removeSeeMoreFromDom());\n    }\n\n    /**\n     * Handles the \"Show all items\" link click event.\n     * Expands all hidden items and removes the \"See all\" link from DOM.\n     */\n    onShowAllItems(evt: Event): void {\n        evt.preventDefault();\n        this.showAllInternal();\n        this.removeSeeMoreFromDom();\n    }\n\n    /**\n     * Shows all items by setting isHidden to false for all items.\n     */\n    private showAllInternal(): void {\n        const items = this.eclListItems();\n        items.forEach((item) => item.isHidden.set(false));\n        items.forEach((item) => item.isLastVisible.set(false));\n    }\n\n    /**\n     * Ensures the \"See all\" link is appended inside the projected <ul> element.\n     * Creates and attaches the embedded view if needed.\n     */\n    private ensureSeeMoreInsideProjectedUl(): void {\n        if (!this.hasSeeAll()) return;\n\n        const ul = this.findProjectedUl();\n        if (!ul) return;\n\n        // If it's already in there (e.g. reruns), do nothing\n        if (ul.querySelector(':scope > li.ecl-description-list__see_more')) return;\n\n        // Create the embedded view once and append its root <li> into the projected <ul>\n        if (!this.seeMoreView) {\n            this.seeMoreView = this.seeMoreTpl().createEmbeddedView({});\n            this.appRef.attachView(this.seeMoreView);\n            this.seeMoreView.detectChanges();\n        }\n\n        const [liNode] = this.seeMoreView.rootNodes as HTMLElement[];\n        if (liNode && !this.appended) {\n            ul.appendChild(liNode);\n            this.appended = true;\n        } else if (liNode && liNode.parentElement !== ul) {\n            // if it was moved/removed, re-append\n            ul.appendChild(liNode);\n        }\n    }\n\n    /**\n     * Removes the \"See all\" link from the DOM and cleans up the embedded view.\n     */\n    private removeSeeMoreFromDom(): void {\n        const ul = this.findProjectedUl();\n        ul?.querySelector(':scope > li.ecl-description-list__see_more')?.remove();\n\n        this.appended = false;\n\n        if (this.seeMoreView) {\n            this.appRef.detachView(this.seeMoreView);\n            this.seeMoreView.destroy();\n            this.seeMoreView = undefined;\n        }\n    }\n\n    /**\n     * Finds the projected <ul> element with eclDescriptionListDefinitionList directive.\n     * Returns null if not found.\n     */\n    private findProjectedUl(): HTMLUListElement | null {\n        // The consumer-authored list carries the eclDescriptionListDefinitionList directive.\n        return this.host.nativeElement.querySelector(\n            'ul[eclDescriptionListDefinitionList]'\n        ) as HTMLUListElement | null;\n    }\n}",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 550,
-                    "end": 738,
+                    "pos": 533,
+                    "end": 721,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -57095,7 +56881,7 @@
         },
         {
             "name": "EclIconComponent",
-            "id": "component-EclIconComponent-b815ca32f7e41bc74b5baa46b6d6a2147c83194ed861e5024ab8bf5cbf1aa0486c078ea66bdea8ad2cf93dd99889c8245886ada3238564160531c7978e632b73",
+            "id": "component-EclIconComponent-098102385dea8ae19585b13531343588c38d879186ee8a691fc0aeb0f6cef41ef570f2be629b561695d0c3f13ebb52e8869d91e74ca8d7e05471f478e7ad412b",
             "file": "packages/ecl/components/ecl-icon/ecl-icon.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -57208,7 +56994,7 @@
                     "defaultValue": "'default'",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' |        'phosphor' | string",
+                    "type": "'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' |        'phosphor' | 'phosphor-fill' | string",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Defines the icon set to use.\nAvailable sets: <code>default</code>, <code>social</code>, <code>social-media</code>, <code>flag</code>, or a custom URL prefix.\nDefaults to <code>&#39;default&#39;</code>.</p>\n",
@@ -57628,7 +57414,7 @@
             "description": "<p>ECL icon component – renders SVG icons from various sets depending on current theme.\nIntegrates with ECL theming and supports accessibility options.</p>\n",
             "rawdescription": "\n\nECL icon component – renders SVG icons from various sets depending on current theme.\nIntegrates with ECL theming and supports accessibility options.\n",
             "type": "component",
-            "sourceCode": "import { isPlatformBrowser, NgClass } from '@angular/common';\nimport {\n    afterNextRender,\n    booleanAttribute,\n    Component,\n    computed,\n    ElementRef,\n    HostBinding,\n    inject,\n    input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    PLATFORM_ID,\n    Renderer2,\n    signal,\n    SimpleChanges,\n    viewChild,\n} from '@angular/core';\nimport { ECLBaseDirective, EclThemeService } from '@eui/ecl/core';\n\n/**\n * ECL icon component – renders SVG icons from various sets depending on current theme.\n * Integrates with ECL theming and supports accessibility options.\n */\n@Component({\n    selector: 'ecl-icon',\n    templateUrl: './ecl-icon.component.html',\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n    ],\n    imports: [NgClass],\n    providers: [EclThemeService],\n    host: {\n        '[class.ecl-icon--flip-horizontal]': 'isFlipHorizontal()',\n    },\n})\nexport class EclIconComponent implements OnInit, OnChanges, OnDestroy {\n    /**\n     * Defines the icon set to use.\n     * Available sets: `default`, `social`, `social-media`, `flag`, or a custom URL prefix.\n     * Defaults to `'default'`.\n     */\n    iconSet = input<'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' |\n        'phosphor' | string>('default');\n\n    /**\n     * Name of the icon to render from the selected set.\n     */\n    icon = input<string>();\n\n    /**\n     * Size of the icon.\n     * Supported values: `'2xs'`, `'xs'`, `'s'`, `'m'`, `'l'`, `'xl'`, `'2xl'`, `'fluid'`.\n     * Defaults to `'xs'`.\n     */\n    size = input<'2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | 'fluid' | string>('xs');\n\n    /**\n     * Applies color styling to the icon.\n     * Use `'inverted'` for icons on dark backgrounds, or `'primary'` for emphasis.\n     */\n    color = input<'inverted' | 'primary' | null>(null);\n\n    /**\n     * Adds a transformation modifier to the icon (e.g., rotation).\n     */\n    transform = input<string>();\n\n    /**\n     * ID reference for an external element that labels this icon for screen readers.\n     */\n    readonly ariaLabelledby = input<string>(undefined);\n\n    /**\n     * ARIA role of the icon. If a `title` is provided and no role is defined, defaults to `'img'`.\n     */\n    readonly role = input<string>(undefined);\n\n    /**\n     * Title used for accessibility. Also affects `aria-hidden` and `role`.\n     */\n    readonly title = input<string>(undefined);\n\n    /**\n     * Determines whether the icon should be hidden from assistive technologies.\n     * Defaults to `true` unless a title is provided.\n     */\n    readonly ariaHidden = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n\n    /**\n     * Controls whether the icon is focusable via keyboard.\n     * Defaults to `false`.\n     */\n    readonly focusable = input(false, { transform: booleanAttribute });\n\n    /**\n     * Resolved role: uses the explicit `role` input if provided,\n     * otherwise defaults to `'img'` when a `title` is set.\n     */\n    readonly effectiveRole = computed<string | undefined>(() => {\n        const explicit = this.role();\n        if (explicit !== undefined) return explicit;\n        return this.title() !== undefined ? 'img' : undefined;\n    });\n\n    /**\n     * Resolved aria-hidden: uses the explicit `ariaHidden` input if provided,\n     * otherwise hides the icon unless a `title` is set.\n     */\n    readonly effectiveAriaHidden = computed<boolean>(() => {\n        const explicit = this.ariaHidden();\n        if (explicit !== undefined) return explicit;\n        return this.title() === undefined;\n    });\n\n    /**\n     * Flips the icon horizontally if set to `true`.\n     */\n    readonly isFlipHorizontal = input(false, { transform: booleanAttribute });\n\n    /**\n     * Adds a dark background utility class if the color is set to `'inverted'`.\n     */\n    @HostBinding('class.ecl-u-bg-grey')\n    get isColorInverted(): boolean {\n        return this.color() === 'inverted';\n    }\n\n    readonly svgEl = viewChild<ElementRef>('svg');\n\n    iconUrl = signal<string>('');\n    baseDirective = inject(ECLBaseDirective);\n    el = inject(ElementRef);\n    private renderer = inject(Renderer2);\n    private platformId = inject(PLATFORM_ID);\n\n    /**\n     * Extra classes added programmatically by parent components\n     * (button, link, etc.)\n     */\n    readonly extraClasses = signal<string>('');\n\n    /**\n     * Real classes currently present on <ecl-icon>.\n     * To support [class.foo] / [ngClass].\n     */\n    readonly hostClasses = signal<string>('');\n\n    readonly svgClasses = computed<Record<string, boolean>>(() => {\n        return {\n            [this.baseDirective.getCssClasses('ecl-icon')]: true,\n            [`ecl-icon--${this.size()}`]: !!this.size(),\n            [`ecl-icon--${this.transform()}`]: !!this.transform(),\n            [`ecl-icon--${this.color()}`]: !!this.color(),\n            ...this.toClassRecord(this.hostClasses()),\n            ...this.toClassRecord(this.extraClasses()),\n        };\n    });\n\n    private classObserver?: MutationObserver;\n\n    constructor() {\n        afterNextRender(() => {\n            this.detachHostAndPromoteSvg();\n            this.syncHostClassesFromDom();\n            this.observeHostClassChanges();\n        });\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['icon']) {\n            this.initiateIconUrl();\n        }\n    }\n\n    ngOnInit(): void {\n        this.initiateIconUrl();\n    }\n\n    ngOnDestroy(): void {\n        this.classObserver?.disconnect();\n        if (!isPlatformBrowser(this.platformId)) return;\n\n        try {\n            const svgNative = this.svgEl()?.nativeElement as SVGElement | null;\n            const parent = svgNative?.parentElement;\n            if (svgNative && parent) parent.removeChild(svgNative);\n        } catch {\n            /* ignore */\n        }\n    }\n\n    addExtraClass(className: string): void {\n        const classes = new Set([\n            ...this.tokenize(this.extraClasses()),\n            ...this.tokenize(className),\n        ]);\n        this.extraClasses.set(Array.from(classes).join(' '));\n    }\n\n    removeExtraClass(className: string): void {\n        const classes = this.tokenize(this.extraClasses()).filter((c) => c !== className);\n        this.extraClasses.set(classes.join(' '));\n    }\n\n    setExtraClasses(classes: string): void {\n        this.extraClasses.set(classes ?? '');\n    }\n\n    private syncHostClassesFromDom(): void {\n        const host = this.el.nativeElement;\n        this.hostClasses.set(host.className || '');\n    }\n\n    private observeHostClassChanges(): void {\n        const host = this.el.nativeElement;\n\n        this.classObserver = new MutationObserver(() => {\n            this.hostClasses.set(host.className || '');\n        });\n\n        this.classObserver.observe(host, {\n            attributes: true,\n            attributeFilter: ['class'],\n        });\n    }\n\n    private toClassRecord(classes?: string | null): Record<string, boolean> {\n        return Object.fromEntries(\n            this.tokenize(classes).map(c => [c, true])\n        );\n    }\n\n    private tokenize(classes: string | null | undefined): string[] {\n        return (classes ?? '')\n            .split(/\\s+/)\n            .filter(Boolean);\n    }\n\n    private detachHostAndPromoteSvg(): void {\n        const hostEl = this.el.nativeElement as HTMLElement | null;\n        const svgNative = this.svgEl()?.nativeElement as SVGElement | null;\n        if (!hostEl || !svgNative) return;\n\n        const hostParentEl = hostEl.parentElement;\n        if (!hostParentEl) return;\n\n        // add the svg and remove the parent from the DOM\n        this.renderer.setStyle(hostEl, 'visibility', 'hidden');\n        hostEl.after(svgNative);\n        this.renderer.removeChild(hostParentEl, hostEl);\n    }\n\n    private initiateIconUrl(): void {\n        switch (this.iconSet()) {\n            case 'default':\n                this.iconUrl.set(`assets/images/ecl/icons/sprite.svg#${this.icon()}`);\n                break;\n            case 'social': // TODO: Remove this in the next version.\n                this.iconUrl.set(`assets/images/ecl/networks/sprite.svg#${this.icon()}`);\n                break;\n            case 'social-media':\n                this.iconUrl.set(`assets/images/ecl/networks/sprite.svg#${this.icon()}`);\n                break;\n            case 'social-media-color':\n                this.iconUrl.set(`assets/images/ecl/networks-color/sprite.svg#${this.icon()}`);\n                break;\n            case 'flag':\n                this.iconUrl.set(`assets/images/ecl/icons-flag/sprites/icons-flag.svg#${this.icon()}`);\n                break;\n            case 'flag-non-members':\n                this.iconUrl.set(`assets/images/ecl/icons-flag/sprites/icons-flag-non-members.svg#${this.icon()}`);\n                break;\n            case 'phosphor':\n                this.iconUrl.set(`assets/icons/sprites/regular.svg#${this.icon()}`);\n                break;\n            case 'phosphor-fill':\n                this.iconUrl.set(`assets/icons/sprites/fill.svg#${this.icon()}`);\n                break;\n            default:\n                this.iconUrl.set(`assets/images/ecl/icons/sprite.svg#${this.icon()}`);\n        }\n    }\n}\n",
+            "sourceCode": "import { isPlatformBrowser, NgClass } from '@angular/common';\nimport {\n    afterNextRender,\n    booleanAttribute,\n    Component,\n    computed,\n    ElementRef,\n    HostBinding,\n    inject,\n    input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    PLATFORM_ID,\n    Renderer2,\n    signal,\n    SimpleChanges,\n    viewChild,\n} from '@angular/core';\nimport { ECLBaseDirective, EclThemeService } from '@eui/ecl/core';\n\n/**\n * ECL icon component – renders SVG icons from various sets depending on current theme.\n * Integrates with ECL theming and supports accessibility options.\n */\n@Component({\n    selector: 'ecl-icon',\n    templateUrl: './ecl-icon.component.html',\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n    ],\n    imports: [NgClass],\n    providers: [EclThemeService],\n    host: {\n        '[class.ecl-icon--flip-horizontal]': 'isFlipHorizontal()',\n    },\n})\nexport class EclIconComponent implements OnInit, OnChanges, OnDestroy {\n    /**\n     * Defines the icon set to use.\n     * Available sets: `default`, `social`, `social-media`, `flag`, or a custom URL prefix.\n     * Defaults to `'default'`.\n     */\n    iconSet = input<'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' |\n        'phosphor' | 'phosphor-fill' | string>('default');\n\n    /**\n     * Name of the icon to render from the selected set.\n     */\n    icon = input<string>();\n\n    /**\n     * Size of the icon.\n     * Supported values: `'2xs'`, `'xs'`, `'s'`, `'m'`, `'l'`, `'xl'`, `'2xl'`, `'fluid'`.\n     * Defaults to `'xs'`.\n     */\n    size = input<'2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | 'fluid' | string>('xs');\n\n    /**\n     * Applies color styling to the icon.\n     * Use `'inverted'` for icons on dark backgrounds, or `'primary'` for emphasis.\n     */\n    color = input<'inverted' | 'primary' | null>(null);\n\n    /**\n     * Adds a transformation modifier to the icon (e.g., rotation).\n     */\n    transform = input<string>();\n\n    /**\n     * ID reference for an external element that labels this icon for screen readers.\n     */\n    readonly ariaLabelledby = input<string>(undefined);\n\n    /**\n     * ARIA role of the icon. If a `title` is provided and no role is defined, defaults to `'img'`.\n     */\n    readonly role = input<string>(undefined);\n\n    /**\n     * Title used for accessibility. Also affects `aria-hidden` and `role`.\n     */\n    readonly title = input<string>(undefined);\n\n    /**\n     * Determines whether the icon should be hidden from assistive technologies.\n     * Defaults to `true` unless a title is provided.\n     */\n    readonly ariaHidden = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n\n    /**\n     * Controls whether the icon is focusable via keyboard.\n     * Defaults to `false`.\n     */\n    readonly focusable = input(false, { transform: booleanAttribute });\n\n    /**\n     * Resolved role: uses the explicit `role` input if provided,\n     * otherwise defaults to `'img'` when a `title` is set.\n     */\n    readonly effectiveRole = computed<string | undefined>(() => {\n        const explicit = this.role();\n        if (explicit !== undefined) return explicit;\n        return this.title() !== undefined ? 'img' : undefined;\n    });\n\n    /**\n     * Resolved aria-hidden: uses the explicit `ariaHidden` input if provided,\n     * otherwise hides the icon unless a `title` is set.\n     */\n    readonly effectiveAriaHidden = computed<boolean>(() => {\n        const explicit = this.ariaHidden();\n        if (explicit !== undefined) return explicit;\n        return this.title() === undefined;\n    });\n\n    /**\n     * Flips the icon horizontally if set to `true`.\n     */\n    readonly isFlipHorizontal = input(false, { transform: booleanAttribute });\n\n    /**\n     * Adds a dark background utility class if the color is set to `'inverted'`.\n     */\n    @HostBinding('class.ecl-u-bg-grey')\n    get isColorInverted(): boolean {\n        return this.color() === 'inverted';\n    }\n\n    readonly svgEl = viewChild<ElementRef>('svg');\n\n    iconUrl = signal<string>('');\n    baseDirective = inject(ECLBaseDirective);\n    el = inject(ElementRef);\n    private renderer = inject(Renderer2);\n    private platformId = inject(PLATFORM_ID);\n\n    /**\n     * Extra classes added programmatically by parent components\n     * (button, link, etc.)\n     */\n    readonly extraClasses = signal<string>('');\n\n    /**\n     * Real classes currently present on <ecl-icon>.\n     * To support [class.foo] / [ngClass].\n     */\n    readonly hostClasses = signal<string>('');\n\n    readonly svgClasses = computed<Record<string, boolean>>(() => {\n        return {\n            [this.baseDirective.getCssClasses('ecl-icon')]: true,\n            [`ecl-icon--${this.size()}`]: !!this.size(),\n            [`ecl-icon--${this.transform()}`]: !!this.transform(),\n            [`ecl-icon--${this.color()}`]: !!this.color(),\n            ...this.toClassRecord(this.hostClasses()),\n            ...this.toClassRecord(this.extraClasses()),\n        };\n    });\n\n    private classObserver?: MutationObserver;\n\n    constructor() {\n        afterNextRender(() => {\n            this.detachHostAndPromoteSvg();\n            this.syncHostClassesFromDom();\n            this.observeHostClassChanges();\n        });\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['icon']) {\n            this.initiateIconUrl();\n        }\n    }\n\n    ngOnInit(): void {\n        this.initiateIconUrl();\n    }\n\n    ngOnDestroy(): void {\n        this.classObserver?.disconnect();\n        if (!isPlatformBrowser(this.platformId)) return;\n\n        try {\n            const svgNative = this.svgEl()?.nativeElement as SVGElement | null;\n            const parent = svgNative?.parentElement;\n            if (svgNative && parent) parent.removeChild(svgNative);\n        } catch {\n            /* ignore */\n        }\n    }\n\n    addExtraClass(className: string): void {\n        const classes = new Set([\n            ...this.tokenize(this.extraClasses()),\n            ...this.tokenize(className),\n        ]);\n        this.extraClasses.set(Array.from(classes).join(' '));\n    }\n\n    removeExtraClass(className: string): void {\n        const classes = this.tokenize(this.extraClasses()).filter((c) => c !== className);\n        this.extraClasses.set(classes.join(' '));\n    }\n\n    setExtraClasses(classes: string): void {\n        this.extraClasses.set(classes ?? '');\n    }\n\n    private syncHostClassesFromDom(): void {\n        const host = this.el.nativeElement;\n        this.hostClasses.set(host.className || '');\n    }\n\n    private observeHostClassChanges(): void {\n        const host = this.el.nativeElement;\n\n        this.classObserver = new MutationObserver(() => {\n            this.hostClasses.set(host.className || '');\n        });\n\n        this.classObserver.observe(host, {\n            attributes: true,\n            attributeFilter: ['class'],\n        });\n    }\n\n    private toClassRecord(classes?: string | null): Record<string, boolean> {\n        return Object.fromEntries(\n            this.tokenize(classes).map(c => [c, true])\n        );\n    }\n\n    private tokenize(classes: string | null | undefined): string[] {\n        return (classes ?? '')\n            .split(/\\s+/)\n            .filter(Boolean);\n    }\n\n    private detachHostAndPromoteSvg(): void {\n        const hostEl = this.el.nativeElement as HTMLElement | null;\n        const svgNative = this.svgEl()?.nativeElement as SVGElement | null;\n        if (!hostEl || !svgNative) return;\n\n        const hostParentEl = hostEl.parentElement;\n        if (!hostParentEl) return;\n\n        // add the svg and remove the parent from the DOM\n        this.renderer.setStyle(hostEl, 'visibility', 'hidden');\n        hostEl.after(svgNative);\n        this.renderer.removeChild(hostParentEl, hostEl);\n    }\n\n    private initiateIconUrl(): void {\n        switch (this.iconSet()) {\n            case 'default':\n                this.iconUrl.set(`assets/images/ecl/icons/sprite.svg#${this.icon()}`);\n                break;\n            case 'social': // TODO: Remove this in the next version.\n                this.iconUrl.set(`assets/images/ecl/networks/sprite.svg#${this.icon()}`);\n                break;\n            case 'social-media':\n                this.iconUrl.set(`assets/images/ecl/networks/sprite.svg#${this.icon()}`);\n                break;\n            case 'social-media-color':\n                this.iconUrl.set(`assets/images/ecl/networks-color/sprite.svg#${this.icon()}`);\n                break;\n            case 'flag':\n                this.iconUrl.set(`assets/images/ecl/icons-flag/sprites/icons-flag.svg#${this.icon()}`);\n                break;\n            case 'flag-non-members':\n                this.iconUrl.set(`assets/images/ecl/icons-flag/sprites/icons-flag-non-members.svg#${this.icon()}`);\n                break;\n            case 'phosphor':\n                this.iconUrl.set(`assets/icons/sprites/regular.svg#${this.icon()}`);\n                break;\n            case 'phosphor-fill':\n                this.iconUrl.set(`assets/icons/sprites/fill.svg#${this.icon()}`);\n                break;\n            default:\n                this.iconUrl.set(`assets/images/ecl/icons/sprite.svg#${this.icon()}`);\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -59353,7 +59139,7 @@
         },
         {
             "name": "EclListIllustrationComponent",
-            "id": "component-EclListIllustrationComponent-aadad84273a27915e0bd27b1250beb60b9ed5671089f1aab8fe402e5b38eb14f5635ffa38360f609aade94d499abbc67b6b42c96dd3c7b8221a4178b0c1a78ce",
+            "id": "component-EclListIllustrationComponent-c3cdb33b10eac59e3f68a266cbc679e9089906b04036d4d17eae7f4035452c2157898c19070374614e139055b8da2c0198cb8ada310189bb882fc4785abe0a4c",
             "file": "packages/ecl/components/ecl-list-illustration/ecl-list-illustration.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -59381,7 +59167,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>If we have a number-list, the user can set the start of the counter.</p>\n",
-                    "line": 50,
+                    "line": 54,
                     "rawdescription": "\nIf we have a number-list, the user can set the start of the counter.",
                     "required": false
                 },
@@ -59395,7 +59181,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Font size for list content.\nPossible values:</p>\n<ul>\n<li><code>&#39;m&#39;</code> – medium</li>\n<li><code>&#39;l&#39;</code> – large (default)</li>\n</ul>\n",
-                    "line": 35,
+                    "line": 39,
                     "rawdescription": "\n\nFont size for list content.\nPossible values:\n- `'m'` – medium\n- `'l'` – large (default)\n",
                     "modifierKind": [
                         148
@@ -59412,7 +59198,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>If this is an icon-list, it can have dividers between each item.</p>\n",
-                    "line": 47,
+                    "line": 51,
                     "rawdescription": "\nIf this is an icon-list, it can have dividers between each item.",
                     "modifierKind": [
                         148
@@ -59429,7 +59215,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Number of horizontal columns. If greater than <code>0</code>, items are displayed in a grid layout.</p>\n",
-                    "line": 27,
+                    "line": 31,
                     "rawdescription": "\n\nNumber of horizontal columns. If greater than `0`, items are displayed in a grid layout.\n",
                     "required": false
                 },
@@ -59443,7 +59229,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>If content should be centered</p>\n",
-                    "line": 38,
+                    "line": 42,
                     "rawdescription": "\nIf content should be centered",
                     "modifierKind": [
                         148
@@ -59460,7 +59246,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>If the icon should be on the same row as title - for list with icons</p>\n",
-                    "line": 41,
+                    "line": 45,
                     "rawdescription": "\nIf the icon should be on the same row as title - for list with icons",
                     "modifierKind": [
                         148
@@ -59477,7 +59263,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Enables zebra style (alternating background colors for list items).</p>\n",
-                    "line": 22,
+                    "line": 26,
                     "rawdescription": "\n\nEnables zebra style (alternating background colors for list items).\n",
                     "modifierKind": [
                         148
@@ -59494,7 +59280,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Two variants available: icon-list and number-list.</p>\n",
-                    "line": 44,
+                    "line": 48,
                     "rawdescription": "\nTwo variants available: icon-list and number-list.",
                     "modifierKind": [
                         148
@@ -59557,17 +59343,8 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 86,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'style.--ecl-list-illustration-counter-start'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "line": 88,
+                    "rawdescription": "\n"
                 },
                 {
                     "name": "eclIllustrationItems",
@@ -59579,7 +59356,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 52,
+                    "line": 56,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -59595,7 +59372,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Controls <code>display</code> style of the host element based on breakpoint and column count.</p>\n",
-                    "line": 81,
+                    "line": 84,
                     "rawdescription": "\n\nControls `display` style of the host element based on breakpoint and column count.\n"
                 },
                 {
@@ -59608,17 +59385,8 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Applies ARIA role for list elements.</p>\n",
-                    "line": 57,
-                    "rawdescription": "\n\nApplies ARIA role for list elements.\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.role'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "line": 61,
+                    "rawdescription": "\n\nApplies ARIA role for list elements.\n"
                 },
                 {
                     "name": "startAttr",
@@ -59630,17 +59398,8 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 89,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.start'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "line": 90,
+                    "rawdescription": "\n"
                 }
             ],
             "methodsClass": [
@@ -59651,7 +59410,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 108,
+                    "line": 109,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -59699,73 +59458,21 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.role",
-                    "actualName": "role",
-                    "defaultValue": "'list'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies ARIA role for list elements.\n",
-                    "description": "<p>Applies ARIA role for list elements.</p>\n",
-                    "line": 57,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.start",
-                    "actualName": "startAttr",
-                    "defaultValue": "null",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 89,
-                    "type": "string | null",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies the appropriate ECL CSS classes to the host element.\n",
-                    "description": "<p>Applies the appropriate ECL CSS classes to the host element.</p>\n",
-                    "line": 63,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "style.--ecl-list-illustration-counter-start",
-                    "actualName": "counterStartStyle",
-                    "defaultValue": "''",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 86,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "<p>Component representing a list using ECL illustration styles.</p>\n<p>Supports zebra styling, responsive horizontal layout, and font size options.</p>\n",
             "rawdescription": "\n\nComponent representing a list using ECL illustration styles.\n\nSupports zebra styling, responsive horizontal layout, and font size options.\n",
             "type": "component",
-            "sourceCode": "import { Component, HostBinding, booleanAttribute, numberAttribute, afterNextRender, inject, forwardRef, AfterContentInit, Signal, computed, input, effect, signal, contentChildren } from '@angular/core';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclListIllustrationItemComponent } from './ecl-list-illustration-item.component';\n\n/**\n * Component representing a list using ECL illustration styles.\n *\n * Supports zebra styling, responsive horizontal layout, and font size options.\n */\n@Component({\n    selector: 'ecl-list-illustration, ul[eclListIllustration], ol[eclListIllustration]',\n    templateUrl: './ecl-list-illustration.component.html',\n    host: {\n        '[style.display]': 'elementDisplayStyle()',\n    },\n})\nexport class EclListIllustrationComponent extends ECLBaseDirective implements AfterContentInit {\n    /**\n     * Enables zebra style (alternating background colors for list items).\n     */\n    readonly isZebra = input(false, { transform: booleanAttribute });\n\n    /**\n     * Number of horizontal columns. If greater than `0`, items are displayed in a grid layout.\n     */\n    horizontalColumns = input(0, { transform: numberAttribute });\n\n    /**\n     * Font size for list content.\n     * Possible values:\n     * - `'m'` – medium\n     * - `'l'` – large (default)\n     */\n    readonly fontSize = input<'m' | 'l'>('l');\n\n    /** If content should be centered */\n    readonly isCentered = input(false, { transform: booleanAttribute });\n\n    /** If the icon should be on the same row as title - for list with icons */\n    readonly isIconInline = input(false, { transform: booleanAttribute });\n\n    /** Two variants available: icon-list and number-list. */\n    readonly variant = input<'icon-list' | 'number-list' | null>(null);\n\n    /** If this is an icon-list, it can have dividers between each item. */\n    readonly hasDividers = input(false, { transform: booleanAttribute });\n\n    /** If we have a number-list, the user can set the start of the counter. */\n    counterStart = input<number | null>(null);\n\n    readonly eclIllustrationItems = contentChildren(forwardRef(() => EclListIllustrationItemComponent));\n\n    /**\n     * Applies ARIA role for list elements.\n     */\n    @HostBinding('attr.role') role = 'list';\n\n    /**\n     * Applies the appropriate ECL CSS classes to the host element.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-list-illustration'),\n            this.isZebra() ? 'ecl-list-illustration--zebra' : '',\n            this.horizontalColumns() > 0 ? `ecl-list-illustration--col-${this.horizontalColumns()}` : '',\n            this.fontSize() === 'm' ? 'ecl-list-illustration--font-m' : '',\n            this.isCentered() ? 'ecl-list-illustration--centered' : '',\n            this.isIconInline() ? 'ecl-list-illustration--icon-inline' : '',\n            this.variant() === 'icon-list' ? 'ecl-list-illustration--icon-list' : '',\n            this.variant() === 'number-list' ? 'ecl-list-illustration--number-list ecl-list-illustration--number-list-reset': '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    /**\n     * Controls `display` style of the host element based on breakpoint and column count.\n     */\n    elementDisplayStyle = computed(() =>\n        this.horizontalColumns() > 0 && this.isTabletBreakpoint() ? null : 'block'\n    );\n\n    @HostBinding('style.--ecl-list-illustration-counter-start')\n    counterStartStyle = '';\n\n    @HostBinding('attr.start')\n    startAttr: string | null = null;\n\n    private isTabletBreakpoint = signal(false);\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n        });\n        effect(() => {\n            const value = this.counterStart();\n            const stringValue = value != null ? `${value}` : null;\n\n            this.startAttr = stringValue;\n            this.counterStartStyle = stringValue ?? '';\n        });\n    }\n\n    ngAfterContentInit(): void {\n        if (this.horizontalColumns() === 0) {\n            this.eclIllustrationItems()?.forEach(item => {\n                if (item.hasPicture()) item.isVerticalPicture.set(true);\n            });\n        }\n\n        if (this.variant() === 'icon-list' && this.hasDividers()) {\n            this.eclIllustrationItems()?.forEach(item => {\n                item.hasDivider.set(true);\n            });\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe(['(min-width: 768px)'])\n            .subscribe((result) => {\n                this.isTabletBreakpoint.set(result.matches);\n            });\n    }\n}\n",
+            "sourceCode": "import { Component, booleanAttribute, numberAttribute, afterNextRender, inject, forwardRef, AfterContentInit, Signal, computed, input, effect, signal, contentChildren } from '@angular/core';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclListIllustrationItemComponent } from './ecl-list-illustration-item.component';\n\n/**\n * Component representing a list using ECL illustration styles.\n *\n * Supports zebra styling, responsive horizontal layout, and font size options.\n */\n@Component({\n    selector: 'ecl-list-illustration, ul[eclListIllustration], ol[eclListIllustration]',\n    templateUrl: './ecl-list-illustration.component.html',\n    host: {\n        '[attr.role]': 'role',\n        '[class]': 'cssClasses',\n        '[style.display]': 'elementDisplayStyle()',\n        '[style.--ecl-list-illustration-counter-start]': 'counterStartStyle',\n        '[attr.start]': 'startAttr',\n    },\n})\nexport class EclListIllustrationComponent extends ECLBaseDirective implements AfterContentInit {\n    /**\n     * Enables zebra style (alternating background colors for list items).\n     */\n    readonly isZebra = input(false, { transform: booleanAttribute });\n\n    /**\n     * Number of horizontal columns. If greater than `0`, items are displayed in a grid layout.\n     */\n    horizontalColumns = input(0, { transform: numberAttribute });\n\n    /**\n     * Font size for list content.\n     * Possible values:\n     * - `'m'` – medium\n     * - `'l'` – large (default)\n     */\n    readonly fontSize = input<'m' | 'l'>('l');\n\n    /** If content should be centered */\n    readonly isCentered = input(false, { transform: booleanAttribute });\n\n    /** If the icon should be on the same row as title - for list with icons */\n    readonly isIconInline = input(false, { transform: booleanAttribute });\n\n    /** Two variants available: icon-list and number-list. */\n    readonly variant = input<'icon-list' | 'number-list' | null>(null);\n\n    /** If this is an icon-list, it can have dividers between each item. */\n    readonly hasDividers = input(false, { transform: booleanAttribute });\n\n    /** If we have a number-list, the user can set the start of the counter. */\n    counterStart = input<number | null, unknown>(null, { transform: numberAttribute });\n\n    readonly eclIllustrationItems = contentChildren(forwardRef(() => EclListIllustrationItemComponent));\n\n    /**\n     * Applies ARIA role for list elements.\n     */\n    role = 'list';\n\n    /**\n     * Applies the appropriate ECL CSS classes to the host element.\n     */\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-list-illustration'),\n            this.isZebra() ? 'ecl-list-illustration--zebra' : '',\n            this.horizontalColumns() > 0 ? `ecl-list-illustration--col-${this.horizontalColumns()}` : '',\n            this.fontSize() === 'm' ? 'ecl-list-illustration--font-m' : '',\n            this.isCentered() ? 'ecl-list-illustration--centered' : '',\n            this.isIconInline() ? 'ecl-list-illustration--icon-inline' : '',\n            this.variant() === 'icon-list' ? 'ecl-list-illustration--icon-list' : '',\n            this.variant() === 'number-list' ? 'ecl-list-illustration--number-list ecl-list-illustration--number-list-reset': '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    /**\n     * Controls `display` style of the host element based on breakpoint and column count.\n     */\n    elementDisplayStyle = computed(() =>\n        this.horizontalColumns() > 0 && this.isTabletBreakpoint() ? null : 'block'\n    );\n\n    counterStartStyle = '';\n\n    startAttr: string | null = null;\n\n    private isTabletBreakpoint = signal(false);\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n        });\n        effect(() => {\n            const value = this.counterStart();\n            const stringValue = value != null ? `${value}` : null;\n\n            this.startAttr = stringValue;\n            this.counterStartStyle = stringValue ?? '';\n        });\n    }\n\n    ngAfterContentInit(): void {\n        if (this.horizontalColumns() === 0) {\n            this.eclIllustrationItems()?.forEach(item => {\n                if (item.hasPicture()) item.isVerticalPicture.set(true);\n            });\n        }\n\n        if (this.variant() === 'icon-list' && this.hasDividers()) {\n            this.eclIllustrationItems()?.forEach(item => {\n                item.hasDivider.set(true);\n            });\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe(['(min-width: 768px)'])\n            .subscribe((result) => {\n                this.isTabletBreakpoint.set(result.matches);\n            });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 404,
-                    "end": 558,
+                    "pos": 391,
+                    "end": 545,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -59780,7 +59487,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 92,
+                "line": 93,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -59796,7 +59503,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 63,
+                        "line": 66,
                         "rawdescription": "\n\nApplies the appropriate ECL CSS classes to the host element.\n",
                         "description": "<p>Applies the appropriate ECL CSS classes to the host element.</p>\n"
                     }
@@ -59819,7 +59526,7 @@
         },
         {
             "name": "EclListIllustrationItemComponent",
-            "id": "component-EclListIllustrationItemComponent-757b6c0960cd73cceb1d769e9c9413a2e8417efb9a2f503025e04b98e04991357579846f2dd42399f435695d188abf18cbf918633bd7c8940d3f754d987a5044",
+            "id": "component-EclListIllustrationItemComponent-807c9c0580d188894e7435acbfefc9149bb388d5e9ca5f379ea45cf3bef84a8ed1116cd038fd61496342f5cf92839b3270bed54a057bd289dc9cfd716619fbef",
             "file": "packages/ecl/components/ecl-list-illustration/ecl-list-illustration-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -59996,6 +59703,38 @@
                     "line": 55,
                     "rawdescription": "\n"
                 },
+                {
+                    "name": "hasTitle",
+                    "coverageIgnore": false,
+                    "defaultValue": "computed(() => Boolean(this.eclTitle()) || this.eclIllustrationIcon() !== undefined)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Returns <code>true</code> if the item has a title or any projected icons.</p>\n",
+                    "line": 60,
+                    "rawdescription": "\n\nReturns `true` if the item has a title or any projected icons.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "hasValue",
+                    "coverageIgnore": false,
+                    "defaultValue": "computed(() => Boolean(this.eclValue()))",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Returns <code>true</code> if the item has a value.</p>\n",
+                    "line": 65,
+                    "rawdescription": "\n\nReturns `true` if the item has a value.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
                 {
                     "name": "isVerticalPicture",
                     "coverageIgnore": false,
@@ -60109,7 +59848,7 @@
             "description": "<p>Component representing a single item in an ECL illustration list.</p>\n<p>Displays optional title, value, and one or more illustration icons.</p>\n",
             "rawdescription": "\n\nComponent representing a single item in an ECL illustration list.\n\nDisplays optional title, value, and one or more illustration icons.\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    computed,\n    forwardRef,\n    HostBinding,\n    Signal,\n    signal,\n    input,\n    contentChild,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclListIllustrationIconDirective } from './ecl-list-illustration-icon.directive';\nimport { EclListIllustrationPictureDirective } from './ecl-list-illustration-picture.directive';\n\n/**\n * Component representing a single item in an ECL illustration list.\n *\n * Displays optional title, value, and one or more illustration icons.\n */\n@Component({\n    selector: 'ecl-list-illustration-item, li[eclListIllustrationItem]',\n    templateUrl: './ecl-list-illustration-item.component.html',\n})\nexport class EclListIllustrationItemComponent extends ECLBaseDirective {\n    /**\n     * Text displayed as the item title.\n     */\n    readonly eclTitle = input('');\n\n    /**\n     * Text displayed as the item value.\n     */\n    readonly eclValue = input('');\n\n    /**\n     * Applies ARIA role for list items.\n     */\n    @HostBinding('attr.role') role = 'listitem';\n\n    /**\n     * Applies ECL class for illustration list item.\n     */\n    @HostBinding('class.ecl-list-illustration__item') className = true;\n\n    readonly eclIllustrationIcon = contentChild(forwardRef(() => EclListIllustrationIconDirective));\n\n    readonly eclIllustrationPicture = contentChild(forwardRef(() => EclListIllustrationPictureDirective));\n\n    /** A special class needs to be added, for vertical lists with picture. */\n    isVerticalPicture = signal(false);\n\n    /** A special class needs to be added, if an icon list has dividers between items. */\n    hasDivider = signal(false);\n\n    hasPicture: Signal<boolean> = computed(() => this.eclIllustrationPicture() !== undefined);\n\n    /**\n     * Returns `true` if the item has a title or any projected icons.\n     */\n    get hasTitle(): boolean {\n        return Boolean(this.eclTitle()) || this.eclIllustrationIcon() !== undefined;\n    }\n\n    /**\n     * Returns `true` if the item has a value.\n     */\n    get hasValue(): boolean {\n        return Boolean(this.eclValue());\n    }\n}\n",
+            "sourceCode": "import {\n    Component,\n    computed,\n    forwardRef,\n    HostBinding,\n    Signal,\n    signal,\n    input,\n    contentChild,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclListIllustrationIconDirective } from './ecl-list-illustration-icon.directive';\nimport { EclListIllustrationPictureDirective } from './ecl-list-illustration-picture.directive';\n\n/**\n * Component representing a single item in an ECL illustration list.\n *\n * Displays optional title, value, and one or more illustration icons.\n */\n@Component({\n    selector: 'ecl-list-illustration-item, li[eclListIllustrationItem]',\n    templateUrl: './ecl-list-illustration-item.component.html',\n})\nexport class EclListIllustrationItemComponent extends ECLBaseDirective {\n    /**\n     * Text displayed as the item title.\n     */\n    readonly eclTitle = input('');\n\n    /**\n     * Text displayed as the item value.\n     */\n    readonly eclValue = input('');\n\n    /**\n     * Applies ARIA role for list items.\n     */\n    @HostBinding('attr.role') role = 'listitem';\n\n    /**\n     * Applies ECL class for illustration list item.\n     */\n    @HostBinding('class.ecl-list-illustration__item') className = true;\n\n    readonly eclIllustrationIcon = contentChild(forwardRef(() => EclListIllustrationIconDirective));\n\n    readonly eclIllustrationPicture = contentChild(forwardRef(() => EclListIllustrationPictureDirective));\n\n    /** A special class needs to be added, for vertical lists with picture. */\n    isVerticalPicture = signal(false);\n\n    /** A special class needs to be added, if an icon list has dividers between items. */\n    hasDivider = signal(false);\n\n    hasPicture: Signal<boolean> = computed(() => this.eclIllustrationPicture() !== undefined);\n\n    /**\n     * Returns `true` if the item has a title or any projected icons.\n     */\n    readonly hasTitle = computed(() => Boolean(this.eclTitle()) || this.eclIllustrationIcon() !== undefined);\n\n    /**\n     * Returns `true` if the item has a value.\n     */\n    readonly hasValue = computed(() => Boolean(this.eclValue()));\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -60128,30 +59867,6 @@
             "extends": [
                 "ECLBaseDirective"
             ],
-            "accessors": {
-                "hasTitle": {
-                    "name": "hasTitle",
-                    "getSignature": {
-                        "name": "hasTitle",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 60,
-                        "rawdescription": "\n\nReturns `true` if the item has a title or any projected icons.\n",
-                        "description": "<p>Returns <code>true</code> if the item has a title or any projected icons.</p>\n"
-                    }
-                },
-                "hasValue": {
-                    "name": "hasValue",
-                    "getSignature": {
-                        "name": "hasValue",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 67,
-                        "rawdescription": "\n\nReturns `true` if the item has a value.\n",
-                        "description": "<p>Returns <code>true</code> if the item has a value.</p>\n"
-                    }
-                }
-            },
             "relationships": {
                 "incoming": [],
                 "outgoing": [
@@ -60161,14 +59876,15 @@
                     }
                 ]
             },
-            "templateData": "<div class=\"ecl-list-illustration__item-content\" [class.ecl-list-illustration__item-content--row]=\"isVerticalPicture()\"\n    [class.ecl-list-illustration__divider]=\"hasDivider()\">\n    <ng-content select=\"[eclListIllustrationImage],[eclListIllustrationPicture],[eclListIllustrationIcon]\"></ng-content>\n    <div class=\"ecl-list-illustration__detail\">\n        @if (hasTitle || hasValue) {\n        <div class=\"ecl-list-illustration__title-container\">\n            @if (hasValue) {\n            <div class=\"ecl-list-illustration__value\">{{ eclValue() }}</div>\n            }\n            <div class=\"ecl-list-illustration__title\">{{ eclTitle() }}</div>\n        </div>\n        }\n\n        <div class=\"ecl-list-illustration__description\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>"
+            "templateData": "<div class=\"ecl-list-illustration__item-content\" [class.ecl-list-illustration__item-content--row]=\"isVerticalPicture()\"\n    [class.ecl-list-illustration__divider]=\"hasDivider()\">\n    <ng-content select=\"[eclListIllustrationImage],[eclListIllustrationPicture],[eclListIllustrationIcon]\"></ng-content>\n    <div class=\"ecl-list-illustration__detail\">\n        @if (hasTitle() || hasValue()) {\n        <div class=\"ecl-list-illustration__title-container\">\n            @if (hasValue()) {\n            <div class=\"ecl-list-illustration__value\">{{ eclValue() }}</div>\n            }\n            <div class=\"ecl-list-illustration__title\">{{ eclTitle() }}</div>\n        </div>\n        }\n\n        <div class=\"ecl-list-illustration__description\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>"
         },
         {
             "name": "EclLoadingIndicatorComponent",
-            "id": "component-EclLoadingIndicatorComponent-59cf112f021cd3c47a6918038217317ad36318907b34c7857232807e1040f569d2ce040570a20f92cdf09c79d968c66ddfd936f4bc47ad7ae6e9934b4f1fa73b",
+            "id": "component-EclLoadingIndicatorComponent-640a69de4dccdc5ef0f3b544347bea9576bd0d653521a704d0004e2e7a176d60fd64c871de05b39225df1d8576fa39ee2618d4f19276249bc627bb557246836c",
             "file": "packages/ecl/components/ecl-loading-indicator/ecl-loading-indicator.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -60192,7 +59908,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Controls whether the spinner should be centered.</p>\n<p>Defaults to <code>true</code>.</p>\n",
-                    "line": 38,
+                    "line": 42,
                     "rawdescription": "\n\nControls whether the spinner should be centered.\n\nDefaults to `true`.\n",
                     "modifierKind": [
                         148
@@ -60209,7 +59925,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Controls visibility of the spinner.</p>\n<p>When set to <code>false</code>, the spinner will be hidden via CSS.</p>\n<p>Defaults to <code>true</code>.</p>\n",
-                    "line": 47,
+                    "line": 51,
                     "rawdescription": "\n\nControls visibility of the spinner.\n\nWhen set to `false`, the spinner will be hidden via CSS.\n\nDefaults to `true`.\n",
                     "modifierKind": [
                         148
@@ -60226,7 +59942,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Size of the spinner.</p>\n<p>Possible values:</p>\n<ul>\n<li><code>&#39;s&#39;</code> – small</li>\n<li><code>&#39;m&#39;</code> – medium (default)</li>\n<li><code>&#39;l&#39;</code> – large</li>\n</ul>\n",
-                    "line": 22,
+                    "line": 26,
                     "rawdescription": "\n\nSize of the spinner.\n\nPossible values:\n- `'s'` – small\n- `'m'` – medium (default)\n- `'l'` – large\n",
                     "modifierKind": [
                         148
@@ -60243,7 +59959,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Variant of the spinner color.</p>\n<p>Possible values:</p>\n<ul>\n<li><code>&#39;primary&#39;</code> – default appearance</li>\n<li><code>&#39;inverted&#39;</code> – used on dark backgrounds</li>\n</ul>\n",
-                    "line": 31,
+                    "line": 35,
                     "rawdescription": "\n\nVariant of the spinner color.\n\nPossible values:\n- `'primary'` – default appearance\n- `'inverted'` – used on dark backgrounds\n",
                     "modifierKind": [
                         148
@@ -60306,17 +60022,8 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Applies ARIA role for accessibility.</p>\n",
-                    "line": 52,
-                    "rawdescription": "\n\nApplies ARIA role for accessibility.\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.role'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "line": 56,
+                    "rawdescription": "\n\nApplies ARIA role for accessibility.\n"
                 }
             ],
             "methodsClass": [
@@ -60362,47 +60069,21 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.role",
-                    "actualName": "role",
-                    "defaultValue": "'alert'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies ARIA role for accessibility.\n",
-                    "description": "<p>Applies ARIA role for accessibility.</p>\n",
-                    "line": 52,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies CSS classes based on size, variant and visibility settings.\n",
-                    "description": "<p>Applies CSS classes based on size, variant and visibility settings.</p>\n",
-                    "line": 58,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "<p>Component representing a loading indicator (spinner) using ECL styles.</p>\n<p>Supports different sizes, color variants, centering and visibility options.</p>\n",
             "rawdescription": "\n\nComponent representing a loading indicator (spinner) using ECL styles.\n\nSupports different sizes, color variants, centering and visibility options.\n",
             "type": "component",
-            "sourceCode": "import { Component, HostBinding, booleanAttribute, input } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Component representing a loading indicator (spinner) using ECL styles.\n *\n * Supports different sizes, color variants, centering and visibility options.\n */\n@Component({\n    selector: 'ecl-loading-indicator',\n    templateUrl: './ecl-loading-indicator.component.html',\n})\nexport class EclLoadingIndicatorComponent extends ECLBaseDirective {\n    /**\n     * Size of the spinner.\n     *\n     * Possible values:\n     * - `'s'` – small\n     * - `'m'` – medium (default)\n     * - `'l'` – large\n     */\n    readonly size = input<'s' | 'm' | 'l'>('m');\n\n    /**\n     * Variant of the spinner color.\n     *\n     * Possible values:\n     * - `'primary'` – default appearance\n     * - `'inverted'` – used on dark backgrounds\n     */\n    readonly variant = input<'primary' | 'inverted'>('primary');\n\n    /**\n     * Controls whether the spinner should be centered.\n     *\n     * Defaults to `true`.\n     */\n    readonly isCentered = input(true, { transform: booleanAttribute });\n\n    /**\n     * Controls visibility of the spinner.\n     *\n     * When set to `false`, the spinner will be hidden via CSS.\n     *\n     * Defaults to `true`.\n     */\n    readonly isVisible = input(true, { transform: booleanAttribute });\n\n    /**\n     * Applies ARIA role for accessibility.\n     */\n    @HostBinding('attr.role') role = 'alert';\n\n    /**\n     * Applies CSS classes based on size, variant and visibility settings.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-spinner'),\n            `ecl-spinner--${this.size()}`,\n            `ecl-spinner--${this.variant()}`,\n            this.isCentered() ? 'ecl-spinner--centered' : '',\n            this.isVisible() ? 'ecl-spinner--visible' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n}\n",
+            "sourceCode": "import { Component, booleanAttribute, input } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Component representing a loading indicator (spinner) using ECL styles.\n *\n * Supports different sizes, color variants, centering and visibility options.\n */\n@Component({\n    selector: 'ecl-loading-indicator',\n    templateUrl: './ecl-loading-indicator.component.html',\n    host: {\n        '[attr.role]': 'role',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclLoadingIndicatorComponent extends ECLBaseDirective {\n    /**\n     * Size of the spinner.\n     *\n     * Possible values:\n     * - `'s'` – small\n     * - `'m'` – medium (default)\n     * - `'l'` – large\n     */\n    readonly size = input<'s' | 'm' | 'l'>('m');\n\n    /**\n     * Variant of the spinner color.\n     *\n     * Possible values:\n     * - `'primary'` – default appearance\n     * - `'inverted'` – used on dark backgrounds\n     */\n    readonly variant = input<'primary' | 'inverted'>('primary');\n\n    /**\n     * Controls whether the spinner should be centered.\n     *\n     * Defaults to `true`.\n     */\n    readonly isCentered = input(true, { transform: booleanAttribute });\n\n    /**\n     * Controls visibility of the spinner.\n     *\n     * When set to `false`, the spinner will be hidden via CSS.\n     *\n     * Defaults to `true`.\n     */\n    readonly isVisible = input(true, { transform: booleanAttribute });\n\n    /**\n     * Applies ARIA role for accessibility.\n     */\n    role = 'alert';\n\n    /**\n     * Applies CSS classes based on size, variant and visibility settings.\n     */\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-spinner'),\n            `ecl-spinner--${this.size()}`,\n            `ecl-spinner--${this.variant()}`,\n            this.isCentered() ? 'ecl-spinner--centered' : '',\n            this.isVisible() ? 'ecl-spinner--visible' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 132,
-                    "end": 295,
+                    "pos": 119,
+                    "end": 282,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -60421,7 +60102,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 58,
+                        "line": 61,
                         "rawdescription": "\n\nApplies CSS classes based on size, variant and visibility settings.\n",
                         "description": "<p>Applies CSS classes based on size, variant and visibility settings.</p>\n"
                     }
@@ -64716,7 +64397,7 @@
         },
         {
             "name": "EclMenuItemComponent",
-            "id": "component-EclMenuItemComponent-34f452bf97feb65169901e0c06a1fb0de14d012edd6ec1567c23c2a3ff5f8da70e3e579ec2af4034ca2d8cca1fa411c32b4c899c2b8dfc1e89d67142e51d0cb8",
+            "id": "component-EclMenuItemComponent-2e828b9fa40b69437b34ee8534c8041d5f0329c62e7f0de43e9f6bb1b0fc888748f0edb953a4cbcde823fcc0192e5393d366ce1c2ad78727e2b78670410f86bc",
             "file": "packages/ecl/components/ecl-menu/ecl-menu/ecl-menu-item.component.ts",
             "encapsulation": [
                 "ViewEncapsulation.None"
@@ -65654,7 +65335,7 @@
             "description": "<p>This component represents a root menu item. Adds styling and functionality to menu item.</p>\n",
             "rawdescription": "\n\nThis component represents a root menu item. Adds styling and functionality to menu item.\n",
             "type": "component",
-            "sourceCode": "import { NgTemplateOutlet } from '@angular/common';\nimport {\n    AfterContentInit,\n    afterNextRender,\n    Component,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    inject,\n    Input,\n    OnDestroy,\n    Output,\n    Renderer2,\n    ViewEncapsulation,\n    DOCUMENT,\n    input,\n    contentChild,\n    viewChild,\n    booleanAttribute,\n} from '@angular/core';\nimport { Params, QueryParamsHandling, RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EuiAppShellService } from '@eui/core';\nimport { EclButtonComponent, EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { Subject } from 'rxjs';\nimport { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';\nimport { EclMenuMegaComponent } from '../ecl-menu-mega';\nimport {\n    EclMenuItemCaretEvent,\n    EclMenuItemFocusEvent,\n    EclMenuItemHoverEvent,\n    EclMenuItemHoverOutEvent,\n    EclMenuItemKeydownEvent,\n    EclMenuItemParentFocusEvent,\n    EclMenuItemSelectEvent,\n} from '../events';\nimport { EclMenuItem } from '../models/ecl-menu-item.model';\n\nconst enum ColTrigger {\n    COL1_TRIGGER = 5,\n    COL2_TRIGGER = 9,\n    COL3_TRIGGER = 13,\n}\n\n/**\n * This component represents a root menu item. Adds styling and functionality to menu item.\n */\n@Component({\n    selector: 'ecl-menu-item',\n    templateUrl: './ecl-menu-item.component.html',\n    imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses',\n        '[class.ecl-menu__item--has-children]': 'hasEclChildrenDataAttribute',\n        '[attr.aria-haspopup]': 'hasEclChildrenDataAttribute',\n        '[attr.data-expanded]': 'isDataExpanded',\n        '(mouseenter)': 'onItemMouseEnter($event)',\n        '(mouseleave)': 'onItemMouseLeave($event)',\n    },\n})\nexport class EclMenuItemComponent extends ECLBaseDirective implements EclMenuItem, AfterContentInit, OnDestroy {\n    el = inject(ElementRef);\n\n    @Input() id: string;\n    @Input() label: string;\n    /**\n     * When in mobile view, use this property to set aria-label for the toggle items button (to expand item's children).\n     */\n    readonly toggleAriaLabel = input<string>(undefined);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    readonly routerLink = input<string | any[]>(null);\n    readonly queryParams = input<Params | null>(null);\n    readonly queryParamsHandling = input<QueryParamsHandling>(null);\n    @Input() href = '';\n    readonly target = input('');\n    @Input({ transform: booleanAttribute }) isCurrent = false;\n    /**\n     * Custom attributes, to be added to the <a> tag of the menu item.\n     */\n    readonly linkExtraAttributes = input<Record<string, string>>(undefined);\n\n    isExpanded: boolean;\n    /**\n     * Set to 'true', when item has more than 13 chidren and the overlay needs to use the full available space.\n     */\n    isFull = false;\n    isHovered = false;\n    isMobileBreakpoint = false;\n    /**\n     * Used when menu has overlay, to show if the item is currently displayed.\n     */\n    isVisible = true;\n\n    private readonly doc = inject(DOCUMENT);\n    private readonly window = this.doc.defaultView; // Window | null\n\n    /**\n     * The default role of the item is 'listitem' and should not be changed.\n     */\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-menu__item'),\n            this.isCurrent ? 'ecl-menu__item--current' : '',\n            this.isExpanded ? 'ecl-menu__item--expanded' : '',\n            this.getClassDependingChildrenCnt(),\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    readonly submenu = contentChild(forwardRef(() => EclMenuMegaComponent));\n    /**\n     * The <a> element of the menu item, when there are no children.\n     */\n    readonly menuLink = viewChild<ElementRef<HTMLAnchorElement>>('menuLink');\n    /**\n     * The <button> element of the menu item, when item has children.\n     */\n    readonly menuButton = viewChild(EclButtonComponent);\n\n    @Output() menuItemSelect = new EventEmitter<EclMenuItemSelectEvent>();\n    @Output() menuItemCaret = new EventEmitter<EclMenuItemCaretEvent>();\n    /**\n     * Event that is emited on clicking the caret button to expand item's children in mobile mode.\n     */\n    @Output() menuItemHover = new EventEmitter<EclMenuItemHoverEvent>();\n    @Output() menuItemHoverOut = new EventEmitter<EclMenuItemHoverOutEvent>();\n    @Output() menuMegaItemSelect = new EventEmitter<EclMenuItemSelectEvent>();\n    @Output() menuItemFocus = new EventEmitter<EclMenuItemFocusEvent>();\n    @Output() menuItemKeydown = new EventEmitter<EclMenuItemKeydownEvent>();\n    /**\n     * This event is emited when the keyboard nav reaches the last item in mobile view.\n     * Then the next focused element should be the 'close' btn.\n     */\n    @Output() menuMegaLastItemTab = new EventEmitter<void>();\n\n    get hasEclChildrenDataAttribute(): boolean {\n        return this.hasChildren || undefined;\n    }\n\n    get isDataExpanded(): boolean {\n        return this.hasChildren ? this.isHovered : null;\n    }\n\n    /**\n     * 'aria-current' is set to 'page' only when this item itself is the current page, and not when it is\n     * marked current merely because one of its children is the active item (in that case the child link\n     * carries 'aria-current=\"page\"'). Derived from live state so it stays correct whether 'isCurrent' is set\n     * at render time or updated on selection.\n     */\n    get ariaCurrent(): string | null {\n        return this.isCurrent && !this.hasCurrentChild ? 'page' : null;\n    }\n\n    /**\n     * Whether any child (sub-item) is the current item.\n     */\n    get hasCurrentChild(): boolean {\n        return this.children.some((child) => child.isCurrent);\n    }\n\n    get hasChildren(): boolean {\n        return !!this.submenu();\n    }\n\n    get children(): EclMenuItem[] {\n        return this.hasChildren ? this.submenu().eclMenuMegaItems.toArray() : [];\n    }\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private renderer = inject(Renderer2);\n    private appShell = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n            this.setExtraAttributesForLink(this.menuLink()?.nativeElement, this.linkExtraAttributes());\n        });\n    }\n\n    onItemMouseEnter(evt: MouseEvent): void {\n        if (this.isMobileBreakpoint) return;\n        this.menuItemHover.next(new EclMenuItemHoverEvent(this, evt));\n    }\n\n    onItemMouseLeave(evt: MouseEvent): void {\n        if (this.isMobileBreakpoint) return;\n        this.menuItemHoverOut.next(new EclMenuItemHoverOutEvent(this, evt));\n    }\n\n    ngAfterContentInit(): void {\n        // Subscibe to submenu component events.\n        const submenu = this.submenu();\n        if (submenu) {\n            submenu.menuItemSelect.pipe(takeUntil(this.destroy$)).subscribe((it: EclMenuItemSelectEvent) => {\n                this.menuMegaItemSelect.next(new EclMenuItemSelectEvent(it.menuItem, it.domEvent));\n            });\n            submenu.menuMegaItemParentFocus.pipe(takeUntil(this.destroy$)).subscribe((it: EclMenuItemParentFocusEvent) => {\n                if (!this.isMobileBreakpoint) {\n                    this.onFocusFromSubmenu();\n                }\n            });\n            submenu.menuMegaLastItemTab.pipe(takeUntil(this.destroy$)).subscribe(() => {\n                if (this.isMobileBreakpoint) {\n                    this.menuMegaLastItemTab.next();\n                }\n            });\n\n            if (this.hasSubmenuAnySelections()) {\n                this.isCurrent = true;\n            }\n        }\n\n        // this.tabindex = this.routerLink || this.href ? 0 : -1;\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    onItemFocus(evt: FocusEvent): void {\n        this.menuItemFocus.next(new EclMenuItemFocusEvent(this, evt));\n    }\n\n    onItemClick(evt: Event): void {\n        this.menuItemSelect.next(new EclMenuItemSelectEvent(this, evt));\n\n        if (!this.href) {\n            evt.stopPropagation();\n        }\n    }\n\n    /**\n     * When clicking the caret button, to expand item's children. Used in mobile view.\n     * @param evt\n     */\n    onItemCaretClick(evt: MouseEvent): void {\n        this.menuItemCaret.next(new EclMenuItemCaretEvent(this, evt));\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from the submenu.\n     */\n    onFocusFromSubmenu(): void {\n        this.onButtonFocus();\n        this.isHovered = false;\n        this.isExpanded = false;\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n     *  the next root menu item.\n     */\n    onFocusFromNext(): void {\n        if (this.menuButton()) {\n            this.onButtonFocus();\n        } else {\n            this.onLinkFocus();\n        }\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n     *  the previous root menu item.\n     */\n    onFocusFromPrev(): void {\n        this.onLinkFocus();\n    }\n\n    /**\n     * Manages the keyboard navigation when the current element is the button of the menu item.\n     * @param evt\n     */\n    onButtonKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                if (this.isHovered) {\n                    this.selectFirstMegaMenuItem();\n                } else {\n                    this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                }\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.onLinkFocus();\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.onLinkFocus();\n                break;\n            }\n            case KeyCode.TAB: {\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ENTER: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * Manages the keyboard navigation when the current element is the <a> tag of the menu item.\n     * @param evt\n     */\n    onLinkKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                this.onLinkNextFocus(evt);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.onLinkNextFocus(evt);\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ENTER: {\n                this.onItemClick(evt);\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                evt.preventDefault();\n                this.onLinkEscape(evt);\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * This method calculates height and width of an item, depending the maximum of lines(rows) allowed.\n     * Depends on the 'maxLines' property of the parent menu component.\n     * @param maxLines - property that sets the maximum possible lines in a menu item.\n     * @param isMobileBreakpoint\n     * @returns\n     */\n    checkMenuItem(maxLines: number, isMobileBreakpoint: boolean): void {\n        if (maxLines < 1) return;\n\n        const currentItem = this.el.nativeElement;\n        const currentLink = this.menuLink().nativeElement;\n        if (isMobileBreakpoint) {\n            this.renderer.setStyle(currentLink, 'width', '100%');\n            return;\n        }\n        this.renderer.setStyle(currentItem, 'alignItems', 'flex-start');\n        const linkStyle = this.window.getComputedStyle(currentLink);\n\n        const maxHeight = this.getMenuItemLinkMaxHeight(linkStyle, maxLines);\n\n        if (currentLink.offsetHeight > maxHeight) {\n            this.changeMenuItemLinkWidth(currentLink, maxLines, linkStyle);\n        }\n        this.renderer.removeStyle(currentItem, 'alignItems');\n    }\n\n    private onLinkEscape(evt: Event): void {\n        const menuButton = this.menuButton();\n        if (menuButton) {\n            menuButton.el.nativeElement.focus();\n            evt.stopPropagation();\n        } else {\n            this.menuLink().nativeElement.blur();\n        }\n    }\n\n    private selectFirstMegaMenuItem(): void {\n        this.submenu().selectFirstSubItem();\n    }\n\n    private onLinkFocus(): void {\n        this.menuLink().nativeElement.focus();\n    }\n\n    private onLinkNextFocus(evt: Event): void {\n        if (this.menuButton()) {\n            this.onButtonFocus();\n        } else {\n            this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n        }\n    }\n\n    private onButtonFocus(): void {\n        this.menuButton().el.nativeElement.focus();\n    }\n\n    private getMenuItemLinkMaxHeight(linkStyle: CSSStyleDeclaration, maxLines: number): number {\n        return parseInt(linkStyle.lineHeight, 10) * maxLines + parseInt(linkStyle.paddingTop, 10) + parseInt(linkStyle.paddingBottom, 10);\n    }\n\n    /**\n     * Calculates width of a menu item, depending on maximum lines of text allowed.\n     * @param currentLink\n     * @param maxLines\n     * @param linkStyle\n     * @returns\n     */\n    private changeMenuItemLinkWidth(currentLink: HTMLAnchorElement, maxLines: number, linkStyle: CSSStyleDeclaration): void {\n        this.renderer.setStyle(currentLink, 'white-space', 'nowrap');\n        const linkWidth = currentLink.offsetWidth;\n        if (maxLines === 1) {\n            this.renderer.setStyle(currentLink, 'width', `${linkWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);\n            this.renderer.removeStyle(currentLink, 'white-space');\n            return;\n        }\n        const textSize = currentLink.text.length;\n        const letterWidth = Math.ceil(linkWidth / textSize);\n        const wordsArray = currentLink.text.trim().split(' ');\n        const goalWidth = Math.ceil(linkWidth / maxLines);\n        const firstWord = wordsArray[0];\n        let cnt = 1;\n        let wordWidth = Math.ceil((firstWord.length + 1) * letterWidth);\n        while (wordWidth < goalWidth) {\n            wordWidth += Math.ceil((wordsArray[cnt].length + 1) * letterWidth);\n            cnt++;\n        }\n        this.renderer.setStyle(currentLink, 'width', `${wordWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);\n        this.renderer.removeStyle(currentLink, 'white-space');\n    }\n\n    private getClassDependingChildrenCnt(): string {\n        if (this.hasChildren) {\n            if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL1_TRIGGER) {\n                return 'ecl-menu__item--col1';\n            } else if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL2_TRIGGER) {\n                return 'ecl-menu__item--col2';\n            } else if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL3_TRIGGER) {\n                return 'ecl-menu__item--col3';\n            } else {\n                this.isFull = true;\n                return 'ecl-menu__item--full';\n            }\n        }\n        return '';\n    }\n\n    private hasSubmenuAnySelections(): boolean {\n        const submenu = this.submenu();\n        return submenu && !!submenu.eclMenuMegaItems.find((it) => it.isCurrent);\n    }\n\n    private setExtraAttributesForLink(link: HTMLElement, linkExtraAttributes: Record<string, string>): void {\n        if (linkExtraAttributes) {\n            Object.keys(linkExtraAttributes).forEach((key) => {\n                if (key !== 'href' && key !== 'routerLink') {\n                    this.renderer.setAttribute(link, key, linkExtraAttributes[key]);\n                }\n            });\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShell.getState<any>('breakpoints')\n            .pipe(\n                map(bp => !!(bp?.isMobile || bp?.isTablet || bp?.isLtLargeTablet)), // xs/sm/md/lg (< 1140px)\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                this.isMobileBreakpoint = isMobile;\n            });\n    }\n}\n",
+            "sourceCode": "import { NgTemplateOutlet } from '@angular/common';\nimport {\n    AfterContentInit,\n    afterNextRender,\n    Component,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    inject,\n    Input,\n    OnDestroy,\n    Output,\n    Renderer2,\n    ViewEncapsulation,\n    DOCUMENT,\n    booleanAttribute,\n    input,\n    contentChild,\n    viewChild,\n} from '@angular/core';\nimport { Params, QueryParamsHandling, RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EuiAppShellService } from '@eui/core';\nimport { EclButtonComponent, EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { Subject } from 'rxjs';\nimport { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';\nimport { EclMenuMegaComponent } from '../ecl-menu-mega';\nimport {\n    EclMenuItemCaretEvent,\n    EclMenuItemFocusEvent,\n    EclMenuItemHoverEvent,\n    EclMenuItemHoverOutEvent,\n    EclMenuItemKeydownEvent,\n    EclMenuItemParentFocusEvent,\n    EclMenuItemSelectEvent,\n} from '../events';\nimport { EclMenuItem } from '../models/ecl-menu-item.model';\n\nconst enum ColTrigger {\n    COL1_TRIGGER = 5,\n    COL2_TRIGGER = 9,\n    COL3_TRIGGER = 13,\n}\n\n/**\n * This component represents a root menu item. Adds styling and functionality to menu item.\n */\n@Component({\n    selector: 'ecl-menu-item',\n    templateUrl: './ecl-menu-item.component.html',\n    imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses',\n        '[class.ecl-menu__item--has-children]': 'hasEclChildrenDataAttribute',\n        '[attr.aria-haspopup]': 'hasEclChildrenDataAttribute',\n        '[attr.data-expanded]': 'isDataExpanded',\n        '(mouseenter)': 'onItemMouseEnter($event)',\n        '(mouseleave)': 'onItemMouseLeave($event)',\n    },\n})\nexport class EclMenuItemComponent extends ECLBaseDirective implements EclMenuItem, AfterContentInit, OnDestroy {\n    el = inject(ElementRef);\n\n    @Input() id: string;\n    @Input() label: string;\n    /**\n     * When in mobile view, use this property to set aria-label for the toggle items button (to expand item's children).\n     */\n    readonly toggleAriaLabel = input<string>(undefined);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    readonly routerLink = input<string | any[]>(null);\n    readonly queryParams = input<Params | null>(null);\n    readonly queryParamsHandling = input<QueryParamsHandling>(null);\n    @Input() href = '';\n    readonly target = input('');\n    @Input({ transform: booleanAttribute }) isCurrent = false;\n    /**\n     * Custom attributes, to be added to the <a> tag of the menu item.\n     */\n    readonly linkExtraAttributes = input<Record<string, string>>(undefined);\n\n    isExpanded: boolean;\n    /**\n     * Set to 'true', when item has more than 13 chidren and the overlay needs to use the full available space.\n     */\n    isFull = false;\n    isHovered = false;\n    isMobileBreakpoint = false;\n    /**\n     * Used when menu has overlay, to show if the item is currently displayed.\n     */\n    isVisible = true;\n\n    private readonly doc = inject(DOCUMENT);\n    private readonly window = this.doc.defaultView; // Window | null\n\n    /**\n     * The default role of the item is 'listitem' and should not be changed.\n     */\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-menu__item'),\n            this.isCurrent ? 'ecl-menu__item--current' : '',\n            this.isExpanded ? 'ecl-menu__item--expanded' : '',\n            this.getClassDependingChildrenCnt(),\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    readonly submenu = contentChild(forwardRef(() => EclMenuMegaComponent));\n    /**\n     * The <a> element of the menu item, when there are no children.\n     */\n    readonly menuLink = viewChild<ElementRef<HTMLAnchorElement>>('menuLink');\n    /**\n     * The <button> element of the menu item, when item has children.\n     */\n    readonly menuButton = viewChild(EclButtonComponent);\n\n    @Output() menuItemSelect = new EventEmitter<EclMenuItemSelectEvent>();\n    @Output() menuItemCaret = new EventEmitter<EclMenuItemCaretEvent>();\n    /**\n     * Event that is emited on clicking the caret button to expand item's children in mobile mode.\n     */\n    @Output() menuItemHover = new EventEmitter<EclMenuItemHoverEvent>();\n    @Output() menuItemHoverOut = new EventEmitter<EclMenuItemHoverOutEvent>();\n    @Output() menuMegaItemSelect = new EventEmitter<EclMenuItemSelectEvent>();\n    @Output() menuItemFocus = new EventEmitter<EclMenuItemFocusEvent>();\n    @Output() menuItemKeydown = new EventEmitter<EclMenuItemKeydownEvent>();\n    /**\n     * This event is emited when the keyboard nav reaches the last item in mobile view.\n     * Then the next focused element should be the 'close' btn.\n     */\n    @Output() menuMegaLastItemTab = new EventEmitter<void>();\n\n    get hasEclChildrenDataAttribute(): boolean {\n        return this.hasChildren || undefined;\n    }\n\n    get isDataExpanded(): boolean {\n        return this.hasChildren ? this.isHovered : null;\n    }\n\n    /**\n     * 'aria-current' is set to 'page' only when this item itself is the current page, and not when it is\n     * marked current merely because one of its children is the active item (in that case the child link\n     * carries 'aria-current=\"page\"'). Derived from live state so it stays correct whether 'isCurrent' is set\n     * at render time or updated on selection.\n     */\n    get ariaCurrent(): string | null {\n        return this.isCurrent && !this.hasCurrentChild ? 'page' : null;\n    }\n\n    /**\n     * Whether any child (sub-item) is the current item.\n     */\n    get hasCurrentChild(): boolean {\n        return this.children.some((child) => child.isCurrent);\n    }\n\n    get hasChildren(): boolean {\n        return !!this.submenu();\n    }\n\n    get children(): EclMenuItem[] {\n        return this.hasChildren ? this.submenu().eclMenuMegaItems.toArray() : [];\n    }\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private renderer = inject(Renderer2);\n    private appShell = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n            this.setExtraAttributesForLink(this.menuLink()?.nativeElement, this.linkExtraAttributes());\n        });\n    }\n\n    onItemMouseEnter(evt: MouseEvent): void {\n        if (this.isMobileBreakpoint) return;\n        this.menuItemHover.next(new EclMenuItemHoverEvent(this, evt));\n    }\n\n    onItemMouseLeave(evt: MouseEvent): void {\n        if (this.isMobileBreakpoint) return;\n        this.menuItemHoverOut.next(new EclMenuItemHoverOutEvent(this, evt));\n    }\n\n    ngAfterContentInit(): void {\n        // Subscibe to submenu component events.\n        const submenu = this.submenu();\n        if (submenu) {\n            submenu.menuItemSelect.pipe(takeUntil(this.destroy$)).subscribe((it: EclMenuItemSelectEvent) => {\n                this.menuMegaItemSelect.next(new EclMenuItemSelectEvent(it.menuItem, it.domEvent));\n            });\n            submenu.menuMegaItemParentFocus.pipe(takeUntil(this.destroy$)).subscribe((it: EclMenuItemParentFocusEvent) => {\n                if (!this.isMobileBreakpoint) {\n                    this.onFocusFromSubmenu();\n                }\n            });\n            submenu.menuMegaLastItemTab.pipe(takeUntil(this.destroy$)).subscribe(() => {\n                if (this.isMobileBreakpoint) {\n                    this.menuMegaLastItemTab.next();\n                }\n            });\n\n            if (this.hasSubmenuAnySelections()) {\n                this.isCurrent = true;\n            }\n        }\n\n        // this.tabindex = this.routerLink || this.href ? 0 : -1;\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    onItemFocus(evt: FocusEvent): void {\n        this.menuItemFocus.next(new EclMenuItemFocusEvent(this, evt));\n    }\n\n    onItemClick(evt: Event): void {\n        this.menuItemSelect.next(new EclMenuItemSelectEvent(this, evt));\n\n        if (!this.href) {\n            evt.stopPropagation();\n        }\n    }\n\n    /**\n     * When clicking the caret button, to expand item's children. Used in mobile view.\n     * @param evt\n     */\n    onItemCaretClick(evt: MouseEvent): void {\n        this.menuItemCaret.next(new EclMenuItemCaretEvent(this, evt));\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from the submenu.\n     */\n    onFocusFromSubmenu(): void {\n        this.onButtonFocus();\n        this.isHovered = false;\n        this.isExpanded = false;\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n     *  the next root menu item.\n     */\n    onFocusFromNext(): void {\n        if (this.menuButton()) {\n            this.onButtonFocus();\n        } else {\n            this.onLinkFocus();\n        }\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n     *  the previous root menu item.\n     */\n    onFocusFromPrev(): void {\n        this.onLinkFocus();\n    }\n\n    /**\n     * Manages the keyboard navigation when the current element is the button of the menu item.\n     * @param evt\n     */\n    onButtonKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                if (this.isHovered) {\n                    this.selectFirstMegaMenuItem();\n                } else {\n                    this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                }\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.onLinkFocus();\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.onLinkFocus();\n                break;\n            }\n            case KeyCode.TAB: {\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ENTER: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * Manages the keyboard navigation when the current element is the <a> tag of the menu item.\n     * @param evt\n     */\n    onLinkKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                this.onLinkNextFocus(evt);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.onLinkNextFocus(evt);\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ENTER: {\n                this.onItemClick(evt);\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                evt.preventDefault();\n                this.onLinkEscape(evt);\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * This method calculates height and width of an item, depending the maximum of lines(rows) allowed.\n     * Depends on the 'maxLines' property of the parent menu component.\n     * @param maxLines - property that sets the maximum possible lines in a menu item.\n     * @param isMobileBreakpoint\n     * @returns\n     */\n    checkMenuItem(maxLines: number, isMobileBreakpoint: boolean): void {\n        if (maxLines < 1) return;\n\n        const currentItem = this.el.nativeElement;\n        const currentLink = this.menuLink().nativeElement;\n        if (isMobileBreakpoint) {\n            this.renderer.setStyle(currentLink, 'width', '100%');\n            return;\n        }\n        this.renderer.setStyle(currentItem, 'alignItems', 'flex-start');\n        const linkStyle = this.window.getComputedStyle(currentLink);\n\n        const maxHeight = this.getMenuItemLinkMaxHeight(linkStyle, maxLines);\n\n        if (currentLink.offsetHeight > maxHeight) {\n            this.changeMenuItemLinkWidth(currentLink, maxLines, linkStyle);\n        }\n        this.renderer.removeStyle(currentItem, 'alignItems');\n    }\n\n    private onLinkEscape(evt: Event): void {\n        const menuButton = this.menuButton();\n        if (menuButton) {\n            menuButton.el.nativeElement.focus();\n            evt.stopPropagation();\n        } else {\n            this.menuLink().nativeElement.blur();\n        }\n    }\n\n    private selectFirstMegaMenuItem(): void {\n        this.submenu().selectFirstSubItem();\n    }\n\n    private onLinkFocus(): void {\n        this.menuLink().nativeElement.focus();\n    }\n\n    private onLinkNextFocus(evt: Event): void {\n        if (this.menuButton()) {\n            this.onButtonFocus();\n        } else {\n            this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n        }\n    }\n\n    private onButtonFocus(): void {\n        this.menuButton().el.nativeElement.focus();\n    }\n\n    private getMenuItemLinkMaxHeight(linkStyle: CSSStyleDeclaration, maxLines: number): number {\n        return parseInt(linkStyle.lineHeight, 10) * maxLines + parseInt(linkStyle.paddingTop, 10) + parseInt(linkStyle.paddingBottom, 10);\n    }\n\n    /**\n     * Calculates width of a menu item, depending on maximum lines of text allowed.\n     * @param currentLink\n     * @param maxLines\n     * @param linkStyle\n     * @returns\n     */\n    private changeMenuItemLinkWidth(currentLink: HTMLAnchorElement, maxLines: number, linkStyle: CSSStyleDeclaration): void {\n        this.renderer.setStyle(currentLink, 'white-space', 'nowrap');\n        const linkWidth = currentLink.offsetWidth;\n        if (maxLines === 1) {\n            this.renderer.setStyle(currentLink, 'width', `${linkWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);\n            this.renderer.removeStyle(currentLink, 'white-space');\n            return;\n        }\n        const textSize = currentLink.text.length;\n        const letterWidth = Math.ceil(linkWidth / textSize);\n        const wordsArray = currentLink.text.trim().split(' ');\n        const goalWidth = Math.ceil(linkWidth / maxLines);\n        const firstWord = wordsArray[0];\n        let cnt = 1;\n        let wordWidth = Math.ceil((firstWord.length + 1) * letterWidth);\n        while (wordWidth < goalWidth) {\n            wordWidth += Math.ceil((wordsArray[cnt].length + 1) * letterWidth);\n            cnt++;\n        }\n        this.renderer.setStyle(currentLink, 'width', `${wordWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);\n        this.renderer.removeStyle(currentLink, 'white-space');\n    }\n\n    private getClassDependingChildrenCnt(): string {\n        if (this.hasChildren) {\n            if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL1_TRIGGER) {\n                return 'ecl-menu__item--col1';\n            } else if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL2_TRIGGER) {\n                return 'ecl-menu__item--col2';\n            } else if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL3_TRIGGER) {\n                return 'ecl-menu__item--col3';\n            } else {\n                this.isFull = true;\n                return 'ecl-menu__item--full';\n            }\n        }\n        return '';\n    }\n\n    private hasSubmenuAnySelections(): boolean {\n        const submenu = this.submenu();\n        return submenu && !!submenu.eclMenuMegaItems.find((it) => it.isCurrent);\n    }\n\n    private setExtraAttributesForLink(link: HTMLElement, linkExtraAttributes: Record<string, string>): void {\n        if (linkExtraAttributes) {\n            Object.keys(linkExtraAttributes).forEach((key) => {\n                if (key !== 'href' && key !== 'routerLink') {\n                    this.renderer.setAttribute(link, key, linkExtraAttributes[key]);\n                }\n            });\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShell.getState<any>('breakpoints')\n            .pipe(\n                map(bp => !!(bp?.isMobile || bp?.isTablet || bp?.isLtLargeTablet)), // xs/sm/md/lg (< 1140px)\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                this.isMobileBreakpoint = isMobile;\n            });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -82552,7 +82233,7 @@
                     }
                 ]
             },
-            "templateData": "<div class=\"ecl-site-footer__section ecl-site-footer__section--common\">\n    @if (!isCore()) {\n    <a href=\"https://commission.europa.eu/index_{{languageCode()}}\"\n        class=\"ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__logo-link\">\n        <picture class=\"ecl-picture ecl-site-footer__picture\"><img class=\"ecl-site-footer__logo-image\"\n                src=\"assets/images/ecl/logo/ec/negative/logo-ec--{{logoLanguageCode}}.svg\" alt=\"European Commission\">\n        </picture>\n    </a>\n    <div class=\"ecl-site-footer__extra-links-container\">\n        <ecl-social-media-follow isIconOnly description=\"{{'ecl.footer.FOLLOW-EUROPEAN-COMMISSION' | translate}}\"\n            class=\"ecl-social-media-follow--description_inline ecl-site-footer__social-media\">\n            <ecl-social-media-follow-item icon=\"mastodon\" href=\"https://ec.social-network.europa.eu/@EUCommission\"\n                isInverted>Mastodon</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"linkedin\" href=\"https://www.linkedin.com/company/european-commission\"\n                isInverted>LinkedIn</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"bluesky\" href=\"https://bsky.app/profile/ec.europa.eu\"\n                isInverted>Bluesky</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"facebook\" href=\"https://www.facebook.com/EuropeanCommission\"\n                isInverted>Facebook</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"youtube\" href=\"https://www.youtube.com/user/eutube\"\n                isInverted>YouTube</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"chain\"\n                href=\"https://european-union.europa.eu/contact-eu/social-media-channels_{{languageCode()}}\"\n                isInverted>Other</ecl-social-media-follow-item>\n        </ecl-social-media-follow>\n        <ul eclSiteFooterList isInline>\n            <li eclSiteFooterListItem><a\n                href=\"https://commission.europa.eu/about-european-commission/contact_{{languageCode()}}\"\n                class=\"ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link\">{{ 'ecl.footer.CONTACT' | translate }}</a></li>\n        </ul>\n    </div>\n    } @else {\n    <ecl-social-media-follow isIconOnly description=\"{{'ecl.footer.FOLLOW-US' | translate}}\"\n            class=\"ecl-social-media-follow--description_inline ecl-site-footer__social-media\">\n            <ecl-social-media-follow-item icon=\"mastodon\" href=\"https://ec.social-network.europa.eu/@EUCommission\"\n                isInverted>Mastodon</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"linkedin\" href=\"https://www.linkedin.com/company/european-commission\"\n                isInverted>LinkedIn</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"bluesky\" href=\"https://bsky.app/profile/ec.europa.eu\"\n                isInverted>Bluesky</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"facebook\" href=\"https://www.facebook.com/EuropeanCommission\"\n                isInverted>Facebook</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"youtube\" href=\"https://www.youtube.com/user/eutube\"\n                isInverted>YouTube</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"chain\"\n                href=\"https://european-union.europa.eu/contact-eu/social-media-channels_{{languageCode()}}\"\n                isInverted>Other</ecl-social-media-follow-item>\n    </ecl-social-media-follow>\n    }\n    <ul eclSiteFooterList isInline>\n        <li eclSiteFooterListItem><a\n                href=\"https://commission.europa.eu/legal-notice/vulnerability-disclosure-policy_{{languageCode()}}\"\n                eclLink isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.REPORT-IT-VULNERABILITY' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/languages-our-websites_{{languageCode()}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.LANGUAGES' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/cookies_{{languageCode()}}\" eclLink isInverted\n                variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.COOKIES' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/privacy-policy_{{languageCode()}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.PRIVACY-POLICY' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/legal-notice_{{languageCode()}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.LEGAL-NOTICE' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"{{ a11yStatementRef() }}\"\n                eclLink isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.ACCESSIBILITY' | translate }}</a></li>\n    </ul>\n</div>"
+            "templateData": "<div class=\"ecl-site-footer__section ecl-site-footer__section--common\">\n    @if (!isCore()) {\n    <a href=\"https://commission.europa.eu/index_{{languageCode()}}\"\n        class=\"ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__logo-link\">\n        <picture class=\"ecl-picture ecl-site-footer__picture\"><img class=\"ecl-site-footer__logo-image\"\n                src=\"assets/images/ecl/logo/ec/negative/logo-ec--{{logoLanguageCode}}.svg\" alt=\"European Commission\">\n        </picture>\n    </a>\n    <div class=\"ecl-site-footer__extra-links-container\">\n        <ecl-social-media-follow isIconOnly description=\"{{'ecl.footer.FOLLOW-EUROPEAN-COMMISSION' | translate}}\"\n            class=\"ecl-social-media-follow--description_inline ecl-site-footer__social-media\">\n            <ecl-social-media-follow-item icon=\"mastodon\" href=\"https://ec.social-network.europa.eu/@EUCommission\"\n                isInverted>Mastodon</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"linkedin\" href=\"https://www.linkedin.com/company/european-commission\"\n                isInverted>LinkedIn</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"bluesky\" href=\"https://bsky.app/profile/ec.europa.eu\"\n                isInverted>Bluesky</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"facebook\" href=\"https://www.facebook.com/EuropeanCommission\"\n                isInverted>Facebook</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"youtube\" href=\"https://www.youtube.com/user/eutube\"\n                isInverted>YouTube</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"chain\"\n                href=\"https://european-union.europa.eu/contact-eu/social-media-channels_{{languageCode()}}\"\n                isInverted>Other</ecl-social-media-follow-item>\n        </ecl-social-media-follow>\n        <ul eclSiteFooterList isInline>\n            <li eclSiteFooterListItem><a\n                href=\"https://commission.europa.eu/about-european-commission/contact_{{languageCode()}}\"\n                class=\"ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link\">{{ 'ecl.footer.CONTACT' | translate }}</a></li>\n        </ul>\n    </div>\n    } @else {\n    <ecl-social-media-follow isIconOnly description=\"{{'ecl.footer.FOLLOW-US' | translate}}\"\n            class=\"ecl-social-media-follow--description_inline ecl-site-footer__social-media\">\n            <ecl-social-media-follow-item icon=\"mastodon\" href=\"https://ec.social-network.europa.eu/@EUCommission\"\n                isInverted>Mastodon</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"linkedin\" href=\"https://www.linkedin.com/company/european-commission\"\n                isInverted>LinkedIn</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"bluesky\" href=\"https://bsky.app/profile/ec.europa.eu\"\n                isInverted>Bluesky</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"facebook\" href=\"https://www.facebook.com/EuropeanCommission\"\n                isInverted>Facebook</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"youtube\" href=\"https://www.youtube.com/user/eutube\"\n                isInverted>YouTube</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"chain\"\n                href=\"https://european-union.europa.eu/contact-eu/social-media-channels_{{languageCode()}}\"\n                isInverted>Other</ecl-social-media-follow-item>\n    </ecl-social-media-follow>\n    }\n    <ul eclSiteFooterList isInline>\n        <li eclSiteFooterListItem><a\n                href=\"https://commission.europa.eu/legal-notice/vulnerability-disclosure-policy_{{languageCode()}}\"\n                eclLink isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.REPORT-IT-VULNERABILITY' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/languages-our-websites_{{languageCode()}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.LANGUAGES' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/cookies_{{languageCode()}}\" eclLink isInverted\n                variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.COOKIES' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/privacy-policy_{{languageCode()}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.PRIVACY-POLICY' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/legal-notice_{{languageCode()}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.LEGAL-NOTICE' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"{{ a11yStatementRef() }}\"\n                eclLink isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.ACCESSIBILITY' | translate }}</a></li>\n    </ul>\n</div>\n"
         },
         {
             "name": "EclSiteHeaderActionComponent",
@@ -87531,7 +87212,7 @@
         },
         {
             "name": "EclSocialMediaFollowItemComponent",
-            "id": "component-EclSocialMediaFollowItemComponent-a5a386ce91d38e0d4ebb07c2085b8c669354f1a816b2677b7dde9628c9a14908687d7a7d0f9f6e66e8172233d257ac2a1145254275a03f9216caa201b32c6018",
+            "id": "component-EclSocialMediaFollowItemComponent-be2bc74a52d7b183206e23fa9c6edd0706816decad401fed2ccd0e2788dead5b1d6dbb066556634b97683220c7111e50c45fd911c2cccbe1ec6738847a5e6fdf",
             "file": "packages/ecl/components/ecl-social-media-follow/ecl-social-media-follow-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -87732,7 +87413,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 44,
+                    "line": 38,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -87748,7 +87429,7 @@
                     "args": [
                         {
                             "name": "evt",
-                            "type": "unknown",
+                            "type": "Event",
                             "optional": false,
                             "dotDotDotToken": false,
                             "deprecated": false,
@@ -87766,7 +87447,7 @@
                     "jsdoctags": [
                         {
                             "name": "evt",
-                            "type": "unknown",
+                            "type": "Event",
                             "optional": false,
                             "dotDotDotToken": false,
                             "deprecated": false,
@@ -87842,7 +87523,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { booleanAttribute, Component, inject, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclBaseEvent } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EclSocialMediaFollowComponent } from './ecl-social-media-follow.component';\n\nexport class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {}\n\n@Component({\n    selector: 'ecl-social-media-follow-item',\n    templateUrl: './ecl-social-media-follow-item.component.html',\n    imports: [...EUI_ECL_ICON, ...EUI_ECL_LINK, NgTemplateOutlet, RouterLink, RouterLinkWithHref],\n    host: {\n        'role': 'listitem',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSocialMediaFollowItemComponent extends ECLBaseDirective {\n    readonly isInverted = input<false, unknown>(undefined, { transform: (booleanAttribute) as any });\n    icon = input<string>();\n    iconSet = input<string>('social-media');\n    readonly href = input('');\n    readonly routerLink = input('');\n    readonly target = input<string>(undefined);\n    readonly size = input('m');\n    readonly extraAttributes = input<{\n        name: string;\n        value?: string | null;\n    }[]>(undefined);\n\n    private parent = inject(EclSocialMediaFollowComponent);\n\n    get isIconOnly(): boolean {\n        return this.parent?.isIconOnly() ?? false;\n    }\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__item')].join(' ').trim();\n    }\n\n    readonly itemClick = output<EclSocialMediaFollowItemClickEvent>();\n\n    onItemClick(evt): void {\n        this.itemClick.emit(new EclSocialMediaFollowItemClickEvent());\n        if (!this.href() && !this.routerLink()) {\n            evt.preventDefault();\n        }\n    }\n}\n",
+            "sourceCode": "import { booleanAttribute, Component, inject, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclBaseEvent } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EclSocialMediaFollowComponent } from './ecl-social-media-follow.component';\n\nexport class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {}\n\n@Component({\n    selector: 'ecl-social-media-follow-item',\n    templateUrl: './ecl-social-media-follow-item.component.html',\n    imports: [...EUI_ECL_ICON, ...EUI_ECL_LINK, NgTemplateOutlet, RouterLink, RouterLinkWithHref],\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSocialMediaFollowItemComponent extends ECLBaseDirective {\n    readonly isInverted = input<false, unknown>(undefined, { transform: (booleanAttribute) as any });\n    icon = input<string>();\n    iconSet = input<string>('social-media');\n    readonly href = input('');\n    readonly routerLink = input('');\n    readonly target = input<string>(undefined);\n    readonly size = input('m');\n    readonly extraAttributes = input<{\n        name: string;\n        value?: string | null;\n    }[]>(undefined);\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__item')].join(' ').trim();\n    }\n\n    readonly itemClick = output<EclSocialMediaFollowItemClickEvent>();\n\n    private parent = inject(EclSocialMediaFollowComponent);\n\n    get isIconOnly(): boolean {\n        return this.parent?.isIconOnly() ?? false;\n    }\n\n    onItemClick(evt: Event): void {\n        this.itemClick.emit(new EclSocialMediaFollowItemClickEvent());\n        if (!this.href() && !this.routerLink()) {\n            evt.preventDefault();\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -87850,24 +87531,24 @@
                 "ECLBaseDirective"
             ],
             "accessors": {
-                "isIconOnly": {
-                    "name": "isIconOnly",
-                    "getSignature": {
-                        "name": "isIconOnly",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 36,
-                        "rawdescription": "\n",
-                        "description": ""
-                    }
-                },
                 "cssClasses": {
                     "name": "cssClasses",
                     "getSignature": {
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 40,
+                        "line": 34,
+                        "rawdescription": "\n",
+                        "description": ""
+                    }
+                },
+                "isIconOnly": {
+                    "name": "isIconOnly",
+                    "getSignature": {
+                        "name": "isIconOnly",
+                        "type": "boolean",
+                        "returnType": "boolean",
+                        "line": 42,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -90224,7 +89905,7 @@
                     }
                 ]
             },
-            "templateData": "@if (eclTitle() || eclDescription()) {\n<div class=\"ecl-story-card__header\">\n    @if (eclTitle()) {\n    <div class=\"ecl-story-card__title\" [attr.id]=\"titleId()\">{{ eclTitle() }}</div>\n    }\n    @if (eclDescription()) {\n    <div class=\"ecl-story-card__description\">{{ eclDescription() }}</div>\n    }\n</div>\n}\n\n<!-- Mobile: Embla Carousel (auto-generated from items + details) -->\n<div class=\"ecl-story-card__carousel\">\n    <div class=\"ecl-story-card__carousel-viewport\"\n        role=\"region\"\n        [attr.aria-label]=\"'ecl.story-card.SLIDER-LABEL' | translate\"\n        emblaCarousel\n        [options]=\"emblaOptions\"\n        [subscribeToEvents]=\"subscribeToEvents\"\n        (emblaChange)=\"onEmblaChange($event)\">\n        <ul class=\"ecl-story-card__carousel-container\">\n            @for (item of items(); track i; let i = $index) {\n            <li class=\"ecl-story-card__carousel-slide\"\n                [attr.aria-hidden]=\"i !== activeSlideIndex() ? true : null\">\n                <article class=\"ecl-story-card__card\">\n                    <div class=\"ecl-story-card__image-wrapper\" #carouselImageWrapper>\n                    </div>\n                    <div class=\"ecl-story-card__content\" #carouselContentWrapper>\n                        @if (detailsPanels()[i]; as panel) {\n                            @if (panel.eclTitle()) {\n                            <div class=\"ecl-story-card__card-title\">{{ panel.eclTitle() }}</div>\n                            }\n                            @if (panel.description()) {\n                            <div class=\"ecl-story-card__card-description\">{{ panel.description() }}</div>\n                            }\n                        }\n                    </div>\n                </article>\n            </li>\n            }\n        </ul>\n    </div>\n\n    <!-- Carousel Controls -->\n    @if (totalSlides() > 1) {\n    <div class=\"ecl-story-card__pager\">\n        <button class=\"ecl-story-card__prev\"\n            [disabled]=\"prevDisabled()\"\n            (click)=\"onCarouselPrevClick()\"\n            [attr.aria-label]=\"'ecl.story-card.SHOW-PREV-SLIDE' | translate\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span class=\"ecl-story-card__prev-label\">\n                {{ 'ecl.story-card.PREVIOUS' | translate }}\n            </span>\n        </button>\n\n        <div class=\"ecl-story-card__dots\">\n            @for (dotIndex of getDotIndices(); track dotIndex) {\n            <button\n                #dotButton\n                class=\"ecl-story-card__dot\"\n                [class.ecl-story-card__dot--active]=\"dotIndex === activeSlideIndex()\"\n                [class.is-prev]=\"dotIndex === activeSlideIndex() - 1\"\n                [attr.aria-label]=\"'ecl.story-card.GO-TO-SLIDE' | translate: { current: dotIndex + 1, total: totalSlides() }\"\n                (click)=\"goToSlide(dotIndex)\">\n            </button>\n            }\n        </div>\n\n        <button class=\"ecl-story-card__next\"\n            [disabled]=\"nextDisabled()\"\n            (click)=\"onCarouselNextClick()\"\n            [attr.aria-label]=\"'ecl.story-card.SHOW-NEXT-SLIDE' | translate\">\n            <span class=\"ecl-story-card__next-label\">\n                {{ 'ecl.story-card.NEXT' | translate }}\n            </span>\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n        </button>\n    </div>\n    }\n</div>\n\n<!-- Desktop: Grid with Accordion (user-authored content projected here) -->\n<div class=\"ecl-story-card__grid\">\n    <ng-content select=\"ul[eclStoryCardList]\"></ng-content>\n    <ng-content select=\"[eclStoryCardGridDetails]\"></ng-content>\n\n    <!-- Grid Controls -->\n    @if (totalSlides() > 1) {\n    <div class=\"ecl-story-card__grid-controls\">\n        <button class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-story-card__grid-prev ecl-button--icon-only\"\n            type=\"button\"\n            (click)=\"onGridPrevClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PREVIOUS' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.PREVIOUS' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor\" icon=\"caret-left\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--secondary ecl-button--neutral ecl-story-card__grid-play ecl-button--icon-only\"\n            type=\"button\"\n            [style.display]=\"isAutoPlaying() ? 'none' : 'flex'\"\n            (click)=\"onPlayClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PLAY' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.PLAY' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor-fill\" icon=\"play\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--secondary ecl-button--neutral ecl-story-card__grid-pause ecl-button--icon-only\"\n            type=\"button\"\n            [style.display]=\"isAutoPlaying() ? 'flex' : 'none'\"\n            (click)=\"onPauseClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PAUSE' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.PAUSE' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor-fill\" icon=\"pause\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-story-card__grid-next ecl-button--icon-only\"\n            type=\"button\"\n            (click)=\"onGridNextClick()\"\n            [attr.aria-label]=\"'ecl.story-card.NEXT' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.NEXT' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor\" icon=\"caret-right\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n    </div>\n    }\n</div>\n"
+            "templateData": "@if (eclTitle() || eclDescription()) {\n<div class=\"ecl-story-card__header\">\n    @if (eclTitle()) {\n    <div class=\"ecl-story-card__title\" [attr.id]=\"titleId()\">{{ eclTitle() }}</div>\n    }\n    @if (eclDescription()) {\n    <div class=\"ecl-story-card__description\">{{ eclDescription() }}</div>\n    }\n</div>\n}\n\n<!-- Mobile: Embla Carousel (auto-generated from items + details) -->\n<div class=\"ecl-story-card__carousel\">\n    <div class=\"ecl-story-card__carousel-viewport\"\n        role=\"region\"\n        [attr.aria-label]=\"'ecl.story-card.SLIDER-LABEL' | translate\"\n        emblaCarousel\n        [options]=\"emblaOptions\"\n        [subscribeToEvents]=\"subscribeToEvents\"\n        (emblaChange)=\"onEmblaChange($event)\">\n        <ul class=\"ecl-story-card__carousel-container\">\n            @for (item of items(); track i; let i = $index) {\n            <li class=\"ecl-story-card__carousel-slide\"\n                [attr.aria-hidden]=\"i !== activeSlideIndex() ? true : null\">\n                <article class=\"ecl-story-card__card\">\n                    <div class=\"ecl-story-card__image-wrapper\" #carouselImageWrapper>\n                    </div>\n                    <div class=\"ecl-story-card__content\" #carouselContentWrapper>\n                        @if (detailsPanels()[i]; as panel) {\n                            @if (panel.eclTitle()) {\n                            <div class=\"ecl-story-card__card-title\">{{ panel.eclTitle() }}</div>\n                            }\n                            @if (panel.description()) {\n                            <div class=\"ecl-story-card__card-description\">{{ panel.description() }}</div>\n                            }\n                        }\n                    </div>\n                </article>\n            </li>\n            }\n        </ul>\n    </div>\n\n    <!-- Carousel Controls -->\n    @if (totalSlides() > 1) {\n    <div class=\"ecl-story-card__pager\">\n        <button class=\"ecl-story-card__prev\"\n            [disabled]=\"prevDisabled()\"\n            (click)=\"onCarouselPrevClick()\"\n            [attr.aria-label]=\"'ecl.story-card.SHOW-PREV-SLIDE' | translate\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span class=\"ecl-story-card__prev-label\">\n                {{ 'ecl.story-card.PREVIOUS' | translate }}\n            </span>\n        </button>\n\n        <div class=\"ecl-story-card__dots\">\n            @for (dotIndex of getDotIndices(); track dotIndex) {\n            <button\n                #dotButton\n                class=\"ecl-story-card__dot\"\n                [class.ecl-story-card__dot--active]=\"dotIndex === activeSlideIndex()\"\n                [class.is-prev]=\"dotIndex === activeSlideIndex() - 1\"\n                [attr.aria-label]=\"'ecl.story-card.GO-TO-SLIDE' | translate: { current: dotIndex + 1, total: totalSlides() }\"\n                (click)=\"goToSlide(dotIndex)\">\n            </button>\n            }\n        </div>\n\n        <button class=\"ecl-story-card__next\"\n            [disabled]=\"nextDisabled()\"\n            (click)=\"onCarouselNextClick()\"\n            [attr.aria-label]=\"'ecl.story-card.SHOW-NEXT-SLIDE' | translate\">\n            <span class=\"ecl-story-card__next-label\">\n                {{ 'ecl.story-card.NEXT' | translate }}\n            </span>\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n        </button>\n    </div>\n    }\n</div>\n\n<!-- Desktop: Grid with Accordion (user-authored content projected here) -->\n<div class=\"ecl-story-card__grid\">\n    <ng-content select=\"ul[eclStoryCardList]\"></ng-content>\n    <ng-content select=\"[eclStoryCardGridDetails]\"></ng-content>\n\n    <!-- Grid Controls -->\n    @if (totalSlides() > 1) {\n    <div class=\"ecl-story-card__grid-controls\">\n        <button class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-story-card__grid-prev ecl-button--icon-only\"\n            type=\"button\"\n            (click)=\"onGridPrevClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PREVIOUS' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\">\n                    {{ 'ecl.story-card.PREVIOUS' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor\" icon=\"caret-left\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--secondary ecl-button--neutral ecl-story-card__grid-play ecl-button--icon-only\"\n            type=\"button\"\n            [style.display]=\"isAutoPlaying() ? 'none' : 'flex'\"\n            (click)=\"onPlayClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PLAY' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\">\n                    {{ 'ecl.story-card.PLAY' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor-fill\" icon=\"play\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--secondary ecl-button--neutral ecl-story-card__grid-pause ecl-button--icon-only\"\n            type=\"button\"\n            [style.display]=\"isAutoPlaying() ? 'flex' : 'none'\"\n            (click)=\"onPauseClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PAUSE' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\">\n                    {{ 'ecl.story-card.PAUSE' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor-fill\" icon=\"pause\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-story-card__grid-next ecl-button--icon-only\"\n            type=\"button\"\n            (click)=\"onGridNextClick()\"\n            [attr.aria-label]=\"'ecl.story-card.NEXT' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\">\n                    {{ 'ecl.story-card.NEXT' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor\" icon=\"caret-right\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n    </div>\n    }\n</div>\n"
         },
         {
             "name": "EclStoryCardGridDetailsComponent",