@eui/ecl 23.0.0-alpha.10 → 23.0.0-alpha.11

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-08-04T07:03:51.160Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-08-18T14:43:38.102Z, llm-md export.
 
 ## Modules
 
@@ -19,9 +19,6 @@ Selector: `summary[eclAccordionToggle]`
 
 Description: Represents the toggle (summary) element within an ECL Accordion item. Renders default +/- icons unless custom toggle icons are projected.
 
-Properties:
-- `showDefaultIcons: unknown = computed(() => this.customIcons().length === 0)` — Whether to show the default +/- icons. Hidden when custom toggle icons are projected.
-
 ### EclAddToCalendarComponent
 
 File: `packages/ecl/components/ecl-add-to-calendar/ecl-add-to-calendar.component.ts`
@@ -713,26 +710,32 @@ Methods:
 File: `packages/ecl/components/ecl-file/ecl-file.component.ts`
 Selector: `ecl-file`
 
-Description: Component representing a file item with optional metadata, description, and image (thumbnail) support.
+Description: ECL File component. Displays downloadable file information with an icon or picture, metadata, and an optional expandable translations panel. Example : \<ecl-file id="my-file" language="English" langId="my-file-lang" \[primaryMeta\]="\['Meta info', 'DD Month YYYY'\]" labelInfo="Highlight" description="File description" fileIcon="pdf" toggleAriaLabel="Translations" (translationsToggle)="onToggle($event)"\> \_\_\_COMPODOC\_EMPTY\_LINE\_\_\_ \<div eclFileTitle id="my-file-title"\>State of the Union 2018 brochure\</div\> \_\_\_COMPODOC\_EMPTY\_LINE\_\_\_ \<a eclFileDownload eclLink variant="standalone" isBranded href="/path/to/file"\> \<span eclLinkLabel\> \<span\>Download\</span\> \<span eclFileMeta\>(16.2 MB - PDF)\</span\> \</span\> \<ecl-icon icon="download-simple" iconSet="phosphor" size="fluid"\>\</ecl-icon\> \</a\> \_\_\_COMPODOC\_EMPTY\_LINE\_\_\_ \<ecl-file-items\> \<ecl-file-item eclTitle="български" meta="(15.7 MB - PDF)" langDetail="bg" titleId="my-file-0-title" metaId="my-file-0-meta"\> \<a eclFileTranslationDownload eclLink variant="standalone" href="/example#bg" hreflang="bg"\> \<span eclLinkLabel\>Download\</span\> \<ecl-icon icon="download-simple" iconSet="phosphor" size="fluid"\>\</ecl-icon\> \</a\> \</ecl-file-item\> \</ecl-file-items\> \</ecl-file\>
 
 Inputs:
 - `description: string` — Optional description displayed under the file title.
-- `detailMeta: string[]` — Additional details displayed in the file component (e.g. file size, date).
-- `id: string = undefined` — Optional ID for the file component, useful for accessibility or referencing.
+- `detailMeta: string[]` (deprecated: Use `primaryMeta` instead. Kept for backward compatibility.)
+- `fileIcon: "file" | "pdf" | "doc" | "xls" | "txt" | "zip" = 'file'` — File type icon to display. Renders a phosphor icon internally. Options: 'file' (default), 'pdf', 'doc', 'xls', 'txt', 'zip'. Ignored when a picture is projected.
+- `` id: string = `ecl-file-${crypto.randomUUID()}` `` — Unique ID for the file component. Auto-generated if not provided. Used to derive accessibility IDs for child elements.
 - `labelInfo: string` — Additional label shown next to the language label, e.g. file type or status.
 - `langId: string` — Optional language ID (e.g., for translation or accessibility attributes).
-- `language: string` — Language indicator string (e.g. "EN", "FR") used in the label.
-- `meta: string` — Main metadata displayed for the file (e.g. format, license).
-- `metaId: string` — ID applied to the meta element for accessibility.
+- `language: string` — Language indicator string (e.g. "English", "French") used in the footer. When translations are present, this becomes the toggle button label.
+- `meta: string` (deprecated: Meta is now rendered inside the download link by the consumer. Kept for backward compatibility — no longer rendered in the template.) — Kept for backward compatibility — no longer rendered in the template.
+- `metaId: string` (deprecated: Meta ID is now managed by the consumer inside the download link. Kept for backward compatibility — no longer rendered in the template.) — Kept for backward compatibility — no longer rendered in the template.
+- `primaryMeta: string[]` — Primary metadata array (e.g. \['Meta info', 'DD Month YYYY'\]). Rendered as a list below the title/description.
+- `toggleAriaLabel: string` — Accessible label for the translation toggle button. Defaults to the language value if not provided.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
 
+Outputs:
+- `translationsToggle: EclFileItemsToggleEvent` — Emits when the translation toggle is clicked. Consumers can call preventDefault() on the event to cancel the toggle.
+
 Properties:
-- `eclPictureContent: unknown = contentChild(EclFilePictureDirective)` — Optional image directive projected via content slot, used for thumbnails.
 - `eclThemeService: unknown = inject(EclThemeService)`
 
 Methods:
+- `onTranslationToggleClick(): void` — Handles the translation toggle button click.
 - `getCssClasses(rootClass: string): string`
 
 ### EclFileItemComponent
@@ -740,13 +743,13 @@ Methods:
 File: `packages/ecl/components/ecl-file/ecl-file-item/ecl-file-item.component.ts`
 Selector: `ecl-file-item`
 
-Description: Component representing a single file translation or descriptive item inside the main ECL File component.
+Description: Component representing a single file translation item inside the ecl-file-items translation list.
 
 Inputs:
-- `eclTitle: string` — Title text of the file item.
-- `isDescription: boolean = false` — Indicates whether the item is a description block rather than a translation. Adds the ecl-file\_\_translation-description class when true.
-- `label: string` — Language label displayed next to the title (e.g., "FR", "EN").
-- `langDetail: string` — Supplementary language detail displayed below the language label.
+- `eclTitle: string` — Title text of the file item (language name, e.g. "български").
+- `isDescription: boolean = false` (deprecated: No longer used in v5.1.0. Kept for backward compatibility.)
+- `label: string` (deprecated: No longer used in v5.1.0. Kept for backward compatibility.)
+- `langDetail: string` — Language code (e.g. "bg", "fr") applied as the lang attribute on the title element.
 - `meta: string` — Additional metadata for the item (e.g., file size, type).
 - `metaId: string` — ID applied to the meta element for accessibility.
 - `titleId: string` — ID applied to the title element for accessibility.
@@ -754,9 +757,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `role: string = 'listitem'` — ARIA role attribute set to 'listitem' for accessibility.
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -765,33 +765,28 @@ Methods:
 File: `packages/ecl/components/ecl-file/ecl-file-items/ecl-file-items.component.ts`
 Selector: `ecl-file-items`
 
-Description: Component representing a container for file item translations within an ECL File component. It can be expanded or collapsed, and emits an event when toggled.
+Description: Component representing the translation list within an ECL File component. The host element IS the list. The toggle button is rendered by the parent ecl-file.
 
 Inputs:
-- `isExpanded: boolean = false` — Whether the list is initially expanded.
-- `label: string = undefined` — Label displayed above the translations list.
+- `id: string` — ID for the list, used by the toggle button's aria-controls.
+- `isExpanded: boolean = false` — Whether the list is expanded. Managed by the parent ecl-file component.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
 
 Outputs:
-- `isExpanded: boolean = false` — Whether the list is initially expanded.
-- `toggle: EclFileItemsToggleEvent` — Emits a toggle event when the translations list is expanded or collapsed. Consumers can call preventDefault() on the event to cancel the toggle.
-
-Properties:
-- `items: unknown = contentChildren(EclFileItemComponent)` — Content-projected list of translation items (excluding description blocks).
+- `id: string` — ID for the list, used by the toggle button's aria-controls.
+- `isExpanded: boolean = false` — Whether the list is expanded. Managed by the parent ecl-file component.
 
 Methods:
-- `getItemsCount(): number` — Returns the number of translation items excluding description entries.
-- `onToggleClick(evt: MouseEvent): void` — Toggles the expansion state of the translation list. Emits toggle event and updates isExpanded if not prevented.
 - `getCssClasses(rootClass: string): string`
 
-### EclFileTaxonomyComponent
+### EclFileListsComponent
 
-File: `packages/ecl/components/ecl-file/ecl-file-taxonomy/ecl-file-taxonomy.component.ts`
-Selector: `ecl-file-taxonomy`
+File: `packages/ecl/components/ecl-file/ecl-file-lists/ecl-file-lists.component.ts`
+Selector: `ecl-file-lists, ecl-file-taxonomy`
 
-Description: Component representing the taxonomy section of a file in the ECL File component.
+Description: Component representing the lists section of a file in the ECL File component.
 
 Inputs:
 - `class: string`
@@ -967,6 +962,33 @@ Inputs:
 Methods:
 - `getCssClasses(rootClass: string): string`
 
+### EclHighlightedSearchComponent
+
+File: `packages/ecl/components/ecl-highlighted-search/ecl-highlighted-search.component.ts`
+Selector: `ecl-highlighted-search`
+
+Description: Highlighted search component based on ECL design system. Renders a prominent search banner with title, description, search form, and an optional suggestion area via content projection. Implements ControlValueAccessor for use with ngModel and reactive forms. Example : \<ecl-highlighted-search eclTitle="Find your next role" description="Discover job opportunities in the EU institutions" helperText="Enter the job you're looking for" placeholder="Enter a search keyword" suggestionLabel="Or explore:" searchButtonLabel="Search" (searchEvent)="onSearch($event)"\> \_\_\_COMPODOC\_EMPTY\_LINE\_\_\_ \<ul eclTagSet eclHighlightedSearchSuggestions\> \<li eclTagSetItem\>\<a href="/traineeships" eclTag\>Traineeships\</a\>\</li\> \<li eclTagSetItem\>\<a href="/it" eclTag\>IT &amp; Digital\</a\>\</li\> \<li eclTagSetItem\>\<a href="/policy" eclTag\>Policy &amp; Law\</a\>\</li\> \</ul\> \_\_\_COMPODOC\_EMPTY\_LINE\_\_\_ \</ecl-highlighted-search\>
+
+Inputs:
+- `description: string = ''` — Subtitle text displayed below the title.
+- `eclTitle: string = ''` — The heading text displayed above the search form.
+- `helperText: string = ''` — Helper text displayed below the search input.
+- `placeholder: string = ''` — Placeholder text for the search input field.
+- `searchButtonLabel: string = 'Search'` — Label text for the search button. Defaults to "Search".
+- `suggestionLabel: string = ''` — Label for the suggestion section (e.g. "Or explore:").
+- `class: string`
+- `e2eAttr: any`
+- `tabindex: number`
+
+Outputs:
+- `searchEvent: EclHighlightedSearchEvent` — Emitted when the user submits the search form.
+
+Methods:
+- `registerOnChange(fn: function): void`
+- `registerOnTouched(fn: function): void`
+- `writeValue(value: string): void`
+- `getCssClasses(rootClass: string): string`
+
 ### EclIconComponent
 
 File: `packages/ecl/components/ecl-icon/ecl-icon.component.ts`
@@ -1101,7 +1123,7 @@ Methods:
 File: `packages/ecl/components/ecl-layout-wrapper/ecl-layout-wrapper.component.ts`
 Selector: `div[eclLayoutWrapper]`
 
-Description: ECL Layout Wrapper component. Arranges projected content into a responsive grid layout with configurable columns. Includes optional title, description, and "view all" link areas. Example : \<section eclLayoutWrapper \[columns\]="3" direction="horizontal"\> \<h2 eclLayoutWrapperTitle\>Heading\</h2\> \<div eclLayoutWrapperDescription\>Description text\</div\> \_\_\_COMPODOC\_EMPTY\_LINE\_\_\_ \<div eclLayoutItem\>\<article eclCard\>...\</article\>\</div\> \<div eclLayoutItem\>\<article eclCard\>...\</article\>\</div\> \<div eclLayoutItem\>\<article eclCard\>...\</article\>\</div\> \_\_\_COMPODOC\_EMPTY\_LINE\_\_\_ \<a eclLayoutWrapperViewAll eclLink \[standalone\]="true" icon="arrow-left"\>View all\</a\> \</section\>
+Description: ECL Layout Wrapper component. Arranges projected content into a responsive grid layout with configurable columns. Includes optional title, description, and "view all" link areas. Example : \<div eclLayoutWrapper \[columns\]="3" direction="horizontal"\> \<h2 eclLayoutWrapperTitle\>Heading\</h2\> \<div eclLayoutWrapperDescription\>Description text\</div\> \_\_\_COMPODOC\_EMPTY\_LINE\_\_\_ \<div eclLayoutItem\>\<article eclCard\>...\</article\>\</div\> \<div eclLayoutItem\>\<article eclCard\>...\</article\>\</div\> \<div eclLayoutItem\>\<article eclCard\>...\</article\>\</div\> \_\_\_COMPODOC\_EMPTY\_LINE\_\_\_ \<a eclLayoutWrapperViewAll eclLink \[standalone\]="true" icon="arrow-left"\>View all\</a\> \</div\>
 
 Inputs:
 - `columns: number = 3` — Number of columns for the grid layout. Accepts 2, 3, or 4. Defaults to 3.
@@ -1113,10 +1135,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `hasViewAll: unknown = contentChild(EclLayoutWrapperViewAllDirective)` — Whether a view-all link is projected.
-- `items: unknown = contentChildren(EclLayoutItemDirective)` — Projected layout items that will be auto-indexed.
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -1757,8 +1775,8 @@ Properties:
 - `isItemsSelected: unknown = computed(() => this._selectedItems().length > 0)` — Indicates if any options are currently selected.
 - `isShowMultiselectDropdown: unknown = false` — Controls the visibility of the multiselect dropdown.
 - `isShowNoResultsFound: unknown = false` — Indicates that the "no results found" message should be displayed.
-- `isShowToolbar: unknown = computed(() => this._selectedItems().length > 0)` — Controls the visibility of the multiselect toolbar.
-- `isSubmitOnApply: unknown = false` — When true, the Apply button acts as a submit button (type="submit") instead of a regular button.
+- `isShowToolbar: unknown = computed(() => this.isSubmitOnApply() || this._selectedItems().length > 0)` — Controls the visibility of the multiselect toolbar. Always visible when isSubmitOnApply is true so the user can submit the form.
+- `isSubmitOnApply: unknown = signal(false)` — When true, the Apply button acts as a submit button (type="submit") instead of a regular button.
 - `multiOptionComponents: QueryList<EclMultiselectOptionComponent>`
 - `multiOptionDirectives: EclMultiselectOptionDirective[] = []` — List of option directives currently rendered in the dropdown.
 - `optionsCount: number = 0` — Total number of options available in the dropdown list.
@@ -3050,6 +3068,94 @@ Inputs:
 Methods:
 - `getCssClasses(rootClass: string): string`
 
+### EclStoryCardComponent
+
+File: `packages/ecl/components/ecl-story-card/ecl-story-card.component.ts`
+Selector: `section[eclStoryCard]`
+Change detection: `ChangeDetectionStrategy.OnPush`
+
+Description: ECL Story Card component. Renders a desktop grid accordion (user-authored) and automatically generates a mobile carousel from the same data. Desktop: tablist/tab/tabpanel pattern with autoplay loading bar. Mobile: Embla carousel with prev/next and dot navigation. Example : \<section eclStoryCard isAutoplay \[autoplayDelay\]="10000" \[eclTitle\]="'Stories'" \[eclDescription\]="'...'"\> \<ul eclStoryCardList\> \<li eclStoryCardItem gridTitle="why twelve"\> \<picture eclStoryCardPicture\>...\</picture\> \</li\> \</ul\> \<div eclStoryCardGridDetails eclTitle="..." description="..."\> \<a eclStoryCardLink href="..."\>Read more\</a\> \</div\> \</section\>
+
+Inputs:
+- `autoplayDelay: number = 10000` — Autoplay delay in milliseconds. Default: 10000.
+- `eclDescription: string = ''` — Description displayed below the title.
+- `id: string = ''` — ID for the component. All internal IDs derive from it. If not provided, auto-generated.
+- `eclTitle: string = ''` — Title displayed in the story card header.
+- `isAutoplay: boolean = false` — Whether autoplay is enabled for the grid accordion.
+- `variant: "story" | "testimonial" = 'story'` — Variant of the story card: 'story' (default) or 'testimonial'.
+- `class: string`
+- `e2eAttr: any`
+- `tabindex: number`
+
+Outputs:
+- `selectionChange: EclStoryCardSelectionEvent` — Emitted when the active grid item changes.
+
+Properties:
+- `cssClasses: unknown = computed(() => [ super.getCssClasses('ecl-story-card'), this.eclDescription() ? 'ecl-story-card--has-description' : '', this.variant() === 'testimonial' ? 'ecl-…`
+- ``slideDuration: unknown = computed(() => `${this.autoplayDelay()}ms`)``
+
+Methods:
+- `getCssClasses(rootClass: string): string`
+
+### EclStoryCardGridDetailsComponent
+
+File: `packages/ecl/components/ecl-story-card/ecl-story-card-grid-details/ecl-story-card-grid-details.component.ts`
+Selector: `[eclStoryCardGridDetails]`
+Change detection: `ChangeDetectionStrategy.OnPush`
+
+Description: Component for a story card grid details panel (tabpanel). Contains the expanded content: title, description, and optional link. For the 'testimonial' variant, additional inputs are available: author : name of the author role : role/position of the author source : publication source Example : \<div eclStoryCardGridDetails eclTitle="The European flag..." description="It appears on official documents..." author="John Doe" role="Commissioner" source="Published on The Guardian"\> \<a eclStoryCardLink eclLink variant="standalone" href="/example"\> \<span eclLinkLabel\>Read more\</span\> \<ecl-icon icon="arrow-right" size="xs"\>\</ecl-icon\> \</a\> \</div\>
+
+Inputs:
+- `author: string = ''` — Author name (testimonial variant).
+- `description: string = ''` — Description shown in the details panel.
+- `eclTitle: string = ''` — Title shown in the details panel.
+- `role: string = ''` — Author role/position (testimonial variant).
+- `source: string = ''` — Publication source (testimonial variant).
+- `class: string`
+- `e2eAttr: any`
+- `tabindex: number`
+
+Properties:
+- `index: unknown = signal(0)` — Index of this panel. Set by parent.
+- `isActive: unknown = signal(false)` — Whether this panel is currently visible. Set by parent.
+- `isTestimonial: unknown = signal(false)` — Whether the parent is in testimonial variant. Set by parent.
+- `linkRef: unknown = contentChild(EclStoryCardLinkDirective, { read: ElementRef })` — Reference to the projected link element for cloning into carousel.
+- `panelId: unknown = signal('')` — Generated panel ID. Set by parent.
+- `tabId: unknown = signal('')` — ID of the controlling tab. Set by parent.
+
+Methods:
+- `getCssClasses(rootClass: string): string`
+
+### EclStoryCardItemComponent
+
+File: `packages/ecl/components/ecl-story-card/ecl-story-card-item/ecl-story-card-item.component.ts`
+Selector: `li[eclStoryCardItem]`
+Change detection: `ChangeDetectionStrategy.OnPush`
+
+Description: Component for a single story card grid item (tab). Applied to elements within the story card list. The user provides: gridTitle : the short label shown in the accordion tab button A as projected content The component internally renders the button with role="tab", the loading bar, and the title wrapper. Example : \<li eclStoryCardItem gridTitle="why twelve"\> \<picture eclStoryCardPicture\> \<img src="example.jpg" alt="Example"\> \</picture\> \</li\>
+
+Inputs:
+- `gridTitle: string = ''` — Short title displayed in the accordion tab button.
+- `class: string`
+- `e2eAttr: any`
+- `tabindex: number`
+
+Outputs:
+- `itemClick: number` — Emitted when the item's button is clicked.
+- `loadingBarAnimationEnd: void` — Emitted when the loading bar animation ends.
+
+Properties:
+- `cssClasses: unknown = computed(() => [ super.getCssClasses('ecl-story-card__grid-item'), this.isExpanded() ? 'ecl-story-card__grid-item--expanded' : '', ].join(' ').trim())`
+- `index: unknown = signal(0)` — The index of this item within the list. Set by parent.
+- `isAutoPlaying: unknown = signal(false)` — Whether autoplay is active (controls loading bar animation). Set by parent.
+- `isExpanded: unknown = signal(false)` — Whether this item is currently expanded/selected. Set by parent.
+- `panelId: unknown = signal('')` — The ID of the controlled tabpanel. Set by parent.
+- `pictureRef: unknown = contentChild(EclStoryCardPictureDirective, { read: ElementRef })` — Reference to the projected picture element for cloning into carousel.
+- `tabId: unknown = signal('')` — The generated ID for the tab button. Set by parent.
+
+Methods:
+- `getCssClasses(rootClass: string): string`
+
 ### EclTabComponent
 
 File: `packages/ecl/components/ecl-tabs/ecl-tab.component.ts`
@@ -3302,10 +3408,10 @@ Description: Accordion component that manages the expansion and collapsing state
 
 Inputs:
 - `isSidebar: boolean = false`
+- `sidebarBreakpoint: 480 | 768 | 996 | 1140 | 1440 | 1920 | 2560 | 3840 = 996` — Configurable breakpoint (in pixels) for the sidebar variant. When the viewport width is at or above this value, sidebar items are opened; below it, they are collapsed. Defaults to 996 (the 'lg' breakpoint). Matches the ECL pattern: data-ecl-accordion-sidebar-media-query="(min-width: 768px)" Example : \<div eclAccordion isSidebar \[sidebarBreakpoint\]="768"\>
 
 Properties:
 - `baseDirective: unknown = inject(ECLBaseDirective)`
-- `items: QueryList<ElementRef>`
 
 ### EclAccordionItemDirective
 
@@ -4270,9 +4376,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: unknown = true` — Applies the ECL download class to the host element.
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -4288,8 +4391,20 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: unknown = true` — Applies the ECL image class to the host element.
+Methods:
+- `getCssClasses(rootClass: string): string`
+
+### EclFileMetaDirective
+
+File: `packages/ecl/components/ecl-file/ecl-file-download.directive.ts`
+Selector: `[eclFileMeta]`
+
+Description: Directive to style the file meta element (e.g. file size and format) inside the download link label.
+
+Inputs:
+- `class: string`
+- `e2eAttr: any`
+- `tabindex: number`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4314,17 +4429,13 @@ Methods:
 File: `packages/ecl/components/ecl-file/ecl-file-download.directive.ts`
 Selector: `[eclFilePreview]`
 
-Description: Directive to style a file preview link. Adds spacing and ECL link classes for standalone appearance.
+Description: Directive to style a file preview link. Adds ECL link classes for standalone branded appearance.
 
 Inputs:
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `hasClass: unknown = true` — Applies ECL link class to the host element.
-- `hasClassStandalone: unknown = true` — Applies the standalone variant of the ECL link class to the host element.
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -4336,14 +4447,10 @@ Selector: `[eclFileTitle]`
 Description: Directive to style a title element in an ECL file component.
 
 Inputs:
-- `id: string = undefined` — ID attribute for the title element.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: unknown = true` — Applies the ECL file title class to the host element.
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -4359,9 +4466,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: unknown = true` — Applies the ECL translation download class to the host element.
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -4529,6 +4633,16 @@ Selector: `[eclHighlightBoxTitle]`
 
 Description: Directive for the highlight box title. Applies the ecl-highlight-box\_\_title class to the host element.
 
+### EclHighlightedSearchSuggestionsDirective
+
+File: `packages/ecl/components/ecl-highlighted-search/ecl-highlighted-search-suggestions.directive.ts`
+Selector: `[eclHighlightedSearchSuggestions]`
+
+Description: Marker directive for the suggestions content projection slot. Applies the ecl-highlighted-search\_\_suggestion-list class to the host element. The parent ecl-highlighted-search component uses this to locate the projected element and set aria-labelledby .
+
+Methods:
+- `setAriaLabelledBy(id: string): void` — Sets the aria-labelledby attribute on the host element.
+
 ### EclIndicatorLabelDirective
 
 File: `packages/ecl/components/ecl-button/ecl-indicator/ecl-indicator.directive.ts`
@@ -4595,7 +4709,6 @@ Description: Directive for individual items inside the layout wrapper grid. Wrap
 
 Properties:
 - ``cssClasses: unknown = computed(() => { const idx = this.index(); return idx > 0 ? `ecl-layout-item ecl-layout-item--${idx}` : 'ecl-layout-item'; })`` — Computed CSS classes based on the assigned index.
-- `el: unknown = inject(ElementRef)`
 - `index: unknown = signal(0)` — Positional index (1-based), assigned by the parent layout wrapper.
 
 ### EclLayoutWrapperDescriptionDirective
@@ -6138,6 +6251,51 @@ Properties:
 Methods:
 - `getCssClasses(rootClass: string): string`
 
+### EclStoryCardLinkDirective
+
+File: `packages/ecl/components/ecl-story-card/ecl-story-card-directives.ts`
+Selector: `[eclStoryCardLink]`
+
+Description: Directive applied to elements inside story card grid details. Adds the ECL link classes for the "Read more" link. Example : \<a eclStoryCardLink href="/example"\>Read more\</a\>
+
+Inputs:
+- `class: string`
+- `e2eAttr: any`
+- `tabindex: number`
+
+Methods:
+- `getCssClasses(rootClass: string): string`
+
+### EclStoryCardListDirective
+
+File: `packages/ecl/components/ecl-story-card/ecl-story-card-directives.ts`
+Selector: `ul[eclStoryCardList]`
+
+Description: Directive applied to the element that holds the story card items. Adds the grid container class and tablist role. Example : \<ul eclStoryCardList\>...\</ul\>
+
+Inputs:
+- `class: string`
+- `e2eAttr: any`
+- `tabindex: number`
+
+Methods:
+- `getCssClasses(rootClass: string): string`
+
+### EclStoryCardPictureDirective
+
+File: `packages/ecl/components/ecl-story-card/ecl-story-card-directives.ts`
+Selector: `picture[eclStoryCardPicture]`
+
+Description: Directive applied to elements inside a story card item. Adds the ECL picture classes. Example : \<picture eclStoryCardPicture\> \<source srcset="..." media="(max-width: 50rem)"\> \<img src="..." alt="..."\> \</picture\>
+
+Inputs:
+- `class: string`
+- `e2eAttr: any`
+- `tabindex: number`
+
+Methods:
+- `getCssClasses(rootClass: string): string`
+
 ### EclTableBodyDirective
 
 File: `packages/ecl/components/ecl-table/ecl-table.directive.ts`
@@ -6880,6 +7038,17 @@ Properties:
 Methods:
 - `preventDefault(): void`
 
+### EclHighlightedSearchEvent
+
+File: `packages/ecl/components/ecl-highlighted-search/events/ecl-highlighted-search.event.ts`
+Extends: `EclBaseEvent`
+
+Properties:
+- `keyword: string`
+
+Methods:
+- `preventDefault(): void`
+
 ### EclInpageNavigationItemClickEvent
 
 File: `packages/ecl/components/ecl-inpage-navigation/ecl-inpage-navigation-item.component.ts`
@@ -7386,6 +7555,13 @@ Properties:
 - `isCorrect?: boolean`
 - `selectedOptionIndex?: number`
 
+### EclStoryCardSelectionEvent
+
+File: `packages/ecl/components/ecl-story-card/ecl-story-card.component.ts`
+
+Properties:
+- `index: number`
+
 ### EclTab
 
 File: `packages/ecl/components/ecl-tabs/models/ecl-tab.model.ts`
@@ -7464,6 +7640,8 @@ Properties:
   Defined in `packages/ecl/core/utils/constants/constants.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, }`
+  Defined in `packages/ecl/components/ecl-highlighted-search/ecl-highlighted-search.component.ts`
 - `ECL_RATINGFIELD_VALUE_ACCESSOR: Provider = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EclRatingFieldComponent), multi: true, }`
   Defined in `packages/ecl/components/ecl-rating-field/ecl-rating-field.component.ts`
 - `ECL_SEARCH_FORM_VALUE_ACCESSOR: Provider = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EclSearchFormComponent), multi: true, }`
@@ -7512,7 +7690,7 @@ Properties:
   Defined in `packages/ecl/components/ecl-featured/index.ts`
 - `EUI_ECL_FEEDBACK_MESSAGE: unknown = [ EclFeedbackMessageDirective, ] as const`
   Defined in `packages/ecl/components/ecl-feedback-message/index.ts`
-- `EUI_ECL_FILE: unknown = [ EclFileComponent, EclFileDownloadDirective, EclFileItemsComponent, EclFileItemComponent, EclFileTaxonomyComponent, EclFileTitleDirective, EclFileTranslationDo…`
+- `EUI_ECL_FILE: unknown = [ EclFileComponent, EclFileDownloadDirective, EclFileItemsComponent, EclFileItemComponent, EclFileListsComponent, EclFileTitleDirective, EclFileTranslationDownl…`
   Defined in `packages/ecl/components/ecl-file/index.ts`
 - `EUI_ECL_FILE_UPLOAD: unknown = [ EclFileUploadDirective, ] as const`
   Defined in `packages/ecl/components/ecl-file-upload/index.ts`
@@ -7526,6 +7704,8 @@ Properties:
   Defined in `packages/ecl/components/ecl-help-block/index.ts`
 - `EUI_ECL_HIGHLIGHT_BOX: unknown = [ EclHighlightBoxComponent, EclHighlightBoxTitleDirective, EclHighlightBoxDescriptionDirective, EclHighlightBoxIconDirective, EclHighlightBoxLinkDirective, ] as…`
   Defined in `packages/ecl/components/ecl-highlight-box/index.ts`
+- `EUI_ECL_HIGHLIGHTED_SEARCH: unknown = [ EclHighlightedSearchComponent, EclHighlightedSearchSuggestionsDirective, ] as const`
+  Defined in `packages/ecl/components/ecl-highlighted-search/index.ts`
 - `EUI_ECL_ICON: unknown = [ EclIconComponent, ] as const`
   Defined in `packages/ecl/components/ecl-icon/index.ts`
 - `EUI_ECL_INPAGE_NAVIGATION: unknown = [ EclInpageNavigationComponent, EclInpageNavigationItemComponent, EclInpageNavigationListDirective, ] as const`
@@ -7594,6 +7774,8 @@ Properties:
   Defined in `packages/ecl/components/ecl-spotlight/index.ts`
 - `EUI_ECL_STICKY_CONTAINER: unknown = [ EclStickyContainerComponent, ] as const`
   Defined in `packages/ecl/components/ecl-sticky-container/index.ts`
+- `EUI_ECL_STORY_CARD: unknown = [ EclStoryCardComponent, EclStoryCardItemComponent, EclStoryCardGridDetailsComponent, EclStoryCardListDirective, EclStoryCardPictureDirective, EclStoryCardLinkD…`
+  Defined in `packages/ecl/components/ecl-story-card/index.ts`
 - `EUI_ECL_TABLE: unknown = [ EclTableCaptionDirective, EclTableDirective, EclTableHeadDirective, EclTableHeaderDirective, EclTableRowDirective, EclTableBodyDirective, EclTableCellDirectiv…`
   Defined in `packages/ecl/components/ecl-table/index.ts`
 - `EUI_ECL_TABS: unknown = [ EclTabsComponent, EclTabComponent, EclTabLabelComponent, ] as const`