@eui/ecl 22.0.0-alpha.57 → 22.0.0-alpha.58

package/docs/json/documentation.json

@@ -552,26 +552,14 @@
         },
         {
             "name": "EclCarouselItem",
-            "id": "interface-EclCarouselItem-d61eba83b49a5a2ffbe2ce148f2be8fd3257d1ba194641ac793d3e3bcbda764bebfd3b8f84223cacd0ccb560fb3ce3dd3b4887b76832324f2a68bbe8b0a9818f",
+            "id": "interface-EclCarouselItem-8d955c58945f6787340cbd552b18fa685c60eeebf5b17f56e0dde36e36322b2f435747dc6781900b5e026e2aad4c74495cb82902739dd8a099754d6b88ee7591",
             "file": "packages/ecl/components/ecl-carousel/models/ecl-carousel-item.model.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { Signal, WritableSignal } from '@angular/core';\n\n/**\n * Interface implemented by `EclCarouselItemComponent`.\n * Defines the minimal contract the carousel uses to manage slide state.\n */\nexport interface EclCarouselItem {\n\t/** Whether this slide is currently active (visible). */\n\tisCurrent: WritableSignal<boolean>;\n\t/** Zero-based index assigned by the parent carousel. */\n\tindex: WritableSignal<number | undefined>;\n\t/** Optional slide identifier used for navigation buttons. */\n\tid?: Signal<string | undefined>;\n}\n",
+            "sourceCode": "import { WritableSignal } from '@angular/core';\n\n/**\n * Interface implemented by `EclCarouselItemComponent`.\n * Defines the minimal contract the carousel uses to manage slide state.\n */\nexport interface EclCarouselItem {\n\t/** Whether this slide is currently active (visible). */\n\tisCurrent: WritableSignal<boolean>;\n\t/** Zero-based index assigned by the parent carousel. */\n\tindex: WritableSignal<number | undefined>;\n}\n",
             "displayName": "EclCarouselItem",
             "properties": [
-                {
-                    "name": "id",
-                    "coverageIgnore": false,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "Signal<string | undefined>",
-                    "indexKey": "",
-                    "optional": true,
-                    "description": "<p>Optional slide identifier used for navigation buttons.</p>\n",
-                    "line": 13,
-                    "rawdescription": "\nOptional slide identifier used for navigation buttons."
-                },
                 {
                     "name": "index",
                     "coverageIgnore": false,
@@ -53638,7 +53626,7 @@
         },
         {
             "name": "EclCarouselComponent",
-            "id": "component-EclCarouselComponent-b957608038744440508152a9d561865145a0261afd68ff93803e9af36f5cb92f22b41a3cbd144f6a2841b50dee3db84a82474621bc24f0f8c465b69a39627855",
+            "id": "component-EclCarouselComponent-e22f198b6fa2a6c718451d77e8b1243d7090130042b82a12881ebbc3d1543c0952e910a3e56a286a0c8eabd92cb28637219e0f56c012e7fd99565e0ba3677280",
             "file": "packages/ecl/components/ecl-carousel/ecl-carousel.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -53666,30 +53654,13 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Aria-label for screen readers to describe the carousel.</p>\n",
-                    "line": 83,
+                    "line": 82,
                     "rawdescription": "\n\nAria-label for screen readers to describe the carousel.\n",
                     "modifierKind": [
                         148
                     ],
                     "required": false
                 },
-                {
-                    "name": "counterLabel",
-                    "coverageIgnore": false,
-                    "defaultValue": "''",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "<p>Separator label used by the counter, e.g. the &quot;of&quot; in &quot;1 of 5&quot;.\nDefaults to the translated <code>ecl.common.OF</code> key.</p>\n",
-                    "line": 99,
-                    "rawdescription": "\n\nSeparator label used by the counter, e.g. the \"of\" in \"1 of 5\".\nDefaults to the translated `ecl.common.OF` key.\n",
-                    "modifierKind": [
-                        148
-                    ],
-                    "required": false
-                },
                 {
                     "name": "isAutoplay",
                     "coverageIgnore": false,
@@ -53700,7 +53671,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Determines whether the carousel should autoplay.</p>\n",
-                    "line": 88,
+                    "line": 87,
                     "rawdescription": "\n\nDetermines whether the carousel should autoplay.\n",
                     "modifierKind": [
                         148
@@ -53717,7 +53688,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Interval in milliseconds between automatic slide transitions.</p>\n",
-                    "line": 93,
+                    "line": 92,
                     "rawdescription": "\n\nInterval in milliseconds between automatic slide transitions.\n",
                     "modifierKind": [
                         148
@@ -53793,7 +53764,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Event emitted when a slide change occurs.</p>\n",
-                    "line": 104,
+                    "line": 97,
                     "rawdescription": "\n\nEvent emitted when a slide change occurs.\n",
                     "modifierKind": [
                         148
@@ -53832,7 +53803,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Reference to the main carousel viewport element (the Embla root).</p>\n",
-                    "line": 109,
+                    "line": 102,
                     "rawdescription": "\n\nReference to the main carousel viewport element (the Embla root).\n",
                     "modifierKind": [
                         148
@@ -53848,7 +53819,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Returns the computed CSS class list for the component.</p>\n",
-                    "line": 230,
+                    "line": 223,
                     "rawdescription": "\n\nReturns the computed CSS class list for the component.\n",
                     "modifierKind": [
                         124,
@@ -53865,7 +53836,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Embla events the component reacts to.</p>\n",
-                    "line": 182,
+                    "line": 175,
                     "rawdescription": "\n\nEmbla events the component reacts to.\n",
                     "modifierKind": [
                         124,
@@ -53882,7 +53853,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Embla options, mirroring the upstream ECL configuration.</p>\n",
-                    "line": 168,
+                    "line": 161,
                     "rawdescription": "\n\nEmbla options, mirroring the upstream ECL configuration.\n",
                     "modifierKind": [
                         124
@@ -53898,7 +53869,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Embla plugins. Built once so the Embla directive does not needlessly re-init.</p>\n",
-                    "line": 177,
+                    "line": 170,
                     "rawdescription": "\n\nEmbla plugins. Built once so the Embla directive does not needlessly re-init.\n",
                     "modifierKind": [
                         124
@@ -53914,7 +53885,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether the viewport is at or above the ECL desktop breakpoint (1140px).\nThis is the boundary the ECL CSS uses to show the play/pause controls and\nthe teaser tablist (and to hide the mobile dots). A signal so the pager\nvariant can react: play/pause only renders at/above this width, matching\nthe CSS so the pause button never leaks onto narrower viewports.</p>\n",
-                    "line": 163,
+                    "line": 156,
                     "rawdescription": "\n\nWhether the viewport is at or above the ECL desktop breakpoint (1140px).\nThis is the boundary the ECL CSS uses to show the play/pause controls and\nthe teaser tablist (and to hide the mobile dots). A signal so the pager\nvariant can react: play/pause only renders at/above this width, matching\nthe CSS so the pause button never leaks onto narrower viewports.\n",
                     "modifierKind": [
                         124,
@@ -53931,7 +53902,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Indicates whether autoplay is temporarily paused by hover/focus. Unlike a\nmanual pause, the loading bar stays visible and frozen at its current\nprogress (matching ECL), resuming when the pointer/focus leaves.</p>\n",
-                    "line": 147,
+                    "line": 140,
                     "rawdescription": "\n\nIndicates whether autoplay is temporarily paused by hover/focus. Unlike a\nmanual pause, the loading bar stays visible and frozen at its current\nprogress (matching ECL), resuming when the pointer/focus leaves.\n",
                     "modifierKind": [
                         124,
@@ -53948,7 +53919,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether the current viewport is at the mobile breakpoint. A signal so the\ntemplate can react (the pager drops play/pause on mobile, matching ECL,\nwhere play/pause is a desktop-only control).</p>\n",
-                    "line": 154,
+                    "line": 147,
                     "rawdescription": "\n\nWhether the current viewport is at the mobile breakpoint. A signal so the\ntemplate can react (the pager drops play/pause on mobile, matching ECL,\nwhere play/pause is a desktop-only control).\n",
                     "modifierKind": [
                         124,
@@ -53965,7 +53936,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Indicates whether autoplay was manually paused (via the pause button or\non mobile). When paused this way the loading bar is cleared.</p>\n",
-                    "line": 125,
+                    "line": 118,
                     "rawdescription": "\n\nIndicates whether autoplay was manually paused (via the pause button or\non mobile). When paused this way the loading bar is cleared.\n",
                     "modifierKind": [
                         148
@@ -53981,7 +53952,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Indicates whether autoplay is currently active.</p>\n",
-                    "line": 119,
+                    "line": 112,
                     "rawdescription": "\n\nIndicates whether autoplay is currently active.\n",
                     "modifierKind": [
                         148
@@ -53997,7 +53968,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Indicates whether the layout is currently in RTL mode.</p>\n",
-                    "line": 130,
+                    "line": 123,
                     "rawdescription": "\n\nIndicates whether the layout is currently in RTL mode.\n"
                 },
                 {
@@ -54010,7 +53981,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Collection of slide components rendered inside the carousel.</p>\n",
-                    "line": 114,
+                    "line": 107,
                     "rawdescription": "\n\nCollection of slide components rendered inside the carousel.\n",
                     "modifierKind": [
                         148
@@ -54025,7 +53996,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 316,
+                    "line": 309,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns the 1-based position of the active slide (for the counter).\n",
@@ -54038,7 +54009,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 323,
+                    "line": 316,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns the total number of slides (for the counter).\n",
@@ -54051,7 +54022,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 309,
+                    "line": 302,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRetrieves the current active slide index (zero-based).\n",
@@ -54064,7 +54035,7 @@
                     "optional": false,
                     "returnType": "string[]",
                     "typeParameters": [],
-                    "line": 340,
+                    "line": 333,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nPre-translated accessible label for each pager dot. Translated here since\nthe shared `ecl-slider-pager` receives plain strings.\n",
@@ -54077,7 +54048,7 @@
                     "optional": false,
                     "returnType": "number[]",
                     "typeParameters": [],
-                    "line": 332,
+                    "line": 325,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDot indices for the mobile slider pager (one dot per slide). The dots are\nhidden on desktop via the ECL CSS (`.ecl-carousel__dots { display: none }`)\nand shown at the mobile breakpoint.\n",
@@ -54099,7 +54070,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 365,
+                    "line": 358,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns the flex order of a teaser button within the visible window.\n",
@@ -54125,7 +54096,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 302,
+                    "line": 295,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nChecks whether there are enough slides to render controls.\n",
@@ -54138,7 +54109,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 295,
+                    "line": 288,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns whether the carousel has padding applied (e.g., on desktop breakpoint).\n",
@@ -54151,7 +54122,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 377,
+                    "line": 370,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWhether the pager should show the \"pause\" control (i.e. autoplay is\nactively running). While the pointer/focus hover-pauses the carousel the\ntimer is suspended, so the pager must show \"play\" even though a manual\npause was not triggered. Mirrors upstream ECL, where hovering flips the\ncontrol to play.\n",
@@ -54176,7 +54147,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 353,
+                    "line": 346,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns whether a teaser button should be visible in the current window.\n",
@@ -54202,7 +54173,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 278,
+                    "line": 271,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAngular lifecycle hook: called after content (slides) is initialized.\n",
@@ -54215,7 +54186,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 287,
+                    "line": 280,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAngular lifecycle hook: cleans up subscriptions.\n",
@@ -54228,7 +54199,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 251,
+                    "line": 244,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAngular lifecycle hook: initializes RTL detection and the Embla plugins.\n",
@@ -54250,7 +54221,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 481,
+                    "line": 474,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles a dot activation from the mobile slider pager: scrolls to the\nmatching slide and stops autoplay (same behavior as a teaser click).\n",
@@ -54288,7 +54259,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 400,
+                    "line": 393,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles the throttled Embla events the component subscribed to.\n",
@@ -54317,7 +54288,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 456,
+                    "line": 449,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nNavigates to the next slide and stops autoplay.\n",
@@ -54333,7 +54304,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 437,
+                    "line": 430,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nStops autoplay and focuses the play button.\n",
@@ -54359,7 +54330,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 423,
+                    "line": 416,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nStarts autoplay.\n\n       button. Auto-starts (e.g. on breakpoint changes) pass false so the\n       page is not scrolled to the carousel on load.\n",
@@ -54370,8 +54341,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 14264,
-                                "end": 14273,
+                                "pos": 13986,
+                                "end": 13995,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -54385,8 +54356,8 @@
                             "deprecationMessage": "",
                             "defaultValue": "true",
                             "tagName": {
-                                "pos": 14258,
-                                "end": 14263,
+                                "pos": 13980,
+                                "end": 13985,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -54404,7 +54375,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 464,
+                    "line": 457,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nNavigates to the previous slide and stops autoplay.\n",
@@ -54429,7 +54400,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 472,
+                    "line": 465,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles user interaction with a teaser button: activates the matching slide.\n",
@@ -54475,7 +54446,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 489,
+                    "line": 482,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles keyboard navigation (ArrowLeft/ArrowRight) across teaser buttons.\n",
@@ -54515,7 +54486,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 507,
+                    "line": 500,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nFreezes the loading bar while the pointer/focus is over the carousel.\nThe Embla autoplay plugin pauses the timer itself (stopOnMouseEnter /\nstopOnFocusIn); this only mirrors that as a visible paused state.\n",
@@ -54531,7 +54502,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 517,
+                    "line": 510,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nResumes the loading bar once the pointer/focus leaves the carousel.\n",
@@ -54547,7 +54518,7 @@
                     "optional": false,
                     "returnType": "\"dots\" | \"play-pause-dots\"",
                     "typeParameters": [],
-                    "line": 393,
+                    "line": 386,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nPager variant by breakpoint. Below the ECL desktop breakpoint (1140px)\nthe carousel shows only the dots navigation (prev / dots / next);\nplay/pause is a desktop-only control in ECL. Rendering `'dots'` there\navoids the pager's inline play/pause `display` style (which would\notherwise beat the ECL CSS and leave the pause button visible on narrower\nviewports). At/above 1140px the dots are hidden by CSS, so\n`'play-pause-dots'` yields play/pause + prev/next + teasers.\n\nThe 1140px boundary mirrors the media query the ECL CSS uses to toggle\n`.ecl-carousel__play/__pause` and `.ecl-carousel__teasers`.\n",
@@ -54641,23 +54612,23 @@
                     "name": "EUI_ECL_SLIDER"
                 }
             ],
-            "description": "<p>Carousel (slideshow) component following the ECL design system.\nRenders a sequence of <code>EclCarouselItemComponent</code> slides with autoplay, keyboard navigation,\nresponsive breakpoint awareness, and RTL layout support.</p>\n<p>The slide engine is powered by Embla (via <code>embla-carousel-angular</code>), matching the upstream\nECL implementation: an infinite <code>loop</code>, the <code>Autoplay</code> plugin driving the teaser loading bars,\nand a slider pager with previous/next/play/pause controls, a counter, and a tablist of teaser\nbuttons (one per slide).</p>\n<ul>\n<li>Selector: <code>ecl-carousel</code>.</li>\n<li>Project <code>ecl-carousel-item</code> elements as slides (also via <code>contentChildren</code>).</li>\n<li><code>ariaLabel</code> — ARIA label for the carousel landmark; aliased as <code>aria-label</code>.</li>\n<li><code>isAutoplay</code> — enables automatic slide advancement; boolean attribute.</li>\n<li><code>playInterval</code> — milliseconds between automatic transitions; default <code>5000</code>.</li>\n<li><code>counterLabel</code> — separator label used by the counter, defaults to <code>ecl.common.OF</code>.</li>\n<li><code>slide</code> — emits <code>EclSlideEvent</code> when the active slide changes.</li>\n</ul>\n",
-            "rawdescription": "\n\nCarousel (slideshow) component following the ECL design system.\nRenders a sequence of `EclCarouselItemComponent` slides with autoplay, keyboard navigation,\nresponsive breakpoint awareness, and RTL layout support.\n\nThe slide engine is powered by Embla (via `embla-carousel-angular`), matching the upstream\nECL implementation: an infinite `loop`, the `Autoplay` plugin driving the teaser loading bars,\nand a slider pager with previous/next/play/pause controls, a counter, and a tablist of teaser\nbuttons (one per slide).\n\n- Selector: `ecl-carousel`.\n- Project `ecl-carousel-item` elements as slides (also via `contentChildren`).\n- `ariaLabel` — ARIA label for the carousel landmark; aliased as `aria-label`.\n- `isAutoplay` — enables automatic slide advancement; boolean attribute.\n- `playInterval` — milliseconds between automatic transitions; default `5000`.\n- `counterLabel` — separator label used by the counter, defaults to `ecl.common.OF`.\n- `slide` — emits `EclSlideEvent` when the active slide changes.\n",
+            "description": "<p>Carousel (slideshow) component following the ECL design system.\nRenders a sequence of <code>EclCarouselItemComponent</code> slides with autoplay, keyboard navigation,\nresponsive breakpoint awareness, and RTL layout support.</p>\n<p>The slide engine is powered by Embla (via <code>embla-carousel-angular</code>), matching the upstream\nECL implementation: an infinite <code>loop</code>, the <code>Autoplay</code> plugin driving the teaser loading bars,\nand a slider pager with previous/next/play/pause controls, a counter, and a tablist of teaser\nbuttons (one per slide).</p>\n<ul>\n<li>Selector: <code>ecl-carousel</code>.</li>\n<li>Project <code>ecl-carousel-item</code> elements as slides (also via <code>contentChildren</code>).</li>\n<li><code>ariaLabel</code> — ARIA label for the carousel landmark; aliased as <code>aria-label</code>.</li>\n<li><code>isAutoplay</code> — enables automatic slide advancement; boolean attribute.</li>\n<li><code>playInterval</code> — milliseconds between automatic transitions; default <code>5000</code>.</li>\n<li><code>slide</code> — emits <code>EclSlideEvent</code> when the active slide changes.</li>\n</ul>\n",
+            "rawdescription": "\n\nCarousel (slideshow) component following the ECL design system.\nRenders a sequence of `EclCarouselItemComponent` slides with autoplay, keyboard navigation,\nresponsive breakpoint awareness, and RTL layout support.\n\nThe slide engine is powered by Embla (via `embla-carousel-angular`), matching the upstream\nECL implementation: an infinite `loop`, the `Autoplay` plugin driving the teaser loading bars,\nand a slider pager with previous/next/play/pause controls, a counter, and a tablist of teaser\nbuttons (one per slide).\n\n- Selector: `ecl-carousel`.\n- Project `ecl-carousel-item` elements as slides (also via `contentChildren`).\n- `ariaLabel` — ARIA label for the carousel landmark; aliased as `aria-label`.\n- `isAutoplay` — enables automatic slide advancement; boolean attribute.\n- `playInterval` — milliseconds between automatic transitions; default `5000`.\n- `slide` — emits `EclSlideEvent` when the active slide changes.\n",
             "type": "component",
-            "sourceCode": "import { BreakpointObserver } from '@angular/cdk/layout';\nimport {\n    AfterContentInit,\n    ChangeDetectorRef,\n    Component,\n    DOCUMENT,\n    ElementRef,\n    OnDestroy,\n    OnInit,\n    Renderer2,\n    afterNextRender,\n    booleanAttribute,\n    computed,\n    contentChildren,\n    forwardRef,\n    inject,\n    input,\n    numberAttribute,\n    output,\n    signal,\n    viewChild,\n    viewChildren,\n} from '@angular/core';\nimport { EUI_ECL_SLIDER } from '@eui/ecl/components/ecl-slider';\nimport { ECLBaseDirective, EclRtlService, KeyCode } from '@eui/ecl/core';\nimport { TranslatePipe, TranslateService } from '@ngx-translate/core';\nimport {\n    EmblaEventType,\n    EmblaOptionsType,\n    EmblaPluginType,\n} from 'embla-carousel';\nimport { EmblaCarouselDirective } from 'embla-carousel-angular';\nimport Autoplay from 'embla-carousel-autoplay';\nimport { Subject, auditTime, fromEvent, takeUntil } from 'rxjs';\nimport { EclCarouselItemComponent } from './ecl-carousel-item.component';\nimport { EclSlideEvent } from './events/ecl-slide.event';\n\n/**\n * Number of teaser buttons visible at once on the desktop breakpoint.\n */\nconst VISIBLE_TEASERS = 4;\n\n/**\n * Carousel (slideshow) component following the ECL design system.\n * Renders a sequence of `EclCarouselItemComponent` slides with autoplay, keyboard navigation,\n * responsive breakpoint awareness, and RTL layout support.\n *\n * The slide engine is powered by Embla (via `embla-carousel-angular`), matching the upstream\n * ECL implementation: an infinite `loop`, the `Autoplay` plugin driving the teaser loading bars,\n * and a slider pager with previous/next/play/pause controls, a counter, and a tablist of teaser\n * buttons (one per slide).\n *\n * - Selector: `ecl-carousel`.\n * - Project `ecl-carousel-item` elements as slides (also via `contentChildren`).\n * - `ariaLabel` — ARIA label for the carousel landmark; aliased as `aria-label`.\n * - `isAutoplay` — enables automatic slide advancement; boolean attribute.\n * - `playInterval` — milliseconds between automatic transitions; default `5000`.\n * - `counterLabel` — separator label used by the counter, defaults to `ecl.common.OF`.\n * - `slide` — emits `EclSlideEvent` when the active slide changes.\n */\n@Component({\n    selector: 'ecl-carousel',\n    templateUrl: './ecl-carousel.component.html',\n    imports: [\n        TranslatePipe,\n        EmblaCarouselDirective,\n        ...EUI_ECL_SLIDER,\n    ],\n    host: {\n        '[attr.aria-label]': 'ariaLabel()',\n        '[attr.aria-roledescription]': '\"carousel\"',\n        '[class]': 'cssClasses()',\n        // Drives the teaser loading-bar animation duration (see @eui/styles).\n        // It has no CSS fallback, so without it the progress animation never\n        // runs; it must match the autoplay delay.\n        '[style.--ecl-carousel-slide-duration]': 'playInterval() + \"ms\"',\n    },\n})\nexport class EclCarouselComponent extends ECLBaseDirective implements OnInit, OnDestroy, AfterContentInit {\n    /**\n     * Aria-label for screen readers to describe the carousel.\n     */\n    readonly ariaLabel = input<string | null>('Carousel description here', { alias: 'aria-label' });\n\n    /**\n     * Determines whether the carousel should autoplay.\n     */\n    readonly isAutoplay = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n\n    /**\n     * Interval in milliseconds between automatic slide transitions.\n     */\n    readonly playInterval = input(5000, { transform: numberAttribute });\n\n    /**\n     * Separator label used by the counter, e.g. the \"of\" in \"1 of 5\".\n     * Defaults to the translated `ecl.common.OF` key.\n     */\n    readonly counterLabel = input<string>('');\n\n    /**\n     * Event emitted when a slide change occurs.\n     */\n    readonly slide = output<EclSlideEvent>();\n\n    /**\n     * Reference to the main carousel viewport element (the Embla root).\n     */\n    readonly carouselContainerElement = viewChild<ElementRef>('carouselContainer');\n\n    /**\n     * Collection of slide components rendered inside the carousel.\n     */\n    readonly slides = contentChildren(forwardRef(() => EclCarouselItemComponent));\n\n    /**\n     * Indicates whether autoplay is currently active.\n     */\n    readonly isPlaying = signal(false);\n\n    /**\n     * Indicates whether autoplay was manually paused (via the pause button or\n     * on mobile). When paused this way the loading bar is cleared.\n     */\n    readonly isPausedForced = signal(false);\n\n    /**\n     * Indicates whether the layout is currently in RTL mode.\n     */\n    isRtl = false;\n\n    /**\n     * Zero-based index of the currently active slide (mirrors Embla's selected snap).\n     */\n    private activeIndex = 0;\n\n    /**\n     * Start index of the currently visible teaser window (desktop only).\n     */\n    private teaserWindowStart = 0;\n\n    /**\n     * Indicates whether autoplay is temporarily paused by hover/focus. Unlike a\n     * manual pause, the loading bar stays visible and frozen at its current\n     * progress (matching ECL), resuming when the pointer/focus leaves.\n     */\n    protected readonly isHoverPaused = signal(false);\n\n    /**\n     * Whether the current viewport is at the mobile breakpoint. A signal so the\n     * template can react (the pager drops play/pause on mobile, matching ECL,\n     * where play/pause is a desktop-only control).\n     */\n    protected readonly isMobileBreakpoint = signal(false);\n\n    /**\n     * Whether the viewport is at or above the ECL desktop breakpoint (1140px).\n     * This is the boundary the ECL CSS uses to show the play/pause controls and\n     * the teaser tablist (and to hide the mobile dots). A signal so the pager\n     * variant can react: play/pause only renders at/above this width, matching\n     * the CSS so the pause button never leaks onto narrower viewports.\n     */\n    protected readonly isDesktopBreakpointActive = signal(false);\n\n    /**\n     * Embla options, mirroring the upstream ECL configuration.\n     */\n    protected emblaOptions: EmblaOptionsType = {\n        loop: true,\n        align: 'start',\n        duration: 20,\n    };\n\n    /**\n     * Embla plugins. Built once so the Embla directive does not needlessly re-init.\n     */\n    protected emblaPlugins: EmblaPluginType[] = [];\n\n    /**\n     * Embla events the component reacts to.\n     */\n    protected readonly emblaEvents: EmblaEventType[] = [\n        'select',\n        'reInit',\n        'autoplay:timerset',\n    ];\n\n    /**\n     * Reference to the Embla directive driving the slide engine.\n     */\n    private readonly embla = viewChild<EmblaCarouselDirective>('embla');\n\n    /**\n     * References to the teaser navigation buttons corresponding to each slide.\n     */\n    private readonly teaserButtons = viewChildren<ElementRef>('teaserButton');\n\n    /**\n     * References to the teaser loading-bar completion elements (one per slide),\n     * used to restart the progress animation when the active slide changes.\n     */\n    private readonly loadingBars = viewChildren<ElementRef>('loadingBar');\n\n    private isTabletBreakpoint = false;\n    private isLargeBreakpoint = false;\n    private isDesktopBreakpoint = false;\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n\n    /**\n     * Debounce interval (ms) used internally for timing and transitions.\n     */\n    private readonly TIMEOUT_INTERVAL = 400;\n    private readonly cdkBreakpointObserver = inject(BreakpointObserver);\n    private readonly cd = inject(ChangeDetectorRef);\n    private readonly renderer2 = inject(Renderer2);\n    private readonly eclRtlService = inject(EclRtlService);\n    private readonly translate = inject(TranslateService);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly window = this.document.defaultView;\n    /**\n     * Host element, used to locate the slider pager's play/pause buttons by their\n     * ECL classes for focus management after a play/pause toggle.\n     */\n    private readonly hostEl = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    /**\n     * Returns the computed CSS class list for the component.\n     */\n    protected readonly cssClasses = computed<string>(() =>\n        super.getCssClasses('ecl-carousel'));\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.observeElementSizeChanges();\n            this.observeBreakpointChanges();\n            this.syncFromEmbla();\n\n            if (this.window) {\n                fromEvent(this.window, 'resize')\n                    .pipe(auditTime(50), takeUntil(this.destroy$))\n                    .subscribe(() => this.observeElementSizeChanges());\n            }\n        });\n    }\n\n    /**\n     * Angular lifecycle hook: initializes RTL detection and the Embla plugins.\n     */\n    ngOnInit(): void {\n        this.emblaOptions = {\n            ...this.emblaOptions,\n            direction: this.isRtl ? 'rtl' : 'ltr',\n        };\n        const autoplayDesired = this.isAutoplayDesired();\n        // Reflect the initial play state so the current slide's loading bar is\n        // shown on load (the plugin self-starts via playOnInit).\n        this.isPlaying.set(autoplayDesired);\n        this.emblaPlugins = [\n            Autoplay({\n                delay: this.playInterval(),\n                // Autoplay is on by default (matching ECL) unless explicitly\n                // disabled via [isAutoplay]=\"false\". Letting the plugin start\n                // itself avoids a race with Embla's own initialization.\n                playOnInit: autoplayDesired,\n                stopOnInteraction: false,\n                stopOnMouseEnter: true,\n                stopOnFocusIn: true,\n            }),\n        ];\n        this.handleRtlChangeState();\n    }\n\n    /**\n     * Angular lifecycle hook: called after content (slides) is initialized.\n     */\n    ngAfterContentInit(): void {\n        setTimeout(() => {\n            this.initSlides();\n        });\n    }\n\n    /**\n     * Angular lifecycle hook: cleans up subscriptions.\n     */\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * Returns whether the carousel has padding applied (e.g., on desktop breakpoint).\n     */\n    isPadded(): boolean {\n        return this.isDesktopBreakpoint;\n    }\n\n    /**\n     * Checks whether there are enough slides to render controls.\n     */\n    hasControls(): boolean {\n        return this.getSlidesCount() > 1;\n    }\n\n    /**\n     * Retrieves the current active slide index (zero-based).\n     */\n    getCurrentSlideIndex(): number {\n        return this.activeIndex;\n    }\n\n    /**\n     * Returns the 1-based position of the active slide (for the counter).\n     */\n    getCounterCurrent(): number {\n        return this.activeIndex + 1;\n    }\n\n    /**\n     * Returns the total number of slides (for the counter).\n     */\n    getCounterTotal(): number {\n        return this.getSlidesCount();\n    }\n\n    /**\n     * Dot indices for the mobile slider pager (one dot per slide). The dots are\n     * hidden on desktop via the ECL CSS (`.ecl-carousel__dots { display: none }`)\n     * and shown at the mobile breakpoint.\n     */\n    getDotIndices(): number[] {\n        return Array.from({ length: this.getSlidesCount() }, (_unused, dotIndex) => dotIndex);\n    }\n\n    /**\n     * Pre-translated accessible label for each pager dot. Translated here since\n     * the shared `ecl-slider-pager` receives plain strings.\n     */\n    getDotAriaLabels(): string[] {\n        const total = this.getSlidesCount();\n        return Array.from({ length: total }, (_unused, dotIndex) =>\n            this.translate.instant('ecl.carousel.GO-TO-SLIDE', {\n                current: dotIndex + 1,\n                total,\n            }),\n        );\n    }\n\n    /**\n     * Returns whether a teaser button should be visible in the current window.\n     */\n    isTeaserVisible(index: number): boolean {\n        const count = this.getSlidesCount();\n        if (count <= VISIBLE_TEASERS) {\n            return true;\n        }\n        const position = ((index - this.teaserWindowStart) % count + count) % count;\n        return position < VISIBLE_TEASERS;\n    }\n\n    /**\n     * Returns the flex order of a teaser button within the visible window.\n     */\n    getTeaserOrder(index: number): number {\n        const count = this.getSlidesCount();\n        return ((index - this.teaserWindowStart) % count + count) % count;\n    }\n\n    /**\n     * Whether the pager should show the \"pause\" control (i.e. autoplay is\n     * actively running). While the pointer/focus hover-pauses the carousel the\n     * timer is suspended, so the pager must show \"play\" even though a manual\n     * pause was not triggered. Mirrors upstream ECL, where hovering flips the\n     * control to play.\n     */\n    protected isPagerPlaying(): boolean {\n        return this.isPlaying() && !this.isHoverPaused();\n    }\n\n    /**\n     * Pager variant by breakpoint. Below the ECL desktop breakpoint (1140px)\n     * the carousel shows only the dots navigation (prev / dots / next);\n     * play/pause is a desktop-only control in ECL. Rendering `'dots'` there\n     * avoids the pager's inline play/pause `display` style (which would\n     * otherwise beat the ECL CSS and leave the pause button visible on narrower\n     * viewports). At/above 1140px the dots are hidden by CSS, so\n     * `'play-pause-dots'` yields play/pause + prev/next + teasers.\n     *\n     * The 1140px boundary mirrors the media query the ECL CSS uses to toggle\n     * `.ecl-carousel__play/__pause` and `.ecl-carousel__teasers`.\n     */\n    protected pagerVariant(): 'dots' | 'play-pause-dots' {\n        return this.isDesktopBreakpointActive() ? 'play-pause-dots' : 'dots';\n    }\n\n    /**\n     * Handles the throttled Embla events the component subscribed to.\n     */\n    protected onEmblaEvent(event: EmblaEventType): void {\n        switch (event) {\n            case 'select':\n            case 'reInit':\n                this.syncFromEmbla();\n                break;\n            case 'autoplay:timerset':\n                // Fired each time the autoplay timer (re)starts for the current\n                // slide; replay the loading-bar fill animation from zero.\n                this.restartActiveLoadingBar();\n                break;\n            default:\n                break;\n        }\n    }\n\n    /**\n     * Starts autoplay.\n     *\n     * @param moveFocus when true (a user clicked play) focus moves to the pause\n     *        button. Auto-starts (e.g. on breakpoint changes) pass false so the\n     *        page is not scrolled to the carousel on load.\n     */\n    protected onPlayClick(moveFocus = true): void {\n        this.getAutoplay()?.play();\n        this.isPlaying.set(true);\n        this.isPausedForced.set(false);\n        this.isHoverPaused.set(false);\n        this.cd.detectChanges();\n        if (moveFocus) {\n            this.focusPagerButton('.ecl-carousel__pause');\n        }\n    }\n\n    /**\n     * Stops autoplay and focuses the play button.\n     */\n    protected onPauseClick(): void {\n        // Pause (not full stop): halt the autoplay timer but keep the active\n        // teaser loading bar visible, frozen at its current progress (matching\n        // upstream ECL's `handleAutoPlay(false, true)`). The installed\n        // embla-carousel-autoplay exposes no `pause()`, so we call `stop()`\n        // WITHOUT `reset()` — the frozen bar is driven by our `is-paused` CSS\n        // class, not the plugin. A full stop+reset (which clears the bar) only\n        // happens on prev/next/teaser navigation via `stopAutoplay()`.\n        this.getAutoplay()?.stop();\n        this.isPlaying.set(false);\n        this.isPausedForced.set(true);\n        this.isHoverPaused.set(false);\n        this.cd.detectChanges();\n        this.focusPagerButton('.ecl-carousel__play');\n    }\n\n    /**\n     * Navigates to the next slide and stops autoplay.\n     */\n    protected onNextSlideClick(): void {\n        this.stopAutoplay();\n        this.embla()?.scrollNext();\n    }\n\n    /**\n     * Navigates to the previous slide and stops autoplay.\n     */\n    protected onPreviousSlideClick(): void {\n        this.stopAutoplay();\n        this.embla()?.scrollPrev();\n    }\n\n    /**\n     * Handles user interaction with a teaser button: activates the matching slide.\n     */\n    protected onTeaserClick(index: number): void {\n        this.stopAutoplay();\n        this.embla()?.scrollTo(index);\n    }\n\n    /**\n     * Handles a dot activation from the mobile slider pager: scrolls to the\n     * matching slide and stops autoplay (same behavior as a teaser click).\n     */\n    protected onDotClick(index: number): void {\n        this.stopAutoplay();\n        this.embla()?.scrollTo(index);\n    }\n\n    /**\n     * Handles keyboard navigation (ArrowLeft/ArrowRight) across teaser buttons.\n     */\n    protected onTeaserKeyboardPress(event: KeyboardEvent, index: number): void {\n        if (event.key !== KeyCode.ARROW_RIGHT && event.key !== KeyCode.ARROW_LEFT) {\n            return;\n        }\n        event.preventDefault();\n        const direction = event.key === KeyCode.ARROW_RIGHT ? 1 : -1;\n        const count = this.getSlidesCount();\n        const nextIndex = (index + direction + count) % count;\n        this.stopAutoplay();\n        this.embla()?.scrollTo(nextIndex);\n        this.focusOnButton(this.teaserButtons()[nextIndex]);\n    }\n\n    /**\n     * Freezes the loading bar while the pointer/focus is over the carousel.\n     * The Embla autoplay plugin pauses the timer itself (stopOnMouseEnter /\n     * stopOnFocusIn); this only mirrors that as a visible paused state.\n     */\n    protected onViewportPause(): void {\n        if (this.isPlaying() && !this.isPausedForced()) {\n            this.isHoverPaused.set(true);\n            this.cd.detectChanges();\n        }\n    }\n\n    /**\n     * Resumes the loading bar once the pointer/focus leaves the carousel.\n     */\n    protected onViewportResume(): void {\n        if (this.isHoverPaused()) {\n            this.isHoverPaused.set(false);\n            this.cd.detectChanges();\n        }\n    }\n\n    /**\n     * Sets focus on the specified button.\n     */\n    private focusOnButton(button: ElementRef): void {\n        if (!button) {\n            return;\n        }\n        button.nativeElement.focus();\n    }\n\n    /**\n     * Focuses the slider pager button matching the given ECL class selector\n     * (e.g. `.ecl-carousel__play`). Used after a play/pause toggle so focus\n     * follows the now-visible control, since the pager swaps play/pause\n     * visibility via CSS. No-op if the button is not rendered (e.g. mobile).\n     */\n    private focusPagerButton(selector: string): void {\n        const button = this.hostEl.nativeElement.querySelector<HTMLElement>(selector);\n        button?.focus();\n    }\n\n    /**\n     * Returns the Embla autoplay plugin instance, but only when the carousel\n     * actually has more than one scroll snap.\n     *\n     * The `embla-carousel-autoplay` plugin skips its own initialization when\n     * `scrollSnapList().length <= 1` (see the plugin's `init`), which leaves its\n     * internal `delay` lookup table undefined. Calling `play()` in that state\n     * throws (`delay[selectedScrollSnap()]` -> reading `0` of undefined). This\n     * happens whenever Embla cannot lay out multiple snaps — notably in a jsdom\n     * test or during SSR. Gating on the same `> 1` condition the plugin uses\n     * keeps autoplay a safe no-op until the carousel is genuinely slideable.\n     */\n    private getAutoplay() {\n        const api = this.embla()?.emblaApi;\n        if (!api || api.scrollSnapList().length <= 1) {\n            return undefined;\n        }\n        return api.plugins()?.autoplay;\n    }\n\n    /**\n     * Whether autoplay should run. On by default (matching ECL); only disabled\n     * when the consumer explicitly sets `[isAutoplay]=\"false\"`.\n     */\n    private isAutoplayDesired(): boolean {\n        const isAutoplay = this.isAutoplay();\n        return isAutoplay || isAutoplay === undefined;\n    }\n\n    /**\n     * Stops autoplay and resets it (mirrors ECL's `handleAutoPlay(true)`),\n     * clearing the loading-bar state.\n     */\n    private stopAutoplay(): void {\n        const autoplay = this.getAutoplay();\n        autoplay?.stop();\n        autoplay?.reset();\n        this.isPlaying.set(false);\n        this.isPausedForced.set(false);\n        this.isHoverPaused.set(false);\n        this.cd.detectChanges();\n    }\n\n    /**\n     * Synchronizes component state from Embla's current selected snap:\n     * active index, slide `isCurrent` flags, teaser window and the slide event.\n     */\n    private syncFromEmbla(): void {\n        const api = this.embla()?.emblaApi;\n        if (!api) {\n            return;\n        }\n        const selected = api.selectedScrollSnap();\n        this.setActiveIndex(selected);\n        this.updateTeaserWindow();\n        this.slide.emit(new EclSlideEvent(this.slides().at(this.activeIndex)));\n        this.cd.detectChanges();\n    }\n\n    /**\n     * Subscribes to RTL layout state changes to adapt carousel direction.\n     */\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            const changed = this.isRtl !== rtlState;\n            this.isRtl = rtlState;\n            if (changed) {\n                this.emblaOptions = {\n                    ...this.emblaOptions,\n                    direction: this.isRtl ? 'rtl' : 'ltr',\n                };\n                this.cd.detectChanges();\n            }\n        });\n    }\n\n    /**\n     * Initializes slides (index, ARIA label, banner height management).\n     */\n    private initSlides(): void {\n        const slides = this.slides();\n        slides.forEach((item, idx) => {\n            item.index.set(idx);\n            item.ariaLabel.set(`slide ${idx + 1} of ${slides.length}`);\n            item.isCurrent.set(idx === 0);\n            const banner = item.banner();\n            if (banner) {\n                banner.skipHeightManagement = true;\n            }\n        });\n        this.cd.detectChanges();\n    }\n\n    /**\n     * Updates the active index and synchronizes slide active/inert state.\n     */\n    private setActiveIndex(index: number): void {\n        this.activeIndex = index;\n        this.slides().forEach((item, idx) => {\n            item.isCurrent.set(idx === index);\n        });\n    }\n\n    /**\n     * Restarts the CSS progress animation on the active slide's loading bar.\n     * The animation uses `forwards`, so re-applying the `is-active` class alone\n     * will not replay it; the animation must be reset explicitly.\n     */\n    private restartActiveLoadingBar(): void {\n        if (!this.getAutoplay()?.isPlaying()) {\n            return;\n        }\n        const bar = this.loadingBars()[this.activeIndex]?.nativeElement as HTMLElement | undefined;\n        if (!bar) {\n            return;\n        }\n        bar.style.animation = 'none';\n        // Force reflow so the browser registers the reset before re-enabling.\n        void bar.offsetWidth;\n        bar.style.animation = '';\n    }\n\n    /**\n     * Advances the visible teaser window when the active slide moves out of it.\n     */\n    private updateTeaserWindow(): void {\n        const count = this.getSlidesCount();\n        if (count <= VISIBLE_TEASERS) {\n            this.teaserWindowStart = 0;\n            return;\n        }\n        const firstHiddenIndex = (this.teaserWindowStart + VISIBLE_TEASERS) % count;\n        if (this.activeIndex === firstHiddenIndex) {\n            this.teaserWindowStart = firstHiddenIndex;\n        }\n    }\n\n    /**\n     * Returns the number of actual visible slides.\n     */\n    private getSlidesCount(): number {\n        return this.slides()?.length ?? 0;\n    }\n\n    /**\n     * Observes screen breakpoint changes to adjust autoplay and layout behavior.\n     */\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe([\n                '(max-width: 768px)',\n                '(min-width: 998px)',\n                '(min-width: 1140px)',\n                '(min-width: 1140px) and (max-width: 1260px)',\n            ])\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((result) => {\n                this.isMobileBreakpoint.set(result.breakpoints['(max-width: 768px)']);\n                this.isTabletBreakpoint = result.breakpoints['(min-width: 998px)'];\n                this.isLargeBreakpoint = result.breakpoints['(min-width: 1140px)'];\n                this.isDesktopBreakpointActive.set(result.breakpoints['(min-width: 1140px)']);\n                this.isDesktopBreakpoint = result.breakpoints['(min-width: 1140px) and (max-width: 1260px)'];\n\n                // Deactivate autoplay on mobile; (re)activate it on larger\n                // screens if autoplay is desired. Focus is never moved here so\n                // the page is not scrolled to the carousel on load/resize.\n                if (this.isMobileBreakpoint()) {\n                    this.stopAutoplay();\n                    return;\n                }\n\n                if (this.isTabletBreakpoint && this.isAutoplayDesired() && !this.isPausedForced()) {\n                    this.onPlayClick(false);\n                }\n            });\n    }\n\n    /**\n     * Observes changes to the carousel's viewport element size using a timeout debounce.\n     */\n    private observeElementSizeChanges(): void {\n        setTimeout(() => {\n            if (this.isLargeBreakpoint) {\n                this.checkBannerHeights();\n            } else {\n                this.resetHeight();\n            }\n            this.embla()?.reInit();\n        }, this.TIMEOUT_INTERVAL);\n    }\n\n    /**\n     * Normalizes the height of all banners to match the tallest banner.\n     */\n    private checkBannerHeights(): void {\n        this.slides().forEach((slide) => {\n            const banner = slide.banner();\n            if (banner) {\n                banner.calculateHeight();\n            }\n        });\n\n        const heightValues = this.slides().map((slide) => {\n            const el = slide.banner()?.el.nativeElement;\n            if (!el) return undefined;\n\n            const styleHeight = el.style.height;\n\n            if (styleHeight === 'auto' || styleHeight === '') {\n                return el.offsetHeight;\n            }\n\n            const height = parseInt(styleHeight, 10);\n            if (Number.isNaN(height) || height === 100) {\n                return 1;\n            }\n\n            return height;\n        });\n\n        const elementHeights = heightValues.filter((h) => h !== undefined) as number[];\n        const tallestElementHeight = Math.max(...elementHeights);\n\n        const slides = this.slides();\n        if (tallestElementHeight > 1 && elementHeights.length === slides.length) {\n            slides.forEach((slide) => {\n                const banner = slide.banner();\n                if (!banner) return;\n\n                const el = banner.el.nativeElement;\n                const bannerImage = banner.eclBannerImage();\n                const bannerVideo = banner.eclBannerVideo();\n\n                this.renderer2.setStyle(el, 'height', `${tallestElementHeight}px`);\n                this.renderer2.setStyle(el, 'aspect-ratio', 'auto');\n\n                if (bannerImage) {\n                    this.renderer2.setStyle(bannerImage.el.nativeElement, 'aspect-ratio', 'auto');\n                }\n                if (bannerVideo) {\n                    this.renderer2.setStyle(bannerVideo.el.nativeElement, 'aspect-ratio', 'auto');\n                }\n            });\n        }\n    }\n\n    /**\n     * Clears all explicit banner height and aspect ratio styling for smaller breakpoints.\n     */\n    private resetHeight(): void {\n        this.slides().forEach((slide) => {\n            const banner = slide.banner();\n            if (banner) {\n                const bannerImage = banner.eclBannerImage();\n                const bannerVideo = banner.eclBannerVideo();\n                this.renderer2.removeStyle(banner.el.nativeElement, 'height');\n                this.renderer2.removeStyle(banner.el.nativeElement, 'aspect-ratio');\n                if (bannerImage) {\n                    this.renderer2.removeStyle(bannerImage.el.nativeElement, 'aspect-ratio');\n                }\n                if (bannerVideo) {\n                    this.renderer2.removeStyle(bannerVideo.el.nativeElement, 'aspect-ratio');\n                }\n            }\n        });\n    }\n}\n",
+            "sourceCode": "import { BreakpointObserver } from '@angular/cdk/layout';\nimport {\n    AfterContentInit,\n    ChangeDetectorRef,\n    Component,\n    DOCUMENT,\n    ElementRef,\n    OnDestroy,\n    OnInit,\n    Renderer2,\n    afterNextRender,\n    booleanAttribute,\n    computed,\n    contentChildren,\n    forwardRef,\n    inject,\n    input,\n    numberAttribute,\n    output,\n    signal,\n    viewChild,\n    viewChildren,\n} from '@angular/core';\nimport { EUI_ECL_SLIDER } from '@eui/ecl/components/ecl-slider';\nimport { ECLBaseDirective, EclRtlService, KeyCode } from '@eui/ecl/core';\nimport { TranslatePipe, TranslateService } from '@ngx-translate/core';\nimport {\n    EmblaEventType,\n    EmblaOptionsType,\n    EmblaPluginType,\n} from 'embla-carousel';\nimport { EmblaCarouselDirective } from 'embla-carousel-angular';\nimport Autoplay from 'embla-carousel-autoplay';\nimport { Subject, auditTime, fromEvent, takeUntil } from 'rxjs';\nimport { EclCarouselItemComponent } from './ecl-carousel-item.component';\nimport { EclSlideEvent } from './events/ecl-slide.event';\n\n/**\n * Number of teaser buttons visible at once on the desktop breakpoint.\n */\nconst VISIBLE_TEASERS = 4;\n\n/**\n * Carousel (slideshow) component following the ECL design system.\n * Renders a sequence of `EclCarouselItemComponent` slides with autoplay, keyboard navigation,\n * responsive breakpoint awareness, and RTL layout support.\n *\n * The slide engine is powered by Embla (via `embla-carousel-angular`), matching the upstream\n * ECL implementation: an infinite `loop`, the `Autoplay` plugin driving the teaser loading bars,\n * and a slider pager with previous/next/play/pause controls, a counter, and a tablist of teaser\n * buttons (one per slide).\n *\n * - Selector: `ecl-carousel`.\n * - Project `ecl-carousel-item` elements as slides (also via `contentChildren`).\n * - `ariaLabel` — ARIA label for the carousel landmark; aliased as `aria-label`.\n * - `isAutoplay` — enables automatic slide advancement; boolean attribute.\n * - `playInterval` — milliseconds between automatic transitions; default `5000`.\n * - `slide` — emits `EclSlideEvent` when the active slide changes.\n */\n@Component({\n    selector: 'ecl-carousel',\n    templateUrl: './ecl-carousel.component.html',\n    imports: [\n        TranslatePipe,\n        EmblaCarouselDirective,\n        ...EUI_ECL_SLIDER,\n    ],\n    host: {\n        '[attr.aria-label]': 'ariaLabel()',\n        '[attr.aria-roledescription]': '\"carousel\"',\n        '[class]': 'cssClasses()',\n        // Drives the teaser loading-bar animation duration (see @eui/styles).\n        // It has no CSS fallback, so without it the progress animation never\n        // runs; it must match the autoplay delay.\n        '[style.--ecl-carousel-slide-duration]': 'playInterval() + \"ms\"',\n    },\n})\nexport class EclCarouselComponent extends ECLBaseDirective implements OnInit, OnDestroy, AfterContentInit {\n    /**\n     * Aria-label for screen readers to describe the carousel.\n     */\n    readonly ariaLabel = input<string | null>('Carousel description here', { alias: 'aria-label' });\n\n    /**\n     * Determines whether the carousel should autoplay.\n     */\n    readonly isAutoplay = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n\n    /**\n     * Interval in milliseconds between automatic slide transitions.\n     */\n    readonly playInterval = input(5000, { transform: numberAttribute });\n\n    /**\n     * Event emitted when a slide change occurs.\n     */\n    readonly slide = output<EclSlideEvent>();\n\n    /**\n     * Reference to the main carousel viewport element (the Embla root).\n     */\n    readonly carouselContainerElement = viewChild<ElementRef>('carouselContainer');\n\n    /**\n     * Collection of slide components rendered inside the carousel.\n     */\n    readonly slides = contentChildren(forwardRef(() => EclCarouselItemComponent));\n\n    /**\n     * Indicates whether autoplay is currently active.\n     */\n    readonly isPlaying = signal(false);\n\n    /**\n     * Indicates whether autoplay was manually paused (via the pause button or\n     * on mobile). When paused this way the loading bar is cleared.\n     */\n    readonly isPausedForced = signal(false);\n\n    /**\n     * Indicates whether the layout is currently in RTL mode.\n     */\n    isRtl = false;\n\n    /**\n     * Zero-based index of the currently active slide (mirrors Embla's selected snap).\n     */\n    private activeIndex = 0;\n\n    /**\n     * Start index of the currently visible teaser window (desktop only).\n     */\n    private teaserWindowStart = 0;\n\n    /**\n     * Indicates whether autoplay is temporarily paused by hover/focus. Unlike a\n     * manual pause, the loading bar stays visible and frozen at its current\n     * progress (matching ECL), resuming when the pointer/focus leaves.\n     */\n    protected readonly isHoverPaused = signal(false);\n\n    /**\n     * Whether the current viewport is at the mobile breakpoint. A signal so the\n     * template can react (the pager drops play/pause on mobile, matching ECL,\n     * where play/pause is a desktop-only control).\n     */\n    protected readonly isMobileBreakpoint = signal(false);\n\n    /**\n     * Whether the viewport is at or above the ECL desktop breakpoint (1140px).\n     * This is the boundary the ECL CSS uses to show the play/pause controls and\n     * the teaser tablist (and to hide the mobile dots). A signal so the pager\n     * variant can react: play/pause only renders at/above this width, matching\n     * the CSS so the pause button never leaks onto narrower viewports.\n     */\n    protected readonly isDesktopBreakpointActive = signal(false);\n\n    /**\n     * Embla options, mirroring the upstream ECL configuration.\n     */\n    protected emblaOptions: EmblaOptionsType = {\n        loop: true,\n        align: 'start',\n        duration: 20,\n    };\n\n    /**\n     * Embla plugins. Built once so the Embla directive does not needlessly re-init.\n     */\n    protected emblaPlugins: EmblaPluginType[] = [];\n\n    /**\n     * Embla events the component reacts to.\n     */\n    protected readonly emblaEvents: EmblaEventType[] = [\n        'select',\n        'reInit',\n        'autoplay:timerset',\n    ];\n\n    /**\n     * Reference to the Embla directive driving the slide engine.\n     */\n    private readonly embla = viewChild<EmblaCarouselDirective>('embla');\n\n    /**\n     * References to the teaser navigation buttons corresponding to each slide.\n     */\n    private readonly teaserButtons = viewChildren<ElementRef>('teaserButton');\n\n    /**\n     * References to the teaser loading-bar completion elements (one per slide),\n     * used to restart the progress animation when the active slide changes.\n     */\n    private readonly loadingBars = viewChildren<ElementRef>('loadingBar');\n\n    private isTabletBreakpoint = false;\n    private isLargeBreakpoint = false;\n    private isDesktopBreakpoint = false;\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n\n    /**\n     * Debounce interval (ms) used internally for timing and transitions.\n     */\n    private readonly TIMEOUT_INTERVAL = 400;\n    private readonly cdkBreakpointObserver = inject(BreakpointObserver);\n    private readonly cd = inject(ChangeDetectorRef);\n    private readonly renderer2 = inject(Renderer2);\n    private readonly eclRtlService = inject(EclRtlService);\n    private readonly translate = inject(TranslateService);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly window = this.document.defaultView;\n    /**\n     * Host element, used to locate the slider pager's play/pause buttons by their\n     * ECL classes for focus management after a play/pause toggle.\n     */\n    private readonly hostEl = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    /**\n     * Returns the computed CSS class list for the component.\n     */\n    protected readonly cssClasses = computed<string>(() =>\n        super.getCssClasses('ecl-carousel'));\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.observeElementSizeChanges();\n            this.observeBreakpointChanges();\n            this.syncFromEmbla();\n\n            if (this.window) {\n                fromEvent(this.window, 'resize')\n                    .pipe(auditTime(50), takeUntil(this.destroy$))\n                    .subscribe(() => this.observeElementSizeChanges());\n            }\n        });\n    }\n\n    /**\n     * Angular lifecycle hook: initializes RTL detection and the Embla plugins.\n     */\n    ngOnInit(): void {\n        this.emblaOptions = {\n            ...this.emblaOptions,\n            direction: this.isRtl ? 'rtl' : 'ltr',\n        };\n        const autoplayDesired = this.isAutoplayDesired();\n        // Reflect the initial play state so the current slide's loading bar is\n        // shown on load (the plugin self-starts via playOnInit).\n        this.isPlaying.set(autoplayDesired);\n        this.emblaPlugins = [\n            Autoplay({\n                delay: this.playInterval(),\n                // Autoplay is on by default (matching ECL) unless explicitly\n                // disabled via [isAutoplay]=\"false\". Letting the plugin start\n                // itself avoids a race with Embla's own initialization.\n                playOnInit: autoplayDesired,\n                stopOnInteraction: false,\n                stopOnMouseEnter: true,\n                stopOnFocusIn: true,\n            }),\n        ];\n        this.handleRtlChangeState();\n    }\n\n    /**\n     * Angular lifecycle hook: called after content (slides) is initialized.\n     */\n    ngAfterContentInit(): void {\n        setTimeout(() => {\n            this.initSlides();\n        });\n    }\n\n    /**\n     * Angular lifecycle hook: cleans up subscriptions.\n     */\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * Returns whether the carousel has padding applied (e.g., on desktop breakpoint).\n     */\n    isPadded(): boolean {\n        return this.isDesktopBreakpoint;\n    }\n\n    /**\n     * Checks whether there are enough slides to render controls.\n     */\n    hasControls(): boolean {\n        return this.getSlidesCount() > 1;\n    }\n\n    /**\n     * Retrieves the current active slide index (zero-based).\n     */\n    getCurrentSlideIndex(): number {\n        return this.activeIndex;\n    }\n\n    /**\n     * Returns the 1-based position of the active slide (for the counter).\n     */\n    getCounterCurrent(): number {\n        return this.activeIndex + 1;\n    }\n\n    /**\n     * Returns the total number of slides (for the counter).\n     */\n    getCounterTotal(): number {\n        return this.getSlidesCount();\n    }\n\n    /**\n     * Dot indices for the mobile slider pager (one dot per slide). The dots are\n     * hidden on desktop via the ECL CSS (`.ecl-carousel__dots { display: none }`)\n     * and shown at the mobile breakpoint.\n     */\n    getDotIndices(): number[] {\n        return Array.from({ length: this.getSlidesCount() }, (_unused, dotIndex) => dotIndex);\n    }\n\n    /**\n     * Pre-translated accessible label for each pager dot. Translated here since\n     * the shared `ecl-slider-pager` receives plain strings.\n     */\n    getDotAriaLabels(): string[] {\n        const total = this.getSlidesCount();\n        return Array.from({ length: total }, (_unused, dotIndex) =>\n            this.translate.instant('ecl.carousel.GO-TO-SLIDE', {\n                current: dotIndex + 1,\n                total,\n            }),\n        );\n    }\n\n    /**\n     * Returns whether a teaser button should be visible in the current window.\n     */\n    isTeaserVisible(index: number): boolean {\n        const count = this.getSlidesCount();\n        if (count <= VISIBLE_TEASERS) {\n            return true;\n        }\n        const position = ((index - this.teaserWindowStart) % count + count) % count;\n        return position < VISIBLE_TEASERS;\n    }\n\n    /**\n     * Returns the flex order of a teaser button within the visible window.\n     */\n    getTeaserOrder(index: number): number {\n        const count = this.getSlidesCount();\n        return ((index - this.teaserWindowStart) % count + count) % count;\n    }\n\n    /**\n     * Whether the pager should show the \"pause\" control (i.e. autoplay is\n     * actively running). While the pointer/focus hover-pauses the carousel the\n     * timer is suspended, so the pager must show \"play\" even though a manual\n     * pause was not triggered. Mirrors upstream ECL, where hovering flips the\n     * control to play.\n     */\n    protected isPagerPlaying(): boolean {\n        return this.isPlaying() && !this.isHoverPaused();\n    }\n\n    /**\n     * Pager variant by breakpoint. Below the ECL desktop breakpoint (1140px)\n     * the carousel shows only the dots navigation (prev / dots / next);\n     * play/pause is a desktop-only control in ECL. Rendering `'dots'` there\n     * avoids the pager's inline play/pause `display` style (which would\n     * otherwise beat the ECL CSS and leave the pause button visible on narrower\n     * viewports). At/above 1140px the dots are hidden by CSS, so\n     * `'play-pause-dots'` yields play/pause + prev/next + teasers.\n     *\n     * The 1140px boundary mirrors the media query the ECL CSS uses to toggle\n     * `.ecl-carousel__play/__pause` and `.ecl-carousel__teasers`.\n     */\n    protected pagerVariant(): 'dots' | 'play-pause-dots' {\n        return this.isDesktopBreakpointActive() ? 'play-pause-dots' : 'dots';\n    }\n\n    /**\n     * Handles the throttled Embla events the component subscribed to.\n     */\n    protected onEmblaEvent(event: EmblaEventType): void {\n        switch (event) {\n            case 'select':\n            case 'reInit':\n                this.syncFromEmbla();\n                break;\n            case 'autoplay:timerset':\n                // Fired each time the autoplay timer (re)starts for the current\n                // slide; replay the loading-bar fill animation from zero.\n                this.restartActiveLoadingBar();\n                break;\n            default:\n                break;\n        }\n    }\n\n    /**\n     * Starts autoplay.\n     *\n     * @param moveFocus when true (a user clicked play) focus moves to the pause\n     *        button. Auto-starts (e.g. on breakpoint changes) pass false so the\n     *        page is not scrolled to the carousel on load.\n     */\n    protected onPlayClick(moveFocus = true): void {\n        this.getAutoplay()?.play();\n        this.isPlaying.set(true);\n        this.isPausedForced.set(false);\n        this.isHoverPaused.set(false);\n        this.cd.detectChanges();\n        if (moveFocus) {\n            this.focusPagerButton('.ecl-carousel__pause');\n        }\n    }\n\n    /**\n     * Stops autoplay and focuses the play button.\n     */\n    protected onPauseClick(): void {\n        // Pause (not full stop): halt the autoplay timer but keep the active\n        // teaser loading bar visible, frozen at its current progress (matching\n        // upstream ECL's `handleAutoPlay(false, true)`). The installed\n        // embla-carousel-autoplay exposes no `pause()`, so we call `stop()`\n        // WITHOUT `reset()` — the frozen bar is driven by our `is-paused` CSS\n        // class, not the plugin. A full stop+reset (which clears the bar) only\n        // happens on prev/next/teaser navigation via `stopAutoplay()`.\n        this.getAutoplay()?.stop();\n        this.isPlaying.set(false);\n        this.isPausedForced.set(true);\n        this.isHoverPaused.set(false);\n        this.cd.detectChanges();\n        this.focusPagerButton('.ecl-carousel__play');\n    }\n\n    /**\n     * Navigates to the next slide and stops autoplay.\n     */\n    protected onNextSlideClick(): void {\n        this.stopAutoplay();\n        this.embla()?.scrollNext();\n    }\n\n    /**\n     * Navigates to the previous slide and stops autoplay.\n     */\n    protected onPreviousSlideClick(): void {\n        this.stopAutoplay();\n        this.embla()?.scrollPrev();\n    }\n\n    /**\n     * Handles user interaction with a teaser button: activates the matching slide.\n     */\n    protected onTeaserClick(index: number): void {\n        this.stopAutoplay();\n        this.embla()?.scrollTo(index);\n    }\n\n    /**\n     * Handles a dot activation from the mobile slider pager: scrolls to the\n     * matching slide and stops autoplay (same behavior as a teaser click).\n     */\n    protected onDotClick(index: number): void {\n        this.stopAutoplay();\n        this.embla()?.scrollTo(index);\n    }\n\n    /**\n     * Handles keyboard navigation (ArrowLeft/ArrowRight) across teaser buttons.\n     */\n    protected onTeaserKeyboardPress(event: KeyboardEvent, index: number): void {\n        if (event.key !== KeyCode.ARROW_RIGHT && event.key !== KeyCode.ARROW_LEFT) {\n            return;\n        }\n        event.preventDefault();\n        const direction = event.key === KeyCode.ARROW_RIGHT ? 1 : -1;\n        const count = this.getSlidesCount();\n        const nextIndex = (index + direction + count) % count;\n        this.stopAutoplay();\n        this.embla()?.scrollTo(nextIndex);\n        this.focusOnButton(this.teaserButtons()[nextIndex]);\n    }\n\n    /**\n     * Freezes the loading bar while the pointer/focus is over the carousel.\n     * The Embla autoplay plugin pauses the timer itself (stopOnMouseEnter /\n     * stopOnFocusIn); this only mirrors that as a visible paused state.\n     */\n    protected onViewportPause(): void {\n        if (this.isPlaying() && !this.isPausedForced()) {\n            this.isHoverPaused.set(true);\n            this.cd.detectChanges();\n        }\n    }\n\n    /**\n     * Resumes the loading bar once the pointer/focus leaves the carousel.\n     */\n    protected onViewportResume(): void {\n        if (this.isHoverPaused()) {\n            this.isHoverPaused.set(false);\n            this.cd.detectChanges();\n        }\n    }\n\n    /**\n     * Sets focus on the specified button.\n     */\n    private focusOnButton(button: ElementRef): void {\n        if (!button) {\n            return;\n        }\n        button.nativeElement.focus();\n    }\n\n    /**\n     * Focuses the slider pager button matching the given ECL class selector\n     * (e.g. `.ecl-carousel__play`). Used after a play/pause toggle so focus\n     * follows the now-visible control, since the pager swaps play/pause\n     * visibility via CSS. No-op if the button is not rendered (e.g. mobile).\n     */\n    private focusPagerButton(selector: string): void {\n        const button = this.hostEl.nativeElement.querySelector<HTMLElement>(selector);\n        button?.focus();\n    }\n\n    /**\n     * Returns the Embla autoplay plugin instance, but only when the carousel\n     * actually has more than one scroll snap.\n     *\n     * The `embla-carousel-autoplay` plugin skips its own initialization when\n     * `scrollSnapList().length <= 1` (see the plugin's `init`), which leaves its\n     * internal `delay` lookup table undefined. Calling `play()` in that state\n     * throws (`delay[selectedScrollSnap()]` -> reading `0` of undefined). This\n     * happens whenever Embla cannot lay out multiple snaps — notably in a jsdom\n     * test or during SSR. Gating on the same `> 1` condition the plugin uses\n     * keeps autoplay a safe no-op until the carousel is genuinely slideable.\n     */\n    private getAutoplay() {\n        const api = this.embla()?.emblaApi;\n        if (!api || api.scrollSnapList().length <= 1) {\n            return undefined;\n        }\n        return api.plugins()?.autoplay;\n    }\n\n    /**\n     * Whether autoplay should run. On by default (matching ECL); only disabled\n     * when the consumer explicitly sets `[isAutoplay]=\"false\"`.\n     */\n    private isAutoplayDesired(): boolean {\n        const isAutoplay = this.isAutoplay();\n        return isAutoplay || isAutoplay === undefined;\n    }\n\n    /**\n     * Stops autoplay and resets it (mirrors ECL's `handleAutoPlay(true)`),\n     * clearing the loading-bar state.\n     */\n    private stopAutoplay(): void {\n        const autoplay = this.getAutoplay();\n        autoplay?.stop();\n        autoplay?.reset();\n        this.isPlaying.set(false);\n        this.isPausedForced.set(false);\n        this.isHoverPaused.set(false);\n        this.cd.detectChanges();\n    }\n\n    /**\n     * Synchronizes component state from Embla's current selected snap:\n     * active index, slide `isCurrent` flags, teaser window and the slide event.\n     */\n    private syncFromEmbla(): void {\n        const api = this.embla()?.emblaApi;\n        if (!api) {\n            return;\n        }\n        const selected = api.selectedScrollSnap();\n        this.setActiveIndex(selected);\n        this.updateTeaserWindow();\n        this.slide.emit(new EclSlideEvent(this.slides().at(this.activeIndex)));\n        this.cd.detectChanges();\n    }\n\n    /**\n     * Subscribes to RTL layout state changes to adapt carousel direction.\n     */\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            const changed = this.isRtl !== rtlState;\n            this.isRtl = rtlState;\n            if (changed) {\n                this.emblaOptions = {\n                    ...this.emblaOptions,\n                    direction: this.isRtl ? 'rtl' : 'ltr',\n                };\n                this.cd.detectChanges();\n            }\n        });\n    }\n\n    /**\n     * Initializes slides (index, ARIA label, banner height management).\n     */\n    private initSlides(): void {\n        const slides = this.slides();\n        slides.forEach((item, idx) => {\n            item.index.set(idx);\n            item.ariaLabel.set(`slide ${idx + 1} of ${slides.length}`);\n            item.isCurrent.set(idx === 0);\n            const banner = item.banner();\n            if (banner) {\n                banner.skipHeightManagement = true;\n            }\n        });\n        this.cd.detectChanges();\n    }\n\n    /**\n     * Updates the active index and synchronizes slide active/inert state.\n     */\n    private setActiveIndex(index: number): void {\n        this.activeIndex = index;\n        this.slides().forEach((item, idx) => {\n            item.isCurrent.set(idx === index);\n        });\n    }\n\n    /**\n     * Restarts the CSS progress animation on the active slide's loading bar.\n     * The animation uses `forwards`, so re-applying the `is-active` class alone\n     * will not replay it; the animation must be reset explicitly.\n     */\n    private restartActiveLoadingBar(): void {\n        if (!this.getAutoplay()?.isPlaying()) {\n            return;\n        }\n        const bar = this.loadingBars()[this.activeIndex]?.nativeElement as HTMLElement | undefined;\n        if (!bar) {\n            return;\n        }\n        bar.style.animation = 'none';\n        // Force reflow so the browser registers the reset before re-enabling.\n        void bar.offsetWidth;\n        bar.style.animation = '';\n    }\n\n    /**\n     * Advances the visible teaser window when the active slide moves out of it.\n     */\n    private updateTeaserWindow(): void {\n        const count = this.getSlidesCount();\n        if (count <= VISIBLE_TEASERS) {\n            this.teaserWindowStart = 0;\n            return;\n        }\n        const firstHiddenIndex = (this.teaserWindowStart + VISIBLE_TEASERS) % count;\n        if (this.activeIndex === firstHiddenIndex) {\n            this.teaserWindowStart = firstHiddenIndex;\n        }\n    }\n\n    /**\n     * Returns the number of actual visible slides.\n     */\n    private getSlidesCount(): number {\n        return this.slides()?.length ?? 0;\n    }\n\n    /**\n     * Observes screen breakpoint changes to adjust autoplay and layout behavior.\n     */\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe([\n                '(max-width: 768px)',\n                '(min-width: 998px)',\n                '(min-width: 1140px)',\n                '(min-width: 1140px) and (max-width: 1260px)',\n            ])\n            .pipe(takeUntil(this.destroy$))\n            .subscribe((result) => {\n                this.isMobileBreakpoint.set(result.breakpoints['(max-width: 768px)']);\n                this.isTabletBreakpoint = result.breakpoints['(min-width: 998px)'];\n                this.isLargeBreakpoint = result.breakpoints['(min-width: 1140px)'];\n                this.isDesktopBreakpointActive.set(result.breakpoints['(min-width: 1140px)']);\n                this.isDesktopBreakpoint = result.breakpoints['(min-width: 1140px) and (max-width: 1260px)'];\n\n                // Deactivate autoplay on mobile; (re)activate it on larger\n                // screens if autoplay is desired. Focus is never moved here so\n                // the page is not scrolled to the carousel on load/resize.\n                if (this.isMobileBreakpoint()) {\n                    this.stopAutoplay();\n                    return;\n                }\n\n                if (this.isTabletBreakpoint && this.isAutoplayDesired() && !this.isPausedForced()) {\n                    this.onPlayClick(false);\n                }\n            });\n    }\n\n    /**\n     * Observes changes to the carousel's viewport element size using a timeout debounce.\n     */\n    private observeElementSizeChanges(): void {\n        setTimeout(() => {\n            if (this.isLargeBreakpoint) {\n                this.checkBannerHeights();\n            } else {\n                this.resetHeight();\n            }\n            this.embla()?.reInit();\n        }, this.TIMEOUT_INTERVAL);\n    }\n\n    /**\n     * Normalizes the height of all banners to match the tallest banner.\n     */\n    private checkBannerHeights(): void {\n        this.slides().forEach((slide) => {\n            const banner = slide.banner();\n            if (banner) {\n                banner.calculateHeight();\n            }\n        });\n\n        const heightValues = this.slides().map((slide) => {\n            const el = slide.banner()?.el.nativeElement;\n            if (!el) return undefined;\n\n            const styleHeight = el.style.height;\n\n            if (styleHeight === 'auto' || styleHeight === '') {\n                return el.offsetHeight;\n            }\n\n            const height = parseInt(styleHeight, 10);\n            if (Number.isNaN(height) || height === 100) {\n                return 1;\n            }\n\n            return height;\n        });\n\n        const elementHeights = heightValues.filter((h) => h !== undefined) as number[];\n        const tallestElementHeight = Math.max(...elementHeights);\n\n        const slides = this.slides();\n        if (tallestElementHeight > 1 && elementHeights.length === slides.length) {\n            slides.forEach((slide) => {\n                const banner = slide.banner();\n                if (!banner) return;\n\n                const el = banner.el.nativeElement;\n                const bannerImage = banner.eclBannerImage();\n                const bannerVideo = banner.eclBannerVideo();\n\n                this.renderer2.setStyle(el, 'height', `${tallestElementHeight}px`);\n                this.renderer2.setStyle(el, 'aspect-ratio', 'auto');\n\n                if (bannerImage) {\n                    this.renderer2.setStyle(bannerImage.el.nativeElement, 'aspect-ratio', 'auto');\n                }\n                if (bannerVideo) {\n                    this.renderer2.setStyle(bannerVideo.el.nativeElement, 'aspect-ratio', 'auto');\n                }\n            });\n        }\n    }\n\n    /**\n     * Clears all explicit banner height and aspect ratio styling for smaller breakpoints.\n     */\n    private resetHeight(): void {\n        this.slides().forEach((slide) => {\n            const banner = slide.banner();\n            if (banner) {\n                const bannerImage = banner.eclBannerImage();\n                const bannerVideo = banner.eclBannerVideo();\n                this.renderer2.removeStyle(banner.el.nativeElement, 'height');\n                this.renderer2.removeStyle(banner.el.nativeElement, 'aspect-ratio');\n                if (bannerImage) {\n                    this.renderer2.removeStyle(bannerImage.el.nativeElement, 'aspect-ratio');\n                }\n                if (bannerVideo) {\n                    this.renderer2.removeStyle(bannerVideo.el.nativeElement, 'aspect-ratio');\n                }\n            }\n        });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
                     "pos": 1143,
-                    "end": 2204,
+                    "end": 2116,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
                     "modifierFlagsCache": 0,
                     "transformFlags": 0,
-                    "comment": "Carousel (slideshow) component following the ECL design system.\nRenders a sequence of `EclCarouselItemComponent` slides with autoplay, keyboard navigation,\nresponsive breakpoint awareness, and RTL layout support.\n\nThe slide engine is powered by Embla (via `embla-carousel-angular`), matching the upstream\nECL implementation: an infinite `loop`, the `Autoplay` plugin driving the teaser loading bars,\nand a slider pager with previous/next/play/pause controls, a counter, and a tablist of teaser\nbuttons (one per slide).\n\n- Selector: `ecl-carousel`.\n- Project `ecl-carousel-item` elements as slides (also via `contentChildren`).\n- `ariaLabel` — ARIA label for the carousel landmark; aliased as `aria-label`.\n- `isAutoplay` — enables automatic slide advancement; boolean attribute.\n- `playInterval` — milliseconds between automatic transitions; default `5000`.\n- `counterLabel` — separator label used by the counter, defaults to `ecl.common.OF`.\n- `slide` — emits `EclSlideEvent` when the active slide changes."
+                    "comment": "Carousel (slideshow) component following the ECL design system.\nRenders a sequence of `EclCarouselItemComponent` slides with autoplay, keyboard navigation,\nresponsive breakpoint awareness, and RTL layout support.\n\nThe slide engine is powered by Embla (via `embla-carousel-angular`), matching the upstream\nECL implementation: an infinite `loop`, the `Autoplay` plugin driving the teaser loading bars,\nand a slider pager with previous/next/play/pause controls, a counter, and a tablist of teaser\nbuttons (one per slide).\n\n- Selector: `ecl-carousel`.\n- Project `ecl-carousel-item` elements as slides (also via `contentChildren`).\n- `ariaLabel` — ARIA label for the carousel landmark; aliased as `aria-label`.\n- `isAutoplay` — enables automatic slide advancement; boolean attribute.\n- `playInterval` — milliseconds between automatic transitions; default `5000`.\n- `slide` — emits `EclSlideEvent` when the active slide changes."
                 }
             ],
             "constructorObj": {
@@ -54666,7 +54637,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 231,
+                "line": 224,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -54711,11 +54682,11 @@
                     }
                 ]
             },
-            "templateData": "@if (hasControls()) {\n<div class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__navigation\">\n            <div class=\"ecl-carousel__pager-container\">\n                <ecl-slider-pager\n                    class=\"ecl-carousel__pager\"\n                    [variant]=\"pagerVariant()\"\n                    size=\"m\"\n                    [isPlaying]=\"isPagerPlaying()\"\n                    [activeIndex]=\"getCurrentSlideIndex()\"\n                    [dotIndices]=\"getDotIndices()\"\n                    [dotAriaLabels]=\"getDotAriaLabels()\"\n                    prevExtraClasses=\"ecl-carousel__prev\"\n                    nextExtraClasses=\"ecl-carousel__next\"\n                    dotsExtraClasses=\"ecl-carousel__dots\"\n                    dotExtraClasses=\"ecl-carousel__dot\"\n                    playExtraClasses=\"ecl-carousel__play\"\n                    pauseExtraClasses=\"ecl-carousel__pause\"\n                    (play)=\"onPlayClick()\"\n                    (pause)=\"onPauseClick()\"\n                    (prev)=\"onPreviousSlideClick()\"\n                    (next)=\"onNextSlideClick()\"\n                    (goTo)=\"onDotClick($event)\">\n                </ecl-slider-pager>\n                <div class=\"ecl-carousel__counter\" dir=\"ltr\">\n                    {{ getCounterCurrent() }} {{ counterLabel() || ('ecl.common.OF' | translate) }} {{ getCounterTotal() }}\n                </div>\n            </div>\n\n            <div class=\"ecl-carousel__teasers\" role=\"tablist\">\n                @for (slide of slides(); let i = $index; track slide) {\n                <button #teaserButton type=\"button\" class=\"ecl-carousel__teaser-button\" role=\"tab\"\n                    [attr.data-ecl-carousel-slide-index]=\"i\"\n                    [attr.aria-current]=\"i === getCurrentSlideIndex() ? true : null\"\n                    [attr.tabindex]=\"i === getCurrentSlideIndex() ? null : -1\"\n                    [style.display]=\"isTeaserVisible(i) ? null : 'none'\"\n                    [style.pointer-events]=\"isTeaserVisible(i) ? null : 'none'\"\n                    [style.order]=\"getTeaserOrder(i)\" (click)=\"onTeaserClick(i)\"\n                    (keydown)=\"onTeaserKeyboardPress($event, i)\">\n                    <span class=\"ecl-carousel__teaser-loading-bar\" aria-hidden=\"true\"\n                        [class.is-active]=\"(isPlaying() || isHoverPaused() || isPausedForced()) && i === getCurrentSlideIndex()\"\n                        [class.is-paused]=\"(isHoverPaused() || isPausedForced()) && i === getCurrentSlideIndex()\">\n                        <span #loadingBar class=\"ecl-carousel__teaser-loading-bar-completion\"></span>\n                    </span>\n                    <span class=\"ecl-carousel__teaser-content\">\n                        @if (slide.teaserText()) {\n                        <span class=\"ecl-carousel__teaser-title\">{{ slide.teaserText() }}</span>\n                        }\n                    </span>\n                </button>\n                }\n            </div>\n        </div>\n    </div>\n</div>\n}\n<div #carouselContainer class=\"ecl-carousel__viewport\" [class.ecl-carousel-container--padded]=\"isPadded()\"\n    emblaCarousel #embla=\"emblaCarousel\" [options]=\"emblaOptions\" [plugins]=\"emblaPlugins\"\n    [subscribeToEvents]=\"emblaEvents\" (emblaChange)=\"onEmblaEvent($event)\"\n    (mouseenter)=\"onViewportPause()\" (mouseleave)=\"onViewportResume()\"\n    (focusin)=\"onViewportPause()\" (focusout)=\"onViewportResume()\">\n    <div class=\"ecl-carousel__slides\">\n        <ng-content></ng-content>\n    </div>\n</div>\n"
+            "templateData": "@if (hasControls()) {\n<div class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__navigation\">\n            <div class=\"ecl-carousel__pager-container\">\n                <ecl-slider-pager\n                    class=\"ecl-carousel__pager\"\n                    [variant]=\"pagerVariant()\"\n                    size=\"m\"\n                    [isPlaying]=\"isPagerPlaying()\"\n                    [activeIndex]=\"getCurrentSlideIndex()\"\n                    [dotIndices]=\"getDotIndices()\"\n                    [dotAriaLabels]=\"getDotAriaLabels()\"\n                    prevExtraClasses=\"ecl-carousel__prev\"\n                    nextExtraClasses=\"ecl-carousel__next\"\n                    dotsExtraClasses=\"ecl-carousel__dots\"\n                    dotExtraClasses=\"ecl-carousel__dot\"\n                    playExtraClasses=\"ecl-carousel__play\"\n                    pauseExtraClasses=\"ecl-carousel__pause\"\n                    (play)=\"onPlayClick()\"\n                    (pause)=\"onPauseClick()\"\n                    (prev)=\"onPreviousSlideClick()\"\n                    (next)=\"onNextSlideClick()\"\n                    (goTo)=\"onDotClick($event)\">\n                </ecl-slider-pager>\n                <div class=\"ecl-carousel__counter\" dir=\"ltr\">\n                    {{ getCounterCurrent() }} {{ ('ecl.common.OF' | translate) }} {{ getCounterTotal() }}\n                </div>\n            </div>\n\n            <div class=\"ecl-carousel__teasers\" role=\"tablist\">\n                @for (slide of slides(); let i = $index; track slide) {\n                <button #teaserButton type=\"button\" class=\"ecl-carousel__teaser-button\" role=\"tab\"\n                    [attr.data-ecl-carousel-slide-index]=\"i\"\n                    [attr.aria-current]=\"i === getCurrentSlideIndex() ? true : null\"\n                    [attr.tabindex]=\"i === getCurrentSlideIndex() ? null : -1\"\n                    [style.display]=\"isTeaserVisible(i) ? null : 'none'\"\n                    [style.pointer-events]=\"isTeaserVisible(i) ? null : 'none'\"\n                    [style.order]=\"getTeaserOrder(i)\" (click)=\"onTeaserClick(i)\"\n                    (keydown)=\"onTeaserKeyboardPress($event, i)\">\n                    <span class=\"ecl-carousel__teaser-loading-bar\" aria-hidden=\"true\"\n                        [class.is-active]=\"(isPlaying() || isHoverPaused() || isPausedForced()) && i === getCurrentSlideIndex()\"\n                        [class.is-paused]=\"(isHoverPaused() || isPausedForced()) && i === getCurrentSlideIndex()\">\n                        <span #loadingBar class=\"ecl-carousel__teaser-loading-bar-completion\"></span>\n                    </span>\n                    <span class=\"ecl-carousel__teaser-content\">\n                        @if (slide.teaserText()) {\n                        <span class=\"ecl-carousel__teaser-title\">{{ slide.teaserText() }}</span>\n                        }\n                    </span>\n                </button>\n                }\n            </div>\n        </div>\n    </div>\n</div>\n}\n<div #carouselContainer class=\"ecl-carousel__viewport\" [class.ecl-carousel-container--padded]=\"isPadded()\"\n    emblaCarousel #embla=\"emblaCarousel\" [options]=\"emblaOptions\" [plugins]=\"emblaPlugins\"\n    [subscribeToEvents]=\"emblaEvents\" (emblaChange)=\"onEmblaEvent($event)\"\n    (mouseenter)=\"onViewportPause()\" (mouseleave)=\"onViewportResume()\"\n    (focusin)=\"onViewportPause()\" (focusout)=\"onViewportResume()\">\n    <div class=\"ecl-carousel__slides\">\n        <ng-content></ng-content>\n    </div>\n</div>\n"
         },
         {
             "name": "EclCarouselItemComponent",
-            "id": "component-EclCarouselItemComponent-ca5a31b1844197993f48ffec30e3bd9847f83e1f68c487cb42a717797a989ccced551189baf4d85536c1569a98714cfa55563d1e073d1b6b26681475e26917ad",
+            "id": "component-EclCarouselItemComponent-d2023eb2cd274d05c0eca2908ac3630ab8141ddeac689b4a6dc53a388ceb91c13061aaaf072796462beee071da08e196f8360d3354892c3d57f55f53fab54f08",
             "file": "packages/ecl/components/ecl-carousel/ecl-carousel-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -54735,22 +54706,6 @@
             "viewProviders": [],
             "hostDirectives": [],
             "inputsClass": [
-                {
-                    "name": "id",
-                    "coverageIgnore": false,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "<p>The unique identifier of the slide.</p>\n",
-                    "line": 64,
-                    "rawdescription": "\n\nThe unique identifier of the slide.\n",
-                    "modifierKind": [
-                        148
-                    ],
-                    "required": false
-                },
                 {
                     "name": "isCurrent",
                     "coverageIgnore": false,
@@ -54761,7 +54716,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Input controlling whether this slide starts as the active/visible one.\nAutomatically coerced to a boolean value.</p>\n",
-                    "line": 70,
+                    "line": 64,
                     "rawdescription": "\n\nInput controlling whether this slide starts as the active/visible one.\nAutomatically coerced to a boolean value.\n",
                     "modifierKind": [
                         148
@@ -54778,7 +54733,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Text shown in the carousel teaser (navigation) button for this slide.\nOptional; when empty, no teaser label is rendered for the slide.</p>\n",
-                    "line": 83,
+                    "line": 77,
                     "rawdescription": "\n\nText shown in the carousel teaser (navigation) button for this slide.\nOptional; when empty, no teaser label is rendered for the slide.\n",
                     "modifierKind": [
                         148
@@ -54854,7 +54809,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Emits an event when the slide is clicked.</p>\n",
-                    "line": 88,
+                    "line": 82,
                     "rawdescription": "\n\nEmits an event when the slide is clicked.\n",
                     "modifierKind": [
                         148
@@ -54893,7 +54848,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The aria-label for the slide, assigned dynamically by the carousel.</p>\n",
-                    "line": 59,
+                    "line": 58,
                     "rawdescription": "\n\nThe aria-label for the slide, assigned dynamically by the carousel.\n",
                     "modifierKind": [
                         148
@@ -54909,7 +54864,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Optionally captures a banner component projected into the slide.</p>\n",
-                    "line": 93,
+                    "line": 87,
                     "rawdescription": "\n\nOptionally captures a banner component projected into the slide.\n",
                     "modifierKind": [
                         148
@@ -54925,7 +54880,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Computes the slide&#39;s CSS class.</p>\n",
-                    "line": 103,
+                    "line": 97,
                     "rawdescription": "\n\nComputes the slide's CSS class.\n",
                     "modifierKind": [
                         124,
@@ -54942,7 +54897,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 54,
+                    "line": 53,
                     "rawdescription": "\n"
                 },
                 {
@@ -54955,7 +54910,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Internal slide index, assigned dynamically by the carousel.</p>\n",
-                    "line": 98,
+                    "line": 92,
                     "rawdescription": "\n\nInternal slide index, assigned dynamically by the carousel.\n",
                     "modifierKind": [
                         148
@@ -54971,7 +54926,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Indicates whether this slide is currently active/visible.\nSeeded from the <code>isCurrent</code> input but can be updated imperatively by the\nparent carousel as the user navigates between slides.</p>\n",
-                    "line": 77,
+                    "line": 71,
                     "rawdescription": "\n\nIndicates whether this slide is currently active/visible.\nSeeded from the `isCurrent` input but can be updated imperatively by the\nparent carousel as the user navigates between slides.\n",
                     "modifierKind": [
                         148
@@ -54986,7 +54941,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 109,
+                    "line": 103,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles click events on the slide and emits a slideClick event.\n",
@@ -55065,23 +55020,23 @@
             "hostListeners": [],
             "standalone": false,
             "imports": [],
-            "description": "<p>Single slide item for use inside an <code>EclCarouselComponent</code>.\nRenders a <code>role=&quot;tabpanel&quot;</code> element with an <code>aria-roledescription=&quot;slide&quot;</code> and handles\nthe <code>inert</code> attribute so only the active slide is interactive.</p>\n<ul>\n<li>Selector: <code>ecl-carousel-item</code>.</li>\n<li><code>id</code> — optional unique identifier; used by the carousel for navigation buttons.</li>\n<li><code>isCurrent</code> (input alias) — initial active state; kept as a <code>linkedSignal</code> so the parent\ncarousel can update it imperatively as the user navigates.</li>\n<li><code>slideClick</code> — emits <code>EclSlideEvent</code> when the slide is clicked.</li>\n<li><code>index</code> / <code>ariaLabel</code> — writable signals assigned by the parent carousel.</li>\n<li>Project an optional <code>EclBannerComponent</code> inside the slide for banner-style slides.</li>\n</ul>\n",
-            "rawdescription": "\n\nSingle slide item for use inside an `EclCarouselComponent`.\nRenders a `role=\"tabpanel\"` element with an `aria-roledescription=\"slide\"` and handles\nthe `inert` attribute so only the active slide is interactive.\n\n- Selector: `ecl-carousel-item`.\n- `id` — optional unique identifier; used by the carousel for navigation buttons.\n- `isCurrent` (input alias) — initial active state; kept as a `linkedSignal` so the parent\n  carousel can update it imperatively as the user navigates.\n- `slideClick` — emits `EclSlideEvent` when the slide is clicked.\n- `index` / `ariaLabel` — writable signals assigned by the parent carousel.\n- Project an optional `EclBannerComponent` inside the slide for banner-style slides.\n",
+            "description": "<p>Single slide item for use inside an <code>EclCarouselComponent</code>.\nRenders a <code>role=&quot;tabpanel&quot;</code> element with an <code>aria-roledescription=&quot;slide&quot;</code> and handles\nthe <code>inert</code> attribute so only the active slide is interactive.</p>\n<ul>\n<li>Selector: <code>ecl-carousel-item</code>.</li>\n<li><code>isCurrent</code> (input alias) — initial active state; kept as a <code>linkedSignal</code> so the parent\ncarousel can update it imperatively as the user navigates.</li>\n<li><code>slideClick</code> — emits <code>EclSlideEvent</code> when the slide is clicked.</li>\n<li><code>index</code> / <code>ariaLabel</code> — writable signals assigned by the parent carousel.</li>\n<li>Project an optional <code>EclBannerComponent</code> inside the slide for banner-style slides.</li>\n</ul>\n",
+            "rawdescription": "\n\nSingle slide item for use inside an `EclCarouselComponent`.\nRenders a `role=\"tabpanel\"` element with an `aria-roledescription=\"slide\"` and handles\nthe `inert` attribute so only the active slide is interactive.\n\n- Selector: `ecl-carousel-item`.\n- `isCurrent` (input alias) — initial active state; kept as a `linkedSignal` so the parent\n  carousel can update it imperatively as the user navigates.\n- `slideClick` — emits `EclSlideEvent` when the slide is clicked.\n- `index` / `ariaLabel` — writable signals assigned by the parent carousel.\n- Project an optional `EclBannerComponent` inside the slide for banner-style slides.\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    ElementRef,\n    booleanAttribute,\n    computed,\n    forwardRef,\n    inject,\n    input,\n    linkedSignal,\n    output,\n    signal,\n    contentChild,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclBannerComponent } from '@eui/ecl/components/ecl-banner';\nimport { EclSlideEvent } from './events/ecl-slide.event';\nimport { EclCarouselItem } from './models/ecl-carousel-item.model';\n\n/**\n * Single slide item for use inside an `EclCarouselComponent`.\n * Renders a `role=\"tabpanel\"` element with an `aria-roledescription=\"slide\"` and handles\n * the `inert` attribute so only the active slide is interactive.\n *\n * - Selector: `ecl-carousel-item`.\n * - `id` — optional unique identifier; used by the carousel for navigation buttons.\n * - `isCurrent` (input alias) — initial active state; kept as a `linkedSignal` so the parent\n *   carousel can update it imperatively as the user navigates.\n * - `slideClick` — emits `EclSlideEvent` when the slide is clicked.\n * - `index` / `ariaLabel` — writable signals assigned by the parent carousel.\n * - Project an optional `EclBannerComponent` inside the slide for banner-style slides.\n */\n@Component({\n    selector: 'ecl-carousel-item',\n    templateUrl: './ecl-carousel-item.component.html',\n    host: {\n        role: 'tabpanel',\n        '[attr.aria-label]': 'ariaLabel()',\n        '[attr.aria-roledescription]': '\"slide\"',\n        '[attr.inert]': '!isCurrent() || undefined',\n        '[class]': 'cssClasses()',\n        '(click)': 'onSlideClick()',\n    },\n    styles: [\n        `\n            /* TODO: remove by implementing full ECL specs */\n            :host:before {\n                left: 0 !important;\n                display: none;\n            }\n        `,\n    ],\n})\nexport class EclCarouselItemComponent extends ECLBaseDirective implements EclCarouselItem {\n    el = inject(ElementRef);\n\n    /**\n     * The aria-label for the slide, assigned dynamically by the carousel.\n     */\n    readonly ariaLabel = signal<string | undefined>(undefined);\n\n    /**\n     * The unique identifier of the slide.\n     */\n    readonly id = input<string>();\n\n    /**\n     * Input controlling whether this slide starts as the active/visible one.\n     * Automatically coerced to a boolean value.\n     */\n    readonly isCurrentInput = input(false, { alias: 'isCurrent', transform: booleanAttribute });\n\n    /**\n     * Indicates whether this slide is currently active/visible.\n     * Seeded from the `isCurrent` input but can be updated imperatively by the\n     * parent carousel as the user navigates between slides.\n     */\n    readonly isCurrent = linkedSignal(() => this.isCurrentInput());\n\n    /**\n     * Text shown in the carousel teaser (navigation) button for this slide.\n     * Optional; when empty, no teaser label is rendered for the slide.\n     */\n    readonly teaserText = input<string>('');\n\n    /**\n     * Emits an event when the slide is clicked.\n     */\n    readonly slideClick = output<EclSlideEvent>();\n\n    /**\n     * Optionally captures a banner component projected into the slide.\n     */\n    readonly banner = contentChild(forwardRef(() => EclBannerComponent));\n\n    /**\n     * Internal slide index, assigned dynamically by the carousel.\n     */\n    readonly index = signal<number | undefined>(undefined);\n\n    /**\n     * Computes the slide's CSS class.\n     */\n    protected readonly cssClasses = computed<string>(() =>\n        super.getCssClasses('ecl-carousel__slide'));\n\n    /**\n     * Handles click events on the slide and emits a slideClick event.\n     */\n    onSlideClick(): void {\n        this.slideClick.emit(new EclSlideEvent(this));\n    }\n}\n",
+            "sourceCode": "import {\n    Component,\n    ElementRef,\n    booleanAttribute,\n    computed,\n    forwardRef,\n    inject,\n    input,\n    linkedSignal,\n    output,\n    signal,\n    contentChild,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclBannerComponent } from '@eui/ecl/components/ecl-banner';\nimport { EclSlideEvent } from './events/ecl-slide.event';\nimport { EclCarouselItem } from './models/ecl-carousel-item.model';\n\n/**\n * Single slide item for use inside an `EclCarouselComponent`.\n * Renders a `role=\"tabpanel\"` element with an `aria-roledescription=\"slide\"` and handles\n * the `inert` attribute so only the active slide is interactive.\n *\n * - Selector: `ecl-carousel-item`.\n * - `isCurrent` (input alias) — initial active state; kept as a `linkedSignal` so the parent\n *   carousel can update it imperatively as the user navigates.\n * - `slideClick` — emits `EclSlideEvent` when the slide is clicked.\n * - `index` / `ariaLabel` — writable signals assigned by the parent carousel.\n * - Project an optional `EclBannerComponent` inside the slide for banner-style slides.\n */\n@Component({\n    selector: 'ecl-carousel-item',\n    templateUrl: './ecl-carousel-item.component.html',\n    host: {\n        role: 'tabpanel',\n        '[attr.aria-label]': 'ariaLabel()',\n        '[attr.aria-roledescription]': '\"slide\"',\n        '[attr.inert]': '!isCurrent() || undefined',\n        '[class]': 'cssClasses()',\n        '(click)': 'onSlideClick()',\n    },\n    styles: [\n        `\n            /* TODO: remove by implementing full ECL specs */\n            :host:before {\n                left: 0 !important;\n                display: none;\n            }\n        `,\n    ],\n})\nexport class EclCarouselItemComponent extends ECLBaseDirective implements EclCarouselItem {\n    el = inject(ElementRef);\n\n    /**\n     * The aria-label for the slide, assigned dynamically by the carousel.\n     */\n    readonly ariaLabel = signal<string | undefined>(undefined);\n\n    /**\n     * Input controlling whether this slide starts as the active/visible one.\n     * Automatically coerced to a boolean value.\n     */\n    readonly isCurrentInput = input(false, { alias: 'isCurrent', transform: booleanAttribute });\n\n    /**\n     * Indicates whether this slide is currently active/visible.\n     * Seeded from the `isCurrent` input but can be updated imperatively by the\n     * parent carousel as the user navigates between slides.\n     */\n    readonly isCurrent = linkedSignal(() => this.isCurrentInput());\n\n    /**\n     * Text shown in the carousel teaser (navigation) button for this slide.\n     * Optional; when empty, no teaser label is rendered for the slide.\n     */\n    readonly teaserText = input<string>('');\n\n    /**\n     * Emits an event when the slide is clicked.\n     */\n    readonly slideClick = output<EclSlideEvent>();\n\n    /**\n     * Optionally captures a banner component projected into the slide.\n     */\n    readonly banner = contentChild(forwardRef(() => EclBannerComponent));\n\n    /**\n     * Internal slide index, assigned dynamically by the carousel.\n     */\n    readonly index = signal<number | undefined>(undefined);\n\n    /**\n     * Computes the slide's CSS class.\n     */\n    protected readonly cssClasses = computed<string>(() =>\n        super.getCssClasses('ecl-carousel__slide'));\n\n    /**\n     * Handles click events on the slide and emits a slideClick event.\n     */\n    onSlideClick(): void {\n        this.slideClick.emit(new EclSlideEvent(this));\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            /* TODO: remove by implementing full ECL specs */\n            :host:before {\n                left: 0 !important;\n                display: none;\n            }\n        \n",
             "jsdoctags": [
                 {
                     "pos": 445,
-                    "end": 1189,
+                    "end": 1104,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
                     "modifierFlagsCache": 0,
                     "transformFlags": 0,
-                    "comment": "Single slide item for use inside an `EclCarouselComponent`.\nRenders a `role=\"tabpanel\"` element with an `aria-roledescription=\"slide\"` and handles\nthe `inert` attribute so only the active slide is interactive.\n\n- Selector: `ecl-carousel-item`.\n- `id` — optional unique identifier; used by the carousel for navigation buttons.\n- `isCurrent` (input alias) — initial active state; kept as a `linkedSignal` so the parent\n  carousel can update it imperatively as the user navigates.\n- `slideClick` — emits `EclSlideEvent` when the slide is clicked.\n- `index` / `ariaLabel` — writable signals assigned by the parent carousel.\n- Project an optional `EclBannerComponent` inside the slide for banner-style slides."
+                    "comment": "Single slide item for use inside an `EclCarouselComponent`.\nRenders a `role=\"tabpanel\"` element with an `aria-roledescription=\"slide\"` and handles\nthe `inert` attribute so only the active slide is interactive.\n\n- Selector: `ecl-carousel-item`.\n- `isCurrent` (input alias) — initial active state; kept as a `linkedSignal` so the parent\n  carousel can update it imperatively as the user navigates.\n- `slideClick` — emits `EclSlideEvent` when the slide is clicked.\n- `index` / `ariaLabel` — writable signals assigned by the parent carousel.\n- Project an optional `EclBannerComponent` inside the slide for banner-style slides."
                 }
             ],
             "extends": [
@@ -106960,7 +106915,7 @@
                 "name": "ARROW_SIZE",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts",
+                "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts",
                 "coverageIgnore": false,
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -106973,7 +106928,7 @@
                 "name": "ARROW_SIZE",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts",
+                "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts",
                 "coverageIgnore": false,
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -108441,21 +108396,6 @@
             }
         ],
         "groupedVariables": {
-            "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts": [
-                {
-                    "name": "ARROW_SIZE",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts",
-                    "coverageIgnore": false,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "defaultValue": "'0.5rem'",
-                    "rawdescription": "Half the arrow's own width, matching ECL's `arrowSize`.",
-                    "description": "<p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>\n"
-                }
-            ],
             "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts": [
                 {
                     "name": "ARROW_SIZE",
@@ -108484,6 +108424,21 @@
                     "description": "<p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>\n"
                 }
             ],
+            "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts": [
+                {
+                    "name": "ARROW_SIZE",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "defaultValue": "'0.5rem'",
+                    "rawdescription": "Half the arrow's own width, matching ECL's `arrowSize`.",
+                    "description": "<p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>\n"
+                }
+            ],
             "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts": [
                 {
                     "name": "ARROW_SIZE",