@eui/ecl 22.0.0-alpha.37 → 22.0.0-alpha.39

package/docs/json/documentation.json

@@ -8457,13 +8457,13 @@
         },
         {
             "name": "EclSocialMediaFollowItemClickEvent",
-            "id": "class-EclSocialMediaFollowItemClickEvent-af10cb7ce22e295e87d200282d4f934d3d9096be034a20300e19f49c8cea2c18a23ec6525da489ec0de9592f023fbdde2a73cd8a9fc87a270818f5214e0f73b7",
+            "id": "class-EclSocialMediaFollowItemClickEvent-4d681eab78f3c19c56ea7257583c64f115fd7e7d71c472b1e4283066c6a140e35ac096a345d68e7097d14833840a5ade158853c6012a4edad152b38642f45176",
             "file": "packages/ecl/components/ecl-social-media-follow/ecl-social-media-follow-item.component.ts",
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import { booleanAttribute, Component, inject, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EclIconSet, EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclBaseEvent } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EclSocialMediaFollowComponent } from './ecl-social-media-follow.component';\n\nexport class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {}\n\n@Component({\n    selector: 'ecl-social-media-follow-item',\n    templateUrl: './ecl-social-media-follow-item.component.html',\n    imports: [...EUI_ECL_ICON, ...EUI_ECL_LINK, NgTemplateOutlet, RouterLink, RouterLinkWithHref],\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSocialMediaFollowItemComponent extends ECLBaseDirective {\n    readonly isInverted = input<false, unknown>(undefined, { transform: (booleanAttribute) as any });\n    icon = input<string>();\n    iconSet = input<EclIconSet>('social-media');\n    readonly href = input('');\n    readonly routerLink = input('');\n    readonly target = input<string>(undefined);\n    readonly size = input('m');\n    readonly extraAttributes = input<{\n        name: string;\n        value?: string | null;\n    }[]>(undefined);\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__item')].join(' ').trim();\n    }\n\n    readonly itemClick = output<EclSocialMediaFollowItemClickEvent>();\n\n    private parent = inject(EclSocialMediaFollowComponent);\n\n    get isIconOnly(): boolean {\n        return this.parent?.isIconOnly() ?? false;\n    }\n\n    onItemClick(evt: Event): void {\n        this.itemClick.emit(new EclSocialMediaFollowItemClickEvent());\n        if (!this.href() && !this.routerLink()) {\n            evt.preventDefault();\n        }\n    }\n}\n",
+            "sourceCode": "import { booleanAttribute, Component, inject, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EclIconSet, EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclBaseEvent } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EclSocialMediaFollowComponent } from './ecl-social-media-follow.component';\n\nexport class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {}\n\n@Component({\n    selector: 'ecl-social-media-follow-item',\n    templateUrl: './ecl-social-media-follow-item.component.html',\n    imports: [...EUI_ECL_ICON, ...EUI_ECL_LINK, NgTemplateOutlet, RouterLink, RouterLinkWithHref],\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSocialMediaFollowItemComponent extends ECLBaseDirective {\n    readonly isInverted = input(false, { transform: booleanAttribute });\n    icon = input<string>();\n    iconSet = input<EclIconSet>('social-media');\n    readonly href = input('');\n    readonly routerLink = input('');\n    readonly target = input<string>(undefined);\n    readonly size = input('m');\n    readonly extraAttributes = input<{\n        name: string;\n        value?: string | null;\n    }[]>(undefined);\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__item')].join(' ').trim();\n    }\n\n    readonly itemClick = output<EclSocialMediaFollowItemClickEvent>();\n\n    private parent = inject(EclSocialMediaFollowComponent);\n\n    get isIconOnly(): boolean {\n        return this.parent?.isIconOnly() ?? false;\n    }\n\n    onItemClick(evt: Event): void {\n        this.itemClick.emit(new EclSocialMediaFollowItemClickEvent());\n        if (!this.href() && !this.routerLink()) {\n            evt.preventDefault();\n        }\n    }\n}\n",
             "displayName": "EclSocialMediaFollowItemClickEvent",
             "inputsClass": [],
             "outputsClass": [],
@@ -34810,12 +34810,12 @@
         },
         {
             "name": "EclSocialMediaFollowLinkDirective",
-            "id": "directive-EclSocialMediaFollowLinkDirective-d8c9f651bdd52eecd2cbfc23e4b5ce6c61940ef0329259ab411ac3feeb0a4f9c2cf4a79a54c2356205d45776ca1d354fc528befa462b2bd1c181d6580054bcd6",
+            "id": "directive-EclSocialMediaFollowLinkDirective-6cfdb821045849c86b69d08070f5778754edd43f0c1b171cb5d80921ebcf6abe3d4b98e460b336c745d3df87867ff59bbf393e026100ccf039e75230ff98537b",
             "file": "packages/ecl/components/ecl-social-media-follow/ecl-social-media-follow-link.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { Directive, HostBinding, AfterContentInit, contentChild } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\n\n@Directive({\n    selector: '[eclSocialMediaFollowLink]',\n})\nexport class EclSocialMediaFollowLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    readonly eclIcon = contentChild(EclIconComponent);\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__link')].join(' ').trim();\n    }\n\n    ngAfterContentInit(): void {\n        if (this.eclIcon()) {\n            setTimeout(() => (this.eclIcon().baseDirective.class = [this.eclIcon().baseDirective.class, 'ecl-social-media-follow__icon'].join(' ')));\n        }\n    }\n}\n",
+            "sourceCode": "import { Directive, contentChild, effect } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\n\n@Directive({\n    selector: '[eclSocialMediaFollowLink]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSocialMediaFollowLinkDirective extends ECLBaseDirective {\n    readonly eclIcon = contentChild(EclIconComponent);\n\n    constructor() {\n        super();\n        // Add the icon modifier class to a projected icon reactively.\n        effect(() => {\n            this.eclIcon()?.addExtraClass('ecl-social-media-follow__icon');\n        });\n    }\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__link')].join(' ').trim();\n    }\n}\n",
             "selector": "[eclSocialMediaFollowLink]",
             "providers": [],
             "hostDirectives": [],
@@ -34868,20 +34868,7 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 12,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [
                 {
@@ -34894,7 +34881,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 9,
+                    "line": 12,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -34902,19 +34889,6 @@
                 }
             ],
             "methodsClass": [
-                {
-                    "name": "ngAfterContentInit",
-                    "coverageIgnore": false,
-                    "args": [],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 16,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": ""
-                },
                 {
                     "name": "getCssClasses",
                     "coverageIgnore": false,
@@ -34958,9 +34932,15 @@
             "extends": [
                 "ECLBaseDirective"
             ],
-            "implements": [
-                "AfterContentInit"
-            ],
+            "constructorObj": {
+                "name": "constructor",
+                "description": "",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "args": [],
+                "line": 12,
+                "rawdescription": "\n"
+            },
             "accessors": {
                 "cssClasses": {
                     "name": "cssClasses",
@@ -34968,7 +34948,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 12,
+                        "line": 22,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -34980,10 +34960,6 @@
                     {
                         "name": "ECLBaseDirective",
                         "type": "directive"
-                    },
-                    {
-                        "name": "AfterContentInit",
-                        "type": "interface"
                     }
                 ]
             }
@@ -82085,7 +82061,7 @@
         },
         {
             "name": "EclSloganTickerComponent",
-            "id": "component-EclSloganTickerComponent-71c9cf260ca7eb545e4ed628231a7068c9960124905e07b41fafcf6a1fa5408588c9164aa18bec9a4e5e093e9e387df33455d7e8dc5cd3daf78e84a7d7f94984",
+            "id": "component-EclSloganTickerComponent-2eb62f84b1dcee763ecf77029dd0655bc6f9bd2b933146e247238ffaefe7f1f629ea2aa8e70a39bf43717642639cdd9796ee05cdafc391bca43415212d0ab8d7",
             "file": "packages/ecl/components/ecl-slogan-ticker/ecl-slogan-ticker.component.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -82114,7 +82090,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Aria-label for the ticker region.</p>\n",
-                    "line": 53,
+                    "line": 98,
                     "rawdescription": "\nAria-label for the ticker region.",
                     "required": false
                 },
@@ -82174,7 +82150,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Embla carousel options.</p>\n",
-                    "line": 56,
+                    "line": 101,
                     "subProperties": [
                         {
                             "name": "loop",
@@ -82220,7 +82196,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Embla plugins array (auto-scroll).</p>\n",
-                    "line": 64,
+                    "line": 109,
                     "rawdescription": "\nEmbla plugins array (auto-scroll).",
                     "modifierKind": [
                         124
@@ -82236,7 +82212,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 66,
+                    "line": 111,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -82252,7 +82228,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether the user explicitly paused.</p>\n",
-                    "line": 76,
+                    "line": 121,
                     "rawdescription": "\nWhether the user explicitly paused.",
                     "modifierKind": [
                         124
@@ -82268,7 +82244,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether auto-scroll is currently playing.</p>\n",
-                    "line": 73,
+                    "line": 118,
                     "rawdescription": "\nWhether auto-scroll is currently playing.",
                     "modifierKind": [
                         124
@@ -82284,7 +82260,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 68,
+                    "line": 113,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -82300,7 +82276,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 67,
+                    "line": 112,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -82316,7 +82292,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether play/pause controls should be visible.</p>\n",
-                    "line": 79,
+                    "line": 124,
                     "rawdescription": "\nWhether play/pause controls should be visible.",
                     "modifierKind": [
                         124
@@ -82332,7 +82308,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Subscribed Embla events.</p>\n",
-                    "line": 89,
+                    "line": 134,
                     "rawdescription": "\nSubscribed Embla events.",
                     "modifierKind": [
                         124
@@ -82348,7 +82324,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Array of slide texts used to render the track.\nContains the original slides plus clones for seamless looping.\nEach item has <code>text</code> and <code>isClone</code> (for aria-hidden on duplicates).</p>\n",
-                    "line": 86,
+                    "line": 131,
                     "rawdescription": "\n\nArray of slide texts used to render the track.\nContains the original slides plus clones for seamless looping.\nEach item has `text` and `isClone` (for aria-hidden on duplicates).\n",
                     "modifierKind": [
                         124
@@ -82364,7 +82340,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 69,
+                    "line": 114,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -82379,7 +82355,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 126,
+                    "line": 177,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -82392,7 +82368,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 141,
+                    "line": 192,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -82414,7 +82390,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 152,
+                    "line": 203,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nCalled by the emblaChange event from the directive.",
@@ -82443,7 +82419,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 175,
+                    "line": 226,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nPause the auto-scroll (pause button click).",
@@ -82459,7 +82435,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 168,
+                    "line": 219,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nStart the auto-scroll (play button click).",
@@ -82526,23 +82502,23 @@
                     "type": "directive"
                 }
             ],
-            "description": "<p>ECL Slogan Ticker component – renders a continuously auto-scrolling horizontal\nticker of slogan items. Supports play/pause controls, RTL layouts, and pauses\nwhen off-screen via IntersectionObserver.</p>\n<p>Uses Embla Carousel (via embla-carousel-angular) with the auto-scroll plugin\nto match the ECL vanilla implementation.</p>\n<p>The component clones projected slides internally to ensure the track is wide\nenough for seamless infinite scrolling (matching the vanilla ECL approach).</p>\n",
-            "rawdescription": "\n\nECL Slogan Ticker component – renders a continuously auto-scrolling horizontal\nticker of slogan items. Supports play/pause controls, RTL layouts, and pauses\nwhen off-screen via IntersectionObserver.\n\nUses Embla Carousel (via embla-carousel-angular) with the auto-scroll plugin\nto match the ECL vanilla implementation.\n\nThe component clones projected slides internally to ensure the track is wide\nenough for seamless infinite scrolling (matching the vanilla ECL approach).\n",
+            "description": "<p>ECL Slogan Ticker component – renders a continuously auto-scrolling horizontal\nticker of slogan items. Supports play/pause controls, RTL layouts, and pauses\nwhen off-screen via IntersectionObserver.</p>\n<p>Uses Embla Carousel (via embla-carousel-angular) with the auto-scroll plugin\nto match the ECL vanilla implementation.</p>\n<h2>Why two lists (hidden source + generated track)</h2>\n<p>The consumer provides a plain, semantic list:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;ecl-slogan-ticker&gt;\n  &lt;ul eclSloganTickerList&gt;\n    &lt;li eclSloganTickerSlide&gt;SLOGAN ONE&lt;/li&gt;\n    &lt;li eclSloganTickerSlide&gt;SLOGAN TWO&lt;/li&gt;\n  &lt;/ul&gt;\n&lt;/ecl-slogan-ticker&gt;</code></pre></div><p>This authored <code>&lt;ul eclSloganTickerList&gt;</code> is NOT the list you see scrolling.\n<code>EclSloganTickerListDirective</code> hides it with <code>display: none</code>, and it stays in\nthe light DOM as the single accessible source of truth. The component reads\nthe slide texts out of it via a <code>contentChildren</code> query (see <code>slides</code>) and\nbuilds a SEPARATE, component-owned <code>&lt;ul class=&quot;ecl-slogan-ticker__track&quot;&gt;</code>\nfrom the <code>trackSlides</code> signal. That generated track is what Embla animates.</p>\n<p>Reasons for the split (rather than just scrolling the authored <code>&lt;ul&gt;</code>):</p>\n<ul>\n<li>Seamless infinite loop needs more content than the author gives. The track\nmust be several times wider than the viewport or the loop visibly jumps, so\n<code>ensureEnoughContent()</code> measures the originals and appends CLONE sets until\nthe total width reaches <code>CLONE_MULTIPLIER</code> × the container width.</li>\n<li>Clones must not pollute accessibility. The authored list stays the one\naccessible list; every generated clone is rendered with <code>aria-hidden</code> so a\nscreen reader announces each slogan once, not once per clone.</li>\n<li>You cannot meaningfully grow the authored <code>&lt;ul&gt;</code>. Its <code>&lt;li&gt;</code> children are\nAngular-projected content that Angular owns; imperatively appending clone\n<code>&lt;li&gt;</code> nodes into it fights change detection. Building our own track signal\nand letting <code>@for</code> render it is clean and safe. <code>&lt;li&gt;</code> is also only valid\ninside a list element, so the <code>&lt;ul eclSloganTickerList&gt;</code> wrapper keeps the\nconsumer&#39;s authored markup valid and self-contained.</li>\n</ul>\n<p>This mirrors the vanilla ECL slogan ticker (hidden source list + measured,\ncloned, auto-scrolling track).</p>\n<h2>Testing note</h2>\n<p>The visible track is only built after a real width measurement\n(<code>offsetWidth</code>). Under jsdom every element reports a width of 0, so\n<code>ensureEnoughContent()</code> bails early and the generated track stays empty. Unit\ntests should therefore assert slide-driven behavior through its observable\neffects (e.g. the play/pause controls appearing) rather than through the\ngenerated track DOM.</p>\n",
+            "rawdescription": "\n\nECL Slogan Ticker component – renders a continuously auto-scrolling horizontal\nticker of slogan items. Supports play/pause controls, RTL layouts, and pauses\nwhen off-screen via IntersectionObserver.\n\nUses Embla Carousel (via embla-carousel-angular) with the auto-scroll plugin\nto match the ECL vanilla implementation.\n\n## Why two lists (hidden source + generated track)\n\nThe consumer provides a plain, semantic list:\n\n```html\n<ecl-slogan-ticker>\n  <ul eclSloganTickerList>\n    <li eclSloganTickerSlide>SLOGAN ONE</li>\n    <li eclSloganTickerSlide>SLOGAN TWO</li>\n  </ul>\n</ecl-slogan-ticker>\n```\n\nThis authored `<ul eclSloganTickerList>` is NOT the list you see scrolling.\n`EclSloganTickerListDirective` hides it with `display: none`, and it stays in\nthe light DOM as the single accessible source of truth. The component reads\nthe slide texts out of it via a `contentChildren` query (see `slides`) and\nbuilds a SEPARATE, component-owned `<ul class=\"ecl-slogan-ticker__track\">`\nfrom the `trackSlides` signal. That generated track is what Embla animates.\n\nReasons for the split (rather than just scrolling the authored `<ul>`):\n\n- Seamless infinite loop needs more content than the author gives. The track\n  must be several times wider than the viewport or the loop visibly jumps, so\n  `ensureEnoughContent()` measures the originals and appends CLONE sets until\n  the total width reaches `CLONE_MULTIPLIER` × the container width.\n- Clones must not pollute accessibility. The authored list stays the one\n  accessible list; every generated clone is rendered with `aria-hidden` so a\n  screen reader announces each slogan once, not once per clone.\n- You cannot meaningfully grow the authored `<ul>`. Its `<li>` children are\n  Angular-projected content that Angular owns; imperatively appending clone\n  `<li>` nodes into it fights change detection. Building our own track signal\n  and letting `@for` render it is clean and safe. `<li>` is also only valid\n  inside a list element, so the `<ul eclSloganTickerList>` wrapper keeps the\n  consumer's authored markup valid and self-contained.\n\nThis mirrors the vanilla ECL slogan ticker (hidden source list + measured,\ncloned, auto-scrolling track).\n\n## Testing note\n\nThe visible track is only built after a real width measurement\n(`offsetWidth`). Under jsdom every element reports a width of 0, so\n`ensureEnoughContent()` bails early and the generated track stays empty. Unit\ntests should therefore assert slide-driven behavior through its observable\neffects (e.g. the play/pause controls appearing) rather than through the\ngenerated track DOM.\n",
             "type": "component",
-            "sourceCode": "import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    contentChildren,\n    effect,\n    ElementRef,\n    inject,\n    input,\n    OnDestroy,\n    PLATFORM_ID,\n    signal,\n    viewChild,\n} from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective, EclRtlService } from '@eui/ecl/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { EmblaCarouselDirective } from 'embla-carousel-angular';\nimport { EmblaCarouselType, EmblaEventType, EmblaPluginType } from 'embla-carousel';\nimport AutoScroll from 'embla-carousel-auto-scroll';\nimport { Subject, takeUntil } from 'rxjs';\nimport { EclSloganTickerSlideDirective } from './ecl-slogan-ticker-slide.directive';\n\n/**\n * ECL Slogan Ticker component – renders a continuously auto-scrolling horizontal\n * ticker of slogan items. Supports play/pause controls, RTL layouts, and pauses\n * when off-screen via IntersectionObserver.\n *\n * Uses Embla Carousel (via embla-carousel-angular) with the auto-scroll plugin\n * to match the ECL vanilla implementation.\n *\n * The component clones projected slides internally to ensure the track is wide\n * enough for seamless infinite scrolling (matching the vanilla ECL approach).\n */\n@Component({\n    selector: 'ecl-slogan-ticker',\n    templateUrl: './ecl-slogan-ticker.component.html',\n    host: {\n        '[class]': 'cssClasses',\n    },\n    imports: [\n        TranslatePipe,\n        ...EUI_ECL_ICON,\n        EmblaCarouselDirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EclSloganTickerComponent extends ECLBaseDirective implements AfterViewInit, OnDestroy {\n\n    /** Aria-label for the ticker region. */\n    eclAriaLabel = input<string>('Slogan ticker');\n\n    /** Embla carousel options. */\n    protected emblaOptions: { loop: boolean; align: 'start'; dragFree: boolean; direction: 'ltr' | 'rtl' } = {\n        loop: true,\n        align: 'start',\n        dragFree: true,\n        direction: 'ltr',\n    };\n\n    /** Embla plugins array (auto-scroll). */\n    protected emblaPlugins: EmblaPluginType[] = [];\n\n    protected emblaRef = viewChild(EmblaCarouselDirective);\n    protected playButton = viewChild<ElementRef>('playButton');\n    protected pauseButton = viewChild<ElementRef>('pauseButton');\n    protected viewportElement = viewChild<ElementRef>('viewport');\n    private trackElement = viewChild<ElementRef>('track');\n\n    /** Whether auto-scroll is currently playing. */\n    protected isPlaying = signal(false);\n\n    /** Whether the user explicitly paused. */\n    protected isPaused = signal(false);\n\n    /** Whether play/pause controls should be visible. */\n    protected showControls = signal(false);\n\n    /**\n     * Array of slide texts used to render the track.\n     * Contains the original slides plus clones for seamless looping.\n     * Each item has `text` and `isClone` (for aria-hidden on duplicates).\n     */\n    protected trackSlides = signal<{ text: string; isClone: boolean }[]>([]);\n\n    /** Subscribed Embla events. */\n    protected subscribeToEvents: EmblaEventType[] = ['init', 'reInit'];\n\n    private slides = contentChildren(EclSloganTickerSlideDirective, { descendants: true });\n    private cd = inject(ChangeDetectorRef);\n    private elementRef = inject(ElementRef);\n    private eclRtlService = inject(EclRtlService);\n    private platformId = inject(PLATFORM_ID);\n    private destroy$ = new Subject<void>();\n    private emblaApi: EmblaCarouselType | undefined;\n    private visibilityObserver: IntersectionObserver | null = null;\n    private readonly autoplay = true;\n    private readonly autoScrollSpeed = 0.9;\n    private readonly CLONE_MULTIPLIER = 3;\n\n    protected get cssClasses(): string {\n        return [super.getCssClasses('ecl-slogan-ticker')].join(' ').trim();\n    }\n\n    constructor() {\n        super();\n\n        // React to slides changes\n        effect(() => {\n            this.showControls.set(this.slides().length >= 1);\n        });\n\n        // React to RTL changes\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((isRtl) => {\n            const direction = isRtl ? 'rtl' : 'ltr';\n            if (this.emblaOptions.direction !== direction) {\n                this.emblaOptions = { ...this.emblaOptions, direction };\n                this.buildPlugins(isRtl);\n                this.cd.detectChanges();\n            }\n        });\n    }\n\n    ngAfterViewInit(): void {\n        if (!isPlatformBrowser(this.platformId)) {\n            return;\n        }\n\n        this.buildPlugins();\n        this.cd.detectChanges();\n\n        setTimeout(() => {\n            this.ensureEnoughContent();\n            this.initEmbla();\n            this.setupVisibilityObserver();\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n\n        if (this.visibilityObserver) {\n            this.visibilityObserver.disconnect();\n            this.visibilityObserver = null;\n        }\n    }\n\n    /** Called by the emblaChange event from the directive. */\n    protected onEmblaChange(eventName: string): void {\n        if (!this.emblaApi) {\n            this.emblaApi = this.emblaRef()?.emblaApi;\n        }\n        if (!this.emblaApi) {\n            return;\n        }\n\n        if (eventName === 'init' || eventName === 'reInit') {\n            if (this.autoplay && !this.isPaused()) {\n                this.startAutoScroll();\n            }\n        }\n    }\n\n    /** Start the auto-scroll (play button click). */\n    protected onPlayClick(): void {\n        this.isPaused.set(false);\n        this.startAutoScroll();\n        this.pauseButton()?.nativeElement?.focus();\n    }\n\n    /** Pause the auto-scroll (pause button click). */\n    protected onPauseClick(): void {\n        this.isPaused.set(true);\n        this.stopAutoScroll();\n        this.playButton()?.nativeElement?.focus();\n    }\n\n    /** Start auto-scroll and update state. */\n    private startAutoScroll(): void {\n        this.isPlaying.set(true);\n        const autoScroll = this.emblaApi?.plugins()?.autoScroll;\n        (autoScroll as any)?.play();\n        this.cd.detectChanges();\n    }\n\n    /** Stop auto-scroll and update state. */\n    private stopAutoScroll(): void {\n        this.isPlaying.set(false);\n        const autoScroll = this.emblaApi?.plugins()?.autoScroll;\n        (autoScroll as any)?.stop();\n        this.cd.detectChanges();\n    }\n\n    /**\n     * Clone slides until the track width exceeds 3× container width.\n     * Mirrors the vanilla ECL `ensureEnoughContent()` logic.\n     */\n    private ensureEnoughContent(): void {\n        const slides = this.slides();\n        if (!slides || slides.length === 0) {\n            this.trackSlides.set([]);\n            return;\n        }\n\n        const containerWidth = this.elementRef.nativeElement.offsetWidth;\n        if (containerWidth === 0) {\n            return;\n        }\n\n        const originals = slides.map((slide) => ({\n            text: slide.el.nativeElement.textContent?.trim() || '',\n            isClone: false,\n        }));\n\n        // Render originals first to measure individual slide widths\n        this.trackSlides.set(originals);\n        this.cd.detectChanges();\n\n        const track = this.trackElement()?.nativeElement;\n        if (!track) {\n            return;\n        }\n\n        // Measure each rendered slide's width\n        const renderedSlides = track.querySelectorAll('.ecl-slogan-ticker__slide');\n        const slideWidths: number[] = [];\n        let totalWidth = 0;\n        renderedSlides.forEach((el: Element) => {\n            const width = (el as HTMLElement).offsetWidth;\n            slideWidths.push(width);\n            totalWidth += width;\n        });\n\n        if (totalWidth === 0) {\n            return;\n        }\n\n        // Add clones in full sets until total width >= required width\n        const requiredWidth = containerWidth * this.CLONE_MULTIPLIER;\n        const allSlides = [...originals];\n\n        while (totalWidth < requiredWidth) {\n            for (let i = 0; i < originals.length; i++) {\n                allSlides.push({ ...originals[i], isClone: true });\n                totalWidth += slideWidths[i];\n            }\n        }\n\n        this.trackSlides.set(allSlides);\n        this.cd.detectChanges();\n    }\n\n    /** Build the auto-scroll plugin with current settings. */\n    private buildPlugins(isRtl = this.emblaOptions.direction === 'rtl'): void {\n        this.emblaPlugins = [\n            AutoScroll({\n                speed: this.autoScrollSpeed,\n                startDelay: 0,\n                stopOnInteraction: false,\n                playOnInit: this.autoplay,\n                direction: isRtl ? 'backward' : 'forward',\n            }) as unknown as EmblaPluginType,\n        ];\n    }\n\n    /** Initialize Embla API reference. */\n    private initEmbla(): void {\n        const embla = this.emblaRef();\n        if (!embla) {\n            return;\n        }\n\n        this.emblaApi = embla.emblaApi;\n\n        if (!this.emblaApi) {\n            return;\n        }\n\n        if (this.autoplay && !this.isPaused()) {\n            this.startAutoScroll();\n        }\n\n        this.cd.detectChanges();\n    }\n\n    /**\n     * Observe visibility to pause auto-scroll when the component is off-screen\n     * and resume when it comes back into view.\n     */\n    private setupVisibilityObserver(): void {\n        this.visibilityObserver = new IntersectionObserver(\n            ([entry]) => {\n                if (entry.isIntersecting) {\n                    if (!this.isPlaying() && !this.isPaused()) {\n                        this.startAutoScroll();\n                    }\n                } else if (this.isPlaying()) {\n                    this.stopAutoScroll();\n                }\n            },\n            { threshold: 0 },\n        );\n\n        this.visibilityObserver.observe(this.elementRef.nativeElement);\n    }\n}\n",
+            "sourceCode": "import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    contentChildren,\n    effect,\n    ElementRef,\n    inject,\n    input,\n    OnDestroy,\n    PLATFORM_ID,\n    signal,\n    viewChild,\n} from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective, EclRtlService } from '@eui/ecl/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { EmblaCarouselDirective } from 'embla-carousel-angular';\nimport { EmblaCarouselType, EmblaEventType, EmblaPluginType } from 'embla-carousel';\nimport AutoScroll from 'embla-carousel-auto-scroll';\nimport { Subject, takeUntil } from 'rxjs';\nimport { EclSloganTickerSlideDirective } from './ecl-slogan-ticker-slide.directive';\n\n/**\n * ECL Slogan Ticker component – renders a continuously auto-scrolling horizontal\n * ticker of slogan items. Supports play/pause controls, RTL layouts, and pauses\n * when off-screen via IntersectionObserver.\n *\n * Uses Embla Carousel (via embla-carousel-angular) with the auto-scroll plugin\n * to match the ECL vanilla implementation.\n *\n * ## Why two lists (hidden source + generated track)\n *\n * The consumer provides a plain, semantic list:\n *\n * ```html\n * <ecl-slogan-ticker>\n *   <ul eclSloganTickerList>\n *     <li eclSloganTickerSlide>SLOGAN ONE</li>\n *     <li eclSloganTickerSlide>SLOGAN TWO</li>\n *   </ul>\n * </ecl-slogan-ticker>\n * ```\n *\n * This authored `<ul eclSloganTickerList>` is NOT the list you see scrolling.\n * `EclSloganTickerListDirective` hides it with `display: none`, and it stays in\n * the light DOM as the single accessible source of truth. The component reads\n * the slide texts out of it via a `contentChildren` query (see `slides`) and\n * builds a SEPARATE, component-owned `<ul class=\"ecl-slogan-ticker__track\">`\n * from the `trackSlides` signal. That generated track is what Embla animates.\n *\n * Reasons for the split (rather than just scrolling the authored `<ul>`):\n *\n * - Seamless infinite loop needs more content than the author gives. The track\n *   must be several times wider than the viewport or the loop visibly jumps, so\n *   `ensureEnoughContent()` measures the originals and appends CLONE sets until\n *   the total width reaches `CLONE_MULTIPLIER` × the container width.\n * - Clones must not pollute accessibility. The authored list stays the one\n *   accessible list; every generated clone is rendered with `aria-hidden` so a\n *   screen reader announces each slogan once, not once per clone.\n * - You cannot meaningfully grow the authored `<ul>`. Its `<li>` children are\n *   Angular-projected content that Angular owns; imperatively appending clone\n *   `<li>` nodes into it fights change detection. Building our own track signal\n *   and letting `@for` render it is clean and safe. `<li>` is also only valid\n *   inside a list element, so the `<ul eclSloganTickerList>` wrapper keeps the\n *   consumer's authored markup valid and self-contained.\n *\n * This mirrors the vanilla ECL slogan ticker (hidden source list + measured,\n * cloned, auto-scrolling track).\n *\n * ## Testing note\n *\n * The visible track is only built after a real width measurement\n * (`offsetWidth`). Under jsdom every element reports a width of 0, so\n * `ensureEnoughContent()` bails early and the generated track stays empty. Unit\n * tests should therefore assert slide-driven behavior through its observable\n * effects (e.g. the play/pause controls appearing) rather than through the\n * generated track DOM.\n */\n@Component({\n    selector: 'ecl-slogan-ticker',\n    templateUrl: './ecl-slogan-ticker.component.html',\n    host: {\n        '[class]': 'cssClasses',\n    },\n    imports: [\n        TranslatePipe,\n        ...EUI_ECL_ICON,\n        EmblaCarouselDirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EclSloganTickerComponent extends ECLBaseDirective implements AfterViewInit, OnDestroy {\n\n    /** Aria-label for the ticker region. */\n    eclAriaLabel = input<string>('Slogan ticker');\n\n    /** Embla carousel options. */\n    protected emblaOptions: { loop: boolean; align: 'start'; dragFree: boolean; direction: 'ltr' | 'rtl' } = {\n        loop: true,\n        align: 'start',\n        dragFree: true,\n        direction: 'ltr',\n    };\n\n    /** Embla plugins array (auto-scroll). */\n    protected emblaPlugins: EmblaPluginType[] = [];\n\n    protected emblaRef = viewChild(EmblaCarouselDirective);\n    protected playButton = viewChild<ElementRef>('playButton');\n    protected pauseButton = viewChild<ElementRef>('pauseButton');\n    protected viewportElement = viewChild<ElementRef>('viewport');\n    private trackElement = viewChild<ElementRef>('track');\n\n    /** Whether auto-scroll is currently playing. */\n    protected isPlaying = signal(false);\n\n    /** Whether the user explicitly paused. */\n    protected isPaused = signal(false);\n\n    /** Whether play/pause controls should be visible. */\n    protected showControls = signal(false);\n\n    /**\n     * Array of slide texts used to render the track.\n     * Contains the original slides plus clones for seamless looping.\n     * Each item has `text` and `isClone` (for aria-hidden on duplicates).\n     */\n    protected trackSlides = signal<{ text: string; isClone: boolean }[]>([]);\n\n    /** Subscribed Embla events. */\n    protected subscribeToEvents: EmblaEventType[] = ['init', 'reInit'];\n\n    /**\n     * Slides read from the consumer's hidden `<ul eclSloganTickerList>` source\n     * list. This is the DATA source only; the visible track is a separate,\n     * component-generated list built from `trackSlides`. See the class-level\n     * doc for why the authored list and the rendered track are kept separate.\n     */\n    private slides = contentChildren(EclSloganTickerSlideDirective, { descendants: true });\n    private cd = inject(ChangeDetectorRef);\n    private elementRef = inject(ElementRef);\n    private eclRtlService = inject(EclRtlService);\n    private platformId = inject(PLATFORM_ID);\n    private destroy$ = new Subject<void>();\n    private emblaApi: EmblaCarouselType | undefined;\n    private visibilityObserver: IntersectionObserver | null = null;\n    private readonly autoplay = true;\n    private readonly autoScrollSpeed = 0.9;\n    private readonly CLONE_MULTIPLIER = 3;\n\n    protected get cssClasses(): string {\n        return [super.getCssClasses('ecl-slogan-ticker')].join(' ').trim();\n    }\n\n    constructor() {\n        super();\n\n        // React to slides changes\n        effect(() => {\n            this.showControls.set(this.slides().length >= 1);\n        });\n\n        // React to RTL changes\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((isRtl) => {\n            const direction = isRtl ? 'rtl' : 'ltr';\n            if (this.emblaOptions.direction !== direction) {\n                this.emblaOptions = { ...this.emblaOptions, direction };\n                this.buildPlugins(isRtl);\n                this.cd.detectChanges();\n            }\n        });\n    }\n\n    ngAfterViewInit(): void {\n        if (!isPlatformBrowser(this.platformId)) {\n            return;\n        }\n\n        this.buildPlugins();\n        this.cd.detectChanges();\n\n        setTimeout(() => {\n            this.ensureEnoughContent();\n            this.initEmbla();\n            this.setupVisibilityObserver();\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n\n        if (this.visibilityObserver) {\n            this.visibilityObserver.disconnect();\n            this.visibilityObserver = null;\n        }\n    }\n\n    /** Called by the emblaChange event from the directive. */\n    protected onEmblaChange(eventName: string): void {\n        if (!this.emblaApi) {\n            this.emblaApi = this.emblaRef()?.emblaApi;\n        }\n        if (!this.emblaApi) {\n            return;\n        }\n\n        if (eventName === 'init' || eventName === 'reInit') {\n            if (this.autoplay && !this.isPaused()) {\n                this.startAutoScroll();\n            }\n        }\n    }\n\n    /** Start the auto-scroll (play button click). */\n    protected onPlayClick(): void {\n        this.isPaused.set(false);\n        this.startAutoScroll();\n        this.pauseButton()?.nativeElement?.focus();\n    }\n\n    /** Pause the auto-scroll (pause button click). */\n    protected onPauseClick(): void {\n        this.isPaused.set(true);\n        this.stopAutoScroll();\n        this.playButton()?.nativeElement?.focus();\n    }\n\n    /** Start auto-scroll and update state. */\n    private startAutoScroll(): void {\n        this.isPlaying.set(true);\n        const autoScroll = this.emblaApi?.plugins()?.autoScroll;\n        (autoScroll as any)?.play();\n        this.cd.detectChanges();\n    }\n\n    /** Stop auto-scroll and update state. */\n    private stopAutoScroll(): void {\n        this.isPlaying.set(false);\n        const autoScroll = this.emblaApi?.plugins()?.autoScroll;\n        (autoScroll as any)?.stop();\n        this.cd.detectChanges();\n    }\n\n    /**\n     * Clone slides until the track width exceeds 3× container width.\n     * Mirrors the vanilla ECL `ensureEnoughContent()` logic.\n     */\n    private ensureEnoughContent(): void {\n        const slides = this.slides();\n        if (!slides || slides.length === 0) {\n            this.trackSlides.set([]);\n            return;\n        }\n\n        const containerWidth = this.elementRef.nativeElement.offsetWidth;\n        if (containerWidth === 0) {\n            return;\n        }\n\n        const originals = slides.map((slide) => ({\n            text: slide.el.nativeElement.textContent?.trim() || '',\n            isClone: false,\n        }));\n\n        // Render originals first to measure individual slide widths\n        this.trackSlides.set(originals);\n        this.cd.detectChanges();\n\n        const track = this.trackElement()?.nativeElement;\n        if (!track) {\n            return;\n        }\n\n        // Measure each rendered slide's width\n        const renderedSlides = track.querySelectorAll('.ecl-slogan-ticker__slide');\n        const slideWidths: number[] = [];\n        let totalWidth = 0;\n        renderedSlides.forEach((el: Element) => {\n            const width = (el as HTMLElement).offsetWidth;\n            slideWidths.push(width);\n            totalWidth += width;\n        });\n\n        if (totalWidth === 0) {\n            return;\n        }\n\n        // Add clones in full sets until total width >= required width\n        const requiredWidth = containerWidth * this.CLONE_MULTIPLIER;\n        const allSlides = [...originals];\n\n        while (totalWidth < requiredWidth) {\n            for (let i = 0; i < originals.length; i++) {\n                allSlides.push({ ...originals[i], isClone: true });\n                totalWidth += slideWidths[i];\n            }\n        }\n\n        this.trackSlides.set(allSlides);\n        this.cd.detectChanges();\n    }\n\n    /** Build the auto-scroll plugin with current settings. */\n    private buildPlugins(isRtl = this.emblaOptions.direction === 'rtl'): void {\n        this.emblaPlugins = [\n            AutoScroll({\n                speed: this.autoScrollSpeed,\n                startDelay: 0,\n                stopOnInteraction: false,\n                playOnInit: this.autoplay,\n                direction: isRtl ? 'backward' : 'forward',\n            }) as unknown as EmblaPluginType,\n        ];\n    }\n\n    /** Initialize Embla API reference. */\n    private initEmbla(): void {\n        const embla = this.emblaRef();\n        if (!embla) {\n            return;\n        }\n\n        this.emblaApi = embla.emblaApi;\n\n        if (!this.emblaApi) {\n            return;\n        }\n\n        if (this.autoplay && !this.isPaused()) {\n            this.startAutoScroll();\n        }\n\n        this.cd.detectChanges();\n    }\n\n    /**\n     * Observe visibility to pause auto-scroll when the component is off-screen\n     * and resume when it comes back into view.\n     */\n    private setupVisibilityObserver(): void {\n        this.visibilityObserver = new IntersectionObserver(\n            ([entry]) => {\n                if (entry.isIntersecting) {\n                    if (!this.isPlaying() && !this.isPaused()) {\n                        this.startAutoScroll();\n                    }\n                } else if (this.isPlaying()) {\n                    this.stopAutoScroll();\n                }\n            },\n            { threshold: 0 },\n        );\n\n        this.visibilityObserver.observe(this.elementRef.nativeElement);\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
                     "pos": 814,
-                    "end": 1318,
+                    "end": 3556,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
                     "modifierFlagsCache": 0,
                     "transformFlags": 0,
-                    "comment": "ECL Slogan Ticker component – renders a continuously auto-scrolling horizontal\nticker of slogan items. Supports play/pause controls, RTL layouts, and pauses\nwhen off-screen via IntersectionObserver.\n\nUses Embla Carousel (via embla-carousel-angular) with the auto-scroll plugin\nto match the ECL vanilla implementation.\n\nThe component clones projected slides internally to ensure the track is wide\nenough for seamless infinite scrolling (matching the vanilla ECL approach)."
+                    "comment": "ECL Slogan Ticker component – renders a continuously auto-scrolling horizontal\nticker of slogan items. Supports play/pause controls, RTL layouts, and pauses\nwhen off-screen via IntersectionObserver.\n\nUses Embla Carousel (via embla-carousel-angular) with the auto-scroll plugin\nto match the ECL vanilla implementation.\n\n## Why two lists (hidden source + generated track)\n\nThe consumer provides a plain, semantic list:\n\n```html\n<ecl-slogan-ticker>\n  <ul eclSloganTickerList>\n    <li eclSloganTickerSlide>SLOGAN ONE</li>\n    <li eclSloganTickerSlide>SLOGAN TWO</li>\n  </ul>\n</ecl-slogan-ticker>\n```\n\nThis authored `<ul eclSloganTickerList>` is NOT the list you see scrolling.\n`EclSloganTickerListDirective` hides it with `display: none`, and it stays in\nthe light DOM as the single accessible source of truth. The component reads\nthe slide texts out of it via a `contentChildren` query (see `slides`) and\nbuilds a SEPARATE, component-owned `<ul class=\"ecl-slogan-ticker__track\">`\nfrom the `trackSlides` signal. That generated track is what Embla animates.\n\nReasons for the split (rather than just scrolling the authored `<ul>`):\n\n- Seamless infinite loop needs more content than the author gives. The track\n  must be several times wider than the viewport or the loop visibly jumps, so\n  `ensureEnoughContent()` measures the originals and appends CLONE sets until\n  the total width reaches `CLONE_MULTIPLIER` × the container width.\n- Clones must not pollute accessibility. The authored list stays the one\n  accessible list; every generated clone is rendered with `aria-hidden` so a\n  screen reader announces each slogan once, not once per clone.\n- You cannot meaningfully grow the authored `<ul>`. Its `<li>` children are\n  Angular-projected content that Angular owns; imperatively appending clone\n  `<li>` nodes into it fights change detection. Building our own track signal\n  and letting `@for` render it is clean and safe. `<li>` is also only valid\n  inside a list element, so the `<ul eclSloganTickerList>` wrapper keeps the\n  consumer's authored markup valid and self-contained.\n\nThis mirrors the vanilla ECL slogan ticker (hidden source list + measured,\ncloned, auto-scrolling track).\n\n## Testing note\n\nThe visible track is only built after a real width measurement\n(`offsetWidth`). Under jsdom every element reports a width of 0, so\n`ensureEnoughContent()` bails early and the generated track stays empty. Unit\ntests should therefore assert slide-driven behavior through its observable\neffects (e.g. the play/pause controls appearing) rather than through the\ngenerated track DOM."
                 }
             ],
             "constructorObj": {
@@ -82551,7 +82527,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 105,
+                "line": 156,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -82568,7 +82544,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 103,
+                        "line": 154,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -82822,7 +82798,7 @@
         },
         {
             "name": "EclSocialMediaFollowItemComponent",
-            "id": "component-EclSocialMediaFollowItemComponent-af10cb7ce22e295e87d200282d4f934d3d9096be034a20300e19f49c8cea2c18a23ec6525da489ec0de9592f023fbdde2a73cd8a9fc87a270818f5214e0f73b7",
+            "id": "component-EclSocialMediaFollowItemComponent-4d681eab78f3c19c56ea7257583c64f115fd7e7d71c472b1e4283066c6a140e35ac096a345d68e7097d14833840a5ade158853c6012a4edad152b38642f45176",
             "file": "packages/ecl/components/ecl-social-media-follow/ecl-social-media-follow-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -82904,10 +82880,10 @@
                 {
                     "name": "isInverted",
                     "coverageIgnore": false,
-                    "defaultValue": "undefined",
+                    "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "false",
+                    "type": "boolean",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
@@ -83133,7 +83109,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { booleanAttribute, Component, inject, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EclIconSet, EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclBaseEvent } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EclSocialMediaFollowComponent } from './ecl-social-media-follow.component';\n\nexport class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {}\n\n@Component({\n    selector: 'ecl-social-media-follow-item',\n    templateUrl: './ecl-social-media-follow-item.component.html',\n    imports: [...EUI_ECL_ICON, ...EUI_ECL_LINK, NgTemplateOutlet, RouterLink, RouterLinkWithHref],\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSocialMediaFollowItemComponent extends ECLBaseDirective {\n    readonly isInverted = input<false, unknown>(undefined, { transform: (booleanAttribute) as any });\n    icon = input<string>();\n    iconSet = input<EclIconSet>('social-media');\n    readonly href = input('');\n    readonly routerLink = input('');\n    readonly target = input<string>(undefined);\n    readonly size = input('m');\n    readonly extraAttributes = input<{\n        name: string;\n        value?: string | null;\n    }[]>(undefined);\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__item')].join(' ').trim();\n    }\n\n    readonly itemClick = output<EclSocialMediaFollowItemClickEvent>();\n\n    private parent = inject(EclSocialMediaFollowComponent);\n\n    get isIconOnly(): boolean {\n        return this.parent?.isIconOnly() ?? false;\n    }\n\n    onItemClick(evt: Event): void {\n        this.itemClick.emit(new EclSocialMediaFollowItemClickEvent());\n        if (!this.href() && !this.routerLink()) {\n            evt.preventDefault();\n        }\n    }\n}\n",
+            "sourceCode": "import { booleanAttribute, Component, inject, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EclIconSet, EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclBaseEvent } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EclSocialMediaFollowComponent } from './ecl-social-media-follow.component';\n\nexport class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {}\n\n@Component({\n    selector: 'ecl-social-media-follow-item',\n    templateUrl: './ecl-social-media-follow-item.component.html',\n    imports: [...EUI_ECL_ICON, ...EUI_ECL_LINK, NgTemplateOutlet, RouterLink, RouterLinkWithHref],\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSocialMediaFollowItemComponent extends ECLBaseDirective {\n    readonly isInverted = input(false, { transform: booleanAttribute });\n    icon = input<string>();\n    iconSet = input<EclIconSet>('social-media');\n    readonly href = input('');\n    readonly routerLink = input('');\n    readonly target = input<string>(undefined);\n    readonly size = input('m');\n    readonly extraAttributes = input<{\n        name: string;\n        value?: string | null;\n    }[]>(undefined);\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__item')].join(' ').trim();\n    }\n\n    readonly itemClick = output<EclSocialMediaFollowItemClickEvent>();\n\n    private parent = inject(EclSocialMediaFollowComponent);\n\n    get isIconOnly(): boolean {\n        return this.parent?.isIconOnly() ?? false;\n    }\n\n    onItemClick(evt: Event): void {\n        this.itemClick.emit(new EclSocialMediaFollowItemClickEvent());\n        if (!this.href() && !this.routerLink()) {\n            evt.preventDefault();\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -90332,7 +90308,7 @@
                 "name": "ARROW_SIZE",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
+                "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts",
                 "coverageIgnore": false,
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -90345,7 +90321,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/search/ecl-site-header-search.component.ts",
                 "coverageIgnore": false,
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -91301,7 +91277,7 @@
                 "name": "RESIZE_DEBOUNCE",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
+                "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts",
                 "coverageIgnore": false,
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -91314,7 +91290,7 @@
                 "name": "RESIZE_DEBOUNCE",
                 "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/search/ecl-site-header-search.component.ts",
                 "coverageIgnore": false,
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -91817,12 +91793,12 @@
                     "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": [
+            "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts": [
                 {
                     "name": "ARROW_SIZE",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
+                    "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts",
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
@@ -91832,60 +91808,60 @@
                     "description": "<p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>\n"
                 },
                 {
-                    "name": "ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR",
+                    "name": "RESIZE_DEBOUNCE",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
+                    "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts",
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "Provider",
-                    "defaultValue": "{\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => EclSiteHeaderSearchComponent),\n    multi: true,\n}"
-                },
+                    "type": "number",
+                    "defaultValue": "200",
+                    "rawdescription": "Debounce for the resize recomputation, matching ECL's `handleResize`.",
+                    "description": "<p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>\n"
+                }
+            ],
+            "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts": [
                 {
-                    "name": "noop",
+                    "name": "ARROW_SIZE",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "unknown",
-                    "defaultValue": "(): void => {\n    /** empty*/\n}"
+                    "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"
                 },
                 {
-                    "name": "RESIZE_DEBOUNCE",
+                    "name": "ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "number",
-                    "defaultValue": "200",
-                    "rawdescription": "Debounce for the resize recomputation, matching ECL's `handleResize`.",
-                    "description": "<p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>\n"
-                }
-            ],
-            "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts": [
+                    "type": "Provider",
+                    "defaultValue": "{\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => EclSiteHeaderSearchComponent),\n    multi: true,\n}"
+                },
                 {
-                    "name": "ARROW_SIZE",
+                    "name": "noop",
                     "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/search/ecl-site-header-search.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"
+                    "type": "unknown",
+                    "defaultValue": "(): void => {\n    /** empty*/\n}"
                 },
                 {
                     "name": "RESIZE_DEBOUNCE",
                     "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/search/ecl-site-header-search.component.ts",
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-10-01T14:10:28.447Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-10-02T08:07:19.312Z, llm-md export.
 
 ## Modules
 
@@ -2724,7 +2724,7 @@ File: `packages/ecl/components/ecl-slogan-ticker/ecl-slogan-ticker.component.ts`
 Selector: `ecl-slogan-ticker`
 Change detection: `ChangeDetectionStrategy.OnPush`
 
-Description: ECL Slogan Ticker component – renders a continuously auto-scrolling horizontal ticker of slogan items. Supports play/pause controls, RTL layouts, and pauses when off-screen via IntersectionObserver. Uses Embla Carousel (via embla-carousel-angular) with the auto-scroll plugin to match the ECL vanilla implementation. The component clones projected slides internally to ensure the track is wide enough for seamless infinite scrolling (matching the vanilla ECL approach).
+Description: ECL Slogan Ticker component – renders a continuously auto-scrolling horizontal ticker of slogan items. Supports play/pause controls, RTL layouts, and pauses when off-screen via IntersectionObserver. Uses Embla Carousel (via embla-carousel-angular) with the auto-scroll plugin to match the ECL vanilla implementation. Why two lists (hidden source + generated track) The consumer provides a plain, semantic list: Example : \<ecl-slogan-ticker\> \<ul eclSloganTickerList\> \<li eclSloganTickerSlide\>SLOGAN ONE\</li\> \<li eclSloganTickerSlide\>SLOGAN TWO\</li\> \</ul\> \</ecl-slogan-ticker\> This authored \<ul eclSloganTickerList\> is NOT the list you see scrolling. EclSloganTickerListDirective hides it with display: none , and it stays in the light DOM as the single accessible source of truth. The component reads the slide texts out of it via a contentChildren query (see slides ) and builds a SEPARATE, component-owned \<ul class="ecl-slogan-ticker\_\_track"\> from the trackSlides signal. That generated track is what Embla animates. Reasons for the split (rather than just scrolling the authored \<ul\> ): Seamless infinite loop needs more content than the author gives. The track must be several times wider than the viewport or the loop visibly jumps, so ensureEnoughContent() measures the originals and appends CLONE sets until the total width reaches CLONE\_MULTIPLIER × the container width. Clones must not pollute accessibility. The authored list stays the one accessible list; every generated clone is rendered with aria-hidden so a screen reader announces each slogan once, not once per clone. You cannot meaningfully grow the authored \<ul\> . Its \<li\> children are Angular-projected content that Angular owns; imperatively appending clone \<li\> nodes into it fights change detection. Building our own track signal and letting @for render it is clean and safe. \<li\> is also only valid inside a list element, so the \<ul eclSloganTickerList\> wrapper keeps the consumer's authored markup valid and self-contained. This mirrors the vanilla ECL slogan ticker (hidden source list + measured, cloned, auto-scrolling track). Testing note The visible track is only built after a real width measurement ( offsetWidth ). Under jsdom every element reports a width of 0, so ensureEnoughContent() bails early and the generated track stays empty. Unit tests should therefore assert slide-driven behavior through its observable effects (e.g. the play/pause controls appearing) rather than through the generated track DOM.
 
 Inputs:
 - `eclAriaLabel: string = 'Slogan ticker'` — Aria-label for the ticker region.
@@ -2762,7 +2762,7 @@ Inputs:
 - `href: string = ''`
 - `icon: string`
 - `iconSet: EclIconSet = 'social-media'`
-- `isInverted: false = undefined`
+- `isInverted: boolean = false`
 - `routerLink: string = ''`
 - `size: string = 'm'`
 - `target: string = undefined`

package/docs/properties.html

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