@eui/ecl 23.0.0-alpha.3 → 23.0.0-alpha.5

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-07-09T09:07:53.349Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-07-10T14:09:13.714Z, llm-md export.
 
 ## Modules
 
@@ -31,13 +31,13 @@ Inputs:
 - `calendarLocation: string` — Location of the event (e.g. "San Francisco, CA").
 - `calendarTime: string` — Time of the event (e.g. "2:00 PM - 4:00 PM").
 - `eclTitle: string` — Title displayed in the component.
-- `isFullWidth: boolean = false`
+- `isFullWidth: boolean = false` — Indicates whether the component should span the full width of its container.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
 
 Properties:
-- `hostClass: unknown = true` — Adds ecl-add-to-calendar class to the host element.
+- `hostClass: unknown = signal(true)` — Adds ecl-add-to-calendar class to the host element.
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -96,8 +96,8 @@ Outputs:
 - `languageDismiss: EclAppLanguageDismissEvent`
 
 Properties:
-- `eclSiteHeaderLanguage: EclSiteHeaderLanguageComponent`
-- `textDirection: string = 'ltr'` — Text direction, by default is 'ltr' - left-to-write. Can also be 'rtl' - right-to-left, which will make all components within to lign to the right, and apply some special styling and functionality.
+- `eclSiteHeaderLanguage: unknown = contentChild(EclSiteHeaderLanguageComponent)`
+- `textDirection: unknown = signal('ltr')` — Text direction, by default is 'ltr' - left-to-write. Can also be 'rtl' - right-to-left, which will make all components within to lign to the right, and apply some special styling and functionality.
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -110,16 +110,16 @@ Selector: `ecl-banner`
 Description: Component representing a banner, which can contain image, video and call-to-action (CTA) links. Allows customization of layout, alignment, and appearance through inputs.
 
 Inputs:
-- `boxBackground: "none" | "light" | "dark" | string = 'light'` — Defines the background color of the banner content box. Allowed values: 'none' \| 'light' \| 'dark'. Default: 'light'.
+- `boxBackground: 'none' | 'light' | 'dark' | string = 'light'` — Defines the background color of the banner content box. Allowed values: 'none' \| 'light' \| 'dark'. Default: 'light'.
 - `copyright: string = ''` — Sets the copyright text displayed in the banner.
-- `eclSize: "xs" | "s" | "m" | "l" | string = 'm'` — Defines the size of the banner. Affects its height-to-width aspect ratio. Allowed values: 'xs' \| 's' \| 'm' \| 'l'. Default: 'm'.
-- `fontColor: "light" | "dark" | string = 'dark'` — Defines the color of the font inside the banner content box. Allowed values: 'light' \| 'dark'. Default: 'dark'.
-- `fontSize: "s" | "m" | "l" | string = 'm'` — Defines the font size inside the banner content box. Allowed values: 'm' \| 'l'. Default: 'm'.
-- `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'.
+- `eclSize: 'xs' | 's' | 'm' | 'l' | string = 'm'` — Defines the size of the banner. Affects its height-to-width aspect ratio. Allowed values: 'xs' \| 's' \| 'm' \| 'l'. Default: 'm'.
+- `fontColor: 'light' | 'dark' | string = 'dark'` — Defines the color of the font inside the banner content box. Allowed values: 'light' \| 'dark'. Default: 'dark'.
+- `fontSize: 's' | 'm' | 'l' | string = 'm'` — Defines the font size inside the banner content box. Allowed values: 'm' \| 'l'. Default: 'm'.
 - `fontWeight: "light" | "bold" = 'light'`
 - `hasOverlay: boolean = false`
+- `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`
@@ -154,7 +154,7 @@ Change detection: `ChangeDetectionStrategy.OnPush`
 Description: Blockquote component based on the ECL design system. Displays quoted text with an optional author. Supports language awareness through the I18n service.
 
 Inputs:
-- `author: string` — Author name associated with the quoted content. If provided, it will be displayed below the blockquote.
+- `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`
@@ -293,7 +293,7 @@ Description: Component responsible for rendering a carousel (slideshow) with aut
 
 Inputs:
 - `aria-label: string | null = 'Carousel description here'` — Aria-label for screen readers to describe the carousel.
-- `isAutoplay: boolean` — Determines whether the carousel should autoplay.
+- `isAutoplay: boolean = undefined` — Determines whether the carousel should autoplay.
 - `playInterval: number = 5000` — Interval in milliseconds between automatic slide transitions.
 - `class: string`
 - `e2eAttr: any`
@@ -371,7 +371,7 @@ Selector: `ecl-category-filter`
 
 Inputs:
 - `aria-label: string | null = 'Category filter'` — Aria-label for the navigation role. Defaults to "Category filter".
-- `currentItemId: string` — ID of the currently selected item. When provided, the item with the matching ID will be marked as current and automatically expanded on initialization.
+- `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`
@@ -391,8 +391,8 @@ File: `packages/ecl/components/ecl-category-filter/ecl-category-filter-list/ecl-
 Selector: `ecl-category-filter-item`
 
 Inputs:
-- `href: string` — Link URL associated with this category filter item. If not provided, the item acts as a toggle only.
 - `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`
@@ -513,14 +513,14 @@ Selector: `time[eclDateBlock]`
 Description: Component used to display a formatted date in a styled time element. Designed for use within content components such as content blocks or items.
 
 Inputs:
-- `date: Date` — The date to be displayed. If not null, it's used to generate the datetime attribute and visual output.
-- `dateFormat: string = 'dd/M/yyyy'` — The format to be used when rendering the date string (Angular DatePipe format). Default is 'dd/M/yyyy' .
 - `datetime: string` — Sets the datetime attribute of the \<time\> element. If not provided, it is derived from date and dateFormat .
-- `day: string` — Explicit string for day part of the date (optional). Used when date is not set or overridden manually.
-- `month: string` — Explicit string for month part of the date (optional). Used when date is not set or overridden manually.
-- `monthTitle: string` — Explicit string used as an accessible or verbose label for the month (optional).
+- `date: Date = undefined` — The date to be displayed. If not null, it's used to generate the datetime attribute and visual output.
+- `dateFormat: string = 'dd/M/yyyy'` — The format to be used when rendering the date string (Angular DatePipe format). Default is 'dd/M/yyyy' .
+- `day: string = undefined` — Explicit string for day part of the date (optional). Used when date is not set or overridden manually.
+- `month: string = undefined` — Explicit string for month part of the date (optional). Used when date is not set or overridden manually.
+- `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` — Explicit string for year part of the date (optional). Used when date is not set or overridden manually.
+- `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`
@@ -562,14 +562,16 @@ Selector: `ecl-expandable`
 Description: Expandable component used to toggle visibility of additional content. It displays a toggle button with configurable labels and emits an event on toggle.
 
 Inputs:
-- `collapsedLabel: string` — The label to display when the content is collapsed.
-- `expandedLabel: string` — The label to display when the content is expanded. If not set, collapsedLabel will be used as fallback.
+- `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`
 
 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() .
 
 Methods:
@@ -643,11 +645,11 @@ Selector: `ecl-featured, article[eclFeatured]`
 Description: Custom ECL component, that adds visual support to a piece of content. Uses .
 
 Inputs:
-- `isLinkHighlighted: boolean = false` — Gives a different display for the link in highlighted mode
-- `position: "left" | "right" = 'left'` — The position of the image in the component. Can be 'left' or 'right'. The default value is 'left'.
-- `variant: unknown` — 'highligh' varian, applies class to make more stand out appearance of the component.
 - `horizontalAlign: 'left' | 'center' | undefined`
 - `isDynamicImage: boolean = false`
+- `isLinkHighlighted: boolean = false` — Gives a different display for the link in highlighted mode
+- `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`
@@ -708,9 +710,9 @@ Selector: `ecl-file`
 Description: Component representing a file item with optional metadata, description, and image (thumbnail) support.
 
 Inputs:
-- `id: string` — Optional ID for the file component, useful for accessibility or referencing.
 - `description: string` — Optional description displayed under the file title.
 - `detailMeta: string[]` — Additional details displayed in the file component (e.g. file size, date).
+- `id: string = undefined` — Optional ID for the file component, useful for accessibility or referencing.
 - `labelInfo: string` — Additional label shown next to the language label, e.g. file type or status.
 - `langId: string` — Optional language ID (e.g., for translation or accessibility attributes).
 - `language: string` — Language indicator string (e.g. "EN", "FR") used in the label.
@@ -761,12 +763,13 @@ Description: Component representing a container for file item translations withi
 
 Inputs:
 - `isExpanded: boolean = false` — Whether the list is initially expanded.
-- `label: string` — Label displayed above the translations list.
+- `label: string = undefined` — Label displayed above the translations list.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
 
 Outputs:
+- `isExpanded: boolean = false` — Whether the list is initially expanded.
 - `toggle: EclFileItemsToggleEvent` — Emits a toggle event when the translations list is expanded or collapsed. Consumers can call preventDefault() on the event to cancel the toggle.
 
 Properties:
@@ -839,16 +842,16 @@ Selector: `ecl-gallery`
 Description: This component represents a collection of images or videos and allows a user to browse them. Adds functionality and styling, according to the ECL standards.
 
 Inputs:
-- `columns: "2" | "3" | "4" | number = 3`
-- `gridTemplate: "0" | "1" | "2" | "3" | "4" | string = '0'` — This property can be used with 'isGrid' property set to true. By default gridTemplate is 0 and all the thimbnails have same size. If another template value is set, some additional formatting is applied and the thumbnails will have different sizes.
+- `maxVisibleItems: number` — Number of gallery items to be displayed by default. The rest can be displayed with the 'View all' button.
+- `columns: 2 | 3 | 4 | number = 3`
+- `gridTemplate: '0' | '1' | '2' | '3' | '4' | string = '0'` — This property can be used with 'isGrid' property set to true. By default gridTemplate is 0 and all the thimbnails have same size. If another template value is set, some additional formatting is applied and the thumbnails will have different sizes.
 - `isFullWidth: boolean = false` — If set to true, the gallery will have 100 view width.
 - `isGrid: boolean = false` — If set to true, a specific class will be applied, so the gallery thumbnails are displayed as a grid, all with same size.
 - `isNoOverlay: boolean = false` — If set to true, no overlay will be displayed when user clicks on an image.
 - `isOpenInFullScreenPossible: boolean = true`
 - `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.
-- `maxVisibleItems: number` — Number of gallery items to be displayed by default. The rest can be displayed with the 'View all' button.
-- `ratio: "3-1" | "3-2" | string = '3-2'` — The ratio that will be applied to the gallery thumbnails.
+- `ratio: '3-1' | '3-2' | string = '3-2'` — The ratio that will be applied to the gallery thumbnails.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -916,14 +919,14 @@ Description: Wrapper component for gallery item's elements.
 Inputs:
 - `description: string`
 - `icon: string`
-- `isShareable: boolean = true` — Can this item be shared, i.e. show/hide share button.
 - `itemId: string`
-- `mediaType: "image" | "video" | "externalVideo" = 'image'`
 - `meta: string`
 - `src: string` — The source link to the image/video, that will be shown in the original size (when open image/video in overlay or in orginal size).
 - `srVideoAudioDescription: string` — Embeded audio description.
 - `title: string`
 - `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`
@@ -951,20 +954,22 @@ Selector: `ecl-icon`
 Description: ECL icon component – renders SVG icons from various sets depending on current theme. Integrates with ECL theming and supports accessibility options.
 
 Inputs:
-- `ariaHidden: boolean` — Determines whether the icon should be hidden from assistive technologies. Defaults to true unless a title is provided.
-- `ariaLabelledby: string` — ID reference for an external element that labels this icon for screen readers.
-- `focusable: boolean = false` — Controls whether the icon is focusable via keyboard. Defaults to false .
-- `isFlipHorizontal: boolean = false` — Flips the icon horizontally if set to true .
-- `role: string` — ARIA role of the icon. If a title is provided and no role is defined, defaults to 'img' .
-- `title: string` — Title used for accessibility. Also affects aria-hidden and role .
+- `ariaHidden: boolean = undefined` — Determines whether the icon should be hidden from assistive technologies. Defaults to true unless a title is provided.
+- `ariaLabelledby: string = undefined` — ID reference for an external element that labels this icon for screen readers.
 - `color: 'inverted' | 'primary' | null = null` — Applies color styling to the icon. Use 'inverted' for icons on dark backgrounds, or 'primary' for emphasis.
+- `focusable: boolean = false` — Controls whether the icon is focusable via keyboard. Defaults to false .
 - `icon: string` — Name of the icon to render from the selected set.
 - `iconSet: 'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' | 'phosphor' | string = 'default'` — Defines the icon set to use. Available sets: default , social , social-media , flag , or a custom URL prefix. Defaults to 'default' .
+- `isFlipHorizontal: boolean = false` — Flips the icon horizontally if set to true .
+- `role: string = undefined` — ARIA role of the icon. If a title is provided and no role is defined, defaults to 'img' .
 - `size: '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | 'fluid' | string = 'xs'` — Size of the icon. Supported values: '2xs' , 'xs' , 's' , 'm' , 'l' , 'xl' , '2xl' , 'fluid' . Defaults to 'xs' .
+- `title: string = undefined` — Title used for accessibility. Also affects aria-hidden and role .
 - `transform: string` — Adds a transformation modifier to the icon (e.g., rotation).
 
 Properties:
 - `baseDirective: unknown = inject(ECLBaseDirective)`
+- `effectiveAriaHidden: unknown = computed<boolean>(() => { const explicit = this.ariaHidden(); if (explicit !== undefined) return explicit; return this.title() === undefined; })` — Resolved aria-hidden: uses the explicit ariaHidden input if provided, otherwise hides the icon unless a title is set.
+- `effectiveRole: unknown = computed<string | undefined>(() => { const explicit = this.role(); if (explicit !== undefined) return explicit; return this.title() !== undefined ? 'img' : unde…` — Resolved role: uses the explicit role input if provided, otherwise defaults to 'img' when a title is set.
 - `el: unknown = inject(ElementRef)`
 - `extraClasses: unknown = signal<string>('')` — Extra classes added programmatically by parent components (button, link, etc.)
 - `hostClasses: unknown = signal<string>('')` — Real classes currently present on . To support \[class.foo\] / \[ngClass\].
@@ -1005,10 +1010,10 @@ Selector: `ecl-inpage-navigation`
 Description: The in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages. It gives the user an overview of the page contents and has a fixed position (does not move while scrolling) at either the left side of a page on desktop or top-bar on mobile. This component helps users scan of the page quickly contents and may potentially reduce vertical scrolling, allowing users to easily jump straight to the segment of the page.
 
 Inputs:
-- `eclTitle: string`
-- `marginBottom: number`
-- `marginTop: number` — Used to calculate component's position.
-- `offsetTop: number` — Sets the offset from the top of the page (for example if there is a toolbar or header). Used to calculate scrolling behaviour.
+- `eclTitle: string = undefined`
+- `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`
@@ -1041,9 +1046,9 @@ Selector: `li[eclInpageNavigationItem]`
 Description: Represent a single navigation item. contains the link, that activates/scrolls to the new current paragraph of the page.
 
 Inputs:
-- `isActive: boolean`
-- `label: string` — The label that is displayed in the items list.
-- `sectionId: string`
+- `isActive: boolean = undefined`
+- `label: string = undefined` — The label that is displayed in the items list.
+- `sectionId: string = undefined`
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -1054,6 +1059,7 @@ Outputs:
 - `itemClick: EventEmitter = new EventEmitter<EclInpageNavigationItemClickEvent>()` — Emited when user clicks on the item.
 - `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`
 
 Properties:
 - `cmpClass: unknown = true`
@@ -1077,14 +1083,14 @@ Selector: `ecl-list-illustration, ul[eclListIllustration], ol[eclListIllustratio
 Description: Component representing a list using ECL illustration styles. Supports zebra styling, responsive horizontal layout, and font size options.
 
 Inputs:
+- `counterStart: number | null = null` — If we have a number-list, the user can set the start of the counter.
 - `fontSize: "m" | "l" = 'l'` — Font size for list content. Possible values: 'm' – medium 'l' – large (default)
 - `hasDividers: boolean = false` — If this is an icon-list, it can have dividers between each item.
+- `horizontalColumns: number = 0` — Number of horizontal columns. If greater than 0 , items are displayed in a grid layout.
 - `isCentered: boolean = false` — If content should be centered
 - `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.
-- `counterStart: number | null = null` — If we have a number-list, the user can set the start of the counter.
-- `horizontalColumns: number = 0` — Number of horizontal columns. If greater than 0 , items are displayed in a grid layout.
+- `variant: 'icon-list' | 'number-list' | null = null` — Two variants available: icon-list and number-list.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -1155,9 +1161,9 @@ Selector: `ecl-media-container`
 Description: A media container is used to display media items (video, audio, image or other data) with a caption.
 
 Inputs:
+- `captionPosition: "over" | "bottom" | "hidden" = 'bottom'`
 - `eclAutoplay: boolean = false` — Used for a video only - if the video should play immediately.
 - `isFullWidth: boolean = false`
-- `captionPosition: "over" | "bottom" | "hidden" = 'bottom'`
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -1227,7 +1233,7 @@ Description: This component represents the featured items panel.
 
 Inputs:
 - `title: string`
-- `titleId: string`
+- `titleId: string = undefined`
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -1251,8 +1257,8 @@ Selector: `div[eclMegaMenuInfo]`
 Description: Component for displaying some custom information for the current menu item.
 
 Inputs:
-- `title: string`
-- `titleId: string`
+- `title: string = undefined`
+- `titleId: string = undefined`
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -1276,14 +1282,14 @@ Description: This component represents a mega menu item. Adds functionality and
 
 Inputs:
 - `href: string = ''`
+- `isOneLevelOnly: boolean = false` — This property should be used, when user wants the menu sub-items to use the maximum space available. For example, if we have 10 sub-items, normally they will appear in one column only. If isOneLevelOnly is used, the sub-items will take 2, 3, 4 columns, depending on presence of other sub-components.
 - `isPromotional: boolean = false`
-- `label: string`
-- `linkExtraAttributes: { }` — Used in case user wants to set some custom attributes for the anchr tag.
+- `label: string = undefined`
+- `linkExtraAttributes: { [key: string]: string; } = undefined` — Used in case user wants to set some custom attributes for the anchr tag.
 - `queryParams: Params | null = null`
 - `queryParamsHandling: QueryParamsHandling = null`
 - `routerLink: string | any[] = null`
 - `target: string = ''`
-- `isOneLevelOnly: boolean = false` — This property should be used, when user wants the menu sub-items to use the maximum space available. For example, if we have 10 sub-items, normally they will appear in one column only. If isOneLevelOnly is used, the sub-items will take 2, 3, 4 columns, depending on presence of other sub-components.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -1329,13 +1335,13 @@ Selector: `li[eclMegaMenuSubitem]`
 Description: This component represents a sub-item in the mega-menu component. Applies styling and functionality.
 
 Inputs:
-- `buttonId: string` — Sets id for the button element.
-- `externalIconTitle: string` — If the link is external, this will be the title of the external icon.
 - `href: string = ''`
+- `label: string = ''`
+- `buttonId: string = undefined` — Sets id for the button element.
+- `externalIconTitle: string = undefined` — If the link is external, this will be the title of the external icon.
 - `isExternal: boolean = false` — If the link redirects to external page. Adds an 'external' icon.
 - `isSeeAll: boolean = false` — Used for the 'View all' link.
-- `label: string = ''`
-- `linkExtraAttributes: { }` — Adds custom attributes to an anchor element.
+- `linkExtraAttributes: { [key: string]: string; } = undefined` — Adds custom attributes to an anchor element.
 - `queryParams: Params | null = null`
 - `queryParamsHandling: QueryParamsHandling = null`
 - `routerLink: string | any[] = null`
@@ -1437,12 +1443,12 @@ Inputs:
 - `id: string`
 - `isCurrent: boolean = false`
 - `label: string`
-- `linkExtraAttributes: { }` — Custom attributes, to be added to the tag of the menu item.
+- `linkExtraAttributes: Record<string, string> = undefined` — Custom attributes, to be added to the tag of the menu item.
 - `queryParams: Params | null = null`
 - `queryParamsHandling: QueryParamsHandling = null`
 - `routerLink: string | any[] = null`
 - `target: string = ''`
-- `toggleAriaLabel: string` — When in mobile view, use this property to set aria-label for the toggle items button (to expand item's children).
+- `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`
@@ -1524,7 +1530,7 @@ Inputs:
 - `isCurrent: boolean = false`
 - `isSeeAll: boolean = false` — An additional item, that represents a link.
 - `label: string`
-- `linkExtraAttributes: { }`
+- `linkExtraAttributes: Record<string, string> = undefined`
 - `queryParams: Params | null = null`
 - `queryParamsHandling: QueryParamsHandling = null`
 - `routerLink: string | any[] = null`
@@ -1538,7 +1544,7 @@ Outputs:
 - `menuItemSelect: EventEmitter = new EventEmitter<EclMenuItemSelectEvent>()`
 
 Properties:
-- `children: Array<EclMenuItem> = []`
+- `children: EclMenuItem[] = []`
 - `cmpClass: unknown = true`
 - `hasChildren: unknown = false`
 - `iconComponents: QueryList<EclIconComponent>` — If menu item includes any icon, added by the user (for example for 'external' link).
@@ -1652,16 +1658,16 @@ Selector: `select[eclMultiselect]`
 Description: Component representing a custom multiselect input using the ECL design system. Should be used on a native element to enhance it with ECL multiselect behavior. Replaces the original element with a custom dropdown rendered dynamically.
 
 Inputs:
-- `ariaDescribedby: string | undefined = undefined` — Defines the aria-describedby attribute for accessibility.
 - `counterLabel: string` — Label for the selections counter, read by screen readers. Accepts a translation key or plain text. Default: 'ecl.multiselect.SELECTED'.
 - `disabled: BooleanInput` — Disables the multiselect component when set to true.
 - `eclPlaceholder: string` — Placeholder text to show in the multiselect input field when no options are selected.
-- `eclSize: string = 'm'` — Multiselect size: 's' \| 'm' \| 'l'. Default is 'm'.
 - `hasSearchBox: string` — Enables the search box within the dropdown.
 - `hasSelectAll: string` — Displays the "Select all" option in the dropdown.
-- `id: string | undefined = undefined` — Sets the id attribute of the multiselect component.
 - `isInvalid: boolean | undefined` — Marks the multiselect as invalid.
 - `isSubmitOnApply: string` — When true, the Apply button in the dropdown acts as a submit button (type="submit").
+- `ariaDescribedby: string | undefined = undefined` — Defines the aria-describedby attribute for accessibility.
+- `eclSize: string = 'm'` — Multiselect size: 's' \| 'm' \| 'l'. Default is 'm'.
+- `id: string | undefined = undefined` — Sets the id attribute of the multiselect component.
 - `toggleLabel: string | undefined = undefined` — Label used for the toggle button that expands or collapses the dropdown.
 - `class: string`
 - `e2eAttr: any`
@@ -1801,7 +1807,7 @@ Selector: `fieldset[eclMultiselectOptgroup]`
 Description: Component representing an option group (fieldset) in a multiselect component. Used to group related options under a common label.
 
 Inputs:
-- `label: string` — The visible label for the option group.
+- `label: string = undefined` — The visible label for the option group.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -1871,7 +1877,7 @@ Selector: `ecl-navigation-list-item`
 Description: Component that represents one navigation list item, has title and image and/or list of links/secondary links.
 
 Inputs:
-- `variant: "illustration" | "image-as-illustration" | string = ''` — Different variants, that add styling for different type of displaing the picture, used in the list item.
+- `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`
@@ -1952,7 +1958,7 @@ Selector: `ecl-notification`
 Inputs:
 - `isCloseable: boolean = true` — Indicates whether the close button is displayed.
 - `isVisible: boolean = true` — Controls the visibility of the notification. When false, the component is hidden using CSS utility class.
-- `notificationTitle: string` — The title of the notification. This is displayed inside the component.
+- `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`
@@ -1960,6 +1966,7 @@ Inputs:
 
 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.
 
 Properties:
 - `eclThemeService: unknown = inject(EclThemeService)`
@@ -2130,17 +2137,17 @@ File: `packages/ecl/components/ecl-pagination/ecl-pagination-item.component.ts`
 Selector: `li[eclPaginationItem]`
 
 Inputs:
-- `ariaLabel: string` — Value for the aria-label attribute used for accessibility.
-- `href: string = null` — Href link for navigation.
-- `isCurrent: boolean` — Adds the ecl-pagination\_\_item--current class when true.
-- `isNext: boolean` — Adds the ecl-pagination\_\_item--next class when true.
-- `isPrevious: boolean` — Adds the ecl-pagination\_\_item--previous class when true.
 - `isTruncated: boolean = false` — Adds the ecl-pagination\_\_item--truncation class when true.
-- `label: string` — Text content of the pagination item.
 - `pagesCount: string` — Total number of pages displayed by the pagination component.
+- `routerLink: string | any[] = null` — Router navigation link for Angular routing.
+- `ariaLabel: string = undefined` — Value for the aria-label attribute used for accessibility.
+- `href: string = null` — Href link for navigation.
+- `isCurrent: boolean = undefined` — Adds the ecl-pagination\_\_item--current class when true.
+- `isNext: boolean = undefined` — Adds the ecl-pagination\_\_item--next class when true.
+- `isPrevious: boolean = undefined` — Adds the ecl-pagination\_\_item--previous class when true.
+- `label: string = undefined` — Text content of the pagination item.
 - `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` — Router navigation link for Angular routing.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -2361,17 +2368,21 @@ Selector: `ecl-rating-field`
 Description: Component representing rating field, displayed with stars. Typically used when the user needs to evaluate something.
 
 Inputs:
-- `disabled: boolean` — Can be used to set disabled status.
+- `disabled: boolean = undefined` — Can be used to set disabled status.
 - `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` — The initial value, if any.
+- `rating: number = undefined` — The initial value, if any.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
 
 Outputs:
+- `disabled: boolean = undefined` — Can be used to set disabled status.
 - `ratingChange: any` — The event to be emitted when rating is changed.
 
+Properties:
+- `currentRating: unknown = signal<number>(undefined)` — Internal mutable rating value, falls back to the input
+
 Methods:
 - `onRadioClick(rating: number): void` — Method that sets the new rating and emit 'ratingChange' event, that includes the new rating number.
 - `registerOnChange(fn: any): void`
@@ -2390,16 +2401,17 @@ Description: Component representing search field - input and button, in a respon
 Inputs:
 - `buttonExtraClassses: string = ''`
 - `inputExtraClassses: string = ''`
-- `placeholder: string`
+- `placeholder: string = undefined`
 - `searchButtonIcon: string = 'search'`
-- `searchButtonLabel: string`
-- `searchInputText: string` — The current/default search text.
+- `searchButtonLabel: string = undefined`
+- `searchInputText: string = undefined` — The current/default search text.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
 
 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.
 
 Properties:
 - `role: string = 'search'`
@@ -2421,14 +2433,20 @@ Selector: `ecl-select-container`
 Description: Container component, which wraps the component. Ataches custom select button with dropdown arrow.
 
 Inputs:
-- `disabled: boolean`
+- `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`
+- `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`
 
+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.
+
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -2478,7 +2496,7 @@ Selector: `div[eclSiteFooterCore]`
 Description: The content of the site footer core component. The part that is specific for the core variant.
 
 Inputs:
-- `languageCode: string` — The code of the current language. Used to translate the content.
+- `languageCode: string = undefined` — The code of the current language. Used to translate the content.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -2495,10 +2513,10 @@ Description: There is some fixed content in the site footer, that cannot be chan
 
 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.
-- `content: any` — The rest of the content of the site footer.
-- `ecLogoLanguageCode: string` — The code of the current language for the logo. If there is no logo for the current language, a default logo will be displayed.
+- `content: any = undefined` — The rest of the content of the site footer.
+- `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` — The code of the current language. Used to translate the content.
+- `languageCode: string = undefined` — The code of the current language. Used to translate the content.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -2517,7 +2535,7 @@ Description: There is some fixed content in the site footer, that cannot be chan
 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` — The code of the current language. Used to translate the content.
+- `languageCode: string = undefined` — The code of the current language. Used to translate the content.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -2569,10 +2587,10 @@ Selector: `ecl-site-header`
 Description: The Site header offers easily recognisable elements (such as the logo) and the most essential functionality of every site (such as Language switcher or Search form). Additionally it can host the name of the site, the class name to which it belongs and the main navigation. The header is always placed at the top of the page. The elements required in the site header are different depending wether it is the corporate, standardised or an harmonised website.
 
 Inputs:
-- `isSiteNameMobileOnly: boolean = false` — Determines if the site name should be displayed only on mobile devices.
 - `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.
+- `isSiteNameMobileOnly: boolean = false` — Determines if the site name should be displayed only on mobile devices.
+- `logoSize: "s" | "m" | "l" = 'm'` — The size of the logo, 's', 'm' or 'l', default to 'm'.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -2693,19 +2711,19 @@ Selector: `ecl-site-header-language-popover`
 Description: This component is a popover, that appears after the user clicks on language link. It contains all the available languages, configured for the current site. Adds styling and functionality for the dialog. Emits events when language is selected and when dialog is closed.
 
 Inputs:
-- `euColumnsCount: number` — Number of columns for eu languages. Calculated by the parent component 'ecl-site-header-language'.
 - `euLanguages: Array<EuiLanguage> = []`
-- `isFull: boolean = false` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
-- `isHidden: boolean = false` — Property to show/hide the dialog.
-- `isPushLeft: boolean = false` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
-- `isPushRight: boolean = false` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
-- `isStack: boolean = false` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
 - `languageArrowPosition: string` — Property to position the arrow of the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
 - `languageCode: string` — Current language
 - `leftPosition: number` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
-- `nonEuColumnsCount: number` — Number of columns for non-eu languages. Calculated by the parent component 'ecl-site-header-language'.
 - `nonEuLanguages: Array<EuiLanguage> = []`
 - `rightPosition: number` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
+- `euColumnsCount: number = undefined` — Number of columns for eu languages. Calculated by the parent component 'ecl-site-header-language'.
+- `isFull: boolean = false` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
+- `isHidden: boolean = false` — Property to show/hide the dialog.
+- `isPushLeft: boolean = false` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
+- `isPushRight: boolean = false` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
+- `isStack: boolean = false` — Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
+- `nonEuColumnsCount: number = undefined` — Number of columns for non-eu languages. Calculated by the parent component 'ecl-site-header-language'.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -2783,9 +2801,9 @@ Selector: `ecl-site-header-search`
 Description: This component builds the search box in the ecl-site-header component. Adds specific style and functionality, emits events on search and search toggle.
 
 Inputs:
-- `searchButtonLabel: string`
-- `searchInputPlaceholder: string`
 - `searchInputText: string`
+- `searchButtonLabel: string = undefined`
+- `searchInputPlaceholder: string = undefined`
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -2817,8 +2835,8 @@ File: `packages/ecl/components/ecl-social-media-follow/ecl-social-media-follow.c
 Selector: `ecl-social-media-follow`
 
 Inputs:
-- `description: string`
-- `horizontalAlignment: "right" | "left" | string = 'left'`
+- `description: string = undefined`
+- `horizontalAlignment: 'right' | 'left' | string = 'left'`
 - `isVertical: boolean = false`
 - `class: string`
 - `e2eAttr: any`
@@ -2833,14 +2851,14 @@ File: `packages/ecl/components/ecl-social-media-follow/ecl-social-media-follow-i
 Selector: `ecl-social-media-follow-item`
 
 Inputs:
-- `extraAttributes: { name: string; value?: string | null }[]`
+- `extraAttributes: { name: string; value?: string | null; }[] = undefined`
 - `href: string = ''`
-- `isInverted: unknown`
-- `routerLink: string = ''`
-- `size: string = 'm'`
-- `target: string`
 - `icon: string`
 - `iconSet: string = 'social-media'`
+- `isInverted: false = undefined`
+- `routerLink: string = ''`
+- `size: string = 'm'`
+- `target: string = undefined`
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -2878,7 +2896,7 @@ 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` — Title of the language category.
+- `title: string = undefined` — Title of the language category.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -2894,7 +2912,7 @@ 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` — Title of the language container group.
+- `title: string = undefined` — Title of the language container group.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -2910,7 +2928,7 @@ 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` — Language code used to determine and display the language label. Example: 'en', 'fr', 'de'
+- `lang: string = undefined` — Language code used to determine and display the language label. Example: 'en', 'fr', 'de'
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -2990,10 +3008,10 @@ 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` — Extra classes to be added to the anchor tag.
-- `isHidden: boolean = false` — Hides the tab when true by applying the ecl-tabs\_\_item--hidden CSS class.
+- `anchorExtraClasses: string = undefined` — 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`
@@ -3001,6 +3019,7 @@ Inputs:
 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.
 
 Properties:
 - `_isActive: unknown = signal(false)`
@@ -3115,7 +3134,7 @@ 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: unknown` — Defines the variant of the tag. Currently only 'removable' is supported.
+- `variant: 'removable' = undefined` — Defines the variant of the tag. Currently only 'removable' is supported.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -3159,7 +3178,6 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `attrRole: string = 'list'` — Sets the role attribute of the host element to list for accessibility purposes.
 - `isExpanded: boolean | null = null`
 - `timelineItems: QueryList<EclTimelineItemComponent>` — List of projected EclTimelineItemComponent instances. Collected using @ContentChildren .
 
@@ -3179,13 +3197,14 @@ Inputs:
 - `isHeadline: boolean = false`
 - `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` — Name of the toggle group that this item belongs to. Used to coordinate collapsing/expanding related 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`
 
 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.
 
 Properties:
 - `eclLink: EclLinkDirective` — Reference to a projected ECL link, used for setting focus after toggle.
@@ -4233,7 +4252,7 @@ Selector: `[eclFileTitle]`
 Description: Directive to style a title element in an ECL file component.
 
 Inputs:
-- `id: string` — ID attribute for the title element.
+- `id: string = undefined` — ID attribute for the title element.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -4270,10 +4289,10 @@ Selector: `[eclFileUpload]`
 Description: Directive that enhances a native input\[type=file\] with ECL-compliant styling and behavior. Supports multiple file selection, dynamic file list rendering, translations and validation state.
 
 Inputs:
-- `disabled: boolean` — Whether the component is disabled.
-- `id: string` — ID attribute applied to the native file input.
+- `disabled: boolean = undefined` — Whether the component is disabled.
+- `id: string = undefined` — ID attribute applied to the native file input.
 - `isInvalid: boolean = false` — Marks the component as invalid (if not using Angular form validation).
-- `multiple: boolean` — Allows selecting multiple files.
+- `multiple: boolean = undefined` — Allows selecting multiple files.
 - `variant: string = 'default'` — Variant of the component's appearance. Currently unused. Default: 'default' .
 - `class: string`
 - `e2eAttr: any`
@@ -4309,7 +4328,7 @@ 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` — To be used when there is no thimbnail added. Instead the 'poster' attribute in the element is used
+- `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`
@@ -4626,9 +4645,9 @@ Selector: `iframe[eclMediaContainerIframe]`
 Description: Adds styling and attributes to the iframe element.
 
 Inputs:
-- `height: any`
 - `ratio: string`
-- `width: any`
+- `height = undefined`
+- `width = undefined`
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -4663,7 +4682,7 @@ Selector: `[eclMediaContainerItem], img[eclMediaContainerImage]`
 Description: Adds styling and functionality to the media container item /image.
 
 Inputs:
-- `ratio: string`
+- `ratio: string = undefined`
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -4927,9 +4946,9 @@ Description: Directive used to decorate and elements within a multiselect. Adds
 
 Inputs:
 - `disabled: boolean` — Indicates that the option is disabled.
-- `label: string` — Label displayed for the option.
 - `selected: boolean` — Indicates that the option is selected.
-- `value: string` — Value assigned to the option.
+- `label: string = undefined` — Label displayed for the option.
+- `value: string = undefined` — Value assigned to the option.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -5333,9 +5352,9 @@ Selector: `[eclRadio]`
 Description: Directive that applies the ECL radio button styling and behavior. Should be applied to native radio input elements to enhance them with ECL styles and support for invalid, disabled and binary states.
 
 Inputs:
-- `isBinary: boolean` — Adds the ecl-radio--binary class when true.
 - `isDisabled: boolean = false` — Adds the ecl-radio--disabled class to the host element when true.
 - `isInvalid: boolean = false` — Adds the ecl-radio--invalid class to the host element when true.
+- `isBinary: boolean = undefined` — Adds the ecl-radio--binary class when true.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -5400,7 +5419,7 @@ Inputs:
 - `disabled: boolean = false` — Disables the select element.
 - `eclSize: "s" | "m" | "l" = 'm'` — Size of the select component.
 - `isInvalid: boolean = false` — Marks the select element as invalid.
-- `toggleLabel: string` — Accessible label for the toggle button.
+- `toggleLabel: string = undefined` — Accessible label for the toggle button.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -5517,14 +5536,11 @@ Selector: `[eclSiteFooterList]`
 Description: Directive, that applies specific classes to the list element in site footer.
 
 Inputs:
-- `isInline: boolean`
+- `isInline: boolean = undefined`
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `cmpClass: unknown = true`
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5626,7 +5642,7 @@ Selector: `[eclSiteFooterSection]`
 Description: Directive, that applies specific classes to the section element in site footer.
 
 Inputs:
-- `variant: "links" | "contact" | "about" | "more" | "related" | "site-info" | string = ''`
+- `variant: 'links' | 'contact' | 'about' | 'more' | 'related' | 'site-info' | string = ''`
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -6098,7 +6114,7 @@ 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.
 - `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` — Aria-label for the sort button that will be injected into the header cell.
+- `sortButtonAriaLabel: string = undefined` — Aria-label for the sort button that will be injected into the header cell.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -6252,7 +6268,7 @@ Selector: `img[eclTextMediaImgAnchor]`
 Description: Sets the --ecl-image-anchor CSS custom property for an image used within the ecl-text-media component. Intended to be used together with img\[eclMediaContainerImage\] from the ecl-media-container component.
 
 Inputs:
-- `eclTextMediaImgAnchor: "center" | "top left" | "bottom right" | "20% 20%" = 'center'`
+- `eclTextMediaImgAnchor: 'center' | 'top left' | 'bottom right' | '20% 20%' = 'center'`
 
 ### EclTextMediaMicroTitleDirective