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

package/docs/json/EclAccordionDirective.md

@@ -20,3 +20,4 @@ in expandable sections.
 
 ## Inputs
 - **isSidebar**: `boolean` - 
+- **sidebarBreakpoint**: `480 | 768 | 996 | 1140 | 1440 | 1920 | 2560 | 3840` - 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)"  ```html <div eclAccordion isSidebar [sidebarBreakpoint]="768"> ```

package/docs/json/EclFileComponent.md

@@ -4,21 +4,57 @@
 
 
 
-Component representing a file item with optional metadata, description,
-and image (thumbnail) support.
+ECL File component.
+Displays downloadable file information with an icon or picture,
+metadata, and an optional expandable translations panel.
 
+```html
+<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>
+```
 
 **Selector:** `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` - Optional ID for the file component, useful for accessibility or referencing.
+- **detailMeta**: `string[]` - 
+- **fileIcon**: `"file" | "pdf" | "doc" | "xls" | "txt" | "zip"` - 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` - 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` - Kept for backward compatibility — no longer rendered in the template.
+- **metaId**: `string` - 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.

package/docs/json/EclFileItemComponent.md

@@ -4,17 +4,17 @@
 
 
 
-Component representing a single file translation or descriptive item
-inside the main ECL File component.
+Component representing a single file translation item
+inside the ecl-file-items translation list.
 
 
 **Selector:** `ecl-file-item`
 
 ## Inputs
-- **eclTitle**: `string` - Title text of the file item.
-- **isDescription**: `boolean` - 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` - 
+- **label**: `string` - 
+- **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.

package/docs/json/EclFileItemsComponent.md

@@ -4,19 +4,19 @@
 
 
 
-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.
+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.
 
 
 **Selector:** `ecl-file-items`
 
 ## Inputs
-- **isExpanded**: `boolean` - Whether the list is initially expanded.
-- **label**: `string` - Label displayed above the translations list.
+- **id**: `string` - ID for the list, used by the toggle button's aria-controls.
+- **isExpanded**: `boolean` - Whether the list is expanded. Managed by the parent ecl-file component.
 - **class**: `string` - 
 - **e2eAttr**: `any` - 
 - **tabindex**: `number` - 
 
 ## Outputs
-- **isExpanded**: `boolean` - 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.
+- **id**: `string` - ID for the list, used by the toggle button's aria-controls.
+- **isExpanded**: `boolean` - Whether the list is expanded. Managed by the parent ecl-file component.

package/docs/json/EclFileListsComponent.md

@@ -0,0 +1,15 @@
+# EclFileListsComponent
+
+**Type:** component
+
+
+
+Component representing the lists section of a file in the ECL File component.
+
+
+**Selector:** `ecl-file-lists, ecl-file-taxonomy`
+
+## Inputs
+- **class**: `string` - 
+- **e2eAttr**: `any` - 
+- **tabindex**: `number` - 

package/docs/json/EclFileMetaDirective.md

@@ -0,0 +1,16 @@
+# EclFileMetaDirective
+
+**Type:** directive
+
+
+
+Directive to style the file meta element (e.g. file size and format)
+inside the download link label.
+
+
+**Selector:** `[eclFileMeta]`
+
+## Inputs
+- **class**: `string` - 
+- **e2eAttr**: `any` - 
+- **tabindex**: `number` - 

package/docs/json/EclFilePreviewDirective.md

@@ -5,7 +5,7 @@
 
 
 Directive to style a file preview link.
-Adds spacing and ECL link classes for standalone appearance.
+Adds ECL link classes for standalone branded appearance.
 
 
 **Selector:** `[eclFilePreview]`

package/docs/json/EclFileTitleDirective.md

@@ -10,7 +10,6 @@ Directive to style a title element in an ECL file component.
 **Selector:** `[eclFileTitle]`
 
 ## Inputs
-- **id**: `string` - ID attribute for the title element.
 - **class**: `string` - 
 - **e2eAttr**: `any` - 
 - **tabindex**: `number` - 

package/docs/json/EclHighlightedSearchComponent.md

@@ -0,0 +1,46 @@
+# EclHighlightedSearchComponent
+
+**Type:** component
+
+
+
+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.
+
+```html
+<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>
+```
+
+**Selector:** `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` - 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.

package/docs/json/EclHighlightedSearchSuggestionsDirective.md

@@ -0,0 +1,13 @@
+# EclHighlightedSearchSuggestionsDirective
+
+**Type:** directive
+
+
+
+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`.
+
+
+**Selector:** `[eclHighlightedSearchSuggestions]`

package/docs/json/EclLayoutWrapperComponent.md

@@ -9,7 +9,7 @@ Arranges projected content into a responsive grid layout with configurable colum
 Includes optional title, description, and "view all" link areas.
 
 ```html
-<section eclLayoutWrapper [columns]="3" direction="horizontal">
+<div eclLayoutWrapper [columns]="3" direction="horizontal">
   <h2 eclLayoutWrapperTitle>Heading</h2>
   <div eclLayoutWrapperDescription>Description text</div>
 ___COMPODOC_EMPTY_LINE___
@@ -18,7 +18,7 @@ ___COMPODOC_EMPTY_LINE___
   <div eclLayoutItem><article eclCard>...</article></div>
 ___COMPODOC_EMPTY_LINE___
   <a eclLayoutWrapperViewAll eclLink [standalone]="true" icon="arrow-left">View all</a>
-</section>
+</div>
 ```
 
 **Selector:** `div[eclLayoutWrapper]`

package/docs/json/EclStoryCardComponent.md

@@ -0,0 +1,43 @@
+# EclStoryCardComponent
+
+**Type:** component
+
+
+
+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.
+
+```html
+<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>
+```
+
+**Selector:** `section[eclStoryCard]`
+
+## Inputs
+- **autoplayDelay**: `number` - 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` - Whether autoplay is enabled for the grid accordion.
+- **variant**: `"story" | "testimonial"` - 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.

package/docs/json/EclStoryCardGridDetailsComponent.md

@@ -0,0 +1,39 @@
+# EclStoryCardGridDetailsComponent
+
+**Type:** component
+
+
+
+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
+
+```html
+<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>
+```
+
+**Selector:** `[eclStoryCardGridDetails]`
+
+## 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` - 

package/docs/json/EclStoryCardItemComponent.md

@@ -0,0 +1,35 @@
+# EclStoryCardItemComponent
+
+**Type:** component
+
+
+
+Component for a single story card grid item (tab).
+Applied to <li> elements within the story card list.
+
+The user provides:
+- `gridTitle`: the short label shown in the accordion tab button
+- A <picture eclStoryCardPicture> as projected content
+
+The component internally renders the button with role="tab",
+the loading bar, and the title wrapper.
+
+```html
+<li eclStoryCardItem gridTitle="why twelve">
+  <picture eclStoryCardPicture>
+    <img src="example.jpg" alt="Example">
+  </picture>
+</li>
+```
+
+**Selector:** `li[eclStoryCardItem]`
+
+## 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.

package/docs/json/EclStoryCardLinkDirective.md

@@ -0,0 +1,19 @@
+# EclStoryCardLinkDirective
+
+**Type:** directive
+
+
+
+Directive applied to <a> elements inside story card grid details.
+Adds the ECL link classes for the "Read more" link.
+
+```html
+<a eclStoryCardLink href="/example">Read more</a>
+```
+
+**Selector:** `[eclStoryCardLink]`
+
+## Inputs
+- **class**: `string` - 
+- **e2eAttr**: `any` - 
+- **tabindex**: `number` - 

package/docs/json/EclStoryCardListDirective.md

@@ -0,0 +1,19 @@
+# EclStoryCardListDirective
+
+**Type:** directive
+
+
+
+Directive applied to the <ul> element that holds the story card items.
+Adds the grid container class and tablist role.
+
+```html
+<ul eclStoryCardList>...</ul>
+```
+
+**Selector:** `ul[eclStoryCardList]`
+
+## Inputs
+- **class**: `string` - 
+- **e2eAttr**: `any` - 
+- **tabindex**: `number` - 

package/docs/json/EclStoryCardPictureDirective.md

@@ -0,0 +1,22 @@
+# EclStoryCardPictureDirective
+
+**Type:** directive
+
+
+
+Directive applied to <picture> elements inside a story card item.
+Adds the ECL picture classes.
+
+```html
+<picture eclStoryCardPicture>
+  <source srcset="..." media="(max-width: 50rem)">
+  <img src="..." alt="...">
+</picture>
+```
+
+**Selector:** `picture[eclStoryCardPicture]`
+
+## Inputs
+- **class**: `string` - 
+- **e2eAttr**: `any` - 
+- **tabindex**: `number` -