@eui/ecl 22.0.0-alpha.51 → 22.0.0-alpha.53

package/docs/json/EclCarouselComponent.md

@@ -8,21 +8,25 @@ Carousel (slideshow) component following the ECL design system.
 Renders a sequence of `EclCarouselItemComponent` slides with autoplay, keyboard navigation,
 responsive breakpoint awareness, and RTL layout support.
 
+The slide engine is powered by Embla (via `embla-carousel-angular`), matching the upstream
+ECL implementation: an infinite `loop`, the `Autoplay` plugin driving the teaser loading bars,
+and a slider pager with previous/next/play/pause controls, a counter, and a tablist of teaser
+buttons (one per slide).
+
 - Selector: `ecl-carousel`.
 - Project `ecl-carousel-item` elements as slides (also via `contentChildren`).
-- `ariaLabel` — ARIA label for the carousel landmark; aliased as `aria-label`; default `'Carousel description here'`.
+- `ariaLabel` — ARIA label for the carousel landmark; aliased as `aria-label`.
 - `isAutoplay` — enables automatic slide advancement; boolean attribute.
 - `playInterval` — milliseconds between automatic transitions; default `5000`.
+- `counterLabel` — separator label used by the counter, defaults to `ecl.common.OF`.
 - `slide` — emits `EclSlideEvent` when the active slide changes.
-- `isPlaying` / `isPausedForced` — public flags reflecting playback state.
-- `isRtl` — public flag reflecting RTL mode.
-- Navigation controls and play/pause buttons are rendered internally.
 
 
 **Selector:** `ecl-carousel`
 
 ## Inputs
 - **aria-label**: `string | null` - Aria-label for screen readers to describe the carousel.
+- **counterLabel**: `string` - Separator label used by the counter, e.g. the "of" in "1 of 5". Defaults to the translated `ecl.common.OF` key.
 - **isAutoplay**: `boolean` - Determines whether the carousel should autoplay.
 - **playInterval**: `number` - Interval in milliseconds between automatic slide transitions.
 - **class**: `string` - 

package/docs/json/EclCarouselItemComponent.md

@@ -22,6 +22,7 @@ the `inert` attribute so only the active slide is interactive.
 ## Inputs
 - **id**: `string` - The unique identifier of the slide.
 - **isCurrent**: `boolean` - Input controlling whether this slide starts as the active/visible one. Automatically coerced to a boolean value.
+- **teaserText**: `string` - Text shown in the carousel teaser (navigation) button for this slide. Optional; when empty, no teaser label is rendered for the slide.
 - **class**: `string` - 
 - **e2eAttr**: `string` - 
 - **tabindex**: `undefined` - 

package/docs/json/EclQuizCardComponent.md

@@ -15,10 +15,13 @@ For the 'poll' variant, individual options trigger the flip.
 ## Inputs
 - **answer**: `string` - The answer text displayed on the back of the card. Used in 'reveal' variant or as explanation in 'poll' variant.
 - **answerTitle**: `string` - The answer title (e.g. "The correct answer is A.") for poll variant.
-- **category**: `string` - Category label displayed in the card header (poll variant).
-- **icon**: `string` - Icon name for the card header. Defaults to 'sparkle' for reveal, 'question' for poll.
-- **iconSize**: `"xs" | "s" | "m" | "l" | "xl" | "2xl"` - Icon size for the card header.
+- **category**: `string` - Category label displayed in the card header (poll variant).  category label (it is no longer part of the markup or styled by `@eui/styles`); the back of the card now relies on the answer title and the success/error result icons. This input is kept only to preserve the public API and no longer renders anything. To be removed in v22.x.
+- **icon**: `string` - Icon name for the card header. Defaults to 'sparkle' for reveal, 'question-mark' for poll.
+- **iconSize**: `'' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl'` - Icon size for the card header. When empty, a variant-based default is used ('xl' for poll, 'l' for reveal).
 - **id**: `string` - Unique identifier for the card, used for accessibility attributes. If not provided, a unique ID is generated automatically.
+- **imageAlt**: `string` - Alternative text for the card image.
+- **imageDisplay**: `"none" | "back" | "always"` - Controls where the image/illustration is displayed: - 'none': no image (default) - 'back': image only on the back; for poll variant an animated   question-mark illustration is shown on the front - 'always': image on both front and back
+- **imageSrc**: `string` - Image source for the card. When set together with a supported {@link imageDisplay} mode, a picture is rendered on the card.
 - **options**: `{ text: string; match: boolean }[]` - Options for the poll variant. Each option has text and a match flag.
 - **question**: `string` - The question text displayed on the front of the card.
 - **class**: `string` - 

package/docs/json/EclSliderPagerComponent.md

@@ -0,0 +1,55 @@
+# EclSliderPagerComponent
+
+**Type:** component
+
+
+
+ECL Slider Pager component.
+
+A presentational navigation strip (previous / dots / optional play-pause / next)
+shared by slider-like components such as quiz, story-card and carousel.
+
+It is intentionally self-contained and framework-presentational:
+- It owns no carousel. The parent owns its own source of truth (e.g. an Embla
+  carousel or an accordion state) and maps that state onto this component's inputs.
+- It only renders markup and emits intent through its outputs
+  (`prev`, `next`, `goTo`, `play`, `pause`).
+
+For the `play-pause` variant the DOM order is `play/pause -> prev -> next`, so
+keyboard/screen-reader focus reaches the play/pause control first (accessibility
+requirement, see FRONT-5436). For the `dots` variant the DOM order stays
+`prev -> dots -> next`. The visual skeleton `prev -> [middle] -> next` is
+preserved via CSS `order` on the per-slot classes.
+
+Styling (including the `order` rules that restore the visual layout) is provided
+by the shared `ecl-slider-pager__*` classes shipped in `@eui/styles`.
+
+
+**Selector:** `ecl-slider-pager`
+
+## Inputs
+- **activeIndex**: `number` - Index of the currently active dot.
+- **dotAriaLabels**: `string[]` - Accessible label for each dot, indexed by dot index. The parent is responsible for computing these (e.g. "Show slides 1 to 3 of 5"), since the wording depends on the parent's slide grouping and translations.
+- **dotExtraClasses**: `string` - 
+- **dotIndices**: `number[]` - Indices of the dots to render. Length determines the number of dots.
+- **dotsExtraClasses**: `string` - 
+- **isNextDisabled**: `boolean` - Whether the next button is disabled.
+- **isPlaying**: `boolean` - Whether playback is currently active (controls play/pause visibility).
+- **isPrevDisabled**: `boolean` - Whether the previous button is disabled.
+- **nextExtraClasses**: `string` - 
+- **pauseExtraClasses**: `string` - 
+- **playExtraClasses**: `string` - 
+- **prevExtraClasses**: `string` - Component-scoped extra classes applied per slot, alongside the shared `ecl-slider-pager__*` classes. Consumers use these to attach their own BEM classes (e.g. `ecl-story-card__next`) so component-specific styles in `@eui/styles` can target a given slot.
+- **size**: `"s" | "m" | "l"` - Size of the prev/next (and play/pause) buttons.
+- **variant**: `"dots" | "play-pause" | "play-pause-dots"` - Which controls to render: - `'dots'`: prev / dots / next. - `'play-pause'`: play-pause / prev / next. - `'play-pause-dots'`: play-pause / prev / dots / next. Used by the carousel,   which shows play/pause + teasers on desktop and the dots strip on mobile   (the ECL CSS toggles which parts are visible per breakpoint).
+- **class**: `string` - 
+- **e2eAttr**: `string` - 
+- **tabindex**: `undefined` - 
+
+## Outputs
+- **goTo**: `number` - Emitted when a dot is activated. Payload is the dot index.
+- **next**: `void` - Emitted when the next button is activated.
+- **pause**: `void` - Emitted when the pause button is activated.
+- **play**: `void` - Emitted when the play button is activated.
+- **prev**: `void` - Emitted when the previous button is activated.
+- **class**: `string` - 

package/docs/json/EclStoryCardGridDetailsComponent.md

@@ -23,6 +23,7 @@ For the `'testimonial'` variant, additional `author`, `role`, and `source` input
 - **eclTitle**: `string` - Title shown in the details panel.
 - **role**: `string` - Author role/position for the testimonial variant.
 - **source**: `string` - Publication source for the testimonial variant.
+- **teaserLabel**: `string` - Optional teaser label shown above the title. Hidden by CSS in the testimonial variant.
 - **class**: `string` - 
 - **e2eAttr**: `string` - 
 - **tabindex**: `undefined` - 

package/docs/json/EclStoryCardItemComponent.md

@@ -28,5 +28,6 @@ For the mobile carousel, the parent `EclStoryCardComponent` clones the projected
 
 ## Outputs
 - **itemClick**: `number` - Emitted when the tab button is clicked; payload is this item's index.
+- **keydownTab**: `KeyboardEvent` - Emitted when a keydown occurs on the tab button. The parent story card orchestrates keyboard navigation (arrows, Home, End) across all items.
 - **loadingBarAnimationEnd**: `void` - Emitted when the loading bar CSS animation ends, signalling to advance to the next item.
 - **class**: `string` -