@eui/ecl 21.3.2 → 21.3.3-snapshot-1782299250059

package/docs/json/documentation.json

@@ -979,12 +979,12 @@
         },
         {
             "name": "EclQuizCardFlipEvent",
-            "id": "interface-EclQuizCardFlipEvent-91448b4e1a966ffe96c03f79aecbbe3ee61982f2036d9a5bf3f014a571b5763f244055c6bb99eacbd725ce976e00fec18f2a61449c77ac512b15751209e03506",
+            "id": "interface-EclQuizCardFlipEvent-c83d2d56d26ae6cb98cf5e5e2b544d7a1c282f5d1aa889b465ee7425fdfc3f5191cf19aa4202e2ff0f62e0e7a4554e2107c3e7593ec0e632d1f08916a0821c2c",
             "file": "packages/ecl/components/ecl-quiz/ecl-quiz-card.component.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    HostListener,\n    Input,\n    Output,\n    ViewChild,\n    booleanAttribute,\n    input,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { TranslateModule } from '@ngx-translate/core';\n\nexport interface EclQuizCardFlipEvent {\n    flipped: boolean;\n    selectedOptionIndex?: number;\n    isCorrect?: boolean;\n}\n\n/**\n * ECL Quiz Card component – represents a single card in the quiz.\n *\n * For the 'reveal' variant, the entire card is clickable to flip.\n * For the 'poll' variant, individual options trigger the flip.\n */\n@Component({\n    selector: 'div[eclQuizCard]',\n    templateUrl: './ecl-quiz-card.component.html',\n    imports: [EclIconComponent, TranslateModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EclQuizCardComponent extends ECLBaseDirective {\n\n    /**\n     * The question text displayed on the front of the card.\n     */\n    question = input<string>('');\n\n    /**\n     * The answer text displayed on the back of the card.\n     * Used in 'reveal' variant or as explanation in 'poll' variant.\n     */\n    answer = input<string>('');\n\n    /**\n     * The answer title (e.g. \"The correct answer is A.\") for poll variant.\n     */\n    answerTitle = input<string>('');\n\n    /**\n     * Category label displayed in the card header (poll variant).\n     */\n    category = input<string>('');\n\n    /**\n     * Icon name for the card header.\n     * Defaults to 'sparkle' for reveal, 'question' for poll.\n     */\n    icon = input<string>('');\n\n    /**\n     * Icon size for the card header.\n     */\n    iconSize = input<'xs' | 's' | 'm' | 'l' | 'xl' | '2xl'>('xl');\n\n    /**\n     * The variant of the quiz, set by the parent EclQuizComponent.\n     */\n    variant: 'poll' | 'reveal' = 'reveal';\n\n    /**\n     * Options for the poll variant. Each option has text and a match flag.\n     */\n    options = input<Array<{ text: string; match: boolean }>>([]);\n\n    /**\n     * Whether this card is currently active/visible in the slider.\n     */\n    @Input({ transform: booleanAttribute }) isActive = false;\n\n    /**\n     * Emitted when the card is flipped.\n     */\n    @Output() cardFlip = new EventEmitter<EclQuizCardFlipEvent>();\n\n    @ViewChild('frontElement') frontElementRef: ElementRef;\n    @ViewChild('backElement') backElementRef: ElementRef;\n    @ViewChild('questionElement') questionElementRef: ElementRef;\n    @ViewChild('answerElement') answerElementRef: ElementRef;\n    @ViewChild('contentElement') contentElementRef: ElementRef;\n\n    /** Whether the card is currently flipped (showing back). */\n    isFlipped = false;\n\n    /** Index of the selected option (poll variant). */\n    selectedOptionIndex: number | null = null;\n\n    /** Whether the selected option is correct (poll variant). */\n    isCorrect: boolean | null = null;\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-quiz-card'),\n            this.isFlipped ? 'ecl-quiz-card__flipped' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    @HostBinding('attr.role')\n    role = 'group';\n\n    @HostBinding('attr.aria-roledescription')\n    ariaRoleDescription: string | null = null;\n\n    @HostBinding('attr.aria-hidden')\n    @Input() ariaHidden: string | null = null;\n\n    @HostBinding('attr.tabindex')\n    get tabIndex(): number | null {\n        return this.variant === 'reveal' ? 0 : null;\n    }\n\n    @HostBinding('attr.aria-pressed')\n    get ariaPressed(): string | null {\n        return this.variant === 'reveal' ? String(this.isFlipped) : null;\n    }\n\n    @HostBinding('style.tranform')\n    styleTransform = 'translate3d(0px, 0px, 0px)';\n\n    /**\n     * Handle click on the card itself (reveal variant).\n     */\n    @HostListener('click')\n    onClick(): void {\n        if (this.variant === 'reveal') {\n            this.flipCard();\n        }\n    }\n\n    /**\n     * Handle keyboard events (Enter/Space to flip for reveal variant).\n     */\n    @HostListener('keydown', ['$event'])\n    onKeydown(event: KeyboardEvent): void {\n        if (this.variant === 'reveal' && (event.key === 'Enter' || event.key === ' ')) {\n            event.preventDefault();\n            this.flipCard();\n        }\n    }\n\n    /**\n     * Handle option click (poll variant).\n     */\n    onOptionClick(optionIndex: number): void {\n        if (this.isFlipped) {\n            return;\n        }\n        const optionsList = this.options();\n        this.selectedOptionIndex = optionIndex;\n        this.isCorrect = optionsList[optionIndex]?.match ?? false;\n        this.flipCard();\n    }\n\n    /**\n     * Handle keyboard on option (poll variant).\n     */\n    onOptionKeydown(event: KeyboardEvent, optionIndex: number): void {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.onOptionClick(optionIndex);\n        }\n    }\n\n    /**\n     * Flip the card between front and back.\n     */\n    flipCard(): void {\n        this.isFlipped = !this.isFlipped;\n        const event: EclQuizCardFlipEvent = { flipped: this.isFlipped };\n        if (this.variant === 'poll') {\n            event.selectedOptionIndex = this.selectedOptionIndex;\n            event.isCorrect = this.isCorrect;\n        }\n        this.cardFlip.emit(event);\n    }\n\n    /** Get the native front element for height calculations. */\n    getFrontElement(): HTMLElement | null {\n        return this.frontElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native back element for height calculations. */\n    getBackElement(): HTMLElement | null {\n        return this.backElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native question element for height calculations. */\n    getQuestionElement(): HTMLElement | null {\n        return this.questionElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native answer element for height calculations. */\n    getAnswerElement(): HTMLElement | null {\n        return this.answerElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native content element for height calculations. */\n    getContentElement(): HTMLElement | null {\n        return this.contentElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the resolved icon name based on variant. */\n    getIconName(): string {\n        if (this.icon()) {\n            return this.icon();\n        }\n        return this.variant === 'poll' ? 'question' : 'sparkle';\n    }\n\n    /** Get the resolved icon size. */\n    getIconSize(): string {\n        return this.iconSize() || (this.variant === 'poll' ? '2xl' : 'xl');\n    }\n}\n",
+            "sourceCode": "import {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    Directive,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    HostListener,\n    input,\n    Output,\n    signal,\n    ViewChild\n} from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { TranslateModule } from '@ngx-translate/core';\n\nexport interface EclQuizCardFlipEvent {\n    flipped: boolean;\n    selectedOptionIndex?: number;\n    isCorrect?: boolean;\n}\n\n@Directive({\n    selector: 'ol[eclQuizList]',\n})\nexport class EclQuizListDirective {\n    @HostBinding('class.ecl-quiz__list') hasClass = true;\n}\n\n/**\n * ECL Quiz Card component – represents a single card in the quiz.\n *\n * For the 'reveal' variant, the entire card is clickable to flip.\n * For the 'poll' variant, individual options trigger the flip.\n */\n@Component({\n    selector: 'li[eclQuizCard]',\n    host: {\n        '[attr.id]': 'id()',\n        '[attr.aria-labelledby]': 'questionId()',\n        '[class]': 'cssClasses',\n        '[attr.tabindex]': 'tabIndex',\n        '[style.transform]': 'styleTransform',\n        '(click)': 'onClick()',\n        '(keydown)': 'onKeydown($event)',\n    },\n    templateUrl: './ecl-quiz-card.component.html',\n    imports: [EclIconComponent, TranslateModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EclQuizCardComponent extends ECLBaseDirective {\n\n    /**\n     * Unique identifier for the card, used for accessibility attributes.\n     * If not provided, a unique ID is generated automatically.\n     */\n    id = input<string>(`ecl-quiz-card-${crypto.randomUUID()}`);\n\n    /**\n     * Unique identifier for the question element.\n     */\n    questionId = computed(() => `${this.id()}-question`);\n\n    /**\n     * Unique identifier for the answer element.\n     */\n    answerId = computed(() => `${this.id()}-answer`);\n\n    /**\n     * The question text displayed on the front of the card.\n     */\n    question = input<string>('');\n\n    /**\n     * The answer text displayed on the back of the card.\n     * Used in 'reveal' variant or as explanation in 'poll' variant.\n     */\n    answer = input<string>('');\n\n    /**\n     * The answer title (e.g. \"The correct answer is A.\") for poll variant.\n     */\n    answerTitle = input<string>('');\n\n    /**\n     * Category label displayed in the card header (poll variant).\n     */\n    category = input<string>('');\n\n    /**\n     * Icon name for the card header.\n     * Defaults to 'sparkle' for reveal, 'question' for poll.\n     */\n    icon = input<string>('');\n\n    /**\n     * Icon size for the card header.\n     */\n    iconSize = input<'xs' | 's' | 'm' | 'l' | 'xl' | '2xl'>('xl');\n\n    /**\n     * The variant of the quiz, set by the parent EclQuizComponent.\n     */\n    variant: 'poll' | 'reveal' = 'reveal';\n\n    /**\n     * Options for the poll variant. Each option has text and a match flag.\n     */\n    options = input<Array<{ text: string; match: boolean }>>([]);\n\n    /**\n     * Emitted when the card is flipped.\n     */\n    @Output() cardFlip = new EventEmitter<EclQuizCardFlipEvent>();\n\n    @ViewChild('frontElement') frontElementRef: ElementRef;\n    @ViewChild('backElement') backElementRef: ElementRef;\n    @ViewChild('questionElement') questionElementRef: ElementRef;\n    @ViewChild('answerElement') answerElementRef: ElementRef;\n    @ViewChild('contentElement') contentElementRef: ElementRef;\n\n    /** Whether the card is currently flipped (showing back). */\n    isFlipped = signal(false);\n\n    /** Index of the selected option (poll variant). */\n    selectedOptionIndex = signal<number | null>(null);\n\n    /** Whether the selected option is correct (poll variant). */\n    isCorrect = signal<boolean | null>(null);\n\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-quiz-card'),\n            this.isFlipped() ? 'ecl-quiz-card__flipped' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    get tabIndex(): number | null {\n        return this.variant === 'reveal' ? 0 : null;\n    }\n\n    readonly styleTransform = 'translate3d(0px, 0px, 0px)';\n\n    /**\n     * Handle click on the card itself (reveal variant).\n     */\n    onClick(): void {\n        if (this.variant === 'reveal') {\n            this.flipCard();\n        }\n    }\n\n    /**\n     * Handle keyboard events (Enter/Space to flip for reveal variant).\n     */\n    onKeydown(event: KeyboardEvent): void {\n        if (this.variant === 'reveal' && (event.key === 'Enter' || event.key === ' ')) {\n            event.preventDefault();\n            this.flipCard();\n        }\n    }\n\n    /**\n     * Handle option click (poll variant).\n     */\n    onOptionClick(optionIndex: number): void {\n        if (this.isFlipped()) {\n            return;\n        }\n        const optionsList = this.options();\n        this.selectedOptionIndex.set(optionIndex);\n        this.isCorrect.set(optionsList[optionIndex]?.match ?? false);\n        this.flipCard();\n    }\n\n    /**\n     * Handle keyboard on option (poll variant).\n     */\n    onOptionKeydown(event: KeyboardEvent, optionIndex: number): void {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.onOptionClick(optionIndex);\n        }\n    }\n\n    /**\n     * Flip the card between front and back.\n     */\n    flipCard(): void {\n        this.isFlipped.update(v => !v);\n        const event: EclQuizCardFlipEvent = { flipped: this.isFlipped() };\n        if (this.variant === 'poll') {\n            event.selectedOptionIndex = this.selectedOptionIndex();\n            event.isCorrect = this.isCorrect();\n        }\n        this.cardFlip.emit(event);\n    }\n\n    /** Get the native front element for height calculations. */\n    getFrontElement(): HTMLElement | null {\n        return this.frontElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native back element for height calculations. */\n    getBackElement(): HTMLElement | null {\n        return this.backElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native question element for height calculations. */\n    getQuestionElement(): HTMLElement | null {\n        return this.questionElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native answer element for height calculations. */\n    getAnswerElement(): HTMLElement | null {\n        return this.answerElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native content element for height calculations. */\n    getContentElement(): HTMLElement | null {\n        return this.contentElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the resolved icon name based on variant. */\n    getIconName(): string {\n        if (this.icon()) {\n            return this.icon();\n        }\n        return this.variant === 'poll' ? 'question' : 'sparkle';\n    }\n\n    /** Get the resolved icon size. */\n    getIconSize(): string {\n        return this.iconSize() || (this.variant === 'poll' ? '2xl' : 'xl');\n    }\n}\n",
             "properties": [
                 {
                     "name": "flipped",
@@ -994,7 +994,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 19
+                    "line": 20
                 },
                 {
                     "name": "isCorrect",
@@ -1004,7 +1004,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 21
+                    "line": 22
                 },
                 {
                     "name": "selectedOptionIndex",
@@ -1014,7 +1014,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 20
+                    "line": 21
                 }
             ],
             "indexSignatures": [],
@@ -7147,12 +7147,12 @@
         },
         {
             "name": "EclAccordionDirective",
-            "id": "directive-EclAccordionDirective-144f39d161622fa5f3079ac765095e4ba87666dcc3dcf86089c4cc0346bce07661cd2591efbfd55d1565d50263bd28b39c388acb6e9f1eab4f0eaa12f4a7b1c7",
+            "id": "directive-EclAccordionDirective-0eaae7d7f9fb48ff11cee200605bda711957b49c1482425a374ac862f2c481d4c3fcbc5a3150acfb59172fb052229ca4d1b38f155ad90428296fd390d0dc90bd",
             "file": "packages/ecl/components/ecl-accordion/ecl-accordion.directive.ts",
             "type": "directive",
             "description": "<p>Accordion component that manages the expansion and collapsing state of accordion items.\nUses the <code>ECLBaseDirective</code> to apply appropriate CSS classes and manage the visual styling.</p>\n<p>This is the main component for the accordion container, responsible for managing the expansion\nof individual items within the accordion. It provides the functionality to group and organize content\nin expandable sections.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-none\">                            The main class is `ecl-accordion`, which can be extended with additional classes.</code></pre></div>",
-            "rawdescription": "\n\nAccordion component that manages the expansion and collapsing state of accordion items.\nUses the `ECLBaseDirective` to apply appropriate CSS classes and manage the visual styling.\n\nThis is the main component for the accordion container, responsible for managing the expansion\nof individual items within the accordion. It provides the functionality to group and organize content\nin expandable sections.\n\n                                The main class is `ecl-accordion`, which can be extended with additional classes.\n",
-            "sourceCode": "import {\n    afterNextRender,\n    ContentChildren,\n    Directive,\n    ElementRef,\n    forwardRef,\n    HostBinding,\n    inject,\n    QueryList,\n    Renderer2\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { Subject, takeUntil } from 'rxjs';\nimport { EclAccordionItemDirective } from './ecl-accordion-item-new.directive';\n\n/**\n * Accordion component that manages the expansion and collapsing state of accordion items.\n * Uses the `ECLBaseDirective` to apply appropriate CSS classes and manage the visual styling.\n *\n * @description\n * This is the main component for the accordion container, responsible for managing the expansion\n * of individual items within the accordion. It provides the functionality to group and organize content\n * in expandable sections.\n *\n * @property {string} cssClasses - Returns a string of CSS classes applied to the host element.\n *                                 The main class is `ecl-accordion`, which can be extended with additional classes.\n */\n@Directive({\n    selector: 'div[eclAccordion]',\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n    ],\n})\nexport class EclAccordionDirective {\n    baseDirective = inject(ECLBaseDirective);\n    private renderer = inject(Renderer2);\n\n    @ContentChildren(forwardRef(() => EclAccordionItemDirective), { read: ElementRef })\n    items!: QueryList<ElementRef>;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n\n    /**\n     * @description\n     * Retrieves and returns the CSS classes for the component based on its current state.\n     * Uses `baseDirective` to fetch the appropriate CSS classes.\n     *\n     * @returns {string} - A string of CSS class names.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [this.baseDirective.getCssClasses('ecl-accordion')].join(' ').trim();\n    }\n\n    constructor() {\n        afterNextRender(() => {\n            this.setFirstAndLastClasses();\n            this.items.changes\n                .pipe(takeUntil(this.destroy$))\n                .subscribe(() => this.setFirstAndLastClasses());\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    private setFirstAndLastClasses(): void {\n        const elements = this.items.toArray();\n\n        if (elements.length === 0) return;\n\n        elements.forEach((el) => {\n            this.renderer.removeClass(el.nativeElement, 'is-first');\n            this.renderer.removeClass(el.nativeElement, 'is-last');\n        });\n\n        this.renderer.addClass(elements[0].nativeElement, 'is-first');\n        this.renderer.addClass(elements[elements.length - 1].nativeElement, 'is-last');\n    }\n}\n",
+            "rawdescription": "\n\nAccordion component that manages the expansion and collapsing state of accordion items.\nUses the `ECLBaseDirective` to apply appropriate CSS classes and manage the visual styling.\n\nThis is the main component for the accordion container, responsible for managing the expansion\nof individual items within the accordion. It provides the functionality to group and organize content\nin expandable sections.\n\n                                The main class is `ecl-accordion`, which can be extended with additional classes.\n\n",
+            "sourceCode": "import {\n    afterNextRender,\n    ContentChildren,\n    Directive,\n    ElementRef,\n    forwardRef,\n    HostBinding,\n    inject,\n    QueryList,\n    Renderer2\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { Subject, takeUntil } from 'rxjs';\nimport { EclAccordionItemDirective } from './ecl-accordion-item-new.directive';\n\n/**\n * Accordion component that manages the expansion and collapsing state of accordion items.\n * Uses the `ECLBaseDirective` to apply appropriate CSS classes and manage the visual styling.\n *\n * @description\n * This is the main component for the accordion container, responsible for managing the expansion\n * of individual items within the accordion. It provides the functionality to group and organize content\n * in expandable sections.\n *\n * @property {string} cssClasses - Returns a string of CSS classes applied to the host element.\n *                                 The main class is `ecl-accordion`, which can be extended with additional classes.\n *\n */\n@Directive({\n    selector: 'div[eclAccordion]',\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n    ],\n})\nexport class EclAccordionDirective {\n    baseDirective = inject(ECLBaseDirective);\n    private renderer = inject(Renderer2);\n\n    @ContentChildren(forwardRef(() => EclAccordionItemDirective), { read: ElementRef })\n    items!: QueryList<ElementRef>;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n\n    /**\n     * @description\n     * Retrieves and returns the CSS classes for the component based on its current state.\n     * Uses `baseDirective` to fetch the appropriate CSS classes.\n     *\n     * @returns {string} - A string of CSS class names.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [this.baseDirective.getCssClasses('ecl-accordion')].join(' ').trim();\n    }\n\n    constructor() {\n        afterNextRender(() => {\n            this.setFirstAndLastClasses();\n            this.items.changes\n                .pipe(takeUntil(this.destroy$))\n                .subscribe(() => this.setFirstAndLastClasses());\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    private setFirstAndLastClasses(): void {\n        const elements = this.items.toArray();\n\n        if (elements.length === 0) return;\n\n        elements.forEach((el) => {\n            this.renderer.removeClass(el.nativeElement, 'is-first');\n            this.renderer.removeClass(el.nativeElement, 'is-last');\n        });\n\n        this.renderer.addClass(elements[0].nativeElement, 'is-first');\n        this.renderer.addClass(elements[elements.length - 1].nativeElement, 'is-last');\n    }\n}\n",
             "selector": "div[eclAccordion]",
             "providers": [],
             "hostDirectives": [
@@ -7174,16 +7174,16 @@
                     "deprecationMessage": "",
                     "jsdoctags": [
                         {
-                            "pos": 1485,
-                            "end": 1669,
+                            "pos": 1488,
+                            "end": 1672,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1486,
-                                "end": 1497,
+                                "pos": 1489,
+                                "end": 1500,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -7193,16 +7193,16 @@
                             "comment": "<p>Retrieves and returns the CSS classes for the component based on its current state.\nUses <code>baseDirective</code> to fetch the appropriate CSS classes.</p>\n"
                         },
                         {
-                            "pos": 1669,
-                            "end": 1723,
+                            "pos": 1672,
+                            "end": 1726,
                             "kind": 343,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1670,
-                                "end": 1677,
+                                "pos": 1673,
+                                "end": 1680,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -7211,16 +7211,16 @@
                             },
                             "comment": "<ul>\n<li>A string of CSS class names.</li>\n</ul>\n",
                             "typeExpression": {
-                                "pos": 1678,
-                                "end": 1686,
+                                "pos": 1681,
+                                "end": 1689,
                                 "kind": 310,
                                 "id": 0,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
                                 "type": {
-                                    "pos": 1679,
-                                    "end": 1685,
+                                    "pos": 1682,
+                                    "end": 1688,
                                     "kind": 154,
                                     "id": 0,
                                     "flags": 16777216,
@@ -7231,7 +7231,7 @@
                     ],
                     "rawdescription": "\n\nRetrieves and returns the CSS classes for the component based on its current state.\nUses `baseDirective` to fetch the appropriate CSS classes.\n\n",
                     "description": "<p>Retrieves and returns the CSS classes for the component based on its current state.\nUses <code>baseDirective</code> to fetch the appropriate CSS classes.</p>\n",
-                    "line": 52,
+                    "line": 53,
                     "type": "string",
                     "decorators": []
                 }
@@ -7247,7 +7247,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 37
+                    "line": 38
                 },
                 {
                     "name": "items",
@@ -7257,7 +7257,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 41,
+                    "line": 42,
                     "decorators": [
                         {
                             "name": "ContentChildren",
@@ -7276,7 +7276,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 65,
+                    "line": 66,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -7288,7 +7288,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 54
+                "line": 55
             },
             "accessors": {
                 "cssClasses": {
@@ -7297,21 +7297,21 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 52,
+                        "line": 53,
                         "rawdescription": "\n\nRetrieves and returns the CSS classes for the component based on its current state.\nUses `baseDirective` to fetch the appropriate CSS classes.\n\n",
                         "description": "<p>Retrieves and returns the CSS classes for the component based on its current state.\nUses <code>baseDirective</code> to fetch the appropriate CSS classes.</p>\n",
                         "jsdoctags": [
                             {
-                                "pos": 1485,
-                                "end": 1669,
+                                "pos": 1488,
+                                "end": 1672,
                                 "kind": 328,
                                 "id": 0,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
                                 "tagName": {
-                                    "pos": 1486,
-                                    "end": 1497,
+                                    "pos": 1489,
+                                    "end": 1500,
                                     "kind": 80,
                                     "id": 0,
                                     "flags": 16842752,
@@ -7321,16 +7321,16 @@
                                 "comment": "<p>Retrieves and returns the CSS classes for the component based on its current state.\nUses <code>baseDirective</code> to fetch the appropriate CSS classes.</p>\n"
                             },
                             {
-                                "pos": 1669,
-                                "end": 1723,
+                                "pos": 1672,
+                                "end": 1726,
                                 "kind": 343,
                                 "id": 0,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
                                 "tagName": {
-                                    "pos": 1670,
-                                    "end": 1677,
+                                    "pos": 1673,
+                                    "end": 1680,
                                     "kind": 80,
                                     "id": 0,
                                     "flags": 16842752,
@@ -7339,16 +7339,16 @@
                                 },
                                 "comment": "<ul>\n<li>A string of CSS class names.</li>\n</ul>\n",
                                 "typeExpression": {
-                                    "pos": 1678,
-                                    "end": 1686,
+                                    "pos": 1681,
+                                    "end": 1689,
                                     "kind": 310,
                                     "id": 0,
                                     "flags": 16842752,
                                     "modifierFlagsCache": 0,
                                     "transformFlags": 0,
                                     "type": {
-                                        "pos": 1679,
-                                        "end": 1685,
+                                        "pos": 1682,
+                                        "end": 1688,
                                         "kind": 154,
                                         "id": 0,
                                         "flags": 16777216,
@@ -7405,6 +7405,116 @@
             "methodsClass": [],
             "extends": []
         },
+        {
+            "name": "EclAnimatedNumbersIconDirective",
+            "id": "directive-EclAnimatedNumbersIconDirective-dbd254a0e7eb54f76e4e4320423f51f2e1239e4959291b1baad9a4b69776a2be78571ebea3496e73a41f11a3427e4f6cd0304d4b4eae0a045fc861445325a588",
+            "file": "packages/ecl/components/ecl-animated-numbers/ecl-animated-numers-item/ecl-animated-numbers-icon.directive.ts",
+            "type": "directive",
+            "description": "<p>Marks an icon element as the animated number item&#39;s icon.\nApplies the <code>ecl-animated-number__icon</code> positioning class.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;ecl-icon eclAnimatedNumbersIcon icon=&quot;users&quot; iconSet=&quot;phosphor&quot;&gt;&lt;/ecl-icon&gt;</code></pre></div>",
+            "rawdescription": "\n\nMarks an icon element as the animated number item's icon.\nApplies the `ecl-animated-number__icon` positioning class.\n\n```html\n<ecl-icon eclAnimatedNumbersIcon icon=\"users\" iconSet=\"phosphor\"></ecl-icon>\n```",
+            "sourceCode": "import { Directive } from '@angular/core';\n\n/**\n * Marks an icon element as the animated number item's icon.\n * Applies the `ecl-animated-number__icon` positioning class.\n *\n * @example\n * ```html\n * <ecl-icon eclAnimatedNumbersIcon icon=\"users\" iconSet=\"phosphor\"></ecl-icon>\n * ```\n */\n@Directive({\n    selector: '[eclAnimatedNumbersIcon]',\n    host: {\n        'class': 'ecl-animated-number__icon',\n    },\n})\nexport class EclAnimatedNumbersIconDirective {}\n",
+            "selector": "[eclAnimatedNumbersIcon]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "extends": []
+        },
+        {
+            "name": "EclAnimatedNumbersItemsDirective",
+            "id": "directive-EclAnimatedNumbersItemsDirective-f68aab2400cc160321a37d659a4e411280ea0a03b583be939539c9a31463ae4b464c41aab81fc80d5cd51453d34ae98ca678519c754fd652e8aedf82b1db685b",
+            "file": "packages/ecl/components/ecl-animated-numbers/ecl-animated-numbers-list.directive.ts",
+            "type": "directive",
+            "description": "<p>Wraps the grid of animated number items.\nApplies the <code>ecl-animated-numbers__items</code> layout class.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;div eclAnimatedNumbersItems&gt;\n    &lt;div eclAnimatedNumbersItem ...&gt;&lt;/div&gt;\n&lt;/div&gt;</code></pre></div>",
+            "rawdescription": "\n\nWraps the grid of animated number items.\nApplies the `ecl-animated-numbers__items` layout class.\n\n```html\n<div eclAnimatedNumbersItems>\n    <div eclAnimatedNumbersItem ...></div>\n</div>\n```",
+            "sourceCode": "import { Directive } from \"@angular/core\";\n\n/**\n * Wraps the grid of animated number items.\n * Applies the `ecl-animated-numbers__items` layout class.\n *\n * @example\n * ```html\n * <div eclAnimatedNumbersItems>\n *     <div eclAnimatedNumbersItem ...></div>\n * </div>\n * ```\n */\n@Directive({\n  selector: '[eclAnimatedNumbersItems]',\n  host: {\n    class: 'ecl-animated-numbers__items',\n  },\n})\nexport class EclAnimatedNumbersItemsDirective {}\n\n/**\n * Wraps the list of source links.\n * Applies the `ecl-animated-numbers__sources-list` class.\n *\n * @example\n * ```html\n * <ul eclAnimatedNumbersSourcesList>\n *     <li eclAnimatedNumbersSourcesItem>...</li>\n * </ul>\n * ```\n */\n@Directive({\n  selector: '[eclAnimatedNumbersSourcesList]',\n  host: {\n    class: 'ecl-animated-numbers__sources-list',\n  },\n})\nexport class EclAnimatedNumbersSourcesListDirective {}\n\n/**\n * Marks a list item as a source entry.\n * Applies the `ecl-animated-numbers__sources-item` class.\n *\n * @example\n * ```html\n * <li eclAnimatedNumbersSourcesItem>\n *     <a eclLink eclAnimatedNumbersSource href=\"/example\">Eurostat</a>\n * </li>\n * ```\n */\n@Directive({\n  selector: '[eclAnimatedNumbersSourcesItem]',\n  host: {\n    class: 'ecl-animated-numbers__sources-item',\n  },\n})\nexport class EclAnimatedNumbersSourcesItemDirective {}\n\n/**\n * Marks a link as a source reference within the animated numbers component.\n * Applies the `ecl-animated-numbers__source` styling class.\n *\n * @example\n * ```html\n * <a eclLink eclAnimatedNumbersSource href=\"/example\">Eurostat</a>\n * ```\n */\n@Directive({\n  selector: '[eclAnimatedNumbersSource]',\n  host: {\n    class: 'ecl-animated-numbers__source',\n  },\n})\nexport class EclAnimatedNumbersSourceDirective {}\n",
+            "selector": "[eclAnimatedNumbersItems]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "extends": []
+        },
+        {
+            "name": "EclAnimatedNumbersSourceDirective",
+            "id": "directive-EclAnimatedNumbersSourceDirective-f68aab2400cc160321a37d659a4e411280ea0a03b583be939539c9a31463ae4b464c41aab81fc80d5cd51453d34ae98ca678519c754fd652e8aedf82b1db685b",
+            "file": "packages/ecl/components/ecl-animated-numbers/ecl-animated-numbers-list.directive.ts",
+            "type": "directive",
+            "description": "<p>Marks a link as a source reference within the animated numbers component.\nApplies the <code>ecl-animated-numbers__source</code> styling class.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;a eclLink eclAnimatedNumbersSource href=&quot;/example&quot;&gt;Eurostat&lt;/a&gt;</code></pre></div>",
+            "rawdescription": "\n\nMarks a link as a source reference within the animated numbers component.\nApplies the `ecl-animated-numbers__source` styling class.\n\n```html\n<a eclLink eclAnimatedNumbersSource href=\"/example\">Eurostat</a>\n```",
+            "sourceCode": "import { Directive } from \"@angular/core\";\n\n/**\n * Wraps the grid of animated number items.\n * Applies the `ecl-animated-numbers__items` layout class.\n *\n * @example\n * ```html\n * <div eclAnimatedNumbersItems>\n *     <div eclAnimatedNumbersItem ...></div>\n * </div>\n * ```\n */\n@Directive({\n  selector: '[eclAnimatedNumbersItems]',\n  host: {\n    class: 'ecl-animated-numbers__items',\n  },\n})\nexport class EclAnimatedNumbersItemsDirective {}\n\n/**\n * Wraps the list of source links.\n * Applies the `ecl-animated-numbers__sources-list` class.\n *\n * @example\n * ```html\n * <ul eclAnimatedNumbersSourcesList>\n *     <li eclAnimatedNumbersSourcesItem>...</li>\n * </ul>\n * ```\n */\n@Directive({\n  selector: '[eclAnimatedNumbersSourcesList]',\n  host: {\n    class: 'ecl-animated-numbers__sources-list',\n  },\n})\nexport class EclAnimatedNumbersSourcesListDirective {}\n\n/**\n * Marks a list item as a source entry.\n * Applies the `ecl-animated-numbers__sources-item` class.\n *\n * @example\n * ```html\n * <li eclAnimatedNumbersSourcesItem>\n *     <a eclLink eclAnimatedNumbersSource href=\"/example\">Eurostat</a>\n * </li>\n * ```\n */\n@Directive({\n  selector: '[eclAnimatedNumbersSourcesItem]',\n  host: {\n    class: 'ecl-animated-numbers__sources-item',\n  },\n})\nexport class EclAnimatedNumbersSourcesItemDirective {}\n\n/**\n * Marks a link as a source reference within the animated numbers component.\n * Applies the `ecl-animated-numbers__source` styling class.\n *\n * @example\n * ```html\n * <a eclLink eclAnimatedNumbersSource href=\"/example\">Eurostat</a>\n * ```\n */\n@Directive({\n  selector: '[eclAnimatedNumbersSource]',\n  host: {\n    class: 'ecl-animated-numbers__source',\n  },\n})\nexport class EclAnimatedNumbersSourceDirective {}\n",
+            "selector": "[eclAnimatedNumbersSource]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "extends": []
+        },
+        {
+            "name": "EclAnimatedNumbersSourcesItemDirective",
+            "id": "directive-EclAnimatedNumbersSourcesItemDirective-f68aab2400cc160321a37d659a4e411280ea0a03b583be939539c9a31463ae4b464c41aab81fc80d5cd51453d34ae98ca678519c754fd652e8aedf82b1db685b",
+            "file": "packages/ecl/components/ecl-animated-numbers/ecl-animated-numbers-list.directive.ts",
+            "type": "directive",
+            "description": "<p>Marks a list item as a source entry.\nApplies the <code>ecl-animated-numbers__sources-item</code> class.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;li eclAnimatedNumbersSourcesItem&gt;\n    &lt;a eclLink eclAnimatedNumbersSource href=&quot;/example&quot;&gt;Eurostat&lt;/a&gt;\n&lt;/li&gt;</code></pre></div>",
+            "rawdescription": "\n\nMarks a list item as a source entry.\nApplies the `ecl-animated-numbers__sources-item` class.\n\n```html\n<li eclAnimatedNumbersSourcesItem>\n    <a eclLink eclAnimatedNumbersSource href=\"/example\">Eurostat</a>\n</li>\n```",
+            "sourceCode": "import { Directive } from \"@angular/core\";\n\n/**\n * Wraps the grid of animated number items.\n * Applies the `ecl-animated-numbers__items` layout class.\n *\n * @example\n * ```html\n * <div eclAnimatedNumbersItems>\n *     <div eclAnimatedNumbersItem ...></div>\n * </div>\n * ```\n */\n@Directive({\n  selector: '[eclAnimatedNumbersItems]',\n  host: {\n    class: 'ecl-animated-numbers__items',\n  },\n})\nexport class EclAnimatedNumbersItemsDirective {}\n\n/**\n * Wraps the list of source links.\n * Applies the `ecl-animated-numbers__sources-list` class.\n *\n * @example\n * ```html\n * <ul eclAnimatedNumbersSourcesList>\n *     <li eclAnimatedNumbersSourcesItem>...</li>\n * </ul>\n * ```\n */\n@Directive({\n  selector: '[eclAnimatedNumbersSourcesList]',\n  host: {\n    class: 'ecl-animated-numbers__sources-list',\n  },\n})\nexport class EclAnimatedNumbersSourcesListDirective {}\n\n/**\n * Marks a list item as a source entry.\n * Applies the `ecl-animated-numbers__sources-item` class.\n *\n * @example\n * ```html\n * <li eclAnimatedNumbersSourcesItem>\n *     <a eclLink eclAnimatedNumbersSource href=\"/example\">Eurostat</a>\n * </li>\n * ```\n */\n@Directive({\n  selector: '[eclAnimatedNumbersSourcesItem]',\n  host: {\n    class: 'ecl-animated-numbers__sources-item',\n  },\n})\nexport class EclAnimatedNumbersSourcesItemDirective {}\n\n/**\n * Marks a link as a source reference within the animated numbers component.\n * Applies the `ecl-animated-numbers__source` styling class.\n *\n * @example\n * ```html\n * <a eclLink eclAnimatedNumbersSource href=\"/example\">Eurostat</a>\n * ```\n */\n@Directive({\n  selector: '[eclAnimatedNumbersSource]',\n  host: {\n    class: 'ecl-animated-numbers__source',\n  },\n})\nexport class EclAnimatedNumbersSourceDirective {}\n",
+            "selector": "[eclAnimatedNumbersSourcesItem]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "extends": []
+        },
+        {
+            "name": "EclAnimatedNumbersSourcesListDirective",
+            "id": "directive-EclAnimatedNumbersSourcesListDirective-f68aab2400cc160321a37d659a4e411280ea0a03b583be939539c9a31463ae4b464c41aab81fc80d5cd51453d34ae98ca678519c754fd652e8aedf82b1db685b",
+            "file": "packages/ecl/components/ecl-animated-numbers/ecl-animated-numbers-list.directive.ts",
+            "type": "directive",
+            "description": "<p>Wraps the list of source links.\nApplies the <code>ecl-animated-numbers__sources-list</code> class.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;ul eclAnimatedNumbersSourcesList&gt;\n    &lt;li eclAnimatedNumbersSourcesItem&gt;...&lt;/li&gt;\n&lt;/ul&gt;</code></pre></div>",
+            "rawdescription": "\n\nWraps the list of source links.\nApplies the `ecl-animated-numbers__sources-list` class.\n\n```html\n<ul eclAnimatedNumbersSourcesList>\n    <li eclAnimatedNumbersSourcesItem>...</li>\n</ul>\n```",
+            "sourceCode": "import { Directive } from \"@angular/core\";\n\n/**\n * Wraps the grid of animated number items.\n * Applies the `ecl-animated-numbers__items` layout class.\n *\n * @example\n * ```html\n * <div eclAnimatedNumbersItems>\n *     <div eclAnimatedNumbersItem ...></div>\n * </div>\n * ```\n */\n@Directive({\n  selector: '[eclAnimatedNumbersItems]',\n  host: {\n    class: 'ecl-animated-numbers__items',\n  },\n})\nexport class EclAnimatedNumbersItemsDirective {}\n\n/**\n * Wraps the list of source links.\n * Applies the `ecl-animated-numbers__sources-list` class.\n *\n * @example\n * ```html\n * <ul eclAnimatedNumbersSourcesList>\n *     <li eclAnimatedNumbersSourcesItem>...</li>\n * </ul>\n * ```\n */\n@Directive({\n  selector: '[eclAnimatedNumbersSourcesList]',\n  host: {\n    class: 'ecl-animated-numbers__sources-list',\n  },\n})\nexport class EclAnimatedNumbersSourcesListDirective {}\n\n/**\n * Marks a list item as a source entry.\n * Applies the `ecl-animated-numbers__sources-item` class.\n *\n * @example\n * ```html\n * <li eclAnimatedNumbersSourcesItem>\n *     <a eclLink eclAnimatedNumbersSource href=\"/example\">Eurostat</a>\n * </li>\n * ```\n */\n@Directive({\n  selector: '[eclAnimatedNumbersSourcesItem]',\n  host: {\n    class: 'ecl-animated-numbers__sources-item',\n  },\n})\nexport class EclAnimatedNumbersSourcesItemDirective {}\n\n/**\n * Marks a link as a source reference within the animated numbers component.\n * Applies the `ecl-animated-numbers__source` styling class.\n *\n * @example\n * ```html\n * <a eclLink eclAnimatedNumbersSource href=\"/example\">Eurostat</a>\n * ```\n */\n@Directive({\n  selector: '[eclAnimatedNumbersSource]',\n  host: {\n    class: 'ecl-animated-numbers__source',\n  },\n})\nexport class EclAnimatedNumbersSourceDirective {}\n",
+            "selector": "[eclAnimatedNumbersSourcesList]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "extends": []
+        },
         {
             "name": "EclBannerDescriptionDirective",
             "id": "directive-EclBannerDescriptionDirective-f073afc18133e0c0900143ae670f64b225f17b78a8f570442bdfb316e4e07fc2186d724c998446f698950d7f0ee097aa4c98cf46453ad6e3937d300efee32740",
@@ -17100,12 +17210,12 @@
         },
         {
             "name": "EclLinkDirective",
-            "id": "directive-EclLinkDirective-a5f0b647390f6262dd586a6d527e5cb8356d561e3f80f1de971cb16cea3dfe537b978fbfbb7ff7761c3c3850a193d9abe3d8ab0bcf68283166b9a231fb4d9583",
+            "id": "directive-EclLinkDirective-17321394a8fa635d624bbd1ee51f06dae66cc28119015edec455f419c44803cd5d2e9c1c210dbb5db099e65e1a7b534020e120e628fb13130962301e0d2f0549",
             "file": "packages/ecl/components/ecl-link/ecl-link.directive.ts",
             "type": "directive",
             "description": "<p>&#39;eclLink&#39; directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.</p>\n",
             "rawdescription": "\n\n'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.\n",
-            "sourceCode": "import { AfterContentInit, booleanAttribute, ChangeDetectorRef, contentChildren, Directive, ElementRef, HostBinding, inject, input, Renderer2, effect, computed, forwardRef } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * 'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.\n */\n@Directive({\n    selector: '[eclLink]',\n})\nexport class EclLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    el = inject(ElementRef);\n    renderer = inject(Renderer2);\n    cd = inject(ChangeDetectorRef);\n\n    /**\n     * Additional HTML attributes to be set on the link element.\n     * Used e.g. by social-media-follow for passing extra_attributes.\n     */\n    extraAttributes = input<{ name: string; value?: string | null }[] | undefined>();\n\n    /**\n     * Property to style the component as 'inverted' (with dark background). Can be used alone or with 'standalone' variant.\n     */\n    isInverted = input(false, { transform: booleanAttribute });\n\n    /**\n     * Property to style the component if it consist only of an icon.\n     */\n    isIconOnly = input(false, { transform: booleanAttribute });\n\n    /** Adds class for hightlighted link (works only with 'primary' variant) \n     * @deprecated - to be removed in v23. Use variant='primary-highlight', as only primary variant can be highlighted.\n    */\n    isHighlight = input(false, { transform: booleanAttribute });\n    \n    /**\n     * @deprecated - will be removed in v21. Deprecated on ECL side.\n     */\n    isNoVisited = input(false, { transform: booleanAttribute });\n\n    isBranded = input(false, { transform: booleanAttribute });\n\n    /**\n     * With 'variant' property user can add some more specific styling to the <a> component.\n     */\n    variant = input<'standalone' | 'primary' | 'secondary' | 'primary-neutral' | 'primary-highlight'>();\n\n    eclIconComponents = contentChildren(forwardRef(() => EclIconComponent), { descendants: true });\n\n    constructor() {\n        super();\n        effect(() => {\n            const attrs = this.extraAttributes();\n            if (attrs && attrs.length) {\n                attrs.forEach((attr) => {\n                    if (attr?.name) {\n                        this.el.nativeElement.setAttribute(attr.name, attr.value ?? '');\n                    }\n                });\n            }\n        });\n    }\n\n    @HostBinding('class.ecl-link--inverted')\n    get hostIsInverted(): boolean {\n        return (!this.variant() || this.variant() === 'standalone') && this.isInverted();\n    }\n\n    @HostBinding('class.ecl-link--brand')\n    get hostIsBranded(): boolean {\n        return (!this.variant() || this.variant() === 'standalone') && this.isBranded();\n    }\n\n    @HostBinding('class.ecl-link--icon-only')\n    get hostIsIconOnly(): boolean {\n        return this.isIconOnly();\n    }\n\n    @HostBinding('class.ecl-link--icon')\n    get hasIcon(): boolean {\n        return this._hasIcon();\n    }\n\n    private _hasIcon = computed(() => {\n        return this.eclIconComponents()?.length > 0;\n    });\n\n    /**\n     * Adds speific ECL classes to the <a> component.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-link'), \n            this.variant() ? `ecl-link--${this.variant()}` : '',\n            (this.variant() === 'primary' && this.isHighlight()) ? 'ecl-link--primary-highlight' : '',\n        ].join(' ').trim();\n    }\n\n    ngAfterContentInit(): void {\n        // Add additional class to the child icon, if any.\n        if (this.eclIconComponents()?.length > 0 ) {\n            setTimeout(() => {\n                this.eclIconComponents().forEach((icn) => {\n                    icn.addExtraClass('ecl-link__icon');\n                });\n                this.cd.markForCheck();\n            });\n        }\n    }\n\n    /**\n     * Calls the native focus() method of the default HTML element.\n     */\n    onFocus(): void {\n        this.el.nativeElement.focus();\n    }\n\n    /**\n     * Calls the native click() method of the default HTML element.\n     */\n    onClick(): void {\n        this.el.nativeElement.click();\n    }\n\n    /**\n     * Calls the native blur() method of the default HTML element.\n     */\n    onBlur(): void {\n        this.el.nativeElement.blur();\n    }\n}\n",
+            "sourceCode": "import { AfterContentInit, booleanAttribute, ChangeDetectorRef, contentChildren, Directive, ElementRef, HostBinding, inject, input, Renderer2, effect, computed, forwardRef } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * 'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.\n */\n@Directive({\n    selector: '[eclLink]',\n})\nexport class EclLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    el = inject(ElementRef);\n    renderer = inject(Renderer2);\n    cd = inject(ChangeDetectorRef);\n\n    /**\n     * Additional HTML attributes to be set on the link element.\n     * Used e.g. by social-media-follow for passing extra_attributes.\n     */\n    extraAttributes = input<{ name: string; value?: string | null }[] | undefined>();\n\n    /**\n     * Property to style the component as 'inverted' (with dark background). Can be used alone or with 'standalone' variant.\n     */\n    isInverted = input(false, { transform: booleanAttribute });\n\n    /**\n     * Property to style the component if it consist only of an icon.\n     */\n    isIconOnly = input(false, { transform: booleanAttribute });\n\n    /** Adds class for hightlighted link (works only with 'primary' variant) \n     * @deprecated - to be removed in v23. Use variant='primary-highlight', as only primary variant can be highlighted.\n    */\n    isHighlight = input(false, { transform: booleanAttribute });\n    \n    /**\n     * @deprecated - will be removed in v21. Deprecated on ECL side.\n     */\n    isNoVisited = input(false, { transform: booleanAttribute });\n\n    isBranded = input(false, { transform: booleanAttribute });\n\n    /**\n     * With 'variant' property user can add some more specific styling to the <a> component.\n     */\n    variant = input<'standalone' | 'primary' | 'secondary' | 'primary-neutral' | 'primary-highlight'>();\n\n    eclIconComponents = contentChildren(forwardRef(() => EclIconComponent), { descendants: true });\n\n    constructor() {\n        super();\n        effect(() => {\n            const attrs = this.extraAttributes();\n            if (attrs && attrs.length) {\n                attrs.forEach((attr) => {\n                    if (attr?.name) {\n                        this.el.nativeElement.setAttribute(attr.name, attr.value ?? '');\n                    }\n                });\n            }\n        });\n    }\n\n    @HostBinding('class.ecl-link--inverted')\n    get hostIsInverted(): boolean {\n        return (!this.variant() || this.variant() === 'standalone') && this.isInverted();\n    }\n\n    @HostBinding('class.ecl-link--brand')\n    get hostIsBranded(): boolean {\n        return (!this.variant() || this.variant() === 'standalone') && this.isBranded();\n    }\n\n    @HostBinding('class.ecl-link--icon-only')\n    get hostIsIconOnly(): boolean {\n        return this.isIconOnly();\n    }\n\n    @HostBinding('class.ecl-link--icon')\n    get hasIcon(): boolean {\n        return this._hasIcon();\n    }\n\n    private _hasIcon = computed(() => {\n        return this.eclIconComponents()?.length > 0;\n    });\n\n    /**\n     * Adds speific ECL classes to the <a> component.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        const variantClass = this.variant()\n            ? (this.variant() === 'secondary' && this.isInverted()\n                ? 'ecl-link--secondary-inverted'\n                : `ecl-link--${this.variant()}`)\n            : '';\n\n        return [super.getCssClasses('ecl-link'),\n            variantClass,\n            (this.variant() === 'primary' && this.isHighlight()) ? 'ecl-link--primary-highlight' : '',\n        ].join(' ').trim();\n    }\n\n    ngAfterContentInit(): void {\n        // Add additional class to the child icon, if any.\n        if (this.eclIconComponents()?.length > 0 ) {\n            setTimeout(() => {\n                this.eclIconComponents().forEach((icn) => {\n                    icn.addExtraClass('ecl-link__icon');\n                });\n                this.cd.markForCheck();\n            });\n        }\n    }\n\n    /**\n     * Calls the native focus() method of the default HTML element.\n     */\n    onFocus(): void {\n        this.el.nativeElement.focus();\n    }\n\n    /**\n     * Calls the native click() method of the default HTML element.\n     */\n    onClick(): void {\n        this.el.nativeElement.click();\n    }\n\n    /**\n     * Calls the native blur() method of the default HTML element.\n     */\n    onBlur(): void {\n        this.el.nativeElement.blur();\n    }\n}\n",
             "selector": "[eclLink]",
             "providers": [],
             "hostDirectives": [],
@@ -17372,7 +17482,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 100,
+                    "line": 106,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -17382,7 +17492,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 129,
+                    "line": 135,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalls the native blur() method of the default HTML element.\n",
@@ -17394,7 +17504,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 122,
+                    "line": 128,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalls the native click() method of the default HTML element.\n",
@@ -17406,7 +17516,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 115,
+                    "line": 121,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalls the native focus() method of the default HTML element.\n",
@@ -23999,12 +24109,12 @@
         },
         {
             "name": "EclPageInformationDirective",
-            "id": "directive-EclPageInformationDirective-b53e629a54be49a00e99bf54cc4275080791c9f2be7801d9d15f6df7fd9c1066bdddf30737cebbe2edbee97874fc283b51d21c772b71448bd0dcb7788d672c27",
+            "id": "directive-EclPageInformationDirective-3c6a207ca2a00bf8f028f647d1379add5f9bed8a9e3c6e72eba21984e4d0b86c3c214a7fa5d40accd60969cefb4b445a78c49ad6b52c64c82692e3b4319f3d1a",
             "file": "packages/ecl/components/ecl-page-information/ecl-page-information.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n    selector: '[eclPageInformation]',\n})\nexport class EclPageInformationDirective {\n    /**\n     * Applies 'ecl-page-info' class to the host.\n     *\n     * @default 'ecl-page-info'\n     */\n    @HostBinding('class') className = 'ecl-page-info';\n}",
+            "sourceCode": "import { Directive } from \"@angular/core\";\n\n@Directive({\n    selector: '[eclPageInformation]',\n    host: {\n        class: 'ecl-page-info'\n    }\n})\nexport class EclPageInformationDirective {}",
             "selector": "[eclPageInformation]",
             "providers": [],
             "hostDirectives": [],
@@ -24013,85 +24123,9 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "name": "class",
-                    "defaultValue": "'ecl-page-info'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "pos": 226,
-                            "end": 256,
-                            "kind": 328,
-                            "id": 0,
-                            "flags": 16842752,
-                            "modifierFlagsCache": 0,
-                            "transformFlags": 0,
-                            "tagName": {
-                                "pos": 227,
-                                "end": 234,
-                                "kind": 80,
-                                "id": 0,
-                                "flags": 16842752,
-                                "transformFlags": 0,
-                                "escapedText": "default"
-                            },
-                            "comment": "<p>&#39;ecl-page-info&#39;</p>\n"
-                        }
-                    ],
-                    "rawdescription": "\n\nApplies 'ecl-page-info' class to the host.\n\n",
-                    "description": "<p>Applies &#39;ecl-page-info&#39; class to the host.</p>\n",
-                    "line": 12,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "className",
-                    "defaultValue": "'ecl-page-info'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "<p>Applies &#39;ecl-page-info&#39; class to the host.</p>\n",
-                    "line": 12,
-                    "rawdescription": "\n\nApplies 'ecl-page-info' class to the host.\n\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'class'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ],
-                    "jsdoctags": [
-                        {
-                            "pos": 226,
-                            "end": 256,
-                            "kind": 328,
-                            "id": 0,
-                            "flags": 16842752,
-                            "modifierFlagsCache": 0,
-                            "transformFlags": 0,
-                            "tagName": {
-                                "pos": 227,
-                                "end": 234,
-                                "kind": 80,
-                                "id": 0,
-                                "flags": 16842752,
-                                "transformFlags": 0,
-                                "escapedText": "default"
-                            },
-                            "comment": "<p>&#39;ecl-page-info&#39;</p>\n"
-                        }
-                    ]
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [],
             "extends": []
         },
@@ -24687,6 +24721,59 @@
                 }
             }
         },
+        {
+            "name": "EclQuizListDirective",
+            "id": "directive-EclQuizListDirective-c83d2d56d26ae6cb98cf5e5e2b544d7a1c282f5d1aa889b465ee7425fdfc3f5191cf19aa4202e2ff0f62e0e7a4554e2107c3e7593ec0e632d1f08916a0821c2c",
+            "file": "packages/ecl/components/ecl-quiz/ecl-quiz-card.component.ts",
+            "type": "directive",
+            "description": "",
+            "rawdescription": "\n",
+            "sourceCode": "import {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    Directive,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    HostListener,\n    input,\n    Output,\n    signal,\n    ViewChild\n} from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { TranslateModule } from '@ngx-translate/core';\n\nexport interface EclQuizCardFlipEvent {\n    flipped: boolean;\n    selectedOptionIndex?: number;\n    isCorrect?: boolean;\n}\n\n@Directive({\n    selector: 'ol[eclQuizList]',\n})\nexport class EclQuizListDirective {\n    @HostBinding('class.ecl-quiz__list') hasClass = true;\n}\n\n/**\n * ECL Quiz Card component – represents a single card in the quiz.\n *\n * For the 'reveal' variant, the entire card is clickable to flip.\n * For the 'poll' variant, individual options trigger the flip.\n */\n@Component({\n    selector: 'li[eclQuizCard]',\n    host: {\n        '[attr.id]': 'id()',\n        '[attr.aria-labelledby]': 'questionId()',\n        '[class]': 'cssClasses',\n        '[attr.tabindex]': 'tabIndex',\n        '[style.transform]': 'styleTransform',\n        '(click)': 'onClick()',\n        '(keydown)': 'onKeydown($event)',\n    },\n    templateUrl: './ecl-quiz-card.component.html',\n    imports: [EclIconComponent, TranslateModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EclQuizCardComponent extends ECLBaseDirective {\n\n    /**\n     * Unique identifier for the card, used for accessibility attributes.\n     * If not provided, a unique ID is generated automatically.\n     */\n    id = input<string>(`ecl-quiz-card-${crypto.randomUUID()}`);\n\n    /**\n     * Unique identifier for the question element.\n     */\n    questionId = computed(() => `${this.id()}-question`);\n\n    /**\n     * Unique identifier for the answer element.\n     */\n    answerId = computed(() => `${this.id()}-answer`);\n\n    /**\n     * The question text displayed on the front of the card.\n     */\n    question = input<string>('');\n\n    /**\n     * The answer text displayed on the back of the card.\n     * Used in 'reveal' variant or as explanation in 'poll' variant.\n     */\n    answer = input<string>('');\n\n    /**\n     * The answer title (e.g. \"The correct answer is A.\") for poll variant.\n     */\n    answerTitle = input<string>('');\n\n    /**\n     * Category label displayed in the card header (poll variant).\n     */\n    category = input<string>('');\n\n    /**\n     * Icon name for the card header.\n     * Defaults to 'sparkle' for reveal, 'question' for poll.\n     */\n    icon = input<string>('');\n\n    /**\n     * Icon size for the card header.\n     */\n    iconSize = input<'xs' | 's' | 'm' | 'l' | 'xl' | '2xl'>('xl');\n\n    /**\n     * The variant of the quiz, set by the parent EclQuizComponent.\n     */\n    variant: 'poll' | 'reveal' = 'reveal';\n\n    /**\n     * Options for the poll variant. Each option has text and a match flag.\n     */\n    options = input<Array<{ text: string; match: boolean }>>([]);\n\n    /**\n     * Emitted when the card is flipped.\n     */\n    @Output() cardFlip = new EventEmitter<EclQuizCardFlipEvent>();\n\n    @ViewChild('frontElement') frontElementRef: ElementRef;\n    @ViewChild('backElement') backElementRef: ElementRef;\n    @ViewChild('questionElement') questionElementRef: ElementRef;\n    @ViewChild('answerElement') answerElementRef: ElementRef;\n    @ViewChild('contentElement') contentElementRef: ElementRef;\n\n    /** Whether the card is currently flipped (showing back). */\n    isFlipped = signal(false);\n\n    /** Index of the selected option (poll variant). */\n    selectedOptionIndex = signal<number | null>(null);\n\n    /** Whether the selected option is correct (poll variant). */\n    isCorrect = signal<boolean | null>(null);\n\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-quiz-card'),\n            this.isFlipped() ? 'ecl-quiz-card__flipped' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    get tabIndex(): number | null {\n        return this.variant === 'reveal' ? 0 : null;\n    }\n\n    readonly styleTransform = 'translate3d(0px, 0px, 0px)';\n\n    /**\n     * Handle click on the card itself (reveal variant).\n     */\n    onClick(): void {\n        if (this.variant === 'reveal') {\n            this.flipCard();\n        }\n    }\n\n    /**\n     * Handle keyboard events (Enter/Space to flip for reveal variant).\n     */\n    onKeydown(event: KeyboardEvent): void {\n        if (this.variant === 'reveal' && (event.key === 'Enter' || event.key === ' ')) {\n            event.preventDefault();\n            this.flipCard();\n        }\n    }\n\n    /**\n     * Handle option click (poll variant).\n     */\n    onOptionClick(optionIndex: number): void {\n        if (this.isFlipped()) {\n            return;\n        }\n        const optionsList = this.options();\n        this.selectedOptionIndex.set(optionIndex);\n        this.isCorrect.set(optionsList[optionIndex]?.match ?? false);\n        this.flipCard();\n    }\n\n    /**\n     * Handle keyboard on option (poll variant).\n     */\n    onOptionKeydown(event: KeyboardEvent, optionIndex: number): void {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.onOptionClick(optionIndex);\n        }\n    }\n\n    /**\n     * Flip the card between front and back.\n     */\n    flipCard(): void {\n        this.isFlipped.update(v => !v);\n        const event: EclQuizCardFlipEvent = { flipped: this.isFlipped() };\n        if (this.variant === 'poll') {\n            event.selectedOptionIndex = this.selectedOptionIndex();\n            event.isCorrect = this.isCorrect();\n        }\n        this.cardFlip.emit(event);\n    }\n\n    /** Get the native front element for height calculations. */\n    getFrontElement(): HTMLElement | null {\n        return this.frontElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native back element for height calculations. */\n    getBackElement(): HTMLElement | null {\n        return this.backElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native question element for height calculations. */\n    getQuestionElement(): HTMLElement | null {\n        return this.questionElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native answer element for height calculations. */\n    getAnswerElement(): HTMLElement | null {\n        return this.answerElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native content element for height calculations. */\n    getContentElement(): HTMLElement | null {\n        return this.contentElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the resolved icon name based on variant. */\n    getIconName(): string {\n        if (this.icon()) {\n            return this.icon();\n        }\n        return this.variant === 'poll' ? 'question' : 'sparkle';\n    }\n\n    /** Get the resolved icon size. */\n    getIconSize(): string {\n        return this.iconSize() || (this.variant === 'poll' ? '2xl' : 'xl');\n    }\n}\n",
+            "selector": "ol[eclQuizList]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [
+                {
+                    "name": "class.ecl-quiz__list",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 29,
+                    "type": "boolean",
+                    "decorators": []
+                }
+            ],
+            "hostListeners": [],
+            "propertiesClass": [
+                {
+                    "name": "hasClass",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 29,
+                    "decorators": [
+                        {
+                            "name": "HostBinding",
+                            "stringifiedArguments": "'class.ecl-quiz__list'"
+                        }
+                    ],
+                    "modifierKind": [
+                        171
+                    ]
+                }
+            ],
+            "methodsClass": [],
+            "extends": []
+        },
         {
             "name": "EclRadioDirective",
             "id": "directive-EclRadioDirective-ed796fae045d97efc4f8c31767eb6794a22c80a26d50d08574b58808325f05632d78c38194fb7288453c51b581f92f027a223c523886cc7a02742b134b738acc",
@@ -32188,6 +32275,148 @@
                 }
             }
         },
+        {
+            "name": "EclTextMediaContainerDirective",
+            "id": "directive-EclTextMediaContainerDirective-011fa73d426bf3e0c97f6094948f1bc2479b2165eb3ef92d9e7e6ad26747359230a6ae79eded912d0e3d24ccfae7c97dcb529a170fb72015f68df8f25081d91e",
+            "file": "packages/ecl/components/ecl-text-media/ecl-text-media-title.directive.ts",
+            "type": "directive",
+            "description": "<p>Sets custom class for the <code>ecl-text-media</code> component, used within eclTextMedia component.</p>\n",
+            "rawdescription": "\n\nSets custom class for the `ecl-text-media` component, used within eclTextMedia component.\n",
+            "sourceCode": "import { Directive, Input } from '@angular/core';\n\n/**\n * Applies styles for the micro title element.\n */\n@Directive({\n    selector: 'div[eclTextMediaMicroTitle]',\n    host: {\n        'class': 'ecl-text-media__micro-title',\n    },\n})\nexport class EclTextMediaMicroTitleDirective {}\n\n/**\n * Applies styles for the title element.\n */\n@Directive({\n    selector: 'div[eclTextMediaTitle]',\n    host: {\n        'class': 'ecl-text-media__title',\n    },\n})\nexport class EclTextMediaTitleDirective {}\n\n/**\n * Applies styles for the description element.\n */\n@Directive({\n    selector: 'div[eclTextMediaDescription]',\n    host: {\n        'class': 'ecl-text-media__description',\n    },\n})\nexport class EclTextMediaDescriptionDirective {}\n\n/**\n * Applies styles for the link element.\n */\n@Directive({\n    selector: 'a[eclTextMediaLink]',\n    host: {\n        'class': 'ecl-text-media__link',\n    },\n})\nexport class EclTextMediaLinkDirective {}\n\n/**\n * Sets the `--ecl-image-anchor` CSS custom property for an image used\n * within the `ecl-text-media` component.\n *\n * Intended to be used together with `img[eclMediaContainerImage]`\n * from the `ecl-media-container` component.\n */\n@Directive({\n  selector: 'img[eclTextMediaImgAnchor]',\n  host: {\n    '[style.--ecl-image-anchor]': 'anchor',\n  },\n})\nexport class EclTextMediaMediaAnchorDirective {\n  @Input('eclTextMediaImgAnchor') anchor: 'center' | 'top left' | 'bottom right' | '20% 20%' = 'center';\n}\n\n/**\n * Sets custom class for the `ecl-text-media` component, used within eclTextMedia component.\n */\n@Directive({\n  selector: 'ecl-media-container[eclTextMediaContainer]',\n  host: {\n    'class': 'ecl-text-media__media_container',\n  },\n})\nexport class EclTextMediaContainerDirective {}\n",
+            "selector": "ecl-media-container[eclTextMediaContainer]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "extends": []
+        },
+        {
+            "name": "EclTextMediaDescriptionDirective",
+            "id": "directive-EclTextMediaDescriptionDirective-011fa73d426bf3e0c97f6094948f1bc2479b2165eb3ef92d9e7e6ad26747359230a6ae79eded912d0e3d24ccfae7c97dcb529a170fb72015f68df8f25081d91e",
+            "file": "packages/ecl/components/ecl-text-media/ecl-text-media-title.directive.ts",
+            "type": "directive",
+            "description": "<p>Applies styles for the description element.</p>\n",
+            "rawdescription": "\n\nApplies styles for the description element.\n",
+            "sourceCode": "import { Directive, Input } from '@angular/core';\n\n/**\n * Applies styles for the micro title element.\n */\n@Directive({\n    selector: 'div[eclTextMediaMicroTitle]',\n    host: {\n        'class': 'ecl-text-media__micro-title',\n    },\n})\nexport class EclTextMediaMicroTitleDirective {}\n\n/**\n * Applies styles for the title element.\n */\n@Directive({\n    selector: 'div[eclTextMediaTitle]',\n    host: {\n        'class': 'ecl-text-media__title',\n    },\n})\nexport class EclTextMediaTitleDirective {}\n\n/**\n * Applies styles for the description element.\n */\n@Directive({\n    selector: 'div[eclTextMediaDescription]',\n    host: {\n        'class': 'ecl-text-media__description',\n    },\n})\nexport class EclTextMediaDescriptionDirective {}\n\n/**\n * Applies styles for the link element.\n */\n@Directive({\n    selector: 'a[eclTextMediaLink]',\n    host: {\n        'class': 'ecl-text-media__link',\n    },\n})\nexport class EclTextMediaLinkDirective {}\n\n/**\n * Sets the `--ecl-image-anchor` CSS custom property for an image used\n * within the `ecl-text-media` component.\n *\n * Intended to be used together with `img[eclMediaContainerImage]`\n * from the `ecl-media-container` component.\n */\n@Directive({\n  selector: 'img[eclTextMediaImgAnchor]',\n  host: {\n    '[style.--ecl-image-anchor]': 'anchor',\n  },\n})\nexport class EclTextMediaMediaAnchorDirective {\n  @Input('eclTextMediaImgAnchor') anchor: 'center' | 'top left' | 'bottom right' | '20% 20%' = 'center';\n}\n\n/**\n * Sets custom class for the `ecl-text-media` component, used within eclTextMedia component.\n */\n@Directive({\n  selector: 'ecl-media-container[eclTextMediaContainer]',\n  host: {\n    'class': 'ecl-text-media__media_container',\n  },\n})\nexport class EclTextMediaContainerDirective {}\n",
+            "selector": "div[eclTextMediaDescription]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "extends": []
+        },
+        {
+            "name": "EclTextMediaLinkDirective",
+            "id": "directive-EclTextMediaLinkDirective-011fa73d426bf3e0c97f6094948f1bc2479b2165eb3ef92d9e7e6ad26747359230a6ae79eded912d0e3d24ccfae7c97dcb529a170fb72015f68df8f25081d91e",
+            "file": "packages/ecl/components/ecl-text-media/ecl-text-media-title.directive.ts",
+            "type": "directive",
+            "description": "<p>Applies styles for the link element.</p>\n",
+            "rawdescription": "\n\nApplies styles for the link element.\n",
+            "sourceCode": "import { Directive, Input } from '@angular/core';\n\n/**\n * Applies styles for the micro title element.\n */\n@Directive({\n    selector: 'div[eclTextMediaMicroTitle]',\n    host: {\n        'class': 'ecl-text-media__micro-title',\n    },\n})\nexport class EclTextMediaMicroTitleDirective {}\n\n/**\n * Applies styles for the title element.\n */\n@Directive({\n    selector: 'div[eclTextMediaTitle]',\n    host: {\n        'class': 'ecl-text-media__title',\n    },\n})\nexport class EclTextMediaTitleDirective {}\n\n/**\n * Applies styles for the description element.\n */\n@Directive({\n    selector: 'div[eclTextMediaDescription]',\n    host: {\n        'class': 'ecl-text-media__description',\n    },\n})\nexport class EclTextMediaDescriptionDirective {}\n\n/**\n * Applies styles for the link element.\n */\n@Directive({\n    selector: 'a[eclTextMediaLink]',\n    host: {\n        'class': 'ecl-text-media__link',\n    },\n})\nexport class EclTextMediaLinkDirective {}\n\n/**\n * Sets the `--ecl-image-anchor` CSS custom property for an image used\n * within the `ecl-text-media` component.\n *\n * Intended to be used together with `img[eclMediaContainerImage]`\n * from the `ecl-media-container` component.\n */\n@Directive({\n  selector: 'img[eclTextMediaImgAnchor]',\n  host: {\n    '[style.--ecl-image-anchor]': 'anchor',\n  },\n})\nexport class EclTextMediaMediaAnchorDirective {\n  @Input('eclTextMediaImgAnchor') anchor: 'center' | 'top left' | 'bottom right' | '20% 20%' = 'center';\n}\n\n/**\n * Sets custom class for the `ecl-text-media` component, used within eclTextMedia component.\n */\n@Directive({\n  selector: 'ecl-media-container[eclTextMediaContainer]',\n  host: {\n    'class': 'ecl-text-media__media_container',\n  },\n})\nexport class EclTextMediaContainerDirective {}\n",
+            "selector": "a[eclTextMediaLink]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "extends": []
+        },
+        {
+            "name": "EclTextMediaMediaAnchorDirective",
+            "id": "directive-EclTextMediaMediaAnchorDirective-011fa73d426bf3e0c97f6094948f1bc2479b2165eb3ef92d9e7e6ad26747359230a6ae79eded912d0e3d24ccfae7c97dcb529a170fb72015f68df8f25081d91e",
+            "file": "packages/ecl/components/ecl-text-media/ecl-text-media-title.directive.ts",
+            "type": "directive",
+            "description": "<p>Sets the <code>--ecl-image-anchor</code> CSS custom property for an image used\nwithin the <code>ecl-text-media</code> component.</p>\n<p>Intended to be used together with <code>img[eclMediaContainerImage]</code>\nfrom the <code>ecl-media-container</code> component.</p>\n",
+            "rawdescription": "\n\nSets the `--ecl-image-anchor` CSS custom property for an image used\nwithin the `ecl-text-media` component.\n\nIntended to be used together with `img[eclMediaContainerImage]`\nfrom the `ecl-media-container` component.\n",
+            "sourceCode": "import { Directive, Input } from '@angular/core';\n\n/**\n * Applies styles for the micro title element.\n */\n@Directive({\n    selector: 'div[eclTextMediaMicroTitle]',\n    host: {\n        'class': 'ecl-text-media__micro-title',\n    },\n})\nexport class EclTextMediaMicroTitleDirective {}\n\n/**\n * Applies styles for the title element.\n */\n@Directive({\n    selector: 'div[eclTextMediaTitle]',\n    host: {\n        'class': 'ecl-text-media__title',\n    },\n})\nexport class EclTextMediaTitleDirective {}\n\n/**\n * Applies styles for the description element.\n */\n@Directive({\n    selector: 'div[eclTextMediaDescription]',\n    host: {\n        'class': 'ecl-text-media__description',\n    },\n})\nexport class EclTextMediaDescriptionDirective {}\n\n/**\n * Applies styles for the link element.\n */\n@Directive({\n    selector: 'a[eclTextMediaLink]',\n    host: {\n        'class': 'ecl-text-media__link',\n    },\n})\nexport class EclTextMediaLinkDirective {}\n\n/**\n * Sets the `--ecl-image-anchor` CSS custom property for an image used\n * within the `ecl-text-media` component.\n *\n * Intended to be used together with `img[eclMediaContainerImage]`\n * from the `ecl-media-container` component.\n */\n@Directive({\n  selector: 'img[eclTextMediaImgAnchor]',\n  host: {\n    '[style.--ecl-image-anchor]': 'anchor',\n  },\n})\nexport class EclTextMediaMediaAnchorDirective {\n  @Input('eclTextMediaImgAnchor') anchor: 'center' | 'top left' | 'bottom right' | '20% 20%' = 'center';\n}\n\n/**\n * Sets custom class for the `ecl-text-media` component, used within eclTextMedia component.\n */\n@Directive({\n  selector: 'ecl-media-container[eclTextMediaContainer]',\n  host: {\n    'class': 'ecl-text-media__media_container',\n  },\n})\nexport class EclTextMediaContainerDirective {}\n",
+            "selector": "img[eclTextMediaImgAnchor]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [
+                {
+                    "name": "eclTextMediaImgAnchor",
+                    "defaultValue": "'center'",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 61,
+                    "type": "\"center\" | \"top left\" | \"bottom right\" | \"20% 20%\"",
+                    "decorators": []
+                }
+            ],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "extends": []
+        },
+        {
+            "name": "EclTextMediaMicroTitleDirective",
+            "id": "directive-EclTextMediaMicroTitleDirective-011fa73d426bf3e0c97f6094948f1bc2479b2165eb3ef92d9e7e6ad26747359230a6ae79eded912d0e3d24ccfae7c97dcb529a170fb72015f68df8f25081d91e",
+            "file": "packages/ecl/components/ecl-text-media/ecl-text-media-title.directive.ts",
+            "type": "directive",
+            "description": "<p>Applies styles for the micro title element.</p>\n",
+            "rawdescription": "\n\nApplies styles for the micro title element.\n",
+            "sourceCode": "import { Directive, Input } from '@angular/core';\n\n/**\n * Applies styles for the micro title element.\n */\n@Directive({\n    selector: 'div[eclTextMediaMicroTitle]',\n    host: {\n        'class': 'ecl-text-media__micro-title',\n    },\n})\nexport class EclTextMediaMicroTitleDirective {}\n\n/**\n * Applies styles for the title element.\n */\n@Directive({\n    selector: 'div[eclTextMediaTitle]',\n    host: {\n        'class': 'ecl-text-media__title',\n    },\n})\nexport class EclTextMediaTitleDirective {}\n\n/**\n * Applies styles for the description element.\n */\n@Directive({\n    selector: 'div[eclTextMediaDescription]',\n    host: {\n        'class': 'ecl-text-media__description',\n    },\n})\nexport class EclTextMediaDescriptionDirective {}\n\n/**\n * Applies styles for the link element.\n */\n@Directive({\n    selector: 'a[eclTextMediaLink]',\n    host: {\n        'class': 'ecl-text-media__link',\n    },\n})\nexport class EclTextMediaLinkDirective {}\n\n/**\n * Sets the `--ecl-image-anchor` CSS custom property for an image used\n * within the `ecl-text-media` component.\n *\n * Intended to be used together with `img[eclMediaContainerImage]`\n * from the `ecl-media-container` component.\n */\n@Directive({\n  selector: 'img[eclTextMediaImgAnchor]',\n  host: {\n    '[style.--ecl-image-anchor]': 'anchor',\n  },\n})\nexport class EclTextMediaMediaAnchorDirective {\n  @Input('eclTextMediaImgAnchor') anchor: 'center' | 'top left' | 'bottom right' | '20% 20%' = 'center';\n}\n\n/**\n * Sets custom class for the `ecl-text-media` component, used within eclTextMedia component.\n */\n@Directive({\n  selector: 'ecl-media-container[eclTextMediaContainer]',\n  host: {\n    'class': 'ecl-text-media__media_container',\n  },\n})\nexport class EclTextMediaContainerDirective {}\n",
+            "selector": "div[eclTextMediaMicroTitle]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "extends": []
+        },
+        {
+            "name": "EclTextMediaTitleDirective",
+            "id": "directive-EclTextMediaTitleDirective-011fa73d426bf3e0c97f6094948f1bc2479b2165eb3ef92d9e7e6ad26747359230a6ae79eded912d0e3d24ccfae7c97dcb529a170fb72015f68df8f25081d91e",
+            "file": "packages/ecl/components/ecl-text-media/ecl-text-media-title.directive.ts",
+            "type": "directive",
+            "description": "<p>Applies styles for the title element.</p>\n",
+            "rawdescription": "\n\nApplies styles for the title element.\n",
+            "sourceCode": "import { Directive, Input } from '@angular/core';\n\n/**\n * Applies styles for the micro title element.\n */\n@Directive({\n    selector: 'div[eclTextMediaMicroTitle]',\n    host: {\n        'class': 'ecl-text-media__micro-title',\n    },\n})\nexport class EclTextMediaMicroTitleDirective {}\n\n/**\n * Applies styles for the title element.\n */\n@Directive({\n    selector: 'div[eclTextMediaTitle]',\n    host: {\n        'class': 'ecl-text-media__title',\n    },\n})\nexport class EclTextMediaTitleDirective {}\n\n/**\n * Applies styles for the description element.\n */\n@Directive({\n    selector: 'div[eclTextMediaDescription]',\n    host: {\n        'class': 'ecl-text-media__description',\n    },\n})\nexport class EclTextMediaDescriptionDirective {}\n\n/**\n * Applies styles for the link element.\n */\n@Directive({\n    selector: 'a[eclTextMediaLink]',\n    host: {\n        'class': 'ecl-text-media__link',\n    },\n})\nexport class EclTextMediaLinkDirective {}\n\n/**\n * Sets the `--ecl-image-anchor` CSS custom property for an image used\n * within the `ecl-text-media` component.\n *\n * Intended to be used together with `img[eclMediaContainerImage]`\n * from the `ecl-media-container` component.\n */\n@Directive({\n  selector: 'img[eclTextMediaImgAnchor]',\n  host: {\n    '[style.--ecl-image-anchor]': 'anchor',\n  },\n})\nexport class EclTextMediaMediaAnchorDirective {\n  @Input('eclTextMediaImgAnchor') anchor: 'center' | 'top left' | 'bottom right' | '20% 20%' = 'center';\n}\n\n/**\n * Sets custom class for the `ecl-text-media` component, used within eclTextMedia component.\n */\n@Directive({\n  selector: 'ecl-media-container[eclTextMediaContainer]',\n  host: {\n    'class': 'ecl-text-media__media_container',\n  },\n})\nexport class EclTextMediaContainerDirective {}\n",
+            "selector": "div[eclTextMediaTitle]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "extends": []
+        },
         {
             "name": "EclTimelineItemLabelDirective",
             "id": "directive-EclTimelineItemLabelDirective-c8b2a2cb9d3e1ee87896a674ae8d646eb3bb142f9a8dc7c3a45b5834d82d0a88d45d8e9a66495eac00fd544726d487f7eb7ed1530a710a63e9a02ccf539c8af9",
@@ -33354,6 +33583,413 @@
             ],
             "templateData": "<div class=\"ecl-add-to-calendar__info\" [class.ecl-container]=\"isFullWidth()\">\n    <div class=\"ecl-add-to-calendar__info-content\">\n        @if (eclTitle()) {\n        <div class=\"ecl-add-to-calendar__title\">{{ eclTitle() }}</div>\n        }\n        @if (calendarDates() || calendarTime() || calendarLocation()) {\n        <ul class=\"ecl-add-to-calendar__meta-list\">\n            @if (calendarDates()) {\n            <li class=\"ecl-add-to-calendar__meta-item\">\n                <ecl-icon icon=\"calendar\" size=\"s\" class=\"ecl-add-to-calendar__meta-icon\" aria-hidden=\"true\"></ecl-icon>\n                <span class=\"ecl-add-to-calendar__meta-label\">{{ calendarDates() }}</span>\n            </li>\n            }\n            @if (calendarTime()) {\n            <li class=\"ecl-add-to-calendar__meta-item\">\n                <ecl-icon icon=\"clock\" size=\"s\" class=\"ecl-add-to-calendar__meta-icon\" aria-hidden=\"true\"></ecl-icon>\n                <span class=\"ecl-add-to-calendar__meta-label\">{{ calendarTime() }}</span>\n            </li>\n            }\n            @if (calendarLocation()) {\n            <li class=\"ecl-add-to-calendar__meta-item\">\n                <ecl-icon icon=\"location\" size=\"s\" class=\"ecl-add-to-calendar__meta-icon\" aria-hidden=\"true\"></ecl-icon>\n                <span class=\"ecl-add-to-calendar__meta-label\">{{ calendarLocation() }}</span>\n            </li>\n            }\n        </ul>\n        }\n    </div>\n    \n    <ng-content select=\"div[eclAddToCalendarAction]\"></ng-content>\n</div>"
         },
+        {
+            "name": "EclAnimatedNumbersComponent",
+            "id": "component-EclAnimatedNumbersComponent-fcc4fb55f35ff7eb636a9dc4ab65f72e80453e4733b72b6df0206522b8e2e6acf178fe260472ac88554a1308d62c2808313745bbb96dd674b84ebd4bda4ba178",
+            "file": "packages/ecl/components/ecl-animated-numbers/ecl-animated-numbers.component.ts",
+            "changeDetection": "ChangeDetectionStrategy.OnPush",
+            "encapsulation": [],
+            "entryComponents": [],
+            "host": {},
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "div[eclAnimatedNumbers]",
+            "styleUrls": [],
+            "styles": [],
+            "templateUrl": [
+                "./ecl-animated-numbers.component.html"
+            ],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [
+                {
+                    "name": "hasContentColor",
+                    "defaultValue": "false, { transform: booleanAttribute }",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Applies a colour to the counter values.</p>\n",
+                    "line": 41,
+                    "rawdescription": "\nApplies a colour to the counter values.",
+                    "required": false
+                },
+                {
+                    "name": "hasDarkBackground",
+                    "defaultValue": "false, { transform: booleanAttribute }",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Applies a dark background to the component.</p>\n",
+                    "line": 35,
+                    "rawdescription": "\nApplies a dark background to the component.",
+                    "required": false
+                },
+                {
+                    "name": "hasLeftBorder",
+                    "defaultValue": "false, { transform: booleanAttribute }",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Adds a left border to the animated number items.</p>\n",
+                    "line": 38,
+                    "rawdescription": "\nAdds a left border to the animated number items.",
+                    "required": false
+                },
+                {
+                    "name": "sourcesLabel",
+                    "defaultValue": "'Sources:'",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Label displayed before the sources list.</p>\n",
+                    "line": 44,
+                    "rawdescription": "\nLabel displayed before the sources list.",
+                    "required": false
+                },
+                {
+                    "name": "class",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 8,
+                    "type": "string",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                },
+                {
+                    "name": "e2eAttr",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 10,
+                    "type": "any",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                },
+                {
+                    "required": false,
+                    "name": "tabindex",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 13,
+                    "type": "number",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                }
+            ],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [
+                {
+                    "name": "getCssClasses",
+                    "args": [
+                        {
+                            "name": "rootClass",
+                            "type": "string",
+                            "optional": false,
+                            "dotDotDotToken": false,
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "string",
+                    "typeParameters": [],
+                    "line": 15,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "jsdoctags": [
+                        {
+                            "name": "rootClass",
+                            "type": "string",
+                            "optional": false,
+                            "dotDotDotToken": false,
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                }
+            ],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": false,
+            "imports": [],
+            "description": "<p>Container component for the ECL Animated Numbers pattern.\nWraps animated number items and an optional sources footer.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;div eclAnimatedNumbers [sourcesLabel]=&quot;&#39;Sources:&#39;&quot;&gt;\n    &lt;div eclAnimatedNumbersItems&gt;\n        &lt;div eclAnimatedNumbersItem [eclValue]=&quot;&#39;213&#39;&quot; [category]=&quot;&#39;Revenue&#39;&quot;&gt;\n            &lt;ecl-icon eclAnimatedNumbersIcon icon=&quot;users&quot; iconSet=&quot;phosphor&quot;&gt;&lt;/ecl-icon&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;ul eclAnimatedNumbersSourcesList&gt;\n        &lt;li eclAnimatedNumbersSourcesItem&gt;\n            &lt;a eclLink eclAnimatedNumbersSource href=&quot;/example&quot;&gt;Eurostat&lt;/a&gt;\n        &lt;/li&gt;\n    &lt;/ul&gt;\n&lt;/div&gt;</code></pre></div>",
+            "rawdescription": "\n\nContainer component for the ECL Animated Numbers pattern.\nWraps animated number items and an optional sources footer.\n\n```html\n<div eclAnimatedNumbers [sourcesLabel]=\"'Sources:'\">\n    <div eclAnimatedNumbersItems>\n        <div eclAnimatedNumbersItem [eclValue]=\"'213'\" [category]=\"'Revenue'\">\n            <ecl-icon eclAnimatedNumbersIcon icon=\"users\" iconSet=\"phosphor\"></ecl-icon>\n        </div>\n    </div>\n    <ul eclAnimatedNumbersSourcesList>\n        <li eclAnimatedNumbersSourcesItem>\n            <a eclLink eclAnimatedNumbersSource href=\"/example\">Eurostat</a>\n        </li>\n    </ul>\n</div>\n```",
+            "type": "component",
+            "sourceCode": "import { booleanAttribute, ChangeDetectionStrategy, Component, input } from \"@angular/core\";\nimport { ECLBaseDirective } from \"@eui/ecl/core\";\n\n/**\n * Container component for the ECL Animated Numbers pattern.\n * Wraps animated number items and an optional sources footer.\n *\n * @example\n * ```html\n * <div eclAnimatedNumbers [sourcesLabel]=\"'Sources:'\">\n *     <div eclAnimatedNumbersItems>\n *         <div eclAnimatedNumbersItem [eclValue]=\"'213'\" [category]=\"'Revenue'\">\n *             <ecl-icon eclAnimatedNumbersIcon icon=\"users\" iconSet=\"phosphor\"></ecl-icon>\n *         </div>\n *     </div>\n *     <ul eclAnimatedNumbersSourcesList>\n *         <li eclAnimatedNumbersSourcesItem>\n *             <a eclLink eclAnimatedNumbersSource href=\"/example\">Eurostat</a>\n *         </li>\n *     </ul>\n * </div>\n * ```\n */\n@Component({\n    selector: 'div[eclAnimatedNumbers]',\n    templateUrl: './ecl-animated-numbers.component.html',\n    host: {\n        '[class]': 'cssClasses',\n    },\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EclAnimatedNumbersComponent extends ECLBaseDirective {\n\n    /** Applies a dark background to the component. */\n    hasDarkBackground = input(false, { transform: booleanAttribute });\n\n    /** Adds a left border to the animated number items. */\n    hasLeftBorder = input(false, { transform: booleanAttribute });\n\n    /** Applies a colour to the counter values. */\n    hasContentColor = input(false, { transform: booleanAttribute });\n\n    /** Label displayed before the sources list. */\n    sourcesLabel = input<string>('Sources:');\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-animated-numbers'),\n            this.hasDarkBackground() ? 'ecl-animated-numbers--with-background' : '',\n            this.hasLeftBorder() ? 'ecl-animated-numbers--border' : '',\n            this.hasContentColor() && !this.hasDarkBackground() ? 'ecl-animated-numbers--counter-color' : '',\n        ].filter(Boolean).join(' ');\n    }\n}",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "",
+            "extends": [
+                "ECLBaseDirective"
+            ],
+            "accessors": {
+                "cssClasses": {
+                    "name": "cssClasses",
+                    "getSignature": {
+                        "name": "cssClasses",
+                        "type": "string",
+                        "returnType": "string",
+                        "line": 46
+                    }
+                }
+            },
+            "templateData": "<div class=\"ecl-container\">\n    <ng-content select=\"[eclAnimatedNumbersItems]\"></ng-content>\n    <div class=\"ecl-animated-numbers__sources\">\n        <span class=\"ecl-animated-numbers__sources-label\">{{ sourcesLabel() }}</span>\n        <ng-content select=\"[eclAnimatedNumbersSourcesList]\"></ng-content>\n    </div>\n</div>"
+        },
+        {
+            "name": "EclAnimatedNumbersItemComponent",
+            "id": "component-EclAnimatedNumbersItemComponent-07e7334aaa8ab55d2901e7d7ce2d0729dae7ef35285d134679c184c175bb9af5191690ec2fd68f4334f766aee310c76b5783cd851ab478ab9536fc5757fa2dcd",
+            "file": "packages/ecl/components/ecl-animated-numbers/ecl-animated-numers-item/ecl-animated-numbers-item.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "host": {},
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "[eclAnimatedNumbersItem]",
+            "styleUrls": [],
+            "styles": [],
+            "templateUrl": [
+                "./ecl-animated-numbers-item.component.html"
+            ],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [
+                {
+                    "name": "category",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Category label displayed in the item header.</p>\n",
+                    "line": 43,
+                    "rawdescription": "\nCategory label displayed in the item header.",
+                    "required": false
+                },
+                {
+                    "name": "description",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Descriptive text displayed below the number.</p>\n",
+                    "line": 46,
+                    "rawdescription": "\nDescriptive text displayed below the number.",
+                    "required": false
+                },
+                {
+                    "name": "eclValue",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>The target numeric value to animate to. Accepts strings with non-numeric characters (they are stripped).</p>\n",
+                    "line": 49,
+                    "rawdescription": "\nThe target numeric value to animate to. Accepts strings with non-numeric characters (they are stripped).",
+                    "required": false
+                },
+                {
+                    "name": "prefix",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Text displayed before the animated number (e.g. &#39;€&#39;, &#39;billion&#39;).</p>\n",
+                    "line": 55,
+                    "rawdescription": "\nText displayed before the animated number (e.g. '€', 'billion').",
+                    "required": false
+                },
+                {
+                    "name": "suffix",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Text displayed after the animated number (e.g. &#39;€&#39;, &#39;billions&#39;).</p>\n",
+                    "line": 52,
+                    "rawdescription": "\nText displayed after the animated number (e.g. '€', 'billions').",
+                    "required": false
+                },
+                {
+                    "name": "class",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 8,
+                    "type": "string",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                },
+                {
+                    "name": "e2eAttr",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 10,
+                    "type": "any",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                },
+                {
+                    "required": false,
+                    "name": "tabindex",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 13,
+                    "type": "number",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                }
+            ],
+            "outputsClass": [],
+            "propertiesClass": [
+                {
+                    "name": "animateOnVisible",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 59,
+                    "modifierKind": [
+                        124
+                    ]
+                },
+                {
+                    "name": "animationDuration",
+                    "defaultValue": "1000",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "number",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 57,
+                    "modifierKind": [
+                        124
+                    ]
+                },
+                {
+                    "name": "animationStyle",
+                    "defaultValue": "'linear'",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "\"linear\" | \"random\"",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 58,
+                    "modifierKind": [
+                        124
+                    ]
+                }
+            ],
+            "methodsClass": [
+                {
+                    "name": "ngOnDestroy",
+                    "args": [],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 105,
+                    "deprecated": false,
+                    "deprecationMessage": ""
+                },
+                {
+                    "name": "getCssClasses",
+                    "args": [
+                        {
+                            "name": "rootClass",
+                            "type": "string",
+                            "optional": false,
+                            "dotDotDotToken": false,
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "string",
+                    "typeParameters": [],
+                    "line": 15,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "jsdoctags": [
+                        {
+                            "name": "rootClass",
+                            "type": "string",
+                            "optional": false,
+                            "dotDotDotToken": false,
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                }
+            ],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": false,
+            "imports": [],
+            "description": "<p>Represents an individual animated number item.\nDisplays a numeric value that animates from 0 to the target when scrolled into view.\nUses an IntersectionObserver to trigger animation on viewport visibility and\nrequestAnimationFrame for smooth count-up with cubic ease-out.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;div eclAnimatedNumbersItem\n     [eclValue]=&quot;&#39;1250&#39;&quot;\n     [category]=&quot;&#39;Revenue&#39;&quot;\n     [prefix]=&quot;&#39;€&#39;&quot;\n     [suffix]=&quot;&#39;billions&#39;&quot;\n     [description]=&quot;&#39;Annual revenue growth&#39;&quot;&gt;\n    &lt;ecl-icon eclAnimatedNumbersIcon icon=&quot;trend-up&quot; iconSet=&quot;phosphor&quot;&gt;&lt;/ecl-icon&gt;\n&lt;/div&gt;</code></pre></div>",
+            "rawdescription": "\n\nRepresents an individual animated number item.\nDisplays a numeric value that animates from 0 to the target when scrolled into view.\nUses an IntersectionObserver to trigger animation on viewport visibility and\nrequestAnimationFrame for smooth count-up with cubic ease-out.\n\n```html\n<div eclAnimatedNumbersItem\n     [eclValue]=\"'1250'\"\n     [category]=\"'Revenue'\"\n     [prefix]=\"'€'\"\n     [suffix]=\"'billions'\"\n     [description]=\"'Annual revenue growth'\">\n    <ecl-icon eclAnimatedNumbersIcon icon=\"trend-up\" iconSet=\"phosphor\"></ecl-icon>\n</div>\n```",
+            "type": "component",
+            "sourceCode": "import {\n    Component,\n    computed,\n    ElementRef,\n    NgZone,\n    OnDestroy,\n    afterNextRender,\n    effect,\n    inject,\n    input,\n    viewChild,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Represents an individual animated number item.\n * Displays a numeric value that animates from 0 to the target when scrolled into view.\n * Uses an IntersectionObserver to trigger animation on viewport visibility and\n * requestAnimationFrame for smooth count-up with cubic ease-out.\n *\n * @example\n * ```html\n * <div eclAnimatedNumbersItem\n *      [eclValue]=\"'1250'\"\n *      [category]=\"'Revenue'\"\n *      [prefix]=\"'€'\"\n *      [suffix]=\"'billions'\"\n *      [description]=\"'Annual revenue growth'\">\n *     <ecl-icon eclAnimatedNumbersIcon icon=\"trend-up\" iconSet=\"phosphor\"></ecl-icon>\n * </div>\n * ```\n */\n@Component({\n    selector: '[eclAnimatedNumbersItem]',\n    templateUrl: './ecl-animated-numbers-item.component.html',\n    host: {\n        'class': 'ecl-animated-number',\n    },\n})\nexport class EclAnimatedNumbersItemComponent extends ECLBaseDirective implements OnDestroy {\n\n    /** Category label displayed in the item header. */\n    category = input<string>();\n\n    /** Descriptive text displayed below the number. */\n    description = input<string>();\n\n    /** The target numeric value to animate to. Accepts strings with non-numeric characters (they are stripped). */\n    eclValue = input<string>();\n\n    /** Text displayed after the animated number (e.g. '€', 'billions'). */\n    suffix = input<string>();\n\n    /** Text displayed before the animated number (e.g. '€', 'billion'). */\n    prefix = input<string>();\n\n    protected animationDuration = 1000;\n    protected animationStyle: 'linear' | 'random' = 'linear';\n    protected animateOnVisible = true;\n\n    /** Parsed numeric target from the eclValue input. */\n    private targetValue = computed(() => {\n        const raw = this.eclValue();\n        if (!raw) return 0;\n        const cleaned = raw.replace(/[^\\d.-]/g, '');\n        return cleaned ? parseFloat(cleaned) : 0;\n    });\n\n    private valueEl = viewChild<ElementRef<HTMLElement>>('valueEl');\n    private elementRef = inject(ElementRef);\n    private ngZone = inject(NgZone);\n\n    private animationId: number | null = null;\n    private observer: IntersectionObserver | null = null;\n    private hasBeenVisible = false;\n    private isRendered = false;\n\n    constructor() {\n        super();\n\n        afterNextRender(() => {\n            this.isRendered = true;\n            // Set initial display to 0\n            const el = this.valueEl()?.nativeElement;\n            if (el) {\n                el.textContent = '0';\n            }\n\n            if (this.animateOnVisible) {\n                this.setupIntersectionObserver();\n            } else {\n                this.startAnimation(this.targetValue());\n            }\n        });\n\n        // React to eclValue changes — only re-animate if already visible and rendered\n        effect(() => {\n            const target = this.targetValue();\n            if (this.hasBeenVisible && this.isRendered) {\n                queueMicrotask(() => this.startAnimation(target));\n            }\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.cleanup();\n    }\n\n    private setupIntersectionObserver(): void {\n        this.observer = new IntersectionObserver(\n            (entries) => {\n                const entry = entries[0];\n                if (entry.isIntersecting) {\n                    this.hasBeenVisible = true;\n                    this.startAnimation(this.targetValue());\n                } else if (this.hasBeenVisible) {\n                    // Reset to 0 when scrolled out of view\n                    if (this.animationId !== null) {\n                        cancelAnimationFrame(this.animationId);\n                        this.animationId = null;\n                    }\n                    const el = this.valueEl()?.nativeElement;\n                    if (el) {\n                        el.textContent = '0';\n                        el.style.width = '';\n                    }\n                }\n            },\n            { threshold: 0.1 },\n        );\n        this.observer.observe(this.elementRef.nativeElement);\n    }\n\n    private startAnimation(to: number): void {\n        if (this.animationId !== null) {\n            cancelAnimationFrame(this.animationId);\n            this.animationId = null;\n        }\n\n        const valueElement = this.valueEl()?.nativeElement;\n        if (!valueElement) return;\n\n        // Lock width to prevent layout shift during animation\n        valueElement.textContent = to.toString();\n        const finalWidth = valueElement.offsetWidth;\n        valueElement.textContent = '0';\n        valueElement.style.width = `${finalWidth}px`;\n\n        this.ngZone.runOutsideAngular(() => {\n            const duration = this.animationDuration;\n            let startTime: number | null = null;\n            let lastUpdateTime = 0;\n            let lastValue: number | null = null;\n\n            const tick = (now: number) => {\n                if (startTime === null) {\n                    startTime = now;\n                }\n\n                const elapsed = now - startTime;\n                const progress = Math.min(elapsed / duration, 1);\n\n                // Throttle updates (~50ms)\n                if (now - lastUpdateTime < 50 && progress < 1) {\n                    this.animationId = requestAnimationFrame(tick);\n                    return;\n                }\n                lastUpdateTime = now;\n\n                let value: number;\n                if (this.animationStyle === 'random') {\n                    value = Math.floor(Math.random() * (to + 1));\n                } else {\n                    // Cubic ease-out\n                    const eased = 1 - Math.pow(1 - progress, 3);\n                    value = eased * to;\n                }\n\n                const rounded = Math.floor(value);\n\n                if (rounded !== lastValue) {\n                    valueElement.textContent = rounded.toString();\n                    lastValue = rounded;\n                }\n\n                if (progress < 1) {\n                    this.animationId = requestAnimationFrame(tick);\n                } else {\n                    valueElement.textContent = to.toString();\n                    valueElement.style.width = '';\n                    this.animationId = null;\n                }\n            };\n\n            this.animationId = requestAnimationFrame(tick);\n        });\n    }\n\n    private cleanup(): void {\n        if (this.animationId !== null) {\n            cancelAnimationFrame(this.animationId);\n            this.animationId = null;\n        }\n        if (this.observer) {\n            this.observer.disconnect();\n            this.observer = null;\n        }\n    }\n}\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "",
+            "constructorObj": {
+                "name": "constructor",
+                "description": "",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "args": [],
+                "line": 76
+            },
+            "extends": [
+                "ECLBaseDirective"
+            ],
+            "implements": [
+                "OnDestroy"
+            ],
+            "templateData": "<div class=\"ecl-animated-number__header\">\n    <div class=\"ecl-animated-number__category\">{{ category() }}</div>\n    <ng-content select=\"[eclAnimatedNumbersIcon]\"></ng-content>\n</div>\n<div class=\"ecl-animated-number__content\">\n    <div class=\"ecl-animated-number__number\">\n        <span class=\"ecl-animated-number__prefix\">{{ prefix() }}</span>\n        <div class=\"ecl-animated-number__value\" #valueEl></div>\n        <div class=\"ecl-animated-number__suffix\">{{ suffix() }}</div>\n    </div>\n</div>\n<div class=\"ecl-animated-number__description\">{{ description() }}</div>"
+        },
         {
             "name": "EclAppComponent",
             "id": "component-EclAppComponent-8c73257f7bef03b866e5360013ef450464bc58650f9e274dd3a80a7ea1586b4b5c60c21110a1a2792408e584c32a865736f0a60541e58cb7a8e3180c91fa6fbc",
@@ -46228,10 +46864,11 @@
         },
         {
             "name": "EclMediaContainerComponent",
-            "id": "component-EclMediaContainerComponent-5b5b39da0f558a82f61dcfd3be632280555951430a150f4c1fd3ad6502dc740868b63386e2e9024aaf0e0fe509755f8ddef5274b6ba1580fb14f92b1f1c8704b",
+            "id": "component-EclMediaContainerComponent-6b77b23ff5fa8dac7789bf364014bcadfacb3547ff7967d00ae78c4af3b3fbf7493cbde3ccd54fe81710be7489babe004327fb069c4472dbaab74cb4b0fd15eb",
             "file": "packages/ecl/components/ecl-media-container/ecl-media-container.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -46254,7 +46891,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed for a video only - if the video should play immediately.\n",
                     "description": "<p>Used for a video only - if the video should play immediately.</p>\n",
-                    "line": 30,
+                    "line": 35,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -46264,10 +46901,22 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 26,
+                    "line": 31,
                     "type": "boolean",
                     "decorators": []
                 },
+                {
+                    "name": "captionPosition",
+                    "defaultValue": "'bottom'",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "\"over\" | \"bottom\" | \"hidden\"",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 37,
+                    "required": false
+                },
                 {
                     "name": "class",
                     "deprecated": false,
@@ -46305,6 +46954,41 @@
             ],
             "outputsClass": [],
             "propertiesClass": [
+                {
+                    "name": "captionBottomOffset",
+                    "defaultValue": "signal<string | null>(null)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 53
+                },
+                {
+                    "name": "captionPositionOverride",
+                    "defaultValue": "signal<'over' | 'bottom' | 'hidden' | null>(null)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Allows a parent component to override the caption position programmatically.</p>\n",
+                    "line": 42,
+                    "rawdescription": "\n\nAllows a parent component to override the caption position programmatically.\n"
+                },
+                {
+                    "name": "cssClasses",
+                    "defaultValue": "computed(() => {\n        const position = this.resolvedCaptionPosition();\n        return [super.getCssClasses('ecl-media-container'),\n            position !== 'bottom' ? `ecl-media-container--caption-${position}` : ''\n        ].join(' ').trim();\n    })",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Applies specific classes for the component.</p>\n",
+                    "line": 63,
+                    "rawdescription": "\n\nApplies specific classes for the component.\n"
+                },
                 {
                     "name": "eclButtons",
                     "deprecated": false,
@@ -46313,7 +46997,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 34,
+                    "line": 46,
                     "decorators": [
                         {
                             "name": "ViewChildren",
@@ -46332,7 +47016,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 33,
+                    "line": 45,
                     "decorators": [
                         {
                             "name": "ContentChild",
@@ -46351,7 +47035,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 32,
+                    "line": 44,
                     "decorators": [
                         {
                             "name": "ContentChild",
@@ -46362,6 +47046,17 @@
                         171
                     ]
                 },
+                {
+                    "name": "hasVideo",
+                    "defaultValue": "signal(false)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 70
+                },
                 {
                     "name": "isPlaying",
                     "defaultValue": "false",
@@ -46371,7 +47066,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 46,
+                    "line": 72,
                     "modifierKind": [
                         125
                     ]
@@ -46384,7 +47079,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 35,
+                    "line": 47,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -46403,7 +47098,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 36,
+                    "line": 48,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -46413,6 +47108,18 @@
                     "modifierKind": [
                         171
                     ]
+                },
+                {
+                    "name": "resolvedCaptionPosition",
+                    "defaultValue": "computed(() => this.captionPositionOverride() ?? this.captionPosition())",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Resolved caption position considering the override.</p>\n",
+                    "line": 58,
+                    "rawdescription": "\n\nResolved caption position considering the override.\n"
                 }
             ],
             "methodsClass": [
@@ -46422,7 +47129,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 52,
+                    "line": 79,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -46432,7 +47139,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 73,
+                    "line": 110,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -46442,7 +47149,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 99,
+                    "line": 134,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWhen user clicks on 'pause' button -> pause the video and move the focus to the 'play' button.\n",
@@ -46454,7 +47161,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 85,
+                    "line": 120,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWhen user clicks on 'play' button -> start the video and move the focus to the 'pause' button.\n",
@@ -46498,18 +47205,7 @@
             ],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "name": "class",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies specific classes for the component.\n",
-                    "description": "<p>Applies specific classes for the component.</p>\n",
-                    "line": 42,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [
@@ -46523,7 +47219,7 @@
             "description": "<p>A media container is used to display media items (video, audio, image or other data) with a caption.</p>\n",
             "rawdescription": "\n\nA media container is used to display media items (video, audio, image or other data) with a caption.\n",
             "type": "component",
-            "sourceCode": "import { AfterContentInit, Component, ContentChild, HostBinding, Input, Renderer2, ViewChild, booleanAttribute, ViewChildren, QueryList, inject, PLATFORM_ID, OnDestroy } from '@angular/core';\nimport { take, timer } from 'rxjs'\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclExpandableComponent } from '@eui/ecl/components/ecl-expandable';\nimport { EclMediaContainerItemDirective } from './ecl-media-container-item.directive';\nimport { EclButtonComponent, EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { isPlatformBrowser } from '@angular/common';\n\n/**\n * A media container is used to display media items (video, audio, image or other data) with a caption.\n */\n@Component({\n    selector: 'ecl-media-container',\n    templateUrl: './ecl-media-container.component.html',\n    imports: [...EUI_ECL_BUTTON, ...EUI_ECL_ICON],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclMediaContainerComponent extends ECLBaseDirective implements AfterContentInit, OnDestroy {\n    @Input({ transform: booleanAttribute }) isFullWidth = false;\n    /**\n     * Used for a video only - if the video should play immediately.\n     */\n    @Input({ transform: booleanAttribute }) eclAutoplay = false;\n\n    @ContentChild(EclExpandableComponent) expandable: EclExpandableComponent;\n    @ContentChild(EclMediaContainerItemDirective) eclMediaContainerItem: EclMediaContainerItemDirective;\n    @ViewChildren(EclButtonComponent) eclButtons: QueryList<EclButtonComponent>;\n    @ViewChild('pauseButton') pauseButton: EclButtonComponent;\n    @ViewChild('playButton') playButton: EclButtonComponent;\n\n    /**\n     * Applies specific classes for the component.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-media-container')].join(' ').trim();\n    }\n\n    public isPlaying = false;\n    private readonly DELAY = 0;\n    private renderer = inject(Renderer2);\n    private removeVideoListeners: Array<() => void> = [];\n    private platformId = inject(PLATFORM_ID);\n\n    ngAfterContentInit(): void {\n        if (isPlatformBrowser(this.platformId) && this.hasVideo && this.eclAutoplay) {\n            const videoEl = this.eclMediaContainerItem?.el?.nativeElement as HTMLVideoElement | undefined;\n            if (videoEl) {\n                this.removeVideoListeners.push(\n                    this.renderer.listen(videoEl, 'play', () => (this.isPlaying = true)),\n                    this.renderer.listen(videoEl, 'pause', () => (this.isPlaying = false)),\n                );\n\n                this.renderer.setAttribute(videoEl, 'loop', '');\n                this.renderer.setAttribute(videoEl, 'muted', '');\n                this.renderer.setProperty(videoEl, 'muted', true);\n                this.renderer.removeAttribute(videoEl, 'controls');\n            }\n        }\n\n        if (this.expandable) {\n            this.expandable.class = [this.expandable.class, 'ecl-media-container__expandable'].join(' ');\n        }\n    }\n\n    ngOnDestroy(): void {\n        for (const unlisten of this.removeVideoListeners) unlisten();\n        this.removeVideoListeners = [];\n    }\n\n    get hasVideo(): boolean {\n        return this.eclMediaContainerItem?.isVideo;\n    }\n\n    /**\n     * When user clicks on 'play' button -> start the video and move the focus to the 'pause' button.\n     */\n    onVideoPlay(): void {\n        const videoEl = this.eclMediaContainerItem.el.nativeElement;\n        videoEl.play();\n\n        timer(this.DELAY).pipe(take(1)).subscribe(() => {\n            const pauseButton = this.eclButtons.find(\n              button => button === this.pauseButton );\n            this.focusOnButton(pauseButton);\n        });\n    }\n\n    /**\n     * When user clicks on 'pause' button -> pause the video and move the focus to the 'play' button.\n     */\n    onVideoPause(): void {\n        const videoEl = this.eclMediaContainerItem.el.nativeElement;\n        videoEl.pause();\n\n        timer(this.DELAY).pipe(take(1)).subscribe(() => {\n            const playButton  = this.eclButtons.find(\n              button => button === this.playButton);\n            this.focusOnButton(playButton);\n        });\n    }\n\n     private focusOnButton(button: EclButtonComponent): void {\n        if (!button) {\n            return;\n        }\n        button.onFocus();\n    }\n}\n",
+            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { AfterContentInit, booleanAttribute, Component, computed, ContentChild, contentChild, DOCUMENT, ElementRef, inject, Input, input, OnDestroy, PLATFORM_ID, QueryList, Renderer2, signal, ViewChild, ViewChildren } from '@angular/core';\nimport { EclButtonComponent, EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EclExpandableComponent } from '@eui/ecl/components/ecl-expandable';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { auditTime, fromEvent, Subject, take, takeUntil, timer } from 'rxjs';\nimport { EclMediaContainerCreditDirective } from './ecl-media-container-credit.directive';\nimport { EclMediaContainerItemDirective } from './ecl-media-container-item.directive';\n\n/**\n * A media container is used to display media items (video, audio, image or other data) with a caption.\n */\n@Component({\n    selector: 'ecl-media-container',\n    templateUrl: './ecl-media-container.component.html',\n    imports: [...EUI_ECL_BUTTON, ...EUI_ECL_ICON],\n    host: {\n        '[class]': 'cssClasses()',\n    },\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\n\nexport class EclMediaContainerComponent extends ECLBaseDirective implements AfterContentInit, OnDestroy {\n    @Input({ transform: booleanAttribute }) isFullWidth = false;\n    /**\n     * Used for a video only - if the video should play immediately.\n     */\n    @Input({ transform: booleanAttribute }) eclAutoplay = false;\n\n    captionPosition = input<'over' | 'bottom' | 'hidden'>('bottom');\n\n    /**\n     * Allows a parent component to override the caption position programmatically.\n     */\n    captionPositionOverride = signal<'over' | 'bottom' | 'hidden' | null>(null);\n\n    @ContentChild(EclExpandableComponent) expandable: EclExpandableComponent;\n    @ContentChild(EclMediaContainerItemDirective) eclMediaContainerItem: EclMediaContainerItemDirective;\n    @ViewChildren(EclButtonComponent) eclButtons: QueryList<EclButtonComponent>;\n    @ViewChild('pauseButton') pauseButton: EclButtonComponent;\n    @ViewChild('playButton') playButton: EclButtonComponent;\n    private creditEl = contentChild(EclMediaContainerCreditDirective, { read: ElementRef });\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly window = this.document.defaultView;\n\n    captionBottomOffset = signal<string | null>(null);\n\n    /**\n     * Resolved caption position considering the override.\n     */\n    resolvedCaptionPosition = computed(() => this.captionPositionOverride() ?? this.captionPosition());\n\n    /**\n     * Applies specific classes for the component.\n     */\n    cssClasses = computed(() => {\n        const position = this.resolvedCaptionPosition();\n        return [super.getCssClasses('ecl-media-container'),\n            position !== 'bottom' ? `ecl-media-container--caption-${position}` : ''\n        ].join(' ').trim();\n    });\n\n    hasVideo = signal(false);\n\n    public isPlaying = false;\n    private readonly DELAY = 0;\n    private renderer = inject(Renderer2);\n    private removeVideoListeners: Array<() => void> = [];\n    private platformId = inject(PLATFORM_ID);\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n\n    ngAfterContentInit(): void {\n        if (isPlatformBrowser(this.platformId)) {\n            this.hasVideo.set(this.eclMediaContainerItem?.isVideo ?? false);\n\n            if (this.hasVideo() && this.eclAutoplay) {\n                const videoEl = this.eclMediaContainerItem?.el?.nativeElement as HTMLVideoElement | undefined;\n                if (videoEl) {\n                    this.removeVideoListeners.push(\n                        this.renderer.listen(videoEl, 'play', () => (this.isPlaying = true)),\n                        this.renderer.listen(videoEl, 'pause', () => (this.isPlaying = false)),\n                    );\n\n                    this.renderer.setAttribute(videoEl, 'loop', '');\n                    this.renderer.setAttribute(videoEl, 'muted', '');\n                    this.renderer.setProperty(videoEl, 'muted', true);\n                    this.renderer.removeAttribute(videoEl, 'controls');\n                }\n            }\n            this.setCaptionBottom();\n            fromEvent(this.window, 'resize').pipe(\n                auditTime(50),\n                takeUntil(this.destroy$)).subscribe(() => {\n                    this.setCaptionBottom();\n                });\n        }\n\n        if (this.expandable) {\n            this.expandable.class = [this.expandable.class, 'ecl-media-container__expandable'].join(' ');\n        }\n    }\n\n    ngOnDestroy(): void {\n        for (const unlisten of this.removeVideoListeners) unlisten();\n        this.removeVideoListeners = [];\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * When user clicks on 'play' button -> start the video and move the focus to the 'pause' button.\n     */\n    onVideoPlay(): void {\n        const videoEl = this.eclMediaContainerItem.el.nativeElement;\n        videoEl.play();\n\n        timer(this.DELAY).pipe(take(1)).subscribe(() => {\n            const pauseButton = this.eclButtons.find(\n                button => button === this.pauseButton);\n            this.focusOnButton(pauseButton);\n        });\n    }\n\n    /**\n     * When user clicks on 'pause' button -> pause the video and move the focus to the 'play' button.\n     */\n    onVideoPause(): void {\n        const videoEl = this.eclMediaContainerItem.el.nativeElement;\n        videoEl.pause();\n\n        timer(this.DELAY).pipe(take(1)).subscribe(() => {\n            const playButton = this.eclButtons.find(\n                button => button === this.playButton);\n            this.focusOnButton(playButton);\n        });\n    }\n\n    private focusOnButton(button: EclButtonComponent): void {\n        if (!button) {\n            return;\n        }\n        button.onFocus();\n    }\n\n    private setCaptionBottom(): void {\n        if (!this.creditEl() || this.resolvedCaptionPosition() !== 'over') {\n            this.captionBottomOffset.set(null);\n            return;\n        }\n        this.captionBottomOffset.set(`${this.creditEl().nativeElement.offsetHeight}px`);\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n            :host {\n                display: block;\n            }\n        \n",
@@ -46534,29 +47230,7 @@
                 "AfterContentInit",
                 "OnDestroy"
             ],
-            "accessors": {
-                "cssClasses": {
-                    "name": "cssClasses",
-                    "getSignature": {
-                        "name": "cssClasses",
-                        "type": "string",
-                        "returnType": "string",
-                        "line": 42,
-                        "rawdescription": "\n\nApplies specific classes for the component.\n",
-                        "description": "<p>Applies specific classes for the component.</p>\n"
-                    }
-                },
-                "hasVideo": {
-                    "name": "hasVideo",
-                    "getSignature": {
-                        "name": "hasVideo",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 78
-                    }
-                }
-            },
-            "templateData": "<figure class=\"ecl-media-container__figure\" [class.ecl-media-container--full-width]=\"isFullWidth\">\n    @if (hasVideo) {\n        <div class=\"ecl-media-container__video-wrapper\">\n            <ng-content select=\"video[eclMediaContainerItem]\"></ng-content>\n            @if (eclAutoplay) {\n                <button #playButton eclButton variant=\"tertiary\" isIconOnly class=\"ecl-media-container__play\" (click)=\"onVideoPlay()\"\n                        [style.display]=\"isPlaying ? 'none' : 'flex'\"  type=\"button\">\n                    <span eclButtonLabel>Play</span>\n                    <ecl-icon icon=\"play-outline\" size=\"m\"></ecl-icon>\n                </button>\n                <button #pauseButton eclButton variant=\"tertiary\" isIconOnly class=\"ecl-media-container__pause\" (click)=\"onVideoPause()\"\n                        [style.display]=\"isPlaying ? 'flex' : 'none'\" type=\"button\">\n                    <span eclButtonLabel>Pause</span>\n                    <ecl-icon icon=\"pause-outline\" size=\"m\"></ecl-icon>\n                </button>\n            }\n        </div>\n    }\n        <ng-content select=\"div[eclMediaContainerItem]\"></ng-content>\n        <ng-content select=\"picture[eclMediaContainerPicture]\"></ng-content>\n\n    <ng-content select=\"figcaption[eclMediaContainerCaption]\"></ng-content>\n    <ng-content select=\"footer[eclMediaContainerCredit]\"></ng-content>\n    <ng-content select=\"ecl-expandable\"></ng-content>\n</figure>\n"
+            "templateData": "<figure class=\"ecl-media-container__figure\" [class.ecl-media-container--full-width]=\"isFullWidth\" [style.--ecl-caption-bottom]=\"captionBottomOffset()\">\n    @if (hasVideo()) {\n        <div class=\"ecl-media-container__video-wrapper\">\n            <ng-content select=\"video[eclMediaContainerItem]\"></ng-content>\n            @if (eclAutoplay) {\n                <button #playButton eclButton variant=\"tertiary\" isIconOnly class=\"ecl-media-container__play\" (click)=\"onVideoPlay()\"\n                        [style.display]=\"isPlaying ? 'none' : 'flex'\"  type=\"button\">\n                    <span eclButtonLabel>Play</span>\n                    <ecl-icon icon=\"play-outline\" size=\"m\"></ecl-icon>\n                </button>\n                <button #pauseButton eclButton variant=\"tertiary\" isIconOnly class=\"ecl-media-container__pause\" (click)=\"onVideoPause()\"\n                        [style.display]=\"isPlaying ? 'flex' : 'none'\" type=\"button\">\n                    <span eclButtonLabel>Pause</span>\n                    <ecl-icon icon=\"pause-outline\" size=\"m\"></ecl-icon>\n                </button>\n            }\n        </div>\n    }\n        <ng-content select=\"div[eclMediaContainerItem]\"></ng-content>\n        <ng-content select=\"picture[eclMediaContainerPicture]\"></ng-content>\n\n    <ng-content select=\"figcaption[eclMediaContainerCaption]\"></ng-content>\n    <ng-content select=\"footer[eclMediaContainerCredit]\"></ng-content>\n    <ng-content select=\"ecl-expandable\"></ng-content>\n</figure>\n"
         },
         {
             "name": "EclMegaMenuComponent",
@@ -59013,6 +59687,71 @@
             ],
             "templateData": "<ng-content select=\"ecl-breadcrumb, nav[eclBreadcrumb]\"></ng-content>\n\n<div class=\"ecl-page-header__content-info\">\n    <ng-content select=\"[eclPageHeaderTitle]\"></ng-content>\n    <ng-content select=\"[eclPageHeaderDescriptionContainer]\"></ng-content>\n</div>\n<ng-content select=\"[eclPageHeaderMeta]\"></ng-content>"
         },
+        {
+            "name": "EclPageSummaryComponent",
+            "id": "component-EclPageSummaryComponent-5f81c0aef2c37cdb717c2c7aa9a15d731be4b72fa85aea3a8a4f1744b4615909460b7b8983fb890cbe7c16fba29a080f8e1464960e002f304cc1bef504815cb5",
+            "file": "packages/ecl/components/ecl-page-summary/ecl-page-summary.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "host": {},
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "ecl-page-summary",
+            "styleUrls": [],
+            "styles": [],
+            "templateUrl": [
+                "./ecl-page-summary.component.html"
+            ],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [
+                {
+                    "name": "eclTitle",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 14,
+                    "required": false
+                },
+                {
+                    "name": "hasIcon",
+                    "defaultValue": "true, { transform: booleanAttribute }",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 13,
+                    "required": false
+                }
+            ],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": false,
+            "imports": [
+                {
+                    "name": "EUI_ECL_ICON"
+                }
+            ],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import { booleanAttribute, Component, input } from \"@angular/core\";\nimport { EUI_ECL_ICON } from \"@eui/ecl/components/ecl-icon\";\n\n@Component({\n    selector: 'ecl-page-summary',\n    templateUrl: './ecl-page-summary.component.html',\n    host: {\n        class: 'ecl-page-summary'\n    },\n    imports: [EUI_ECL_ICON],\n})\nexport class EclPageSummaryComponent {\n    hasIcon = input(true, { transform: booleanAttribute });\n    eclTitle = input<string>();\n}",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "",
+            "extends": [],
+            "templateData": "<div class=\"ecl-page-summary__header\">\n    @if(hasIcon()) {\n    <ecl-icon iconSet=\"phosphor\" size=\"m\" icon=\"book-open\" class=\"ecl-page-summary__icon\" />\n    }\n    @if(eclTitle()) {\n    <span class=\"ecl-page-summary__title\">{{ eclTitle() }}</span>\n    }\n</div>\n<div class=\"ecl-page-summary__description\"><ng-content></ng-content></div>"
+        },
         {
             "name": "EclPaginationComponent",
             "id": "component-EclPaginationComponent-9c9cfb56b1d37d9c389f300ca1cdf5780730e6fd19c0a1220327f19e0a39b02b2201dda13b04aed9ce3a9cae4778847ec3c3098ebe10bc2b8871a497ea8e14e0",
@@ -60338,15 +61077,16 @@
         },
         {
             "name": "EclQuizCardComponent",
-            "id": "component-EclQuizCardComponent-91448b4e1a966ffe96c03f79aecbbe3ee61982f2036d9a5bf3f014a571b5763f244055c6bb99eacbd725ce976e00fec18f2a61449c77ac512b15751209e03506",
+            "id": "component-EclQuizCardComponent-c83d2d56d26ae6cb98cf5e5e2b544d7a1c282f5d1aa889b465ee7425fdfc3f5191cf19aa4202e2ff0f62e0e7a4554e2107c3e7593ec0e632d1f08916a0821c2c",
             "file": "packages/ecl/components/ecl-quiz/ecl-quiz-card.component.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
-            "selector": "div[eclQuizCard]",
+            "selector": "li[eclQuizCard]",
             "styleUrls": [],
             "styles": [],
             "templateUrl": [
@@ -60355,27 +61095,6 @@
             "viewProviders": [],
             "hostDirectives": [],
             "inputsClass": [
-                {
-                    "name": "ariaHidden",
-                    "defaultValue": "null",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 122,
-                    "type": "string | null",
-                    "decorators": []
-                },
-                {
-                    "required": false,
-                    "name": "isActive",
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nWhether this card is currently active/visible in the slider.\n",
-                    "description": "<p>Whether this card is currently active/visible in the slider.</p>\n",
-                    "line": 83,
-                    "type": "boolean",
-                    "decorators": []
-                },
                 {
                     "name": "answer",
                     "defaultValue": "''",
@@ -60385,7 +61104,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The answer text displayed on the back of the card.\nUsed in &#39;reveal&#39; variant or as explanation in &#39;poll&#39; variant.</p>\n",
-                    "line": 47,
+                    "line": 80,
                     "rawdescription": "\n\nThe answer text displayed on the back of the card.\nUsed in 'reveal' variant or as explanation in 'poll' variant.\n",
                     "required": false
                 },
@@ -60398,7 +61117,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The answer title (e.g. &quot;The correct answer is A.&quot;) for poll variant.</p>\n",
-                    "line": 52,
+                    "line": 85,
                     "rawdescription": "\n\nThe answer title (e.g. \"The correct answer is A.\") for poll variant.\n",
                     "required": false
                 },
@@ -60411,7 +61130,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Category label displayed in the card header (poll variant).</p>\n",
-                    "line": 57,
+                    "line": 90,
                     "rawdescription": "\n\nCategory label displayed in the card header (poll variant).\n",
                     "required": false
                 },
@@ -60424,7 +61143,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Icon name for the card header.\nDefaults to &#39;sparkle&#39; for reveal, &#39;question&#39; for poll.</p>\n",
-                    "line": 63,
+                    "line": 96,
                     "rawdescription": "\n\nIcon name for the card header.\nDefaults to 'sparkle' for reveal, 'question' for poll.\n",
                     "required": false
                 },
@@ -60437,10 +61156,23 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Icon size for the card header.</p>\n",
-                    "line": 68,
+                    "line": 101,
                     "rawdescription": "\n\nIcon size for the card header.\n",
                     "required": false
                 },
+                {
+                    "name": "id",
+                    "defaultValue": "`ecl-quiz-card-${crypto.randomUUID()}`",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Unique identifier for the card, used for accessibility attributes.\nIf not provided, a unique ID is generated automatically.</p>\n",
+                    "line": 59,
+                    "rawdescription": "\n\nUnique identifier for the card, used for accessibility attributes.\nIf not provided, a unique ID is generated automatically.\n",
+                    "required": false
+                },
                 {
                     "name": "options",
                     "defaultValue": "[]",
@@ -60450,7 +61182,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Options for the poll variant. Each option has text and a match flag.</p>\n",
-                    "line": 78,
+                    "line": 111,
                     "rawdescription": "\n\nOptions for the poll variant. Each option has text and a match flag.\n",
                     "required": false
                 },
@@ -60463,7 +61195,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The question text displayed on the front of the card.</p>\n",
-                    "line": 41,
+                    "line": 74,
                     "rawdescription": "\n\nThe question text displayed on the front of the card.\n",
                     "required": false
                 },
@@ -60510,7 +61242,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmitted when the card is flipped.\n",
                     "description": "<p>Emitted when the card is flipped.</p>\n",
-                    "line": 88,
+                    "line": 116,
                     "type": "EventEmitter"
                 }
             ],
@@ -60523,7 +61255,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 93,
+                    "line": 121,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -60535,24 +61267,16 @@
                     ]
                 },
                 {
-                    "name": "ariaRoleDescription",
-                    "defaultValue": "null",
+                    "name": "answerId",
+                    "defaultValue": "computed(() => `${this.id()}-answer`)",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string | null",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "",
-                    "line": 119,
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.aria-roledescription'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "description": "<p>Unique identifier for the answer element.</p>\n",
+                    "line": 69,
+                    "rawdescription": "\n\nUnique identifier for the answer element.\n"
                 },
                 {
                     "name": "backElementRef",
@@ -60562,7 +61286,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 91,
+                    "line": 119,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -60581,7 +61305,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 94,
+                    "line": 122,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -60600,7 +61324,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 90,
+                    "line": 118,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -60613,26 +61337,26 @@
                 },
                 {
                     "name": "isCorrect",
-                    "defaultValue": "null",
+                    "defaultValue": "signal<boolean | null>(null)",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "boolean | null",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether the selected option is correct (poll variant).</p>\n",
-                    "line": 103,
+                    "line": 131,
                     "rawdescription": "\nWhether the selected option is correct (poll variant)."
                 },
                 {
                     "name": "isFlipped",
-                    "defaultValue": "false",
+                    "defaultValue": "signal(false)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether the card is currently flipped (showing back).</p>\n",
-                    "line": 97,
+                    "line": 125,
                     "rawdescription": "\nWhether the card is currently flipped (showing back)."
                 },
                 {
@@ -60643,7 +61367,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 92,
+                    "line": 120,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -60655,35 +61379,27 @@
                     ]
                 },
                 {
-                    "name": "role",
-                    "defaultValue": "'group'",
+                    "name": "questionId",
+                    "defaultValue": "computed(() => `${this.id()}-question`)",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "",
-                    "line": 116,
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.role'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "description": "<p>Unique identifier for the question element.</p>\n",
+                    "line": 64,
+                    "rawdescription": "\n\nUnique identifier for the question element.\n"
                 },
                 {
                     "name": "selectedOptionIndex",
-                    "defaultValue": "null",
+                    "defaultValue": "signal<number | null>(null)",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "number | null",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Index of the selected option (poll variant).</p>\n",
-                    "line": 100,
+                    "line": 128,
                     "rawdescription": "\nIndex of the selected option (poll variant)."
                 },
                 {
@@ -60695,15 +61411,9 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 135,
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'style.tranform'"
-                        }
-                    ],
+                    "line": 146,
                     "modifierKind": [
-                        171
+                        148
                     ]
                 },
                 {
@@ -60715,7 +61425,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The variant of the quiz, set by the parent EclQuizComponent.</p>\n",
-                    "line": 73,
+                    "line": 106,
                     "rawdescription": "\n\nThe variant of the quiz, set by the parent EclQuizComponent.\n"
                 }
             ],
@@ -60726,7 +61436,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 184,
+                    "line": 193,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nFlip the card between front and back.\n",
@@ -60738,7 +61448,7 @@
                     "optional": false,
                     "returnType": "HTMLElement | null",
                     "typeParameters": [],
-                    "line": 210,
+                    "line": 219,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nGet the native answer element for height calculations.",
@@ -60750,7 +61460,7 @@
                     "optional": false,
                     "returnType": "HTMLElement | null",
                     "typeParameters": [],
-                    "line": 200,
+                    "line": 209,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nGet the native back element for height calculations.",
@@ -60762,7 +61472,7 @@
                     "optional": false,
                     "returnType": "HTMLElement | null",
                     "typeParameters": [],
-                    "line": 215,
+                    "line": 224,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nGet the native content element for height calculations.",
@@ -60774,7 +61484,7 @@
                     "optional": false,
                     "returnType": "HTMLElement | null",
                     "typeParameters": [],
-                    "line": 195,
+                    "line": 204,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nGet the native front element for height calculations.",
@@ -60786,7 +61496,7 @@
                     "optional": false,
                     "returnType": "string",
                     "typeParameters": [],
-                    "line": 220,
+                    "line": 229,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nGet the resolved icon name based on variant.",
@@ -60798,7 +61508,7 @@
                     "optional": false,
                     "returnType": "string",
                     "typeParameters": [],
-                    "line": 228,
+                    "line": 237,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nGet the resolved icon size.",
@@ -60810,7 +61520,7 @@
                     "optional": false,
                     "returnType": "HTMLElement | null",
                     "typeParameters": [],
-                    "line": 205,
+                    "line": 214,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nGet the native question element for height calculations.",
@@ -60822,20 +61532,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 141,
+                    "line": 151,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandle click on the card itself (reveal variant).\n",
-                    "description": "<p>Handle click on the card itself (reveal variant).</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'click'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "description": "<p>Handle click on the card itself (reveal variant).</p>\n"
                 },
                 {
                     "name": "onKeydown",
@@ -60852,20 +61553,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 151,
+                    "line": 160,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandle keyboard events (Enter/Space to flip for reveal variant).\n",
                     "description": "<p>Handle keyboard events (Enter/Space to flip for reveal variant).</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'keydown', ['$event']"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ],
                     "jsdoctags": [
                         {
                             "name": "event",
@@ -60895,7 +61587,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 161,
+                    "line": 170,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandle option click (poll variant).\n",
@@ -60937,7 +61629,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 174,
+                    "line": 183,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandle keyboard on option (poll variant).\n",
@@ -61005,92 +61697,8 @@
             ],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "name": "attr.aria-pressed",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 130,
-                    "type": "string | null",
-                    "decorators": []
-                },
-                {
-                    "name": "attr.aria-roledescription",
-                    "defaultValue": "null",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 119,
-                    "type": "string | null",
-                    "decorators": []
-                },
-                {
-                    "name": "attr.role",
-                    "defaultValue": "'group'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 116,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "name": "attr.tabindex",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 125,
-                    "type": "number | null",
-                    "decorators": []
-                },
-                {
-                    "name": "class",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 106,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "name": "style.tranform",
-                    "defaultValue": "'translate3d(0px, 0px, 0px)'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 135,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "hostListeners": [
-                {
-                    "name": "click",
-                    "args": [],
-                    "argsDecorator": [],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nHandle click on the card itself (reveal variant).\n",
-                    "description": "<p>Handle click on the card itself (reveal variant).</p>\n",
-                    "line": 141
-                },
-                {
-                    "name": "keydown",
-                    "args": [
-                        {
-                            "name": "event",
-                            "type": "KeyboardEvent",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "argsDecorator": [
-                        "$event"
-                    ],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nHandle keyboard events (Enter/Space to flip for reveal variant).\n",
-                    "description": "<p>Handle keyboard events (Enter/Space to flip for reveal variant).</p>\n",
-                    "line": 151
-                }
-            ],
+            "hostBindings": [],
+            "hostListeners": [],
             "standalone": false,
             "imports": [
                 {
@@ -61105,7 +61713,7 @@
             "description": "<p>ECL Quiz Card component – represents a single card in the quiz.</p>\n<p>For the &#39;reveal&#39; variant, the entire card is clickable to flip.\nFor the &#39;poll&#39; variant, individual options trigger the flip.</p>\n",
             "rawdescription": "\n\nECL Quiz Card component – represents a single card in the quiz.\n\nFor the 'reveal' variant, the entire card is clickable to flip.\nFor the 'poll' variant, individual options trigger the flip.\n",
             "type": "component",
-            "sourceCode": "import {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    HostListener,\n    Input,\n    Output,\n    ViewChild,\n    booleanAttribute,\n    input,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { TranslateModule } from '@ngx-translate/core';\n\nexport interface EclQuizCardFlipEvent {\n    flipped: boolean;\n    selectedOptionIndex?: number;\n    isCorrect?: boolean;\n}\n\n/**\n * ECL Quiz Card component – represents a single card in the quiz.\n *\n * For the 'reveal' variant, the entire card is clickable to flip.\n * For the 'poll' variant, individual options trigger the flip.\n */\n@Component({\n    selector: 'div[eclQuizCard]',\n    templateUrl: './ecl-quiz-card.component.html',\n    imports: [EclIconComponent, TranslateModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EclQuizCardComponent extends ECLBaseDirective {\n\n    /**\n     * The question text displayed on the front of the card.\n     */\n    question = input<string>('');\n\n    /**\n     * The answer text displayed on the back of the card.\n     * Used in 'reveal' variant or as explanation in 'poll' variant.\n     */\n    answer = input<string>('');\n\n    /**\n     * The answer title (e.g. \"The correct answer is A.\") for poll variant.\n     */\n    answerTitle = input<string>('');\n\n    /**\n     * Category label displayed in the card header (poll variant).\n     */\n    category = input<string>('');\n\n    /**\n     * Icon name for the card header.\n     * Defaults to 'sparkle' for reveal, 'question' for poll.\n     */\n    icon = input<string>('');\n\n    /**\n     * Icon size for the card header.\n     */\n    iconSize = input<'xs' | 's' | 'm' | 'l' | 'xl' | '2xl'>('xl');\n\n    /**\n     * The variant of the quiz, set by the parent EclQuizComponent.\n     */\n    variant: 'poll' | 'reveal' = 'reveal';\n\n    /**\n     * Options for the poll variant. Each option has text and a match flag.\n     */\n    options = input<Array<{ text: string; match: boolean }>>([]);\n\n    /**\n     * Whether this card is currently active/visible in the slider.\n     */\n    @Input({ transform: booleanAttribute }) isActive = false;\n\n    /**\n     * Emitted when the card is flipped.\n     */\n    @Output() cardFlip = new EventEmitter<EclQuizCardFlipEvent>();\n\n    @ViewChild('frontElement') frontElementRef: ElementRef;\n    @ViewChild('backElement') backElementRef: ElementRef;\n    @ViewChild('questionElement') questionElementRef: ElementRef;\n    @ViewChild('answerElement') answerElementRef: ElementRef;\n    @ViewChild('contentElement') contentElementRef: ElementRef;\n\n    /** Whether the card is currently flipped (showing back). */\n    isFlipped = false;\n\n    /** Index of the selected option (poll variant). */\n    selectedOptionIndex: number | null = null;\n\n    /** Whether the selected option is correct (poll variant). */\n    isCorrect: boolean | null = null;\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-quiz-card'),\n            this.isFlipped ? 'ecl-quiz-card__flipped' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    @HostBinding('attr.role')\n    role = 'group';\n\n    @HostBinding('attr.aria-roledescription')\n    ariaRoleDescription: string | null = null;\n\n    @HostBinding('attr.aria-hidden')\n    @Input() ariaHidden: string | null = null;\n\n    @HostBinding('attr.tabindex')\n    get tabIndex(): number | null {\n        return this.variant === 'reveal' ? 0 : null;\n    }\n\n    @HostBinding('attr.aria-pressed')\n    get ariaPressed(): string | null {\n        return this.variant === 'reveal' ? String(this.isFlipped) : null;\n    }\n\n    @HostBinding('style.tranform')\n    styleTransform = 'translate3d(0px, 0px, 0px)';\n\n    /**\n     * Handle click on the card itself (reveal variant).\n     */\n    @HostListener('click')\n    onClick(): void {\n        if (this.variant === 'reveal') {\n            this.flipCard();\n        }\n    }\n\n    /**\n     * Handle keyboard events (Enter/Space to flip for reveal variant).\n     */\n    @HostListener('keydown', ['$event'])\n    onKeydown(event: KeyboardEvent): void {\n        if (this.variant === 'reveal' && (event.key === 'Enter' || event.key === ' ')) {\n            event.preventDefault();\n            this.flipCard();\n        }\n    }\n\n    /**\n     * Handle option click (poll variant).\n     */\n    onOptionClick(optionIndex: number): void {\n        if (this.isFlipped) {\n            return;\n        }\n        const optionsList = this.options();\n        this.selectedOptionIndex = optionIndex;\n        this.isCorrect = optionsList[optionIndex]?.match ?? false;\n        this.flipCard();\n    }\n\n    /**\n     * Handle keyboard on option (poll variant).\n     */\n    onOptionKeydown(event: KeyboardEvent, optionIndex: number): void {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.onOptionClick(optionIndex);\n        }\n    }\n\n    /**\n     * Flip the card between front and back.\n     */\n    flipCard(): void {\n        this.isFlipped = !this.isFlipped;\n        const event: EclQuizCardFlipEvent = { flipped: this.isFlipped };\n        if (this.variant === 'poll') {\n            event.selectedOptionIndex = this.selectedOptionIndex;\n            event.isCorrect = this.isCorrect;\n        }\n        this.cardFlip.emit(event);\n    }\n\n    /** Get the native front element for height calculations. */\n    getFrontElement(): HTMLElement | null {\n        return this.frontElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native back element for height calculations. */\n    getBackElement(): HTMLElement | null {\n        return this.backElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native question element for height calculations. */\n    getQuestionElement(): HTMLElement | null {\n        return this.questionElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native answer element for height calculations. */\n    getAnswerElement(): HTMLElement | null {\n        return this.answerElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native content element for height calculations. */\n    getContentElement(): HTMLElement | null {\n        return this.contentElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the resolved icon name based on variant. */\n    getIconName(): string {\n        if (this.icon()) {\n            return this.icon();\n        }\n        return this.variant === 'poll' ? 'question' : 'sparkle';\n    }\n\n    /** Get the resolved icon size. */\n    getIconSize(): string {\n        return this.iconSize() || (this.variant === 'poll' ? '2xl' : 'xl');\n    }\n}\n",
+            "sourceCode": "import {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    Directive,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    HostListener,\n    input,\n    Output,\n    signal,\n    ViewChild\n} from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { TranslateModule } from '@ngx-translate/core';\n\nexport interface EclQuizCardFlipEvent {\n    flipped: boolean;\n    selectedOptionIndex?: number;\n    isCorrect?: boolean;\n}\n\n@Directive({\n    selector: 'ol[eclQuizList]',\n})\nexport class EclQuizListDirective {\n    @HostBinding('class.ecl-quiz__list') hasClass = true;\n}\n\n/**\n * ECL Quiz Card component – represents a single card in the quiz.\n *\n * For the 'reveal' variant, the entire card is clickable to flip.\n * For the 'poll' variant, individual options trigger the flip.\n */\n@Component({\n    selector: 'li[eclQuizCard]',\n    host: {\n        '[attr.id]': 'id()',\n        '[attr.aria-labelledby]': 'questionId()',\n        '[class]': 'cssClasses',\n        '[attr.tabindex]': 'tabIndex',\n        '[style.transform]': 'styleTransform',\n        '(click)': 'onClick()',\n        '(keydown)': 'onKeydown($event)',\n    },\n    templateUrl: './ecl-quiz-card.component.html',\n    imports: [EclIconComponent, TranslateModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EclQuizCardComponent extends ECLBaseDirective {\n\n    /**\n     * Unique identifier for the card, used for accessibility attributes.\n     * If not provided, a unique ID is generated automatically.\n     */\n    id = input<string>(`ecl-quiz-card-${crypto.randomUUID()}`);\n\n    /**\n     * Unique identifier for the question element.\n     */\n    questionId = computed(() => `${this.id()}-question`);\n\n    /**\n     * Unique identifier for the answer element.\n     */\n    answerId = computed(() => `${this.id()}-answer`);\n\n    /**\n     * The question text displayed on the front of the card.\n     */\n    question = input<string>('');\n\n    /**\n     * The answer text displayed on the back of the card.\n     * Used in 'reveal' variant or as explanation in 'poll' variant.\n     */\n    answer = input<string>('');\n\n    /**\n     * The answer title (e.g. \"The correct answer is A.\") for poll variant.\n     */\n    answerTitle = input<string>('');\n\n    /**\n     * Category label displayed in the card header (poll variant).\n     */\n    category = input<string>('');\n\n    /**\n     * Icon name for the card header.\n     * Defaults to 'sparkle' for reveal, 'question' for poll.\n     */\n    icon = input<string>('');\n\n    /**\n     * Icon size for the card header.\n     */\n    iconSize = input<'xs' | 's' | 'm' | 'l' | 'xl' | '2xl'>('xl');\n\n    /**\n     * The variant of the quiz, set by the parent EclQuizComponent.\n     */\n    variant: 'poll' | 'reveal' = 'reveal';\n\n    /**\n     * Options for the poll variant. Each option has text and a match flag.\n     */\n    options = input<Array<{ text: string; match: boolean }>>([]);\n\n    /**\n     * Emitted when the card is flipped.\n     */\n    @Output() cardFlip = new EventEmitter<EclQuizCardFlipEvent>();\n\n    @ViewChild('frontElement') frontElementRef: ElementRef;\n    @ViewChild('backElement') backElementRef: ElementRef;\n    @ViewChild('questionElement') questionElementRef: ElementRef;\n    @ViewChild('answerElement') answerElementRef: ElementRef;\n    @ViewChild('contentElement') contentElementRef: ElementRef;\n\n    /** Whether the card is currently flipped (showing back). */\n    isFlipped = signal(false);\n\n    /** Index of the selected option (poll variant). */\n    selectedOptionIndex = signal<number | null>(null);\n\n    /** Whether the selected option is correct (poll variant). */\n    isCorrect = signal<boolean | null>(null);\n\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-quiz-card'),\n            this.isFlipped() ? 'ecl-quiz-card__flipped' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    get tabIndex(): number | null {\n        return this.variant === 'reveal' ? 0 : null;\n    }\n\n    readonly styleTransform = 'translate3d(0px, 0px, 0px)';\n\n    /**\n     * Handle click on the card itself (reveal variant).\n     */\n    onClick(): void {\n        if (this.variant === 'reveal') {\n            this.flipCard();\n        }\n    }\n\n    /**\n     * Handle keyboard events (Enter/Space to flip for reveal variant).\n     */\n    onKeydown(event: KeyboardEvent): void {\n        if (this.variant === 'reveal' && (event.key === 'Enter' || event.key === ' ')) {\n            event.preventDefault();\n            this.flipCard();\n        }\n    }\n\n    /**\n     * Handle option click (poll variant).\n     */\n    onOptionClick(optionIndex: number): void {\n        if (this.isFlipped()) {\n            return;\n        }\n        const optionsList = this.options();\n        this.selectedOptionIndex.set(optionIndex);\n        this.isCorrect.set(optionsList[optionIndex]?.match ?? false);\n        this.flipCard();\n    }\n\n    /**\n     * Handle keyboard on option (poll variant).\n     */\n    onOptionKeydown(event: KeyboardEvent, optionIndex: number): void {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.onOptionClick(optionIndex);\n        }\n    }\n\n    /**\n     * Flip the card between front and back.\n     */\n    flipCard(): void {\n        this.isFlipped.update(v => !v);\n        const event: EclQuizCardFlipEvent = { flipped: this.isFlipped() };\n        if (this.variant === 'poll') {\n            event.selectedOptionIndex = this.selectedOptionIndex();\n            event.isCorrect = this.isCorrect();\n        }\n        this.cardFlip.emit(event);\n    }\n\n    /** Get the native front element for height calculations. */\n    getFrontElement(): HTMLElement | null {\n        return this.frontElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native back element for height calculations. */\n    getBackElement(): HTMLElement | null {\n        return this.backElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native question element for height calculations. */\n    getQuestionElement(): HTMLElement | null {\n        return this.questionElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native answer element for height calculations. */\n    getAnswerElement(): HTMLElement | null {\n        return this.answerElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the native content element for height calculations. */\n    getContentElement(): HTMLElement | null {\n        return this.contentElementRef?.nativeElement ?? null;\n    }\n\n    /** Get the resolved icon name based on variant. */\n    getIconName(): string {\n        if (this.icon()) {\n            return this.icon();\n        }\n        return this.variant === 'poll' ? 'question' : 'sparkle';\n    }\n\n    /** Get the resolved icon size. */\n    getIconSize(): string {\n        return this.iconSize() || (this.variant === 'poll' ? '2xl' : 'xl');\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -61119,7 +61727,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 106
+                        "line": 133
                     }
                 },
                 "tabIndex": {
@@ -61128,32 +61736,24 @@
                         "name": "tabIndex",
                         "type": "unknown",
                         "returnType": "number | null",
-                        "line": 125
-                    }
-                },
-                "ariaPressed": {
-                    "name": "ariaPressed",
-                    "getSignature": {
-                        "name": "ariaPressed",
-                        "type": "unknown",
-                        "returnType": "string | null",
-                        "line": 130
+                        "line": 142
                     }
                 }
             },
-            "templateData": "<div class=\"ecl-quiz-card__content\" #contentElement>\n    <!-- Front face -->\n    <div class=\"ecl-quiz-card__front\" #frontElement [hidden]=\"isFlipped\">\n        <div class=\"ecl-quiz-card__header\">\n            <div class=\"ecl-quiz-card__icon\">\n                <ecl-icon\n                    [icon]=\"getIconName()\"\n                    [size]=\"getIconSize()\"\n                    iconSet=\"phosphor\">\n                </ecl-icon>\n            </div>\n            @if (category()) {\n            <span class=\"ecl-quiz-card__category\">{{ category() }}</span>\n            }\n        </div>\n\n        <div class=\"ecl-quiz-card__question\" #questionElement>{{ question() }}</div>\n\n        @if (variant === 'reveal') {\n        <!-- Reveal variant: flip label -->\n        <div class=\"ecl-quiz-card__flip\">\n            {{ 'ecl.quiz.CLICK-TO-REVEAL' | translate }}\n            <ecl-icon iconSet=\"phosphor\" icon=\"arrow-clockwise\" size=\"m\"></ecl-icon>\n        </div>\n        } @else {\n        <!-- Poll variant: options -->\n        <div class=\"ecl-quiz-card__options\">\n            @for (option of options(); let i = $index; track i) {\n            <div\n                class=\"ecl-quiz-card__option\"\n                role=\"button\"\n                [attr.tabindex]=\"0\"\n                [attr.aria-pressed]=\"selectedOptionIndex === i ? 'true' : 'false'\"\n                [attr.data-match]=\"option.match\"\n                (click)=\"onOptionClick(i)\"\n                (keydown)=\"onOptionKeydown($event, i)\">\n                {{ option.text }}\n            </div>\n            }\n        </div>\n        }\n    </div>\n\n    <!-- Back face -->\n    <div\n        class=\"ecl-quiz-card__back\"\n        #backElement\n        [hidden]=\"!isFlipped\"\n        [class.ecl-quiz-card--correct]=\"variant === 'poll' && isCorrect === true\">\n        <div class=\"ecl-quiz-card__header\">\n            @if (variant === 'reveal') {\n            <div class=\"ecl-quiz-card__icon\">\n                <ecl-icon\n                    [icon]=\"getIconName()\"\n                    [size]=\"getIconSize()\"\n                    iconSet=\"phosphor\">\n                </ecl-icon>\n            </div>\n            } @else {\n            <!-- Poll variant: success/error icons and category labels -->\n            <div class=\"ecl-quiz-card__icon\">\n                <ecl-icon\n                    icon=\"check-circle\"\n                    iconSet=\"phosphor\"\n                    size=\"2xl\"\n                    class=\"ecl-quiz-card__icon--success\">\n                </ecl-icon>\n                <ecl-icon\n                    icon=\"x-circle\"\n                    size=\"2xl\"\n                    iconSet=\"phosphor\"\n                    class=\"ecl-quiz-card__icon--error\">\n                </ecl-icon>\n            </div>\n            <span class=\"ecl-quiz-card__category ecl-quiz-card__category--success\">Correct</span>\n            <span class=\"ecl-quiz-card__category ecl-quiz-card__category--error\">Incorrect</span>\n            }\n        </div>\n\n        <div class=\"ecl-quiz-card__answer\" #answerElement>\n            @if (answerTitle()) {\n            <div class=\"ecl-quiz-card__answer-title\">{{ answerTitle() }}</div>\n            }\n            {{ answer() }}\n        </div>\n\n        @if (variant === 'reveal') {\n        <!-- Reveal variant: go back label -->\n        <div class=\"ecl-quiz-card__flip\">\n            {{ 'ecl.quiz.GO-BACK' | translate }}\n            <ecl-icon icon=\"arrow-clockwise\" size=\"m\" iconSet=\"phosphor\"></ecl-icon>\n        </div>\n        } @else {\n        <!-- Poll variant: options list on back (showing selected state) -->\n        <div class=\"ecl-quiz-card__options\" role=\"list\">\n            @for (option of options(); let i = $index; track i) {\n            <div\n                class=\"ecl-quiz-card__option\"\n                role=\"listitem\"\n                [class.ecl-quiz-card__option--selected]=\"selectedOptionIndex === i\"\n                [attr.data-match]=\"option.match\">\n                {{ option.text }}\n            </div>\n            }\n        </div>\n        }\n    </div>\n</div>\n"
+            "templateData": "<article class=\"ecl-quiz-card__content\" #contentElement>\n    <!-- Front face -->\n    <div class=\"ecl-quiz-card__front\" #frontElement [hidden]=\"isFlipped()\">\n        <div class=\"ecl-quiz-card__header\">\n            <div class=\"ecl-quiz-card__icon\">\n                <ecl-icon [icon]=\"getIconName()\" [size]=\"getIconSize()\" iconSet=\"phosphor\">\n                </ecl-icon>\n            </div>\n            @if (category()) {\n            <span class=\"ecl-quiz-card__category\">{{ category() }}</span>\n            }\n        </div>\n\n        @if (variant === 'reveal') {\n        <div class=\"ecl-quiz-card__question\" [id]=\"questionId()\" #questionElement>{{ question() }}</div>\n        <!-- Reveal variant: flip label -->\n        <div class=\"ecl-quiz-card__flip\">\n            {{ 'ecl.quiz.CLICK-TO-REVEAL' | translate }}\n            <ecl-icon iconSet=\"phosphor\" icon=\"arrow-clockwise\" size=\"m\"></ecl-icon>\n        </div>\n        } @else {\n        <!-- Poll variant: options -->\n        <fieldset>\n            <legend class=\"ecl-quiz-card__question\" [id]=\"questionId()\" #questionElement>{{ question() }}</legend>\n            <ol class=\"ecl-quiz-card__options\" type=\"A\">\n                @for (option of options(); let i = $index; track i) {\n                <li class=\"ecl-quiz-card__option\" [attr.data-match]=\"option.match\"\n                    (mouseup)=\"onOptionClick(i)\">\n                    <label class=\"ecl-quiz-card__label\">\n                        <input type=\"radio\" [name]=\"id() + '-options'\" [attr.data-match]=\"option.match\"\n                            [attr.tabindex]=\"isFlipped() ? -1 : null\"\n                            (keydown)=\"onOptionKeydown($event, i)\">\n                        {{ option.text }}</label>\n                </li>\n                }\n            </ol>\n        </fieldset>\n        }\n    </div>\n\n    <!-- Back face -->\n    <div class=\"ecl-quiz-card__back\" #backElement [hidden]=\"!isFlipped()\" style\n        [class.ecl-quiz-card--correct]=\"variant === 'poll' && isCorrect() === true\">\n        <div class=\"ecl-quiz-card__header\">\n            @if (variant === 'reveal') {\n            <div class=\"ecl-quiz-card__icon\">\n                <ecl-icon [icon]=\"getIconName()\" [size]=\"getIconSize()\" iconSet=\"phosphor\">\n                </ecl-icon>\n            </div>\n            } @else {\n            <!-- Poll variant: success/error icons and category labels -->\n            <div class=\"ecl-quiz-card__icon\">\n                <ecl-icon icon=\"check-circle\" iconSet=\"phosphor\" size=\"2xl\" class=\"ecl-quiz-card__icon--success\">\n                </ecl-icon>\n                <ecl-icon icon=\"x-circle\" size=\"2xl\" iconSet=\"phosphor\" class=\"ecl-quiz-card__icon--error\">\n                </ecl-icon>\n            </div>\n            <span class=\"ecl-quiz-card__category ecl-quiz-card__category--success\" [attr.tabindex]=\"isFlipped() && isCorrect() === true ? 0 : null\">Correct</span>\n            <span class=\"ecl-quiz-card__category ecl-quiz-card__category--error\" [attr.tabindex]=\"isFlipped() && isCorrect() === false ? 0 : null\">Incorrect</span>\n            }\n        </div>\n\n        <div class=\"ecl-quiz-card__answer\" [id]=\"answerId()\" #answerElement>\n            @if (answerTitle()) {\n            <div class=\"ecl-quiz-card__answer-title\">{{ answerTitle() }}</div>\n            }\n            {{ answer() }}\n        </div>\n\n        @if (variant === 'reveal') {\n        <!-- Reveal variant: go back label -->\n        <div class=\"ecl-quiz-card__flip\">\n            {{ 'ecl.quiz.GO-BACK' | translate }}\n            <ecl-icon icon=\"arrow-clockwise\" size=\"m\" iconSet=\"phosphor\"></ecl-icon>\n        </div>\n        } @else {\n        <!-- Poll variant: options list on back (showing selected state) -->\n        <ol class=\"ecl-quiz-card__options\" type=\"A\">\n            @for (option of options(); let i = $index; track i) {\n            <li class=\"ecl-quiz-card__option\"\n                [class.ecl-quiz-card__option--selected]=\"selectedOptionIndex() === i\" [attr.data-match]=\"option.match\">\n                {{ option.text }}\n            </li>\n            }\n        </ol>\n        }\n    </div>\n</article>"
         },
         {
             "name": "EclQuizComponent",
-            "id": "component-EclQuizComponent-4be45a1ec2dfe06e29d75dd39953c758ad51204339c9eb85eae0bc22c324b12301a03dc88e6f857ca71598ab44bb1623f75ae9b9a629338000817dbcc64e4fb5",
+            "id": "component-EclQuizComponent-fe23b5f9d821dc5bc73a195ff9c3b2716c2c3196af5343029b10d4b1703d75bf4e824bb94ca064b8eea2c96fd5965b9a5ba274931f97a61ef5e9c269519c5ca2",
             "file": "packages/ecl/components/ecl-quiz/ecl-quiz.component.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
-            "selector": "div[eclQuiz]",
+            "selector": "section[eclQuiz]",
             "styleUrls": [],
             "styles": [],
             "templateUrl": [
@@ -61171,7 +61771,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Description displayed below the title.</p>\n",
-                    "line": 51,
+                    "line": 54,
                     "rawdescription": "\nDescription displayed below the title.",
                     "required": false
                 },
@@ -61184,7 +61784,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Title displayed in the quiz header.</p>\n",
-                    "line": 48,
+                    "line": 51,
                     "rawdescription": "\nTitle displayed in the quiz header.",
                     "required": false
                 },
@@ -61197,7 +61797,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Quiz variant: &#39;reveal&#39; for flip cards, &#39;poll&#39; for multiple choice.</p>\n",
-                    "line": 45,
+                    "line": 48,
                     "rawdescription": "\nQuiz variant: 'reveal' for flip cards, 'poll' for multiple choice.",
                     "required": false
                 },
@@ -61247,7 +61847,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Current snap index.</p>\n",
-                    "line": 63,
+                    "line": 66,
                     "rawdescription": "\nCurrent snap index."
                 },
                 {
@@ -61258,11 +61858,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 57,
+                    "line": 60,
                     "decorators": [
                         {
                             "name": "ContentChildren",
-                            "stringifiedArguments": "undefined"
+                            "stringifiedArguments": "undefined, {descendants: true}"
                         }
                     ],
                     "modifierKind": [
@@ -61289,7 +61889,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 60,
+                    "line": 63,
                     "decorators": [
                         {
                             "name": "ViewChildren",
@@ -61309,7 +61909,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Embla carousel options matching ECL&#39;s configuration.</p>\n",
-                    "line": 54,
+                    "line": 57,
                     "rawdescription": "\nEmbla carousel options matching ECL's configuration."
                 },
                 {
@@ -61320,7 +61920,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 59,
+                    "line": 62,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -61331,18 +61931,6 @@
                         171
                     ]
                 },
-                {
-                    "name": "liveRegionText",
-                    "defaultValue": "signal('')",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "<p>Live region text for screen readers.</p>\n",
-                    "line": 69,
-                    "rawdescription": "\nLive region text for screen readers."
-                },
                 {
                     "name": "nextDisabled",
                     "defaultValue": "signal(true)",
@@ -61388,7 +61976,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Subscribed Embla events.</p>\n",
-                    "line": 175,
+                    "line": 167,
                     "rawdescription": "\nSubscribed Embla events."
                 },
                 {
@@ -61400,7 +61988,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Total number of snap points.</p>\n",
-                    "line": 66,
+                    "line": 69,
                     "rawdescription": "\nTotal number of snap points."
                 }
             ],
@@ -61411,7 +61999,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 181,
+                    "line": 173,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEqualizes the height of all cards based on the tallest content.\nMirrors the ECL vanilla `checkHeight()` logic.\n",
@@ -61423,7 +62011,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 147,
+                    "line": 139,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nReturns the total number of cards.",
@@ -61435,7 +62023,7 @@
                     "optional": false,
                     "returnType": "number[]",
                     "typeParameters": [],
-                    "line": 152,
+                    "line": 144,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nReturns an array of indices for dot rendering.",
@@ -61456,7 +62044,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 140,
+                    "line": 132,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nNavigate to a specific snap index.",
@@ -61481,7 +62069,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 102,
+                    "line": 95,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -61491,7 +62079,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 110,
+                    "line": 103,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -61510,7 +62098,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 157,
+                    "line": 149,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nCalled by the emblaChange event from the directive.",
@@ -61544,20 +62132,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 119,
+                    "line": 111,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nHandle keyboard events.",
                     "description": "<p>Handle keyboard events.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'keydown', ['$event']"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ],
                     "jsdoctags": [
                         {
                             "name": "event",
@@ -61578,7 +62157,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 133,
+                    "line": 125,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nNavigate to the next snap.",
@@ -61590,7 +62169,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 126,
+                    "line": 118,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nNavigate to the previous snap.",
@@ -61634,39 +62213,8 @@
             ],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "name": "class",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 88,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "hostListeners": [
-                {
-                    "name": "keydown",
-                    "args": [
-                        {
-                            "name": "event",
-                            "type": "KeyboardEvent",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "argsDecorator": [
-                        "$event"
-                    ],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\nHandle keyboard events.",
-                    "description": "<p>Handle keyboard events.</p>\n",
-                    "line": 119
-                }
-            ],
+            "hostBindings": [],
+            "hostListeners": [],
             "standalone": false,
             "imports": [
                 {
@@ -61685,7 +62233,7 @@
             "description": "<p>ECL Quiz component – renders a carousel of quiz cards with navigation.\nSupports two variants: &#39;reveal&#39; (flip cards) and &#39;poll&#39; (multiple choice).</p>\n<p>Uses Embla Carousel (via embla-carousel-angular) to match the ECL vanilla\nimplementation which also uses Embla internally.</p>\n",
             "rawdescription": "\n\nECL Quiz component – renders a carousel of quiz cards with navigation.\nSupports two variants: 'reveal' (flip cards) and 'poll' (multiple choice).\n\nUses Embla Carousel (via embla-carousel-angular) to match the ECL vanilla\nimplementation which also uses Embla internally.\n",
             "type": "component",
-            "sourceCode": "import {\n    AfterContentInit,\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    forwardRef,\n    HostBinding,\n    HostListener,\n    inject,\n    input,\n    QueryList,\n    signal,\n    ViewChild,\n    ViewChildren\n} from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { TranslateModule, TranslateService } from '@ngx-translate/core';\nimport { EmblaCarouselDirective, EmblaCarouselType, EmblaEventType } from 'embla-carousel-angular';\nimport { EclQuizCardComponent } from './ecl-quiz-card.component';\n\n/**\n * ECL Quiz component – renders a carousel of quiz cards with navigation.\n * Supports two variants: 'reveal' (flip cards) and 'poll' (multiple choice).\n *\n * Uses Embla Carousel (via embla-carousel-angular) to match the ECL vanilla\n * implementation which also uses Embla internally.\n */\n@Component({\n    selector: 'div[eclQuiz]',\n    templateUrl: './ecl-quiz.component.html',\n    imports: [\n        TranslateModule,\n        EclIconComponent,\n        EmblaCarouselDirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EclQuizComponent extends ECLBaseDirective implements AfterContentInit, AfterViewInit {\n\n    /** Quiz variant: 'reveal' for flip cards, 'poll' for multiple choice. */\n    variant = input<'poll' | 'reveal'>('reveal');\n\n    /** Title displayed in the quiz header. */\n    eclTitle = input<string>('');\n\n    /** Description displayed below the title. */\n    eclDescription = input<string>('');\n\n    /** Embla carousel options matching ECL's configuration. */\n    emblaOptions = { loop: false, align: 'start' as const };\n\n    @ContentChildren(forwardRef(() => EclQuizCardComponent))\n    cards: QueryList<EclQuizCardComponent>;\n\n    @ViewChild(EmblaCarouselDirective) emblaRef: EmblaCarouselDirective;\n    @ViewChildren('dotButton') dotButtons: QueryList<ElementRef>;\n\n    /** Current snap index. */\n    activeIndex = signal(0);\n\n    /** Total number of snap points. */\n    totalSnaps = signal(0);\n\n    /** Live region text for screen readers. */\n    liveRegionText = signal('');\n\n    /** Counter text for mobile display. */\n    counterText = signal('');\n\n    /** Whether the previous button is disabled. */\n    prevDisabled = signal(true);\n\n    /** Whether the next button is disabled. */\n    nextDisabled = signal(true);\n\n    /** Whether navigation controls should be shown. */\n    showControls = signal(false);\n\n    private cd = inject(ChangeDetectorRef);\n    private translateService = inject(TranslateService);\n    private emblaApi: EmblaCarouselType | undefined;\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-quiz'),\n            `ecl-quiz--${this.variant()}`,\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    // @HostBinding('attr.data-ecl-auto-init')\n    // get autoInit(): string {\n    //     return 'Quiz';\n    // }\n\n    ngAfterContentInit(): void {\n        if (this.cards && this.cards.length > 1) {\n            this.showControls.set(true);\n        }\n        this.propagateVariant();\n        this.cards.changes.subscribe(() => this.propagateVariant());\n    }\n\n    ngAfterViewInit(): void {\n        // Give Embla time to initialize\n        setTimeout(() => {\n            this.initEmbla();\n        });\n    }\n\n    /** Handle keyboard events. */\n    @HostListener('keydown', ['$event'])\n    onKeydown(event: KeyboardEvent): void {\n        if (event.key === 'Escape') {\n            this.escapeSlider();\n        }\n    }\n\n    /** Navigate to the previous snap. */\n    onPrevClick(): void {\n        if (this.emblaRef) {\n            this.emblaRef.scrollPrev();\n        }\n    }\n\n    /** Navigate to the next snap. */\n    onNextClick(): void {\n        if (this.emblaRef) {\n            this.emblaRef.scrollNext();\n        }\n    }\n\n    /** Navigate to a specific snap index. */\n    goTo(index: number): void {\n        if (this.emblaRef) {\n            this.emblaRef.scrollTo(index);\n        }\n    }\n\n    /** Returns the total number of cards. */\n    getCardsCount(): number {\n        return this.cards?.length ?? 0;\n    }\n\n    /** Returns an array of indices for dot rendering. */\n    getDotIndices(): number[] {\n        return Array.from({ length: this.totalSnaps() }, (_, i) => i);\n    }\n\n    /** Called by the emblaChange event from the directive. */\n    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 === 'select' || eventName === 'init' || eventName === 'reInit') {\n            this.syncState();\n        }\n\n        if (eventName === 'reInit') {\n            this.checkHeight();\n        }\n    }\n\n    /** Subscribed Embla events. */\n    subscribeToEvents: EmblaEventType[] = ['select', 'init', 'reInit'];\n\n    /**\n     * Equalizes the height of all cards based on the tallest content.\n     * Mirrors the ECL vanilla `checkHeight()` logic.\n     */\n    checkHeight(): void {\n        if (!this.cards || this.cards.length === 0) {\n            return;\n        }\n\n        let maxTextHeight = 0;\n        let maxHeight = 0;\n\n        const cardsArray = this.cards.toArray();\n\n        // First pass: find the tallest question/answer text\n        cardsArray.forEach((card) => {\n            const frontEl = card.getFrontElement();\n            const backEl = card.getBackElement();\n            const questionEl = card.getQuestionElement();\n            const answerEl = card.getAnswerElement();\n\n            if (!frontEl || !backEl || !questionEl || !answerEl) {\n                return;\n            }\n\n            frontEl.style.position = 'static';\n            backEl.style.position = 'static';\n\n            questionEl.style.minHeight = '';\n            answerEl.style.minHeight = '';\n\n            const heightQuestion = questionEl.scrollHeight;\n            const heightAnswer = answerEl.scrollHeight;\n            const heightText = Math.max(heightQuestion, heightAnswer);\n\n            if (heightText > maxTextHeight) {\n                maxTextHeight = heightText;\n            }\n\n            frontEl.style.position = '';\n            backEl.style.position = '';\n        });\n\n        // Second pass: apply min-height and find tallest card\n        cardsArray.forEach((card) => {\n            const frontEl = card.getFrontElement();\n            const backEl = card.getBackElement();\n            const questionEl = card.getQuestionElement();\n            const answerEl = card.getAnswerElement();\n            const contentEl = card.getContentElement();\n\n            if (!frontEl || !backEl || !questionEl || !answerEl || !contentEl) {\n                return;\n            }\n\n            frontEl.style.position = 'static';\n            backEl.style.position = 'static';\n            contentEl.style.height = '';\n\n            questionEl.style.minHeight = maxTextHeight + 'px';\n            answerEl.style.minHeight = maxTextHeight + 'px';\n\n            const heightFront = frontEl.scrollHeight;\n            const heightBack = backEl.scrollHeight;\n            const height = Math.max(heightFront, heightBack);\n\n            const minHeight = parseFloat(getComputedStyle(frontEl).getPropertyValue('min-height')) || 345;\n\n            if (height > minHeight && height > maxHeight) {\n                maxHeight = height;\n            }\n\n            frontEl.style.position = '';\n            backEl.style.position = '';\n        });\n\n        // Third pass: apply uniform height\n        if (maxHeight > 0) {\n            cardsArray.forEach((card) => {\n                const contentEl = card.getContentElement();\n                if (contentEl) {\n                    contentEl.style.height = maxHeight + 'px';\n                }\n            });\n        }\n    }\n\n    /** Initialize Embla and wire up state syncing. */\n    private initEmbla(): void {\n        if (!this.emblaRef) {\n            return;\n        }\n\n        this.emblaApi = this.emblaRef.emblaApi;\n\n        if (!this.emblaApi) {\n            return;\n        }\n\n        this.syncState();\n        this.checkHeight();\n        this.cd.detectChanges();\n    }\n\n    /** Sync component state from Embla API. */\n    private syncState(): void {\n        if (!this.emblaApi) {\n            return;\n        }\n\n        const snapList = this.emblaApi.scrollSnapList();\n        const selectedSnap = this.emblaApi.selectedScrollSnap();\n        const canScrollPrev = this.emblaApi.canScrollPrev();\n        const canScrollNext = this.emblaApi.canScrollNext();\n\n        this.totalSnaps.set(snapList.length);\n        this.activeIndex.set(selectedSnap);\n        this.prevDisabled.set(!canScrollPrev);\n        this.nextDisabled.set(!canScrollNext);\n        this.showControls.set(canScrollPrev || canScrollNext);\n\n        this.updateCounter();\n        this.updateLiveRegion();\n    }\n\n    /** Update the counter text (mobile). */\n    private updateCounter(): void {\n        const total = this.totalSnaps();\n        const current = this.activeIndex() + 1;\n        this.counterText.set(`${current} / ${total}`);\n    }\n\n    /** Update the live region for screen readers. */\n    private updateLiveRegion(): void {\n        const totalCards = this.getCardsCount();\n        const totalGroups = this.totalSnaps();\n        const currentGroup = this.activeIndex() + 1;\n        this.liveRegionText.set(\n            this.translateService.instant('ecl.quiz.SHOWING-SLIDE', { current: currentGroup, totalSlides: totalCards, totalGroups })\n        );\n    }\n\n    /** Move focus to the last dot button when Escape is pressed. */\n    private escapeSlider(): void {\n        if (this.dotButtons && this.dotButtons.length > 0) {\n            const lastDot = this.dotButtons.last;\n            lastDot.nativeElement.focus();\n        }\n    }\n\n    /** Propagate the variant and aria-roledescription to all child cards. */\n    private propagateVariant(): void {\n        const v = this.variant();\n        const isCarousel = this.cards.length > 1;\n        this.cards?.forEach(card => {\n            card.variant = v;\n            card.ariaRoleDescription = isCarousel ? 'slide' : null;\n        });\n    }\n}\n",
+            "sourceCode": "import {\n    AfterContentInit,\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    forwardRef,\n    HostBinding,\n    inject,\n    input,\n    QueryList,\n    signal,\n    ViewChild,\n    ViewChildren\n} from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { EmblaCarouselDirective, EmblaCarouselType, EmblaEventType } from 'embla-carousel-angular';\nimport { EclQuizCardComponent } from './ecl-quiz-card.component';\n\n/**\n * ECL Quiz component – renders a carousel of quiz cards with navigation.\n * Supports two variants: 'reveal' (flip cards) and 'poll' (multiple choice).\n *\n * Uses Embla Carousel (via embla-carousel-angular) to match the ECL vanilla\n * implementation which also uses Embla internally.\n */\n@Component({\n    selector: 'section[eclQuiz]',\n    templateUrl: './ecl-quiz.component.html',\n    host: {\n        '[class]': 'cssClasses',\n        '(keydown)': 'onKeydown($event)',\n    },\n    imports: [\n        TranslateModule,\n        EclIconComponent,\n        EmblaCarouselDirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EclQuizComponent extends ECLBaseDirective implements AfterContentInit, AfterViewInit {\n\n    /** Quiz variant: 'reveal' for flip cards, 'poll' for multiple choice. */\n    variant = input<'poll' | 'reveal'>('reveal');\n\n    /** Title displayed in the quiz header. */\n    eclTitle = input<string>('');\n\n    /** Description displayed below the title. */\n    eclDescription = input<string>('');\n\n    /** Embla carousel options matching ECL's configuration. */\n    emblaOptions = { loop: false, align: 'start' as const };\n\n    @ContentChildren(forwardRef(() => EclQuizCardComponent), { descendants: true })\n    cards: QueryList<EclQuizCardComponent>;\n\n    @ViewChild(EmblaCarouselDirective) emblaRef: EmblaCarouselDirective;\n    @ViewChildren('dotButton') dotButtons: QueryList<ElementRef>;\n\n    /** Current snap index. */\n    activeIndex = signal(0);\n\n    /** Total number of snap points. */\n    totalSnaps = signal(0);\n\n    /** Counter text for mobile display. */\n    counterText = signal('');\n\n    /** Whether the previous button is disabled. */\n    prevDisabled = signal(true);\n\n    /** Whether the next button is disabled. */\n    nextDisabled = signal(true);\n\n    /** Whether navigation controls should be shown. */\n    showControls = signal(false);\n\n    private cd = inject(ChangeDetectorRef);\n    private emblaApi: EmblaCarouselType | undefined;\n\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-quiz'),\n            `ecl-quiz--${this.variant()}`,\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    ngAfterContentInit(): void {\n        if (this.cards && this.cards.length > 1) {\n            this.showControls.set(true);\n        }\n        this.propagateVariant();\n        this.cards.changes.subscribe(() => this.propagateVariant());\n    }\n\n    ngAfterViewInit(): void {\n        // Give Embla time to initialize\n        setTimeout(() => {\n            this.initEmbla();\n        });\n    }\n\n    /** Handle keyboard events. */\n    onKeydown(event: KeyboardEvent): void {\n        if (event.key === 'Escape') {\n            this.escapeSlider();\n        }\n    }\n\n    /** Navigate to the previous snap. */\n    onPrevClick(): void {\n        if (this.emblaRef) {\n            this.emblaRef.scrollPrev();\n        }\n    }\n\n    /** Navigate to the next snap. */\n    onNextClick(): void {\n        if (this.emblaRef) {\n            this.emblaRef.scrollNext();\n        }\n    }\n\n    /** Navigate to a specific snap index. */\n    goTo(index: number): void {\n        if (this.emblaRef) {\n            this.emblaRef.scrollTo(index);\n        }\n    }\n\n    /** Returns the total number of cards. */\n    getCardsCount(): number {\n        return this.cards?.length ?? 0;\n    }\n\n    /** Returns an array of indices for dot rendering. */\n    getDotIndices(): number[] {\n        return Array.from({ length: this.totalSnaps() }, (_, i) => i);\n    }\n\n    /** Called by the emblaChange event from the directive. */\n    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 === 'select' || eventName === 'init' || eventName === 'reInit') {\n            this.syncState();\n        }\n\n        if (eventName === 'reInit') {\n            this.checkHeight();\n        }\n    }\n\n    /** Subscribed Embla events. */\n    subscribeToEvents: EmblaEventType[] = ['select', 'init', 'reInit'];\n\n    /**\n     * Equalizes the height of all cards based on the tallest content.\n     * Mirrors the ECL vanilla `checkHeight()` logic.\n     */\n    checkHeight(): void {\n        if (!this.cards || this.cards.length === 0) {\n            return;\n        }\n\n        let maxTextHeight = 0;\n        let maxHeight = 0;\n\n        const cardsArray = this.cards.toArray();\n\n        // First pass: find the tallest question/answer text\n        cardsArray.forEach((card) => {\n            const frontEl = card.getFrontElement();\n            const backEl = card.getBackElement();\n            const questionEl = card.getQuestionElement();\n            const answerEl = card.getAnswerElement();\n\n            if (!frontEl || !backEl || !questionEl || !answerEl) {\n                return;\n            }\n\n            frontEl.style.position = 'static';\n            backEl.style.position = 'static';\n\n            questionEl.style.minHeight = '';\n            answerEl.style.minHeight = '';\n\n            const heightQuestion = questionEl.scrollHeight;\n            const heightAnswer = answerEl.scrollHeight;\n            const heightText = Math.max(heightQuestion, heightAnswer);\n\n            if (heightText > maxTextHeight) {\n                maxTextHeight = heightText;\n            }\n\n            frontEl.style.position = '';\n            backEl.style.position = '';\n        });\n\n        // Second pass: apply min-height and find tallest card\n        cardsArray.forEach((card) => {\n            const frontEl = card.getFrontElement();\n            const backEl = card.getBackElement();\n            const questionEl = card.getQuestionElement();\n            const answerEl = card.getAnswerElement();\n            const contentEl = card.getContentElement();\n\n            if (!frontEl || !backEl || !questionEl || !answerEl || !contentEl) {\n                return;\n            }\n\n            frontEl.style.position = 'static';\n            backEl.style.position = 'static';\n            contentEl.style.height = '';\n\n            questionEl.style.minHeight = maxTextHeight + 'px';\n            answerEl.style.minHeight = maxTextHeight + 'px';\n\n            const heightFront = frontEl.scrollHeight;\n            const heightBack = backEl.scrollHeight;\n            const height = Math.max(heightFront, heightBack);\n\n            const minHeight = parseFloat(getComputedStyle(frontEl).getPropertyValue('min-height')) || 345;\n\n            if (height > minHeight && height > maxHeight) {\n                maxHeight = height;\n            }\n\n            frontEl.style.position = '';\n            backEl.style.position = '';\n        });\n\n        // Third pass: apply uniform height\n        if (maxHeight > 0) {\n            cardsArray.forEach((card) => {\n                const contentEl = card.getContentElement();\n                if (contentEl) {\n                    contentEl.style.height = maxHeight + 'px';\n                }\n            });\n        }\n    }\n\n    /** Initialize Embla and wire up state syncing. */\n    private initEmbla(): void {\n        if (!this.emblaRef) {\n            return;\n        }\n\n        this.emblaApi = this.emblaRef.emblaApi;\n\n        if (!this.emblaApi) {\n            return;\n        }\n\n        this.syncState();\n        this.checkHeight();\n        this.cd.detectChanges();\n    }\n\n    /** Sync component state from Embla API. */\n    private syncState(): void {\n        if (!this.emblaApi) {\n            return;\n        }\n\n        const snapList = this.emblaApi.scrollSnapList();\n        const selectedSnap = this.emblaApi.selectedScrollSnap();\n        const canScrollPrev = this.emblaApi.canScrollPrev();\n        const canScrollNext = this.emblaApi.canScrollNext();\n\n        this.totalSnaps.set(snapList.length);\n        this.activeIndex.set(selectedSnap);\n        this.prevDisabled.set(!canScrollPrev);\n        this.nextDisabled.set(!canScrollNext);\n        this.showControls.set(canScrollPrev || canScrollNext);\n\n        this.updateCounter();\n    }\n\n    /** Update the counter text (mobile). */\n    private updateCounter(): void {\n        const total = this.totalSnaps();\n        const current = this.activeIndex() + 1;\n        this.counterText.set(`${current} / ${total}`);\n    }\n\n    /** Move focus to the last dot button when Escape is pressed. */\n    private escapeSlider(): void {\n        if (this.dotButtons && this.dotButtons.length > 0) {\n            const lastDot = this.dotButtons.last;\n            lastDot.nativeElement.focus();\n        }\n    }\n\n    /** Propagate the variant to all child cards. */\n    private propagateVariant(): void {\n        const v = this.variant();\n        this.cards?.forEach(card => {\n            card.variant = v;\n        });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -61703,11 +62251,11 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 88
+                        "line": 86
                     }
                 }
             },
-            "templateData": "@if (eclTitle() || eclDescription()) {\n<div class=\"ecl-quiz__header\">\n    @if (eclTitle()) {\n    <div class=\"ecl-quiz__title\">{{ eclTitle() }}</div>\n    }\n    @if (eclDescription()) {\n    <div class=\"ecl-quiz__description\">{{ eclDescription() }}</div>\n    }\n</div>\n}\n\n<div class=\"ecl-quiz__viewport\" data-ecl-quiz-slider\n    role=\"region\"\n    aria-label=\"Quiz slider\"\n    aria-roledescription=\"carousel\"\n    emblaCarousel\n    [options]=\"emblaOptions\"\n    [subscribeToEvents]=\"subscribeToEvents\"\n    (emblaChange)=\"onEmblaChange($event)\">\n    <div class=\"ecl-quiz__list\">\n        <ng-content></ng-content>\n    </div>\n</div>\n\n@if (showControls()) {\n<div class=\"ecl-quiz__pager\">\n    <button\n        class=\"ecl-quiz__prev\"\n        [disabled]=\"prevDisabled()\"\n        (click)=\"onPrevClick()\">\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n        <span class=\"ecl-quiz__prev-label\">\n            {{ 'ecl.quiz.PREVIOUS' | translate }}\n        </span>\n    </button>\n\n    <div class=\"ecl-quiz__dots\">\n        @for (dotIndex of getDotIndices(); track dotIndex) {\n        <button\n            #dotButton\n            class=\"ecl-quiz__dot\"\n            [class.ecl-quiz__dot--active]=\"dotIndex === activeIndex()\"\n            [class.is-prev]=\"dotIndex === activeIndex() - 1\"\n            [attr.aria-label]=\"'ecl.quiz.GO-TO-SLIDE' | translate: { current: dotIndex + 1, total: totalSnaps() }\"\n            (click)=\"goTo(dotIndex)\">\n        </button>\n        }\n    </div>\n\n    <button\n        class=\"ecl-quiz__next\"\n        [disabled]=\"nextDisabled()\"\n        (click)=\"onNextClick()\">\n        <span class=\"ecl-quiz__next-label\">\n            {{ 'ecl.quiz.NEXT' | translate }}\n        </span>\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    </button>\n</div>\n\n<div class=\"ecl-quiz__counter\">{{ counterText() }}</div>\n}\n\n<div class=\"ecl-quiz__live-region\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveRegionText() }}</div>\n"
+            "templateData": "@if (eclTitle() || eclDescription()) {\n<div class=\"ecl-quiz__header\">\n    @if (eclTitle()) {\n    <div class=\"ecl-quiz__title\">{{ eclTitle() }}</div>\n    }\n    @if (eclDescription()) {\n    <div class=\"ecl-quiz__description\">{{ eclDescription() }}</div>\n    }\n</div>\n}\n\n<div class=\"ecl-quiz__viewport\" data-ecl-quiz-slider\n    role=\"region\"\n    aria-label=\"Quiz slider\"\n    aria-roledescription=\"carousel\"\n    emblaCarousel\n    [options]=\"emblaOptions\"\n    [subscribeToEvents]=\"subscribeToEvents\"\n    (emblaChange)=\"onEmblaChange($event)\">\n        \n    <ng-content></ng-content>\n</div>\n\n@if (showControls()) {\n<div class=\"ecl-quiz__pager\">\n    <button\n        class=\"ecl-quiz__prev\"\n        [disabled]=\"prevDisabled()\"\n        (click)=\"onPrevClick()\">\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n        <span class=\"ecl-quiz__prev-label\">\n            {{ 'ecl.quiz.PREVIOUS' | translate }}\n        </span>\n    </button>\n\n    <div class=\"ecl-quiz__dots\">\n        @for (dotIndex of getDotIndices(); track dotIndex) {\n        <button\n            #dotButton\n            class=\"ecl-quiz__dot\"\n            [class.ecl-quiz__dot--active]=\"dotIndex === activeIndex()\"\n            [class.is-prev]=\"dotIndex === activeIndex() - 1\"\n            [attr.aria-label]=\"'ecl.quiz.GO-TO-SLIDE' | translate: { current: dotIndex + 1, total: totalSnaps() }\"\n            (click)=\"goTo(dotIndex)\">\n        </button>\n        }\n    </div>\n\n    <button\n        class=\"ecl-quiz__next\"\n        [disabled]=\"nextDisabled()\"\n        (click)=\"onNextClick()\">\n        <span class=\"ecl-quiz__next-label\">\n            {{ 'ecl.quiz.NEXT' | translate }}\n        </span>\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    </button>\n</div>\n\n<div class=\"ecl-quiz__counter\">{{ counterText() }}</div>\n}\n\n"
         },
         {
             "name": "EclRadioHelpComponent",
@@ -63572,19 +64120,15 @@
         },
         {
             "name": "EclSiteFooterComponent",
-            "id": "component-EclSiteFooterComponent-a257e54571d7b50ece569c65e01653c3a4e33028f463b5720d539375fdf8b75e5d0dc83a8d7089986b644dafb150d99649855f017e2cb3f22aa6787297ae0ef7",
+            "id": "component-EclSiteFooterComponent-534d3bb58c2a2612def4a4e79db315e012026780ce6e380b9906ddac6d493af9ca0514e90f59f9db19dadaf994ae820c2081d54ad19e5e7f823011ad773ed15d",
             "file": "packages/ecl/components/ecl-site-footer/ecl-site-footer.component.ts",
-            "encapsulation": [
-                "ViewEncapsulation.None"
-            ],
+            "encapsulation": [],
             "entryComponents": [],
             "inputs": [],
             "outputs": [],
             "providers": [],
             "selector": "footer[eclSiteFooter], ecl-site-footer",
-            "styleUrls": [
-                "./ecl-site-footer.css"
-            ],
+            "styleUrls": [],
             "styles": [],
             "templateUrl": [
                 "./ecl-site-footer.component.html"
@@ -63599,7 +64143,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe URL of the accessibility statement. It should be provided by the user, but if not, a default one from the Europa web guide will be used.\n",
                     "description": "<p>The URL of the accessibility statement. It should be provided by the user, but if not, a default one from the Europa web guide will be used.</p>\n",
-                    "line": 39,
+                    "line": 37,
                     "type": "string",
                     "decorators": []
                 },
@@ -63611,7 +64155,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nIf it's a core site footer. The content of the footer for the Core configuration is specific and all items mandatory.\n",
                     "description": "<p>If it&#39;s a core site footer. The content of the footer for the Core configuration is specific and all items mandatory.</p>\n",
-                    "line": 35,
+                    "line": 33,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -63661,7 +64205,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 26
+                    "line": 24
                 },
                 {
                     "name": "i18nService",
@@ -63672,7 +64216,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 25,
+                    "line": 23,
                     "modifierKind": [
                         124
                     ]
@@ -63686,7 +64230,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The current language of the page.</p>\n",
-                    "line": 31,
+                    "line": 29,
                     "rawdescription": "\n\nThe current language of the page.\n"
                 },
                 {
@@ -63698,7 +64242,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The role of the component is &#39;contentinfo&#39; and should not be changed.</p>\n",
-                    "line": 49,
+                    "line": 47,
                     "rawdescription": "\n\nThe role of the component is 'contentinfo' and should not be changed.\n",
                     "decorators": [
                         {
@@ -63718,7 +64262,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 71,
+                    "line": 69,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -63728,7 +64272,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 67,
+                    "line": 65,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -63778,7 +64322,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe role of the component is 'contentinfo' and should not be changed.\n",
                     "description": "<p>The role of the component is &#39;contentinfo&#39; and should not be changed.</p>\n",
-                    "line": 49,
+                    "line": 47,
                     "type": "string",
                     "decorators": []
                 },
@@ -63786,7 +64330,7 @@
                     "name": "class",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 42,
+                    "line": 40,
                     "type": "string",
                     "decorators": []
                 }
@@ -63817,14 +64361,9 @@
             "description": "<p>The site footer component content provides supplementary information such as a sitemap, copyright and legal notices,\n privacy and accessibility statements, social media and contact information as well as various links to other\n important sections within the EC ecosystem.</p>\n",
             "rawdescription": "\n\nThe site footer component content provides supplementary information such as a sitemap, copyright and legal notices,\n privacy and accessibility statements, social media and contact information as well as various links to other\n important sections within the EC ecosystem.\n",
             "type": "component",
-            "sourceCode": "import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, ViewEncapsulation, booleanAttribute, inject } from '@angular/core';\nimport { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { I18nService } from '@eui/core';\nimport { ECLBaseDirective, EclThemeService, logoLanguageCode } from '@eui/ecl/core';\nimport { EclSiteFooterCoreComponent, EclSiteFooterFixedContentEUComponent } from './ecl-footer-elements';\nimport { EclSiteFooterRowCommonComponent } from './ecl-footer-elements/ec/ecl-site-footer-row-common/ecl-site-footer-row-common.component';\n\n/**\n * The site footer component content provides supplementary information such as a sitemap, copyright and legal notices,\n *  privacy and accessibility statements, social media and contact information as well as various links to other\n *  important sections within the EC ecosystem.\n */\n@Component({\n    selector: 'footer[eclSiteFooter], ecl-site-footer',\n    templateUrl: './ecl-site-footer.component.html',\n    styleUrls: ['./ecl-site-footer.css'],\n    encapsulation: ViewEncapsulation.None,\n    imports: [AsyncPipe, NgTemplateOutlet, EclSiteFooterRowCommonComponent, EclSiteFooterFixedContentEUComponent,\n        EclSiteFooterCoreComponent,\n    ],\n})\nexport class EclSiteFooterComponent extends ECLBaseDirective implements OnInit, OnDestroy {\n    protected i18nService = inject(I18nService);\n    eclThemeService = inject(EclThemeService);\n\n    /**\n     * The current language of the page.\n     */\n    languageCode = 'en';\n    /**\n     * If it's a core site footer. The content of the footer for the Core configuration is specific and all items mandatory.\n     */\n    @Input({ transform: booleanAttribute }) isCore = false;\n    /**\n     * The URL of the accessibility statement. It should be provided by the user, but if not, a default one from the Europa web guide will be used.\n     */\n    @Input() a11yStatementRef = 'https://commission.europa.eu/accessibility-statement_en';\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-site-footer'), this.isCore ? 'ecl-site-footer--split-columns' : ''].join(' ').trim();\n    }\n\n    /**\n     * The role of the component is 'contentinfo' and should not be changed.\n     */\n    @HostBinding('attr.role') role = 'contentinfo';\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n\n    constructor() {\n        super();\n        // Detect which selector was used\n        const host = inject(ElementRef<HTMLElement>).nativeElement;\n\n        // If the element tag is the old one → warn\n        if (host.tagName.toLowerCase() === 'ecl-site-footer') {\n            console.warn(\n                '[DEPRECATION] <ecl-site-footer> is deprecated. ' +\n                'Use <footer eclSiteFooter> instead.'\n            );\n        }\n    }\n\n    ngOnInit(): void {\n        this.handleLanguageChangeState();\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * This method is used, when current language is not present for our available logo collection.\n     * In this case, a default logo is returned.\n     */\n    get logoLanguageCode(): string {\n        return logoLanguageCode(this.languageCode);\n    }\n\n    private handleLanguageChangeState(): void {\n        this.i18nService.getState().pipe(takeUntil(this.destroy$)).subscribe((lang) => {\n            this.languageCode = lang.activeLang;\n        });\n    }\n}\n",
+            "sourceCode": "import { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, booleanAttribute, inject } from '@angular/core';\nimport { I18nService } from '@eui/core';\nimport { ECLBaseDirective, EclThemeService, logoLanguageCode } from '@eui/ecl/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { EclSiteFooterCoreComponent, EclSiteFooterFixedContentEUComponent } from './ecl-footer-elements';\nimport { EclSiteFooterRowCommonComponent } from './ecl-footer-elements/ec/ecl-site-footer-row-common/ecl-site-footer-row-common.component';\n\n/**\n * The site footer component content provides supplementary information such as a sitemap, copyright and legal notices,\n *  privacy and accessibility statements, social media and contact information as well as various links to other\n *  important sections within the EC ecosystem.\n */\n@Component({\n    selector: 'footer[eclSiteFooter], ecl-site-footer',\n    templateUrl: './ecl-site-footer.component.html',\n    imports: [AsyncPipe, NgTemplateOutlet, EclSiteFooterRowCommonComponent, EclSiteFooterFixedContentEUComponent,\n        EclSiteFooterCoreComponent,\n    ],\n})\nexport class EclSiteFooterComponent extends ECLBaseDirective implements OnInit, OnDestroy {\n    protected i18nService = inject(I18nService);\n    eclThemeService = inject(EclThemeService);\n\n    /**\n     * The current language of the page.\n     */\n    languageCode = 'en';\n    /**\n     * If it's a core site footer. The content of the footer for the Core configuration is specific and all items mandatory.\n     */\n    @Input({ transform: booleanAttribute }) isCore = false;\n    /**\n     * The URL of the accessibility statement. It should be provided by the user, but if not, a default one from the Europa web guide will be used.\n     */\n    @Input() a11yStatementRef = 'https://commission.europa.eu/accessibility-statement_en';\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-site-footer'), this.isCore ? 'ecl-site-footer--split-columns' : ''].join(' ').trim();\n    }\n\n    /**\n     * The role of the component is 'contentinfo' and should not be changed.\n     */\n    @HostBinding('attr.role') role = 'contentinfo';\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n\n    constructor() {\n        super();\n        // Detect which selector was used\n        const host = inject(ElementRef<HTMLElement>).nativeElement;\n\n        // If the element tag is the old one → warn\n        if (host.tagName.toLowerCase() === 'ecl-site-footer') {\n            console.warn(\n                '[DEPRECATION] <ecl-site-footer> is deprecated. ' +\n                'Use <footer eclSiteFooter> instead.'\n            );\n        }\n    }\n\n    ngOnInit(): void {\n        this.handleLanguageChangeState();\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * This method is used, when current language is not present for our available logo collection.\n     * In this case, a default logo is returned.\n     */\n    get logoLanguageCode(): string {\n        return logoLanguageCode(this.languageCode);\n    }\n\n    private handleLanguageChangeState(): void {\n        this.i18nService.getState().pipe(takeUntil(this.destroy$)).subscribe((lang) => {\n            this.languageCode = lang.activeLang;\n        });\n    }\n}\n",
             "assetsDirs": [],
-            "styleUrlsData": [
-                {
-                    "data": ".ecl-link--inverted svg.ecl-social-media-follow__icon {\n    fill: #000;\n    color: #000;\n    filter: invert(1);\n}",
-                    "styleUrl": "./ecl-site-footer.css"
-                }
-            ],
+            "styleUrlsData": "",
             "stylesData": "",
             "constructorObj": {
                 "name": "constructor",
@@ -63832,7 +64371,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 51
+                "line": 49
             },
             "extends": [
                 "ECLBaseDirective"
@@ -63848,7 +64387,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 42
+                        "line": 40
                     }
                 },
                 "logoLanguageCode": {
@@ -63857,7 +64396,7 @@
                         "name": "logoLanguageCode",
                         "type": "string",
                         "returnType": "string",
-                        "line": 80,
+                        "line": 78,
                         "rawdescription": "\n\nThis method is used, when current language is not present for our available logo collection.\nIn this case, a default logo is returned.\n",
                         "description": "<p>This method is used, when current language is not present for our available logo collection.\nIn this case, a default logo is returned.</p>\n"
                     }
@@ -71886,6 +72425,160 @@
             },
             "templateData": "<ng-content></ng-content>\n@if(isRemovable) {\n    <span class=\"ecl-tag__icon\" (click)=\"onRemoveClick()\">\n    <ecl-icon icon=\"close-outline\" class=\"ecl-tag__icon-close\" [title]=\"title | titlecase\"></ecl-icon>\n</span>\n}\n"
         },
+        {
+            "name": "EclTextMediaComponent",
+            "id": "component-EclTextMediaComponent-b90649ad7fcef76723d43125ef19d92d529e837b360eeb9f4fe79f6e953813125be807571f60812e7fa04c1dca4ea434d3ae085c8deedc1b24f40026989863e5",
+            "file": "packages/ecl/components/ecl-text-media/ecl-text-media.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "host": {},
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "article[eclTextMedia]",
+            "styleUrls": [],
+            "styles": [],
+            "templateUrl": [
+                "./ecl-text-media.component.html"
+            ],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [
+                {
+                    "name": "mediaPosition",
+                    "defaultValue": "'right'",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "\"left\" | \"right\"",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 19,
+                    "required": false
+                },
+                {
+                    "name": "variant",
+                    "defaultValue": "'default'",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "\"default\" | \"primary\"",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 17,
+                    "required": false
+                },
+                {
+                    "name": "class",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 8,
+                    "type": "string",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                },
+                {
+                    "name": "e2eAttr",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 10,
+                    "type": "any",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                },
+                {
+                    "required": false,
+                    "name": "tabindex",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 13,
+                    "type": "number",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                }
+            ],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [
+                {
+                    "name": "getCssClasses",
+                    "args": [
+                        {
+                            "name": "rootClass",
+                            "type": "string",
+                            "optional": false,
+                            "dotDotDotToken": false,
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "string",
+                    "typeParameters": [],
+                    "line": 15,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "jsdoctags": [
+                        {
+                            "name": "rootClass",
+                            "type": "string",
+                            "optional": false,
+                            "dotDotDotToken": false,
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                }
+            ],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": false,
+            "imports": [],
+            "description": "<p>A media container is used to display media items (video, audio, image or other data)\n with text and a caption.</p>\n",
+            "rawdescription": "\n\nA media container is used to display media items (video, audio, image or other data)\n with text and a caption.\n",
+            "type": "component",
+            "sourceCode": "import { Component, contentChild, effect, input } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclMediaContainerComponent } from '@eui/ecl/components/ecl-media-container';\n\n/**\n * A media container is used to display media items (video, audio, image or other data)\n *  with text and a caption.\n */\n@Component({\n    selector: 'article[eclTextMedia]',\n    templateUrl: './ecl-text-media.component.html',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclTextMediaComponent extends ECLBaseDirective {\n    variant = input<'default' | 'primary'>('default');\n\n    mediaPosition = input<'left' | 'right'>('right');\n\n    private mediaContainer = contentChild(EclMediaContainerComponent);\n\n    constructor() {\n        super();\n        effect(() => {\n            const mc = this.mediaContainer();\n            if (mc?.hasVideo()) {\n                mc.captionPositionOverride.set('hidden');\n            }\n        });\n    }\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-text-media'),\n            this.variant() === 'primary' ? 'ecl-text-media--primary' : '',\n            this.mediaPosition() === 'left' ? 'ecl-text-media--position-left' : '',\n        ].filter(Boolean).join(' ');\n    }\n}\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "",
+            "constructorObj": {
+                "name": "constructor",
+                "description": "",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "args": [],
+                "line": 21
+            },
+            "extends": [
+                "ECLBaseDirective"
+            ],
+            "accessors": {
+                "cssClasses": {
+                    "name": "cssClasses",
+                    "getSignature": {
+                        "name": "cssClasses",
+                        "type": "string",
+                        "returnType": "string",
+                        "line": 33
+                    }
+                }
+            },
+            "templateData": "<div class=\"ecl-text-media__content\">\n    <ng-content select=\"div[eclTextMediaMicroTitle]\"></ng-content>\n    <ng-content select=\"div[eclTextMediaTitle]\"></ng-content>\n    <ng-content select=\"div[eclTextMediaDescription]\"></ng-content>\n    <ng-content select=\"a[eclTextMediaLink]\"></ng-content>\n</div>\n<div class=\"ecl-text-media__media\">\n    <ng-content select=\"ecl-media-container\"></ng-content>\n</div>"
+        },
         {
             "name": "EclTimelineComponent",
             "id": "component-EclTimelineComponent-b0a27aabbfa958205e145f2853c7864ec9ea04351454c46646f34d80e19b450bb98cef2a776b89b2baa2c85348db401333934a63788f360bbd0735e9cfe39333",
@@ -73377,6 +74070,16 @@
                 "type": "unknown",
                 "defaultValue": "[\n    EclAddToCalendarComponent,\n    EclAddToCalendarActionDirective,\n] as const"
             },
+            {
+                "name": "EUI_ECL_ANIMATED_NUMBERS",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "packages/ecl/components/ecl-animated-numbers/index.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "unknown",
+                "defaultValue": "[\n    EclAnimatedNumbersComponent,\n    EclAnimatedNumbersItemsDirective,\n    EclAnimatedNumbersSourcesListDirective,\n    EclAnimatedNumbersSourcesItemDirective,\n    EclAnimatedNumbersSourceDirective,\n    EclAnimatedNumbersItemComponent,\n    EclAnimatedNumbersIconDirective,\n] as const"
+            },
             {
                 "name": "EUI_ECL_APP",
                 "ctype": "miscellaneous",
@@ -73787,6 +74490,16 @@
                 "type": "unknown",
                 "defaultValue": "[\n    EclPageInformationDirective,\n] as const"
             },
+            {
+                "name": "EUI_ECL_PAGE_SUMMARY",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "packages/ecl/components/ecl-page-summary/index.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "unknown",
+                "defaultValue": "[\n    EclPageSummaryComponent,\n] as const"
+            },
             {
                 "name": "EUI_ECL_PAGINATION",
                 "ctype": "miscellaneous",
@@ -73815,7 +74528,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "unknown",
-                "defaultValue": "[\n  EclQuizComponent,\n  EclQuizCardComponent,\n] as const"
+                "defaultValue": "[\n  EclQuizComponent,\n  EclQuizCardComponent,\n  EclQuizListDirective,\n] as const"
             },
             {
                 "name": "EUI_ECL_RADIO",
@@ -73977,6 +74690,16 @@
                 "type": "unknown",
                 "defaultValue": "[\n  EclTextInputDirective,\n] as const"
             },
+            {
+                "name": "EUI_ECL_TEXT_MEDIA",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "packages/ecl/components/ecl-text-media/index.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "unknown",
+                "defaultValue": "[\n    EclTextMediaComponent,\n    EclTextMediaMicroTitleDirective,\n    EclTextMediaTitleDirective,\n    EclTextMediaDescriptionDirective,\n    EclTextMediaLinkDirective,\n    EclTextMediaMediaAnchorDirective,\n    EclTextMediaContainerDirective,\n] as const"
+            },
             {
                 "name": "EUI_ECL_TIMELINE",
                 "ctype": "miscellaneous",
@@ -74621,6 +75344,18 @@
                     "defaultValue": "[\n    EclAddToCalendarComponent,\n    EclAddToCalendarActionDirective,\n] as const"
                 }
             ],
+            "packages/ecl/components/ecl-animated-numbers/index.ts": [
+                {
+                    "name": "EUI_ECL_ANIMATED_NUMBERS",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "packages/ecl/components/ecl-animated-numbers/index.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "defaultValue": "[\n    EclAnimatedNumbersComponent,\n    EclAnimatedNumbersItemsDirective,\n    EclAnimatedNumbersSourcesListDirective,\n    EclAnimatedNumbersSourcesItemDirective,\n    EclAnimatedNumbersSourceDirective,\n    EclAnimatedNumbersItemComponent,\n    EclAnimatedNumbersIconDirective,\n] as const"
+                }
+            ],
             "packages/ecl/components/ecl-app/index.ts": [
                 {
                     "name": "EUI_ECL_APP",
@@ -75113,6 +75848,18 @@
                     "defaultValue": "[\n    EclPageInformationDirective,\n] as const"
                 }
             ],
+            "packages/ecl/components/ecl-page-summary/index.ts": [
+                {
+                    "name": "EUI_ECL_PAGE_SUMMARY",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "packages/ecl/components/ecl-page-summary/index.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "defaultValue": "[\n    EclPageSummaryComponent,\n] as const"
+                }
+            ],
             "packages/ecl/components/ecl-pagination/index.ts": [
                 {
                     "name": "EUI_ECL_PAGINATION",
@@ -75146,7 +75893,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
-                    "defaultValue": "[\n  EclQuizComponent,\n  EclQuizCardComponent,\n] as const"
+                    "defaultValue": "[\n  EclQuizComponent,\n  EclQuizCardComponent,\n  EclQuizListDirective,\n] as const"
                 }
             ],
             "packages/ecl/components/ecl-radio/index.ts": [
@@ -75341,6 +76088,18 @@
                     "defaultValue": "[\n  EclTextInputDirective,\n] as const"
                 }
             ],
+            "packages/ecl/components/ecl-text-media/index.ts": [
+                {
+                    "name": "EUI_ECL_TEXT_MEDIA",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "packages/ecl/components/ecl-text-media/index.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "defaultValue": "[\n    EclTextMediaComponent,\n    EclTextMediaMicroTitleDirective,\n    EclTextMediaTitleDirective,\n    EclTextMediaDescriptionDirective,\n    EclTextMediaLinkDirective,\n    EclTextMediaMediaAnchorDirective,\n    EclTextMediaContainerDirective,\n] as const"
+                }
+            ],
             "packages/ecl/components/ecl-timeline/index.ts": [
                 {
                     "name": "EUI_ECL_TIMELINE",