@eui/ecl 23.0.0-alpha.6 → 23.0.0-alpha.8

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-07-31T14:31:33.404Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-08-03T16:02:37.350Z, llm-md export.
 
 ## Modules
 
@@ -128,16 +128,16 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `bannerContainer: ElementRef`
-- `bannerFooter: ElementRef`
+- `bannerContainer: unknown = viewChild<ElementRef>('bannerContainer')`
+- `bannerFooter: unknown = viewChild<ElementRef>('bannerFooter')`
 - `bannerFooterHeight: null = null`
-- `eclBannerImage: EclBannerImageDirective`
-- `eclBannerVideo: EclBannerVideoDirective`
-- `eclLinkComponents: QueryList<EclLinkDirective>`
+- `eclBannerImage: unknown = contentChild(EclBannerImageDirective)`
+- `eclBannerVideo: unknown = contentChild(EclBannerVideoDirective)`
+- `eclLinkComponents: unknown = contentChildren(forwardRef(() => EclLinkDirective))`
 - `el: unknown = inject(ElementRef)`
 - `isPlaying: unknown = signal(true)`
-- `pauseBtn: EclButtonComponent`
-- `playBtn: EclButtonComponent`
+- `pauseBtn: unknown = viewChild<EclButtonComponent>('pauseBtn')`
+- `playBtn: unknown = viewChild<EclButtonComponent>('playBtn')`
 - `skipHeightManagement: unknown = false` — When true, the banner's own height management is disabled. Used by the carousel to prevent height conflicts.
 
 Methods:
@@ -280,9 +280,9 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `eclCardImage: EclCardImageDirective` — Projected image directive inside the card.
-- `eclContentBlock: EclContentBlockComponent` — Projected ECL content block inside the card.
-- `eclContentBlockTitle: EclContentBlockTitleDirective` — Projected content block title directive inside the card.
+- `eclCardImage: unknown = contentChild(forwardRef(() => EclCardImageDirective))` — Projected image directive inside the card.
+- `eclContentBlock: unknown = contentChild(forwardRef(() => EclContentBlockComponent))` — Projected ECL content block inside the card.
+- `eclContentBlockTitle: unknown = contentChild(forwardRef(() => EclContentBlockTitleDirective))` — Projected content block title directive inside the card.
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -306,17 +306,17 @@ Outputs:
 - `slide: EclSlideEvent` — Event emitted when a slide change occurs.
 
 Properties:
-- `carouselContainerElement: ElementRef` — Reference to the main carousel container element.
-- `firstHiddenItem: EclCarouselItemComponent` — Reference to the first hidden slide item (used for focus management).
+- `carouselContainerElement: unknown = viewChild<ElementRef>('carouselContainer')` — Reference to the main carousel container element.
+- `firstHiddenItem: unknown = viewChild<EclCarouselItemComponent>('firstHiddenItem')` — Reference to the first hidden slide item (used for focus management).
 - `isPausedForced: unknown = false` — Indicates whether autoplay was manually paused.
 - `isPlaying: unknown = false` — Indicates whether autoplay is currently active.
 - `isRtl: unknown = false` — Indicates whether the layout is currently in RTL mode.
-- `lastHiddenItem: EclCarouselItemComponent` — Reference to the last hidden slide item (used for focus management).
-- `navigationButtons: QueryList<ElementRef>` — References to the navigation buttons corresponding to each slide.
-- `pauseButton: ElementRef` — Reference to the pause button element.
-- `playButton: ElementRef` — Reference to the play button element.
-- `slides: QueryList<EclCarouselItemComponent>` — Collection of slide components rendered inside the carousel.
-- `slidesContainer: ElementRef` — Reference to the slides container element.
+- `lastHiddenItem: unknown = viewChild<EclCarouselItemComponent>('lastHiddenItem')` — Reference to the last hidden slide item (used for focus management).
+- `navigationButtons: unknown = viewChildren<ElementRef>('currButton')` — References to the navigation buttons corresponding to each slide.
+- `pauseButton: unknown = viewChild<ElementRef>('pauseButton')` — Reference to the pause button element.
+- `playButton: unknown = viewChild<ElementRef>('playButton')` — Reference to the play button element.
+- `slides: unknown = contentChildren(forwardRef(() => EclCarouselItemComponent))` — Collection of slide components rendered inside the carousel.
+- `slidesContainer: unknown = viewChild<ElementRef>('slidesContainer')` — Reference to the slides container element.
 - `transitionDuration: number = 0.4` — Duration of the slide transition animation (in seconds).
 
 Methods:
@@ -359,7 +359,7 @@ Outputs:
 
 Properties:
 - `ariaLabel: string` — The aria-label for the slide, assigned dynamically by the carousel.
-- `banner: EclBannerComponent` — Optionally captures a banner component projected into the slide.
+- `banner: unknown = contentChild(forwardRef(() => EclBannerComponent))` — Optionally captures a banner component projected into the slide.
 - `el: unknown = inject(ElementRef)`
 - `index: number` — Internal slide index, assigned dynamically by the carousel.
 
@@ -382,7 +382,7 @@ Inputs:
 Properties:
 - `className: unknown = true` — Static class applied to the host element for styling. Always returns true to include the ecl-category-filter class.
 - `eclCategoryFilterItemsAll: QueryList<EclCategoryFilterItemComponent>`
-- `eclCategoryList: EclCategoryFilterListComponent`
+- `eclCategoryList: unknown = contentChild(forwardRef(() => EclCategoryFilterListComponent))`
 - `role: string = 'navigation'` — Defines the ARIA role for the host element. Always set to "navigation".
 
 Methods:
@@ -405,7 +405,7 @@ Outputs:
 
 Properties:
 - `className: unknown = true` — Static class binding for base list item styling.
-- `eclCategoryList: EclCategoryFilterListComponent` — Child list component if the item has nested children.
+- `eclCategoryList: unknown = contentChild(forwardRef(() => EclCategoryFilterListComponent))` — Child list component if the item has nested children.
 - `isCurrent: unknown = false` — Indicates whether the item is currently selected.
 - `isExpanded: unknown = false` — Indicates whether the item is currently expanded (open).
 - `role: string = 'listitem'` — Defines the ARIA role for the list item. Always set to "listitem".
@@ -427,7 +427,7 @@ Inputs:
 Properties:
 - `className: unknown = true` — Adds the base class for the category filter list component.
 - `controls: string` — ARIA attribute that points to the element controlled by this list (if applicable).
-- `eclCategoryFilterItems: QueryList<EclCategoryFilterItemComponent>` — List of all category filter items projected inside this list.
+- `eclCategoryFilterItems: unknown = contentChildren<EclCategoryFilterItemComponent>(forwardRef(() => EclCategoryFilterItemComponent))` — List of all category filter items projected inside this list.
 - `role: string = 'list'` — Sets ARIA role to "list" for accessibility purposes.
 
 Methods:
@@ -498,11 +498,11 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `eclContentBlock: EclContentBlockComponent` — Reference to projected content block. Used to apply internal styling and structure.
-- `eclContentBlockTitle: EclContentBlockTitleDirective` — Reference to projected title directive inside the content block. Used for linking behavior.
-- `eclContentItemImage: EclContentItemImageDirective` — Reference to projected image directive. Used to bind interaction behavior (click propagation).
-- `eclContentItemPicture: EclContentItemPictureDirective` — Reference to projected picture directive, used to determine layout mode (stacked).
-- `eclDateBlock: EclDateBlockComponent` — Reference to projected date block component. Used to set styling and determine layout mode.
+- `eclContentBlock: unknown = contentChild(forwardRef(() => EclContentBlockComponent))` — Reference to projected content block. Used to apply internal styling and structure.
+- `eclContentBlockTitle: unknown = contentChild(forwardRef(() => EclContentBlockTitleDirective))` — Reference to projected title directive inside the content block. Used for linking behavior.
+- `eclContentItemImage: unknown = contentChild(forwardRef(() => EclContentItemImageDirective))` — Reference to projected image directive. Used to bind interaction behavior (click propagation).
+- `eclContentItemPicture: unknown = contentChild(forwardRef(() => EclContentItemPictureDirective))` — Reference to projected picture directive, used to determine layout mode (stacked).
+- `eclDateBlock: unknown = contentChild(forwardRef(() => EclDateBlockComponent))` — Reference to projected date block component. Used to set styling and determine layout mode.
 - `role: string = 'article'` — ARIA role attribute for the host element. Set to "article" to denote standalone content.
 
 Methods:
@@ -620,7 +620,7 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `eclIconComponents: QueryList<EclIconComponent>` — Query for any EclIconComponent children projected into the component. These icons will receive an additional CSS class.
+- `eclIconComponents: unknown = contentChildren(EclIconComponent)` — Query for any EclIconComponent children projected into the component. These icons will receive an additional CSS class.
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -638,7 +638,7 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `eclLink: EclLinkDirective` — Reference to the projected link directive inside the component. Automatically decorated with a specific class upon initialization.
+- `eclLink: unknown = contentChild(EclLinkDirective)` — Reference to the projected link directive inside the component. Automatically decorated with a specific class upon initialization.
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -684,7 +684,7 @@ Inputs:
 
 Properties:
 - `className: unknown = true`
-- `links?: QueryList<EclFeaturedItemLinkDirective>`
+- `links: unknown = contentChildren(EclFeaturedItemLinkDirective, { descendants: true })`
 - `mediaContainer: unknown = contentChild(EclMediaContainerComponent)`
 
 Methods:
@@ -729,7 +729,7 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `eclPictureContent: EclFilePictureDirective` — Optional image directive projected via content slot, used for thumbnails.
+- `eclPictureContent: unknown = contentChild(EclFilePictureDirective)` — Optional image directive projected via content slot, used for thumbnails.
 - `eclThemeService: unknown = inject(EclThemeService)`
 
 Methods:
@@ -779,7 +779,7 @@ Outputs:
 - `toggle: EclFileItemsToggleEvent` — Emits a toggle event when the translations list is expanded or collapsed. Consumers can call preventDefault() on the event to cancel the toggle.
 
 Properties:
-- `items: QueryList<EclFileItemComponent>` — Content-projected list of translation items (excluding description blocks).
+- `items: unknown = contentChildren(EclFileItemComponent)` — Content-projected list of translation items (excluding description blocks).
 
 Methods:
 - `getItemsCount(): number` — Returns the number of translation items excluding description entries.
@@ -814,7 +814,7 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `eclRange: QueryList<EclRangeDirective>` — Query list of any descendant EclRangeDirective instances within the form group. Used internally to determine whether the form group contains range inputs.
+- `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.
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -870,16 +870,16 @@ Outputs:
 - `show: EclGalleryShowEvent` — Emits event when user clicks on an item to expand it.
 
 Properties:
-- `footerChild: ElementRef`
-- `galleryFooter: EclGalleryFooterComponent`
-- `galleryItems: QueryList<EclGalleryItemComponent>`
-- `headerChild: ElementRef`
+- `footerChild: unknown = viewChild<ElementRef>('footer')`
+- `galleryFooter: unknown = contentChild(EclGalleryFooterComponent)`
+- `galleryItems: unknown = contentChildren(EclGalleryItemComponent)`
+- `headerChild: unknown = viewChild<ElementRef>('header')`
 - `isDialogVisible: unknown = false`
 - `isMobile: unknown = false`
 - `item: EclGalleryItemComponent`
 - `itemIndex: number`
 - `itemsCount: number`
-- `overlayChild: ElementRef`
+- `overlayChild: unknown = viewChild<ElementRef>('overlay')`
 - `role: string = 'region'` — The default role of the component is 'region' and should not be changed.
 
 Methods:
@@ -941,8 +941,8 @@ Outputs:
 - `itemClick: EventEmitter = new EventEmitter<EclGalleryItemClickEvent>()`
 
 Properties:
-- `galleryPicture: EclGalleryPictureDirective`
-- `mediaChild: EclGalleryMediaDirective`
+- `galleryPicture: unknown = contentChild(EclGalleryPictureDirective)`
+- `mediaChild: unknown = contentChild(EclGalleryMediaDirective)`
 - `role: string = 'listitem'` — The role attribute of the item is 'listitem', should not be changed.
 
 Methods:
@@ -996,7 +996,7 @@ Properties:
 - `hostClasses: unknown = signal<string>('')` — Real classes currently present on . To support \[class.foo\] / \[ngClass\].
 - `iconUrl: unknown = signal<string>('')`
 - ``svgClasses: unknown = computed<Record<string, boolean>>(() => { return { [this.baseDirective.getCssClasses('ecl-icon')]: true, [`ecl-icon--${this.size()}`]: !!this.size(), [`ecl-icon…``
-- `svgEl: ElementRef`
+- `svgEl: unknown = viewChild<ElementRef>('svg')`
 
 Methods:
 - `addExtraClass(className: string): void`
@@ -1044,15 +1044,15 @@ Outputs:
 
 Properties:
 - `currentSectionElement: HTMLElement | null = null`
-- `eclNavigationLinkItems: QueryList<EclInpageNavigationItemComponent>`
-- `eclNavigationList: EclInpageNavigationListDirective`
+- `eclNavigationLinkItems: unknown = contentChildren(EclInpageNavigationItemComponent, { descendants: true })`
+- `eclNavigationList: unknown = contentChild(EclInpageNavigationListDirective)`
 - `eclThemeService: unknown = inject(EclThemeService)`
 - `isButtonExpanded: unknown = false` — Used for the mobile view, where user can select a section from the dropdown.
 - `isRtl: unknown = false`
 - `listMaxHeight: number`
-- `navTittle: ElementRef<HTMLDivElement>`
-- `togglerButton: ElementRef<HTMLButtonElement>`
-- `toggleWrapper: ElementRef<HTMLDivElement>`
+- `navTittle: unknown = viewChild<ElementRef<HTMLDivElement>>('navTittle')`
+- `togglerButton: unknown = viewChild<ElementRef<HTMLButtonElement>>('togglerButton')`
+- `toggleWrapper: unknown = viewChild<ElementRef<HTMLDivElement>>('toggleWrapper')`
 
 Methods:
 - `onExpandButtonClick(): void` — On mobile view - handle the dropdown toggle.
@@ -1084,7 +1084,7 @@ Outputs:
 
 Properties:
 - `cmpClass: unknown = true`
-- `link: EclLinkDirective`
+- `link: unknown = viewChild(EclLinkDirective)`
 - `role: string = 'listitem'` — The role of the component is 'listitem', should not be changed.
 
 Methods:
@@ -1142,7 +1142,7 @@ Inputs:
 
 Properties:
 - `counterStartStyle: string = ''`
-- `eclIllustrationItems: QueryList<EclListIllustrationItemComponent>`
+- `eclIllustrationItems: unknown = contentChildren(forwardRef(() => EclListIllustrationItemComponent))`
 - `elementDisplayStyle: unknown = computed(() => this.horizontalColumns() > 0 && this.isTabletBreakpoint() ? null : 'block' )` — Controls display style of the host element based on breakpoint and column count.
 - `role: string = 'list'` — Applies ARIA role for list elements.
 - `startAttr: string | null = null`
@@ -1166,10 +1166,10 @@ Inputs:
 
 Properties:
 - `className: unknown = true` — Applies ECL class for illustration list item.
-- `eclIllustrationIcon: EclListIllustrationIconDirective`
-- `eclIllustrationPicture: EclListIllustrationPictureDirective`
+- `eclIllustrationIcon: unknown = contentChild(forwardRef(() => EclListIllustrationIconDirective))`
+- `eclIllustrationPicture: unknown = contentChild(forwardRef(() => EclListIllustrationPictureDirective))`
 - `hasDivider: unknown = signal(false)` — A special class needs to be added, if an icon list has dividers between items.
-- `hasPicture: Signal<boolean> = computed(() => this.eclIllustrationPicture !== undefined)`
+- `hasPicture: Signal<boolean> = computed(() => this.eclIllustrationPicture() !== undefined)`
 - `isVerticalPicture: unknown = signal(false)` — A special class needs to be added, for vertical lists with picture.
 - `role: string = 'listitem'` — Applies ARIA role for list items.
 
@@ -1217,13 +1217,13 @@ Properties:
 - `captionBottomOffset: unknown = signal<string | null>(null)`
 - `captionPositionOverride: unknown = signal<'over' | 'bottom' | 'hidden' | null>(null)` — Allows a parent component to override the caption position programmatically.
 - ``cssClasses: unknown = computed(() => { const position = this.resolvedCaptionPosition(); return [super.getCssClasses('ecl-media-container'), position !== 'bottom' ? `ecl-media-contain…`` — Applies specific classes for the component.
-- `eclButtons: QueryList<EclButtonComponent>`
-- `eclMediaContainerItem: EclMediaContainerItemDirective`
-- `expandable: EclExpandableComponent`
+- `eclButtons: unknown = viewChildren(EclButtonComponent)`
+- `eclMediaContainerItem: unknown = contentChild(EclMediaContainerItemDirective)`
+- `expandable: unknown = contentChild(EclExpandableComponent)`
 - `hasVideo: unknown = signal(false)`
 - `isPlaying: unknown = false`
-- `pauseButton: EclButtonComponent`
-- `playButton: EclButtonComponent`
+- `pauseButton: unknown = viewChild<EclButtonComponent>('pauseButton')`
+- `playButton: unknown = viewChild<EclButtonComponent>('playButton')`
 - `resolvedCaptionPosition: unknown = computed(() => this.captionPositionOverride() ?? this.captionPosition())` — Resolved caption position considering the override.
 
 Methods:
@@ -1257,7 +1257,7 @@ Properties:
 - `isOpenMobile: unknown = false` — If the menu is open, when in mobile mode.
 - `isStartPanel: unknown = false` — Used in mobile mode - when the start panel is open (i.e. the hamburger button is clicked).
 - `isTwoPanels: unknown = false` — If a menu item is expanded and has two panels/levels displayed.
-- `menuItems: QueryList<EclMegaMenuItemComponent>`
+- `menuItems: unknown = contentChildren(forwardRef(() => EclMegaMenuItemComponent), { descendants: true })`
 - `overlayStyleTop: number` — Used to position the overlay, when a menu item is expanded.
 - `role: string = 'navigation'` — The 'role' attribute of the component is set to 'navigation'. should not be changed.
 
@@ -1286,9 +1286,9 @@ Inputs:
 Properties:
 - `cmpClass: unknown = true`
 - `eclMegaMenuFeaturedStyleHeight: number | null = null`
-- `featuredItems: QueryList<EclMegaMenuFeaturedListItemDirective>`
-- `links: QueryList<EclLinkDirective>`
-- `megaMenuFeaturedScrollable: ElementRef`
+- `featuredItems: unknown = contentChildren(forwardRef(() => EclMegaMenuFeaturedListItemDirective), { descendants: true })`
+- `links: unknown = contentChildren(forwardRef(() => EclLinkDirective), { descendants: true })`
+- `megaMenuFeaturedScrollable: unknown = viewChild<ElementRef>('megaMenuFeaturedScrollable')`
 
 Methods:
 - `getEclMegaMenuFeaturedHeight(): number` — Calculates and returns the height of the component. The total height of all the list items.
@@ -1312,7 +1312,7 @@ Properties:
 - `eclMegaMenuInfoStyleHeight: number | null = null` — Sets the height of the component.
 - `eclMegaMenuInfoStyleOpacity: unknown = signal<number | null>(null)` — Sets the opacity of the component.
 - `el: unknown = inject(ElementRef)`
-- `linkItem: EclLinkDirective` — When the info panel contains link.
+- `linkItem: unknown = contentChild(forwardRef(() => EclLinkDirective))` — When the info panel contains link.
 
 Methods:
 - `getInfoPanelScrollHeight(): number` — Used to calculate the height of the parent element.
@@ -1330,7 +1330,7 @@ Inputs:
 - `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 = undefined`
-- `linkExtraAttributes: { [key: string]: string; } = undefined` — Used in case user wants to set some custom attributes for the anchr tag.
+- `linkExtraAttributes: Record<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`
@@ -1345,22 +1345,22 @@ Outputs:
 
 Properties:
 - `containerStyleHeight: number | null = null`
-- `eclMegaMenuContainer: EclMegaMenuContainerDirective` — Component, that consist of some custom info, text or whatever. When the menu item has no children, but still some sub container is displayed.
-- `eclMegaMenuFeatured: EclMegaMenuFeaturedComponent`
-- `eclMegaMenuInfo: EclMegaMenuInfoComponent` — Element, that would contain some info about the current item or it's children. First in the container.
-- `eclMegaMenuMega: ElementRef` — The wrapper around the subitems, if any.
-- `eclMegaMenuSublist: EclMegaMenuSublistDirective` — Element, that holds the sub items of the current menu items.
-- `eclMegaMenuSublists: QueryList<EclMegaMenuFeaturedComponent>`
+- `eclMegaMenuContainer: unknown = contentChild(forwardRef(() => EclMegaMenuContainerDirective))` — Component, that consist of some custom info, text or whatever. When the menu item has no children, but still some sub container is displayed.
+- `eclMegaMenuFeatured: unknown = contentChild(forwardRef(() => EclMegaMenuFeaturedComponent), { descendants: false })`
+- `eclMegaMenuInfo: unknown = contentChild(forwardRef(() => EclMegaMenuInfoComponent))` — Element, that would contain some info about the current item or it's children. First in the container.
+- `eclMegaMenuMega: unknown = viewChild<ElementRef>('eclMegaMenuMega')` — The wrapper around the subitems, if any.
+- `eclMegaMenuSublist: unknown = contentChild(forwardRef(() => EclMegaMenuSublistDirective))` — Element, that holds the sub items of the current menu items.
+- `eclMegaMenuSublists: unknown = contentChildren(forwardRef(() => EclMegaMenuSublistDirective), { descendants: true })`
 - `el: unknown = inject(ElementRef)`
 - `hasPopup: unknown = this.hasChildren ? true : null`
 - `isCurrent: unknown = false`
 - `isExpanded: unknown = false`
 - `isMobileBreakpoint: unknown = false`
-- `mainPanel: ElementRef` — This elemend hold some extra content, different from subitems. For example just some text or some custom links, etc.
+- `mainPanel: unknown = viewChild<ElementRef>('mainPanel')` — This elemend hold some extra content, different from subitems. For example just some text or some custom links, etc.
 - `megaMenuMegaStyleHeight: unknown = signal<number | null>(null)`
 - `megaMenuMegaStyleOpacity: unknown = signal<number | null>(null)`
-- `menuBtn: EclButtonComponent` — Element, tat is rendered if the menu item has children.
-- `menuLink: EclLinkDirective` — Actual link of the menu item. If the menu has no children, but redirects/loads another page.
+- `menuBtn: unknown = viewChild<EclButtonComponent>('menuBtn')` — Element, tat is rendered if the menu item has children.
+- `menuLink: unknown = viewChild(EclLinkDirective)` — Actual link of the menu item. If the menu has no children, but redirects/loads another page.
 - `renderer: unknown = inject(Renderer2)`
 - `wrapperStyleHeight: number | null = null`
 - `wrapperStyleTop: number | null = null`
@@ -1386,7 +1386,7 @@ Inputs:
 - `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.
-- `linkExtraAttributes: { [key: string]: string; } = undefined` — Adds custom attributes to an anchor element.
+- `linkExtraAttributes: Record<string, string> = undefined` — Adds custom attributes to an anchor element.
 - `queryParams: Params | null = null`
 - `queryParamsHandling: QueryParamsHandling = null`
 - `routerLink: string | any[] = null`
@@ -1400,15 +1400,15 @@ Outputs:
 - `megaMenuSubItemKeydown: EventEmitter = new EventEmitter()`
 
 Properties:
-- `eclMegaMenuFeatured: EclMegaMenuFeaturedComponent` — The component for the featured items.
+- `eclMegaMenuFeatured: unknown = contentChild(forwardRef(() => EclMegaMenuFeaturedComponent))` — The component for the featured items.
 - `isCurrent: unknown = false`
 - `isExpanded: unknown = false`
 - `isMobileBreakpoint: unknown = false`
 - `level2StyleHeight: number | null = null` — Used to set the height of the second level subitems container.
-- `megaMenuLevel2: ElementRef` — Wrapper div element of the second level sub-items.
-- `submenu?: EclMegaMenuSublistDirective` — The directive of the submenu lits.
-- `subMenuItemBtn: EclButtonComponent` — The button element, if it exists. Item can have either link or button.
-- `subMenuItemLink: EclLinkDirective` — The link element, if it exists. Item can have either link or button.
+- `megaMenuLevel2: unknown = viewChild<ElementRef>('megaMenuLevel2')` — Wrapper div element of the second level sub-items.
+- `submenu: unknown = contentChild(forwardRef(() => EclMegaMenuSublistDirective))` — The directive of the submenu lits.
+- `subMenuItemBtn: unknown = viewChild<EclButtonComponent>('subMenuItemBtn')` — The button element, if it exists. Item can have either link or button.
+- `subMenuItemLink: unknown = viewChild(EclLinkDirective)` — The link element, if it exists. Item can have either link or button.
 
 Methods:
 - `getMegaMenuSubItemHeight(): number`
@@ -1442,22 +1442,22 @@ Outputs:
 
 Properties:
 - `breakpointsValue: any = { isMobile: false, isTablet: false, isLtDesktop: false, isDesktop: false, isXL: false, isXXL: false, }` — Represents the current viewport breakpoint states.
-- `btnNext: EclButtonComponent` — When there is an overflow of the menu, the 'next' button to navigate to next hidden items.
-- `btnPrevious: EclButtonComponent` — When there is an overflow of the menu, the 'previous' button to navigate back to first hidden items.
+- `btnNext: unknown = viewChild<EclButtonComponent>('btnNext')` — When there is an overflow of the menu, the 'next' button to navigate to next hidden items.
+- `btnPrevious: unknown = viewChild<EclButtonComponent>('btnPrevious')` — When there is an overflow of the menu, the 'previous' button to navigate back to first hidden items.
 - `eclRootMenuItems: QueryList<EclMenuItemComponent>` — The main items of the menu.
 - `hasOverflow: unknown = false`
 - `hasTransition: unknown = false` — Controls the delayed application of CSS transition class (prevents Chrome flash on load)
-- `innerSection: ElementRef` — The element, that wraps the main menu items and the back and forth button.
+- `innerSection: unknown = viewChild<ElementRef>('innerSection')` — The element, that wraps the main menu items and the back and forth button.
 - `innerStyleTop: number | null = null`
 - `isHamburgerMenuOpened: unknown = false`
 - `isMenuHidden: unknown = false`
 - `isMobileBreakpoint: unknown = false`
 - `isPrevBtnCurrentClass: unknown = false` — Show/hide the specific class for the 'previous' and 'next' buttons.
 - `isTablet: unknown = false`
-- `itemsList: ElementRef` — The element that wraps the main menu items.
+- `itemsList: unknown = viewChild<ElementRef>('itemsList')` — The element that wraps the main menu items.
 - `menuListStyleLeft: string = 'auto'`
 - `menuListStyleRight: string = 'auto'`
-- `openCloseButton: EclButtonComponent` — The button to open/close menu in mobile mode.
+- `openCloseButton: unknown = viewChild<EclButtonComponent>('openCloseButton')` — The button to open/close menu in mobile mode.
 - `overlayStyleTop: number | null = null`
 
 Methods:
@@ -1512,9 +1512,9 @@ Properties:
 - `isHovered: unknown = false`
 - `isMobileBreakpoint: unknown = false`
 - `isVisible: unknown = true` — Used when menu has overlay, to show if the item is currently displayed.
-- `menuButton: EclButtonComponent` — The element of the menu item, when item has children.
-- `menuLink: ElementRef<HTMLAnchorElement>` — The element of the menu item, when there are no children.
-- `submenu: EclMenuMegaComponent`
+- `menuButton: unknown = viewChild(EclButtonComponent)` — The element of the menu item, when item has children.
+- `menuLink: unknown = viewChild<ElementRef<HTMLAnchorElement>>('menuLink')` — The element of the menu item, when there are no children.
+- `submenu: unknown = contentChild(forwardRef(() => EclMenuMegaComponent))`
 
 Methods:
 - `checkMenuItem(maxLines: number, isMobileBreakpoint: boolean): void` — This method calculates height and width of an item, depending the maximum of lines(rows) allowed. Depends on the 'maxLines' property of the parent menu component.
@@ -1588,10 +1588,10 @@ Properties:
 - `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).
+- `iconComponents: unknown = contentChildren(forwardRef(() => EclIconComponent))` — If menu item includes any icon, added by the user (for example for 'external' link).
 - `isExpanded: unknown = true`
-- `links: QueryList<EclLinkDirective>` — If menu item includes any links, added by the user.
-- `megaMenuLink: ElementRef` — The actual link of the menu item.
+- `links: unknown = contentChildren(forwardRef(() => EclLinkDirective))` — If menu item includes any links, added by the user.
+- `megaMenuLink: unknown = viewChild<ElementRef>('megaMenuLink')` — The actual link of the menu item.
 - `role: string = 'listitem'` — The default role of the DOM element is 'listitem', should not be changed.
 
 Methods:
@@ -1637,7 +1637,7 @@ Outputs:
 
 Properties:
 - `eclModalBody: unknown = contentChild(EclModalBodyComponent)` — Body component projected into the modal.
-- `` eclModalBodyId: string = `ecl-modal-body-${uniqueId()}` `` — Unique ID for the modal body. Used for accessibility ( aria-describedby on the modal container).
+- `` eclModalBodyId: unknown = `ecl-modal-body-${uniqueId()}` `` — Unique ID for the modal body. Used for accessibility ( aria-describedby on the modal container).
 - `eclModalCloseComponents: unknown = contentChildren(forwardRef(() => EclModalCloseDirective), { descendants: true })` — All close directives projected inside the modal.
 - `eclModalHeader: unknown = contentChild(forwardRef(() => EclModalHeaderComponent))` — Header component projected into the modal.
 - `isOpen: unknown = signal(false)` — Controls whether the modal is open.
@@ -1718,7 +1718,7 @@ Outputs:
 - `eclChange: string[]` — Emits an array of selected option values when the selection changes.
 
 Properties:
-- `eclOptionItems: QueryList<EclMultiselectOptionDirective>` — List of option directives projected into the component.
+- `eclOptionItems: unknown = contentChildren(forwardRef(() => EclMultiselectOptionDirective))` — List of option directives projected into the component.
 - `injector: unknown = inject(Injector)`
 
 Methods:
@@ -1746,10 +1746,10 @@ Outputs:
 
 Properties:
 - `ariaDescribedby: string | undefined = undefined` — Optional ARIA description used for accessibility purposes.
-- `clearAllBtn: ElementRef`
-- `closeBtn: ElementRef`
+- `clearAllBtn: unknown = viewChild('clearAllBtn', { read: ElementRef })`
+- `closeBtn: unknown = viewChild('closeBtn', { read: ElementRef })`
 - `counterLabel: string = 'ecl.multiselect.SELECTED'` — Label for the selections counter, read by screen readers.
-- `eclMultiselectInput: EclMultiselectInputComponent`
+- `eclMultiselectInput: unknown = viewChild<EclMultiselectInputComponent>('eclMultiselectInput')`
 - `form: FormGroup` — Reactive form group managing internal form state.
 - `hasSearchBox: unknown = true` — Enables the search box in the dropdown interface.
 - `hasSelectAll: unknown = true` — Displays the "Select all" checkbox above the list of options.
@@ -1762,8 +1762,8 @@ Properties:
 - `multiOptionComponents: QueryList<EclMultiselectOptionComponent>`
 - `multiOptionDirectives: EclMultiselectOptionDirective[] = []` — List of option directives currently rendered in the dropdown.
 - `optionsCount: number = 0` — Total number of options available in the dropdown list.
-- `searchInput: ElementRef`
-- `selectAllCheckbox: ElementRef`
+- `searchInput: unknown = viewChild<ElementRef>('searchInput')`
+- `selectAllCheckbox: unknown = viewChild<ElementRef>('selectAllCheckbox')`
 - `selectedItems: unknown = computed(() => this._selectedItems().map((item) => item.label))` — Gets labels of currently selected options.
 - `toggleLabel: string | undefined = undefined` — Label displayed for the toggle button to assist screen readers.
 
@@ -1829,7 +1829,7 @@ Properties:
 - `ariaDescribedbyFull: unknown = computed(() => { const describedby = this.ariaDescribedby(); const counter = this.counterId(); return [describedby, counter].filter(Boolean).join(' ') || undefi…` — Computed ARIA describedby combining the input value with the counter ID.
 - `buttonText: unknown = computed(() => { const items = this.selectedItems(); return items.length === 0 ? this.inputPlaceholder() : items.join(','); })` — Returns the label text shown inside the button.
 - `counterId: unknown = signal(crypto.randomUUID())` — Unique ID for the counter element.
-- `inputMultiselect: ElementRef` — Reference to the internal input element.
+- `inputMultiselect: unknown = viewChild<ElementRef>('inputMultiselect')` — Reference to the internal input element.
 - `isActive: unknown = computed(() => this.isDropdownExpanded())` — Indicates that the dropdown is expanded (active).
 - `isShowCounter: unknown = computed(() => this.selectedItems().length > 0)` — Displays a count badge when items are selected.
 - `selectedItemsCount: unknown = computed(() => this.selectedItems().length)` — Returns the count of selected items.
@@ -1878,7 +1878,7 @@ Outputs:
 
 Properties:
 - `changes: unknown = new Subject()`
-- `eclCheckboxInput: ElementRef`
+- `eclCheckboxInput: unknown = viewChild<ElementRef>('checkboxInput')`
 - `keyword: string = ''`
 
 Methods:
@@ -1905,7 +1905,7 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `listItems: QueryList<EclNavigationListItemComponent>` — The list of navigation list items.
+- `listItems: unknown = contentChildren(forwardRef(() => EclNavigationListItemComponent))` — The list of navigation list items.
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -1924,7 +1924,7 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `eclContentBlock: EclContentBlockComponent`
+- `eclContentBlock: unknown = contentChild(forwardRef(() => EclContentBlockComponent))`
 - `hasBorder: unknown = true`
 - `role: string = 'article'` — The role of the underlying HTML element is 'article', should not be changed.
 
@@ -1946,14 +1946,14 @@ Outputs:
 - `itemSwitch: EclNewsTickerItemEvent` — Emits when the visible news ticker item changes. The payload is an instance of EclNewsTickerItemEvent .
 
 Properties:
-- `firstHiddenItem: EclNewsTickerItemComponent` — Reference to the hidden first item used for looping.
+- `firstHiddenItem: unknown = viewChild<EclNewsTickerItemComponent>('firstHiddenItem')` — Reference to the hidden first item used for looping.
 - `itemIndex: number = 1`
-- `lastHiddenItem: EclNewsTickerItemComponent` — Reference to the hidden last item used for looping.
-- `newsTickerItems: QueryList<EclNewsTickerItemComponent>` — Query list of all EclNewsTickerItemComponent children projected into this component.
-- `pauseBtn: EclButtonComponent` — Reference to the pause button used to stop autoplay.
-- `playBtn: EclButtonComponent` — Reference to the play button used to start autoplay.
+- `lastHiddenItem: unknown = viewChild<EclNewsTickerItemComponent>('lastHiddenItem')` — Reference to the hidden last item used for looping.
+- `newsTickerItems: unknown = contentChildren(EclNewsTickerItemComponent)` — Query list of all EclNewsTickerItemComponent children projected into this component.
+- `pauseBtn: unknown = viewChild<EclButtonComponent>('pauseBtn')` — Reference to the pause button used to stop autoplay.
+- `playBtn: unknown = viewChild<EclButtonComponent>('playBtn')` — Reference to the play button used to start autoplay.
 - `playing: unknown = false`
-- `slidesContainer: ElementRef` — Reference to the container element that holds the slides.
+- `slidesContainer: unknown = viewChild<ElementRef>('slidesContainer')` — Reference to the container element that holds the slides.
 - `slidesTransform: string = ''`
 - `transitionDuration: number`
 
@@ -1984,7 +1984,7 @@ Outputs:
 - `itemFocused: EventEmitter = new EventEmitter<null>()` — Emitted when the internal link receives focus (used to cancel autoplay).
 
 Properties:
-- `eclLink: EclLinkDirective` — Optional projected ecl-link element within the news ticker item.
+- `eclLink: unknown = contentChild(EclLinkDirective)` — Optional projected ecl-link element within the news ticker item.
 - `el: unknown = inject(ElementRef)`
 - `role: string = 'listitem'` — Declares ARIA role as list item for accessibility.
 
@@ -2036,8 +2036,8 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `eclBackgroundPicture: EclPageHeaderBackgroundPictureDirective` — Reference to the background picture directive, if present.
-- `eclBreadcrumbComponent: EclBreadcrumbComponent` — Reference to the ECL breadcrumb inside the header.
+- `eclBackgroundPicture: unknown = contentChild(EclPageHeaderBackgroundPictureDirective)` — Reference to the background picture directive, if present.
+- `eclBreadcrumbComponent: unknown = contentChild(EclBreadcrumbComponent)` — Reference to the ECL breadcrumb inside the header.
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -2168,7 +2168,7 @@ Outputs:
 
 Properties:
 - `cmpClass: unknown = true` — Adds the ecl-pagination class to the host element.
-- `eclPaginationList: EclPaginationListDirective` — Reference to the pagination list directive inside the component's content.
+- `eclPaginationList: unknown = contentChild(EclPaginationListDirective)` — Reference to the pagination list directive inside the component's content.
 - `model: unknown = EuiPagination.create()` — Internal pagination model storing pagination data and logic.
 - `role: string = 'navigation'` — Sets the ARIA role to indicate navigation.
 
@@ -2231,9 +2231,9 @@ Outputs:
 - `openEvent`
 
 Properties:
-- `eclPopoverContainerElement: ElementRef` — Reference to the popover container element.
-- `eclPopoverScrollableElement: ElementRef` — Reference to the scrollable content element inside the popover.
-- `eclPopoverToggle: EclPopoverToggleDirective` — Reference to the toggle element used to open/close the popover.
+- `eclPopoverContainerElement: unknown = viewChild<ElementRef>('container')` — Reference to the popover container element.
+- `eclPopoverScrollableElement: unknown = viewChild<ElementRef>('scrollable')` — Reference to the scrollable content element inside the popover.
+- `eclPopoverToggle: unknown = contentChild(EclPopoverToggleDirective)` — Reference to the toggle element used to open/close the popover.
 
 Methods:
 - `handlePushClass(direction: string): void` — Check whether the popover is going out of its scrollable container and apply the needed repositioning.
@@ -2633,18 +2633,18 @@ Outputs:
 - `logoClick: EclSiteHeaderLogoClickEvent`
 
 Properties:
-- `bannerHeader: ElementRef`
-- `eclHeaderImage: EclSiteHeaderImageDirective`
-- `eclHeaderLink: EclSiteHeaderLinkDirective`
-- `eclLanguageComponent: EclSiteHeaderLanguageComponent`
-- `eclLoginComponent: EclSiteHeaderLoginComponent`
-- `eclMegaMenuComponent: EclMegaMenuComponent`
-- `eclMenuComponent: EclMenuComponent`
-- `eclNotificationComponent: EclSiteHeaderNotificationComponent`
-- `eclSearchComponent: EclSiteHeaderSearchComponent`
+- `bannerHeader: unknown = viewChild<ElementRef>('bannerHeader')`
+- `eclHeaderImage: unknown = contentChild(forwardRef(() => EclSiteHeaderImageDirective))`
+- `eclHeaderLink: unknown = contentChild(forwardRef(() => EclSiteHeaderLinkDirective))`
+- `eclLanguageComponent: unknown = contentChild(EclSiteHeaderLanguageComponent)`
+- `eclLoginComponent: unknown = contentChild(EclSiteHeaderLoginComponent)`
+- `eclMegaMenuComponent: unknown = contentChild(EclMegaMenuComponent)`
+- `eclMenuComponent: unknown = contentChild(EclMenuComponent)`
+- `eclNotificationComponent: unknown = contentChild(EclSiteHeaderNotificationComponent)`
+- `eclSearchComponent: unknown = contentChild(EclSiteHeaderSearchComponent)`
 - `eclThemeService: unknown = inject(EclThemeService)`
-- `siteHeaderHeader: ElementRef`
-- `topContainerElement: ElementRef`
+- `siteHeaderHeader: unknown = viewChild<ElementRef>('siteHeaderHeader')`
+- `topContainerElement: unknown = viewChild<ElementRef>('topContainer')`
 
 Methods:
 - `hasCustomLink(): boolean`
@@ -2665,9 +2665,9 @@ Inputs:
 
 Properties:
 - `class: string = 'ecl-site-header__custom-action'`
-- `eclSiteHeaderCustomActionLink: EclSiteHeaderCustomActionLinkDirective`
+- `eclSiteHeaderCustomActionLink: unknown = contentChild(EclSiteHeaderCustomActionLinkDirective)`
 - `isOverlayExpanded: unknown = false` — Used to expand/collapse the dropdown, if any.
-- `title: EclSiteHeaderCustomActionTitleDirective`
+- `title: unknown = contentChild(EclSiteHeaderCustomActionTitleDirective)`
 - `titleId: string`
 
 Methods:
@@ -2709,7 +2709,7 @@ Outputs:
 
 Properties:
 - `euColumnsCount: number = 1`
-- `euLanguages: Array<EuiLanguage> = []` — Array of EU languages, that can be selected for the current site.
+- `euLanguages: EuiLanguage[] = []` — Array of EU languages, that can be selected for the current site.
 - `isFull: boolean` — This property is used for dropdown positioning on the screen.
 - `isLanguagesDropdownVisible: unknown = false`
 - `isPushLeft: boolean` — This property is used for dropdown positioning on the screen.
@@ -2718,12 +2718,12 @@ Properties:
 - `LANGUAGE_MAX_COLUMNS: number = 8`
 - `languageArrowPosition: string` — This property is used for dropdown positioning on the screen.
 - `languageCode: string = 'en'`
-- `languageLinkElement: ElementRef<HTMLAnchorElement>` — The link to open the popover dialog.
-- `languagePopover: EclSiteHeaderLanguagePopoverComponent` — The language popover, that shows all available languages (configured in the config file of the current site).
+- `languageLinkElement: unknown = viewChild('languageLink', { read: ElementRef })` — The link to open the popover dialog.
+- `languagePopover: unknown = viewChild(EclSiteHeaderLanguagePopoverComponent)` — The language popover, that shows all available languages (configured in the config file of the current site).
 - `leftPosition: number`
 - `MOBILE_BREAKPOINT: number = 768`
 - `nonEuColumnsCount: number = 1`
-- `nonEuLanguages: Array<EuiLanguage> = []` — Array of non-EU languages, that can be selected for the current site.
+- `nonEuLanguages: EuiLanguage[] = []` — Array of non-EU languages, that can be selected for the current site.
 - `rightPosition: number`
 
 Methods:
@@ -2744,11 +2744,11 @@ 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:
-- `euLanguages: Array<EuiLanguage> = []`
+- `euLanguages: EuiLanguage[] = []`
 - `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'.
-- `nonEuLanguages: Array<EuiLanguage> = []`
+- `nonEuLanguages: 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'.
@@ -2768,7 +2768,7 @@ Outputs:
 Properties:
 - `el: unknown = inject(ElementRef)`
 - `labelledBy: string = 'ecl-site-header__language-title'`
-- `languageContent: ElementRef` — The div, that wraps all the languages.
+- `languageContent: unknown = viewChild<ElementRef>('languageContent')` — The div, that wraps all the languages.
 - `languageContentMaxHeight: number`
 - `role: string = 'dialog'` — The role of the dialog is 'dialog'. Should not be changed.
 
@@ -2799,7 +2799,7 @@ Properties:
 - `class: string = 'ecl-site-header__login-container'`
 - `isLoginBoxActive: unknown = false` — If login popover is open (true) or closed (false).
 - `loginArrowPosition: string` — The position of the arrow of the popover.
-- `loginLinkElement: ElementRef<HTMLAnchorElement>`
+- `loginLinkElement: unknown = viewChild('loginLink', { read: ElementRef })`
 - `TABLET_BREAKPOINT: number = 996`
 
 Methods:
@@ -2850,7 +2850,7 @@ Properties:
 - `isSearchBoxActive: unknown = false`
 - `role: string = 'search'` — The default role of the component is 'search', should not be changed.
 - `searchArrowPosition: string` — The arrow position of the serahc dropdown, when in mobile mode.
-- `searchLinkElement: ElementRef<HTMLAnchorElement>` — The search link element from the view, i.e. the search button.
+- `searchLinkElement: unknown = viewChild('searchLink', { read: ElementRef })` — The search link element from the view, i.e. the search button.
 
 Methods:
 - `getSearchBoxCssClasses(): string`
@@ -3073,11 +3073,11 @@ Outputs:
 
 Properties:
 - `_isActive: unknown = signal(false)`
-- `contentTemplate: TemplateRef<any>` — Reference to the tab content template.
+- `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: EclTabLabelComponent` — Reference to the projected tab label component.
-- `link: EclLinkDirective` — Reference to the internal link directive used in the tab.
+- `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.
 - `tabLabel: string = ''` — Contains the inner HTML of the tab label.
 
 Methods:
@@ -3144,9 +3144,9 @@ Outputs:
 
 Properties:
 - `autoInitialized: string = 'true'` — Marks the component as initialized, enabling ECL CSS that depends on this attribute.
-- `btnNext: EclButtonComponent` — Reference to the scroll next button.
-- `btnPrev: EclButtonComponent` — Reference to the scroll previous button.
-- `dropdownList: ElementRef` — Reference to the dropdown list containing overflowed tabs.
+- `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.
@@ -3154,11 +3154,11 @@ Properties:
 - `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: EclButtonComponent` — Reference to the "more" button.
-- `moreItem: ElementRef` — Reference to the "more" item container in the tab 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: QueryList<EclTabComponent>` — All projected tabs inside the component.
-- `tabsList: ElementRef` — Reference to the visible tab list container.
+- `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.
@@ -3229,7 +3229,7 @@ Inputs:
 
 Properties:
 - `isExpanded: boolean | null = null`
-- `timelineItems: QueryList<EclTimelineItemComponent>` — List of projected EclTimelineItemComponent instances. Collected using @ContentChildren .
+- `timelineItems: unknown = contentChildren(forwardRef(() => EclTimelineItemComponent))` — List of projected EclTimelineItemComponent instances. Collected using @ContentChildren .
 
 Methods:
 - `onFocusFirstExpandedLink(item: EclTimelineItemComponent): void` — Focuses the first link in the expanded timeline item, ensuring it's only done once per toggle group interaction.
@@ -3257,10 +3257,10 @@ Outputs:
 - `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.
-- `eclTimelineItemLabel: ElementRef` — Reference to a projected label for the item. Used to set height, when item has no content and title.
-- `timelineItemToggler: EclTimelineItemTogglerComponent` — Reference to a projected custom toggler component.
-- `timelineTitle: EclTimelineItemTitleDirective`
+- `eclLink: unknown = contentChild(forwardRef(() => EclLinkDirective))` — Reference to a projected ECL link, used for setting focus after toggle.
+- `eclTimelineItemLabel: unknown = contentChild(forwardRef(() => EclTimelineItemLabelDirective), { read: ElementRef })` — Reference to a projected label for the item. Used to set height, when item has no content and title.
+- `timelineItemToggler: unknown = contentChild(forwardRef(() => EclTimelineItemTogglerComponent))` — Reference to a projected custom toggler component.
+- `timelineTitle: unknown = contentChild(forwardRef(() => EclTimelineItemTitleDirective))`
 
 Methods:
 - `hasDefaultToggler(): boolean` — Checks whether the default toggler UI should be used. Returns true if this is a toggler and no custom toggler component is projected.
@@ -3661,10 +3661,10 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `eclCheckboxHelpComponent: EclCheckboxHelpComponent` — Child help component projected into the checkbox.
-- `eclCheckboxLabelComponent: EclCheckboxLabelComponent` — Child label component projected into the checkbox.
-- `eclFormLabelDirective: EclFormLabelComponent` — Optional form label component projected into the checkbox.
-- `eclHelpBlockDirective: EclHelpBlockDirective` — Optional help block directive projected into the checkbox.
+- `eclCheckboxHelpComponent: unknown = contentChild(forwardRef(() => EclCheckboxHelpComponent))` — Child help component projected into the checkbox.
+- `eclCheckboxLabelComponent: unknown = contentChild(forwardRef(() => EclCheckboxLabelComponent))` — Child label component projected into the checkbox.
+- `eclFormLabelDirective: unknown = contentChild(forwardRef(() => EclFormLabelComponent))` — Optional form label component projected into the checkbox.
+- `eclHelpBlockDirective: unknown = contentChild(forwardRef(() => EclHelpBlockDirective))` — Optional help block directive projected into the checkbox.
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4117,7 +4117,7 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `eclListItems: QueryList<EclDescriptionListDefinitionComponent>`
+- `eclListItems: unknown = contentChildren(EclDescriptionListDefinitionComponent)`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4419,8 +4419,8 @@ Inputs:
 
 Properties:
 - `isVideo: unknown = false`
-- `sources: Array<EclGalleryMediaSource> = []`
-- `tracks: Array<EclGalleryMediaTrack> = []`
+- `sources: EclGalleryMediaSource[] = []`
+- `tracks: EclGalleryMediaTrack[] = []`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4440,7 +4440,7 @@ Inputs:
 Properties:
 - `img: EclGalleryPictureImage = {}`
 - `isThumbnail: unknown = false`
-- `sources: Array<EclGalleryPictureSource> = []`
+- `sources: EclGalleryPictureSource[] = []`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4722,7 +4722,7 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `eclIllustrationImage: EclListIllustrationImageDirective`
+- `eclIllustrationImage: unknown = contentChild.required(forwardRef(() => EclListIllustrationImageDirective))`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4833,7 +4833,7 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `contentIframe: EclMediaContainerIframeDirective`
+- `contentIframe: unknown = contentChild(EclMediaContainerIframeDirective)`
 - `el: unknown = inject(ElementRef)`
 - `isVideo: unknown = false`
 
@@ -5017,10 +5017,10 @@ Properties:
 - `cmpClass: unknown = true`
 - `el: unknown = inject(ElementRef)`
 - `isScrollable: unknown = false`
-- `spacer: QueryList<EclMegaMenuSpacerDirective>`
+- `spacer: unknown = contentChild(forwardRef(() => EclMegaMenuSpacerDirective))`
 - `styleHeight: unknown = signal<number | null>(null)`
 - `styleTop: number | null = null`
-- `submenuItems: QueryList<EclMegaMenuSubitemComponent>`
+- `submenuItems: unknown = contentChildren(forwardRef(() => EclMegaMenuSubitemComponent))`
 
 Methods:
 - `onParentMegaMenuItemClick(isExpanded: boolean): void` — When parent mega-menu item is clicked.
@@ -5100,7 +5100,7 @@ Inputs:
 
 Properties:
 - `changes: unknown = new Subject()` — Emits whenever the option's state changes (used internally).
-- `eclOptionItems: QueryList<EclMultiselectOptionDirective>` — Nested option directives (used for optgroups).
+- `eclOptionItems: unknown = contentChildren(forwardRef(() => EclMultiselectOptionDirective))` — Nested option directives (used for optgroups).
 
 Methods:
 - `isOptGroup(): boolean` — Returns true if this directive is applied to an element.
@@ -5505,8 +5505,8 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `eclRadioHelpComponent: EclRadioHelpComponent` — Reference to the projected EclRadioHelpComponent, if present. Used to synchronize the disabled state with the help text.
-- `eclRadioLabelComponent: EclRadioLabelComponent` — Reference to the projected EclRadioLabelComponent, if present. Used to synchronize disabled and invalid states with the label.
+- `eclRadioHelpComponent: unknown = contentChild(forwardRef(() => EclRadioHelpComponent))` — Reference to the projected EclRadioHelpComponent, if present. Used to synchronize the disabled state with the help text.
+- `eclRadioLabelComponent: unknown = contentChild(forwardRef(() => EclRadioLabelComponent))` — Reference to the projected EclRadioLabelComponent, if present. Used to synchronize disabled and invalid states with the label.
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6016,7 +6016,7 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `eclIcon: EclIconComponent`
+- `eclIcon: unknown = contentChild(EclIconComponent)`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6215,7 +6215,7 @@ Outputs:
 - `sort: EventEmitter = new EventEmitter<EclSortTableEvent>()` — Emits an event when a column sort is triggered.
 
 Properties:
-- `eclTableHeaders: QueryList<EclTableHeaderDirective>` — List of header directives detected in the content.
+- `eclTableHeaders: unknown = contentChildren(forwardRef(() => EclTableHeaderDirective), { descendants: true })` — List of header directives detected in the content.
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6233,7 +6233,7 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `eclTableHeaders: QueryList<EclTableHeaderDirective>` — List of header directives under this head element.
+- `eclTableHeaders: unknown = contentChildren(forwardRef(() => EclTableHeaderDirective), { descendants: true })` — List of header directives under this head element.
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -6556,15 +6556,15 @@ Properties:
 
 Methods:
 - `getAllLanguageCodes(): string[]`
-- `getAllLanguages(): Array<EclLanguage>`
-- `getConfiguredLanguages(): Array<EclLanguage>`
+- `getAllLanguages(): EclLanguage[]`
+- `getConfiguredLanguages(): EclLanguage[]`
 - `getCurrentLanguage(): EclLanguage`
-- `getEULanguageCodes(): Array<string>`
+- `getEULanguageCodes(): string[]`
 - `getEULanguageOrFallback(code: string): EclLanguage`
-- `getEULanguages(): Array<EclLanguage>`
+- `getEULanguages(): EclLanguage[]`
 - `getFallbackLanguage(): EclLanguage`
 - `getLanguageByCode(code: string): EclLanguage`
-- `getLanguagesByCodes(codes: Array<string>): Array<EclLanguage>`
+- `getLanguagesByCodes(codes: string[]): EclLanguage[]`
 - `isEuLanguage(code: string): boolean`
 - `isRtlLanguage(code: string): boolean`
 - `updateCurrentLanguage(lang: EclLanguage): void`
@@ -6618,7 +6618,7 @@ File: `packages/ecl/components/ecl-mega-menu/services/ecl-mega-menu.service.ts`
 providedIn: `root`
 
 Methods:
-- `setExtraAttributesForLink(link: HTMLElement, linkExtraAttributes: { }): void`
+- `setExtraAttributesForLink(link: HTMLElement, linkExtraAttributes: Record<string, string>): void`
 
 ### EclRtlService
 
@@ -6911,16 +6911,16 @@ Properties:
 - `currentLanguage$: Observable<EclLanguage>`
 
 Methods:
-- `getAllLanguageCodes(): Array<string>`
-- `getAllLanguages(): Array<EclLanguage>`
-- `getConfiguredLanguages(): Array<EclLanguage>`
+- `getAllLanguageCodes(): string[]`
+- `getAllLanguages(): EclLanguage[]`
+- `getConfiguredLanguages(): EclLanguage[]`
 - `getCurrentLanguage(): EclLanguage`
-- `getEULanguageCodes(): Array<string>`
+- `getEULanguageCodes(): string[]`
 - `getEULanguageOrFallback(code: string): EclLanguage`
-- `getEULanguages(): Array<EclLanguage>`
+- `getEULanguages(): EclLanguage[]`
 - `getFallbackLanguage(): EclLanguage`
 - `getLanguageByCode(code: string): EclLanguage`
-- `getLanguagesByCodes(codes: Array<string>): Array<EclLanguage>`
+- `getLanguagesByCodes(codes: string[]): EclLanguage[]`
 - `isEuLanguage(code: string): boolean`
 - `isRtlLanguage(code: string): boolean`
 - `updateCurrentLanguage(lang: EclLanguage): any`
@@ -7336,7 +7336,7 @@ Properties:
 File: `packages/ecl/components/ecl-mega-menu/models/ecl-mega-menu-item.model.ts`
 
 Properties:
-- `children?: Array<EclMegaMenuItem>`
+- `children?: EclMegaMenuItem[]`
 - `hasChildren?: boolean`
 - `hasFeatured?: boolean`
 - `id?: string`
@@ -7349,7 +7349,7 @@ Properties:
 File: `packages/ecl/components/ecl-menu/models/ecl-menu-item.model.ts`
 
 Properties:
-- `children?: Array<EclMenuItem>`
+- `children?: EclMenuItem[]`
 - `hasChildren?: boolean`
 - `id?: string`
 - `isCurrent?: boolean`