@design-factory/angular 21.1.0 → 22.0.0-next.0

package/fesm2022/design-factory-angular-topnav.mjs

@@ -1,13 +1,15 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, contentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, input, computed, signal, inject, ElementRef, forwardRef, Directive, ContentChildren, booleanAttribute, output, contentChild, TemplateRef, viewChild, effect, untracked, DOCUMENT, model, isDevMode } from '@angular/core';
 import { NgTemplateOutlet, TitleCasePipe } from '@angular/common';
-import { toAngularSignal, lg$, md$, xl$, sm$ } from '@design-factory/angular/internals';
+import * as i0 from '@angular/core';
+import { InjectionToken, contentChildren, ViewEncapsulation, Component, input, computed, signal, inject, ElementRef, effect, Directive, booleanAttribute, output, contentChild, TemplateRef, viewChild, untracked, DOCUMENT, viewChildren, model, isDevMode } from '@angular/core';
+import { trackWindow } from '@design-factory/angular/breakpoints';
+import { DfButton, DfIconButton } from '@design-factory/angular/button';
 import { RouterLink, RouterLinkActive } from '@angular/router';
-import { NgbDropdown, NgbDropdownAnchor, NgbDropdownItem, NgbDropdownMenu, NgbDropdownToggle } from '@ng-bootstrap/ng-bootstrap/dropdown';
 import { generateId } from '@design-factory/core/utils/id';
+import { DfIcon } from '@design-factory/angular/icon';
+import { DfDropdown, DfDropdownItemLink, DfDropdownItemButton, DfDropdownToggle } from '@design-factory/angular/dropdown';
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap/popover';
 import { DfDrawer } from '@design-factory/angular/drawer';
-import { DfSidenavComponent, DfSidenavItemComponent, DfSidenavLinkComponent } from '@design-factory/angular/sidenav';
+import { DfSidenavInput } from '@design-factory/angular/sidenav';
 import { DfThemeService } from '@design-factory/angular/theme';
 
 /**
@@ -29,17 +31,18 @@ class DfTopNavNavigationElement {
  */
 class DfTopNavNavigation {
     constructor() {
-        this.childrenElements = contentChildren(DF_TOPNAV_NAVIGATION_ELEMENT, ...(ngDevMode ? [{ debugName: "childrenElements" }] : []));
+        this.childrenElements = contentChildren(DF_TOPNAV_NAVIGATION_ELEMENT, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "childrenElements" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: DfTopNavNavigation, isStandalone: true, selector: "df-topnav-navigation", host: { attributes: { "role": "list" }, classAttribute: "df-topnav-navigation" }, queries: [{ propertyName: "childrenElements", predicate: DF_TOPNAV_NAVIGATION_ELEMENT, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".df-topnav-navigation{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", type: DfTopNavNavigation, isStandalone: true, selector: "df-topnav-navigation", host: { attributes: { "role": "list" }, classAttribute: "df-topnav-navigation" }, queries: [{ propertyName: "childrenElements", predicate: DF_TOPNAV_NAVIGATION_ELEMENT, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".df-topnav-navigation{display:flex}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavNavigation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavNavigation, decorators: [{
             type: Component,
             args: [{ selector: 'df-topnav-navigation', template: `<ng-content />`, host: {
                         class: 'df-topnav-navigation',
                         role: 'list'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".df-topnav-navigation{display:flex}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, styles: [".df-topnav-navigation{display:flex}\n"] }]
         }], propDecorators: { childrenElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DF_TOPNAV_NAVIGATION_ELEMENT), { isSignal: true }] }] } });
 
 /**
@@ -54,29 +57,36 @@ class DfTopNavNavigationLink extends DfTopNavNavigationElement {
         /**
          * The label of the navigation link, which will be displayed as the link text.
          */
-        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.label = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /**
          * The external href of the navigation link, which will be used as the link target. Use {@link routerLink} for internal links.
          */
-        this.href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
+        this.href = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
         /**
          * The internal router link of the navigation link, which will be used as the link target. Use {@link href} for external links.
          */
-        this.routerLink = input(...(ngDevMode ? [undefined, { debugName: "routerLink" }] : []));
-        this.resolvedLink = computed(() => this.routerLink() ?? this.href(), ...(ngDevMode ? [{ debugName: "resolvedLink" }] : []));
-        this.externalLink = computed(() => !!this.href(), ...(ngDevMode ? [{ debugName: "externalLink" }] : []));
+        this.routerLink = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "routerLink" }] : /* istanbul ignore next */ []));
+        this.resolvedLink = computed(() => this.routerLink() ?? this.href(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedLink" }] : /* istanbul ignore next */ []));
+        this.externalLink = computed(() => !!this.href(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "externalLink" }] : /* istanbul ignore next */ []));
         /**
          * The options to determine when the link is active based on the Router state. It can be either an object of type IsActiveMatchOptions or an object with an "exact" boolean property. When not provided, it defaults to { exact: false }.
          */
-        this.routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
-        this._active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : []));
+        this.routerLinkActiveOptions = input({ exact: false }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
+        this._active = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
         /**
          * Indicates if the link is currently active based on the Router state.
          */
         this.active = this._active.asReadonly();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavNavigationLink, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfTopNavNavigationLink, isStandalone: true, selector: "df-topnav-navigation-link", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "style.display": "\"contents\"" } }, providers: [{ provide: DF_TOPNAV_NAVIGATION_ELEMENT, useExisting: DfTopNavNavigationLink }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavNavigationLink, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfTopNavNavigationLink, isStandalone: true, selector: "df-topnav-navigation-link", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "style.display": "\"contents\"" } }, providers: [{ provide: DF_TOPNAV_NAVIGATION_ELEMENT, useExisting: DfTopNavNavigationLink }], usesInheritance: true, ngImport: i0, template: `
     @if (externalLink()) {
       <a class="df-topnav-navigation-link" [attr.href]="href()" target="_blank">
         <span [attr.data-text]="label()">{{ label() }}</span>
@@ -94,9 +104,9 @@ class DfTopNavNavigationLink extends DfTopNavNavigationElement {
         <span [attr.data-text]="label()">{{ label() }}</span>
       </a>
     }
-  `, isInline: true, styles: [".df-topnav-navigation-link{height:100%;display:flex;align-items:center;padding:var(--df-spacing-5);outline:none;position:relative;gap:var(--df-spacing-3);text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-navigation-link{transition:none}}.df-topnav-navigation-link:focus-visible:before{content:\"\";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--df-topnav-navigation-link-bg-color),inset 0 0 0 4px var(--df-topnav-navigation-link-border-color)}.df-topnav-navigation-link{box-shadow:none!important;border:0;border-bottom:0!important;background-color:var(--df-topnav-navigation-link-bg-color)!important}.df-topnav-navigation-link span[data-text]{text-align:center}.df-topnav-navigation-link span[data-text]:before{content:attr(data-text);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-topnav-navigation-link.df-topnav-navigation-link-active{font-weight:var(--df-typo-weight-bold)}.df-topnav-navigation-link.df-topnav-navigation-link-active:focus-visible:before{bottom:.1875rem}.df-topnav-navigation-link.df-topnav-navigation-link-active:after{content:\"\";position:absolute;inset:0;border-bottom:.1875rem solid var(--df-topnav-navigation-link-border-color)}.df-topnav-nav-basic .df-topnav-navigation-link{color:var(--df-topnav-color-inert-basic-foreground)!important;--df-topnav-navigation-link-bg-color: var(--df-topnav-color-inert-basic-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-inert-basic-foreground)}.df-topnav-nav-basic .df-topnav-navigation-link:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-hovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-hovered-border);color:var(--df-topnav-color-basic-primary-hovered-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-pressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-pressed-border);color:var(--df-topnav-color-basic-primary-pressed-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-basic-primary-active-foreground)!important;--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-active-border)}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-activeHovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-activeHovered-border);color:var(--df-topnav-color-basic-primary-activeHovered-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-activePressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-activePressed-border);color:var(--df-topnav-color-basic-primary-activePressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link{color:var(--df-topnav-color-inert-mirror-foreground)!important;--df-topnav-navigation-link-bg-color: var(--df-topnav-color-inert-mirror-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-inert-mirror-foreground)}.df-topnav-nav-mirror .df-topnav-navigation-link:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-hovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-hovered-border);color:var(--df-topnav-color-mirror-primary-hovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-pressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-pressed-border);color:var(--df-topnav-color-mirror-primary-pressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-mirror-primary-active-foreground)!important;--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-active-border)}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-activeHovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-activeHovered-border);color:var(--df-topnav-color-mirror-primary-activeHovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-activePressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-activePressed-border);color:var(--df-topnav-color-mirror-primary-activePressed-foreground)!important}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [".df-topnav-navigation-link{height:100%;display:flex;align-items:center;padding:var(--df-spacing-5);outline:none;position:relative;gap:var(--df-spacing-3);text-decoration:none;background-color:var(--df-topnav-color-inert-mirror-background)!important;color:var(--df-topnav-color-mirror-neutral-default-foreground)!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-navigation-link{transition:none}}.df-topnav-navigation-link:focus-visible:before{content:\"\";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--df-topnav-color-inert-mirror-background),inset 0 0 0 4px var(--df-topnav-color-mirror-neutral-default-border)}.df-topnav-navigation-link{box-shadow:none!important;border:0;border-bottom:0!important}.df-topnav-navigation-link span[data-text]{text-align:center}.df-topnav-navigation-link span[data-text]:before{content:attr(data-text);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-topnav-navigation-link:hover{color:var(--df-topnav-color-mirror-primary-hovered-foreground)!important;background-color:var(--df-topnav-color-mirror-primary-hovered-background)!important}.df-topnav-navigation-link:hover:focus-visible:before{box-shadow:inset 0 0 0 2px var(--df-topnav-color-mirror-primary-hovered-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-hovered-border)}.df-topnav-navigation-link:active{color:var(--df-topnav-color-mirror-primary-pressed-foreground)!important;background-color:var(--df-topnav-color-mirror-primary-pressed-background)!important}.df-topnav-navigation-link:active:focus-visible:before{box-shadow:inset 0 0 0 2px var(--df-topnav-color-mirror-primary-pressed-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-pressed-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-mirror-primary-active-foreground)!important;font-weight:var(--df-typo-weight-bold)}.df-topnav-navigation-link.df-topnav-navigation-link-active:focus-visible:before{bottom:.1875rem;box-shadow:inset 0 0 0 2px var(--df-topnav-color-inert-mirror-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-active-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:after{content:\"\";position:absolute;inset:0;border-bottom:.1875rem solid var(--df-topnav-color-mirror-primary-active-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:hover{color:var(--df-topnav-color-mirror-primary-activeHovered-foreground)!important;background-color:var(--df-topnav-color-mirror-primary-activeHovered-background)!important}.df-topnav-navigation-link.df-topnav-navigation-link-active:hover:focus-visible:before{box-shadow:inset 0 0 0 2px var(--df-topnav-color-mirror-primary-activeHovered-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-activeHovered-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:hover.df-topnav-navigation-link-active:after{border-bottom-color:var(--df-topnav-color-mirror-primary-activeHovered-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:active{color:var(--df-topnav-color-mirror-primary-activePressed-foreground)!important;background-color:var(--df-topnav-color-mirror-primary-activePressed-background)!important}.df-topnav-navigation-link.df-topnav-navigation-link-active:active:focus-visible:before{box-shadow:inset 0 0 0 2px var(--df-topnav-color-mirror-primary-activePressed-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-activePressed-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:active.df-topnav-navigation-link-active:after{border-bottom-color:var(--df-topnav-color-mirror-primary-activePressed-border)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavNavigationLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavNavigationLink, decorators: [{
             type: Component,
             args: [{ selector: 'df-topnav-navigation-link', template: `
     @if (externalLink()) {
@@ -119,81 +129,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
   `, host: {
                         role: 'listitem',
                         '[style.display]': '"contents"'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, RouterLinkActive], providers: [{ provide: DF_TOPNAV_NAVIGATION_ELEMENT, useExisting: DfTopNavNavigationLink }], encapsulation: ViewEncapsulation.None, styles: [".df-topnav-navigation-link{height:100%;display:flex;align-items:center;padding:var(--df-spacing-5);outline:none;position:relative;gap:var(--df-spacing-3);text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-navigation-link{transition:none}}.df-topnav-navigation-link:focus-visible:before{content:\"\";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--df-topnav-navigation-link-bg-color),inset 0 0 0 4px var(--df-topnav-navigation-link-border-color)}.df-topnav-navigation-link{box-shadow:none!important;border:0;border-bottom:0!important;background-color:var(--df-topnav-navigation-link-bg-color)!important}.df-topnav-navigation-link span[data-text]{text-align:center}.df-topnav-navigation-link span[data-text]:before{content:attr(data-text);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-topnav-navigation-link.df-topnav-navigation-link-active{font-weight:var(--df-typo-weight-bold)}.df-topnav-navigation-link.df-topnav-navigation-link-active:focus-visible:before{bottom:.1875rem}.df-topnav-navigation-link.df-topnav-navigation-link-active:after{content:\"\";position:absolute;inset:0;border-bottom:.1875rem solid var(--df-topnav-navigation-link-border-color)}.df-topnav-nav-basic .df-topnav-navigation-link{color:var(--df-topnav-color-inert-basic-foreground)!important;--df-topnav-navigation-link-bg-color: var(--df-topnav-color-inert-basic-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-inert-basic-foreground)}.df-topnav-nav-basic .df-topnav-navigation-link:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-hovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-hovered-border);color:var(--df-topnav-color-basic-primary-hovered-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-pressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-pressed-border);color:var(--df-topnav-color-basic-primary-pressed-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-basic-primary-active-foreground)!important;--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-active-border)}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-activeHovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-activeHovered-border);color:var(--df-topnav-color-basic-primary-activeHovered-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-activePressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-activePressed-border);color:var(--df-topnav-color-basic-primary-activePressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link{color:var(--df-topnav-color-inert-mirror-foreground)!important;--df-topnav-navigation-link-bg-color: var(--df-topnav-color-inert-mirror-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-inert-mirror-foreground)}.df-topnav-nav-mirror .df-topnav-navigation-link:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-hovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-hovered-border);color:var(--df-topnav-color-mirror-primary-hovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-pressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-pressed-border);color:var(--df-topnav-color-mirror-primary-pressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-mirror-primary-active-foreground)!important;--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-active-border)}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-activeHovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-activeHovered-border);color:var(--df-topnav-color-mirror-primary-activeHovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-activePressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-activePressed-border);color:var(--df-topnav-color-mirror-primary-activePressed-foreground)!important}\n"] }]
+                    }, imports: [RouterLink, RouterLinkActive], providers: [{ provide: DF_TOPNAV_NAVIGATION_ELEMENT, useExisting: DfTopNavNavigationLink }], encapsulation: ViewEncapsulation.None, styles: [".df-topnav-navigation-link{height:100%;display:flex;align-items:center;padding:var(--df-spacing-5);outline:none;position:relative;gap:var(--df-spacing-3);text-decoration:none;background-color:var(--df-topnav-color-inert-mirror-background)!important;color:var(--df-topnav-color-mirror-neutral-default-foreground)!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-navigation-link{transition:none}}.df-topnav-navigation-link:focus-visible:before{content:\"\";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--df-topnav-color-inert-mirror-background),inset 0 0 0 4px var(--df-topnav-color-mirror-neutral-default-border)}.df-topnav-navigation-link{box-shadow:none!important;border:0;border-bottom:0!important}.df-topnav-navigation-link span[data-text]{text-align:center}.df-topnav-navigation-link span[data-text]:before{content:attr(data-text);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-topnav-navigation-link:hover{color:var(--df-topnav-color-mirror-primary-hovered-foreground)!important;background-color:var(--df-topnav-color-mirror-primary-hovered-background)!important}.df-topnav-navigation-link:hover:focus-visible:before{box-shadow:inset 0 0 0 2px var(--df-topnav-color-mirror-primary-hovered-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-hovered-border)}.df-topnav-navigation-link:active{color:var(--df-topnav-color-mirror-primary-pressed-foreground)!important;background-color:var(--df-topnav-color-mirror-primary-pressed-background)!important}.df-topnav-navigation-link:active:focus-visible:before{box-shadow:inset 0 0 0 2px var(--df-topnav-color-mirror-primary-pressed-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-pressed-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-mirror-primary-active-foreground)!important;font-weight:var(--df-typo-weight-bold)}.df-topnav-navigation-link.df-topnav-navigation-link-active:focus-visible:before{bottom:.1875rem;box-shadow:inset 0 0 0 2px var(--df-topnav-color-inert-mirror-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-active-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:after{content:\"\";position:absolute;inset:0;border-bottom:.1875rem solid var(--df-topnav-color-mirror-primary-active-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:hover{color:var(--df-topnav-color-mirror-primary-activeHovered-foreground)!important;background-color:var(--df-topnav-color-mirror-primary-activeHovered-background)!important}.df-topnav-navigation-link.df-topnav-navigation-link-active:hover:focus-visible:before{box-shadow:inset 0 0 0 2px var(--df-topnav-color-mirror-primary-activeHovered-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-activeHovered-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:hover.df-topnav-navigation-link-active:after{border-bottom-color:var(--df-topnav-color-mirror-primary-activeHovered-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:active{color:var(--df-topnav-color-mirror-primary-activePressed-foreground)!important;background-color:var(--df-topnav-color-mirror-primary-activePressed-background)!important}.df-topnav-navigation-link.df-topnav-navigation-link-active:active:focus-visible:before{box-shadow:inset 0 0 0 2px var(--df-topnav-color-mirror-primary-activePressed-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-activePressed-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:active.df-topnav-navigation-link-active:after{border-bottom-color:var(--df-topnav-color-mirror-primary-activePressed-border)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }] } });
 
-// TODO - Implement the dropdown mode of the TopNav using the dropdown wrapper and remove the DfTopNavDropdownToggle directive.
 /**
- * @internal
- * Temporary toggle directive for the dropdown mode of the TopNav, which will be used to toggle the dropdown menu when the navigation item is clicked.
+ * The dropdown toggle does not use dfButton styles and requires to be recoded...
  *
- * This override of ng-bootstrap allowed to avoid setting the `dropdown-toggle` class on the toggle button.
- *
- * It will be removed once the dropdown mode is implemented using a more generic approach that can be used in other components as well.
- */
-class DfTopNavDropdownToggle {
-    constructor() {
-        this.dropdown = inject(NgbDropdown);
-        this.nativeElement = inject(ElementRef).nativeElement;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavDropdownToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfTopNavDropdownToggle, isStandalone: true, selector: "[dfTopNavDropdownToggle]", host: { listeners: { "click": "dropdown.toggle()", "keydown.ArrowUp": "dropdown.onKeyDown($any($event))", "keydown.ArrowDown": "dropdown.onKeyDown($any($event))", "keydown.Home": "dropdown.onKeyDown($any($event))", "keydown.End": "dropdown.onKeyDown($any($event))", "keydown.Tab": "dropdown.onKeyDown($any($event))", "keydown.Shift.Tab": "dropdown.onKeyDown($any($event))" }, properties: { "attr.aria-expanded": "dropdown.isOpen()" } }, providers: [{ provide: NgbDropdownAnchor, useExisting: forwardRef(() => DfTopNavDropdownToggle) }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavDropdownToggle, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[dfTopNavDropdownToggle]',
-                    host: {
-                        '[attr.aria-expanded]': 'dropdown.isOpen()',
-                        '(click)': 'dropdown.toggle()',
-                        '(keydown.ArrowUp)': 'dropdown.onKeyDown($any($event))',
-                        '(keydown.ArrowDown)': 'dropdown.onKeyDown($any($event))',
-                        '(keydown.Home)': 'dropdown.onKeyDown($any($event))',
-                        '(keydown.End)': 'dropdown.onKeyDown($any($event))',
-                        '(keydown.Tab)': 'dropdown.onKeyDown($any($event))',
-                        '(keydown.Shift.Tab)': 'dropdown.onKeyDown($any($event))'
-                    },
-                    providers: [{ provide: NgbDropdownAnchor, useExisting: forwardRef(() => DfTopNavDropdownToggle) }]
-                }]
-        }] });
-/**
  * @internal
- * Temporary menu directive for the dropdown mode of the TopNav.
- *
- * This override allowed to wrap the links into a list structure and keep the keyboard navigation working.
- *
- * It will be removed once the dropdown mode is implemented using a more generic approach that can be used in other components as well.
  */
-class DfTopNavDropdownMenu {
+class DfTopNavNavigationItemDropdownToggle {
     constructor() {
-        this.dropdown = inject(NgbDropdown);
-        this.nativeElement = inject(ElementRef).nativeElement;
+        /**
+         * The dropdown instance controlled by this toggle element.
+         *
+         * Pass the referenced {@link DfDropdown} instance to connect the host button to its menu.
+         */
+        this.dropdown = input.required({ ...(ngDevMode ? { debugName: "dropdown" } : /* istanbul ignore next */ {}), alias: 'dfTopNavNavigationItemDropdownToggle' });
+        const element = inject(ElementRef).nativeElement;
+        effect(() => {
+            this.dropdown()['toggleElement'].set(element);
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavDropdownMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfTopNavDropdownMenu, isStandalone: true, selector: "[dfTopNavDropdownMenu]", host: { listeners: { "keydown.ArrowUp": "dropdown.onKeyDown($any($event))", "keydown.ArrowDown": "dropdown.onKeyDown($any($event))", "keydown.Home": "dropdown.onKeyDown($any($event))", "keydown.End": "dropdown.onKeyDown($any($event))", "keydown.Enter": "dropdown.onKeyDown($any($event))", "keydown.Space": "dropdown.onKeyDown($any($event))", "keydown.Tab": "dropdown.onKeyDown($any($event))", "keydown.Shift.Tab": "dropdown.onKeyDown($any($event))" }, properties: { "class.show": "dropdown.isOpen()" }, classAttribute: "dropdown-menu" }, providers: [{ provide: NgbDropdownMenu, useExisting: forwardRef(() => DfTopNavDropdownMenu) }], queries: [{ propertyName: "menuItems", predicate: NgbDropdownItem, descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavNavigationItemDropdownToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DfTopNavNavigationItemDropdownToggle, isStandalone: true, selector: "button[dfTopNavNavigationItemDropdownToggle]", inputs: { dropdown: { classPropertyName: "dropdown", publicName: "dfTopNavNavigationItemDropdownToggle", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <ng-content />
+    <df-icon class="fal" [class.fa-chevron-down]="!dropdown().isOpen()" [class.fa-chevron-up]="dropdown().isOpen()" />
+  `, isInline: true, dependencies: [{ kind: "component", type: DfIcon, selector: "df-icon" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavDropdownMenu, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavNavigationItemDropdownToggle, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[dfTopNavDropdownMenu]',
-                    host: {
-                        class: 'dropdown-menu',
-                        '[class.show]': 'dropdown.isOpen()',
-                        '(keydown.ArrowUp)': 'dropdown.onKeyDown($any($event))',
-                        '(keydown.ArrowDown)': 'dropdown.onKeyDown($any($event))',
-                        '(keydown.Home)': 'dropdown.onKeyDown($any($event))',
-                        '(keydown.End)': 'dropdown.onKeyDown($any($event))',
-                        '(keydown.Enter)': 'dropdown.onKeyDown($any($event))',
-                        '(keydown.Space)': 'dropdown.onKeyDown($any($event))',
-                        '(keydown.Tab)': 'dropdown.onKeyDown($any($event))',
-                        '(keydown.Shift.Tab)': 'dropdown.onKeyDown($any($event))'
-                    },
-                    providers: [{ provide: NgbDropdownMenu, useExisting: forwardRef(() => DfTopNavDropdownMenu) }]
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'button[dfTopNavNavigationItemDropdownToggle]',
+                    imports: [DfIcon],
+                    template: `
+    <ng-content />
+    <df-icon class="fal" [class.fa-chevron-down]="!dropdown().isOpen()" [class.fa-chevron-up]="dropdown().isOpen()" />
+  `
                 }]
-        }], propDecorators: { menuItems: [{
-                type: ContentChildren,
-                args: [NgbDropdownItem, { descendants: true }]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfTopNavNavigationItemDropdownToggle", required: true }] }] } });
 /**
  * The TopNav navigation item component, used to display a navigation link in the TopNav which can have child navigation links.
  *
@@ -206,63 +180,60 @@ class DfTopNavNavigationItem extends DfTopNavNavigationElement {
         /**
          * The label of the navigation item, which will be displayed as the link text.
          */
-        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.label = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /**
          * The routerLink of the navigation item, which will be used as the link target. It should be an internal route.
          */
-        this.routerLink = input.required(...(ngDevMode ? [{ debugName: "routerLink" }] : []));
-        this.childElements = contentChildren(DF_TOPNAV_NAVIGATION_ELEMENT, ...(ngDevMode ? [{ debugName: "childElements" }] : []));
-        this.deepChildLinks = contentChildren(DfTopNavNavigationLink, { ...(ngDevMode ? { debugName: "deepChildLinks" } : {}), descendants: true });
-        this.rootChildLinks = computed(() => this.childElements().filter((child) => child instanceof DfTopNavNavigationLink), ...(ngDevMode ? [{ debugName: "rootChildLinks" }] : []));
+        this.routerLink = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
+        this.childElements = contentChildren(DF_TOPNAV_NAVIGATION_ELEMENT, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "childElements" }] : /* istanbul ignore next */ []));
+        this.deepChildLinks = contentChildren(DfTopNavNavigationLink, { ...(ngDevMode ? { debugName: "deepChildLinks" } : /* istanbul ignore next */ {}), descendants: true });
+        this.rootChildLinks = computed(() => this.childElements().filter((child) => child instanceof DfTopNavNavigationLink), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rootChildLinks" }] : /* istanbul ignore next */ []));
         this.topNav = inject(DfTopNav);
-        this.dropdownMode = computed(() => this.topNav.mode() === 'dropdown', ...(ngDevMode ? [{ debugName: "dropdownMode" }] : []));
+        this.dropdownMode = computed(() => this.topNav.mode() === 'dropdown', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropdownMode" }] : /* istanbul ignore next */ []));
         this.dropdownId = `topnav-dropdown-button-${generateId()}`;
         /**
          * Indicates if the navigation item is currently active based on the Router state of its child links.
          */
-        this.active = computed(() => this.deepChildLinks().some((link) => link.active()), ...(ngDevMode ? [{ debugName: "active" }] : []));
+        this.active = computed(() => this.deepChildLinks().some((link) => link.active()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavNavigationItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfTopNavNavigationItem, isStandalone: true, selector: "df-topnav-navigation-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "style.display": "\"contents\"" } }, providers: [{ provide: DF_TOPNAV_NAVIGATION_ELEMENT, useExisting: DfTopNavNavigationItem }], queries: [{ propertyName: "childElements", predicate: DF_TOPNAV_NAVIGATION_ELEMENT, isSignal: true }, { propertyName: "deepChildLinks", predicate: DfTopNavNavigationLink, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavNavigationItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfTopNavNavigationItem, isStandalone: true, selector: "df-topnav-navigation-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "style.display": "\"contents\"" } }, providers: [{ provide: DF_TOPNAV_NAVIGATION_ELEMENT, useExisting: DfTopNavNavigationItem }], queries: [{ propertyName: "childElements", predicate: DF_TOPNAV_NAVIGATION_ELEMENT, isSignal: true }, { propertyName: "deepChildLinks", predicate: DfTopNavNavigationLink, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     @if (dropdownMode()) {
-      <div ngbDropdown #dropdown="ngbDropdown">
-        <button
-          type="button"
-          class="df-topnav-navigation-link"
-          [class.df-topnav-navigation-link-active]="active()"
-          aria-haspopup="true"
-          [attr.aria-controls]="dropdownId"
-          dfTopNavDropdownToggle
-        >
-          <span [attr.data-text]="label()">{{ label() }}</span>
-          <span
-            class="fal"
-            aria-hidden="true"
-            [class.fa-chevron-down]="!dropdown.isOpen()"
-            [class.fa-chevron-up]="dropdown.isOpen()"
-          ></span>
-        </button>
-        <div dfTopNavDropdownMenu class="dropdown-menu-right" [attr.id]="dropdownId" role="list">
-          @for (childLink of rootChildLinks(); track childLink) {
-            <div role="listitem">
-              @if (childLink.href()) {
-                <a ngbDropdownItem [attr.href]="childLink.href()" target="_blank">
-                  <span>{{ childLink.label() }}</span>
-                </a>
-              } @else {
-                <a
-                  ngbDropdownItem
-                  [routerLink]="childLink.routerLink()"
-                  [class.active]="childLink.active()"
-                  [attr.aria-current]="childLink.active() ? 'page' : null"
-                >
-                  {{ childLink.label() }}
-                </a>
-              }
-            </div>
-          }
-        </div>
-      </div>
+      <button
+        [dfTopNavNavigationItemDropdownToggle]="dropdown"
+        type="button"
+        class="df-topnav-navigation-link"
+        [class.df-topnav-navigation-link-active]="active()"
+        aria-haspopup="true"
+      >
+        <span [attr.data-text]="label()">{{ label() }}</span>
+      </button>
+      <df-dropdown #dropdown placement="bottom-start" role="list">
+        @for (childLink of rootChildLinks(); track childLink) {
+          <div role="listitem">
+            @if (childLink.href()) {
+              <a dfDropdownItem [attr.href]="childLink.href()" target="_blank">
+                <span>{{ childLink.label() }}</span>
+              </a>
+            } @else {
+              <a
+                dfDropdownItem
+                [routerLink]="childLink.routerLink()!"
+                [active]="childLink.active()"
+                [attr.aria-current]="childLink.active() ? 'page' : null"
+              >
+                {{ childLink.label() }}
+              </a>
+            }
+          </div>
+        }
+      </df-dropdown>
     } @else {
       <a
         class="df-topnav-navigation-link"
@@ -273,50 +244,41 @@ class DfTopNavNavigationItem extends DfTopNavNavigationElement {
         <span [attr.data-text]="label()">{{ label() }}</span>
       </a>
     }
-  `, isInline: true, styles: [".df-topnav-navigation-link{height:100%;display:flex;align-items:center;padding:var(--df-spacing-5);outline:none;position:relative;gap:var(--df-spacing-3);text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-navigation-link{transition:none}}.df-topnav-navigation-link:focus-visible:before{content:\"\";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--df-topnav-navigation-link-bg-color),inset 0 0 0 4px var(--df-topnav-navigation-link-border-color)}.df-topnav-navigation-link{box-shadow:none!important;border:0;border-bottom:0!important;background-color:var(--df-topnav-navigation-link-bg-color)!important}.df-topnav-navigation-link span[data-text]{text-align:center}.df-topnav-navigation-link span[data-text]:before{content:attr(data-text);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-topnav-navigation-link.df-topnav-navigation-link-active{font-weight:var(--df-typo-weight-bold)}.df-topnav-navigation-link.df-topnav-navigation-link-active:focus-visible:before{bottom:.1875rem}.df-topnav-navigation-link.df-topnav-navigation-link-active:after{content:\"\";position:absolute;inset:0;border-bottom:.1875rem solid var(--df-topnav-navigation-link-border-color)}.df-topnav-nav-basic .df-topnav-navigation-link{color:var(--df-topnav-color-inert-basic-foreground)!important;--df-topnav-navigation-link-bg-color: var(--df-topnav-color-inert-basic-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-inert-basic-foreground)}.df-topnav-nav-basic .df-topnav-navigation-link:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-hovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-hovered-border);color:var(--df-topnav-color-basic-primary-hovered-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-pressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-pressed-border);color:var(--df-topnav-color-basic-primary-pressed-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-basic-primary-active-foreground)!important;--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-active-border)}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-activeHovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-activeHovered-border);color:var(--df-topnav-color-basic-primary-activeHovered-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-activePressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-activePressed-border);color:var(--df-topnav-color-basic-primary-activePressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link{color:var(--df-topnav-color-inert-mirror-foreground)!important;--df-topnav-navigation-link-bg-color: var(--df-topnav-color-inert-mirror-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-inert-mirror-foreground)}.df-topnav-nav-mirror .df-topnav-navigation-link:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-hovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-hovered-border);color:var(--df-topnav-color-mirror-primary-hovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-pressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-pressed-border);color:var(--df-topnav-color-mirror-primary-pressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-mirror-primary-active-foreground)!important;--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-active-border)}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-activeHovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-activeHovered-border);color:var(--df-topnav-color-mirror-primary-activeHovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-activePressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-activePressed-border);color:var(--df-topnav-color-mirror-primary-activePressed-foreground)!important}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: DfTopNavDropdownMenu, selector: "[dfTopNavDropdownMenu]" }, { kind: "directive", type: NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: DfTopNavDropdownToggle, selector: "[dfTopNavDropdownToggle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [".df-topnav-navigation-link{height:100%;display:flex;align-items:center;padding:var(--df-spacing-5);outline:none;position:relative;gap:var(--df-spacing-3);text-decoration:none;background-color:var(--df-topnav-color-inert-mirror-background)!important;color:var(--df-topnav-color-mirror-neutral-default-foreground)!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-navigation-link{transition:none}}.df-topnav-navigation-link:focus-visible:before{content:\"\";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--df-topnav-color-inert-mirror-background),inset 0 0 0 4px var(--df-topnav-color-mirror-neutral-default-border)}.df-topnav-navigation-link{box-shadow:none!important;border:0;border-bottom:0!important}.df-topnav-navigation-link span[data-text]{text-align:center}.df-topnav-navigation-link span[data-text]:before{content:attr(data-text);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-topnav-navigation-link:hover{color:var(--df-topnav-color-mirror-primary-hovered-foreground)!important;background-color:var(--df-topnav-color-mirror-primary-hovered-background)!important}.df-topnav-navigation-link:hover:focus-visible:before{box-shadow:inset 0 0 0 2px var(--df-topnav-color-mirror-primary-hovered-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-hovered-border)}.df-topnav-navigation-link:active{color:var(--df-topnav-color-mirror-primary-pressed-foreground)!important;background-color:var(--df-topnav-color-mirror-primary-pressed-background)!important}.df-topnav-navigation-link:active:focus-visible:before{box-shadow:inset 0 0 0 2px var(--df-topnav-color-mirror-primary-pressed-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-pressed-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-mirror-primary-active-foreground)!important;font-weight:var(--df-typo-weight-bold)}.df-topnav-navigation-link.df-topnav-navigation-link-active:focus-visible:before{bottom:.1875rem;box-shadow:inset 0 0 0 2px var(--df-topnav-color-inert-mirror-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-active-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:after{content:\"\";position:absolute;inset:0;border-bottom:.1875rem solid var(--df-topnav-color-mirror-primary-active-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:hover{color:var(--df-topnav-color-mirror-primary-activeHovered-foreground)!important;background-color:var(--df-topnav-color-mirror-primary-activeHovered-background)!important}.df-topnav-navigation-link.df-topnav-navigation-link-active:hover:focus-visible:before{box-shadow:inset 0 0 0 2px var(--df-topnav-color-mirror-primary-activeHovered-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-activeHovered-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:hover.df-topnav-navigation-link-active:after{border-bottom-color:var(--df-topnav-color-mirror-primary-activeHovered-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:active{color:var(--df-topnav-color-mirror-primary-activePressed-foreground)!important;background-color:var(--df-topnav-color-mirror-primary-activePressed-background)!important}.df-topnav-navigation-link.df-topnav-navigation-link-active:active:focus-visible:before{box-shadow:inset 0 0 0 2px var(--df-topnav-color-mirror-primary-activePressed-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-activePressed-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:active.df-topnav-navigation-link-active:after{border-bottom-color:var(--df-topnav-color-mirror-primary-activePressed-border)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: DfDropdown, selector: "df-dropdown", inputs: ["opened", "placement", "size", "container"], outputs: ["openedChange"] }, { kind: "directive", type: DfDropdownItemLink, selector: "a[dfDropdownItem]", inputs: ["active", "disabled"] }, { kind: "component", type: DfTopNavNavigationItemDropdownToggle, selector: "button[dfTopNavNavigationItemDropdownToggle]", inputs: ["dfTopNavNavigationItemDropdownToggle"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavNavigationItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavNavigationItem, decorators: [{
             type: Component,
             args: [{ selector: 'df-topnav-navigation-item', template: `
     @if (dropdownMode()) {
-      <div ngbDropdown #dropdown="ngbDropdown">
-        <button
-          type="button"
-          class="df-topnav-navigation-link"
-          [class.df-topnav-navigation-link-active]="active()"
-          aria-haspopup="true"
-          [attr.aria-controls]="dropdownId"
-          dfTopNavDropdownToggle
-        >
-          <span [attr.data-text]="label()">{{ label() }}</span>
-          <span
-            class="fal"
-            aria-hidden="true"
-            [class.fa-chevron-down]="!dropdown.isOpen()"
-            [class.fa-chevron-up]="dropdown.isOpen()"
-          ></span>
-        </button>
-        <div dfTopNavDropdownMenu class="dropdown-menu-right" [attr.id]="dropdownId" role="list">
-          @for (childLink of rootChildLinks(); track childLink) {
-            <div role="listitem">
-              @if (childLink.href()) {
-                <a ngbDropdownItem [attr.href]="childLink.href()" target="_blank">
-                  <span>{{ childLink.label() }}</span>
-                </a>
-              } @else {
-                <a
-                  ngbDropdownItem
-                  [routerLink]="childLink.routerLink()"
-                  [class.active]="childLink.active()"
-                  [attr.aria-current]="childLink.active() ? 'page' : null"
-                >
-                  {{ childLink.label() }}
-                </a>
-              }
-            </div>
-          }
-        </div>
-      </div>
+      <button
+        [dfTopNavNavigationItemDropdownToggle]="dropdown"
+        type="button"
+        class="df-topnav-navigation-link"
+        [class.df-topnav-navigation-link-active]="active()"
+        aria-haspopup="true"
+      >
+        <span [attr.data-text]="label()">{{ label() }}</span>
+      </button>
+      <df-dropdown #dropdown placement="bottom-start" role="list">
+        @for (childLink of rootChildLinks(); track childLink) {
+          <div role="listitem">
+            @if (childLink.href()) {
+              <a dfDropdownItem [attr.href]="childLink.href()" target="_blank">
+                <span>{{ childLink.label() }}</span>
+              </a>
+            } @else {
+              <a
+                dfDropdownItem
+                [routerLink]="childLink.routerLink()!"
+                [active]="childLink.active()"
+                [attr.aria-current]="childLink.active() ? 'page' : null"
+              >
+                {{ childLink.label() }}
+              </a>
+            }
+          </div>
+        }
+      </df-dropdown>
     } @else {
       <a
         class="df-topnav-navigation-link"
@@ -327,47 +289,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         <span [attr.data-text]="label()">{{ label() }}</span>
       </a>
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+  `, host: {
                         '[style.display]': '"contents"',
                         role: 'listitem'
-                    }, imports: [RouterLink, NgbDropdown, DfTopNavDropdownMenu, NgbDropdownItem, DfTopNavDropdownToggle], providers: [{ provide: DF_TOPNAV_NAVIGATION_ELEMENT, useExisting: DfTopNavNavigationItem }], encapsulation: ViewEncapsulation.None, styles: [".df-topnav-navigation-link{height:100%;display:flex;align-items:center;padding:var(--df-spacing-5);outline:none;position:relative;gap:var(--df-spacing-3);text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-navigation-link{transition:none}}.df-topnav-navigation-link:focus-visible:before{content:\"\";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--df-topnav-navigation-link-bg-color),inset 0 0 0 4px var(--df-topnav-navigation-link-border-color)}.df-topnav-navigation-link{box-shadow:none!important;border:0;border-bottom:0!important;background-color:var(--df-topnav-navigation-link-bg-color)!important}.df-topnav-navigation-link span[data-text]{text-align:center}.df-topnav-navigation-link span[data-text]:before{content:attr(data-text);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-topnav-navigation-link.df-topnav-navigation-link-active{font-weight:var(--df-typo-weight-bold)}.df-topnav-navigation-link.df-topnav-navigation-link-active:focus-visible:before{bottom:.1875rem}.df-topnav-navigation-link.df-topnav-navigation-link-active:after{content:\"\";position:absolute;inset:0;border-bottom:.1875rem solid var(--df-topnav-navigation-link-border-color)}.df-topnav-nav-basic .df-topnav-navigation-link{color:var(--df-topnav-color-inert-basic-foreground)!important;--df-topnav-navigation-link-bg-color: var(--df-topnav-color-inert-basic-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-inert-basic-foreground)}.df-topnav-nav-basic .df-topnav-navigation-link:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-hovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-hovered-border);color:var(--df-topnav-color-basic-primary-hovered-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-pressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-pressed-border);color:var(--df-topnav-color-basic-primary-pressed-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-basic-primary-active-foreground)!important;--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-active-border)}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-activeHovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-activeHovered-border);color:var(--df-topnav-color-basic-primary-activeHovered-foreground)!important}.df-topnav-nav-basic .df-topnav-navigation-link.df-topnav-navigation-link-active:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-basic-primary-activePressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-basic-primary-activePressed-border);color:var(--df-topnav-color-basic-primary-activePressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link{color:var(--df-topnav-color-inert-mirror-foreground)!important;--df-topnav-navigation-link-bg-color: var(--df-topnav-color-inert-mirror-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-inert-mirror-foreground)}.df-topnav-nav-mirror .df-topnav-navigation-link:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-hovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-hovered-border);color:var(--df-topnav-color-mirror-primary-hovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-pressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-pressed-border);color:var(--df-topnav-color-mirror-primary-pressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-mirror-primary-active-foreground)!important;--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-active-border)}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active:hover{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-activeHovered-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-activeHovered-border);color:var(--df-topnav-color-mirror-primary-activeHovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-navigation-link.df-topnav-navigation-link-active:active{--df-topnav-navigation-link-bg-color: var(--df-topnav-color-mirror-primary-activePressed-background);--df-topnav-navigation-link-border-color: var(--df-topnav-color-mirror-primary-activePressed-border);color:var(--df-topnav-color-mirror-primary-activePressed-foreground)!important}\n"] }]
+                    }, imports: [RouterLink, DfDropdown, DfDropdownItemLink, DfTopNavNavigationItemDropdownToggle], providers: [{ provide: DF_TOPNAV_NAVIGATION_ELEMENT, useExisting: DfTopNavNavigationItem }], encapsulation: ViewEncapsulation.None, styles: [".df-topnav-navigation-link{height:100%;display:flex;align-items:center;padding:var(--df-spacing-5);outline:none;position:relative;gap:var(--df-spacing-3);text-decoration:none;background-color:var(--df-topnav-color-inert-mirror-background)!important;color:var(--df-topnav-color-mirror-neutral-default-foreground)!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-navigation-link{transition:none}}.df-topnav-navigation-link:focus-visible:before{content:\"\";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--df-topnav-color-inert-mirror-background),inset 0 0 0 4px var(--df-topnav-color-mirror-neutral-default-border)}.df-topnav-navigation-link{box-shadow:none!important;border:0;border-bottom:0!important}.df-topnav-navigation-link span[data-text]{text-align:center}.df-topnav-navigation-link span[data-text]:before{content:attr(data-text);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-topnav-navigation-link:hover{color:var(--df-topnav-color-mirror-primary-hovered-foreground)!important;background-color:var(--df-topnav-color-mirror-primary-hovered-background)!important}.df-topnav-navigation-link:hover:focus-visible:before{box-shadow:inset 0 0 0 2px var(--df-topnav-color-mirror-primary-hovered-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-hovered-border)}.df-topnav-navigation-link:active{color:var(--df-topnav-color-mirror-primary-pressed-foreground)!important;background-color:var(--df-topnav-color-mirror-primary-pressed-background)!important}.df-topnav-navigation-link:active:focus-visible:before{box-shadow:inset 0 0 0 2px var(--df-topnav-color-mirror-primary-pressed-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-pressed-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active{color:var(--df-topnav-color-mirror-primary-active-foreground)!important;font-weight:var(--df-typo-weight-bold)}.df-topnav-navigation-link.df-topnav-navigation-link-active:focus-visible:before{bottom:.1875rem;box-shadow:inset 0 0 0 2px var(--df-topnav-color-inert-mirror-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-active-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:after{content:\"\";position:absolute;inset:0;border-bottom:.1875rem solid var(--df-topnav-color-mirror-primary-active-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:hover{color:var(--df-topnav-color-mirror-primary-activeHovered-foreground)!important;background-color:var(--df-topnav-color-mirror-primary-activeHovered-background)!important}.df-topnav-navigation-link.df-topnav-navigation-link-active:hover:focus-visible:before{box-shadow:inset 0 0 0 2px var(--df-topnav-color-mirror-primary-activeHovered-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-activeHovered-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:hover.df-topnav-navigation-link-active:after{border-bottom-color:var(--df-topnav-color-mirror-primary-activeHovered-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:active{color:var(--df-topnav-color-mirror-primary-activePressed-foreground)!important;background-color:var(--df-topnav-color-mirror-primary-activePressed-background)!important}.df-topnav-navigation-link.df-topnav-navigation-link-active:active:focus-visible:before{box-shadow:inset 0 0 0 2px var(--df-topnav-color-mirror-primary-activePressed-background),inset 0 0 0 4px var(--df-topnav-color-mirror-primary-activePressed-border)}.df-topnav-navigation-link.df-topnav-navigation-link-active:active.df-topnav-navigation-link-active:after{border-bottom-color:var(--df-topnav-color-mirror-primary-activePressed-border)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: true }] }], childElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DF_TOPNAV_NAVIGATION_ELEMENT), { isSignal: true }] }], deepChildLinks: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfTopNavNavigationLink), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /**
- * @internal
- * Styles the buttons used in the TopNav.
- */
-class DfTopNavButton {
-    constructor() {
-        /**
-         * The appearance of the TopNav button, which will determine its color. It can be either 'primary' or 'neutral'.
-         */
-        this.appearance = input('neutral', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
-        /**
-         * Whether the button is an icon button or not. If true, the button will have a fixed width and height and no padding, to fit only an icon.
-         */
-        this.icon = input(false, { ...(ngDevMode ? { debugName: "icon" } : {}), transform: booleanAttribute });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: DfTopNavButton, isStandalone: true, selector: "button[dfTopNavButton]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.df-topnav-btn-icon": "icon()", "class": "'df-topnav-btn-' + appearance()" }, classAttribute: "df-topnav-btn" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".df-topnav-btn{display:flex;align-items:center;justify-content:center;border-radius:var(--df-borderRadius-main-medium);border:none;outline:none;box-shadow:none;-webkit-user-select:none;user-select:none;position:relative;cursor:pointer;gap:var(--df-spacing-3);padding:.3125rem var(--df-spacing-4);transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-btn{transition:none}}.df-topnav-btn{background-color:var(--df-topnav-btn-bg-color)}.df-topnav-btn:not(:disabled):focus-visible{box-shadow:0 0 0 2px var(--df-topnav-btn-bg-color),0 0 0 4px var(--df-topnav-btn-border-color)}.df-topnav-btn:disabled{cursor:not-allowed}.df-topnav-btn.df-topnav-btn-icon{width:2.25rem;height:2.25rem;padding:0}.df-topnav-nav-basic .df-topnav-btn-primary{color:var(--df-button-text-basic-color-primary-default-foreground)}.df-topnav-nav-basic .df-topnav-btn-primary:not(:disabled):hover{color:var(--df-button-text-basic-color-primary-hovered-foreground);--df-topnav-btn-bg-color: var(--df-button-text-basic-color-primary-hovered-background);--df-topnav-btn-border-color: var(--df-button-text-basic-color-primary-hovered-border)}.df-topnav-nav-basic .df-topnav-btn-primary:not(:disabled):active{color:var(--df-button-text-basic-color-primary-pressed-foreground);--df-topnav-btn-bg-color: var(--df-button-text-basic-color-primary-pressed-background);--df-topnav-btn-border-color: var(--df-button-text-basic-color-primary-pressed-border)}.df-topnav-nav-basic .df-topnav-btn-primary:disabled{color:var(--df-button-text-basic-color-disabled-foreground)}.df-topnav-nav-basic .df-topnav-btn-neutral{color:var(--df-button-text-basic-color-neutral-default-foreground)}.df-topnav-nav-basic .df-topnav-btn-neutral:not(:disabled):hover{color:var(--df-button-text-basic-color-neutral-hovered-foreground);--df-topnav-btn-bg-color: var(--df-button-text-basic-color-neutral-hovered-background);--df-topnav-btn-border-color: var(--df-button-text-basic-color-neutral-hovered-border)}.df-topnav-nav-basic .df-topnav-btn-neutral:not(:disabled):active{color:var(--df-button-text-basic-color-neutral-pressed-foreground);--df-topnav-btn-bg-color: var(--df-button-text-basic-color-neutral-pressed-background);--df-topnav-btn-border-color: var(--df-button-text-basic-color-neutral-pressed-border)}.df-topnav-nav-basic .df-topnav-btn-neutral:disabled{color:var(--df-button-text-basic-color-disabled-foreground)}.df-topnav-nav-mirror .df-topnav-btn-primary{color:var(--df-button-text-mirror-color-primary-default-foreground)}.df-topnav-nav-mirror .df-topnav-btn-primary:not(:disabled):hover{color:var(--df-button-text-mirror-color-primary-hovered-foreground);--df-topnav-btn-bg-color: var(--df-button-text-mirror-color-primary-hovered-background);--df-topnav-btn-border-color: var(--df-button-text-mirror-color-primary-hovered-border)}.df-topnav-nav-mirror .df-topnav-btn-primary:not(:disabled):active{color:var(--df-button-text-mirror-color-primary-pressed-foreground);--df-topnav-btn-bg-color: var(--df-button-text-mirror-color-primary-pressed-background);--df-topnav-btn-border-color: var(--df-button-text-mirror-color-primary-pressed-border)}.df-topnav-nav-mirror .df-topnav-btn-primary:disabled{color:var(--df-button-text-mirror-color-disabled-foreground)}.df-topnav-nav-mirror .df-topnav-btn-neutral{color:var(--df-button-text-mirror-color-neutral-default-foreground)}.df-topnav-nav-mirror .df-topnav-btn-neutral:not(:disabled):hover{color:var(--df-button-text-mirror-color-neutral-hovered-foreground);--df-topnav-btn-bg-color: var(--df-button-text-mirror-color-neutral-hovered-background);--df-topnav-btn-border-color: var(--df-button-text-mirror-color-neutral-hovered-border)}.df-topnav-nav-mirror .df-topnav-btn-neutral:not(:disabled):active{color:var(--df-button-text-mirror-color-neutral-pressed-foreground);--df-topnav-btn-bg-color: var(--df-button-text-mirror-color-neutral-pressed-background);--df-topnav-btn-border-color: var(--df-button-text-mirror-color-neutral-pressed-border)}.df-topnav-nav-mirror .df-topnav-btn-neutral:disabled{color:var(--df-button-text-mirror-color-disabled-foreground)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavButton, decorators: [{
-            type: Component,
-            args: [{ selector: 'button[dfTopNavButton]', host: {
-                        class: 'df-topnav-btn',
-                        '[class.df-topnav-btn-icon]': 'icon()',
-                        '[class]': "'df-topnav-btn-' + appearance()"
-                    }, template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".df-topnav-btn{display:flex;align-items:center;justify-content:center;border-radius:var(--df-borderRadius-main-medium);border:none;outline:none;box-shadow:none;-webkit-user-select:none;user-select:none;position:relative;cursor:pointer;gap:var(--df-spacing-3);padding:.3125rem var(--df-spacing-4);transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-btn{transition:none}}.df-topnav-btn{background-color:var(--df-topnav-btn-bg-color)}.df-topnav-btn:not(:disabled):focus-visible{box-shadow:0 0 0 2px var(--df-topnav-btn-bg-color),0 0 0 4px var(--df-topnav-btn-border-color)}.df-topnav-btn:disabled{cursor:not-allowed}.df-topnav-btn.df-topnav-btn-icon{width:2.25rem;height:2.25rem;padding:0}.df-topnav-nav-basic .df-topnav-btn-primary{color:var(--df-button-text-basic-color-primary-default-foreground)}.df-topnav-nav-basic .df-topnav-btn-primary:not(:disabled):hover{color:var(--df-button-text-basic-color-primary-hovered-foreground);--df-topnav-btn-bg-color: var(--df-button-text-basic-color-primary-hovered-background);--df-topnav-btn-border-color: var(--df-button-text-basic-color-primary-hovered-border)}.df-topnav-nav-basic .df-topnav-btn-primary:not(:disabled):active{color:var(--df-button-text-basic-color-primary-pressed-foreground);--df-topnav-btn-bg-color: var(--df-button-text-basic-color-primary-pressed-background);--df-topnav-btn-border-color: var(--df-button-text-basic-color-primary-pressed-border)}.df-topnav-nav-basic .df-topnav-btn-primary:disabled{color:var(--df-button-text-basic-color-disabled-foreground)}.df-topnav-nav-basic .df-topnav-btn-neutral{color:var(--df-button-text-basic-color-neutral-default-foreground)}.df-topnav-nav-basic .df-topnav-btn-neutral:not(:disabled):hover{color:var(--df-button-text-basic-color-neutral-hovered-foreground);--df-topnav-btn-bg-color: var(--df-button-text-basic-color-neutral-hovered-background);--df-topnav-btn-border-color: var(--df-button-text-basic-color-neutral-hovered-border)}.df-topnav-nav-basic .df-topnav-btn-neutral:not(:disabled):active{color:var(--df-button-text-basic-color-neutral-pressed-foreground);--df-topnav-btn-bg-color: var(--df-button-text-basic-color-neutral-pressed-background);--df-topnav-btn-border-color: var(--df-button-text-basic-color-neutral-pressed-border)}.df-topnav-nav-basic .df-topnav-btn-neutral:disabled{color:var(--df-button-text-basic-color-disabled-foreground)}.df-topnav-nav-mirror .df-topnav-btn-primary{color:var(--df-button-text-mirror-color-primary-default-foreground)}.df-topnav-nav-mirror .df-topnav-btn-primary:not(:disabled):hover{color:var(--df-button-text-mirror-color-primary-hovered-foreground);--df-topnav-btn-bg-color: var(--df-button-text-mirror-color-primary-hovered-background);--df-topnav-btn-border-color: var(--df-button-text-mirror-color-primary-hovered-border)}.df-topnav-nav-mirror .df-topnav-btn-primary:not(:disabled):active{color:var(--df-button-text-mirror-color-primary-pressed-foreground);--df-topnav-btn-bg-color: var(--df-button-text-mirror-color-primary-pressed-background);--df-topnav-btn-border-color: var(--df-button-text-mirror-color-primary-pressed-border)}.df-topnav-nav-mirror .df-topnav-btn-primary:disabled{color:var(--df-button-text-mirror-color-disabled-foreground)}.df-topnav-nav-mirror .df-topnav-btn-neutral{color:var(--df-button-text-mirror-color-neutral-default-foreground)}.df-topnav-nav-mirror .df-topnav-btn-neutral:not(:disabled):hover{color:var(--df-button-text-mirror-color-neutral-hovered-foreground);--df-topnav-btn-bg-color: var(--df-button-text-mirror-color-neutral-hovered-background);--df-topnav-btn-border-color: var(--df-button-text-mirror-color-neutral-hovered-border)}.df-topnav-nav-mirror .df-topnav-btn-neutral:not(:disabled):active{color:var(--df-button-text-mirror-color-neutral-pressed-foreground);--df-topnav-btn-bg-color: var(--df-button-text-mirror-color-neutral-pressed-background);--df-topnav-btn-border-color: var(--df-button-text-mirror-color-neutral-pressed-border)}.df-topnav-nav-mirror .df-topnav-btn-neutral:disabled{color:var(--df-button-text-mirror-color-disabled-foreground)}\n"] }]
-        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
-
-/**
- * @internal
  * An Injection Token for the DfTopNavQuickActionElement interface, which represents a navigation quick action in the top navigation component.
+ *
+ * @since 22.0
  */
 const DF_TOPNAV_QUICK_ACTION_ELEMENT = new InjectionToken('DF_TOPNAV_QUICK_ACTION_ELEMENT');
 /**
- * @internal
  * An abstract class that defines the structure of a quick action element in the top navigation component.
+ *
+ * @since 22.0
  */
 class DfTopNavQuickActionElement {
 }
@@ -379,10 +316,10 @@ class DfTopNavQuickActionElement {
  * @since 21.1
  */
 class DfTopNavQuickActionButtonContent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionButtonContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfTopNavQuickActionButtonContent, isStandalone: true, selector: "ng-template[dfTopNavQuickActionButtonContent]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionButtonContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: DfTopNavQuickActionButtonContent, isStandalone: true, selector: "ng-template[dfTopNavQuickActionButtonContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionButtonContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionButtonContent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[dfTopNavQuickActionButtonContent]' }]
         }] });
@@ -393,10 +330,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * @since 21.1
  */
 class DfTopNavQuickActionButtonIcon {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionButtonIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfTopNavQuickActionButtonIcon, isStandalone: true, selector: "ng-template[dfTopNavQuickActionButtonIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionButtonIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: DfTopNavQuickActionButtonIcon, isStandalone: true, selector: "ng-template[dfTopNavQuickActionButtonIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionButtonIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionButtonIcon, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[dfTopNavQuickActionButtonIcon]' }]
         }] });
@@ -409,7 +346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  *
  * The icon can be set through the {@link DfTopNavQuickActionButton.icon} input or by using the {@link DfTopNavQuickActionButtonIcon} directive.
  *
- * See {@link https://design-factory.amadeus.net/components/topnav/examples#quick-actions|Design Factory example}
+ * See {@link https://design-factory.amadeus.net/components/topnav/developer#quick-actions|Design Factory example}
  * @since 21.1
  */
 class DfTopNavQuickActionButton extends DfTopNavQuickActionElement {
@@ -418,27 +355,31 @@ class DfTopNavQuickActionButton extends DfTopNavQuickActionElement {
         /**
          * The appearance of the quick action button, which will determine its color. It can be either 'primary' or 'neutral'.
          */
-        this.appearance = input('neutral', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+        this.appearance = input('neutral', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
         /**
          * The label of the quick action button, which will be used as the aria-label attribute for accessibility on desktop and label in the drawer.
          */
-        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.label = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /**
          * The icon of the quick action button.
          */
-        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.icon = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
         /**
          * Whether the quick action button is disabled or not.
          */
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * The event emitted when the quick action button is clicked. It can be used to perform an action instead of showing the associated popover or drawer content.
          */
         this.act = output();
-        this.actionContent = contentChild(DfTopNavQuickActionButtonContent, { ...(ngDevMode ? { debugName: "actionContent" } : {}), read: TemplateRef });
-        this.actionIcon = contentChild(DfTopNavQuickActionButtonIcon, { ...(ngDevMode ? { debugName: "actionIcon" } : {}), read: TemplateRef });
+        this.actionContent = contentChild(DfTopNavQuickActionButtonContent, { ...(ngDevMode ? { debugName: "actionContent" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.actionIcon = contentChild(DfTopNavQuickActionButtonIcon, { ...(ngDevMode ? { debugName: "actionIcon" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.popover = viewChild.required('popover');
-        this.isLg = toAngularSignal(lg$);
+        this.isLg = trackWindow('lg');
+        this.mainNavAppliedStyle = inject(DfTopNav)['mainNavAppliedStyle'];
         /**
          * Need to close the popover on smaller screen
          */
@@ -450,13 +391,14 @@ class DfTopNavQuickActionButton extends DfTopNavQuickActionElement {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: DfTopNavQuickActionButton, isStandalone: true, selector: "df-topnav-quick-action-button", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { act: "act" }, providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionButton }], queries: [{ propertyName: "actionContent", first: true, predicate: DfTopNavQuickActionButtonContent, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "actionIcon", first: true, predicate: DfTopNavQuickActionButtonIcon, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", type: DfTopNavQuickActionButton, isStandalone: true, selector: "df-topnav-quick-action-button", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { act: "act" }, providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionButton }], queries: [{ propertyName: "actionContent", first: true, predicate: DfTopNavQuickActionButtonContent, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "actionIcon", first: true, predicate: DfTopNavQuickActionButtonIcon, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <button
-      dfTopNavButton
-      icon
-      type="button"
-      [appearance]="appearance()"
+      dfButton
+      transparent
+      appearance="text"
+      [variant]="appearance()"
+      [mirror]="mainNavAppliedStyle() === 'mirror'"
       [attr.aria-label]="label()"
       [ngbPopover]="actionContent()"
       placement="bottom-end"
@@ -466,22 +408,24 @@ class DfTopNavQuickActionButton extends DfTopNavQuickActionElement {
       #popover="ngbPopover"
       [disabled]="disabled()"
       (click)="act.emit()"
+      class="df-btn-icononly df-topnav-quick-action-btn"
     >
       <ng-template #dfTopNavQuickActionDefaultIcon>
-        <span class="df-topnav-toggle-icon fal" [class]="icon()"></span>
+        <df-icon class="df-topnav-toggle-icon fal" [class]="icon()" />
       </ng-template>
       <ng-container *ngTemplateOutlet="actionIcon() || dfTopNavQuickActionDefaultIcon" />
     </button>
-  `, isInline: true, styles: ["@media(min-width:768px)and (max-width:991px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-topnav-quick-action-popover{z-index:2010}}\n"], dependencies: [{ kind: "component", type: DfTopNavButton, selector: "button[dfTopNavButton]", inputs: ["appearance", "icon"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@media(min-width:768px)and (max-width:991px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-topnav-quick-action-popover{z-index:2010}}\n"], dependencies: [{ kind: "component", type: DfButton, selector: "button[dfButton], a[dfButton]" }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfIcon, selector: "df-icon" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionButton, decorators: [{
             type: Component,
             args: [{ selector: 'df-topnav-quick-action-button', template: `
     <button
-      dfTopNavButton
-      icon
-      type="button"
-      [appearance]="appearance()"
+      dfButton
+      transparent
+      appearance="text"
+      [variant]="appearance()"
+      [mirror]="mainNavAppliedStyle() === 'mirror'"
       [attr.aria-label]="label()"
       [ngbPopover]="actionContent()"
       placement="bottom-end"
@@ -491,16 +435,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       #popover="ngbPopover"
       [disabled]="disabled()"
       (click)="act.emit()"
+      class="df-btn-icononly df-topnav-quick-action-btn"
     >
       <ng-template #dfTopNavQuickActionDefaultIcon>
-        <span class="df-topnav-toggle-icon fal" [class]="icon()"></span>
+        <df-icon class="df-topnav-toggle-icon fal" [class]="icon()" />
       </ng-template>
       <ng-container *ngTemplateOutlet="actionIcon() || dfTopNavQuickActionDefaultIcon" />
     </button>
-  `, imports: [DfTopNavButton, NgbPopover, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionButton }], styles: ["@media(min-width:768px)and (max-width:991px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-topnav-quick-action-popover{z-index:2010}}\n"] }]
+  `, imports: [DfButton, NgbPopover, NgTemplateOutlet, DfIcon], encapsulation: ViewEncapsulation.None, providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionButton }], styles: ["@media(min-width:768px)and (max-width:991px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-topnav-quick-action-popover{z-index:2010}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], act: [{ type: i0.Output, args: ["act"] }], actionContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNavQuickActionButtonContent), { ...{ read: TemplateRef }, isSignal: true }] }], actionIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNavQuickActionButtonIcon), { ...{ read: TemplateRef }, isSignal: true }] }], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }] } });
 
-// Warning: I am deeply sorry for the pyramid of doom that is the nested for loops in the template, but I could not find a better way to render the nested sidenav items and keep sidenav items contentChild queries working.
 /**
  * AppContainer is a simple wrapper component that provides a consistent layout for applications using the {@link DfTopNav} component.
  *
@@ -510,24 +454,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * @since 21.1
  */
 class DfAppContainer {
-    isSideItem(item) {
-        return 'children' in item;
-    }
     constructor() {
         this.topnav = contentChild.required(DfTopNav);
-        this.sidenav = viewChild(DfSidenavComponent, ...(ngDevMode ? [{ debugName: "sidenav" }] : []));
-        this.sidenavContent = computed(() => this.topnav()['sidenavContent']() ?? [], ...(ngDevMode ? [{ debugName: "sidenavContent" }] : []));
+        this.sidenav = viewChild(DfSidenavInput, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidenav" }] : /* istanbul ignore next */ []));
+        this.sidenavContent = computed(() => this.topnav()['sidenavContent']() ?? [], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidenavContent" }] : /* istanbul ignore next */ []));
         this.drawerContainerActions = viewChild.required('drawerContainerActions');
         // Sync the state of the sidenav with the topnav on initialization and whenever the state of the sidenav changes
         effect(() => {
             this.topnav().navExpanded.set(!this.sidenav()?.isMinimized());
         });
         effect(() => {
-            let sidenavMinimized = false;
-            let sidenav = undefined;
             const topnavExpanded = this.topnav().navExpanded();
+            const sidenav = this.sidenav();
+            let sidenavMinimized = false;
             untracked(() => {
-                sidenav = this.sidenav();
                 sidenavMinimized = sidenav?.isMinimized() ?? false;
             });
             // we need this condition to make sure to not call toggleMinimize when the drawer has not rendered yet (issue with the drawer toggleMinimze)
@@ -539,133 +481,43 @@ class DfAppContainer {
     ngAfterContentInit() {
         this.topnav()['inAppContainer'].set(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfAppContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfAppContainer, isStandalone: true, selector: "df-app-container", host: { classAttribute: "df-app-container" }, queries: [{ propertyName: "topnav", first: true, predicate: DfTopNav, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sidenav", first: true, predicate: DfSidenavComponent, descendants: true, isSignal: true }, { propertyName: "drawerContainerActions", first: true, predicate: ["drawerContainerActions"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAppContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfAppContainer, isStandalone: true, selector: "df-app-container", host: { classAttribute: "df-app-container" }, queries: [{ propertyName: "topnav", first: true, predicate: DfTopNav, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sidenav", first: true, predicate: DfSidenavInput, descendants: true, isSignal: true }, { propertyName: "drawerContainerActions", first: true, predicate: ["drawerContainerActions"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-content select="df-topnav" />
     <ng-content select="df-env-banner" />
     <div class="df-app-container-content" #drawerContainerActions>
       @if (sidenavContent().length) {
-        <df-sidenav [resizable]="false" [searchable]="false" class="df-sidenav-light-sky">
-          @for (element1 of sidenavContent(); track element1.label()) {
-            @if (isSideItem(element1)) {
-              <df-sidenav-item [label]="element1.label()">
-                @for (element2 of element1.children(); track element2.label()) {
-                  @if (isSideItem(element2)) {
-                    <df-sidenav-item [label]="element2.label()">
-                      @for (element3 of element2.children(); track element3.label()) {
-                        @if (isSideItem(element3)) {
-                          <df-sidenav-item [label]="element3.label()">
-                            @for (element4 of element3.children(); track element4.label()) {
-                              @if (!isSideItem(element4)) {
-                                <df-sidenav-link
-                                  [label]="element4.label()"
-                                  [linkPath]="element4.href()"
-                                  [active]="element4.external() ? false : undefined"
-                                  [routerLinkActiveOptions]="element4.routerLinkActiveOptions()"
-                                />
-                              }
-                            }
-                          </df-sidenav-item>
-                        } @else {
-                          <df-sidenav-link
-                            [label]="element3.label()"
-                            [linkPath]="element3.href()"
-                            [active]="element3.external() ? false : undefined"
-                            [routerLinkActiveOptions]="element3.routerLinkActiveOptions()"
-                          />
-                        }
-                      }
-                    </df-sidenav-item>
-                  } @else {
-                    <df-sidenav-link
-                      [label]="element2.label()"
-                      [linkPath]="element2.href()"
-                      [active]="element2.external() ? false : undefined"
-                      [routerLinkActiveOptions]="element2.routerLinkActiveOptions()"
-                    />
-                  }
-                }
-              </df-sidenav-item>
-            } @else {
-              <df-sidenav-link
-                [label]="element1.label()"
-                [linkPath]="element1.href()"
-                [active]="element1.external() ? false : undefined"
-                [routerLinkActiveOptions]="element1.routerLinkActiveOptions()"
-              />
-            }
-          }
-        </df-sidenav>
+        <df-sidenav-input
+          [className]="'df-sidenav-light-sky'"
+          [items]="sidenavContent()"
+          [searchable]="false"
+          [resizable]="false"
+        />
       }
       <ng-content select="main" />
     </div>
-  `, isInline: true, styles: [".df-app-container{height:100dvh;width:100%;display:flex;flex-direction:column}.df-app-container-content{flex-grow:1;display:flex;width:100%;position:relative;overflow:hidden}main{flex-grow:1;overflow-y:auto;scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background);scroll-padding-top:var(--df-spacing-5)}\n"], dependencies: [{ kind: "component", type: DfSidenavComponent, selector: "df-sidenav", inputs: ["searchable", "resizable", "collapsible", "enableMobile", "disableInitialDesktopAutoScroll"] }, { kind: "component", type: DfSidenavItemComponent, selector: "df-sidenav-item", inputs: ["label", "collapsed", "icon"], outputs: ["collapsedChange"] }, { kind: "component", type: DfSidenavLinkComponent, selector: "df-sidenav-link", inputs: ["linkPath", "label", "icon", "routerLinkActiveOptions", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [".df-app-container{height:100dvh;width:100%;display:flex;flex-direction:column}.df-app-container-content{flex-grow:1;display:flex;width:100%;position:relative;overflow:hidden}main{flex-grow:1;overflow-y:auto;scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background);scroll-padding-top:var(--df-spacing-5)}\n"], dependencies: [{ kind: "component", type: DfSidenavInput, selector: "df-sidenav-input", inputs: ["items", "className", "searchable", "resizable", "collapsible", "enableMobile", "disableInitialDesktopAutoScroll"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfAppContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAppContainer, decorators: [{
             type: Component,
             args: [{ selector: 'df-app-container', template: `
     <ng-content select="df-topnav" />
     <ng-content select="df-env-banner" />
     <div class="df-app-container-content" #drawerContainerActions>
       @if (sidenavContent().length) {
-        <df-sidenav [resizable]="false" [searchable]="false" class="df-sidenav-light-sky">
-          @for (element1 of sidenavContent(); track element1.label()) {
-            @if (isSideItem(element1)) {
-              <df-sidenav-item [label]="element1.label()">
-                @for (element2 of element1.children(); track element2.label()) {
-                  @if (isSideItem(element2)) {
-                    <df-sidenav-item [label]="element2.label()">
-                      @for (element3 of element2.children(); track element3.label()) {
-                        @if (isSideItem(element3)) {
-                          <df-sidenav-item [label]="element3.label()">
-                            @for (element4 of element3.children(); track element4.label()) {
-                              @if (!isSideItem(element4)) {
-                                <df-sidenav-link
-                                  [label]="element4.label()"
-                                  [linkPath]="element4.href()"
-                                  [active]="element4.external() ? false : undefined"
-                                  [routerLinkActiveOptions]="element4.routerLinkActiveOptions()"
-                                />
-                              }
-                            }
-                          </df-sidenav-item>
-                        } @else {
-                          <df-sidenav-link
-                            [label]="element3.label()"
-                            [linkPath]="element3.href()"
-                            [active]="element3.external() ? false : undefined"
-                            [routerLinkActiveOptions]="element3.routerLinkActiveOptions()"
-                          />
-                        }
-                      }
-                    </df-sidenav-item>
-                  } @else {
-                    <df-sidenav-link
-                      [label]="element2.label()"
-                      [linkPath]="element2.href()"
-                      [active]="element2.external() ? false : undefined"
-                      [routerLinkActiveOptions]="element2.routerLinkActiveOptions()"
-                    />
-                  }
-                }
-              </df-sidenav-item>
-            } @else {
-              <df-sidenav-link
-                [label]="element1.label()"
-                [linkPath]="element1.href()"
-                [active]="element1.external() ? false : undefined"
-                [routerLinkActiveOptions]="element1.routerLinkActiveOptions()"
-              />
-            }
-          }
-        </df-sidenav>
+        <df-sidenav-input
+          [className]="'df-sidenav-light-sky'"
+          [items]="sidenavContent()"
+          [searchable]="false"
+          [resizable]="false"
+        />
       }
       <ng-content select="main" />
     </div>
   `, host: {
                         class: 'df-app-container'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [DfSidenavComponent, DfSidenavItemComponent, DfSidenavLinkComponent], styles: [".df-app-container{height:100dvh;width:100%;display:flex;flex-direction:column}.df-app-container-content{flex-grow:1;display:flex;width:100%;position:relative;overflow:hidden}main{flex-grow:1;overflow-y:auto;scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background);scroll-padding-top:var(--df-spacing-5)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { topnav: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNav), { isSignal: true }] }], sidenav: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DfSidenavComponent), { isSignal: true }] }], drawerContainerActions: [{ type: i0.ViewChild, args: ['drawerContainerActions', { isSignal: true }] }] } });
+                    }, encapsulation: ViewEncapsulation.None, imports: [DfSidenavInput], styles: [".df-app-container{height:100dvh;width:100%;display:flex;flex-direction:column}.df-app-container-content{flex-grow:1;display:flex;width:100%;position:relative;overflow:hidden}main{flex-grow:1;overflow-y:auto;scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background);scroll-padding-top:var(--df-spacing-5)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { topnav: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNav), { isSignal: true }] }], sidenav: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DfSidenavInput), { isSignal: true }] }], drawerContainerActions: [{ type: i0.ViewChild, args: ['drawerContainerActions', { isSignal: true }] }] } });
 
 /* eslint-enable @typescript-eslint/no-unused-vars */
 /**
@@ -676,10 +528,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * @since 21.1
  */
 class DfTopNavQuickActionInTopNav {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionInTopNav, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfTopNavQuickActionInTopNav, isStandalone: true, selector: "ng-template[dfTopNavQuickActionInTopNav]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionInTopNav, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: DfTopNavQuickActionInTopNav, isStandalone: true, selector: "ng-template[dfTopNavQuickActionInTopNav]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionInTopNav, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionInTopNav, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[dfTopNavQuickActionInTopNav]' }]
         }] });
@@ -691,10 +543,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * @since 21.1
  */
 class DfTopNavQuickActionInDrawer {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionInDrawer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfTopNavQuickActionInDrawer, isStandalone: true, selector: "ng-template[dfTopNavQuickActionInDrawer]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionInDrawer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: DfTopNavQuickActionInDrawer, isStandalone: true, selector: "ng-template[dfTopNavQuickActionInDrawer]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionInDrawer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionInDrawer, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[dfTopNavQuickActionInDrawer]' }]
         }] });
@@ -706,25 +558,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * It should be used inside a {@link DfTopNavQuickActions} component.
  * It requires a {@link DfTopNavQuickActionInTopNav} template to be provided as content, which will be displayed in desktop. An optional {@link DfTopNavQuickActionInDrawer} template can also be provided, which will be displayed in mobile and tablet instead of the topnav template.
  *
- * See {@link https://design-factory.amadeus.net/components/topnav/examples#quick-actions|Design Factory example}
+ * See {@link https://design-factory.amadeus.net/components/topnav/developer#quick-actions|Design Factory example}
  * @since 21.1
  */
 class DfTopNavQuickAction extends DfTopNavQuickActionElement {
     constructor() {
         super(...arguments);
         this.content = contentChild.required(DfTopNavQuickActionInTopNav, { read: TemplateRef });
-        this.drawerContent = contentChild(DfTopNavQuickActionInDrawer, { ...(ngDevMode ? { debugName: "drawerContent" } : {}), read: TemplateRef });
+        this.drawerContent = contentChild(DfTopNavQuickActionInDrawer, { ...(ngDevMode ? { debugName: "drawerContent" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.mainNavAppliedStyle = inject(DfTopNav)['mainNavAppliedStyle'];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickAction, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: DfTopNavQuickAction, isStandalone: true, selector: "df-topnav-quick-action", providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickAction }], queries: [{ propertyName: "content", first: true, predicate: DfTopNavQuickActionInTopNav, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "drawerContent", first: true, predicate: DfTopNavQuickActionInDrawer, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <ng-container *ngTemplateOutlet="content()" /> `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickAction, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", type: DfTopNavQuickAction, isStandalone: true, selector: "df-topnav-quick-action", providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickAction }], queries: [{ propertyName: "content", first: true, predicate: DfTopNavQuickActionInTopNav, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "drawerContent", first: true, predicate: DfTopNavQuickActionInDrawer, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <ng-container *ngTemplateOutlet="content()" /> `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickAction, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-topnav-quick-action',
                     template: ` <ng-container *ngTemplateOutlet="content()" /> `,
                     imports: [NgTemplateOutlet],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickAction }]
                 }]
         }], propDecorators: { content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNavQuickActionInTopNav), { ...{ read: TemplateRef }, isSignal: true }] }], drawerContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNavQuickActionInDrawer), { ...{ read: TemplateRef }, isSignal: true }] }] } });
@@ -737,10 +589,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * @since 21.1
  */
 class DfTopNavQuickActionSearchInput {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionSearchInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DfTopNavQuickActionSearchInput, isStandalone: true, selector: "input[dfTopNavQuickActionSearchInput]", host: { attributes: { "type": "search" }, classAttribute: "df-topnav-quick-action-search-input form-control text-bg-neutral-alt df-input-withicon" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionSearchInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: DfTopNavQuickActionSearchInput, isStandalone: true, selector: "input[dfTopNavQuickActionSearchInput]", host: { attributes: { "type": "search" }, classAttribute: "df-topnav-quick-action-search-input form-control text-bg-neutral-alt df-input-withicon" }, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionSearchInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionSearchInput, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -749,7 +601,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         type: 'search',
                         class: 'df-topnav-quick-action-search-input form-control text-bg-neutral-alt df-input-withicon'
                     },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: ``
                 }]
         }] });
@@ -758,7 +609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  *
  * It should be used inside a {@link DfTopNavQuickActions} component and contain a ng-template with an input {@link DfTopNavQuickActionSearchInput}.
  *
- * See {@link https://design-factory.amadeus.net/components/topnav/examples#quick-actions|Design Factory example}
+ * See {@link https://design-factory.amadeus.net/components/topnav/developer#quick-actions|Design Factory example}
  * @since 21.1
  */
 class DfTopNavQuickActionSearch extends DfTopNavQuickActionElement {
@@ -771,26 +622,27 @@ class DfTopNavQuickActionSearch extends DfTopNavQuickActionElement {
          * It is required to set it if you have more than one global search in your page, to allow assistive technologies to differentiate between them.
          * See [ARIA guidelines](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/search_role) for more information.
          */
-        this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+        this.ariaLabel = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionSearch, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: DfTopNavQuickActionSearch, isStandalone: true, selector: "df-topnav-quick-action-search", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "search" }, properties: { "attr.aria-label": "ariaLabel()" } }, providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionSearch }], queries: [{ propertyName: "templateRef", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionSearch, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", type: DfTopNavQuickActionSearch, isStandalone: true, selector: "df-topnav-quick-action-search", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "search" }, properties: { "attr.aria-label": "ariaLabel()" } }, providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionSearch }], queries: [{ propertyName: "templateRef", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <div class="df-topnav-quick-action-search-container input-group">
       <div class="input-group-prepend text-bg-neutral-alt" aria-hidden="true">
-        <span class="input-group-text fa-light fa-search"></span>
+        <df-icon class="input-group-text fa-light fa-search" />
       </div>
       <ng-container *ngTemplateOutlet="templateRef()" />
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfIcon, selector: "df-icon" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionSearch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionSearch, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-topnav-quick-action-search',
                     template: `
     <div class="df-topnav-quick-action-search-container input-group">
       <div class="input-group-prepend text-bg-neutral-alt" aria-hidden="true">
-        <span class="input-group-text fa-light fa-search"></span>
+        <df-icon class="input-group-text fa-light fa-search" />
       </div>
       <ng-container *ngTemplateOutlet="templateRef()" />
     </div>
@@ -799,8 +651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         role: 'search',
                         '[attr.aria-label]': 'ariaLabel()'
                     },
-                    imports: [NgTemplateOutlet],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet, DfIcon],
                     providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionSearch }]
                 }]
         }], propDecorators: { templateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
@@ -808,7 +659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 /**
  * The TopNav quick actions component, used to display a list of quick action buttons in the TopNav. On large screens, the buttons are displayed inline, while on smaller screens, they are displayed in a drawer.
  *
- * See {@link https://design-factory.amadeus.net/components/topnav/examples#quick-actions|Design Factory example}
+ * See {@link https://design-factory.amadeus.net/components/topnav/developer#quick-actions|Design Factory example}
  * @since 21.1
  */
 class DfTopNavQuickActions {
@@ -827,33 +678,51 @@ class DfTopNavQuickActions {
             actionBtn.act.emit();
         }
     }
+    actionLabelToId(actionBtn) {
+        return 'df-drawer-button-' + actionBtn.label().toLocaleLowerCase().replace(/ /g, '-');
+    }
     constructor() {
         /**
          * When true, the quick action buttons will be displayed in reversed order in the drawer on smaller screens. This is useful when the quick actions are defined in the template in the same order as the navigation items, so that the first quick action is closest to the navigation on smaller screens. Defaults to true.
          */
-        this.reversedVertical = input(true, ...(ngDevMode ? [{ debugName: "reversedVertical" }] : []));
+        this.reversedVertical = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "reversedVertical" }] : /* istanbul ignore next */ []));
         /**
          * The container element in which the drawer will be rendered on smaller screens. By default, it will try to render in the drawer container provided by the app container, and if not available, it will render in the body element. This input can be used to specify a different container element for the drawer.
          */
-        this.tabletDrawerContainer = input(...(ngDevMode ? [undefined, { debugName: "tabletDrawerContainer" }] : []));
+        this.tabletDrawerContainer = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "tabletDrawerContainer" }] : /* istanbul ignore next */ []));
         this.appContainer = inject(DfAppContainer, { optional: true });
-        this._actionElements = contentChildren(DF_TOPNAV_QUICK_ACTION_ELEMENT, ...(ngDevMode ? [{ debugName: "_actionElements" }] : []));
-        this.drawer = viewChild('drawer', { ...(ngDevMode ? { debugName: "drawer" } : {}), read: DfDrawer });
+        this._actionElements = contentChildren(DF_TOPNAV_QUICK_ACTION_ELEMENT, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_actionElements" }] : /* istanbul ignore next */ []));
+        this.drawer = viewChild('drawer', { ...(ngDevMode ? { debugName: "drawer" } : /* istanbul ignore next */ {}), read: DfDrawer });
         this.document = inject(DOCUMENT);
+        this.selectedBtn = viewChild('selectedBtn', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedBtn" }] : /* istanbul ignore next */ []));
+        this.drawerButtons = viewChildren('drawerButton', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "drawerButtons" }] : /* istanbul ignore next */ []));
         // Responsive signals
-        this.isMd = toAngularSignal(md$);
-        this.isLg = toAngularSignal(lg$);
+        this.isMd = trackWindow('md');
+        this.isLg = trackWindow('lg');
         // the drawer container is the app container drawer container if available, otherwise it falls back to the body element. On md screens, it can be overridden by the tabletDrawerContainer input
         this.drawerContainer = computed(() => this.isMd()
             ? (this.tabletDrawerContainer() ??
                 this.appContainer?.['drawerContainerActions']?.()?.nativeElement ??
                 this.document.body)
-            : this.document.body, ...(ngDevMode ? [{ debugName: "drawerContainer" }] : []));
-        this.actionElements = computed(() => (this.reversedVertical() && !this.isLg() ? [...this._actionElements()].reverse() : this._actionElements()).filter((el) => !(el instanceof DfTopNavQuickActionSearch)), ...(ngDevMode ? [{ debugName: "actionElements" }] : []));
-        this.searchElement = computed(() => this._actionElements().find((el) => el instanceof DfTopNavQuickActionSearch), ...(ngDevMode ? [{ debugName: "searchElement" }] : []));
-        this.menuExpanded = signal(false, ...(ngDevMode ? [{ debugName: "menuExpanded" }] : []));
+            : this.document.body, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "drawerContainer" }] : /* istanbul ignore next */ []));
+        this.actionElements = computed(() => (this.reversedVertical() && !this.isLg() ? [...this._actionElements()].reverse() : this._actionElements()).filter((el) => !(el instanceof DfTopNavQuickActionSearch)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionElements" }] : /* istanbul ignore next */ []));
+        this.searchElement = computed(() => this._actionElements().find((el) => el instanceof DfTopNavQuickActionSearch), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchElement" }] : /* istanbul ignore next */ []));
+        this.menuExpanded = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuExpanded" }] : /* istanbul ignore next */ []));
         // the selected quick action in the
-        this.selectedQuickAction = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedQuickAction" }] : []));
+        this.selectedQuickAction = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedQuickAction" }] : /* istanbul ignore next */ []));
+        this.prevSelectedQuickAction = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prevSelectedQuickAction" }] : /* istanbul ignore next */ []));
+        this.mainNavAppliedStyle = inject(DfTopNav)['mainNavAppliedStyle'];
         // resets the menu state when resizing to large screens, as the drawer will be closed and the selected button will be hidden
         effect(() => {
             if (this.isLg()) {
@@ -865,9 +734,19 @@ class DfTopNavQuickActions {
                 this.selectedQuickAction.set(undefined);
             }
         });
+        effect(() => {
+            this.selectedBtn()?.nativeElement?.focus?.();
+        });
+        effect(() => {
+            if (this.prevSelectedQuickAction() && this.drawerButtons().length > 0) {
+                const prevSelectedBtn = this.drawerButtons().find((btn) => btn.nativeElement.id === this.actionLabelToId(this.prevSelectedQuickAction()));
+                prevSelectedBtn?.nativeElement?.focus?.();
+                this.prevSelectedQuickAction.set(undefined);
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfTopNavQuickActions, isStandalone: true, selector: "df-topnav-quick-actions", inputs: { reversedVertical: { classPropertyName: "reversedVertical", publicName: "reversedVertical", isSignal: true, isRequired: false, transformFunction: null }, tabletDrawerContainer: { classPropertyName: "tabletDrawerContainer", publicName: "tabletDrawerContainer", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "style.display": "'contents'" } }, queries: [{ propertyName: "_actionElements", predicate: DF_TOPNAV_QUICK_ACTION_ELEMENT, isSignal: true }], viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true, read: DfDrawer, isSignal: true }], ngImport: i0, template: ` <ng-template #topnavQuickActions>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfTopNavQuickActions, isStandalone: true, selector: "df-topnav-quick-actions", inputs: { reversedVertical: { classPropertyName: "reversedVertical", publicName: "reversedVertical", isSignal: true, isRequired: false, transformFunction: null }, tabletDrawerContainer: { classPropertyName: "tabletDrawerContainer", publicName: "tabletDrawerContainer", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "style.display": "'contents'" } }, queries: [{ propertyName: "_actionElements", predicate: DF_TOPNAV_QUICK_ACTION_ELEMENT, isSignal: true }], viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true, read: DfDrawer, isSignal: true }, { propertyName: "selectedBtn", first: true, predicate: ["selectedBtn"], descendants: true, isSignal: true }, { propertyName: "drawerButtons", predicate: ["drawerButton"], descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-template #topnavQuickActions>
       <ng-content />
     </ng-template>
     <div class="df-topnav-quick-actions">
@@ -875,18 +754,18 @@ class DfTopNavQuickActions {
         <ng-container *ngTemplateOutlet="topnavQuickActions" />
       } @else {
         <button
-          dfTopNavButton
-          icon
+          dfIconButton
+          appearance="text"
+          variant="neutral"
+          transparent
+          [mirror]="mainNavAppliedStyle() === 'mirror'"
           aria-label="Toggle quick actions menu"
           i18n-aria-label="@@df.topnav.toggle-quick-actions.ariaLabel"
           (click)="menuExpanded.set(!menuExpanded())"
-        >
-          <span
-            class="fal df-topnav-toggle-icon"
-            [class.fa-xmark]="menuExpanded()"
-            [class.fa-ellipsis-vertical]="!menuExpanded()"
-          ></span>
-        </button>
+          class="fal"
+          [class.fa-xmark]="menuExpanded()"
+          [class.fa-ellipsis-vertical]="!menuExpanded()"
+        ></button>
         <df-drawer
           class="df-topnav-drawer-host"
           position="inline-end"
@@ -902,8 +781,13 @@ class DfTopNavQuickActions {
         >
           @let selected = selectedQuickAction();
           @if (selected) {
-            <button type="button" class="df-topnav-drawer-button" (click)="selectedQuickAction.set(undefined)">
-              <span class="fal fa-arrow-left df-topnav-drawer-button-icon" aria-hidden="true"></span>
+            <button
+              type="button"
+              class="df-topnav-drawer-button"
+              (click)="prevSelectedQuickAction.set(selectedQuickAction()); selectedQuickAction.set(undefined)"
+              #selectedBtn
+            >
+              <df-icon class="fal fa-arrow-left df-topnav-drawer-button-icon" />
               <span>{{ selected.label() }}</span>
             </button>
             <hr class="df-topnav-drawer-divider" />
@@ -918,7 +802,7 @@ class DfTopNavQuickActions {
                   [attr.aria-label]="searchElement()!.ariaLabel()"
                 >
                   <div class="input-group-prepend text-bg-neutral-alt" aria-hidden="true">
-                    <span class="input-group-text fa-light fa-search"></span>
+                    <df-icon class="input-group-text fa-light fa-search" />
                   </div>
                   <ng-container *ngTemplateOutlet="searchElement()!['templateRef']()" />
                 </div>
@@ -930,17 +814,18 @@ class DfTopNavQuickActions {
                     class="df-topnav-drawer-button"
                     (click)="clickQuickAction(actionElement)"
                     [disabled]="actionElement.disabled()"
+                    #drawerButton
+                    [id]="actionLabelToId(actionElement)"
                   >
                     <ng-template #dfQuickActionDefaultIcon>
-                      <span class="fal" [class]="actionElement.icon()" aria-hidden="true"></span>
+                      <df-icon class="fal" [class]="actionElement.icon()" />
                     </ng-template>
                     <ng-container *ngTemplateOutlet="actionElement['actionIcon']() || dfQuickActionDefaultIcon" />
                     <span>{{ actionElement.label() }}</span>
                     @if (actionElement['actionContent']()) {
-                      <span
+                      <df-icon
                         class="fal fa-chevron-right df-topnav-drawer-button-icon df-topnav-drawer-button-icon-end"
-                        aria-hidden="true"
-                      ></span>
+                      />
                     }
                   </button>
                 } @else {
@@ -951,9 +836,9 @@ class DfTopNavQuickActions {
           }
         </df-drawer>
       }
-    </div>`, isInline: true, styles: [".df-topnav-quick-actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--df-spacing-5)}.df-drawer.df-topnav-quick-actions-drawer{position:absolute!important;transition:none}.df-drawer.df-topnav-quick-actions-drawer.df-collapse-collapsing.df-collapse-horizontal{transition:none}.df-drawer.df-topnav-quick-actions-drawer-mobile{--df-drawer-size: 100vw;--df-drawer-max-size: 100vw;top:var(--df-navbar-height, 3.5rem)!important;height:calc(100dvh - var(--df-navbar-height, 3.5rem))!important}.df-drawer.df-topnav-quick-actions-drawer{transition:none;display:flex;flex-direction:column;padding:var(--df-spacing-5);--df-topnav-drawer-bg-color: var(--df-color-primary-subtle-background);background-color:var(--df-topnav-drawer-bg-color);overflow-y:auto;scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background)}.df-drawer .df-topnav-drawer-buttons-container{display:flex;flex-direction:column;gap:1px}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn){height:2.5rem;display:flex;align-items:center;padding-inline:var(--df-spacing-5);border-radius:var(--df-borderRadius-main-medium);gap:var(--df-spacing-3);border:none;outline:none;box-shadow:none;-webkit-user-select:none;user-select:none;position:relative;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn){transition:none}}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn){background-color:var(--df-topnav-drawer-bg-color);color:var(--df-color-neutral-alt-default-foreground);--df-topnav-drawer-btn-border-color: var(--df-color-neutral-alt-default-border)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled) .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-default-foreground)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):focus-visible{z-index:1;box-shadow:0 0 0 2px var(--df-topnav-drawer-bg-color),0 0 0 4px var(--df-topnav-drawer-btn-border-color)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):disabled{cursor:not-allowed;color:var(--df-button-text-basic-color-disabled-foreground)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):hover{--df-topnav-drawer-bg-color: var(--df-color-primary-alt-hovered-background)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):hover .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-hovered-foreground)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):active{--df-topnav-drawer-bg-color: var(--df-color-primary-alt-pressed-background)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):active .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-pressed-foreground)}.df-drawer .df-topnav-drawer-button-icon-end{margin-inline-start:auto}.df-drawer .df-topnav-drawer-divider{margin-top:var(--df-spacing-2);margin-bottom:var(--df-spacing-5);border-color:var(--df-color-neutral-alt-default-border)}.df-topnav-drawer-host{display:none}\n"], dependencies: [{ kind: "component", type: DfDrawer, selector: "df-drawer", inputs: ["className", "bodyScroll", "backdrop", "container", "size", "resizable", "visible", "keepInDom", "configuration", "position", "focusOnInit"], outputs: ["sizeChange", "visibleChange", "minimizedChange", "maximizedChange", "resizingChange", "minSize", "maxSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfTopNavButton, selector: "button[dfTopNavButton]", inputs: ["appearance", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    </div>`, isInline: true, styles: [".df-topnav-quick-actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--df-spacing-5)}.df-dropdown .df-dropdown-item.df-topnav-quick-action-dropdown-item{display:flex;gap:var(--df-spacing-3)}.df-drawer.df-topnav-quick-actions-drawer{position:absolute!important;transition:none}.df-drawer.df-topnav-quick-actions-drawer.df-collapse-collapsing.df-collapse-horizontal{transition:none}.df-drawer.df-topnav-quick-actions-drawer-mobile{--df-drawer-size: 100vw;--df-drawer-max-size: 100vw;top:var(--df-navbar-height, 3.5rem)!important;height:calc(100dvh - var(--df-navbar-height, 3.5rem))!important}.df-drawer.df-topnav-quick-actions-drawer{transition:none;display:flex;flex-direction:column;padding:var(--df-spacing-5);background-color:var(--df-color-primary-subtle-background);overflow-y:auto;scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background)}.df-drawer .df-topnav-drawer-buttons-container{display:flex;flex-direction:column;gap:1px}.df-drawer .df-topnav-drawer-button{height:2.5rem;display:flex;align-items:center;padding-inline:var(--df-spacing-5);border-radius:var(--df-borderRadius-main-medium);gap:var(--df-spacing-3);border:none;outline:none;box-shadow:none;-webkit-user-select:none;user-select:none;position:relative;cursor:pointer;background-color:var(--df-color-primary-subtle-background);color:var(--df-color-neutral-alt-default-foreground);transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-drawer .df-topnav-drawer-button{transition:none}}.df-drawer .df-topnav-drawer-button:not(:disabled) .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-default-foreground)}.df-drawer .df-topnav-drawer-button:not(:disabled):focus-visible{z-index:1;box-shadow:0 0 0 2px var(--df-color-primary-subtle-background),0 0 0 4px var(--df-color-focus-main-border)}.df-drawer .df-topnav-drawer-button:disabled{cursor:not-allowed;color:var(--df-button-text-basic-color-disabled-foreground)}.df-drawer .df-topnav-drawer-button:not(:disabled):hover{color:var(--df-color-neutral-alt-hovered-foreground);background-color:var(--df-color-primary-alt-hovered-background)}.df-drawer .df-topnav-drawer-button:not(:disabled):hover:not(:disabled):focus-visible{box-shadow:0 0 0 2px var(--df-color-primary-alt-hovered-background),0 0 0 4px var(--df-color-focus-main-border)}.df-drawer .df-topnav-drawer-button:not(:disabled):hover .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-hovered-foreground)}.df-drawer .df-topnav-drawer-button:not(:disabled):active{color:var(--df-color-neutral-alt-pressed-foreground);background-color:var(--df-color-primary-alt-pressed-background)}.df-drawer .df-topnav-drawer-button:not(:disabled):active:not(:disabled):focus-visible{box-shadow:0 0 0 2px var(--df-color-primary-alt-pressed-background),0 0 0 4px var(--df-color-focus-main-border)}.df-drawer .df-topnav-drawer-button:not(:disabled):active .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-pressed-foreground)}.df-drawer .df-topnav-drawer-button-icon-end{margin-inline-start:auto}.df-drawer .df-topnav-drawer-divider{margin-top:var(--df-spacing-2);margin-bottom:var(--df-spacing-5);border-color:var(--df-color-neutral-alt-default-border)}.df-drawer .df-topnav-quick-action-dropdown-drawer{position:relative}.df-drawer .df-topnav-quick-action-dropdown-drawer .df-dropdown{min-width:100%}.df-topnav-drawer-host{display:none}\n"], dependencies: [{ kind: "component", type: DfDrawer, selector: "df-drawer", inputs: ["className", "bodyScroll", "backdrop", "closeOnBackdropClick", "container", "size", "resizable", "visible", "keepInDom", "configuration", "position", "focusOnInit"], outputs: ["sizeChange", "visibleChange", "minimizedChange", "maximizedChange", "resizingChange", "minSize", "maxSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfIconButton, selector: "button[dfIconButton], a[dfIconButton]" }, { kind: "component", type: DfIcon, selector: "df-icon" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActions, decorators: [{
             type: Component,
             args: [{ selector: 'df-topnav-quick-actions', host: {
                         '[style.display]': "'contents'",
@@ -966,18 +851,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         <ng-container *ngTemplateOutlet="topnavQuickActions" />
       } @else {
         <button
-          dfTopNavButton
-          icon
+          dfIconButton
+          appearance="text"
+          variant="neutral"
+          transparent
+          [mirror]="mainNavAppliedStyle() === 'mirror'"
           aria-label="Toggle quick actions menu"
           i18n-aria-label="@@df.topnav.toggle-quick-actions.ariaLabel"
           (click)="menuExpanded.set(!menuExpanded())"
-        >
-          <span
-            class="fal df-topnav-toggle-icon"
-            [class.fa-xmark]="menuExpanded()"
-            [class.fa-ellipsis-vertical]="!menuExpanded()"
-          ></span>
-        </button>
+          class="fal"
+          [class.fa-xmark]="menuExpanded()"
+          [class.fa-ellipsis-vertical]="!menuExpanded()"
+        ></button>
         <df-drawer
           class="df-topnav-drawer-host"
           position="inline-end"
@@ -993,8 +878,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         >
           @let selected = selectedQuickAction();
           @if (selected) {
-            <button type="button" class="df-topnav-drawer-button" (click)="selectedQuickAction.set(undefined)">
-              <span class="fal fa-arrow-left df-topnav-drawer-button-icon" aria-hidden="true"></span>
+            <button
+              type="button"
+              class="df-topnav-drawer-button"
+              (click)="prevSelectedQuickAction.set(selectedQuickAction()); selectedQuickAction.set(undefined)"
+              #selectedBtn
+            >
+              <df-icon class="fal fa-arrow-left df-topnav-drawer-button-icon" />
               <span>{{ selected.label() }}</span>
             </button>
             <hr class="df-topnav-drawer-divider" />
@@ -1009,7 +899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                   [attr.aria-label]="searchElement()!.ariaLabel()"
                 >
                   <div class="input-group-prepend text-bg-neutral-alt" aria-hidden="true">
-                    <span class="input-group-text fa-light fa-search"></span>
+                    <df-icon class="input-group-text fa-light fa-search" />
                   </div>
                   <ng-container *ngTemplateOutlet="searchElement()!['templateRef']()" />
                 </div>
@@ -1021,17 +911,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     class="df-topnav-drawer-button"
                     (click)="clickQuickAction(actionElement)"
                     [disabled]="actionElement.disabled()"
+                    #drawerButton
+                    [id]="actionLabelToId(actionElement)"
                   >
                     <ng-template #dfQuickActionDefaultIcon>
-                      <span class="fal" [class]="actionElement.icon()" aria-hidden="true"></span>
+                      <df-icon class="fal" [class]="actionElement.icon()" />
                     </ng-template>
                     <ng-container *ngTemplateOutlet="actionElement['actionIcon']() || dfQuickActionDefaultIcon" />
                     <span>{{ actionElement.label() }}</span>
                     @if (actionElement['actionContent']()) {
-                      <span
+                      <df-icon
                         class="fal fa-chevron-right df-topnav-drawer-button-icon df-topnav-drawer-button-icon-end"
-                        aria-hidden="true"
-                      ></span>
+                      />
                     }
                   </button>
                 } @else {
@@ -1042,8 +933,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
           }
         </df-drawer>
       }
-    </div>`, imports: [DfDrawer, NgTemplateOutlet, DfTopNavButton], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".df-topnav-quick-actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--df-spacing-5)}.df-drawer.df-topnav-quick-actions-drawer{position:absolute!important;transition:none}.df-drawer.df-topnav-quick-actions-drawer.df-collapse-collapsing.df-collapse-horizontal{transition:none}.df-drawer.df-topnav-quick-actions-drawer-mobile{--df-drawer-size: 100vw;--df-drawer-max-size: 100vw;top:var(--df-navbar-height, 3.5rem)!important;height:calc(100dvh - var(--df-navbar-height, 3.5rem))!important}.df-drawer.df-topnav-quick-actions-drawer{transition:none;display:flex;flex-direction:column;padding:var(--df-spacing-5);--df-topnav-drawer-bg-color: var(--df-color-primary-subtle-background);background-color:var(--df-topnav-drawer-bg-color);overflow-y:auto;scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background)}.df-drawer .df-topnav-drawer-buttons-container{display:flex;flex-direction:column;gap:1px}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn){height:2.5rem;display:flex;align-items:center;padding-inline:var(--df-spacing-5);border-radius:var(--df-borderRadius-main-medium);gap:var(--df-spacing-3);border:none;outline:none;box-shadow:none;-webkit-user-select:none;user-select:none;position:relative;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn){transition:none}}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn){background-color:var(--df-topnav-drawer-bg-color);color:var(--df-color-neutral-alt-default-foreground);--df-topnav-drawer-btn-border-color: var(--df-color-neutral-alt-default-border)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled) .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-default-foreground)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):focus-visible{z-index:1;box-shadow:0 0 0 2px var(--df-topnav-drawer-bg-color),0 0 0 4px var(--df-topnav-drawer-btn-border-color)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):disabled{cursor:not-allowed;color:var(--df-button-text-basic-color-disabled-foreground)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):hover{--df-topnav-drawer-bg-color: var(--df-color-primary-alt-hovered-background)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):hover .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-hovered-foreground)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):active{--df-topnav-drawer-bg-color: var(--df-color-primary-alt-pressed-background)}.df-drawer :is(.df-topnav-drawer-button,.df-topnav-btn):not(:disabled):active .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-pressed-foreground)}.df-drawer .df-topnav-drawer-button-icon-end{margin-inline-start:auto}.df-drawer .df-topnav-drawer-divider{margin-top:var(--df-spacing-2);margin-bottom:var(--df-spacing-5);border-color:var(--df-color-neutral-alt-default-border)}.df-topnav-drawer-host{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { reversedVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "reversedVertical", required: false }] }], tabletDrawerContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabletDrawerContainer", required: false }] }], _actionElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DF_TOPNAV_QUICK_ACTION_ELEMENT), { isSignal: true }] }], drawer: [{ type: i0.ViewChild, args: ['drawer', { ...{ read: DfDrawer }, isSignal: true }] }] } });
+    </div>`, imports: [DfDrawer, NgTemplateOutlet, DfIconButton, DfIcon], encapsulation: ViewEncapsulation.None, styles: [".df-topnav-quick-actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--df-spacing-5)}.df-dropdown .df-dropdown-item.df-topnav-quick-action-dropdown-item{display:flex;gap:var(--df-spacing-3)}.df-drawer.df-topnav-quick-actions-drawer{position:absolute!important;transition:none}.df-drawer.df-topnav-quick-actions-drawer.df-collapse-collapsing.df-collapse-horizontal{transition:none}.df-drawer.df-topnav-quick-actions-drawer-mobile{--df-drawer-size: 100vw;--df-drawer-max-size: 100vw;top:var(--df-navbar-height, 3.5rem)!important;height:calc(100dvh - var(--df-navbar-height, 3.5rem))!important}.df-drawer.df-topnav-quick-actions-drawer{transition:none;display:flex;flex-direction:column;padding:var(--df-spacing-5);background-color:var(--df-color-primary-subtle-background);overflow-y:auto;scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background)}.df-drawer .df-topnav-drawer-buttons-container{display:flex;flex-direction:column;gap:1px}.df-drawer .df-topnav-drawer-button{height:2.5rem;display:flex;align-items:center;padding-inline:var(--df-spacing-5);border-radius:var(--df-borderRadius-main-medium);gap:var(--df-spacing-3);border:none;outline:none;box-shadow:none;-webkit-user-select:none;user-select:none;position:relative;cursor:pointer;background-color:var(--df-color-primary-subtle-background);color:var(--df-color-neutral-alt-default-foreground);transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-drawer .df-topnav-drawer-button{transition:none}}.df-drawer .df-topnav-drawer-button:not(:disabled) .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-default-foreground)}.df-drawer .df-topnav-drawer-button:not(:disabled):focus-visible{z-index:1;box-shadow:0 0 0 2px var(--df-color-primary-subtle-background),0 0 0 4px var(--df-color-focus-main-border)}.df-drawer .df-topnav-drawer-button:disabled{cursor:not-allowed;color:var(--df-button-text-basic-color-disabled-foreground)}.df-drawer .df-topnav-drawer-button:not(:disabled):hover{color:var(--df-color-neutral-alt-hovered-foreground);background-color:var(--df-color-primary-alt-hovered-background)}.df-drawer .df-topnav-drawer-button:not(:disabled):hover:not(:disabled):focus-visible{box-shadow:0 0 0 2px var(--df-color-primary-alt-hovered-background),0 0 0 4px var(--df-color-focus-main-border)}.df-drawer .df-topnav-drawer-button:not(:disabled):hover .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-hovered-foreground)}.df-drawer .df-topnav-drawer-button:not(:disabled):active{color:var(--df-color-neutral-alt-pressed-foreground);background-color:var(--df-color-primary-alt-pressed-background)}.df-drawer .df-topnav-drawer-button:not(:disabled):active:not(:disabled):focus-visible{box-shadow:0 0 0 2px var(--df-color-primary-alt-pressed-background),0 0 0 4px var(--df-color-focus-main-border)}.df-drawer .df-topnav-drawer-button:not(:disabled):active .df-topnav-drawer-button-icon{color:var(--df-color-primary-alt-pressed-foreground)}.df-drawer .df-topnav-drawer-button-icon-end{margin-inline-start:auto}.df-drawer .df-topnav-drawer-divider{margin-top:var(--df-spacing-2);margin-bottom:var(--df-spacing-5);border-color:var(--df-color-neutral-alt-default-border)}.df-drawer .df-topnav-quick-action-dropdown-drawer{position:relative}.df-drawer .df-topnav-quick-action-dropdown-drawer .df-dropdown{min-width:100%}.df-topnav-drawer-host{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { reversedVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "reversedVertical", required: false }] }], tabletDrawerContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabletDrawerContainer", required: false }] }], _actionElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DF_TOPNAV_QUICK_ACTION_ELEMENT), { isSignal: true }] }], drawer: [{ type: i0.ViewChild, args: ['drawer', { ...{ read: DfDrawer }, isSignal: true }] }], selectedBtn: [{ type: i0.ViewChild, args: ['selectedBtn', { isSignal: true }] }], drawerButtons: [{ type: i0.ViewChildren, args: ['drawerButton', { isSignal: true }] }] } });
 
 /**
  * TopNav (Top Navigation Bar) provides consistent access to product-level navigation and global actions across Amadeus applications.
@@ -1057,39 +948,43 @@ class DfTopNav {
     constructor() {
         /**
          * The style of the TopNav main nav, which determines the applied styles. Can be either "basic" or "mirror".
-         * When not provided, the applied mode will be determined based on the number of navigation links.
-         */
-        this.mainNavStyle = input(...(ngDevMode ? [undefined, { debugName: "mainNavStyle" }] : []));
-        /**
-         * The style of the TopNav secondary nav, which determines the applied styles. Can be either "basic" or "mirror".
-         * When not provided, the applied mode will be opposite to the main nav style.
+         * If navigation links are present this input is ignored and the applied style will be determined based on the number of navigation links and the superheader input.
          */
-        this.secondaryNavStyle = input(...(ngDevMode ? [undefined, { debugName: "secondaryNavStyle" }] : []));
+        this.mainNavStyle = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "mainNavStyle" }] : /* istanbul ignore next */ []));
         /**
          * The mode of the TopNav, which determines the behavior of the navigation. Can be either "sidenav" or "dropdown".
          */
-        this.mode = input('sidenav', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.mode = input('sidenav', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         /**
          * Indicates whether the navigation menu is expanded or collapsed. This is used to control the visibility of the sidenav menu when the TopNav is in "sidenav" mode on smaller screens. When set to true, the sidenav menu will be visible, and when set to false, it will be hidden.
          */
-        this.navExpanded = model(false, ...(ngDevMode ? [{ debugName: "navExpanded" }] : []));
+        this.navExpanded = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navExpanded" }] : /* istanbul ignore next */ []));
         /**
          * When set to true, the superheader layout will be applied, which moves the navigation to a second line and applies the "mirror" style to it. When not provided, the superheader layout will be applied automatically when there are more than 5 navigation links and the screen size is large or bigger.
          */
-        this.superheader = input(...(ngDevMode ? [undefined, { debugName: "superheader" }] : []));
+        this.superheader = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "superheader" }] : /* istanbul ignore next */ []));
         /**
          * When set to true, the toggle button will be always shown. Useful when the TopNav is used without any navigation links but the toggle button is still needed to access other content.
          * When not provided, the toggle button will be shown automatically when there are navigation links and the screen size is smaller than large.
          */
-        this.showToggle = input(false, { ...(ngDevMode ? { debugName: "showToggle" } : {}), transform: booleanAttribute });
-        this.navigationContainer = contentChild(DfTopNavNavigation, ...(ngDevMode ? [{ debugName: "navigationContainer" }] : []));
-        this.navElements = computed(() => this.navigationContainer()?.['childrenElements']?.() ?? [], ...(ngDevMode ? [{ debugName: "navElements" }] : []));
-        this.navActions = contentChild(DfTopNavQuickActions, ...(ngDevMode ? [{ debugName: "navActions" }] : []));
-        this.inAppContainer = signal(false, ...(ngDevMode ? [{ debugName: "inAppContainer" }] : []));
+        this.showToggle = input(false, { ...(ngDevMode ? { debugName: "showToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.navigationContainer = contentChild(DfTopNavNavigation, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigationContainer" }] : /* istanbul ignore next */ []));
+        this.navElements = computed(() => this.navigationContainer()?.['childrenElements']?.() ?? [], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navElements" }] : /* istanbul ignore next */ []));
+        this.navActions = contentChild(DfTopNavQuickActions, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navActions" }] : /* istanbul ignore next */ []));
+        this.inAppContainer = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inAppContainer" }] : /* istanbul ignore next */ []));
         /**
          * Signal that indicates when the links need to be displayed in the topnav instead of the navbar.
          */
-        this.displayLinksInNav = computed(() => this.isXl() || (this.appliedSuperheader() && this.isLg()), ...(ngDevMode ? [{ debugName: "displayLinksInNav" }] : []));
+        this.displayLinksInNav = computed(() => this.isXl() || (this.appliedSuperheader() && this.isLg()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayLinksInNav" }] : /* istanbul ignore next */ []));
         /**
          * The content of the sidenav, which is derived from the TopNav navigation elements.
          */
@@ -1121,27 +1016,36 @@ class DfTopNav {
             const mapNavElementToSideNavItem = (el) => {
                 if (el instanceof DfTopNavNavigationLink) {
                     return {
-                        label: el.label,
-                        href: el['resolvedLink'],
-                        external: el['externalLink'],
-                        routerLinkActiveOptions: el.routerLinkActiveOptions
+                        label: el.label(),
+                        linkPath: el['resolvedLink'](),
+                        active: el['externalLink']() ? false : undefined,
+                        routerLinkActiveOptions: el.routerLinkActiveOptions()
                     };
                 }
                 {
                     return {
-                        label: el.label,
-                        children: computed(() => (el['childElements']() ?? []).map(mapNavElementToSideNavItem))
+                        label: el.label(),
+                        children: (el['childElements']() ?? []).map(mapNavElementToSideNavItem)
                     };
                 }
             };
             return navElements.map(mapNavElementToSideNavItem);
-        }, ...(ngDevMode ? [{ debugName: "sidenavContent" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidenavContent" }] : /* istanbul ignore next */ []));
         // Responsive signals
-        this.isLg = toAngularSignal(lg$);
-        this.isXl = toAngularSignal(xl$);
-        this.appliedSuperheader = computed(() => this.superheader() ?? this.navElements().length > 5, ...(ngDevMode ? [{ debugName: "appliedSuperheader" }] : []));
-        this.mainNavAppliedStyle = computed(() => this.mainNavStyle() ?? (this.navElements().length > 0 && !this.appliedSuperheader() ? 'mirror' : 'basic'), ...(ngDevMode ? [{ debugName: "mainNavAppliedStyle" }] : []));
-        this.secondaryNavAppliedStyle = computed(() => this.secondaryNavStyle() ?? (this.mainNavAppliedStyle() === 'mirror' ? 'basic' : 'mirror'), ...(ngDevMode ? [{ debugName: "secondaryNavAppliedStyle" }] : []));
+        this.isLg = trackWindow('lg');
+        this.isXl = trackWindow('xl');
+        this.appliedSuperheader = computed(() => this.superheader() ?? this.navElements().length > 5, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appliedSuperheader" }] : /* istanbul ignore next */ []));
+        this.mainNavAppliedStyle = computed(() => {
+            if (this.navElements().length > 0) {
+                return this.appliedSuperheader() ? 'basic' : 'mirror';
+            }
+            else {
+                return this.mainNavStyle() ?? 'basic';
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mainNavAppliedStyle" }] : /* istanbul ignore next */ []));
         // The drawer and sidenav should never be opened together. Those two effects ensure that.
         effect(() => {
             if (this.navExpanded()) {
@@ -1171,8 +1075,8 @@ class DfTopNav {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfTopNav, isStandalone: true, selector: "df-topnav", inputs: { mainNavStyle: { classPropertyName: "mainNavStyle", publicName: "mainNavStyle", isSignal: true, isRequired: false, transformFunction: null }, secondaryNavStyle: { classPropertyName: "secondaryNavStyle", publicName: "secondaryNavStyle", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, navExpanded: { classPropertyName: "navExpanded", publicName: "navExpanded", isSignal: true, isRequired: false, transformFunction: null }, superheader: { classPropertyName: "superheader", publicName: "superheader", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navExpanded: "navExpandedChange" }, host: { classAttribute: "df-topnav" }, queries: [{ propertyName: "navigationContainer", first: true, predicate: DfTopNavNavigation, descendants: true, isSignal: true }, { propertyName: "navActions", first: true, predicate: DfTopNavQuickActions, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfTopNav, isStandalone: true, selector: "df-topnav", inputs: { mainNavStyle: { classPropertyName: "mainNavStyle", publicName: "mainNavStyle", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, navExpanded: { classPropertyName: "navExpanded", publicName: "navExpanded", isSignal: true, isRequired: false, transformFunction: null }, superheader: { classPropertyName: "superheader", publicName: "superheader", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navExpanded: "navExpandedChange" }, host: { classAttribute: "df-topnav" }, queries: [{ propertyName: "navigationContainer", first: true, predicate: DfTopNavNavigation, descendants: true, isSignal: true }, { propertyName: "navActions", first: true, predicate: DfTopNavQuickActions, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #navContent>
       <ng-content select="df-topnav-navigation" />
     </ng-template>
@@ -1187,19 +1091,19 @@ class DfTopNav {
       >
         @if (showToggle() || (sidenavContent().length && !isLg())) {
           <button
-            dfTopNavButton
-            icon
+            dfIconButton
+            appearance="text"
+            variant="neutral"
+            transparent
+            [mirror]="mainNavAppliedStyle() === 'mirror'"
             aria-label="Toggle navigation menu"
             i18n-aria-label="@@df.topnav.toggle-sidenav.ariaLabel"
             (click)="navExpanded.set(!navExpanded())"
             aria-haspopup="dialog"
-          >
-            <span
-              class="fal df-topnav-toggle-icon"
-              [class.fa-xmark]="navExpanded()"
-              [class.fa-bars]="!navExpanded()"
-            ></span>
-          </button>
+            class="fal df-topnav-toggle-button"
+            [class.fa-xmark]="navExpanded()"
+            [class.fa-bars]="!navExpanded()"
+          ></button>
         }
         <ng-content select="df-topnav-brand" />
         @if (!appliedSuperheader() && (!inAppContainer() || isXl())) {
@@ -1210,8 +1114,8 @@ class DfTopNav {
       @if (appliedSuperheader() && (!inAppContainer() || isLg())) {
         <nav
           class="df-topnav-nav"
-          [class.df-topnav-nav-basic]="secondaryNavAppliedStyle() === 'basic'"
-          [class.df-topnav-nav-mirror]="secondaryNavAppliedStyle() === 'mirror'"
+          [class.df-topnav-nav-basic]="mainNavAppliedStyle() === 'mirror'"
+          [class.df-topnav-nav-mirror]="mainNavAppliedStyle() === 'basic'"
           aria-label="Secondary"
           i18n-aria-label="@@df.topnav.secondary-nav.ariaLabel"
         >
@@ -1219,9 +1123,9 @@ class DfTopNav {
         </nav>
       }
     </header>
-  `, isInline: true, styles: ["@media(min-width:768px)and (max-width:991px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-topnav-header{z-index:2010}}.df-topnav-header{position:relative;z-index:11;view-transition-name:df-topnav-header}body:not(:has(.df-env-banner)) .df-topnav-header{box-shadow:0 0 8px var(--df-color-shadow-1)}.df-topnav-nav{display:flex;align-items:center;height:3.5rem}.df-topnav-nav:first-of-type{padding-inline:var(--df-spacing-3)}@media(min-width:1200px){.df-topnav-nav{gap:var(--df-spacing-5)}}.df-topnav-nav.df-topnav-nav-basic{background:var(--df-topnav-color-inert-basic-background);--df-topnav-btn-bg-color: var(--df-topnav-color-inert-basic-background);--df-topnav-btn-border-color: var(--df-topnav-color-inert-basic-foreground)}.df-topnav-nav.df-topnav-nav-mirror{background:var(--df-topnav-color-inert-mirror-background);--df-topnav-btn-bg-color: var(--df-topnav-color-inert-mirror-background);--df-topnav-btn-border-color: var(--df-topnav-color-inert-mirror-foreground)}.df-topnav-toggle-icon{width:2.25rem;height:1.5rem}.df-topnav-nav-border{border-bottom:1px solid var(--df-color-inert-neutral-main-border)}\n"], dependencies: [{ kind: "component", type: DfTopNavButton, selector: "button[dfTopNavButton]", inputs: ["appearance", "icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@media(width>=576px)and (width<=991px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-topnav-header{z-index:2010}}.df-topnav-toggle-button{position:relative}.df-topnav-header{position:relative;z-index:11;view-transition-name:df-topnav-header}body:not(:has(.df-env-banner)) .df-topnav-header{box-shadow:0 0 8px var(--df-color-shadow-1)}.df-topnav-nav{display:flex;align-items:center;height:3.5rem}.df-topnav-nav:first-of-type{padding-inline:var(--df-spacing-3)}@media(width>=1200px){.df-topnav-nav{gap:var(--df-spacing-5)}}.df-topnav-nav.df-topnav-nav-basic{background:var(--df-topnav-color-inert-basic-background);color:var(--df-topnav-color-inert-basic-foreground)}.df-topnav-nav.df-topnav-nav-mirror{background:var(--df-topnav-color-inert-mirror-background);color:var(--df-topnav-color-inert-mirror-foreground)}.df-topnav-toggle-icon{width:2.25rem;height:1.5rem}.df-topnav-nav-border{border-bottom:1px solid var(--df-color-inert-neutral-main-border)}\n"], dependencies: [{ kind: "component", type: DfIconButton, selector: "button[dfIconButton], a[dfIconButton]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNav, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNav, decorators: [{
             type: Component,
             args: [{ selector: 'df-topnav', template: `
     <ng-template #navContent>
@@ -1238,19 +1142,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       >
         @if (showToggle() || (sidenavContent().length && !isLg())) {
           <button
-            dfTopNavButton
-            icon
+            dfIconButton
+            appearance="text"
+            variant="neutral"
+            transparent
+            [mirror]="mainNavAppliedStyle() === 'mirror'"
             aria-label="Toggle navigation menu"
             i18n-aria-label="@@df.topnav.toggle-sidenav.ariaLabel"
             (click)="navExpanded.set(!navExpanded())"
             aria-haspopup="dialog"
-          >
-            <span
-              class="fal df-topnav-toggle-icon"
-              [class.fa-xmark]="navExpanded()"
-              [class.fa-bars]="!navExpanded()"
-            ></span>
-          </button>
+            class="fal df-topnav-toggle-button"
+            [class.fa-xmark]="navExpanded()"
+            [class.fa-bars]="!navExpanded()"
+          ></button>
         }
         <ng-content select="df-topnav-brand" />
         @if (!appliedSuperheader() && (!inAppContainer() || isXl())) {
@@ -1261,8 +1165,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       @if (appliedSuperheader() && (!inAppContainer() || isLg())) {
         <nav
           class="df-topnav-nav"
-          [class.df-topnav-nav-basic]="secondaryNavAppliedStyle() === 'basic'"
-          [class.df-topnav-nav-mirror]="secondaryNavAppliedStyle() === 'mirror'"
+          [class.df-topnav-nav-basic]="mainNavAppliedStyle() === 'mirror'"
+          [class.df-topnav-nav-mirror]="mainNavAppliedStyle() === 'basic'"
           aria-label="Secondary"
           i18n-aria-label="@@df.topnav.secondary-nav.ariaLabel"
         >
@@ -1270,10 +1174,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         </nav>
       }
     </header>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [DfTopNavButton, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, host: {
+  `, imports: [DfIconButton, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, host: {
                         class: 'df-topnav'
-                    }, styles: ["@media(min-width:768px)and (max-width:991px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-topnav-header{z-index:2010}}.df-topnav-header{position:relative;z-index:11;view-transition-name:df-topnav-header}body:not(:has(.df-env-banner)) .df-topnav-header{box-shadow:0 0 8px var(--df-color-shadow-1)}.df-topnav-nav{display:flex;align-items:center;height:3.5rem}.df-topnav-nav:first-of-type{padding-inline:var(--df-spacing-3)}@media(min-width:1200px){.df-topnav-nav{gap:var(--df-spacing-5)}}.df-topnav-nav.df-topnav-nav-basic{background:var(--df-topnav-color-inert-basic-background);--df-topnav-btn-bg-color: var(--df-topnav-color-inert-basic-background);--df-topnav-btn-border-color: var(--df-topnav-color-inert-basic-foreground)}.df-topnav-nav.df-topnav-nav-mirror{background:var(--df-topnav-color-inert-mirror-background);--df-topnav-btn-bg-color: var(--df-topnav-color-inert-mirror-background);--df-topnav-btn-border-color: var(--df-topnav-color-inert-mirror-foreground)}.df-topnav-toggle-icon{width:2.25rem;height:1.5rem}.df-topnav-nav-border{border-bottom:1px solid var(--df-color-inert-neutral-main-border)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { mainNavStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainNavStyle", required: false }] }], secondaryNavStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryNavStyle", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], navExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "navExpanded", required: false }] }, { type: i0.Output, args: ["navExpandedChange"] }], superheader: [{ type: i0.Input, args: [{ isSignal: true, alias: "superheader", required: false }] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], navigationContainer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNavNavigation), { isSignal: true }] }], navActions: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNavQuickActions), { isSignal: true }] }] } });
+                    }, styles: ["@media(width>=576px)and (width<=991px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-topnav-header{z-index:2010}}.df-topnav-toggle-button{position:relative}.df-topnav-header{position:relative;z-index:11;view-transition-name:df-topnav-header}body:not(:has(.df-env-banner)) .df-topnav-header{box-shadow:0 0 8px var(--df-color-shadow-1)}.df-topnav-nav{display:flex;align-items:center;height:3.5rem}.df-topnav-nav:first-of-type{padding-inline:var(--df-spacing-3)}@media(width>=1200px){.df-topnav-nav{gap:var(--df-spacing-5)}}.df-topnav-nav.df-topnav-nav-basic{background:var(--df-topnav-color-inert-basic-background);color:var(--df-topnav-color-inert-basic-foreground)}.df-topnav-nav.df-topnav-nav-mirror{background:var(--df-topnav-color-inert-mirror-background);color:var(--df-topnav-color-inert-mirror-foreground)}.df-topnav-toggle-icon{width:2.25rem;height:1.5rem}.df-topnav-nav-border{border-bottom:1px solid var(--df-color-inert-neutral-main-border)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { mainNavStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainNavStyle", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], navExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "navExpanded", required: false }] }, { type: i0.Output, args: ["navExpandedChange"] }], superheader: [{ type: i0.Input, args: [{ isSignal: true, alias: "superheader", required: false }] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], navigationContainer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNavNavigation), { isSignal: true }] }], navActions: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNavQuickActions), { isSignal: true }] }] } });
 
 /**
  * A directive to mark the company template in the {@link DfTopNavBrand} brand component.
@@ -1282,10 +1186,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * @since 21.1
  */
 class DfTopNavBrandLinkContent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavBrandLinkContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfTopNavBrandLinkContent, isStandalone: true, selector: "ng-template[dfTopNavBrandLinkContent]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavBrandLinkContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: DfTopNavBrandLinkContent, isStandalone: true, selector: "ng-template[dfTopNavBrandLinkContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavBrandLinkContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavBrandLinkContent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[dfTopNavBrandLinkContent]'
@@ -1294,7 +1198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 /**
  * The TopNav brand component, used to display the company and product information.
  *
- * See {@link https://design-factory.amadeus.net/components/topnav/examples#brand|Design Factory example}
+ * See {@link https://design-factory.amadeus.net/components/topnav/developer#brand|Design Factory example}
  * @since 21.1
  */
 class DfTopNavBrand {
@@ -1302,24 +1206,27 @@ class DfTopNavBrand {
         /**
          * The URL to navigate to when the brand is clicked. Defaults to "/".
          */
-        this.href = input('/', ...(ngDevMode ? [{ debugName: "href" }] : []));
+        this.href = input('/', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
         /**
          * The product.
          */
-        this.product = input(...(ngDevMode ? [undefined, { debugName: "product" }] : []));
+        this.product = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "product" }] : /* istanbul ignore next */ []));
         /**
          * The module.
          */
-        this.module = input(...(ngDevMode ? [undefined, { debugName: "module" }] : []));
+        this.module = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "module" }] : /* istanbul ignore next */ []));
         /**
          * Whether to display the Amadeus logo as a vector graphic instead of text.
          */
-        this.amaudeusLogoVector = input(false, { ...(ngDevMode ? { debugName: "amaudeusLogoVector" } : {}), transform: booleanAttribute });
-        this.brandLinkContent = contentChild(DfTopNavBrandLinkContent, { ...(ngDevMode ? { debugName: "brandLinkContent" } : {}), read: TemplateRef });
-        this.isSm = toAngularSignal(sm$);
+        this.amaudeusLogoVector = input(false, { ...(ngDevMode ? { debugName: "amaudeusLogoVector" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.brandLinkContent = contentChild(DfTopNavBrandLinkContent, { ...(ngDevMode ? { debugName: "brandLinkContent" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.isSm = trackWindow('sm');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavBrand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfTopNavBrand, isStandalone: true, selector: "df-topnav-brand", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, module: { classPropertyName: "module", publicName: "module", isSignal: true, isRequired: false, transformFunction: null }, amaudeusLogoVector: { classPropertyName: "amaudeusLogoVector", publicName: "amaudeusLogoVector", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "brandLinkContent", first: true, predicate: DfTopNavBrandLinkContent, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavBrand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfTopNavBrand, isStandalone: true, selector: "df-topnav-brand", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, module: { classPropertyName: "module", publicName: "module", isSignal: true, isRequired: false, transformFunction: null }, amaudeusLogoVector: { classPropertyName: "amaudeusLogoVector", publicName: "amaudeusLogoVector", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "brandLinkContent", first: true, predicate: DfTopNavBrandLinkContent, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
     <div class="df-topnav-brand">
       <a class="df-topnav-brand-link" [routerLink]="href()">
         <ng-template #defaultLink>
@@ -1390,9 +1297,9 @@ class DfTopNavBrand {
         <span class="df-topnav-brand-module">{{ module() }}</span>
       }
     </div>
-  `, isInline: true, styles: [".df-topnav-brand{display:flex;align-items:center}.df-topnav-brand-link{display:flex;align-items:center;padding:var(--df-spacing-3);gap:var(--df-spacing-3);font-size:var(--df-typo-sizing-large);outline:none;box-shadow:none;-webkit-user-select:none;user-select:none;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-brand-link{transition:none}}.df-topnav-brand-link{border-bottom:0!important;background-color:var(--df-topnav-brand-link-bg-color)!important}.df-topnav-brand-link:focus-visible{box-shadow:inset 0 0 0 2px var(--df-topnav-brand-link-bg-color),inset 0 0 0 4px var(--df-topnav-brand-link-border-color)!important}.df-topnav-brand-company-amadeus-logo-mobile{width:1rem;height:1.25rem}.df-topnav-brand-company-amaudeus-logo-desktop{width:7rem;height:1rem}.df-topnav-brand-module-separator{height:1rem;width:1px;background-color:var(--df-color-inert-neutral-main-border);margin-inline-end:var(--df-spacing-3)}.df-topnav-brand-module{margin-top:calc(.75 * (var(--df-typo-sizing-large) - var(--df-typo-sizing-default)))}.df-topnav-brand-company-amadeus-text{font-weight:var(--df-typo-weight-medium)}.df-topnav-nav-basic .df-topnav-brand{color:var(--df-topnav-color-productName-basic-default-foreground)}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link{color:var(--df-topnav-color-productName-basic-default-foreground)!important;--df-topnav-brand-link-bg-color: var(--df-topnav-color-inert-basic-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-basic-default-border)}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:hover{--df-topnav-brand-link-bg-color: var(--df-topnav-color-productName-basic-hovered-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-basic-hovered-border);color:var(--df-topnav-color-productName-basic-hovered-foreground)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:active{--df-topnav-brand-link-bg-color: var(--df-topnav-color-productName-basic-pressed-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-basic-pressed-border);color:var(--df-topnav-color-productName-basic-pressed-foreground)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-company-amaudeus-logo-desktop{color:var(--df-color-logo-main-foreground)}.df-topnav-nav-mirror .df-topnav-brand{color:var(--df-topnav-color-productName-mirror-default-foreground)}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link{color:var(--df-topnav-color-productName-mirror-default-foreground)!important;--df-topnav-brand-link-bg-color: var(--df-topnav-color-inert-mirror-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-mirror-default-border)}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:hover{--df-topnav-brand-link-bg-color: var(--df-topnav-color-productName-mirror-hovered-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-mirror-hovered-border);color:var(--df-topnav-color-productName-mirror-hovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:active{--df-topnav-brand-link-bg-color: var(--df-topnav-color-productName-mirror-pressed-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-mirror-pressed-border);color:var(--df-topnav-color-productName-mirror-pressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-company-amaudeus-logo-desktop{color:var(--df-color-logo-alt-foreground)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [".df-topnav-brand{display:flex;align-items:center}.df-topnav-brand-link{display:flex;align-items:center;padding:var(--df-spacing-3);gap:var(--df-spacing-3);font-size:var(--df-typo-sizing-large);outline:none;box-shadow:none;-webkit-user-select:none;user-select:none;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-brand-link{transition:none}}.df-topnav-brand-link{border-bottom:0!important}.df-topnav-brand-company-amadeus-logo-mobile{width:1rem;height:1.25rem}.df-topnav-brand-company-amaudeus-logo-desktop{width:7rem;height:1rem}.df-topnav-brand-module-separator{height:1rem;width:1px;background-color:var(--df-color-inert-neutral-main-border);margin-inline-end:var(--df-spacing-3)}.df-topnav-brand-module{margin-top:calc(.75 * (var(--df-typo-sizing-large) - var(--df-typo-sizing-default)))}.df-topnav-brand-company-amadeus-text{font-weight:var(--df-typo-weight-medium)}.df-topnav-nav-basic .df-topnav-brand{color:var(--df-topnav-color-productName-basic-default-foreground)}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link{color:var(--df-topnav-color-productName-basic-default-foreground)!important;background-color:var(--df-topnav-color-inert-basic-background)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:focus-visible{box-shadow:inset 0 0 0 2px var(--df-topnav-color-inert-basic-background),inset 0 0 0 4px var(--df-topnav-color-productName-basic-default-border)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:hover{color:var(--df-topnav-color-productName-basic-hovered-foreground)!important;background-color:var(--df-topnav-color-productName-basic-hovered-background)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:hover:focus-visible{box-shadow:inset 0 0 0 2px var(--df-topnav-color-productName-basic-hovered-background),inset 0 0 0 4px var(--df-topnav-color-productName-basic-hovered-border)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:active{color:var(--df-topnav-color-productName-basic-pressed-foreground)!important;background-color:var(--df-topnav-color-productName-basic-pressed-background)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:active:focus-visible{box-shadow:inset 0 0 0 2px var(--df-topnav-color-productName-basic-pressed-background),inset 0 0 0 4px var(--df-topnav-color-productName-basic-pressed-border)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-company-amaudeus-logo-desktop{color:var(--df-color-logo-main-foreground)}.df-topnav-nav-mirror .df-topnav-brand{color:var(--df-topnav-color-productName-mirror-default-foreground)}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link{color:var(--df-topnav-color-productName-mirror-default-foreground)!important;background-color:var(--df-topnav-color-inert-mirror-background)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:focus-visible{box-shadow:inset 0 0 0 2px var(--df-topnav-color-inert-mirror-background),inset 0 0 0 4px var(--df-topnav-color-productName-mirror-default-border)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:hover{color:var(--df-topnav-color-productName-mirror-hovered-foreground)!important;background-color:var(--df-topnav-color-productName-mirror-hovered-background)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:hover:focus-visible{box-shadow:inset 0 0 0 2px var(--df-topnav-color-productName-mirror-hovered-background),inset 0 0 0 4px var(--df-topnav-color-productName-mirror-hovered-border)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:active{color:var(--df-topnav-color-productName-mirror-pressed-foreground)!important;background-color:var(--df-topnav-color-productName-mirror-pressed-background)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:active:focus-visible{box-shadow:inset 0 0 0 2px var(--df-topnav-color-productName-mirror-pressed-background),inset 0 0 0 4px var(--df-topnav-color-productName-mirror-pressed-border)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-company-amaudeus-logo-desktop{color:var(--df-color-logo-alt-foreground)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavBrand, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavBrand, decorators: [{
             type: Component,
             args: [{ selector: 'df-topnav-brand', template: `
     <div class="df-topnav-brand">
@@ -1465,9 +1372,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         <span class="df-topnav-brand-module">{{ module() }}</span>
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, styles: [".df-topnav-brand{display:flex;align-items:center}.df-topnav-brand-link{display:flex;align-items:center;padding:var(--df-spacing-3);gap:var(--df-spacing-3);font-size:var(--df-typo-sizing-large);outline:none;box-shadow:none;-webkit-user-select:none;user-select:none;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-brand-link{transition:none}}.df-topnav-brand-link{border-bottom:0!important;background-color:var(--df-topnav-brand-link-bg-color)!important}.df-topnav-brand-link:focus-visible{box-shadow:inset 0 0 0 2px var(--df-topnav-brand-link-bg-color),inset 0 0 0 4px var(--df-topnav-brand-link-border-color)!important}.df-topnav-brand-company-amadeus-logo-mobile{width:1rem;height:1.25rem}.df-topnav-brand-company-amaudeus-logo-desktop{width:7rem;height:1rem}.df-topnav-brand-module-separator{height:1rem;width:1px;background-color:var(--df-color-inert-neutral-main-border);margin-inline-end:var(--df-spacing-3)}.df-topnav-brand-module{margin-top:calc(.75 * (var(--df-typo-sizing-large) - var(--df-typo-sizing-default)))}.df-topnav-brand-company-amadeus-text{font-weight:var(--df-typo-weight-medium)}.df-topnav-nav-basic .df-topnav-brand{color:var(--df-topnav-color-productName-basic-default-foreground)}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link{color:var(--df-topnav-color-productName-basic-default-foreground)!important;--df-topnav-brand-link-bg-color: var(--df-topnav-color-inert-basic-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-basic-default-border)}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:hover{--df-topnav-brand-link-bg-color: var(--df-topnav-color-productName-basic-hovered-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-basic-hovered-border);color:var(--df-topnav-color-productName-basic-hovered-foreground)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:active{--df-topnav-brand-link-bg-color: var(--df-topnav-color-productName-basic-pressed-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-basic-pressed-border);color:var(--df-topnav-color-productName-basic-pressed-foreground)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-company-amaudeus-logo-desktop{color:var(--df-color-logo-main-foreground)}.df-topnav-nav-mirror .df-topnav-brand{color:var(--df-topnav-color-productName-mirror-default-foreground)}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link{color:var(--df-topnav-color-productName-mirror-default-foreground)!important;--df-topnav-brand-link-bg-color: var(--df-topnav-color-inert-mirror-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-mirror-default-border)}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:hover{--df-topnav-brand-link-bg-color: var(--df-topnav-color-productName-mirror-hovered-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-mirror-hovered-border);color:var(--df-topnav-color-productName-mirror-hovered-foreground)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:active{--df-topnav-brand-link-bg-color: var(--df-topnav-color-productName-mirror-pressed-background);--df-topnav-brand-link-border-color: var(--df-topnav-color-productName-mirror-pressed-border);color:var(--df-topnav-color-productName-mirror-pressed-foreground)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-company-amaudeus-logo-desktop{color:var(--df-color-logo-alt-foreground)}\n"] }]
+  `, imports: [RouterLink, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, styles: [".df-topnav-brand{display:flex;align-items:center}.df-topnav-brand-link{display:flex;align-items:center;padding:var(--df-spacing-3);gap:var(--df-spacing-3);font-size:var(--df-typo-sizing-large);outline:none;box-shadow:none;-webkit-user-select:none;user-select:none;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-topnav-brand-link{transition:none}}.df-topnav-brand-link{border-bottom:0!important}.df-topnav-brand-company-amadeus-logo-mobile{width:1rem;height:1.25rem}.df-topnav-brand-company-amaudeus-logo-desktop{width:7rem;height:1rem}.df-topnav-brand-module-separator{height:1rem;width:1px;background-color:var(--df-color-inert-neutral-main-border);margin-inline-end:var(--df-spacing-3)}.df-topnav-brand-module{margin-top:calc(.75 * (var(--df-typo-sizing-large) - var(--df-typo-sizing-default)))}.df-topnav-brand-company-amadeus-text{font-weight:var(--df-typo-weight-medium)}.df-topnav-nav-basic .df-topnav-brand{color:var(--df-topnav-color-productName-basic-default-foreground)}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link{color:var(--df-topnav-color-productName-basic-default-foreground)!important;background-color:var(--df-topnav-color-inert-basic-background)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:focus-visible{box-shadow:inset 0 0 0 2px var(--df-topnav-color-inert-basic-background),inset 0 0 0 4px var(--df-topnav-color-productName-basic-default-border)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:hover{color:var(--df-topnav-color-productName-basic-hovered-foreground)!important;background-color:var(--df-topnav-color-productName-basic-hovered-background)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:hover:focus-visible{box-shadow:inset 0 0 0 2px var(--df-topnav-color-productName-basic-hovered-background),inset 0 0 0 4px var(--df-topnav-color-productName-basic-hovered-border)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:active{color:var(--df-topnav-color-productName-basic-pressed-foreground)!important;background-color:var(--df-topnav-color-productName-basic-pressed-background)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-link:active:focus-visible{box-shadow:inset 0 0 0 2px var(--df-topnav-color-productName-basic-pressed-background),inset 0 0 0 4px var(--df-topnav-color-productName-basic-pressed-border)!important}.df-topnav-nav-basic .df-topnav-brand .df-topnav-brand-company-amaudeus-logo-desktop{color:var(--df-color-logo-main-foreground)}.df-topnav-nav-mirror .df-topnav-brand{color:var(--df-topnav-color-productName-mirror-default-foreground)}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link{color:var(--df-topnav-color-productName-mirror-default-foreground)!important;background-color:var(--df-topnav-color-inert-mirror-background)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:focus-visible{box-shadow:inset 0 0 0 2px var(--df-topnav-color-inert-mirror-background),inset 0 0 0 4px var(--df-topnav-color-productName-mirror-default-border)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:hover{color:var(--df-topnav-color-productName-mirror-hovered-foreground)!important;background-color:var(--df-topnav-color-productName-mirror-hovered-background)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:hover:focus-visible{box-shadow:inset 0 0 0 2px var(--df-topnav-color-productName-mirror-hovered-background),inset 0 0 0 4px var(--df-topnav-color-productName-mirror-hovered-border)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:active{color:var(--df-topnav-color-productName-mirror-pressed-foreground)!important;background-color:var(--df-topnav-color-productName-mirror-pressed-background)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-link:active:focus-visible{box-shadow:inset 0 0 0 2px var(--df-topnav-color-productName-mirror-pressed-background),inset 0 0 0 4px var(--df-topnav-color-productName-mirror-pressed-border)!important}.df-topnav-nav-mirror .df-topnav-brand .df-topnav-brand-company-amaudeus-logo-desktop{color:var(--df-color-logo-alt-foreground)}\n"] }]
         }], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: false }] }], module: [{ type: i0.Input, args: [{ isSignal: true, alias: "module", required: false }] }], amaudeusLogoVector: [{ type: i0.Input, args: [{ isSignal: true, alias: "amaudeusLogoVector", required: false }] }], brandLinkContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfTopNavBrandLinkContent), { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
+/**
+ * The dropdown toggle does not use dfButton styles and requires to be recoded...
+ *
+ * @internal
+ */
+class DfTopNavQuickActionThemePickerDrawerToggle {
+    constructor() {
+        /**
+         * The dropdown instance controlled by this toggle element.
+         *
+         * Pass the referenced {@link DfDropdown} instance to connect the host button to its menu.
+         */
+        this.dropdown = input.required({ ...(ngDevMode ? { debugName: "dropdown" } : /* istanbul ignore next */ {}), alias: 'dfTopNavQuickActionThemePickerDrawerToggle' });
+        const element = inject(ElementRef).nativeElement;
+        effect(() => {
+            this.dropdown()['toggleElement'].set(element);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionThemePickerDrawerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DfTopNavQuickActionThemePickerDrawerToggle, isStandalone: true, selector: "button[dfTopNavQuickActionThemePickerDrawerToggle]", inputs: { dropdown: { classPropertyName: "dropdown", publicName: "dfTopNavQuickActionThemePickerDrawerToggle", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.df-show": "dropdown().isOpen()" } }, ngImport: i0, template: `
+    <ng-content />
+    <df-icon
+      class="df-topnav-drawer-button-icon df-topnav-drawer-button-icon-end fal"
+      [class.fa-chevron-down]="!dropdown().isOpen()"
+      [class.fa-chevron-up]="dropdown().isOpen()"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: DfIcon, selector: "df-icon" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionThemePickerDrawerToggle, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'button[dfTopNavQuickActionThemePickerDrawerToggle]',
+                    imports: [DfIcon],
+                    template: `
+    <ng-content />
+    <df-icon
+      class="df-topnav-drawer-button-icon df-topnav-drawer-button-icon-end fal"
+      [class.fa-chevron-down]="!dropdown().isOpen()"
+      [class.fa-chevron-up]="dropdown().isOpen()"
+    />
+  `,
+                    host: {
+                        '[class.df-show]': 'dropdown().isOpen()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfTopNavQuickActionThemePickerDrawerToggle", required: true }] }] } });
 /**
  * DfTopNavQuickActionThemePicker is a topnav quick action dropdown component that allows users to select a theme mode for the application.
  *
@@ -1483,133 +1437,179 @@ class DfTopNavQuickActionThemePicker extends DfTopNavQuickAction {
          *
          * Each option includes a `themeMode` which corresponds to a theme mode in the DfThemeService, and an `icon` which is a FontAwesome class name for the icon to display next to the option.
          */
-        this.themeOptions = input.required(...(ngDevMode ? [{ debugName: "themeOptions" }] : []));
+        this.themeOptions = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "themeOptions" }] : /* istanbul ignore next */ []));
         /**
          * The appearance of the TopNav button, which will determine its color. It can be either 'primary' or 'neutral'.
          */
-        this.appearance = input('neutral', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+        this.appearance = input('neutral', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
         this.mapThemeToIcon = computed(() => {
             const map = new Map();
             for (const option of this.themeOptions()) {
                 map.set(option.themeMode, option.icon);
             }
             return map;
-        }, ...(ngDevMode ? [{ debugName: "mapThemeToIcon" }] : []));
-        this.toggleId = `df-topnav-dropdown-toggle-${generateId()}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mapThemeToIcon" }] : /* istanbul ignore next */ []));
         this.content = viewChild.required('themePickerContent');
+        this.drawerContent = viewChild('themePickerDrawerContent', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "drawerContent" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionThemePicker, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfTopNavQuickActionThemePicker, isStandalone: true, selector: "df-topnav-quick-action-theme-picker", inputs: { themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionThemePicker }], viewQueries: [{ propertyName: "content", first: true, predicate: ["themePickerContent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionThemePicker, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfTopNavQuickActionThemePicker, isStandalone: true, selector: "df-topnav-quick-action-theme-picker", inputs: { themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionThemePicker }], viewQueries: [{ propertyName: "content", first: true, predicate: ["themePickerContent"], descendants: true, isSignal: true }, { propertyName: "drawerContent", first: true, predicate: ["themePickerDrawerContent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-template #themePickerContent>
-      <div ngbDropdown class="d-flex" #dropdown="ngbDropdown">
-        <button
-          type="button"
-          aria-label="Choose theme"
-          i18n-aria-label="@@df.themePicker.dropdownToggle.ariaLabel"
-          class="w-100 w-lg-auto"
-          dfTopNavButton
-          [attr.id]="toggleId"
-          ngbDropdownToggle
-        >
-          <span aria-hidden="true" class="fas {{ mapThemeToIcon().get(themeService.selected()) }}"></span>
-          <span class="me-auto d-lg-none">
-            {{ themeService.selected() | titlecase }}
-          </span>
-        </button>
-        <div
-          ngbDropdownMenu
-          [attr.aria-labelledby]="toggleId"
-          class="dropdown-menu-end df-topnav-quick-action-theme-picker-dropdown"
-        >
-          @for (themeOption of themeOptions(); track themeOption; let id = $index) {
-            <button
-              type="button"
-              ngbDropdownItem
-              class="dropdown-item gap-3 d-flex"
-              [class.active]="themeOption.themeMode === themeService.selected()"
-              (click)="dropdown.close(); themeService.setTheme(themeOption.themeMode)"
-            >
-              <span class="fas {{ mapThemeToIcon().get(themeOption.themeMode) }}" aria-hidden="true"></span>
-              {{ themeOption.themeMode | titlecase }}
-            </button>
-          }
-        </div>
-      </div>
+      <button
+        [dfDropdownToggle]="menu"
+        appearance="text"
+        [variant]="appearance()"
+        transparent
+        [mirror]="mainNavAppliedStyle() === 'mirror'"
+        aria-label="Choose theme"
+        i18n-aria-label="@@df.themePicker.dropdownToggle.ariaLabel"
+      >
+        <df-icon class="fas {{ mapThemeToIcon().get(themeService.selected()) }}" />
+      </button>
+      <df-dropdown #menu placement="bottom-end" role="listbox">
+        @for (themeOption of themeOptions(); track themeOption; let id = $index) {
+          <button
+            dfDropdownItem
+            class="df-topnav-quick-action-dropdown-item"
+            [active]="themeOption.themeMode === themeService.selected()"
+            [attr.aria-selected]="themeOption.themeMode === themeService.selected()"
+            (click)="menu.close(); themeService.setTheme(themeOption.themeMode)"
+          >
+            <df-icon class="fas {{ mapThemeToIcon().get(themeOption.themeMode) }}" />
+            {{ themeOption.themeMode | titlecase }}
+          </button>
+        }
+      </df-dropdown>
     </ng-template>
     <ng-container *ngTemplateOutlet="themePickerContent" />
-  `, isInline: true, styles: [".df-drawer .df-topnav-quick-action-theme-picker-dropdown{min-width:100%}\n"], dependencies: [{ kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfTopNavButton, selector: "button[dfTopNavButton]", inputs: ["appearance", "icon"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    <ng-template #themePickerDrawerContent>
+      <button
+        [dfTopNavQuickActionThemePickerDrawerToggle]="menu"
+        class="df-topnav-drawer-button"
+        aria-label="Choose theme"
+        i18n-aria-label="@@df.themePicker.dropdownToggle.ariaLabel"
+      >
+        <df-icon class="fas {{ mapThemeToIcon().get(themeService.selected()) }}" />
+        <span class="me-auto">
+          {{ themeService.selected() | titlecase }}
+        </span>
+      </button>
+      <df-dropdown #menu placement="bottom-end" role="listbox" class="df-topnav-quick-action-dropdown-drawer">
+        @for (themeOption of themeOptions(); track themeOption; let id = $index) {
+          <button
+            dfDropdownItem
+            class="df-topnav-quick-action-dropdown-item"
+            [active]="themeOption.themeMode === themeService.selected()"
+            [attr.aria-selected]="themeOption.themeMode === themeService.selected()"
+            (click)="menu.close(); themeService.setTheme(themeOption.themeMode)"
+          >
+            <df-icon class="fas {{ mapThemeToIcon().get(themeOption.themeMode) }}" />
+            {{ themeOption.themeMode | titlecase }}
+          </button>
+        }
+      </df-dropdown>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: DfDropdown, selector: "df-dropdown", inputs: ["opened", "placement", "size", "container"], outputs: ["openedChange"] }, { kind: "directive", type: DfDropdownItemButton, selector: "button[dfDropdownItem]", inputs: ["active", "disabled"] }, { kind: "component", type: DfDropdownToggle, selector: "button[dfDropdownToggle]", inputs: ["dfDropdownToggle", "iconOnly"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfIcon, selector: "df-icon" }, { kind: "component", type: DfTopNavQuickActionThemePickerDrawerToggle, selector: "button[dfTopNavQuickActionThemePickerDrawerToggle]", inputs: ["dfTopNavQuickActionThemePickerDrawerToggle"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfTopNavQuickActionThemePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTopNavQuickActionThemePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'df-topnav-quick-action-theme-picker', template: `
+            args: [{
+                    selector: 'df-topnav-quick-action-theme-picker',
+                    template: `
     <ng-template #themePickerContent>
-      <div ngbDropdown class="d-flex" #dropdown="ngbDropdown">
-        <button
-          type="button"
-          aria-label="Choose theme"
-          i18n-aria-label="@@df.themePicker.dropdownToggle.ariaLabel"
-          class="w-100 w-lg-auto"
-          dfTopNavButton
-          [attr.id]="toggleId"
-          ngbDropdownToggle
-        >
-          <span aria-hidden="true" class="fas {{ mapThemeToIcon().get(themeService.selected()) }}"></span>
-          <span class="me-auto d-lg-none">
-            {{ themeService.selected() | titlecase }}
-          </span>
-        </button>
-        <div
-          ngbDropdownMenu
-          [attr.aria-labelledby]="toggleId"
-          class="dropdown-menu-end df-topnav-quick-action-theme-picker-dropdown"
-        >
-          @for (themeOption of themeOptions(); track themeOption; let id = $index) {
-            <button
-              type="button"
-              ngbDropdownItem
-              class="dropdown-item gap-3 d-flex"
-              [class.active]="themeOption.themeMode === themeService.selected()"
-              (click)="dropdown.close(); themeService.setTheme(themeOption.themeMode)"
-            >
-              <span class="fas {{ mapThemeToIcon().get(themeOption.themeMode) }}" aria-hidden="true"></span>
-              {{ themeOption.themeMode | titlecase }}
-            </button>
-          }
-        </div>
-      </div>
+      <button
+        [dfDropdownToggle]="menu"
+        appearance="text"
+        [variant]="appearance()"
+        transparent
+        [mirror]="mainNavAppliedStyle() === 'mirror'"
+        aria-label="Choose theme"
+        i18n-aria-label="@@df.themePicker.dropdownToggle.ariaLabel"
+      >
+        <df-icon class="fas {{ mapThemeToIcon().get(themeService.selected()) }}" />
+      </button>
+      <df-dropdown #menu placement="bottom-end" role="listbox">
+        @for (themeOption of themeOptions(); track themeOption; let id = $index) {
+          <button
+            dfDropdownItem
+            class="df-topnav-quick-action-dropdown-item"
+            [active]="themeOption.themeMode === themeService.selected()"
+            [attr.aria-selected]="themeOption.themeMode === themeService.selected()"
+            (click)="menu.close(); themeService.setTheme(themeOption.themeMode)"
+          >
+            <df-icon class="fas {{ mapThemeToIcon().get(themeOption.themeMode) }}" />
+            {{ themeOption.themeMode | titlecase }}
+          </button>
+        }
+      </df-dropdown>
     </ng-template>
     <ng-container *ngTemplateOutlet="themePickerContent" />
-  `, imports: [
-                        NgbDropdown,
-                        NgbDropdownToggle,
-                        NgbDropdownMenu,
-                        NgbDropdownItem,
+    <ng-template #themePickerDrawerContent>
+      <button
+        [dfTopNavQuickActionThemePickerDrawerToggle]="menu"
+        class="df-topnav-drawer-button"
+        aria-label="Choose theme"
+        i18n-aria-label="@@df.themePicker.dropdownToggle.ariaLabel"
+      >
+        <df-icon class="fas {{ mapThemeToIcon().get(themeService.selected()) }}" />
+        <span class="me-auto">
+          {{ themeService.selected() | titlecase }}
+        </span>
+      </button>
+      <df-dropdown #menu placement="bottom-end" role="listbox" class="df-topnav-quick-action-dropdown-drawer">
+        @for (themeOption of themeOptions(); track themeOption; let id = $index) {
+          <button
+            dfDropdownItem
+            class="df-topnav-quick-action-dropdown-item"
+            [active]="themeOption.themeMode === themeService.selected()"
+            [attr.aria-selected]="themeOption.themeMode === themeService.selected()"
+            (click)="menu.close(); themeService.setTheme(themeOption.themeMode)"
+          >
+            <df-icon class="fas {{ mapThemeToIcon().get(themeOption.themeMode) }}" />
+            {{ themeOption.themeMode | titlecase }}
+          </button>
+        }
+      </df-dropdown>
+    </ng-template>
+  `,
+                    imports: [
+                        DfDropdown,
+                        DfDropdownItemButton,
+                        DfDropdownToggle,
                         TitleCasePipe,
                         NgTemplateOutlet,
-                        DfTopNavButton
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionThemePicker }], styles: [".df-drawer .df-topnav-quick-action-theme-picker-dropdown{min-width:100%}\n"] }]
-        }], propDecorators: { themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], content: [{ type: i0.ViewChild, args: ['themePickerContent', { isSignal: true }] }] } });
+                        DfIcon,
+                        DfTopNavQuickActionThemePickerDrawerToggle
+                    ],
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [{ provide: DF_TOPNAV_QUICK_ACTION_ELEMENT, useExisting: DfTopNavQuickActionThemePicker }]
+                }]
+        }], propDecorators: { themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], content: [{ type: i0.ViewChild, args: ['themePickerContent', { isSignal: true }] }], drawerContent: [{ type: i0.ViewChild, args: ['themePickerDrawerContent', { isSignal: true }] }] } });
 
 /**
  * The environment banner component, used to display a banner at the top of the page indicating the current environment (e.g., development, staging, production).
  *
- * See {@link https://design-factory.amadeus.net/components/topnav/examples#environment-banner|Design Factory example}
+ * See {@link https://design-factory.amadeus.net/components/topnav/developer#environment-banner|Design Factory example}
  * @since 21.1
  */
 class DfEnvBanner {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfEnvBanner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DfEnvBanner, isStandalone: true, selector: "df-env-banner", host: { classAttribute: "df-env-banner" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".df-env-banner{display:flex;width:100%;justify-content:center;background-color:var(--df-color-warning-soft-default-background);color:var(--df-color-warning-soft-default-foreground);font-size:var(--df-typo-sizing-xsmall);z-index:10;box-shadow:0 0 8px var(--df-color-shadow-1)}@media(min-width:768px)and (max-width:991px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-env-banner{z-index:2010}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfEnvBanner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: DfEnvBanner, isStandalone: true, selector: "df-env-banner", host: { classAttribute: "df-env-banner" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".df-env-banner{display:flex;width:100%;justify-content:center;background-color:var(--df-color-warning-soft-default-background);color:var(--df-color-warning-soft-default-foreground);font-size:var(--df-typo-sizing-xsmall);z-index:10;box-shadow:0 0 8px var(--df-color-shadow-1)}@media(width>=576px)and (width<=992px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-env-banner{z-index:2010}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfEnvBanner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfEnvBanner, decorators: [{
             type: Component,
-            args: [{ selector: 'df-env-banner', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'df-env-banner', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: {
                         class: 'df-env-banner'
-                    }, styles: [".df-env-banner{display:flex;width:100%;justify-content:center;background-color:var(--df-color-warning-soft-default-background);color:var(--df-color-warning-soft-default-foreground);font-size:var(--df-typo-sizing-xsmall);z-index:10;box-shadow:0 0 8px var(--df-color-shadow-1)}@media(min-width:768px)and (max-width:991px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-env-banner{z-index:2010}}\n"] }]
+                    }, styles: [".df-env-banner{display:flex;width:100%;justify-content:center;background-color:var(--df-color-warning-soft-default-background);color:var(--df-color-warning-soft-default-foreground);font-size:var(--df-typo-sizing-xsmall);z-index:10;box-shadow:0 0 8px var(--df-color-shadow-1)}@media(width>=576px)and (width<=992px){.df-app-container:has(.df-drawer.df-collapse-show,.df-drawer.df-collapse-collapsing) .df-env-banner{z-index:2010}}\n"] }]
         }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DfAppContainer, DfEnvBanner, DfTopNav, DfTopNavBrand, DfTopNavBrandLinkContent, DfTopNavNavigation, DfTopNavNavigationItem, DfTopNavNavigationLink, DfTopNavQuickAction, DfTopNavQuickActionButton, DfTopNavQuickActionButtonContent, DfTopNavQuickActionButtonIcon, DfTopNavQuickActionInDrawer, DfTopNavQuickActionInTopNav, DfTopNavQuickActionSearch, DfTopNavQuickActionSearchInput, DfTopNavQuickActionThemePicker, DfTopNavQuickActions };
+export { DF_TOPNAV_QUICK_ACTION_ELEMENT, DfAppContainer, DfEnvBanner, DfTopNav, DfTopNavBrand, DfTopNavBrandLinkContent, DfTopNavNavigation, DfTopNavNavigationItem, DfTopNavNavigationLink, DfTopNavQuickAction, DfTopNavQuickActionButton, DfTopNavQuickActionButtonContent, DfTopNavQuickActionButtonIcon, DfTopNavQuickActionElement, DfTopNavQuickActionInDrawer, DfTopNavQuickActionInTopNav, DfTopNavQuickActionSearch, DfTopNavQuickActionSearchInput, DfTopNavQuickActionThemePicker, DfTopNavQuickActions };
 //# sourceMappingURL=design-factory-angular-topnav.mjs.map