@eui/ecl 22.0.0-alpha.5 → 22.0.0-alpha.7

package/docs/json/documentation.json

@@ -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"
                     }
@@ -23845,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": [],
@@ -23859,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": [
                 {
@@ -23886,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,
@@ -23921,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": [],
@@ -23979,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": [
@@ -24038,8 +23945,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 244,
+                    "pos": 94,
+                    "end": 231,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -24058,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"
                     }
@@ -24076,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": [],
@@ -24134,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": [
@@ -24193,8 +24087,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 185,
+                    "pos": 94,
+                    "end": 172,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -24213,7 +24107,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 12,
+                        "line": 14,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -24231,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": [],
@@ -24289,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": [
@@ -24348,8 +24229,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 184,
+                    "pos": 94,
+                    "end": 171,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -24368,7 +24249,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 12,
+                        "line": 14,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -24386,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,
@@ -24417,7 +24287,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 12,
+                    "line": 15,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -24433,7 +24303,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 11,
+                    "line": 14,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -24500,7 +24370,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 19,
+                    "line": 17,
                     "rawdescription": "\n"
                 }
             ],
@@ -24512,7 +24382,7 @@
                     "optional": false,
                     "returnType": "string",
                     "typeParameters": [],
-                    "line": 22,
+                    "line": 29,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -24560,8 +24430,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 141,
-                    "end": 202,
+                    "pos": 121,
+                    "end": 182,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -24578,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"
                     }
                 }
             },
@@ -24598,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": [],
@@ -24656,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": [
@@ -24715,8 +24572,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 166,
+                    "pos": 94,
+                    "end": 153,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -24735,7 +24592,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 12,
+                        "line": 14,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -24753,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": [],
@@ -24774,7 +24631,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 15,
+                    "line": 18,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -24828,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": [
                 {
@@ -24854,7 +24698,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 16,
+                    "line": 19,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -24870,7 +24714,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 13,
+                    "line": 16,
                     "rawdescription": "\n"
                 },
                 {
@@ -24883,7 +24727,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 30,
+                    "line": 32,
                     "rawdescription": "\n",
                     "modifierKind": [
                         125
@@ -24898,7 +24742,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 40,
+                    "line": 42,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -24911,7 +24755,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 52,
+                    "line": 54,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -24959,8 +24803,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 340,
-                    "end": 417,
+                    "pos": 327,
+                    "end": 404,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -24981,7 +24825,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 31,
+                "line": 33,
                 "rawdescription": "\n"
             },
             "accessors": {
@@ -24991,7 +24835,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 19,
+                        "line": 21,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -25013,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": [],
@@ -25071,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": [
@@ -25130,8 +24961,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 157,
+                    "pos": 94,
+                    "end": 144,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -25150,7 +24981,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 12,
+                        "line": 14,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -50502,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": [],
@@ -50529,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
                 },
@@ -50588,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
                     ]
@@ -50621,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"
                 }
             ],
@@ -50642,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",
@@ -50703,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"
@@ -50731,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,
@@ -59320,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": [],
@@ -59348,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
                 },
@@ -59362,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
@@ -59379,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
@@ -59396,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
                 },
@@ -59410,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
@@ -59427,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
@@ -59444,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
@@ -59461,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
@@ -59524,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",
@@ -59546,7 +59356,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 52,
+                    "line": 56,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -59562,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"
                 },
                 {
@@ -59575,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",
@@ -59597,17 +59398,8 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 89,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.start'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "line": 90,
+                    "rawdescription": "\n"
                 }
             ],
             "methodsClass": [
@@ -59618,7 +59410,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 108,
+                    "line": 109,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -59666,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,
@@ -59747,7 +59487,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 92,
+                "line": 93,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -59763,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"
                     }
@@ -59786,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": [],
@@ -59963,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,
@@ -60076,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": "",
@@ -60095,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": [
@@ -60128,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": [],
@@ -60159,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
@@ -60176,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
@@ -60193,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
@@ -60210,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
@@ -60273,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": [
@@ -60329,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,
@@ -60388,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"
                     }