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

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-10-27T07:27:26.510Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-10-29T12:23:54.336Z, llm-md export.
 
 ## Modules
 
@@ -320,10 +320,11 @@ Methods:
 File: `packages/ecl/components/ecl-carousel/ecl-carousel.component.ts`
 Selector: `ecl-carousel`
 
-Description: 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. 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' . isAutoplay — enables automatic slide advancement; boolean attribute. playInterval — milliseconds between automatic transitions; default 5000 . 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.
+Description: 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 . 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.
 
 Inputs:
 - `aria-label: string | null = 'Carousel description here'` — 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 = undefined` — Determines whether the carousel should autoplay.
 - `playInterval: number = 5000` — Interval in milliseconds between automatic slide transitions.
 - `class: string = ''`
@@ -335,38 +336,22 @@ Outputs:
 - `class: string = ''`
 
 Properties:
-- `carouselContainerElement: unknown = viewChild<ElementRef>('carouselContainer')` — Reference to the main carousel container element.
-- `firstHiddenItem: unknown = viewChild<EclCarouselItemComponent>('firstHiddenItem')` — Reference to the first hidden slide item (used for focus management).
-- `isPausedForced: unknown = false` — Indicates whether autoplay was manually paused.
-- `isPlaying: unknown = false` — Indicates whether autoplay is currently active.
+- `carouselContainerElement: unknown = viewChild<ElementRef>('carouselContainer')` — Reference to the main carousel viewport element (the Embla root).
+- `isPausedForced: unknown = signal(false)` — Indicates whether autoplay was manually paused (via the pause button or on mobile). When paused this way the loading bar is cleared.
+- `isPlaying: unknown = signal(false)` — Indicates whether autoplay is currently active.
 - `isRtl: unknown = false` — Indicates whether the layout is currently in RTL mode.
-- `lastHiddenItem: unknown = viewChild<EclCarouselItemComponent>('lastHiddenItem')` — Reference to the last hidden slide item (used for focus management).
-- `navigationButtons: unknown = viewChildren<ElementRef>('currButton')` — References to the navigation buttons corresponding to each slide.
-- `pauseButton: unknown = viewChild<ElementRef>('pauseButton')` — Reference to the pause button element.
-- `playButton: unknown = viewChild<ElementRef>('playButton')` — Reference to the play button element.
 - `slides: unknown = contentChildren(forwardRef(() => EclCarouselItemComponent))` — Collection of slide components rendered inside the carousel.
-- `slidesContainer: unknown = viewChild<ElementRef>('slidesContainer')` — Reference to the slides container element.
-- `transitionDuration: number = 0.4` — Duration of the slide transition animation (in seconds).
 
 Methods:
-- `focusOnButton(button: ElementRef): void` — Sets focus on the specified button.
-- `getCarouselSlidesOffsetLeft(): number` — Computes the left offset to shift the slides container.
-- `getCarouselSlidesOffsetRight(): number` — Computes the right offset to shift the slides container (same logic as left in RTL).
-- `getCurrentSlideIndex(): number` — Retrieves the current active slide index. Corrects index for internal structure with hidden buffer slides.
+- `getCounterCurrent(): number` — Returns the 1-based position of the active slide (for the counter).
+- `getCounterTotal(): number` — Returns the total number of slides (for the counter).
+- `getCurrentSlideIndex(): number` — Retrieves the current active slide index (zero-based).
+- `getDotAriaLabels(): string[]` — Pre-translated accessible label for each pager dot. Translated here since the shared ecl-slider-pager receives plain strings.
+- `getDotIndices(): number[]` — Dot indices for the mobile slider pager (one dot per slide). The dots are hidden on desktop via the ECL CSS ( .ecl-carousel\_\_dots { display: none } ) and shown at the mobile breakpoint.
+- `getTeaserOrder(index: number): number` — Returns the flex order of a teaser button within the visible window.
 - `hasControls(): boolean` — Checks whether there are enough slides to render controls.
-- `isButtonVisible(button: ElementRef): boolean` — Checks whether a given button is currently visible (not hidden via style).
 - `isPadded(): boolean` — Returns whether the carousel has padding applied (e.g., on desktop breakpoint).
-- `isStopButtonPressed(): boolean` — Returns whether the stop button (pause) has been pressed by the user.
-- `onFirstCarouselElementPress(e: unknown): void` — Handles key press on the first carousel element to stop autoplay if TAB is pressed.
-- `onNavBtnKeyboardPress(e: KeyboardEvent, index: number): void` — Handles keyboard navigation for the navigation buttons.
-- `onNextSlideClick(): void` — Navigates to the next slide and stops autoplay.
-- `onPauseClick(): void` — Stops autoplay and focuses the play button.
-- `onPlayClick(): void` — Starts autoplay and focuses the pause button.
-- `onPlayKeyboardPress(e: unknown): void` — Handles keyboard interaction on the play button.
-- `onPreviousSlideClick(): void` — Navigates to the previous slide and stops autoplay.
-- `onSlideControlClick(slide: EclCarouselItemComponent): void` — Handles user interaction with a slide control button.
-- `onSlideHover(): void` — Pauses autoplay on mouse hover.
-- `onSlideHoverout(): void` — Resumes autoplay on mouse leave, if not manually paused.
+- `isTeaserVisible(index: number): boolean` — Returns whether a teaser button should be visible in the current window.
 - `getCssClasses(rootClass: string): string` — Merges the mandatory ECL root class with the consumer-supplied class model value. Call this inside a sub-class's \[class\] host binding computed signal.
 
 ### EclCarouselItemComponent
@@ -379,6 +364,7 @@ Description: Single slide item for use inside an EclCarouselComponent . Renders
 Inputs:
 - `id: string` — The unique identifier of the slide.
 - `isCurrent: boolean = false` — 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`
@@ -2302,10 +2288,13 @@ Description: ECL Quiz Card component – represents a single card in the quiz. F
 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" = 'xl'` — Icon size for the card header.
+- `category: string = ''` (deprecated: Since the port of ECL PR #4681. Upstream ECL removed the 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.) — 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 = `ecl-quiz-card-${crypto.randomUUID()}` `` — 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" = 'none'` — 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 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 = ''`
@@ -2317,7 +2306,6 @@ Outputs:
 - `class: string = ''`
 
 Properties:
-- `allCardsFlipped: unknown = signal(false)` — Whether all cards in the quiz have been flipped. Set by the parent EclQuizComponent to restore tabindex on category spans.
 - `isFirstCard: unknown = signal(false)` — Whether this is the first card in the quiz. Set by the parent EclQuizComponent to render skip-instructions only once.
 - `isFlipped: unknown = signal(false)` — Whether the card is currently flipped (showing back).
 - `variant: unknown = signal<'poll' | 'reveal'>('reveal')` — The variant of the quiz, set by the parent EclQuizComponent.
@@ -2890,6 +2878,44 @@ Methods:
 - `writeValue(value: any): void`
 - `getCssClasses(rootClass: string): string` — Merges the mandatory ECL root class with the consumer-supplied class model value. Call this inside a sub-class's \[class\] host binding computed signal.
 
+### EclSliderPagerComponent
+
+File: `packages/ecl/components/ecl-slider/ecl-slider-pager.component.ts`
+Selector: `ecl-slider-pager`
+Change detection: `ChangeDetectionStrategy.OnPush`
+
+Description: 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 .
+
+Inputs:
+- `activeIndex: number = 0` — 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 = false` — Whether the next button is disabled.
+- `isPlaying: boolean = false` — Whether playback is currently active (controls play/pause visibility).
+- `isPrevDisabled: boolean = false` — 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" = 's'` — Size of the prev/next (and play/pause) buttons.
+- `variant: "dots" | "play-pause" | "play-pause-dots" = '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 = ''`
+
+Methods:
+- `getCssClasses(rootClass: string): string` — Merges the mandatory ECL root class with the consumer-supplied class model value. Call this inside a sub-class's \[class\] host binding computed signal.
+
 ### EclSloganTickerComponent
 
 File: `packages/ecl/components/ecl-slogan-ticker/ecl-slogan-ticker.component.ts`
@@ -3152,6 +3178,7 @@ Inputs:
 - `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`
@@ -3186,6 +3213,7 @@ Inputs:
 
 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 = ''`
 
@@ -3199,6 +3227,7 @@ Properties:
 - `tabId: unknown = signal('')` — Generated ID for the tab button element. Set by parent.
 
 Methods:
+- `focusButton(): void` — Move focus to this item's tab button. Called by the parent during keyboard navigation.
 - `getCssClasses(rootClass: string): string` — Merges the mandatory ECL root class with the consumer-supplied class model value. Call this inside a sub-class's \[class\] host binding computed signal.
 
 ### EclTabComponent
@@ -8073,14 +8102,16 @@ Properties:
 
 ## Public variables
 
-- `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
-  Defined in `packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts`
 - `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
   Defined in `packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts`
+- `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
+  Defined in `packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts`
 - `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
   Defined in `packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts`
 - `AVAILABLE_NON_EU_LOGO_COUNTRY_CODES: string[] = ['ar', 'ca', 'is', 'jp', 'lb', 'no', 'ru', 'sw', 'tr', 'uk', 'zh'] as const`
   Defined in `packages/ecl/core/utils/constants/constants.ts`
+- `COMPACT_BREAKPOINT: number = 768` — Width (in px) below which the prev/next buttons collapse to icon-only. Matches EUI's md breakpoint. Mirrors ECL's quiz checkPager() which toggles ecl-button--icon-only around the m breakpoint.
+  Defined in `packages/ecl/components/ecl-slider/ecl-slider-pager.component.ts`
 - `DEFAULT_LOGO_COUNTRY_CODE: string = 'en'`
   Defined in `packages/ecl/core/utils/constants/constants.ts`
 - `ECL_HIGHLIGHTED_SEARCH_VALUE_ACCESSOR: Provider = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EclHighlightedSearchComponent), multi: true, }`
@@ -8207,6 +8238,8 @@ Properties:
   Defined in `packages/ecl/components/ecl-site-footer/index.ts`
 - `EUI_ECL_SITE_HEADER: unknown = [ EclSiteHeaderComponent, EclSiteHeaderActionComponent, EclSiteHeaderCustomActionComponent, EclSiteHeaderCustomActionContentDirective, EclSiteHeaderCustomAction…`
   Defined in `packages/ecl/components/ecl-site-header/index.ts`
+- `EUI_ECL_SLIDER: unknown = [ EclSliderPagerComponent, ] as const`
+  Defined in `packages/ecl/components/ecl-slider/index.ts`
 - `EUI_ECL_SLOGAN_TICKER: unknown = [ EclSloganTickerComponent, EclSloganTickerListDirective, EclSloganTickerSlideDirective, ] as const`
   Defined in `packages/ecl/components/ecl-slogan-ticker/index.ts`
 - `EUI_ECL_SOCIAL_MEDIA_FOLLOW: unknown = [ EclSocialMediaFollowComponent, EclSocialMediaFollowItemComponent, EclSocialMediaFollowLinkDirective, ] as const`
@@ -8251,3 +8284,5 @@ Properties:
   Defined in `packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts`
 - `testBed: unknown = getTestBed()`
   Defined in `packages/ecl/test-setup.ts`
+- `VISIBLE_TEASERS: number = 4` — Number of teaser buttons visible at once on the desktop breakpoint.
+  Defined in `packages/ecl/components/ecl-carousel/ecl-carousel.component.ts`

package/docs/miscellaneous/variables.html

@@ -138,10 +138,10 @@
                 <td class="col-md-4">
                     <ul class="index-list">
                         <li>
-                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-login.component.ts)</span></a>
+                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-language.component.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-language.component.ts)</span></a>
+                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-login.component.ts)</span></a>
                         </li>
                         <li>
                             <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-search.component.ts)</span></a>
@@ -149,6 +149,9 @@
                         <li>
                             <a href="#AVAILABLE_NON_EU_LOGO_COUNTRY_CODES" title="packages/ecl/core/utils/constants/constants.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>AVAILABLE_NON_EU_LOGO_COUNTRY_CODES</b>&nbsp;&nbsp;&nbsp;(packages/.../constants.ts)</span></a>
                         </li>
+                        <li>
+                            <a href="#COMPACT_BREAKPOINT" title="packages/ecl/components/ecl-slider/ecl-slider-pager.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>COMPACT_BREAKPOINT</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-slider-pager.component.ts)</span></a>
+                        </li>
                         <li>
                             <a href="#DEFAULT_LOGO_COUNTRY_CODE" title="packages/ecl/core/utils/constants/constants.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>DEFAULT_LOGO_COUNTRY_CODE</b>&nbsp;&nbsp;&nbsp;(packages/.../constants.ts)</span></a>
                         </li>
@@ -338,6 +341,9 @@
                         <li>
                             <a href="#EUI_ECL_SITE_HEADER" title="packages/ecl/components/ecl-site-header/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>EUI_ECL_SITE_HEADER</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
+                        <li>
+                            <a href="#EUI_ECL_SLIDER" title="packages/ecl/components/ecl-slider/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>EUI_ECL_SLIDER</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                        </li>
                         <li>
                             <a href="#EUI_ECL_SLOGAN_TICKER" title="packages/ecl/components/ecl-slogan-ticker/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>EUI_ECL_SLOGAN_TICKER</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
@@ -404,6 +410,9 @@
                         <li>
                             <a href="#testBed" title="packages/ecl/test-setup.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>testBed</b>&nbsp;&nbsp;&nbsp;(packages/.../test-setup.ts)</span></a>
                         </li>
+                        <li>
+                            <a href="#VISIBLE_TEASERS" title="packages/ecl/components/ecl-carousel/ecl-carousel.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>VISIBLE_TEASERS</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-carousel.component.ts)</span></a>
+                        </li>
                     </ul>
                 </td>
             </tr>
@@ -411,7 +420,7 @@
     </table>
 </section>
 
-    <h3>packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts</h3>
+    <h3>packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts</h3>
     <section data-compodoc="block-properties">
     <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
@@ -445,67 +454,67 @@
 
         </tbody>
     </table>
-    <table class="table table-sm table-bordered">
+</section>
+    <h3>packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="RESIZE_DEBOUNCE"></a>
+                    <a name="ARROW_SIZE"></a>
                     <span class="name">
-                        <span ><b>RESIZE_DEBOUNCE</b></span>
-                        <a href="#RESIZE_DEBOUNCE"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>ARROW_SIZE</b></span>
+                        <a href="#ARROW_SIZE"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>200</code>
+                        <i>Default value : </i><code>&#x27;0.5rem&#x27;</code>
                     </td>
                 </tr>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-description"><p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>
+                    <div class="io-description"><p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>
 </div>
                 </td>
             </tr>
 
         </tbody>
     </table>
-</section>
-    <h3>packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts</h3>
-    <section data-compodoc="block-properties">
-    <h3></h3>    <table class="table table-sm table-bordered">
+    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="ARROW_SIZE"></a>
+                    <a name="RESIZE_DEBOUNCE"></a>
                     <span class="name">
-                        <span ><b>ARROW_SIZE</b></span>
-                        <a href="#ARROW_SIZE"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>RESIZE_DEBOUNCE</b></span>
+                        <a href="#RESIZE_DEBOUNCE"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>&#x27;0.5rem&#x27;</code>
+                        <i>Default value : </i><code>200</code>
                     </td>
                 </tr>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-description"><p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>
+                    <div class="io-description"><p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>
 </div>
                 </td>
             </tr>
@@ -693,6 +702,43 @@
         </tbody>
     </table>
 </section>
+    <h3>packages/ecl/components/ecl-slider/ecl-slider-pager.component.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="COMPACT_BREAKPOINT"></a>
+                    <span class="name">
+                        <span ><b>COMPACT_BREAKPOINT</b></span>
+                        <a href="#COMPACT_BREAKPOINT"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>768</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Width (in px) below which the prev/next buttons collapse to icon-only.
+Matches EUI&#39;s <code>md</code> breakpoint. Mirrors ECL&#39;s quiz <code>checkPager()</code> which toggles
+<code>ecl-button--icon-only</code> around the <code>m</code> breakpoint.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+</section>
     <h3>packages/ecl/components/ecl-highlighted-search/ecl-highlighted-search.component.ts</h3>
     <section data-compodoc="block-properties">
     <h3></h3>    <table class="table table-sm table-bordered">
@@ -2844,6 +2890,37 @@
                 </tr>
 
 
+        </tbody>
+    </table>
+</section>
+    <h3>packages/ecl/components/ecl-slider/index.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="EUI_ECL_SLIDER"></a>
+                    <span class="name">
+                        <span ><b>EUI_ECL_SLIDER</b></span>
+                        <a href="#EUI_ECL_SLIDER"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>unknown</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>[
+    EclSliderPagerComponent,
+] as const</code>
+                    </td>
+                </tr>
+
+
         </tbody>
     </table>
 </section>
@@ -3424,6 +3501,41 @@
                 </tr>
 
 
+        </tbody>
+    </table>
+</section>
+    <h3>packages/ecl/components/ecl-carousel/ecl-carousel.component.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="VISIBLE_TEASERS"></a>
+                    <span class="name">
+                        <span ><b>VISIBLE_TEASERS</b></span>
+                        <a href="#VISIBLE_TEASERS"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>4</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Number of teaser buttons visible at once on the desktop breakpoint.</p>
+</div>
+                </td>
+            </tr>
+
         </tbody>
     </table>
 </section>

package/docs/overview.html

@@ -129,7 +129,7 @@
             <div class="card text-center">
                 <div class="card-block">
                     <h4 class="card-title"><span class="icon ion-md-cog"></span></h4>
-                    <p class="card-text">128 Components</p>
+                    <p class="card-text">129 Components</p>
                 </div>
             </div>
         </div>

package/docs/properties.html

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