@eui/ecl 22.0.0-alpha.39 → 22.0.0-alpha.40

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-10-02T08:07:19.312Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-10-06T17:13:34.755Z, llm-md export.
 
 ## Modules
 
@@ -32,9 +32,12 @@ Inputs:
 - `calendarTime: string` — Time of the event (e.g. "2:00 PM - 4:00 PM").
 - `eclTitle: string` — Title displayed in the component.
 - `isFullWidth: boolean = false` — Indicates whether the component should span the full width of its container.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -53,9 +56,12 @@ Inputs:
 - `hasLeftBorder: boolean = false` — Adds a left border to the animated number items.
 - `isFullWidth: boolean = false`
 - `sourcesLabel: string = 'Sources:'` — Label displayed before the sources list.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -75,9 +81,12 @@ Inputs:
 - `prefixLabel: string` — Accessible label for the prefix symbol, used for screen readers (e.g. 'M' -\> 'million')
 - `suffix: string` — Text displayed after the animated number (e.g. '€', 'billions').
 - `suffixLabel: string` — Accessible label for the suffix symbol, used for screen readers (e.g. '%' -\> 'percent').
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -88,12 +97,13 @@ File: `packages/ecl/components/ecl-app/ecl-app.component.ts`
 Selector: `ecl-app`
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `languageDismiss: EclAppLanguageDismissEvent`
+- `class: string = ''`
 
 Properties:
 - `eclSiteHeaderLanguage: unknown = contentChild(EclSiteHeaderLanguageComponent)`
@@ -120,9 +130,12 @@ Inputs:
 - `horizontalAlignment: 'right' | 'left' | 'center' | string = 'left'` — Sets the horizontal alignment of the content inside the banner. Allowed values: 'left' \| 'center' \| 'right'. Default: 'left'.
 - `isFullWidth: boolean = false` — When true, the banner stretches to full width of its container. Default: false.
 - `verticalAlignment: 'top' | 'center' | 'bottom' | string = 'center'` — Sets the vertical alignment of the content inside the banner. Allowed values: 'top' \| 'center' \| 'bottom'. Default: 'center'.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `bannerContainer: unknown = viewChild<ElementRef>('bannerContainer')`
@@ -155,9 +168,12 @@ Description: Blockquote component based on the ECL design system. Displays quote
 
 Inputs:
 - `author: string = undefined` — Author name associated with the quoted content. If provided, it will be displayed below the blockquote.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `languageCode: string = 'en'` — Current active language code, retrieved from the I18n service.
@@ -173,10 +189,15 @@ Selector: `nav[eclBreadcrumb]`
 Description: Displays navigation segments and handles overflow with ellipsis.
 
 Inputs:
+- `ellipsisAriaLabel: string | undefined = undefined` — Accessible label for the ellipsis button. When not provided, falls back to the translated value of ecl.breadcrumb.SHOW-MORE-ITEMS .
+- `ellipsisLabel: string = '…'` — Visible label for the ellipsis button. Defaults to the ellipsis character.
 - `isExpanded: boolean = false` — Expands all breadcrumb segments instead of collapsing them.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `ariaLabel: unknown = toSignal(inject(TranslateService).stream('ecl.breadcrumb.YOU-ARE-HERE'))` — ARIA label describing the breadcrumb purpose.
@@ -203,12 +224,13 @@ Inputs:
 - `queryParams: Params | null = null` — Query parameters used with routerLink.
 - `queryParamsHandling: QueryParamsHandling = null` — Strategy for handling existing query parameters during navigation.
 - `routerLink: string | any[] | null = null` — Router link for navigation.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `segmentClick: EclBreadcrumbSegmentClickEvent` — Emits when the segment is clicked.
+- `class: string = ''`
 
 Properties:
 - `el: unknown = inject(ElementRef)`
@@ -232,9 +254,12 @@ Inputs:
 - `isIconOnly: boolean = false` — Whether the button should be styled as icon-only. When true, the ecl-button--icon-only class is applied.
 - `size: "s" | "m" | "l" = 'l'`
 - `variant: "primary" | "secondary" | "tertiary" = 'primary'` — Visual variant of the button. Can be 'primary', 'secondary', 'tertiary', 'cta', 'ghost', or 'ghost-inverted'. Defaults to 'primary'.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `el: unknown = inject(ElementRef)`
@@ -255,9 +280,12 @@ Selector: `ecl-card-body`
 Description: Card body component based on the ECL design system. Provides a wrapper for the main content area of the card.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -270,9 +298,12 @@ Selector: `ecl-card, article[eclCard]`
 Description: Card component based on the ECL design system. Combines image, title, and content block areas into a unified card layout.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclCardImage: unknown = contentChild(forwardRef(() => EclCardImageDirective))` — Projected image directive inside the card.
@@ -294,12 +325,13 @@ Inputs:
 - `aria-label: string | null = 'Carousel description here'` — Aria-label for screen readers to describe the carousel.
 - `isAutoplay: boolean = undefined` — Determines whether the carousel should autoplay.
 - `playInterval: number = 5000` — Interval in milliseconds between automatic slide transitions.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `slide: EclSlideEvent` — Event emitted when a slide change occurs.
+- `class: string = ''`
 
 Properties:
 - `carouselContainerElement: unknown = viewChild<ElementRef>('carouselContainer')` — Reference to the main carousel container element.
@@ -346,12 +378,13 @@ Description: Represents a single item (slide) within the ECL Carousel. Each slid
 Inputs:
 - `id: string` — The unique identifier of the slide.
 - `isCurrent: boolean = false` — Indicates whether this slide is currently active/visible. Automatically coerced to a boolean value.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `slideClick: EclSlideEvent` — Emits an event when the slide is clicked.
+- `class: string = ''`
 
 Properties:
 - `ariaLabel: string` — The aria-label for the slide, assigned dynamically by the carousel.
@@ -371,9 +404,12 @@ Selector: `ecl-category-filter`
 Inputs:
 - `aria-label: string | null = 'Category filter'` — Aria-label for the navigation role. Defaults to "Category filter".
 - `currentItemId: string = undefined` — ID of the currently selected item. When provided, the item with the matching ID will be marked as current and automatically expanded on initialization.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclCategoryFilterItemsAll: unknown = contentChildren<EclCategoryFilterItemComponent>( forwardRef(() => EclCategoryFilterItemComponent), { descendants: true } )` — Signal-based query for all descendant category filter items.
@@ -390,12 +426,13 @@ Selector: `ecl-category-filter-item`
 Inputs:
 - `id: string` — Unique identifier for the item. Used to manage selection state.
 - `href: string = undefined` — Link URL associated with this category filter item. If not provided, the item acts as a toggle only.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `itemSelect: EventEmitter = new EventEmitter<EclCategoryFilterItemSelectEvent>()` — Emits when the item is selected by the user (clicked).
+- `class: string = ''`
 
 Properties:
 - `eclCategoryList: unknown = contentChild(forwardRef(() => EclCategoryFilterListComponent))` — Child list component if the item has nested children.
@@ -410,9 +447,12 @@ File: `packages/ecl/components/ecl-category-filter/ecl-category-filter-list/ecl-
 Selector: `ecl-category-filter-list`
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclCategoryFilterItems: unknown = contentChildren<EclCategoryFilterItemComponent>(forwardRef(() => EclCategoryFilterItemComponent))` — List of all category filter items projected inside this list.
@@ -431,9 +471,12 @@ Description: Displays help text associated with a checkbox.
 
 Inputs:
 - `isDisabled: boolean = false` — Indicates whether the help text is disabled (e.g. visually muted).
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -449,9 +492,12 @@ Inputs:
 - `isDisabled: boolean = false` — Indicates whether the checkbox is disabled.
 - `isInvalid: boolean = false` — Indicates whether the checkbox is in an invalid state.
 - `isRequired: boolean = false` — Indicates whether the checkbox is required.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -464,9 +510,12 @@ Selector: `ecl-content-block`
 Description: Component representing a content block, based on the ECL design system. Serves as a container for structured content such as titles, texts, and links.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `el: unknown = inject(ElementRef)`
@@ -481,9 +530,12 @@ Selector: `ecl-content-item`
 
 Inputs:
 - `hasDivider: boolean = false` — Whether to display a divider below the content item. When true, the component will have a visual divider applied. Default is false.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclContentBlock: unknown = contentChild(forwardRef(() => EclContentBlockComponent))` — Reference to projected content block. Used to apply internal styling and structure.
@@ -512,9 +564,12 @@ Inputs:
 - `monthTitle: string = undefined` — Explicit string used as an accessible or verbose label for the month (optional).
 - `variant: "ongoing" | "past" = null` — Optional visual variant of the date block. Can be: 'ongoing' : for ongoing events 'past' : for past events This changes styling only.
 - `year: string = undefined` — Explicit string for year part of the date (optional). Used when date is not set or overridden manually.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `locale: string = 'en'`
@@ -531,9 +586,12 @@ Description: Component for a definition item within an ECL description list. Sup
 
 Inputs:
 - `variant: 'link' | 'inline' | 'taxonomy' | 'tag' | null = null` — Visual variant of the definition list item. Options: 'link', 'inline', 'taxonomy', 'tag'.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `domReady: unknown = signal(false)` — Signal indicating whether the DOM is ready for manipulation. Set to true after first render to ensure the projected exists before the see-more link is inserted into it. Defers DOM writes in the effect.
@@ -553,16 +611,15 @@ Description: Expandable component used to toggle visibility of additional conten
 
 Inputs:
 - `collapsedLabel: string = undefined` — The label to display when the content is collapsed.
-- `expandedLabel: string = undefined` — The label to display when the content is expanded. If not set, collapsedLabel will be used as fallback.
-- `isExpanded: boolean = false` — Whether the expandable content is currently expanded. Default is false .
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `expandedLabel: string = undefined` — The label to display when the content is expanded. If not set, collapsedLabel is used as fallback.
+- `isExpanded: boolean = false` — Whether the expandable content should start expanded. One-way input; the live expanded state is tracked internally and toggled by the user. Default is false .
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
-- `expandedLabel: string = undefined` — The label to display when the content is expanded. If not set, collapsedLabel will be used as fallback.
-- `isExpanded: boolean = false` — Whether the expandable content is currently expanded. Default is false .
 - `toggle: EclExpandableToggleEvent` — Event emitted when the expandable is toggled. Consumers can prevent default behavior by calling event.preventDefault() .
+- `class: string = ''`
 
 Methods:
 - `onButtonClick(): void` — Handles click on the toggle button. Emits a toggle event and updates the expanded state unless prevented.
@@ -580,9 +637,12 @@ Inputs:
 - `fontSize: "m" | "l" = 'l'` — Font size variant. Can be: 'm' – medium (smaller text) 'l' – large (default)
 - `isCentered: boolean = false` — Whether the content should be centered. Adds ecl-fact-figures--centered class when true.
 - `sourcesLabel: string = 'Sources:'` — Label displayed before the sources list. Default is 'Sources:' .
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `hasSourcesList: unknown = computed(() => !!this.sourcesList())`
@@ -602,9 +662,12 @@ Description: Component representing a single item within the Fact & Figures bloc
 Inputs:
 - `eclTitle: string`
 - `eclValue: string`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclIconComponents: unknown = contentChildren(EclIconComponent)` — Query for any EclIconComponent children projected into the component. These icons will receive an additional CSS class.
@@ -620,9 +683,12 @@ Selector: `ecl-fact-figures-view-all`
 Description: Component representing the "View all" section in a Fact & Figures block. Used to display a link that allows users to view additional content.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclLink: unknown = contentChild(EclLinkDirective)` — Reference to the projected link directive inside the component. Automatically decorated with a specific class upon initialization.
@@ -644,9 +710,12 @@ Inputs:
 - `position: "left" | "right" = 'left'` — The position of the image in the component. Can be 'left' or 'right'. The default value is 'left'.
 - `variant: 'highlight' = undefined` — 'highligh' varian, applies class to make more stand out appearance of the component.
 - `verticalAlign: 'top' | 'center' | undefined`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `role: string = 'article'`
@@ -665,9 +734,12 @@ Inputs:
 - `eclMicroTitle: string = ''`
 - `eclTitle: string = ''`
 - `` id: string = `ecl-featured-item-${uniqueId()}` ``
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `className: unknown = true`
@@ -685,9 +757,12 @@ Selector: `ecl-featured-item-description`
 Description: Applies specific additional class to style component, as a part of the component.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `className: unknown = true`
@@ -714,12 +789,13 @@ Inputs:
 - `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`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `translationsToggle: EclFileItemsToggleEvent` — Emits when the translation toggle is clicked. Consumers can call preventDefault() on the event to cancel the toggle.
+- `class: string = ''`
 
 Properties:
 - `eclThemeService: unknown = inject(EclThemeService)`
@@ -743,9 +819,12 @@ Inputs:
 - `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.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -760,13 +839,14 @@ Description: Component representing the translation list within an ECL File comp
 Inputs:
 - `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`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `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 = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -779,9 +859,12 @@ Selector: `ecl-file-lists, ecl-file-taxonomy`
 Description: Component representing the lists section of a file in the ECL File component.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -794,9 +877,12 @@ Selector: `[eclFormGroup], ecl-form-group`
 Description: The EclFormGroupComponent is a wrapper component used to group form fields together This component automatically detects if any EclRangeDirective inputs are nested inside it, and applies the appropriate styling attributes if so.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclRange: unknown = contentChildren(forwardRef(() => EclRangeDirective), { descendants: true })` — Query list of any descendant EclRangeDirective instances within the form group. Used internally to determine whether the form group contains range inputs.
@@ -815,9 +901,12 @@ Description: The EclFormLabelComponent is used to render a form label with optio
 Inputs:
 - `isOptional: boolean = false` — Marks the form label as optional. When true , the label can display additional styling or indicators for optional fields. Defaults to false .
 - `isRequired: boolean = false` — Marks the form label as required. When true , the label can display styling or indicators for required fields. Defaults to false .
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `hasClass: unknown = true` — Applies the base ECL class for form labels to the host element.
@@ -843,9 +932,9 @@ Inputs:
 - `isShareable: boolean = true` — If the items in the gallery can be shared. I.e. if the link for sharing will be present for each item.
 - `isShowTitleOnHover: boolean = true` — If set to false, no title will be displayed when user hover on a gallery item.
 - `ratio: '3-1' | '3-2' | string = '3-2'` — The ratio that will be applied to the gallery thumbnails.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `hide: EclGalleryHideEvent` — Emits event when an expanded item is closed.
@@ -853,6 +942,7 @@ Outputs:
 - `openFullScreen: EclGalleryFullScreenEvent` — Emits event when an item is opened in full screen.
 - `share: EclGalleryShareEvent` — Emits event when an item is shared.
 - `show: EclGalleryShowEvent` — Emits event when user clicks on an item to expand it.
+- `class: string = ''`
 
 Properties:
 - `footerChild: unknown = viewChild<ElementRef>('footer')`
@@ -918,12 +1008,13 @@ Inputs:
 - `ariaLabel: string | null = null`
 - `isShareable: boolean = true` — Can this item be shared, i.e. show/hide share button.
 - `mediaType: "image" | "video" | "externalVideo" = 'image'`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `itemClick: EventEmitter = new EventEmitter<EclGalleryItemClickEvent>()`
+- `class: string = ''`
 
 Properties:
 - `galleryPicture: unknown = contentChild(EclGalleryPictureDirective)`
@@ -945,9 +1036,12 @@ Selector: `article[eclHighlightBox]`
 Description: ECL Highlight Box component. Displays a prominent content block with an icon, title, description, and optional link. Uses content projection to compose the box from directive-decorated elements.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -966,12 +1060,13 @@ Inputs:
 - `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`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `searchEvent: EclHighlightedSearchEvent` — Emitted when the user submits the search form.
+- `class: string = ''`
 
 Methods:
 - `registerOnChange(fn: function): void`
@@ -1037,12 +1132,13 @@ Inputs:
 - `marginBottom: number = undefined`
 - `marginTop: number = undefined` — Used to calculate component's position.
 - `offsetTop: number = undefined` — Sets the offset from the top of the page (for example if there is a toolbar or header). Used to calculate scrolling behaviour.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `sectionEnter: EclInpageNavigationSectionEnterEvent` — This event will be emitted, when onscroll a new section becomes active.
+- `class: string = ''`
 
 Properties:
 - `currentSectionElement: HTMLElement | null = null`
@@ -1072,9 +1168,9 @@ Inputs:
 - `isActive: boolean = undefined`
 - `label: string = undefined` — The label that is displayed in the items list.
 - `sectionId: string = undefined`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `itemArrowDown: EventEmitter = new EventEmitter()` — Emitted when on keyboard navigation, user clicks the arrow-down.
@@ -1083,6 +1179,7 @@ Outputs:
 - `itemEnter: EventEmitter = new EventEmitter()` — Emitted when on keyboard navigation, user clicks the ENTER.
 - `itemTab: EventEmitter = new EventEmitter<Event>()` — Emitted when on keyboard navigation, user clicks the TAB.
 - `isActive: boolean = undefined`
+- `class: string = ''`
 
 Properties:
 - `cmpClass: unknown = true`
@@ -1111,9 +1208,12 @@ Inputs:
 - `forcedColumn: boolean = false` — Force column number instead of dynamic management. Use with caution.
 - `fullHeight: boolean = true` — Display all the elements at full height.
 - `infoPosition: "top" | "side" = 'top'` — Position of the info block (title + description).
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -1134,9 +1234,12 @@ Inputs:
 - `isIconInline: boolean = false` — If the icon should be on the same row as title - for list with icons
 - `isZebra: boolean = false` — Enables zebra style (alternating background colors for list items).
 - `variant: 'icon-list' | 'number-list' | null = null` — Two variants available: icon-list and number-list.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `counterStartStyle: string = ''`
@@ -1158,9 +1261,12 @@ Description: Component representing a single item in an ECL illustration list. D
 Inputs:
 - `eclTitle: string = ''` — Text displayed as the item title.
 - `eclValue: string = ''` — Text displayed as the item value.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `className: unknown = true` — Applies ECL class for illustration list item.
@@ -1188,9 +1294,12 @@ Inputs:
 - `isVisible: boolean = true` — Controls visibility of the spinner. When set to false , the spinner will be hidden via CSS. Defaults to true .
 - `size: "s" | "m" | "l" = 'm'` — Size of the spinner. Possible values: 's' – small 'm' – medium (default) 'l' – large
 - `variant: "primary" | "inverted" = 'primary'` — Variant of the spinner color. Possible values: 'primary' – default appearance 'inverted' – used on dark backgrounds
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `role: string = 'alert'` — Applies ARIA role for accessibility.
@@ -1209,9 +1318,12 @@ Inputs:
 - `captionPosition: "over" | "bottom" | "hidden" = 'bottom'`
 - `eclAutoplay: boolean = false` — Used for a video only - if the video should play immediately.
 - `isFullWidth: boolean = false`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `captionBottomOffset: unknown = signal<string | null>(null)`
@@ -1239,12 +1351,13 @@ Selector: `nav[eclMegaMenu]`
 Description: The 'eclMegaMenu' is an advanced navigation component designed for complex sites with deep hierarchies. It can provide descriptive text for first level items, accommodate up to three levels of navigation, and additionally allows a featured column that can be used to either promote parent-page specific or site-wide pages, hidden deep into the lower levels of the hierarchy.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `megaMenuItemSelect: EclMegaMenuItem` — The event that is emitted, when a menu item is selected.
+- `class: string = ''`
 
 Properties:
 - `breakpointsValue: any = { isMobile: false, isTablet: false, isLtDesktop: false, isDesktop: false, isXL: false, isXXL: false, }` — Represents the current viewport breakpoint states.
@@ -1278,9 +1391,12 @@ Description: This component represents the featured items panel.
 Inputs:
 - `title: string = undefined`
 - `titleId: string = undefined`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclMegaMenuFeaturedStyleHeight: number | null = null`
@@ -1302,9 +1418,12 @@ Description: Component for displaying some custom information for the current me
 Inputs:
 - `title: string = undefined`
 - `titleId: string = undefined`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclMegaMenuInfoStyleHeight: number | null = null` — Sets the height of the component.
@@ -1333,13 +1452,14 @@ Inputs:
 - `queryParamsHandling: QueryParamsHandling = null`
 - `routerLink: string | any[] = null`
 - `target: string = ''`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `megaMenuItemClicked: EventEmitter = new EventEmitter()`
 - `megaMenuItemKeydown: EventEmitter = new EventEmitter<KeyboardEvent>()`
+- `class: string = ''`
 
 Properties:
 - `containerStyleHeight: number | null = null`
@@ -1388,13 +1508,14 @@ Inputs:
 - `queryParamsHandling: QueryParamsHandling = null`
 - `routerLink: string | any[] = null`
 - `target: string = ''`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `megaMenuSubItemClicked: EventEmitter = new EventEmitter()`
 - `megaMenuSubItemKeydown: EventEmitter = new EventEmitter()`
+- `class: string = ''`
 
 Properties:
 - `eclMegaMenuFeatured: unknown = contentChild(forwardRef(() => EclMegaMenuFeaturedComponent))` — The component for the featured items.
@@ -1428,14 +1549,15 @@ Description: The horizontal menu is used as a primary navigation and it can disp
 
 Inputs:
 - `maxLines: number = 0` — Adds some additional styling for the menu items' labels. Depending on that value, the labels can drop on 2-3 lines, if they are longer.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `closeHamburgerMenu`
 - `menuItemSelect: EclMenuItemSelectEvent`
 - `openHamburgerMenu`
+- `class: string = ''`
 
 Properties:
 - `breakpointsValue: any = { isMobile: false, isTablet: false, isLtDesktop: false, isDesktop: false, isXL: false, isXXL: false, }` — Represents the current viewport breakpoint states.
@@ -1488,9 +1610,9 @@ Inputs:
 - `routerLink: string | any[] = null`
 - `target: string = ''`
 - `toggleAriaLabel: string = undefined` — When in mobile view, use this property to set aria-label for the toggle items button (to expand item's children).
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `menuItemCaret: EventEmitter = new EventEmitter<EclMenuItemCaretEvent>()`
@@ -1501,6 +1623,7 @@ Outputs:
 - `menuItemSelect: EventEmitter = new EventEmitter<EclMenuItemSelectEvent>()`
 - `menuMegaItemSelect: EventEmitter = new EventEmitter<EclMenuItemSelectEvent>()`
 - `menuMegaLastItemTab: EventEmitter = new EventEmitter<void>()` — This event is emited when the keyboard nav reaches the last item in mobile view. Then the next focused element should be the 'close' btn.
+- `class: string = ''`
 
 Properties:
 - `el: unknown = inject(ElementRef)`
@@ -1535,14 +1658,15 @@ Selector: `ecl-menu-mega`
 Description: This component acts as a wrapper for the second level of menu items, that are children of one root item. Provides functionality for some common events like keyboard navigation and manages relations between sub items.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `menuItemSelect: EventEmitter = new EventEmitter<EclMenuItemSelectEvent>()`
 - `menuMegaItemParentFocus: EventEmitter = new EventEmitter<EclMenuItemSelectEvent>()` — Used in keyboard navigation, when focus has to be moved to the parent item.
 - `menuMegaLastItemTab: EventEmitter = new EventEmitter<void>()` — Used when kyboard navigation with TAB reaches the last sub item.
+- `class: string = ''`
 
 Properties:
 - `eclMenuMegaItems: QueryList<EclMenuMegaItemComponent>` — List of the sub items.
@@ -1573,13 +1697,14 @@ Inputs:
 - `queryParamsHandling: QueryParamsHandling = null`
 - `routerLink: string | any[] = null`
 - `target: string = ''`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `menuItemKeydown: EventEmitter = new EventEmitter<EclMenuItemKeydownEvent>()`
 - `menuItemSelect: EventEmitter = new EventEmitter<EclMenuItemSelectEvent>()`
+- `class: string = ''`
 
 Properties:
 - `children: EclMenuItem[] = []`
@@ -1606,9 +1731,12 @@ Selector: `[eclModalBody]`
 Description: Body component used inside the ECL Modal. Optionally allows scrollable content inside the modal body.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclModalBodyId: unknown = signal<string>('')` — Unique ID for the modal body, used for accessibility ( aria-describedby ). This ID is passed from the parent EclModalComponent .
@@ -1624,13 +1752,14 @@ Selector: `dialog[eclModal]`
 Inputs:
 - `size: 's' | 'm' | 'l' | 'full' | string = 'l'` — Defines the size of the modal. Possible values: 's', 'm', 'l' (default), 'full'.
 - `variant: 'information' | 'success' | 'warning' | 'error' | string` — Defines the visual variant of the modal. Possible values: 'information', 'success', 'warning', 'error', or a custom string.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `modalClose: EclModalCloseEvent<T>` — Emits when the modal is closed. Carries an instance of EclModalCloseEvent .
 - `modalOpen: EclModalOpenEvent` — Emits when the modal is opened. Carries an instance of EclModalOpenEvent .
+- `class: string = ''`
 
 Properties:
 - `eclModalBody: unknown = contentChild(EclModalBodyComponent)` — Body component projected into the modal.
@@ -1653,9 +1782,12 @@ Selector: `[eclModalFooter]`
 Description: Footer component used within the ECL Modal. Automatically applies styling to buttons projected into the footer.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `buttonComponents: unknown = contentChildren(forwardRef(() => EclButtonComponent), { descendants: true })` — Queries all button components projected into the footer.
@@ -1671,12 +1803,13 @@ Selector: `[eclModalHeader]`
 Description: Header component used within the ECL Modal. Displays an icon depending on the modal variant, user-defined content, and a close button that emits a close event.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `modalClose: EclModalCloseEvent<T>` — Event emitted when the close button is clicked. Emits an EclModalCloseEvent object.
+- `class: string = ''`
 
 Properties:
 - `closeButton: unknown = viewChild.required<EclButtonComponent>('closeButton')` — Reference to the close button component.
@@ -1706,12 +1839,13 @@ Inputs:
 - `isInvalid: boolean = false` — Marks the multiselect as invalid.
 - `isSubmitOnApply: boolean = false` — When true, the Apply button in the dropdown acts as a submit button (type="submit").
 - `toggleLabel: string | undefined = undefined` — Label used for the toggle button that expands or collapses the dropdown.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `eclChange: string[]` — Emits an array of selected option values when the selection changes.
+- `class: string = ''`
 
 Properties:
 - `eclOptionItems: unknown = contentChildren(forwardRef(() => EclMultiselectOptionDirective))` — List of option directives projected into the component.
@@ -1727,12 +1861,13 @@ Selector: `div[eclMultiselectDropdown]`
 Description: Component that renders a dropdown-style multiselect UI element. Used internally by the EclMultiselectComponent .
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `eclChange: string[]` — Emits the list of selected values whenever the selection changes.
+- `class: string = ''`
 
 Properties:
 - `ariaDescribedby: unknown = signal<string | undefined>(undefined)` — Optional ARIA description used for accessibility purposes.
@@ -1775,13 +1910,14 @@ Inputs:
 - `selectedItemsLabels: string[] = []` — Array of currently selected item labels.
 - `toggleId: string = ''` — ID of the toggle button element (used for accessibility).
 - `toggleLabel: string | undefined = undefined` — Label for the toggle button (optional).
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `mainInputClick: EclMultiselectMainInputClickEvent` — Event emitted when the input is clicked.
 - `mainInputKeydown: Event` — Event emitted when a key is pressed on the input.
+- `class: string = ''`
 
 Methods:
 - `onFocus(): void` — Focuses the multiselect input element.
@@ -1796,9 +1932,12 @@ Description: Component representing an option group (fieldset) in a multiselect
 
 Inputs:
 - `label: string = undefined` — The visible label for the option group.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -1815,14 +1954,15 @@ Inputs:
 - `isChecked: boolean = false` — Indicates whether the option is selected.
 - `label: string = ''` — Display label for the option.
 - `value: string = ''` — Value assigned to the option.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `isChecked: boolean = false` — Indicates whether the option is selected.
 - `optionClick: EclMultiselectOptionClickEvent` — Emits when the option is clicked.
 - `optionKeydown: EclMultiselectOptionKeydownEvent` — Emits when a key is pressed while focused on the option.
+- `class: string = ''`
 
 Methods:
 - `hide(): void` — Hides the option from view.
@@ -1841,9 +1981,12 @@ Description: Navigation lists provide users with a quick way to scan through ite
 Inputs:
 - `columns: number = 2` — Property that describes how many columns the navigation list has. Default value is 2.
 - `hasBorders: boolean = true` — Property that describes if each item will have a border. Default is 'true'.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -1857,9 +2000,12 @@ Description: Component that represents one navigation list item, has title and i
 
 Inputs:
 - `variant: 'illustration' | 'image-as-illustration' | '' = ''` — Different variants, that add styling for different type of displaing the picture, used in the list item.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclContentBlock: unknown = contentChild(forwardRef(() => EclContentBlockComponent))`
@@ -1876,12 +2022,13 @@ Selector: `ecl-news-ticker`
 
 Inputs:
 - `isAutoplay: boolean = true` — Enables or disables automatic cycling through ticker items. Defaults to true .
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `itemSwitch: EclNewsTickerItemEvent` — Emits when the visible news ticker item changes. The payload is an instance of EclNewsTickerItemEvent .
+- `class: string = ''`
 
 Properties:
 - `firstHiddenItem: unknown = viewChild<EclNewsTickerItemComponent>('firstHiddenItem')` — Reference to the hidden first item used for looping.
@@ -1914,12 +2061,13 @@ File: `packages/ecl/components/ecl-news-ticker/ecl-news-ticker-item.component.ts
 Selector: `ecl-news-ticker-item`
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `itemFocused: EventEmitter = new EventEmitter<null>()` — Emitted when the internal link receives focus (used to cancel autoplay).
+- `class: string = ''`
 
 Properties:
 - `eclLink: unknown = contentChild(EclLinkDirective)` — Optional projected ecl-link element within the news ticker item.
@@ -1939,13 +2087,14 @@ Inputs:
 - `isVisible: boolean = true` — Controls the visibility of the notification. When false, the component is hidden using CSS utility class.
 - `notificationTitle: string = undefined` — The title of the notification. This is displayed inside the component.
 - `variant: "info" | "success" | "warning" | "error" = 'info'` — Defines the visual style of the notification. Can be one of: 'info' \| 'success' \| 'warning' \| 'error'. Default is 'info'.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `close: EclNotificationCloseEvent` — Emits an event when the close button is clicked. Consumers can call preventDefault() on the emitted event to prevent the notification from closing.
 - `isVisible: boolean = true` — Controls the visibility of the notification. When false, the component is hidden using CSS utility class.
+- `class: string = ''`
 
 Properties:
 - `eclThemeService: unknown = inject(EclThemeService)`
@@ -1968,9 +2117,12 @@ Inputs:
 - `descriptionPosition: "top" | "bottom" = 'top'`
 - `hasBackground: boolean = false`
 - `picturePosition: "top" | "beside" | "bottom" = 'top'`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclBreadcrumbComponent: unknown = contentChild(EclBreadcrumbComponent)` — Reference to the ECL breadcrumb inside the header.
@@ -1985,9 +2137,12 @@ Selector: `div[eclPageHeaderDescriptionContainer]`
 
 Inputs:
 - `position: "top" | "bottom" = 'top'`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2000,9 +2155,12 @@ Selector: `div[eclPageHeaderExpandable]`
 Description: ECL Page Header expandable component. As a part of the PageHeader, it represents expandable content, placed at the top of the parent component.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `hasProjectedContent: unknown = computed(() => this._hasProjectedContent())`
@@ -2019,9 +2177,12 @@ File: `packages/ecl/components/ecl-page-header/ecl-page-header-section/ecl-page-
 Selector: `div[eclPageHeaderSection]`
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2032,9 +2193,12 @@ File: `packages/ecl/components/ecl-page-header/ecl-page-header-section-info/ecl-
 Selector: `div[eclPageHeaderSectionInfo]`
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2068,12 +2232,13 @@ Inputs:
 - `pageSize: number = DefaultConfig.pageSize` — Number of items displayed on a single page.
 - `pageWindowSize: number = DefaultConfig.pageWindowSize` — Number of pagination links visible around the current page.
 - `totalItems: number = DefaultConfig.totalItems` — Total number of items in the list.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `page: EclPaginationEvent` — Emits a pagination event each time the page changes.
+- `class: string = ''`
 
 Properties:
 - `eclPaginationList: unknown = contentChild(EclPaginationListDirective)` — Reference to the pagination list directive inside the component's content.
@@ -2103,12 +2268,13 @@ Inputs:
 - `queryParams: Params | null = null` — Query parameters for the router link.
 - `queryParamsHandling: QueryParamsHandling = null` — Determines how query parameters are handled during navigation.
 - `routerLink: string | any[] | null = null` — Router navigation link for Angular routing.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `pageClick: EclPaginationItemClickEvent` — Emits when the pagination item is clicked.
+- `class: string = ''`
 
 Properties:
 - `el: unknown = inject(ElementRef)`
@@ -2128,13 +2294,14 @@ Selector: `ecl-popover`
 Description: Component representing an ECL Popover. It handles toggling visibility, positioning, and closing behavior of the popover.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `closeEvent`
 - `openEvent`
+- `class: string = ''`
 
 Properties:
 - `eclPopoverContainerElement: unknown = viewChild<ElementRef>('container')` — Reference to the popover container element.
@@ -2165,12 +2332,13 @@ Inputs:
 - `` 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.
 - `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`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `cardFlip: EclQuizCardFlipEvent` — Emitted when the card is flipped.
+- `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.
@@ -2203,9 +2371,12 @@ Inputs:
 - `hasBackground: boolean = false`
 - `isFullWidth: boolean = false`
 - `variant: "poll" | "reveal" = 'reveal'` — Quiz variant: 'reveal' for flip cards, 'poll' for multiple choice.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2219,12 +2390,13 @@ Description: Component that displays help text for the ECL radio input. Supports
 
 Inputs:
 - `isDisabled: boolean = false` — Adds styling for a disabled help text. Exposed as a model so the parent eclRadio directive can synchronize the disabled state onto the projected help text.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `isDisabled: boolean = false` — Adds styling for a disabled help text. Exposed as a model so the parent eclRadio directive can synchronize the disabled state onto the projected help text.
+- `class: string = ''`
 
 Properties:
 - `cssClasses: unknown = computed(() => [this.getCssClasses('ecl-radio__help')].join(' ').trim())` — Returns the CSS classes applied to the host element. Includes the base ecl-radio\_\_help class.
@@ -2242,13 +2414,14 @@ Description: Component representing a label for an ECL radio button. Used inside
 Inputs:
 - `isDisabled: boolean = false` — Adds styling for a disabled state. Exposed as a model so the parent eclRadio directive can synchronize the disabled state onto the label.
 - `isInvalid: boolean = false` — Adds styling for an invalid state. Exposed as a model so the parent eclRadio directive can synchronize the invalid state onto the label.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `isDisabled: boolean = false` — Adds styling for a disabled state. Exposed as a model so the parent eclRadio directive can synchronize the disabled state onto the label.
 - `isInvalid: boolean = false` — Adds styling for an invalid state. Exposed as a model so the parent eclRadio directive can synchronize the invalid state onto the label.
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2261,9 +2434,12 @@ Selector: `ecl-range-bubble`
 Description: Component representing a bubble tooltip shown above a range input, used to display the current value with ECL styling.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `el: unknown = inject(ElementRef)`
@@ -2282,9 +2458,12 @@ Selector: `ecl-range-value`
 Description: Component representing the value label displayed next to a range input. Applies ECL styling for the value element.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `id: unknown = signal<string>('')` — ID attribute applied to the component's host element.
@@ -2301,17 +2480,17 @@ Selector: `ecl-rating-field`
 Description: Component representing rating field, displayed with stars. Typically used when the user needs to evaluate something.
 
 Inputs:
-- `disabled: boolean = undefined` — Can be used to set disabled status.
+- `disabled: boolean = false` — Can be used to set disabled status. One-way input; the live disabled state is tracked internally and may also be driven by the forms API via setDisabledState .
 - `name: string = 'rating'` — Name of the radio group. Also used for creating id for each radio button.
 - `numberOfStars: number = 5` — How many stars should the rating have.
 - `rating: number = undefined` — The initial value, if any.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
-- `disabled: boolean = undefined` — Can be used to set disabled status.
 - `ratingChange: any` — The event to be emitted when rating is changed.
+- `class: string = ''`
 
 Properties:
 - `currentRating: unknown = signal<number>(undefined)` — Internal mutable rating value, falls back to the input
@@ -2338,13 +2517,14 @@ Inputs:
 - `searchButtonIcon: string = 'search'`
 - `searchButtonLabel: string = undefined`
 - `searchInputText: string = undefined` — The current/default search text.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `searchEvent: EclSearchFormEvent` — This event is emited, when user performs the search action. Includes the search text from the input field.
 - `searchInputText: string = undefined` — The current/default search text.
+- `class: string = ''`
 
 Methods:
 - `registerOnChange(fn: function): void`
@@ -2364,15 +2544,16 @@ Inputs:
 - `eclSize: string = 'm'` — Size/length of the field and the dropdown, can be 's', 'm' or 'l'. Default is 'm'. Same as the size of the main host element.
 - `isInvalid: boolean = undefined`
 - `toggleLabel: string | undefined = undefined` — Custom label for the arrow-down button. Set from the main host element.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `disabled: boolean = undefined`
 - `eclSize: string = 'm'` — Size/length of the field and the dropdown, can be 's', 'm' or 'l'. Default is 'm'. Same as the size of the main host element.
 - `isInvalid: boolean = undefined`
 - `toggleLabel: string | undefined = undefined` — Custom label for the arrow-down button. Set from the main host element.
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2387,9 +2568,12 @@ Description: The site footer component content provides supplementary informatio
 Inputs:
 - `a11yStatementRef: string = 'https://commission.europa.eu/accessibility-statement_en'` — 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.
 - `isCore: boolean = false` — If it's a core site footer. The content of the footer for the Core configuration is specific and all items mandatory.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclThemeService: unknown = inject(EclThemeService)`
@@ -2407,9 +2591,12 @@ Description: The content of the site footer core component. The part that is spe
 
 Inputs:
 - `eclTitle: string = null`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2423,9 +2610,12 @@ Description: The content of the site footer core component. The part that is spe
 
 Inputs:
 - `languageCode: string = undefined` — The code of the current language. Used to translate the content.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2439,9 +2629,12 @@ Description: Component that renders a feedback/survey section in the site footer
 
 Inputs:
 - `description: string = null` — The description text displayed above the link (e.g. "Help us improve our website").
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2459,9 +2652,12 @@ Inputs:
 - `ecLogoLanguageCode: string = undefined` — The code of the current language for the logo. If there is no logo for the current language, a default logo will be displayed.
 - `isCore: boolean = false` — The component is showing different content, depending if it's core site footer or not.
 - `languageCode: string = undefined` — The code of the current language. Used to translate the content.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getSupportedLanguageForLinkEib(): string`
@@ -2478,9 +2674,12 @@ Inputs:
 - `a11yStatementRef: string = 'https://commission.europa.eu/accessibility-statement_en'` — 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.
 - `isCore: boolean = false` — If this is a core template. If it's standardised or harmonised footer, ec logo should be added.
 - `languageCode: string = undefined` — The code of the current language. Used to translate the content.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2493,9 +2692,12 @@ Selector: `ecl-site-header-action`
 Description: This components is a container element for custom action, login, language and search components.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2509,9 +2711,12 @@ Deprecated: (deprecated: This component is deprecated and will be removed in v23
 Description: This component is used, when we want to show class name (used in standardised variant of site-header).
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2528,14 +2733,15 @@ Inputs:
 - `languageCode: string = 'en'` — Language code of the current language of the site.
 - `logoSize: "s" | "m" | "l" = 'm'` — The size of the logo, 's', 'm' or 'l', default to 'm'.
 - `siteName: string` — The name of the site, to be added in the header, next to the logo.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `languageClick: EclSiteHeaderLanguageClickEvent`
 - `languageCode: string = 'en'` — Language code of the current language of the site.
 - `logoClick: EclSiteHeaderLogoClickEvent`
+- `class: string = ''`
 
 Properties:
 - `bannerHeader: unknown = viewChild<ElementRef>('bannerHeader')`
@@ -2563,9 +2769,12 @@ Selector: `div[eclSiteHeaderCustomAction]`
 Description: This components gives opportunity for user to add a custom action. It will appear at first place, before log-in and language and search (if any of these exist). Adds specific styling and functionality. Opens a dropdown with some more content.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `onClickOutsideHandler(): void` — Close the overlay, when clicking outside of it.
@@ -2581,9 +2790,12 @@ Selector: `[eclSiteHeaderEnvironment]`
 Description: Custom component, that shows the current environment of the application, for example 'develop', 'acceptance', etc. Adds some custom styling, so that the text will appear over the EU/EC logo.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2596,13 +2808,14 @@ Selector: `ecl-site-header-language`
 Description: This component is used to switch between the languages of the application. Shows the current language, when clicked, opens a language selector.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `languageClick: EclSiteHeaderLanguageClickEvent` — Thie event is emited, when language link, showing the current language is clicked.
 - `languageSelected: EclSiteHeaderLanguageSelectedEvent` — Thie event is emited, when user selects a new language from the dropdown.
+- `class: string = ''`
 
 Properties:
 - `languageCode: string = 'en'` — Current language code. Read and written by the parent ecl-site-header .
@@ -2632,13 +2845,14 @@ Inputs:
 - `nonEuColumnsCount: number = undefined` — Number of columns for non-eu languages. Calculated by the parent component 'ecl-site-header-language'.
 - `nonEuLanguages: EuiLanguage[] = []`
 - `rightPosition: number = undefined` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `languageClosed: EclSiteHeaderLanguageCloseEvent`
 - `languageSelected: EclSiteHeaderLanguageSelectedEvent`
+- `class: string = ''`
 
 Properties:
 - `el: unknown = inject(ElementRef)` — Host element reference. Read by the parent ecl-site-header-language for positioning.
@@ -2658,13 +2872,14 @@ Description: Component for login/logout as part of the harmonised site header. E
 
 Inputs:
 - `isLoggedIn: boolean = false`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `login: EclSiteHeaderLoginEvent`
 - `loginBoxToggle: EclSiteHeaderLoginBoxToggleEvent`
+- `class: string = ''`
 
 Properties:
 - `isLoginBoxActive: unknown = false` — If login popover is open (true) or closed (false). Kept public because the parent ecl-site-header resets it directly when the search box opens.
@@ -2680,9 +2895,12 @@ Selector: `ecl-site-header-notification`
 Description: This component is used as a wrapper around ecl-notification component, when used in the site-header. Adds specific class and methods to show/hide the notification.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `onHide(): void`
@@ -2700,14 +2918,15 @@ Inputs:
 - `searchButtonLabel: string = undefined`
 - `searchInputPlaceholder: string = undefined`
 - `searchInputText: string`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `searchEvent: EclSiteHeaderSearchEvent`
 - `searchInputText: string`
 - `searchToggle: EclSiteHeaderSearchToggleEvent`
+- `class: string = ''`
 
 Properties:
 - `isSearchBoxActive: unknown = false` — Whether the search dropdown is open. Kept public because the parent ecl-site-header resets it directly when the login box opens.
@@ -2728,9 +2947,12 @@ Description: ECL Slogan Ticker component – renders a continuously auto-scrolli
 
 Inputs:
 - `eclAriaLabel: string = 'Slogan ticker'` — Aria-label for the ticker region.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2745,9 +2967,12 @@ Inputs:
 - `horizontalAlignment: 'right' | 'left' | string = 'left'`
 - `isIconOnly: boolean = false`
 - `isVertical: boolean = false`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2766,12 +2991,13 @@ Inputs:
 - `routerLink: string = ''`
 - `size: string = 'm'`
 - `target: string = undefined`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `itemClick: EclSocialMediaFollowItemClickEvent`
+- `class: string = ''`
 
 Methods:
 - `onItemClick(evt: Event): void`
@@ -2785,9 +3011,12 @@ Selector: `div[eclSplashPage]`
 Description: Component representing the main splash page layout. This component serves as a container for the splash page content. It applies the ecl-splash-page CSS class to the host element. Intended to be used as a wrapper ( div ) for other splash page-related components.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2800,10 +3029,13 @@ Selector: `div[eclSplashPageLanguageCategory]`
 Description: Component representing a category of languages displayed on the splash page. Used to group related language links under a common title.
 
 Inputs:
-- `title: string = undefined` — Title of the language category.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `title: string` — Title of the language category.
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2816,10 +3048,13 @@ Selector: `[eclSplashPageLanguageContainer]`
 Description: Component representing a container for language categories on the splash page. Wraps grouped language links with an optional title.
 
 Inputs:
-- `title: string = undefined` — Title of the language container group.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `title: string` — Title of the language container group.
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2832,13 +3067,16 @@ Selector: `a[eclSplashPageLanguageLink]`
 Description: Component representing a link to a language version on the splash page. Displays the name of the language based on the provided language code.
 
 Inputs:
-- `lang: string = undefined` — Language code used to determine and display the language label. Example: 'en', 'fr', 'de'
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `lang: string` — Language code used to determine and display the language label. Example: 'en', 'fr', 'de'
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
-- `langLabel: string` — Label of the language resolved from the provided lang input.
+- `langLabel: unknown = computed<string>(() => { const lang = this.lang(); return lang ? EuiEuLanguages.getLanguageByCode(lang)?.label : undefined; })` — Label of the language resolved from the provided lang input.
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2856,9 +3094,12 @@ Inputs:
 - `hasAnchor: boolean = false`
 - `header: string`
 - `spotlightTitle: string = ''`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `spotlightLink: unknown = contentChild(EclSpotlightLinkComponent)`
@@ -2874,9 +3115,12 @@ Selector: `a[eclSpotlightLink]`
 Description: Component representing an anchor element, within the ecl-spotligh, based on the ECL design system. Serves as a container for structured content such as images and titles.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `copyright: unknown = signal<string>('')`
@@ -2894,12 +3138,15 @@ Selector: `ecl-sticky-container`
 Description: This is a component, that has fixed position on the screen. It is a wrapper for other components, when their position needs to be fixed. For example it is used in the 'ecl-inpage-navigation'.
 
 Inputs:
-- `isEnabled: boolean = true` — This property gives the option to disable ti default behaviour, when value os 'false'.
-- `marginBottom: number = 0` — Sets the 'botom' style property.
+- `isEnabled: boolean = true` — Gives the option to disable the default sticky behaviour when the value is 'false'.
+- `marginBottom: number = 0` — Sets the 'bottom' style property.
 - `marginTop: number = 0` — Sets the 'top' style property.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2919,12 +3166,13 @@ Inputs:
 - `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`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `selectionChange: EclStoryCardSelectionEvent` — Emitted when the active grid item changes.
+- `class: string = ''`
 
 Properties:
 - `cssClasses: unknown = computed(() => [ super.getCssClasses('ecl-story-card'), this.eclDescription() ? 'ecl-story-card--has-description' : '', this.variant() === 'testimonial' ? 'ecl-…`
@@ -2947,9 +3195,12 @@ Inputs:
 - `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`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `index: unknown = signal(0)` — Index of this panel. Set by parent.
@@ -2972,13 +3223,14 @@ Description: Component for a single story card grid item (tab). Applied to eleme
 
 Inputs:
 - `gridTitle: string = ''` — Short title displayed in the accordion tab button.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `itemClick: number` — Emitted when the item's button is clicked.
 - `loadingBarAnimationEnd: void` — Emitted when the loading bar animation ends.
+- `class: string = ''`
 
 Properties:
 - `cssClasses: unknown = computed(() => [ super.getCssClasses('ecl-story-card__grid-item'), this.isExpanded() ? 'ecl-story-card__grid-item--expanded' : '', ].join(' ').trim())`
@@ -3000,26 +3252,24 @@ Selector: `div[eclTab]`
 Description: Represents a single tab inside the ECL Tabs component. Manages its label, state (active, hidden), and interaction events like click or keydown.
 
 Inputs:
-- `anchorExtraClasses: string = undefined` — Extra classes to be added to the anchor tag.
+- `anchorExtraClasses: string` — Extra classes to be added to the anchor tag.
 - `id: string` — Unique identifier for the tab.
 - `isActive: boolean = false` — Marks the tab as active.
 - `isHidden: boolean = false` — Hides the tab when true by applying the ecl-tabs\_\_item--hidden CSS class.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
-- `keydownTab: EventEmitter = new EventEmitter<Event>()` — Emits when a keydown event occurs on the tab.
-- `selectTab: EventEmitter = new EventEmitter<EclTabSelectEvent>()` — Emits when the tab is selected via click.
 - `isHidden: boolean = false` — Hides the tab when true by applying the ecl-tabs\_\_item--hidden CSS class.
+- `keydownTab: Event` — Emits when a keydown event occurs on the tab.
+- `selectTab: EclTabSelectEvent` — Emits when the tab is selected via click.
+- `class: string = ''`
 
 Properties:
 - `_isActive: unknown = signal(false)`
 - `contentTemplate: unknown = viewChild<TemplateRef<any>>('content')` — Reference to the tab content template.
-- `finalId: unknown = computed(() => this.id() ?? this.generatedId())`
-- `hrefTabindex: unknown = computed(() => this._isActive() ? 0 : -1)` — The tab index value for the tab's link.
-- `label: unknown = contentChild(EclTabLabelComponent)` — Reference to the projected tab label component.
-- `link: unknown = viewChild(EclLinkDirective)` — Reference to the internal link directive used in the tab.
+- `finalId: unknown = computed(() => this.id() ?? this.generatedId())` — The computed id used across the tab's DOM hooks.
 - `tabLabel: string = ''` — Contains the inner HTML of the tab label.
 
 Methods:
@@ -3027,8 +3277,6 @@ Methods:
 - `getWidth(): number` — Returns the width of the tab element in pixels. The measurement is cached after the first call.
 - `onBlur(): void` — Calls the blur method on the inner link directive.
 - `onFocus(): void` — Calls the focus method on the inner link directive.
-- `onKeydown(event: Event): void` — Handles a keydown event on the tab and emits the keydownTab event.
-- `onTabClick(): void` — Handles a click event on the tab and emits the selectTab event.
 - `getCssClasses(rootClass: string): string`
 
 ### EclTabLabelComponent
@@ -3039,9 +3287,12 @@ Selector: `ecl-tab-label`
 Description: Component representing a tab label within ECL Tabs. Used as a container for the tab's visual label content.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `el: unknown = inject(ElementRef)`
@@ -3057,9 +3308,12 @@ Selector: `button[eclTableSortButton]`
 Description: Sort button component used inside sortable table headers. Applies ECL styling for table sort arrows and provides accessibility label for screen readers.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `ariaLabel: string = 'Sort table'` — Accessibility label describing the button's function. This value is bound to the aria-label attribute.
@@ -3077,46 +3331,15 @@ Description: ECL Tabs component for displaying tabbed content and managing tab s
 
 Inputs:
 - `bodyClass: string = 'ecl-u-mt-s'` — Class applied to the tab body container.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `tabSelect: EclTabSelectEvent` — Emits an event when a tab is selected.
+- `class: string = ''`
 
-Properties:
-- `autoInitialized: string = 'true'` — Marks the component as initialized, enabling ECL CSS that depends on this attribute.
-- `btnNext: unknown = viewChild<EclButtonComponent>('btnNext')` — Reference to the scroll next button.
-- `btnPrev: unknown = viewChild<EclButtonComponent>('btnPrev')` — Reference to the scroll previous button.
-- `dropdownList: unknown = viewChild<ElementRef>('dropdownList')` — Reference to the dropdown list containing overflowed tabs.
-- `hasClass: unknown = !this.isUsingOldSelector` — Adds ecl-tabs class to the host if not using the deprecated selector.
-- `index: number = 0` — Index of the active tab.
-- `isDropdownExpanded: unknown = signal(false)` — Indicates whether the dropdown is expanded.
-- `isMobileBreakpoint: unknown = false` — Indicates whether the mobile breakpoint is active.
-- `isScrollNextBtnShow: unknown = signal(false)` — Indicates whether the scroll next button is shown.
-- `isScrollPrevBtnShow: unknown = signal(false)` — Indicates whether the scroll previous button is shown.
-- `listTabs: EclTabComponent[] = []` — Tabs displayed in the visible list.
-- `moreButton: unknown = viewChild<EclButtonComponent>('moreButton')` — Reference to the "more" button.
-- `moreItem: unknown = viewChild<ElementRef>('moreItem')` — Reference to the "more" item container in the tab list.
-- `styleTransform: string = 'translate3d(0px, 0px, 0px)'` — CSS transform applied to the scrollable tab list.
-- `tabs: unknown = contentChildren(forwardRef(() => EclTabComponent))` — All projected tabs inside the component.
-- `tabsList: unknown = viewChild<ElementRef>('tabsList')` — Reference to the visible tab list container.
-
-Methods:
-- `getHiddenTabsCount(): number` — Returns the number of tabs hidden in dropdown.
-- `getTabLabel(index: number): string` — Returns the label of the tab at the specified index.
-- `getTransitionDuration(): string` — Returns the duration of the transition animation.
-- `onClick(target: unknown): void`
-- `onDropdownToggle(): void` — Toggles the dropdown visibility.
-- `onMoreButtonFocus(): void`
-- `onScrollNext(): void` — Scrolls the tab list to the right.
-- `onScrollPrev(): void` — Scrolls the tab list to the left.
-- `onTabKeydown(event: Event, tab: EclTabComponent): void` — Handles all supported keyboard events for a tab.
-- `onTabKeydownArrowLeft(index: number): void` — Handles left arrow key navigation.
-- `onTabKeydownArrowRight(index: number): void` — Handles right arrow key navigation.
-- `onTabKeydownEnd(): void` — Focuses the last tab in the list.
-- `onTabKeydownHome(): void` — Focuses the first tab in the list.
-- `onTabSelect(tab: EclTabComponent): void` — Handles tab selection.
+Methods:
 - `getCssClasses(rootClass: string): string`
 
 ### EclTagComponent
@@ -3127,12 +3350,13 @@ Selector: `ecl-tag, [eclTag]`
 Inputs:
 - `isWrapped: boolean = true` — Whether the tag content should be allowed to wrap onto multiple lines. Set to false to force single-line display (adds ecl-tag--nowrap class). Defaults to true.
 - `variant: 'removable' = undefined` — Defines the variant of the tag. Currently only 'removable' is supported.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `remove: EclTagRemoveEvent` — Event emitted when the tag is removed. Can be prevented by calling preventDefault() on the emitted event.
+- `class: string = ''`
 
 Properties:
 - `isVisible: unknown = true`
@@ -3152,9 +3376,12 @@ Description: A media container is used to display media items (video, audio, ima
 Inputs:
 - `mediaPosition: "left" | "right" = 'right'`
 - `variant: "default" | "primary" = 'default'`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3165,9 +3392,12 @@ File: `packages/ecl/components/ecl-timeline/ecl-timeline.component.ts`
 Selector: `ecl-timeline, ol[eclTimeline]`
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `isExpanded: boolean | null = null`
@@ -3190,13 +3420,14 @@ Inputs:
 - `isToggler: boolean = false` — Whether the item is a toggler (e.g. expands/collapses related items). Adds the ecl-timeline\_\_item--toggle CSS class when true.
 - `isTogglerExpanded: boolean = false` — Indicates whether the toggler is initially expanded. Used for toggler-type items.
 - `toggleGroup: string = undefined` — Name of the toggle group that this item belongs to. Used to coordinate collapsing/expanding related items.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `toggle: EventEmitter = new EventEmitter<EclTimelineItemToggleEvent>()` — Event emitted when the toggler is clicked. Consumers can call preventDefault() on the event to cancel toggle behavior.
 - `isTogglerExpanded: boolean = false` — Indicates whether the toggler is initially expanded. Used for toggler-type items.
+- `class: string = ''`
 
 Properties:
 - `eclLink: unknown = contentChild(forwardRef(() => EclLinkDirective))` — Reference to a projected ECL link, used for setting focus after toggle.
@@ -3217,12 +3448,13 @@ Selector: `ecl-timeline-item-toggler, li[eclTimelineItemToggler]`
 Description: Component representing a toggler inside a timeline item. Emits a toggle event when clicked.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `toggle: EventEmitter<void> = new EventEmitter()` — Event emitted when the toggler is activated (clicked). Used to trigger expand/collapse behavior in the parent timeline item.
+- `class: string = ''`
 
 Methods:
 - `onTogglerClick(): void` — Handles click events on the toggler element and emits the toggle event.
@@ -3312,9 +3544,12 @@ Selector: `[eclBannerDescription]`
 Description: Directive for the main banner description container.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `className: string = 'ecl-banner__description'`
@@ -3330,9 +3565,12 @@ Selector: `[eclBannerDescriptionLink]`
 Description: Directive for a link inside the banner description. Adds link classes and marks the link as standalone.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `className: string = 'ecl-link ecl-banner__description-link'`
@@ -3348,9 +3586,12 @@ Selector: `[eclBannerDescriptionText]`
 Description: Directive for the textual content inside the banner description.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `className: string = 'ecl-banner__description-text'`
@@ -3367,9 +3608,12 @@ Description: Directive applied to the element inside the banner. Enables class b
 
 Inputs:
 - `eclImageAnchor: 'center' | 'top left' | 'bottom right' | '20% 20%'` — Sets the image anchor point via the --ecl-image-anchor CSS custom property. Accepts values 'center', 'top left', 'bottom right', '20% 20%'.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `cssAnchor: unknown = computed(() => { const value = this.eclImageAnchor(); return value || null; })`
@@ -3386,9 +3630,12 @@ Selector: `picture[eclBannerPicture]`
 Description: Directive applied to the element within the banner. Adds the appropriate classes for styling the banner picture.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3401,9 +3648,12 @@ Selector: `[eclBannerTitle]`
 Description: Directive applied to the banner title container element. Adds appropriate styling class to the host element.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `className: string = 'ecl-banner__title'`
@@ -3419,9 +3669,12 @@ Selector: `[eclBannerTitleLink]`
 Description: Directive applied to the link element within the banner title. Adds link classes and marks the link as standalone.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `className: string = 'ecl-link ecl-banner__title-link'`
@@ -3437,9 +3690,12 @@ Selector: `[eclBannerTitleText]`
 Description: Directive applied to the text element within the banner title. Adds appropriate styling class to the host element.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `className: string = 'ecl-banner__title-text'`
@@ -3455,9 +3711,12 @@ Selector: `video[eclBannerVideo]`
 Description: Directive applied to the video element used in the banner. Adds appropriate styling classes to the host element.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `el: unknown = inject(ElementRef)`
@@ -3473,9 +3732,12 @@ Selector: `[eclBase]`
 Standalone: yes
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3488,9 +3750,12 @@ Selector: `img[eclBlockquoteImage]`
 Description: Directive for the image inside the ECL Blockquote. Automatically applies the ecl-blockquote\_\_image CSS class.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3503,9 +3768,12 @@ Selector: `picture[eclBlockquotePicture]`
 Description: Directive for the picture element inside the ECL Blockquote. Automatically applies the ecl-picture and ecl-blockquote\_\_picture CSS classes.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3518,9 +3786,12 @@ Selector: `[eclBreadcrumbContainer]`
 Description: Used to wrap breadcrumb segments inside the breadcrumb component.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `hasClass: unknown = true` — Adds breadcrumb container CSS class to the host element.
@@ -3546,9 +3817,12 @@ Selector: `[eclButtonLabel]`
 Description: Directive for labeling content inside the ECL Button. Automatically applies the ecl-button\_\_label CSS class.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3561,9 +3835,12 @@ Selector: `img[eclCardImage]`
 Description: Directive for the image element used in ECL Card. Applies the ECL-specific image class for card usage.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `el: unknown = inject(ElementRef)`
@@ -3580,9 +3857,12 @@ Description: Directive for the picture element used in ECL Card. Applies require
 
 Inputs:
 - `hasZoom: boolean = false` — When true, adds the ecl-picture--zoom class to enable zoom styling.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3598,9 +3878,12 @@ Inputs:
 - `isDisabled: boolean = false` — Indicates whether the checkbox is disabled.
 - `isInvalid: boolean = false` — Indicates whether the checkbox is in an invalid state.
 - `isSingle: boolean = false` — Indicates whether the checkbox is rendered as a single (standalone) item.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclCheckboxHelpComponent: unknown = contentChild(forwardRef(() => EclCheckboxHelpComponent))` — Child help component projected into the checkbox.
@@ -3619,9 +3902,12 @@ Selector: `input[eclCheckboxInput]`
 Description: Directive that decorates the native checkbox input with ECL styles and syncs validation state.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclCheckbox: unknown = inject(EclCheckboxDirective)`
@@ -3636,12 +3922,13 @@ Selector: `[eclClickOutside]`
 Standalone: yes
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `eclClickOutside: void`
+- `class: string = ''`
 
 Methods:
 - `onClick(target: unknown): void`
@@ -3653,9 +3940,12 @@ File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-pa
 Selector: `[eclContainer]`
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3668,9 +3958,12 @@ Selector: `[eclContentBlockDescription]`
 Description: Directive for the description section of the content block.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3683,9 +3976,12 @@ Selector: `[eclContentBlockLabel]`
 Description: Directive representing a single label inside a content block.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3698,9 +3994,12 @@ Selector: `[eclContentBlockLabels]`
 Description: Directive for the container that wraps multiple labels in a content block.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3713,9 +4012,12 @@ Selector: `[eclContentBlockLink]`
 Description: Directive for a single link inside a content block.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3728,9 +4030,12 @@ Selector: `[eclContentBlockLinksContainer]`
 Description: Directive for the container that wraps link elements.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3743,9 +4048,12 @@ Selector: `[eclContentBlockLinks]`
 Description: Directive for the list of links inside a content block.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3758,9 +4066,12 @@ Selector: `[eclContentBlockListContainer]`
 Description: Directive for the container holding a list inside a content block.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3773,9 +4084,12 @@ Selector: `[eclContentBlockList]`
 Description: Directive for a list element inside a content block.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3788,9 +4102,12 @@ Selector: `[eclContentBlockPrimaryMeta]`
 Description: Directive for a single primary metadata item in a content block.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3803,9 +4120,12 @@ Selector: `[eclContentBlockPrimaryMetas]`
 Description: Directive for the primary metadata container in a content block.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3818,9 +4138,12 @@ Selector: `[eclContentBlockSecondaryMeta]`
 Description: Directive for a single secondary metadata item in a content block.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3833,9 +4156,12 @@ Selector: `[eclContentBlockSecondaryMetaIcon]`
 Description: Directive for the icon element of a secondary metadata item.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3848,9 +4174,12 @@ Selector: `[eclContentBlockSecondaryMetaLabel]`
 Description: Directive for the label element of a secondary metadata item.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3864,9 +4193,12 @@ Description: Directive for the secondary metadata container in a content block.
 
 Inputs:
 - `isHorizontal: boolean = false`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3879,9 +4211,12 @@ Selector: `[eclContentBlockTag]`
 Description: Directive for a single tag item inside a content block.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3894,9 +4229,12 @@ Selector: `[eclContentBlockTags]`
 Description: Directive for the container holding tags inside a content block.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -3909,9 +4247,12 @@ Selector: `[eclContentBlockTitle]`
 Description: Directive representing the title of a content block. Automatically applies the corresponding ECL class.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclLink: EclLinkDirective` — Optional child ECL link directive nested inside the title.
@@ -3927,9 +4268,12 @@ Selector: `[eclContentItemImage]`
 Description: Directive used for styling the inner image element inside the content item. Also used programmatically for interaction bindings.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `el: unknown = inject(ElementRef)`
@@ -3948,9 +4292,12 @@ Inputs:
 - `hasZoom: boolean = false` — If true, enables a zoom effect on hover.
 - `position: "left" | "right" | "top" = 'left'` — Defines the position of the picture relative to the content. Accepted values: 'left' \| 'right' \| 'top' Default is 'left'.
 - `size: "small" | "large" = 'large'` — Controls the size of the picture. Default is 'large'. Accepted values: 'small' \| 'large'
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4012,9 +4359,12 @@ Selector: `[eclDescriptionListDefinitionItem]`
 Description: Directive representing a single item in an ECL description list definition. Applies the appropriate styling classes and allows visibility control for "see all" behavior.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `isHidden: unknown = signal(false)` — Internal state used to hide the item when exceeding the visible limit.
@@ -4031,9 +4381,12 @@ Selector: `[eclDescriptionListDefinitionList]`
 Description: Directive representing a container for definition list items within an ECL description list. Applies the ECL-specific class for the list wrapper.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4048,9 +4401,12 @@ Description: Directive for a description list using ECL styles. Supports horizon
 Inputs:
 - `isHorizontal: boolean = false` — Enables horizontal layout.
 - `maxVisibleItems: number = 0` — Maximum number of visible items before collapsing. Applied to nested eclDescriptionListDefinition components.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclListItems: unknown = contentChildren(EclDescriptionListDefinitionComponent)`
@@ -4066,9 +4422,12 @@ Selector: `[eclDescriptionListTerm]`
 Description: Directive representing a term within an ECL description list.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `cmpClass: unknown = true` — Applies the ECL class for description list terms.
@@ -4084,9 +4443,12 @@ Selector: `hr[eclDivider]`
 Description: Directive that applies ECL styling for horizontal separators ( \<hr\> elements). Adds the ecl-separator CSS class to the host element.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4099,9 +4461,12 @@ Selector: `div[eclFactFiguresDescription]`
 Description: Directive, representing the description text of a fact or figures section. Typically used to provide contextual or supporting information.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4136,9 +4501,12 @@ Description: Applies specific additional class for the eclLink directive, used i
 
 Inputs:
 - `ariaDescribedBy: string | null`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `className: unknown = true`
@@ -4153,9 +4521,12 @@ Selector: `[eclFeaturedMediaAnchor]`
 
 Inputs:
 - `eclFeaturedMediaAnchor: 'left' | 'right' | '20%' | 'center' | undefined`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `cssAnchor: unknown = computed(() => { const value = this.eclFeaturedMediaAnchor(); if (!value || value === 'center') { return null; } return value; })`
@@ -4181,9 +4552,12 @@ Selector: `[eclFeedbackMessage]`
 Description: Directive that renders a feedback message following the ECL design system. It automatically styles its content and nested icon components accordingly. Should be applied to a container element that wraps a feedback message.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclIconComponents: unknown = contentChildren<EclIconComponent>(forwardRef(() => EclIconComponent))` — Queries all nested EclIconComponent instances inside the host element. These icons will receive the ecl-feedback-message\_\_icon styling class.
@@ -4199,9 +4573,12 @@ Selector: `[eclFileDownload]`
 Description: Directive to apply the correct styling class for a standard file download link.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4214,9 +4591,12 @@ Selector: `img[eclFileImage]`
 Description: Directive to style an element inside an ECL file component. Adds the ECL-specific image class.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4229,9 +4609,12 @@ 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`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4244,9 +4627,12 @@ Selector: `picture[eclFilePicture]`
 Description: Directive to style a element used in an ECL file component. Adds ECL-specific picture and file picture classes.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4259,9 +4645,12 @@ Selector: `[eclFilePreview]`
 Description: Directive to style a file preview link. Adds ECL link classes for standalone branded appearance.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4274,9 +4663,12 @@ Selector: `[eclFileTitle]`
 Description: Directive to style a title element in an ECL file component.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4289,9 +4681,12 @@ Selector: `[eclFileTranslationDownload]`
 Description: Directive to apply the correct styling class for a translation download link inside a file component.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4309,12 +4704,13 @@ Inputs:
 - `isInvalid: boolean = false` — Marks the component as invalid (if not using Angular form validation).
 - `multiple: boolean = undefined` — Allows selecting multiple files.
 - `variant: string = 'default'` — Variant of the component's appearance. Currently unused. Default: 'default' .
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `filesSelected: EclFileUploadFileSelectedEvent` — Event emitted when files are selected.
+- `class: string = ''`
 
 Properties:
 - `type: string = 'file'` — Host binding to define input type as 'file'.
@@ -4344,9 +4740,12 @@ Description: Manages image/video for the thumbnail in the gallery. Adding some s
 Inputs:
 - `hasZoom: boolean = false` — When this is true, on mousehover the image will be zoomed.
 - `poster: string = undefined` — To be used when there is no thimbnail added. Instead the 'poster' attribute in the element is used
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `isVideo: unknown = false`
@@ -4364,9 +4763,12 @@ Selector: `picture[eclGalleryPicture]`
 Description: Adds styling and functionality for gallery picture component.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `img: EclGalleryPictureImage = {}`
@@ -4385,9 +4787,12 @@ Description: Applies classes for the gallery thumbnail.
 
 Inputs:
 - `hasZoom: boolean = false`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4401,9 +4806,12 @@ Description: Directive for rendering a help block element following the ECL desi
 
 Inputs:
 - `isDisabled: boolean = false` — Indicates whether the help block is in a disabled state. When true, the ecl-help-block--disabled class is added.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4425,9 +4833,12 @@ Selector: `[eclHidden]`
 
 Inputs:
 - `eclHidden: boolean = true`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4488,9 +4899,12 @@ Selector: `ul[eclInpageNavigationList]`
 Description: The parent list component, that contains navigation items links.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `el: unknown = inject(ElementRef)`
@@ -4510,9 +4924,12 @@ Description: Directive for applying ECL label styles. Supports multiple visual v
 
 Inputs:
 - `variant: "low" | "medium" | "high" | "highlight" = 'low'` — Defines the visual variant of the label. 'low' – default styling 'medium' – medium emphasis 'high' – high emphasis 'highlight' – special highlight 'low'
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4564,9 +4981,12 @@ Inputs:
 - `isInverted: boolean = false` — Property to style the component as 'inverted' (with dark background). Can be used alone or with 'standalone' variant.
 - `isNoVisited: boolean = false` (deprecated: - will be removed in v21. Deprecated on ECL side.)
 - `variant: "standalone" | "primary" | "secondary" | "secondary-neutral" | "primary-neutral" | "primary-highlight"` — With 'variant' property user can add some more specific styling to the component.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclIconComponents: unknown = contentChildren(forwardRef(() => EclIconComponent), { descendants: true })`
@@ -4593,9 +5013,12 @@ File: `packages/ecl/components/ecl-link/ecl-link-label.directive.ts`
 Selector: `[eclLinkLabel]`
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4608,9 +5031,12 @@ Selector: `[eclListIllustrationIcon]`
 Description: Directive representing an icon within an ECL illustration list item. Applies the correct ECL class for list item icons.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `className: unknown = true` — Applies the ECL class for illustration item icons.
@@ -4627,9 +5053,12 @@ Description: Directive applied to \<img\> elements within ECL list illustrations
 
 Inputs:
 - `size: "s" | "m" | "l" = 'm'` — Defines the size variant of the image. Possible values: 's' , 'm' , 'l' .
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `isSquare: unknown = false` — If true, image is styled with square dimensions.
@@ -4646,9 +5075,12 @@ Description: Directive applied to \<picture\> elements within ECL list illustrat
 
 Inputs:
 - `isSquare: boolean = false` — If true, image is styled with square dimensions.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclIllustrationImage: unknown = contentChild.required(forwardRef(() => EclListIllustrationImageDirective))`
@@ -4674,9 +5106,12 @@ Selector: `[eclLoadingIndicatorOverlay]`
 Description: Directive that adds an overlay layer to an ECL loading indicator. Automatically applies the ECL spinner overlay classes.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4689,9 +5124,12 @@ Selector: `figcaption[eclMediaContainerCaption]`
 Description: Adds styling and attributes to the media container caption element.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4704,9 +5142,12 @@ Selector: `footer[eclMediaContainerCredit]`
 Description: Adds styling and attributes to the media container credit element.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4721,9 +5162,12 @@ Description: Adds styling and attributes to the iframe element.
 Inputs:
 - `height = undefined`
 - `width = undefined`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `hasCustomRatio: unknown = false`
@@ -4740,9 +5184,12 @@ Selector: `[eclMediaContainerItemAudioDescription]`
 Description: Adds styling to the media container description.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4756,9 +5203,12 @@ Description: Adds styling and functionality to the media container item /image.
 
 Inputs:
 - `ratio: string = undefined`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `contentIframe: unknown = contentChild(EclMediaContainerIframeDirective)`
@@ -4777,9 +5227,12 @@ Selector: `picture[eclMediaContainerPicture]`
 Description: Applies styles for the picture element.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4792,9 +5245,12 @@ Selector: `div[eclMegaMenuContainer]`
 Description: Directive that adds specific class to the mega-menu container.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4807,9 +5263,12 @@ Selector: `[eclMegaMenuFeaturedImage]`
 Description: Directive that adds specific class to the mega-menu featured image.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4822,9 +5281,12 @@ Selector: `[eclMegaMenuFeaturedList]`
 Description: Directive that adds specific class to the mega-menu featured list.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4835,9 +5297,12 @@ File: `packages/ecl/components/ecl-mega-menu/directives/ecl-mega-menu-featured-l
 Selector: `[eclMegaMenuFeaturedListItemDescription]`
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4852,9 +5317,12 @@ Description: Directive that adds specific class to a mega-menu featured list ite
 Inputs:
 - `isCombo: boolean = false`
 - `isImageOnly: boolean = false`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getEclMegaMenuFeaturedItemHeight(): number`
@@ -4868,9 +5336,12 @@ Selector: `[eclMegaMenuFeaturedPicture]`
 Description: Directive that adds specific class to the mega-menu featured picture.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4883,9 +5354,12 @@ Selector: `ul[eclMegaMenuList]`
 Description: Directive that adds specific class to the mega-menu list.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4898,9 +5372,12 @@ Selector: `li[eclMegaMenuSpacer]`
 Description: Directive that adds specific class to the mega-menu spacer.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4913,12 +5390,13 @@ Selector: `ul[eclMegaMenuSublist]`
 Description: Directive that adds specific classes and functionality to the mega-menu sublist.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `megaMenuSubItemClicked: EventEmitter = new EventEmitter()`
+- `class: string = ''`
 
 Properties:
 - `el: unknown = inject(ElementRef)`
@@ -4940,9 +5418,12 @@ Selector: `[eclModalBodyFixedContent]`
 Description: Directive for styling fixed content inside the modal body. Applies the appropriate CSS class to mark the element as fixed inside the modal body.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `className: unknown = true` — Applies the ecl-modal\_\_body-fixed class to the host element.
@@ -4960,12 +5441,13 @@ Description: Directive that allows an element to close the modal on click. Can e
 Inputs:
 - `eclModalClose: T = undefined` — Optional result value to emit when modal is closed.
 - `eclModalRole: 'confirm' | 'cancel' | string` — Optional role associated with the modal close action (e.g., confirm, cancel).
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `modalClose` — Event emitted when the element is clicked and the modal should be closed.
+- `class: string = ''`
 
 Methods:
 - `onClick(): void` — Handles click events and emits the modalClose event.
@@ -4980,9 +5462,12 @@ Description: Directive used to trigger opening of a target ECL modal on click.
 
 Inputs:
 - `eclModalTriggerFor: EclModalComponent<T>` — Reference to the modal component that should be opened on click.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `onClick(): void` — Handles click event and opens the target modal.
@@ -5000,9 +5485,12 @@ Inputs:
 - `label: string = undefined` — Label displayed for the option.
 - `selected: boolean = false` — Indicates that the option is selected.
 - `value: string = undefined` — Value assigned to the option.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclOptionItems: unknown = contentChildren(forwardRef(() => EclMultiselectOptionDirective))` — Nested option directives (used for optgroups).
@@ -5019,9 +5507,12 @@ Selector: `img[eclNavigationListImage]`
 Description: This directive adds specific class to the image element, used in 'ecl-navigation-list-item'.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5034,9 +5525,12 @@ Selector: `picture[eclNavigationListPicture]`
 Description: This directive adds specific class to the picture element, used in 'ecl-navigation-list-item'.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5049,9 +5543,12 @@ Selector: `[eclNewsTickerIcon]`
 Description: Directive to mark and style the icon inside a news ticker item.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5085,9 +5582,12 @@ Selector: `[eclNotificationTitle]`
 Description: Directive applied to a notification title element. Adds the appropriate ECL class for styling the notification title.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5100,9 +5600,12 @@ Selector: `[eclOrderedList]`
 Description: Directive representing an ordered list using ECL styles.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `cmpClass: unknown = true` — Applies the ECL class for ordered lists.
@@ -5118,9 +5621,12 @@ Selector: `[eclOrderedListItem]`
 Description: Directive for a single item within an ECL ordered list.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `cmpClass: unknown = true` — Applies the ECL class for ordered list items.
@@ -5136,9 +5642,12 @@ Selector: `[eclPageHeaderBackgroundImage]`
 Description: Styles the background image inside the page header.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5151,9 +5660,12 @@ Selector: `[eclPageHeaderBackgroundPicture]`
 Description: Styles the background picture inside the page header.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5164,9 +5676,12 @@ File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-pa
 Selector: `[eclPageHeaderContainer]`
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5179,9 +5694,12 @@ Selector: `p[eclPageHeaderDescription]`
 Description: Styles the text description in the page header.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5194,9 +5712,12 @@ Selector: `[eclPageHeaderDescriptionPicture]`
 Description: Styles a picture used in the page header description.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5209,9 +5730,12 @@ Selector: `[eclPageHeaderDescriptionThumbnail], img[eclPageHeaderDescriptionImag
 Description: Styles a thumbnail or image in the page header description.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5224,9 +5748,12 @@ Selector: `[eclPageHeaderExpandableHeader]`
 Description: Styles the header section for the page header expandable component.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5239,9 +5766,12 @@ Selector: `[eclPageHeaderInfo]`
 Description: Styles the info section in the page header.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5254,9 +5784,12 @@ Selector: `[eclPageHeaderMeta]`
 Description: Styles the meta section in the page header.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5269,9 +5802,12 @@ Selector: `[eclPageHeaderMetaItem]`
 Description: Styles individual meta items in the page header.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclIcon: unknown = contentChild(EclIconComponent)`
@@ -5288,9 +5824,12 @@ Description: Styles the title section in the page header.
 
 Inputs:
 - `isTitleVisible: boolean = true` — Whether the title is visible. true
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5308,9 +5847,12 @@ Selector: `[eclPaginationList]`
 Description: Directive to apply ECL styles to the pagination list element. Adds the ecl-pagination\_\_list class to the host element.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5323,9 +5865,12 @@ Selector: `[eclPopoverContent]`
 Description: Directive applied to the content section of an ecl-popover component. Responsible for applying the appropriate CSS class to the popover content container.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5338,12 +5883,13 @@ Selector: `[eclPopoverToggle]`
 Description: Directive used to toggle the visibility of an ecl-popover component. This directive emits a custom click event and manages accessibility attributes.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `click` — Event emitted when the toggle element is clicked with the left mouse button.
+- `class: string = ''`
 
 Properties:
 - `hostElementRef: unknown = inject(ElementRef)`
@@ -5374,9 +5920,12 @@ Inputs:
 - `isDisabled: boolean = false` — Consumer-provided disabled state, bound as an attribute on the host element.
 - `isInvalid: boolean = false` — Consumer-provided invalid state, bound as an attribute on the host element.
 - `isBinary: boolean = undefined` — Adds the ecl-radio--binary class when true.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclRadioHelpComponent: unknown = contentChild(forwardRef(() => EclRadioHelpComponent))` — Reference to the projected EclRadioHelpComponent, if present. Used to synchronize the disabled state with the help text.
@@ -5396,9 +5945,12 @@ Selector: `input[eclRadioInput]`
 Description: Directive that decorates native elements to be styled as ECL radio inputs. Applies the proper ECL CSS classes and integrates with Angular forms to reflect validation states (invalid, disabled) in the parent ECL radio directive. Should be used together with the eclRadio directive.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclRadio: unknown = inject(EclRadioDirective)`
@@ -5419,12 +5971,13 @@ Inputs:
 - `isInvalid: boolean = false` — Adds the ecl-range--invalid class when true.
 - `rangeValueId: string` — ID assigned to the projected ECL range value component.
 - `value: string` — Initial value for the range input when used standalone.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `rangeChange: EclRangeEvent` — Emits when the range value changes.
+- `class: string = ''`
 
 Methods:
 - `onInput(evt: InputEvent): void` — Handles native input events on the range element when not used with reactive forms.
@@ -5442,9 +5995,12 @@ Inputs:
 - `eclSize: "s" | "m" | "l" = 'm'` — Size of the select component.
 - `isInvalid: boolean = false` — Marks the select element as invalid.
 - `toggleLabel: string = undefined` — Accessible label for the toggle button.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5464,9 +6020,12 @@ Selector: `[eclSiteFooterColumn]`
 Description: Directive, that applies a specific class to a footer column.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5479,9 +6038,12 @@ Selector: `[eclSiteFooterCoownerItem]`
 Description: Directive, that applies a specific class to a list item ( ) in site footer's co-owner section. Also add classes for the eclLinks children of the list item.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclLinks: unknown = contentChildren(EclLinkDirective)`
@@ -5497,9 +6059,12 @@ Selector: `[eclSiteFooterCoownerList]`
 Description: Directive, that applies a specific class to a list ( ) in site footer's co-owner section.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclFooterCoownerListItems: unknown = contentChildren(forwardRef(() => EclSiteFooterCoownerItemDirective))`
@@ -5515,9 +6080,12 @@ Selector: `[eclSiteFooterDescription]`
 Description: Directive, that applies a specific class to footer description.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5530,9 +6098,12 @@ Selector: `[eclSiteFooterDescriptionName]`
 Description: Adds required class for the line that displays the manager/owner of the site.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5553,9 +6124,12 @@ Description: Directive, that applies specific classes to the list element in sit
 
 Inputs:
 - `isInline: boolean = undefined`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5568,9 +6142,12 @@ Selector: `[eclSiteFooterListItem]`
 Description: Directive, that applies specific classes to the list item element in site footer.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5604,9 +6181,12 @@ Selector: `[eclSiteFooterRow]`
 Description: Directive, that applies a specific class to a footer row.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5620,9 +6200,12 @@ Description: Directive, that applies specific classes to the section element in
 
 Inputs:
 - `variant: 'links' | 'contact' | 'about' | 'more' | 'related' | 'site-info' | string = ''`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5635,9 +6218,12 @@ Selector: `[eclSiteFooterSocialMedia]`
 Description: Directive, that applies a specific class to ecl-social-media-follow component in the footer.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5651,9 +6237,12 @@ Description: Directive, that applies a specific class for a title in ecl-site-fo
 
 Inputs:
 - `isSeparator: boolean = false`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5666,9 +6255,12 @@ Selector: `[eclSiteFooterTitleLink]`
 Description: Directive, that applies a specific class for the element in a title in ecl-site-footer component.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5681,9 +6273,12 @@ Selector: `[eclSiteHeaderCta]`
 Description: This directive is used, when we want to show call-to-action link in the site-header. Used in harmonised and standardised header variants.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5694,9 +6289,12 @@ File: `packages/ecl/components/ecl-site-header/custom-action/ecl-site-header-cus
 Selector: `div[eclSiteHeaderCustomActionContent]`
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5709,13 +6307,14 @@ Selector: `a[eclSiteHeaderCustomActionLink]`
 Inputs:
 - `href: string`
 - `routerLink: string`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
 - `customActionOverlayToggle: boolean`
 - `href: string`
+- `class: string = ''`
 
 Properties:
 - `isOverlayExpanded: boolean` — Whether the overlay is expanded. Set by the parent ecl-site-header-custom-action .
@@ -5732,9 +6331,12 @@ Selector: `div[eclSiteHeaderCustomActionTitle]`
 
 Inputs:
 - `id: string = 'custom-action-overlay-title'`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5747,9 +6349,12 @@ Selector: `[eclSiteHeaderImage]`
 Description: Adds some specific classes for element, when used in the site header logo.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `logoSize: string`
@@ -5765,9 +6370,12 @@ Selector: `[eclSiteHeaderLink]`
 Description: Adds some specific classes for element, when used in the site header logo.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5780,9 +6388,12 @@ Selector: `[eclSiteHeaderLoginDescription]`
 Description: This directive is used to add specific class for the login description element, within the login dropdown.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5795,9 +6406,12 @@ Selector: `[eclSiteHeaderLoginSeparator]`
 Description: This directive is used to add specific class for the horizontal line, that separates description from the 'Logout' link.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5810,9 +6424,12 @@ Selector: `[eclSiteHeaderPicture]`
 Description: Adds some specific classes for picture element, when used in the site header logo.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5840,9 +6457,12 @@ File: `packages/ecl/components/ecl-social-media-follow/ecl-social-media-follow-l
 Selector: `[eclSocialMediaFollowLink]`
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclIcon: unknown = contentChild(EclIconComponent)`
@@ -5858,12 +6478,12 @@ Selector: `[eclSplashPageLanguageItem]`
 Description: Directive that applies the splash page language item styling.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
-Properties:
-- `className: string = 'ecl-splash-page__language-item'` — Applies the ecl-splash-page\_\_language-item CSS class to the host element.
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5876,12 +6496,12 @@ Selector: `[eclSplashPageLanguageList]`
 Description: Directive that applies the splash page language list styling.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
-Properties:
-- `className: string = 'ecl-splash-page__language-list'` — Applies the ecl-splash-page\_\_language-list CSS class to the host element.
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5894,9 +6514,12 @@ Selector: `img[eclSplashPageLogoImage]`
 Description: Directive that applies styling to the splash page logo image.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5909,9 +6532,12 @@ Selector: `img[eclSplashPageLogoLink]`
 Description: Directive that styles an image acting as a link within the splash page.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5924,9 +6550,12 @@ Selector: `picture[eclSplashPagePicture]`
 Description: Directive that styles a \<picture\> element with splash page-specific ECL classes.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5939,12 +6568,12 @@ Selector: `img[eclSpotlightImage]`
 Description: Directive representing the image within spotlight component. Automatically applies the corresponding ECL class.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
-Properties:
-- `hasClass: unknown = true` — Adds the ECL CSS classes.
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5957,12 +6586,12 @@ Selector: `picture[eclSpotlightPicture]`
 Description: Directive representing the picture within a spotlight component. Automatically applies the corresponding ECL class.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
-Properties:
-- `classes: string = 'ecl-picture ecl-spotlight__picture'` — Adds the ECL CSS classes.
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5975,9 +6604,12 @@ 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`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -5990,9 +6622,12 @@ 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`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6005,9 +6640,12 @@ 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`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6017,10 +6655,15 @@ Methods:
 File: `packages/ecl/components/ecl-table/ecl-table.directive.ts`
 Selector: `[eclTableBody]`
 
+Description: Directive for applying ECL body styling to a table body element.
+
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6030,13 +6673,15 @@ Methods:
 File: `packages/ecl/components/ecl-table/ecl-table.directive.ts`
 Selector: `caption[eclTableCaption]`
 
+Description: Directive for applying styling to a table caption element.
+
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
-Properties:
-- `hasClass: unknown = true` — Applies the ecl-table\_\_caption class to the caption.
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6046,12 +6691,17 @@ Methods:
 File: `packages/ecl/components/ecl-table/ecl-table.directive.ts`
 Selector: `[eclTableCell]`
 
+Description: Directive for styling individual table cells in the ECL table.
+
 Inputs:
 - `eclTableCellHeader: string` — Provides a reference to the related table header. Sets the data-ecl-table-header attribute for accessibility or responsive behavior.
 - `isGroup: boolean = false` — If true , applies additional group styling to the cell.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6061,11 +6711,16 @@ Methods:
 File: `packages/ecl/components/ecl-table/ecl-table.directive.ts`
 Selector: `[eclTableCellGroup]`
 
+Description: Directive used to group multiple table cells under a shared header group.
+
 Inputs:
 - `eclTableCellGroup: string` — Sets the data-ecl-table-header-group attribute to link to a header group.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6079,14 +6734,15 @@ Description: Directive for styling and managing behavior of ECL tables. Applies
 
 Inputs:
 - `id: string` — The HTML ID attribute of the table. If not provided, a UUID is generated.
-- `isSimple: boolean = false` — Applies the "simple" table variant if true. Automatically enabled if no header is detected.
+- `isSimple: boolean = false` — Opts out of the enhanced mobile layout and applies the "simple" table variant by adding the ecl-table--simple class. This only affects narrow (mobile) viewports; on desktop both variants render as a standard table, so this input is effectively a no-op there. Default (enhanced): on mobile each row collapses into a stacked, card-like layout that uses the eclTableCellHeader value as the label for each cell. Simple: on mobile the table keeps its native structure and scrolls horizontally inside the responsive wrapper instead of collapsing. Automatically enabled if no header is detected, since the enhanced mobile layout has no header labels to project onto the cells.
 - `isZebra: boolean = false` — Applies zebra striping to the table rows by adding the ecl-table--zebra class if true.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
-- `sort: EventEmitter = new EventEmitter<EclSortTableEvent>()` — Emits an event when a column sort is triggered.
+- `sort: EclSortTableEvent` — Emits an event when a column sort is triggered.
+- `class: string = ''`
 
 Properties:
 - `eclTableHeaders: unknown = contentChildren(forwardRef(() => EclTableHeaderDirective), { descendants: true })` — List of header directives detected in the content.
@@ -6102,9 +6758,12 @@ Selector: `[eclTableHead]`
 Description: Directive applied to \<thead\> elements inside a table. Detects header changes and manages ARIA attributes.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `eclTableHeaders: unknown = contentChildren(forwardRef(() => EclTableHeaderDirective), { descendants: true })` — List of header directives under this head element.
@@ -6117,17 +6776,20 @@ Methods:
 File: `packages/ecl/components/ecl-table/ecl-table.directive.ts`
 Selector: `[eclTableHeader]`
 
+Description: Directive representing a single table header cell in an ECL table. Supports sorting functionality and accessibility attributes.
+
 Inputs:
-- `eclSortable: null = null` — Enables sorting on the header. Also sets the data-ecl-table-sort-toggle attribute. Acts as the unique identifier for the column when sorting.
+- `eclSortable: string = null` — Enables sorting on the header. Also sets the data-ecl-table-sort-toggle attribute. Acts as the unique identifier for the column when sorting.
 - `id: string` — HTML id attribute of the table header cell. If not provided, a UUID will be generated.
 - `scope: string = 'col'` — Scope of the table header. Default is col . Sets the scope attribute.
-- `sortButtonAriaLabel: string = undefined` — Aria-label for the sort button that will be injected into the header cell.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `sortButtonAriaLabel: string = undefined` — Aria-label for the sort button that will be injected into the header cell. When provided, the value is used verbatim: it is NOT translated and is NOT updated as the sort direction changes. The consumer is responsible for passing an already-localized string (e.g. \[sortButtonAriaLabel\]="'my.key' \| translate" ). When omitted, the directive manages the label internally and translates it via the ecl.table.SORT-LABEL.\* keys, updating it on each sort toggle.
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
 
 Outputs:
-- `sort: EventEmitter = new EventEmitter<EclSortTableEvent>()` — Emits an EclSortTableEvent when the header is clicked and sorting is triggered.
+- `sort: EclSortTableEvent` — Emits an EclSortTableEvent when the header is clicked and sorting is triggered.
+- `class: string = ''`
 
 Properties:
 - `sortOrder: SortOrder | null = null` — Current sort order of the column ( ascending , descending , or null ). This sets the aria-sort attribute used for accessibility.
@@ -6142,10 +6804,15 @@ Methods:
 File: `packages/ecl/components/ecl-table/ecl-table.directive.ts`
 Selector: `[eclTableResponsive]`
 
+Description: Directive for applying ECL responsive wrapper to a table container.
+
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6155,10 +6822,15 @@ Methods:
 File: `packages/ecl/components/ecl-table/ecl-table.directive.ts`
 Selector: `[eclTableRow]`
 
+Description: Directive for applying ECL row styling to a table row element.
+
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6171,9 +6843,12 @@ Selector: `[eclTagIconExternal]`
 Description: Directive to apply external icon styling inside an ECL tag. Adds specific CSS classes to render an "external" icon next to the tag content.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6186,9 +6861,12 @@ Selector: `[eclTagSet]`
 Description: Directive to style a container as a set of tags. Adds the ecl-tag-set class to the host element.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6201,9 +6879,12 @@ Selector: `[eclTagSetItem]`
 Description: Directive to mark an element as an individual item in a tag set. Adds the ecl-tag-set\_\_item class to the host element.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `hasClass: unknown = true` — Adds the ecl-tag-set\_\_item CSS class to the host element.
@@ -6221,9 +6902,12 @@ Description: Directive to be used with HTML component. Applies custom styles and
 Inputs:
 - `eclSize: string = 'm'` — Width of the component, can be 's', 'm' or 'l'. Default value is 'm'.
 - `isInvalid: boolean = false`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6239,9 +6923,12 @@ Inputs:
 - `eclSize: string = 'm'` — The size of the input width. Can be 's', 'm' or 'l'. Default value is 'm'.
 - `isInvalid: boolean = false`
 - `type: string = 'text'` — This directive should be used with the input type 'text'.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6299,9 +6986,12 @@ Selector: `[eclTimelineItemLabel]`
 Description: Directive that applies the ecl-timeline\_\_label class to an element. Used to mark the label section within a timeline item.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6314,9 +7004,12 @@ Selector: `[eclTimelineItemTitle]`
 Description: Directive that applies the ecl-timeline\_\_title class to an element. Used to mark the title section within a timeline item.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6329,9 +7022,12 @@ Selector: `[eclTimelineSet]`
 Description: Directive that applies the ecl-timeline-set class to an element.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `hasClass: unknown = true`
@@ -6364,9 +7060,12 @@ Description: Directive representing an unordered list using ECL styles. Supports
 Inputs:
 - `isDivider: boolean = false` — Adds a divider between list items.
 - `isNoMarker: boolean = false` — Removes markers from list items.
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `cmpClass: unknown = true` — Applies the ECL class for unordered lists.
@@ -6382,9 +7081,12 @@ Selector: `[eclUnorderedListItem]`
 Description: Directive for a single item within an ECL unordered list.
 
 Inputs:
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
+- `class: string = ''`
+- `e2eAttr: string`
+- `tabindex = undefined`
+
+Outputs:
+- `class: string = ''`
 
 Properties:
 - `cmpClass: unknown = true` — Applies the ECL class for unordered list items.