@a.nemreen/dga-ui 0.3.1 → 0.3.2

package/fesm2022/a.nemreen-dga-ui-header.mjs

@@ -0,0 +1,2483 @@
+import*as a from"@angular/core";import{inject as p,ElementRef as q,input as o,booleanAttribute as y,model as w,output as u,signal as l,Injector as R,DOCUMENT as _,DestroyRef as U,viewChild as k,computed as n,effect as L,untracked as T,afterNextRender as b,HostListener as m,ChangeDetectionStrategy as F,Component as V}from"@angular/core";import{APP_BASE_HREF as Y,PlatformLocation as Q}from"@angular/common";import{dgaSafeHref as N,dgaCx as r,DgaAvatar as S,DgaBadge as C,DgaField as D,DgaFormControl as I,DgaFormEnd as z,DgaIcon as M,DgaIconBadge as A,DgaModal as P,DgaTooltip as O}from"@a.nemreen/dga-ui";function B($,e="/"){if(typeof window>"u")return!1;const t=N($.trim(),e);if(!t)return!1;try{const i=new URL(t,window.location.origin);return i.protocol!=="http:"&&i.protocol!=="https:"||i.origin!==window.location.origin?!1:(window.location.assign(`${i.pathname}${i.search}${i.hash}`),!0)}catch{return!1}}const H="group relative inline-flex h-(--size-header-portal) shrink-0 cursor-pointer items-center gap-md rounded-sm px-xl font-sans text-body-md font-medium text-fg hover:bg-neutral-light focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",K="pointer-events-none absolute start-xl end-xl bottom-0 h-[5px] rounded-full",W="inline-flex min-h-5xl w-full cursor-pointer flex-col justify-center gap-xxs rounded-sm px-xl py-sm text-start text-body-md font-normal text-fg transition-colors hover:bg-neutral-light focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",G="inline-flex min-h-11xl w-full cursor-pointer flex-col justify-center gap-xs rounded-md border border-border bg-card px-2xl py-xl text-start transition-colors hover:border-primary hover:bg-primary-faint focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",Z="relative flex min-h-7xl w-full cursor-pointer items-center gap-lg rounded-md px-xl py-md text-start text-body-md font-medium text-fg transition-colors hover:bg-neutral-light active:bg-neutral-light focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",X="flex min-h-6xl w-full cursor-pointer flex-col justify-center gap-xxs rounded-md px-xl py-md text-start text-body-md text-fg transition-colors hover:bg-neutral-light active:bg-neutral-light focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus";class g{host=p(q);baseHref=p(Y,{optional:!0})??p(Q).getBaseHrefFromDOM()??"/";closeTimer=null;dropdownSyncFrame=null;lastDropdownStyleKey="";collapseId="dga-nav-collapse";dropLink=W;dropTile=G;mobileLink=X;brand=o("",...ngDevMode?[{debugName:"brand"}]:[]);brandSlogan=o("",...ngDevMode?[{debugName:"brandSlogan"}]:[]);brandLogo=o("",...ngDevMode?[{debugName:"brandLogo"}]:[]);brandLogoAlt=o("\u0634\u0639\u0627\u0631 \u0627\u0644\u062C\u0647\u0629",...ngDevMode?[{debugName:"brandLogoAlt"}]:[]);brandPlaceholder=o(!1,{...ngDevMode?{debugName:"brandPlaceholder"}:{},transform:y});brandHref=o("#",...ngDevMode?[{debugName:"brandHref"}]:[]);navLabel=o("\u0627\u0644\u062A\u0646\u0642\u0644 \u0627\u0644\u0631\u0626\u064A\u0633\u064A",...ngDevMode?[{debugName:"navLabel"}]:[]);menuToggleLabel=o("\u0641\u062A\u062D \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062A\u0646\u0642\u0644",...ngDevMode?[{debugName:"menuToggleLabel"}]:[]);menuCloseLabel=o("\u0625\u063A\u0644\u0627\u0642 \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062A\u0646\u0642\u0644",...ngDevMode?[{debugName:"menuCloseLabel"}]:[]);appearance=o("default",...ngDevMode?[{debugName:"appearance"}]:[]);mobileNav=o("sheet",...ngDevMode?[{debugName:"mobileNav"}]:[]);sticky=o(!0,{...ngDevMode?{debugName:"sticky"}:{},transform:y});items=o([],...ngDevMode?[{debugName:"items"}]:[]);actions=o([],...ngDevMode?[{debugName:"actions"}]:[]);search=o(null,...ngDevMode?[{debugName:"search"}]:[]);searchQuery=w("",...ngDevMode?[{debugName:"searchQuery"}]:[]);notifications=o(null,...ngDevMode?[{debugName:"notifications"}]:[]);login=o(null,...ngDevMode?[{debugName:"login"}]:[]);user=o(null,...ngDevMode?[{debugName:"user"}]:[]);authenticated=w(!1,...ngDevMode?[{debugName:"authenticated"}]:[]);actionClick=u();searchSubmit=u();searchSuggestionSelect=u();searchVoice=u();notificationAction=u();loginSubmit=u();logout=u();userLinkClick=u();navLinkClick=u();mobileOpen=l(!1,...ngDevMode?[{debugName:"mobileOpen"}]:[]);openDropdown=l(null,...ngDevMode?[{debugName:"openDropdown"}]:[]);searchOpen=l(!1,...ngDevMode?[{debugName:"searchOpen"}]:[]);notificationsOpen=l(!1,...ngDevMode?[{debugName:"notificationsOpen"}]:[]);loginOpen=l(!1,...ngDevMode?[{debugName:"loginOpen"}]:[]);userMenuOpen=l(!1,...ngDevMode?[{debugName:"userMenuOpen"}]:[]);voiceListening=l(!1,...ngDevMode?[{debugName:"voiceListening"}]:[]);expandedNotificationId=l(null,...ngDevMode?[{debugName:"expandedNotificationId"}]:[]);loginEmail=l("",...ngDevMode?[{debugName:"loginEmail"}]:[]);loginPassword=l("",...ngDevMode?[{debugName:"loginPassword"}]:[]);showLoginPassword=l(!1,...ngDevMode?[{debugName:"showLoginPassword"}]:[]);loginSubmitting=l(!1,...ngDevMode?[{debugName:"loginSubmitting"}]:[]);dropdownPanelStyle=l({},...ngDevMode?[{debugName:"dropdownPanelStyle"}]:[]);dismissedNotificationIds=l(new Set,...ngDevMode?[{debugName:"dismissedNotificationIds"}]:[]);readNotificationIds=l(new Set,...ngDevMode?[{debugName:"readNotificationIds"}]:[]);dropdownTrigger=null;dropdownActionId=null;injector=p(R);doc=p(_);destroyRef=p(U);searchInputRef=k("searchInput",...ngDevMode?[{debugName:"searchInputRef"}]:[]);utilLayerRef=k("utilLayer",...ngDevMode?[{debugName:"utilLayerRef"}]:[]);searchPanelId="dga-header-search-panel";notificationsPanelId="dga-header-notifications-panel";loginPanelId="dga-header-login-panel";userPanelId="dga-header-user-panel";isPortal=n(()=>this.appearance()==="portal",...ngDevMode?[{debugName:"isPortal"}]:[]);appHref(e){return N(e,this.baseHref)}searchConfig=n(()=>this.search(),...ngDevMode?[{debugName:"searchConfig"}]:[]);searchActionId=n(()=>this.search()?.actionId??"search",...ngDevMode?[{debugName:"searchActionId"}]:[]);notificationsConfig=n(()=>this.notifications(),...ngDevMode?[{debugName:"notificationsConfig"}]:[]);notificationsActionId=n(()=>this.notifications()?.actionId??"notifications",...ngDevMode?[{debugName:"notificationsActionId"}]:[]);loginConfig=n(()=>this.login(),...ngDevMode?[{debugName:"loginConfig"}]:[]);loginActionId=n(()=>this.login()?.actionId??"login",...ngDevMode?[{debugName:"loginActionId"}]:[]);userConfig=n(()=>this.user(),...ngDevMode?[{debugName:"userConfig"}]:[]);utilityOverlayOpen=n(()=>this.notificationsOpen()||this.loginOpen()||this.userMenuOpen(),...ngDevMode?[{debugName:"utilityOverlayOpen"}]:[]);visibleNotifications=n(()=>{const e=this.notifications()?.items??[],t=this.dismissedNotificationIds(),i=this.readNotificationIds();return e.filter(s=>!t.has(s.id)).map(s=>({...s,read:!!s.read||i.has(s.id)}))},...ngDevMode?[{debugName:"visibleNotifications"}]:[]);unreadNotificationCount=n(()=>this.visibleNotifications().filter(e=>!e.read).length,...ngDevMode?[{debugName:"unreadNotificationCount"}]:[]);constructor(){this.destroyRef.onDestroy(()=>this.removePortaledUtilLayer()),L(()=>{this.mobileNav(),T(()=>{this.mobileOpen()&&this.closeAll()})}),L(()=>{if(!this.utilityOverlayOpen())return;this.utilLayerRef()?.nativeElement&&this.portalUtilLayer(),b(()=>this.portalUtilLayer(),{injector:this.injector})})}portalUtilLayer(){const e=this.utilLayerRef()?.nativeElement;!e||e.parentElement===this.doc.body||this.doc.body.appendChild(e)}removePortaledUtilLayer(){const e=this.utilLayerRef()?.nativeElement;e?.parentElement===this.doc.body&&e.remove()}activeWideDropdown=n(()=>{if(!this.hoverMenus()&&this.isMobileViewport())return null;const e=this.openDropdown();if(e===null)return null;const t=this.items()[e];if(!t?.dropdown)return null;const i=this.resolveVariant(t);return i==="menu"?null:{index:e,item:t,variant:i}},...ngDevMode?[{debugName:"activeWideDropdown"}]:[]);hostClasses=n(()=>r("relative z-header block overflow-visible border-b border-border-subtle bg-nav font-sans text-fg",this.sticky()&&"sticky top-0 shadow-md"),...ngDevMode?[{debugName:"hostClasses"}]:[]);innerClasses=n(()=>r("relative flex w-full gap-lg px-(--wrapper-padding)",this.appearance()==="default"&&"min-h-6xl items-center py-md",this.appearance()==="portal"&&"h-(--size-header-portal) items-stretch"),...ngDevMode?[{debugName:"innerClasses"}]:[]);desktopNavClasses=n(()=>r("min-w-0 flex-1",this.appearance()==="default"&&"flex flex-wrap items-center gap-lg self-center",this.appearance()==="portal"&&"hidden md:flex md:items-stretch"),...ngDevMode?[{debugName:"desktopNavClasses"}]:[]);actionsClasses=n(()=>r("ms-auto flex shrink-0 items-stretch empty:hidden",this.isPortal()&&this.items().length>0&&"max-md:hidden"),...ngDevMode?[{debugName:"actionsClasses"}]:[]);mobilePanelClass(){const e=this.mobileOpen(),t=this.mobileNav();return r("flex flex-col overflow-hidden bg-nav md:hidden",t==="sheet"&&"fixed top-0 bottom-0 end-0 z-20 w-[min(16rem,70vw)] max-w-[16rem] rounded-s-xl border-s border-border shadow-2xl",t==="fullscreen"&&"fixed inset-0 z-40 rounded-none border-0 shadow-none",t==="push"&&"absolute inset-x-0 top-full z-20 max-h-[min(70dvh,28rem)] border-b border-border shadow-lg",e?"dga-mobile-nav-open":"dga-mobile-nav-closed",e&&t==="sheet"&&"dga-mobile-sheet-open",e&&t==="fullscreen"&&"dga-mobile-fs-open",e&&t==="push"&&"dga-mobile-push-open")}hoverMenus(){return typeof matchMedia!="function"?!1:matchMedia("(hover: hover) and (pointer: fine)").matches}isMobileViewport(){return typeof matchMedia!="function"?!1:matchMedia("(max-width: 767px)").matches}resolveVariant(e){const t=e.dropdown;return t?t.variant?t.variant:t.featured?"featured":t.columns?.length||t.layout==="columns"||t.layout==="rows"?"mega":"menu":"menu"}resolveLayout(e){const t=e.dropdown;return t?t.layout?t.layout:t.columns?.length?"columns":"list":"list"}colCount(e){return e.dropdown?.columns?.length??0}flatLinks(e){const t=e.dropdown;return t?t.links?.length?t.links:t.columns?.flatMap(i=>i.links)??[]:[]}columnsGridClass(e){return r("grid w-full gap-2xl py-lg",e>1&&"sm:grid-cols-2",e>2&&"lg:grid-cols-3",e>3&&"xl:grid-cols-4")}featuredGridClass(e,t){return r("grid w-full gap-3xl",e==="featured"&&t&&"lg:grid-cols-[minmax(0,1fr)_minmax(14rem,18rem)]")}navItemClass(e,t=!1){return r(H,"justify-center",e&&"text-fg-primary",t&&"bg-neutral-light")}mobileItemClass(e,t=!1){return r(Z,e&&"bg-primary-faint",t&&"bg-neutral-light")}indicatorClass(e){return r(K,e?"bg-primary group-hover:bg-primary":"bg-transparent group-hover:bg-fg-disabled")}actionClass(e){return r(H,"relative justify-center")}badgeClass(){return r("dga-action-badge absolute top-lg end-md flex h-lg min-w-lg","items-center justify-center rounded-full bg-error px-xxs","text-body-2xs font-medium text-on-color")}isIconOnly(e){return e.iconOnly!==!1}isSearchAction(e){return!!this.search()&&e.id===this.searchActionId()}isNotificationsAction(e){return!!this.notifications()&&e.id===this.notificationsActionId()}isLoginAction(e){return!!this.login()&&e.id===this.loginActionId()}actionTooltip(e){return this.isLoginAction(e)&&this.authenticated()&&this.user()?.name||e.label}actionAriaLabel(e){return this.actionTooltip(e)}actionExpanded(e){return this.isSearchAction(e)?this.searchOpen():this.isNotificationsAction(e)?this.notificationsOpen():this.isLoginAction(e)?this.authenticated()?this.userMenuOpen():this.loginOpen():null}actionControls(e){return this.isSearchAction(e)?this.searchPanelId:this.isNotificationsAction(e)?this.notificationsPanelId:this.isLoginAction(e)?this.authenticated()?this.userPanelId:this.loginPanelId:null}actionIndicatorActive(e){return this.isSearchAction(e)?this.searchOpen():this.isNotificationsAction(e)?this.notificationsOpen():this.isLoginAction(e)?this.authenticated()?this.userMenuOpen():this.loginOpen():!1}clearCloseTimer(){this.closeTimer!==null&&(clearTimeout(this.closeTimer),this.closeTimer=null)}scheduleClose(){this.clearCloseTimer(),this.closeTimer=setTimeout(()=>{this.openDropdown.set(null),this.closeTimer=null},120)}setBodyScrollLocked(e){typeof document>"u"||document.documentElement.classList.toggle("dga-nav-locked",e)}unlockBodyIfIdle(){this.mobileOpen()||this.utilityOverlayOpen()||this.setBodyScrollLocked(!1)}onItemEnter(e){if(!this.isMobileViewport()){if(!this.items()[e]?.dropdown){this.hoverMenus()&&this.scheduleClose();return}this.clearCloseTimer(),this.hoverMenus()&&this.openDropdown.set(e)}}onPanelEnter(){this.clearCloseTimer()}onHostLeave(e){if(!this.hoverMenus()||this.isMobileViewport())return;const t=e.relatedTarget;t&&this.host.nativeElement.contains(t)||this.scheduleClose()}toggleMobile(){this.mobileOpen.update(e=>!e),this.openDropdown.set(null),this.setBodyScrollLocked(this.mobileOpen())}toggleDropdown(e,t){t.stopPropagation(),!(this.hoverMenus()&&!this.isMobileViewport()&&this.openDropdown()===e)&&(this.clearCloseTimer(),this.closeSearch(),this.closeNotifications(),this.closeLogin(),this.closeUserMenu(),this.openDropdown.update(i=>i===e?null:e))}closeAll(){this.clearCloseTimer(),this.openDropdown.set(null),this.mobileOpen.set(!1),this.closeSearch(!1),this.closeNotifications(),this.closeLogin(),this.closeUserMenu(),this.setBodyScrollLocked(!1)}onAction(e,t){const i=this.triggerFromEvent(t);if(this.isSearchAction(e)){this.closeNotifications(),this.closeLogin(),this.closeUserMenu(),this.toggleSearch(),this.actionClick.emit(e);return}if(this.isNotificationsAction(e)){this.closeSearch(),this.closeLogin(),this.closeUserMenu(),this.toggleNotifications(i),this.actionClick.emit(e);return}if(this.isLoginAction(e)){this.closeSearch(),this.closeNotifications(),this.authenticated()?(this.closeLogin(),this.toggleUserMenu(i)):(this.closeUserMenu(),this.toggleLogin(i)),this.actionClick.emit(e);return}this.closeSearch(),this.closeNotifications(),this.closeLogin(),this.closeUserMenu(),this.actionClick.emit(e)}onMobileAction(e,t){const i=this.triggerFromEvent(t);if(this.isSearchAction(e)){this.mobileOpen.set(!1),this.setBodyScrollLocked(!1),this.closeNotifications(),this.closeLogin(),this.closeUserMenu(),this.toggleSearch(),this.actionClick.emit(e);return}if(this.isNotificationsAction(e)){this.mobileOpen.set(!1),this.closeSearch(),this.closeLogin(),this.closeUserMenu(),this.toggleNotifications(i),this.isMobileViewport()&&this.setBodyScrollLocked(!0),this.actionClick.emit(e);return}if(this.isLoginAction(e)){this.mobileOpen.set(!1),this.closeSearch(),this.closeNotifications(),this.authenticated()?(this.closeLogin(),this.toggleUserMenu(i)):(this.closeUserMenu(),this.toggleLogin(i)),this.isMobileViewport()&&this.setBodyScrollLocked(!0),this.actionClick.emit(e);return}this.actionClick.emit(e),this.closeAll()}closeUtilityOverlays(){this.closeSearch(),this.closeNotifications(),this.closeLogin(),this.closeUserMenu()}closePortalChromeMenus(){typeof document>"u"||document.dispatchEvent(new CustomEvent("dga-close-portal-chrome-menus"))}onCloseHeaderOverlays(){this.closeUtilityOverlays()}toggleSearch(){if(this.searchOpen()){this.closeSearch();return}this.openDropdown.set(null),this.closeNotifications(),this.closeLogin(),this.closeUserMenu(),this.closePortalChromeMenus(),this.searchOpen.set(!0)}onSearchModalOpenChange(e){if(e){this.searchOpen.set(!0);return}this.closeSearch()}focusSearchInput(){b(()=>this.searchInputRef()?.nativeElement.focus(),{injector:this.injector})}closeSearch(e=!0){this.searchOpen.set(!1),e&&this.stopVoice()}toggleNotifications(e){if(this.notificationsOpen()){this.closeNotifications();return}this.openDropdown.set(null),this.closeSearch(),this.closeLogin(),this.closeUserMenu(),this.closePortalChromeMenus(),this.notificationsOpen.set(!0);const t=this.visibleNotifications()[0];this.expandedNotificationId.set(t?.id??null),this.scheduleDropdownSync(this.notificationsActionId(),e),this.isMobileViewport()&&this.setBodyScrollLocked(!0)}closeNotifications(){this.notificationsOpen.set(!1),this.expandedNotificationId.set(null),this.clearDropdownAnchor(),this.unlockBodyIfIdle()}toggleLogin(e){if(this.loginOpen()){this.closeLogin();return}this.openDropdown.set(null),this.closeSearch(),this.closeNotifications(),this.closeUserMenu(),this.closePortalChromeMenus(),this.loginOpen.set(!0),this.scheduleDropdownSync(this.loginActionId(),e),this.isMobileViewport()&&this.setBodyScrollLocked(!0)}closeLogin(){this.loginOpen.set(!1),this.loginSubmitting.set(!1),this.showLoginPassword.set(!1),this.clearDropdownAnchor(),this.unlockBodyIfIdle()}toggleUserMenu(e){if(this.userMenuOpen()){this.closeUserMenu();return}this.openDropdown.set(null),this.closeSearch(),this.closeNotifications(),this.closeLogin(),this.closePortalChromeMenus(),this.userMenuOpen.set(!0),this.scheduleDropdownSync(this.loginActionId(),e),this.isMobileViewport()&&this.setBodyScrollLocked(!0)}closeUserMenu(){this.userMenuOpen.set(!1),this.clearDropdownAnchor(),this.unlockBodyIfIdle()}onLoginSubmit(e){e.preventDefault();const t=this.loginEmail().trim(),i=this.loginPassword();!t||!i||(this.loginSubmitting.set(!0),this.loginSubmit.emit({email:t,password:i}),setTimeout(()=>{this.loginOpen()&&(this.authenticated.set(!0),this.loginEmail.set(""),this.loginPassword.set(""),this.loginSubmitting.set(!1),this.closeLogin())},600))}onUserLink(e){if(this.userLinkClick.emit(e),e.id==="logout"||e.danger){this.authenticated.set(!1),this.logout.emit(),this.closeUserMenu();return}this.closeUserMenu()}toggleNotificationExpand(e){this.expandedNotificationId.update(t=>t===e.id?null:e.id),this.notificationAction.emit({item:e,action:"select"})}onNotificationAction(e,t){t==="read"&&this.readNotificationIds.update(i=>new Set([...i,e.id])),t==="dismiss"&&(this.dismissedNotificationIds.update(i=>new Set([...i,e.id])),this.expandedNotificationId.update(i=>i===e.id?null:i)),t==="view"&&e.href&&B(e.href,this.baseHref),this.notificationAction.emit({item:e,action:t})}markAllNotificationsRead(){const e=this.visibleNotifications().map(t=>t.id);this.readNotificationIds.update(t=>new Set([...t,...e]))}clearSearchQuery(){this.searchQuery.set(""),queueMicrotask(()=>this.searchInputRef()?.nativeElement.focus())}applySearchSuggestion(e){const t=e.value??e.label;this.searchQuery.set(t),this.searchSuggestionSelect.emit(e),queueMicrotask(()=>this.searchInputRef()?.nativeElement.focus())}onSearchFormSubmit(e){e.preventDefault();const t=this.searchQuery().trim();this.searchSubmit.emit(t);const i=this.search();if(i?.resultsHref){const s=i.queryParam??"q",d=new URL(i.resultsHref,typeof window<"u"?window.location.origin:"http://localhost");t?d.searchParams.set(s,t):d.searchParams.delete(s),typeof window<"u"&&window.location.assign(`${d.pathname}${d.search}${d.hash}`)}this.closeSearch()}onSearchVoice(){if(this.searchVoice.emit(),typeof window>"u")return;const e=window,t=e.SpeechRecognition||e.webkitSpeechRecognition;if(!t)return;this.stopVoice();const i=new t;i.lang=typeof document<"u"&&document.documentElement.lang?document.documentElement.lang:"ar-SA",i.interimResults=!1,i.maxAlternatives=1,this.voiceListening.set(!0),i.onresult=s=>{const d=s.results[0]?.[0]?.transcript?.trim();d&&this.searchQuery.set(d),this.voiceListening.set(!1)},i.onerror=()=>this.voiceListening.set(!1),i.onend=()=>this.voiceListening.set(!1),this.speechRecognition=i,i.start()}speechRecognition=null;stopVoice(){this.speechRecognition?.stop(),this.speechRecognition=null,this.voiceListening.set(!1)}triggerFromEvent(e){const t=e?.currentTarget;return t instanceof HTMLElement?t:null}scheduleDropdownSync(e,t){this.dropdownActionId=e,this.dropdownTrigger=t??null,b(()=>this.requestDropdownSync(t),{injector:this.injector})}requestDropdownSync(e){if(typeof requestAnimationFrame!="function"){this.syncDropdownPanel(e);return}this.dropdownSyncFrame===null&&(this.dropdownSyncFrame=requestAnimationFrame(()=>{this.dropdownSyncFrame=null,this.syncDropdownPanel(e)}))}clearDropdownAnchor(){this.notificationsOpen()||this.loginOpen()||this.userMenuOpen()||(this.dropdownTrigger=null,this.dropdownActionId=null,this.lastDropdownStyleKey="",this.dropdownPanelStyle.set({}))}findActionTrigger(e){const t=this.host.nativeElement.querySelectorAll(`[data-dga-action="${CSS.escape(e)}"]`);for(const i of Array.from(t)){const s=i;if(s.getClientRects().length>0)return s}return t[0]??null}syncDropdownPanel(e){if(typeof window>"u")return;if(this.isMobileViewport()){const c={top:"auto",bottom:"max(0.75rem, env(safe-area-inset-bottom, 0px))",left:"0.75rem",right:"0.75rem",width:"auto",maxWidth:"none"},v=`sheet|${c.bottom}`;if(v===this.lastDropdownStyleKey)return;this.lastDropdownStyleKey=v,this.dropdownPanelStyle.set(c);return}const t=e??this.dropdownTrigger??(this.dropdownActionId?this.findActionTrigger(this.dropdownActionId):null);if(!t)return;this.dropdownTrigger=t;const i=t.getBoundingClientRect();if(i.width<1&&i.height<1)return;const s=getComputedStyle(this.host.nativeElement).direction,j=(typeof document<"u"?document.documentElement.getAttribute("dir"):null)==="rtl"||s==="rtl",E=8,h=Math.min(448,window.innerWidth-32),f={top:`${Math.round(i.bottom+E)}px`};if(j){let c=Math.round(i.left);c=Math.max(16,Math.min(c,window.innerWidth-h-16)),f.left=`${c}px`,f.right="auto"}else{let c=Math.round(window.innerWidth-i.right);c=Math.max(16,Math.min(c,window.innerWidth-h-16)),f.right=`${c}px`,f.left="auto"}const x=`${f.top}|${f.left??""}|${f.right??""}`;x!==this.lastDropdownStyleKey&&(this.lastDropdownStyleKey=x,this.dropdownPanelStyle.set(f))}onKey(e){e.key==="Escape"&&this.closeAll()}onScroll(){(this.notificationsOpen()||this.loginOpen()||this.userMenuOpen())&&this.requestDropdownSync()}onResize(){typeof window>"u"||(window.matchMedia("(max-width: 767px)").matches||(this.mobileOpen.set(!1),this.setBodyScrollLocked(!1)),(this.notificationsOpen()||this.loginOpen()||this.userMenuOpen())&&(this.lastDropdownStyleKey="",this.requestDropdownSync()))}onNavLinkClick(e,t){this.navLinkClick.emit(e),e.href||t.preventDefault()}onDocClick(e){this.searchOpen()||this.notificationsOpen()||this.loginOpen()||this.userMenuOpen()||this.hoverMenus()&&!this.isMobileViewport()||this.mobileOpen()||this.host.nativeElement.contains(e.target)||this.openDropdown.set(null)}static \u0275fac=a.\u0275\u0275ngDeclareFactory({minVersion:"12.0.0",version:"22.0.7",ngImport:a,type:g,deps:[],target:a.\u0275\u0275FactoryTarget.Component});static \u0275cmp=a.\u0275\u0275ngDeclareComponent({minVersion:"17.0.0",version:"22.0.7",type:g,isStandalone:!0,selector:"dga-header",inputs:{brand:{classPropertyName:"brand",publicName:"brand",isSignal:!0,isRequired:!1,transformFunction:null},brandSlogan:{classPropertyName:"brandSlogan",publicName:"brandSlogan",isSignal:!0,isRequired:!1,transformFunction:null},brandLogo:{classPropertyName:"brandLogo",publicName:"brandLogo",isSignal:!0,isRequired:!1,transformFunction:null},brandLogoAlt:{classPropertyName:"brandLogoAlt",publicName:"brandLogoAlt",isSignal:!0,isRequired:!1,transformFunction:null},brandPlaceholder:{classPropertyName:"brandPlaceholder",publicName:"brandPlaceholder",isSignal:!0,isRequired:!1,transformFunction:null},brandHref:{classPropertyName:"brandHref",publicName:"brandHref",isSignal:!0,isRequired:!1,transformFunction:null},navLabel:{classPropertyName:"navLabel",publicName:"navLabel",isSignal:!0,isRequired:!1,transformFunction:null},menuToggleLabel:{classPropertyName:"menuToggleLabel",publicName:"menuToggleLabel",isSignal:!0,isRequired:!1,transformFunction:null},menuCloseLabel:{classPropertyName:"menuCloseLabel",publicName:"menuCloseLabel",isSignal:!0,isRequired:!1,transformFunction:null},appearance:{classPropertyName:"appearance",publicName:"appearance",isSignal:!0,isRequired:!1,transformFunction:null},mobileNav:{classPropertyName:"mobileNav",publicName:"mobileNav",isSignal:!0,isRequired:!1,transformFunction:null},sticky:{classPropertyName:"sticky",publicName:"sticky",isSignal:!0,isRequired:!1,transformFunction:null},items:{classPropertyName:"items",publicName:"items",isSignal:!0,isRequired:!1,transformFunction:null},actions:{classPropertyName:"actions",publicName:"actions",isSignal:!0,isRequired:!1,transformFunction:null},search:{classPropertyName:"search",publicName:"search",isSignal:!0,isRequired:!1,transformFunction:null},searchQuery:{classPropertyName:"searchQuery",publicName:"searchQuery",isSignal:!0,isRequired:!1,transformFunction:null},notifications:{classPropertyName:"notifications",publicName:"notifications",isSignal:!0,isRequired:!1,transformFunction:null},login:{classPropertyName:"login",publicName:"login",isSignal:!0,isRequired:!1,transformFunction:null},user:{classPropertyName:"user",publicName:"user",isSignal:!0,isRequired:!1,transformFunction:null},authenticated:{classPropertyName:"authenticated",publicName:"authenticated",isSignal:!0,isRequired:!1,transformFunction:null}},outputs:{searchQuery:"searchQueryChange",authenticated:"authenticatedChange",actionClick:"actionClick",searchSubmit:"searchSubmit",searchSuggestionSelect:"searchSuggestionSelect",searchVoice:"searchVoice",notificationAction:"notificationAction",loginSubmit:"loginSubmit",logout:"logout",userLinkClick:"userLinkClick",navLinkClick:"navLinkClick"},host:{attributes:{role:"banner"},listeners:{mouseleave:"onHostLeave($event)","document:dga-close-header-overlays":"onCloseHeaderOverlays()","document:keydown":"onKey($event)","window:scroll":"onScroll()","window:resize":"onResize()","document:click":"onDocClick($event)"},properties:{class:"hostClasses()","attr.data-appearance":"appearance()","attr.data-mobile-nav":"mobileNav()","attr.data-mobile-open":"mobileOpen() || null"}},viewQueries:[{propertyName:"searchInputRef",first:!0,predicate:["searchInput"],descendants:!0,isSignal:!0},{propertyName:"utilLayerRef",first:!0,predicate:["utilLayer"],descendants:!0,isSignal:!0}],ngImport:a,template:`
+    <div [class]="innerClasses()">
+      <div class="relative flex min-w-0 shrink-0 items-center self-center">
+        <ng-content select="[dgaHeaderBrand]" />
+        @if (brand() || brandLogo()) {
+          <a
+            class="inline-flex h-(--size-header-logo) cursor-pointer items-center gap-lg font-sans
+                   focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
+                   focus-visible:outline-focus"
+            [href]="appHref(brandHref())"
+          >
+            @if (brandLogo()) {
+              <img
+                class="h-(--size-header-logo) w-auto max-w-[min(100%,14rem)] shrink-0 object-contain"
+                [src]="brandLogo()"
+                [alt]="brandLogoAlt()"
+                height="58"
+              />
+            } @else if (appearance() === 'portal' && brandPlaceholder()) {
+              <span
+                class="inline-flex size-(--size-header-logo) shrink-0 items-center justify-center rounded-sm
+                       bg-primary-faint text-fg-primary"
+                aria-hidden="true"
+              >
+                <dga-icon name="home" size="xl" tone="primary" />
+              </span>
+            }
+            @if (brand() && !brandLogo()) {
+              <span class="flex min-w-0 flex-col gap-xxs">
+                <span class="text-body-md font-bold text-display">{{ brand() }}</span>
+                @if (brandSlogan()) {
+                  <span class="text-body-sm font-normal text-muted">{{ brandSlogan() }}</span>
+                }
+              </span>
+            }
+          </a>
+        }
+      </div>
+
+      @if (isPortal() && items().length) {
+        <button
+          type="button"
+          class="dga-burger relative z-30 ms-auto hidden h-full w-6xl shrink-0 cursor-pointer
+                 items-center justify-center self-stretch rounded-md text-fg transition-colors
+                 hover:bg-neutral-light max-md:inline-flex
+                 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
+                 focus-visible:outline-focus"
+          [class.dga-burger--open]="mobileOpen()"
+          [class.dga-burger--hidden]="mobileOpen() && mobileNav() !== 'push'"
+          [attr.aria-expanded]="mobileOpen()"
+          [attr.aria-controls]="collapseId"
+          [attr.aria-label]="mobileOpen() ? menuCloseLabel() : menuToggleLabel()"
+          (click)="toggleMobile()"
+        >
+          <span class="dga-burger__box" aria-hidden="true">
+            <span class="dga-burger__line"></span>
+            <span class="dga-burger__line"></span>
+            <span class="dga-burger__line"></span>
+          </span>
+        </button>
+      }
+
+      <!-- Desktop navigation -->
+      <nav
+        [class]="desktopNavClasses()"
+        [attr.aria-label]="navLabel()"
+        [attr.hidden]="null"
+      >
+        @if (items().length) {
+          <ul
+            class="m-0 flex list-none flex-row flex-nowrap items-stretch gap-none p-0"
+            [class.overflow-x-auto]="openDropdown() === null"
+            [class.overflow-visible]="openDropdown() !== null"
+            role="list"
+          >
+            @for (item of items(); track item.label; let i = $index) {
+              <li
+                class="relative"
+                [class.z-dropdown]="openDropdown() === i"
+                [attr.data-open]="openDropdown() === i || null"
+                [attr.data-variant]="item.dropdown ? resolveVariant(item) : null"
+                (mouseenter)="onItemEnter(i)"
+                (focusin)="onItemEnter(i)"
+              >
+                @if (item.dropdown) {
+                  <button
+                    type="button"
+                    [class]="navItemClass(!!item.current, openDropdown() === i)"
+                    [attr.aria-expanded]="openDropdown() === i"
+                    [attr.aria-haspopup]="'true'"
+                    (click)="toggleDropdown(i, $event)"
+                  >
+                    <span
+                      aria-hidden="true"
+                      [class]="indicatorClass(!!item.current || openDropdown() === i)"
+                    ></span>
+                    <span class="whitespace-nowrap">{{ item.label }}</span>
+                    <dga-icon
+                      name="chevronDown"
+                      size="md"
+                      [class]="
+                        openDropdown() === i
+                          ? 'rotate-180 transition-transform duration-200'
+                          : 'transition-transform duration-200'
+                      "
+                    />
+                  </button>
+
+                  @if (openDropdown() === i && resolveVariant(item) === 'menu') {
+                    <div
+                      class="absolute start-0 top-full z-dropdown min-w-[16rem]
+                             max-w-[min(100vw-2rem,20rem)]"
+                      role="menu"
+                      [attr.aria-label]="item.label"
+                    >
+                      <div class="h-xs" aria-hidden="true"></div>
+                      <div
+                        class="dga-panel-enter rounded-md border border-border bg-card p-sm
+                               shadow-lg"
+                      >
+                        @if (item.dropdown.columns?.length) {
+                          <div class="flex flex-col gap-lg p-md">
+                            @for (col of item.dropdown.columns!; track col.title ?? $index) {
+                              <div class="flex flex-col gap-xs">
+                                @if (col.title) {
+                                  <p class="px-xl text-body-sm font-medium text-fg-primary">
+                                    {{ col.title }}
+                                  </p>
+                                }
+                                <ul class="m-0 flex list-none flex-col gap-none p-0" role="list">
+                                  @for (link of col.links; track link.label) {
+                                    <li role="none">
+                                      <a
+                                        role="menuitem"
+                                        [class]="dropLink"
+                                        [href]="appHref(link.href || '#')"
+                                        (click)="onNavLinkClick(link, $event)"
+                                        >{{ link.label }}</a
+                                      >
+                                    </li>
+                                  }
+                                </ul>
+                              </div>
+                            }
+                          </div>
+                        } @else {
+                          <ul class="m-0 flex list-none flex-col gap-none p-0" role="list">
+                            @for (link of item.dropdown.links || []; track link.label) {
+                              <li role="none">
+                                <a
+                                  role="menuitem"
+                                  [class]="dropLink"
+                                  [href]="appHref(link.href || '#')"
+                                  (click)="onNavLinkClick(link, $event)"
+                                  >{{ link.label }}</a
+                                >
+                              </li>
+                            }
+                          </ul>
+                        }
+                      </div>
+                    </div>
+                  }
+                } @else {
+                  <a
+                    [class]="navItemClass(!!item.current)"
+                    [attr.aria-current]="item.current ? 'page' : null"
+                    [href]="appHref(item.href || '#')"
+                    (click)="onNavLinkClick(item, $event)"
+                  >
+                    <span aria-hidden="true" [class]="indicatorClass(!!item.current)"></span>
+                    <span class="whitespace-nowrap">{{ item.label }}</span>
+                  </a>
+                }
+              </li>
+            }
+          </ul>
+        }
+        <div class="contents">
+          <ng-content />
+        </div>
+      </nav>
+
+      <div [class]="actionsClasses()">
+        @for (action of actions(); track action.id) {
+          <dga-tooltip
+            class="relative flex h-full"
+            [text]="actionTooltip(action)"
+            placement="bottom"
+            [showIcon]="false"
+            [disabled]="!isIconOnly(action) && !(isLoginAction(action) && authenticated())"
+          >
+            @if (action.href) {
+              <a
+                [class]="actionClass(action)"
+                [href]="appHref(action.href)"
+                [attr.aria-label]="actionAriaLabel(action)"
+                [attr.data-dga-action]="action.id"
+              >
+                <span aria-hidden="true" [class]="indicatorClass(false)"></span>
+                @if (action.icon) {
+                  <dga-icon [name]="action.icon" size="xl" />
+                }
+                @if (!isIconOnly(action)) {
+                  <span>{{ action.label }}</span>
+                }
+                @if (action.badge) {
+                  <span [class]="badgeClass()">{{ action.badge }}</span>
+                }
+              </a>
+            } @else {
+              <button
+                type="button"
+                [class]="actionClass(action)"
+                [attr.aria-label]="actionAriaLabel(action)"
+                [attr.aria-expanded]="actionExpanded(action)"
+                [attr.aria-controls]="actionControls(action)"
+                [attr.data-dga-action]="action.id"
+                (click)="onAction(action, $event)"
+              >
+                <span
+                  aria-hidden="true"
+                  [class]="indicatorClass(actionIndicatorActive(action))"
+                ></span>
+                @if (isLoginAction(action) && authenticated() && userConfig(); as u) {
+                  <dga-avatar [name]="u.name" [src]="u.avatarSrc" size="sm" />
+                  <span class="hidden max-w-11xl truncate lg:inline">{{ u.name }}</span>
+                } @else {
+                  @if (action.icon) {
+                    <dga-icon [name]="action.icon" size="xl" />
+                  }
+                  @if (!isIconOnly(action)) {
+                    <span>{{ action.label }}</span>
+                  }
+                }
+                @if (action.badge) {
+                  <span [class]="badgeClass()">{{ action.badge }}</span>
+                }
+              </button>
+            }
+          </dga-tooltip>
+        }
+        <ng-content select="[dgaHeaderEnd]" />
+      </div>
+    </div>
+
+    <!-- Desktop mega / featured -->
+    @if (activeWideDropdown(); as drop) {
+      <div
+        class="absolute start-0 end-0 top-full z-dropdown hidden w-full md:block"
+        role="region"
+        [attr.aria-label]="drop.item.label"
+        [attr.data-variant]="drop.variant"
+        (mouseenter)="onPanelEnter()"
+      >
+        <div
+          class="dga-panel-enter border-b border-border bg-card shadow-lg md:rounded-b-lg"
+        >
+          <div class="w-full px-(--wrapper-padding) py-2xl lg:py-3xl">
+            <div [class]="featuredGridClass(drop.variant, !!drop.item.dropdown!.featured)">
+              <div class="min-w-0">
+                @switch (resolveLayout(drop.item)) {
+                  @case ('columns') {
+                    <div [class]="columnsGridClass(colCount(drop.item))">
+                      @for (
+                        col of drop.item.dropdown!.columns!;
+                        track col.title ?? $index
+                      ) {
+                        <div class="flex min-w-0 flex-col gap-md">
+                          @if (col.title) {
+                            <p
+                              class="border-b border-border-subtle pb-sm text-body-lg
+                                     font-medium text-fg-primary"
+                            >
+                              {{ col.title }}
+                            </p>
+                          }
+                          <ul class="m-0 flex list-none flex-col gap-none p-0" role="list">
+                            @for (link of col.links; track link.label) {
+                              <li>
+                                <a
+                                  [class]="dropLink"
+                                  [href]="appHref(link.href || '#')"
+                                  (click)="onNavLinkClick(link, $event)"
+                                >
+                                  <span>{{ link.label }}</span>
+                                  @if (link.description) {
+                                    <span class="text-body-sm text-muted">{{
+                                      link.description
+                                    }}</span>
+                                  }
+                                </a>
+                              </li>
+                            }
+                          </ul>
+                        </div>
+                      }
+                    </div>
+                  }
+                  @case ('rows') {
+                    <ul
+                      class="m-0 grid w-full list-none grid-cols-1 gap-md p-0
+                             sm:grid-cols-2 lg:grid-cols-4"
+                      role="list"
+                    >
+                      @for (link of drop.item.dropdown!.links || []; track link.label) {
+                        <li class="min-w-0">
+                          <a
+                            [class]="dropTile"
+                            [href]="appHref(link.href || '#')"
+                            (click)="onNavLinkClick(link, $event)"
+                          >
+                            <span class="text-body-md font-medium text-fg">{{
+                              link.label
+                            }}</span>
+                            @if (link.description) {
+                              <span class="text-body-sm text-muted">{{
+                                link.description
+                              }}</span>
+                            }
+                          </a>
+                        </li>
+                      }
+                    </ul>
+                  }
+                  @default {
+                    <ul
+                      class="m-0 grid w-full max-w-(--container-5xl) list-none grid-cols-1 gap-xs
+                             p-0 sm:grid-cols-2 lg:grid-cols-3"
+                      role="list"
+                    >
+                      @for (link of flatLinks(drop.item); track link.label) {
+                        <li class="min-w-0">
+                          <a
+                            [class]="dropLink"
+                            [href]="appHref(link.href || '#')"
+                            (click)="onNavLinkClick(link, $event)"
+                          >
+                            <span>{{ link.label }}</span>
+                            @if (link.description) {
+                              <span class="text-body-sm text-muted">{{
+                                link.description
+                              }}</span>
+                            }
+                          </a>
+                        </li>
+                      }
+                    </ul>
+                  }
+                }
+              </div>
+
+              @if (drop.variant === 'featured' && drop.item.dropdown!.featured; as feat) {
+                <aside
+                  class="flex min-w-0 flex-col gap-lg overflow-hidden rounded-md
+                         border border-border bg-primary-faint p-2xl lg:self-start"
+                >
+                  @if (feat.imageUrl) {
+                    <img
+                      class="aspect-[16/10] h-auto w-full rounded-sm object-cover"
+                      [src]="feat.imageUrl"
+                      alt=""
+                    />
+                  }
+                  <div class="flex min-w-0 flex-col gap-md">
+                    <p class="text-body-lg font-semibold text-display">{{ feat.title }}</p>
+                    @if (feat.description) {
+                      <p class="text-body-sm leading-relaxed text-paragraph">
+                        {{ feat.description }}
+                      </p>
+                    }
+                    @if (feat.cta) {
+                      <a
+                        class="mt-xs inline-flex h-5xl cursor-pointer items-center justify-center gap-sm
+                               rounded-sm bg-primary px-xl text-body-md font-medium text-on-color
+                               transition-opacity hover:opacity-90
+                               focus-visible:outline focus-visible:outline-2
+                               focus-visible:outline-offset-2 focus-visible:outline-focus"
+                        [href]="appHref(feat.href || '#')"
+                      >
+                        <span>{{ feat.cta }}</span>
+                        <dga-icon name="chevronLeft" size="sm" />
+                      </a>
+                    }
+                  </div>
+                </aside>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+
+    <!-- Header search popup (dga-modal) -->
+    @if (searchConfig(); as cfg) {
+      <dga-modal
+        class="dga-header-search-modal"
+        [id]="searchPanelId"
+        [open]="searchOpen()"
+        (openChange)="onSearchModalOpenChange($event)"
+        [title]="cfg.title || cfg.submitLabel || 'Search'"
+        [description]="cfg.description || ''"
+        [closeLabel]="cfg.closeLabel || 'Close'"
+        size="lg"
+        animation="scale"
+        [scrollable]="false"
+        (opened)="focusSearchInput()"
+      >
+        <form
+          class="flex flex-col gap-xl"
+          role="search"
+          [attr.aria-label]="cfg.submitLabel || 'Search'"
+          (submit)="onSearchFormSubmit($event)"
+        >
+          <div class="flex w-full flex-col gap-md sm:flex-row sm:items-stretch sm:gap-lg">
+            <div class="min-w-0 flex-1">
+              <dga-form-control size="lg" startIcon="search" [filled]="!!searchQuery()">
+                <input
+                  #searchInput
+                  type="search"
+                  name="q"
+                  class="dga-search-input placeholder:text-muted"
+                  [placeholder]="cfg.placeholder || 'Search...'"
+                  [attr.aria-label]="cfg.placeholder || 'Search...'"
+                  [value]="searchQuery()"
+                  (input)="searchQuery.set($any($event.target).value)"
+                />
+                @if (searchQuery()) {
+                  <button
+                    type="button"
+                    dgaEnd
+                    [attr.aria-label]="cfg.clearLabel || 'Clear search'"
+                    (click)="clearSearchQuery()"
+                  >
+                    <dga-icon name="close" size="sm" />
+                  </button>
+                }
+                @if (cfg.voice !== false) {
+                  <button
+                    type="button"
+                    dgaEnd
+                    class="dga-search-voice"
+                    [class.dga-search-voice--active]="voiceListening()"
+                    [attr.aria-label]="cfg.voiceLabel || 'Voice input'"
+                    [attr.aria-pressed]="voiceListening()"
+                    (click)="onSearchVoice()"
+                  >
+                    <dga-icon
+                      name="mic"
+                      size="sm"
+                      [tone]="voiceListening() ? 'current' : 'muted'"
+                    />
+                  </button>
+                }
+              </dga-form-control>
+            </div>
+            <button
+              type="submit"
+              class="inline-flex min-h-6xl shrink-0 cursor-pointer items-center justify-center gap-sm
+                     rounded-md bg-primary px-xl text-body-md font-medium text-on-color shadow-sm
+                     transition-opacity hover:opacity-90
+                     focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
+                     focus-visible:outline-focus sm:px-2xl"
+            >
+              <dga-icon name="search" size="md" />
+              <span>{{ cfg.submitLabel || 'Search' }}</span>
+            </button>
+          </div>
+
+          @if (cfg.suggestions?.length) {
+            <div class="flex flex-col gap-md">
+              <span class="text-body-sm font-semibold text-display">
+                {{ cfg.suggestionsLabel || 'Suggestions:' }}
+              </span>
+              <div class="flex flex-wrap gap-sm">
+                @for (item of cfg.suggestions!; track item.value ?? item.label; let i = $index) {
+                  <button
+                    type="button"
+                    class="dga-search-chip inline-flex h-4xl cursor-pointer items-center gap-xs
+                           rounded-full border border-border bg-neutral-light px-lg text-body-sm
+                           text-paragraph transition-[background-color,transform,border-color]
+                           duration-150 ease-out hover:-translate-y-px hover:border-primary
+                           hover:bg-sunken
+                           focus-visible:outline focus-visible:outline-2
+                           focus-visible:outline-offset-2 focus-visible:outline-focus"
+                    [style.animation-delay]="i * 40 + 'ms'"
+                    (click)="applySearchSuggestion(item)"
+                  >
+                    <dga-icon [name]="item.icon || 'plus'" size="xs" />
+                    <span>{{ item.label }}</span>
+                  </button>
+                }
+              </div>
+            </div>
+          }
+        </form>
+      </dga-modal>
+    }
+
+    <!--
+      Utility overlays (notifications / login / user): portaled to body at z-urgent
+      so sticky announcement + chatbot/a11y FABs stay underneath.
+    -->
+    @if (utilityOverlayOpen()) {
+      <div #utilLayer class="dga-header-util-layer">
+        <button
+          type="button"
+          class="dga-util-backdrop absolute inset-0 cursor-default bg-overlay/50"
+          tabindex="-1"
+          aria-label="Close"
+          (click)="closeUtilityOverlays()"
+        ></button>
+
+    <!-- Header notifications panel -->
+    @if (notificationsOpen() && notificationsConfig(); as ncfg) {
+      <div
+        [id]="notificationsPanelId"
+        class="dga-header-util-panel fixed w-[min(28rem,calc(100vw-2rem))] max-md:inset-x-3
+               max-md:bottom-3 max-md:top-auto max-md:w-auto"
+        role="region"
+        [attr.aria-label]="ncfg.title || ncfg.viewAllLabel || 'Notifications'"
+        [style]="dropdownPanelStyle()"
+      >
+        <div
+          class="dga-panel-enter dga-panel-enter--anchor-end flex max-h-[min(85svh,40rem)]
+                 flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-xl
+                 md:max-h-[none] md:rounded-md"
+        >
+          <div
+            class="flex shrink-0 flex-col gap-sm border-b border-border-subtle px-xl py-md
+                   md:flex-row md:items-center md:justify-between md:gap-md"
+          >
+            <div class="flex min-w-0 items-center justify-between gap-sm md:justify-start">
+              <div class="flex min-w-0 items-center gap-sm">
+                <h2 class="m-0 truncate text-body-lg font-semibold text-display md:text-body-md">
+                  {{ ncfg.title || 'Notifications' }}
+                </h2>
+                @if (unreadNotificationCount() > 0) {
+                  <span
+                    class="inline-flex min-w-4xl items-center justify-center rounded-full
+                           bg-error px-sm py-xxs text-body-2xs font-semibold text-on-color"
+                  >
+                    {{ unreadNotificationCount() }}
+                  </span>
+                }
+              </div>
+              <button
+                type="button"
+                class="inline-flex size-5xl shrink-0 cursor-pointer items-center justify-center
+                       rounded-sm text-muted transition-colors hover:bg-neutral-light hover:text-fg
+                       focus-visible:outline focus-visible:outline-2
+                       focus-visible:outline-offset-2 focus-visible:outline-focus md:hidden"
+                [attr.aria-label]="ncfg.closeLabel || 'Close'"
+                (click)="closeNotifications()"
+              >
+                <dga-icon name="close" size="md" />
+              </button>
+            </div>
+            <div class="flex shrink-0 items-center gap-xxs max-md:justify-stretch">
+              @if (unreadNotificationCount() > 0) {
+                <button
+                  type="button"
+                  class="inline-flex h-4xl flex-1 cursor-pointer items-center justify-center
+                         rounded-sm px-md text-body-sm font-medium text-fg-primary
+                         transition-colors hover:bg-primary-faint
+                         focus-visible:outline focus-visible:outline-2
+                         focus-visible:outline-offset-2 focus-visible:outline-focus
+                         md:flex-none"
+                  (click)="markAllNotificationsRead()"
+                >
+                  {{ ncfg.markAllReadLabel || 'Mark all as read' }}
+                </button>
+              }
+              <button
+                type="button"
+                class="hidden size-5xl cursor-pointer items-center justify-center rounded-sm
+                       text-muted transition-colors hover:bg-neutral-light hover:text-fg
+                       focus-visible:outline focus-visible:outline-2
+                       focus-visible:outline-offset-2 focus-visible:outline-focus md:inline-flex"
+                [attr.aria-label]="ncfg.closeLabel || 'Close'"
+                (click)="closeNotifications()"
+              >
+                <dga-icon name="close" size="md" />
+              </button>
+            </div>
+          </div>
+
+          <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain md:max-h-[min(48svh,28rem)]">
+            @if (visibleNotifications().length === 0) {
+              <div class="flex flex-col items-center gap-md px-xl py-3xl text-center">
+                <span
+                  class="inline-flex size-6xl items-center justify-center rounded-full
+                         bg-neutral-light text-muted"
+                  aria-hidden="true"
+                >
+                  <dga-icon name="bell" size="xl" tone="muted" />
+                </span>
+                <p class="m-0 text-body-sm text-muted">
+                  {{ ncfg.emptyLabel || 'No notifications' }}
+                </p>
+              </div>
+            } @else {
+              <ul class="m-0 flex list-none flex-col p-0" role="list">
+                @for (item of visibleNotifications(); track item.id) {
+                  <li
+                    class="border-b border-border-subtle last:border-b-0"
+                    [class]="item.read ? 'bg-surface' : 'bg-card'"
+                  >
+                    <button
+                      type="button"
+                      class="flex w-full cursor-pointer items-start gap-lg px-xl py-lg text-start
+                             transition-colors hover:bg-neutral-light
+                             focus-visible:outline focus-visible:outline-2
+                             focus-visible:outline-offset-[-2px] focus-visible:outline-focus"
+                      [attr.aria-expanded]="expandedNotificationId() === item.id"
+                      (click)="toggleNotificationExpand(item)"
+                    >
+                      <span class="relative mt-xxs shrink-0">
+                        <dga-icon-badge size="sm">
+                          <dga-icon [name]="item.icon || 'bell'" size="sm" />
+                        </dga-icon-badge>
+                        @if (!item.read) {
+                          <span
+                            class="absolute -end-xxs -top-xxs size-[0.5rem] rounded-full bg-primary
+                                   ring-2 ring-white"
+                            aria-hidden="true"
+                          ></span>
+                        }
+                      </span>
+                      <span class="min-w-0 flex-1">
+                        <span class="mb-xs flex flex-wrap items-center gap-sm">
+                          @if (item.statusLabel) {
+                            <dga-badge [variant]="item.tone || 'neutral'" size="sm">
+                              {{ item.statusLabel }}
+                            </dga-badge>
+                          }
+                          <span
+                            class="min-w-0 truncate text-body-md text-display"
+                            [class.font-semibold]="!item.read"
+                            [class.font-medium]="item.read"
+                            [class.text-muted]="item.read"
+                          >
+                            {{ item.title }}
+                          </span>
+                        </span>
+                        <span
+                          class="text-body-sm text-paragraph"
+                          [class.line-clamp-2]="expandedNotificationId() !== item.id"
+                        >
+                          {{ item.message }}
+                        </span>
+                      </span>
+                      <dga-icon
+                        class="mt-xs shrink-0 text-muted transition-transform duration-200"
+                        [class.rotate-180]="expandedNotificationId() === item.id"
+                        name="chevronDown"
+                        size="sm"
+                      />
+                    </button>
+
+                    @if (expandedNotificationId() === item.id) {
+                      <div
+                        class="dga-notif-actions flex flex-wrap gap-sm border-t border-border-subtle
+                               bg-surface px-xl py-md"
+                      >
+                        @if (!item.read) {
+                          <button
+                            type="button"
+                            class="inline-flex h-4xl cursor-pointer items-center gap-xs rounded-sm
+                                   px-md text-body-sm text-fg transition-colors hover:bg-neutral-light
+                                   focus-visible:outline focus-visible:outline-2
+                                   focus-visible:outline-offset-2 focus-visible:outline-focus"
+                            (click)="onNotificationAction(item, 'read'); $event.stopPropagation()"
+                          >
+                            <dga-icon name="success" size="sm" />
+                            <span>{{ ncfg.markReadLabel || 'Mark as read' }}</span>
+                          </button>
+                        }
+                        <button
+                          type="button"
+                          class="inline-flex h-4xl cursor-pointer items-center gap-xs rounded-sm
+                                 px-md text-body-sm text-fg transition-colors hover:bg-neutral-light
+                                 focus-visible:outline focus-visible:outline-2
+                                 focus-visible:outline-offset-2 focus-visible:outline-focus"
+                          (click)="onNotificationAction(item, 'view'); $event.stopPropagation()"
+                        >
+                          <dga-icon name="eye" size="sm" />
+                          <span>{{ ncfg.viewLabel || 'View' }}</span>
+                        </button>
+                        <button
+                          type="button"
+                          class="inline-flex h-4xl cursor-pointer items-center gap-xs rounded-sm
+                                 px-md text-body-sm text-fg-error transition-colors hover:bg-error-light
+                                 focus-visible:outline focus-visible:outline-2
+                                 focus-visible:outline-offset-2 focus-visible:outline-focus"
+                          (click)="onNotificationAction(item, 'dismiss'); $event.stopPropagation()"
+                        >
+                          <dga-icon name="close" size="sm" />
+                          <span>{{ ncfg.dismissLabel || 'Dismiss' }}</span>
+                        </button>
+                      </div>
+                    }
+                  </li>
+                }
+              </ul>
+            }
+          </div>
+
+          @if (ncfg.viewAllHref || ncfg.viewAllLabel) {
+            <div
+              class="shrink-0 border-t border-border
+                     pb-[max(0px,env(safe-area-inset-bottom))] md:pb-0"
+            >
+              <a
+                class="inline-flex w-full cursor-pointer items-center justify-center gap-sm
+                       px-xl py-lg text-body-sm font-medium text-fg-primary
+                       transition-colors hover:bg-neutral-light
+                       focus-visible:outline focus-visible:outline-2
+                       focus-visible:outline-offset-[-2px] focus-visible:outline-focus"
+                [href]="appHref(ncfg.viewAllHref || '#')"
+                (click)="closeNotifications()"
+              >
+                <span>{{ ncfg.viewAllLabel || 'View all notifications' }}</span>
+                <dga-icon name="chevronLeft" size="sm" />
+              </a>
+            </div>
+          }
+        </div>
+      </div>
+    }
+
+    <!-- Header login panel (guest) -->
+    @if (loginOpen() && loginConfig(); as lcfg) {
+      <div
+        [id]="loginPanelId"
+        class="dga-header-util-panel fixed w-[min(24rem,calc(100vw-2rem))] max-md:inset-x-3
+               max-md:bottom-3 max-md:top-auto max-md:w-auto"
+        role="dialog"
+        [attr.aria-label]="lcfg.title || 'Login'"
+        [style]="dropdownPanelStyle()"
+      >
+        <div
+          class="dga-panel-enter dga-panel-enter--anchor-end max-h-[min(90svh,44rem)]
+                 overflow-y-auto overscroll-contain rounded-2xl border border-border bg-card
+                 shadow-xl md:max-h-[none] md:overflow-visible md:rounded-md"
+        >
+          <div class="flex items-start justify-between gap-md px-2xl pt-2xl max-md:pt-xl">
+            <div class="flex min-w-0 flex-col gap-xs">
+              <h2 class="m-0 text-body-lg font-semibold text-display">
+                {{ lcfg.title || 'Login' }}
+              </h2>
+              <p class="m-0 text-body-sm text-paragraph">
+                {{ lcfg.description || 'Sign in to access your account' }}
+              </p>
+            </div>
+            <button
+              type="button"
+              class="inline-flex size-5xl shrink-0 cursor-pointer items-center justify-center
+                     rounded-sm text-muted transition-colors hover:bg-neutral-light hover:text-fg
+                     focus-visible:outline focus-visible:outline-2
+                     focus-visible:outline-offset-2 focus-visible:outline-focus"
+              [attr.aria-label]="lcfg.closeLabel || lcfg.cancelLabel || 'Close'"
+              (click)="closeLogin()"
+            >
+              <dga-icon name="close" size="md" />
+            </button>
+          </div>
+
+          <form
+            class="flex flex-col gap-xl px-2xl pb-[max(1.5rem,env(safe-area-inset-bottom))]
+                   pt-xl md:pb-2xl"
+            (submit)="onLoginSubmit($event)"
+          >
+            <dga-field
+              [label]="lcfg.emailLabel || 'Email'"
+              controlId="dga-header-login-email"
+              [hint]="lcfg.emailHint || ''"
+              required
+            >
+              <dga-form-control startIcon="mail" [filled]="!!loginEmail()">
+                <input
+                  id="dga-header-login-email"
+                  type="email"
+                  name="email"
+                  autocomplete="username"
+                  required
+                  class="placeholder:text-muted"
+                  [placeholder]="lcfg.emailPlaceholder || 'name@example.gov.sa'"
+                  [value]="loginEmail()"
+                  (input)="loginEmail.set($any($event.target).value)"
+                />
+              </dga-form-control>
+            </dga-field>
+
+            <dga-field
+              [label]="lcfg.passwordLabel || 'Password'"
+              controlId="dga-header-login-password"
+              [hint]="lcfg.passwordHint || ''"
+              required
+            >
+              <dga-form-control [filled]="!!loginPassword()">
+                <input
+                  id="dga-header-login-password"
+                  [type]="showLoginPassword() ? 'text' : 'password'"
+                  name="password"
+                  autocomplete="current-password"
+                  required
+                  class="placeholder:text-muted"
+                  [placeholder]="lcfg.passwordPlaceholder || 'Enter your password'"
+                  [value]="loginPassword()"
+                  (input)="loginPassword.set($any($event.target).value)"
+                />
+                <button
+                  type="button"
+                  dgaEnd
+                  [attr.aria-label]="
+                    showLoginPassword()
+                      ? lcfg.hidePasswordLabel || 'Hide password'
+                      : lcfg.showPasswordLabel || 'Show password'
+                  "
+                  (click)="showLoginPassword.set(!showLoginPassword())"
+                >
+                  <dga-icon [name]="showLoginPassword() ? 'eyeOff' : 'eye'" size="sm" />
+                </button>
+              </dga-form-control>
+            </dga-field>
+
+            @if (lcfg.forgotPasswordHref || lcfg.forgotPasswordLabel) {
+              <a
+                class="self-start text-body-sm font-medium text-fg-primary transition-opacity
+                       hover:opacity-80
+                       focus-visible:outline focus-visible:outline-2
+                       focus-visible:outline-offset-2 focus-visible:outline-focus"
+                [href]="appHref(lcfg.forgotPasswordHref || '#')"
+              >
+                {{ lcfg.forgotPasswordLabel || 'Forgot password?' }}
+              </a>
+            }
+
+            <div class="flex flex-col gap-md pt-xs">
+              <button
+                type="submit"
+                class="inline-flex h-5xl w-full cursor-pointer items-center justify-center gap-sm
+                       rounded-sm bg-primary px-xl text-body-md font-medium text-on-color shadow-sm
+                       transition-opacity hover:opacity-90 disabled:cursor-wait disabled:opacity-60
+                       focus-visible:outline focus-visible:outline-2
+                       focus-visible:outline-offset-2 focus-visible:outline-focus"
+                [disabled]="loginSubmitting()"
+              >
+                @if (loginSubmitting()) {
+                  <span
+                    class="dga-login-spinner size-md rounded-full border-2 border-on-color/30
+                           border-t-on-color"
+                    aria-hidden="true"
+                  ></span>
+                }
+                <span>
+                  {{
+                    loginSubmitting()
+                      ? '\u2026'
+                      : lcfg.submitLabel || 'Login'
+                  }}
+                </span>
+              </button>
+              <button
+                type="button"
+                class="inline-flex h-5xl w-full cursor-pointer items-center justify-center
+                       rounded-sm px-xl text-body-md font-medium text-fg transition-colors
+                       hover:bg-neutral-light
+                       focus-visible:outline focus-visible:outline-2
+                       focus-visible:outline-offset-2 focus-visible:outline-focus"
+                (click)="closeLogin()"
+              >
+                {{ lcfg.cancelLabel || 'Cancel' }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    }
+
+    <!-- Header user menu (authenticated) -->
+    @if (userMenuOpen() && userConfig(); as ucfg) {
+      <div
+        [id]="userPanelId"
+        class="dga-header-util-panel fixed w-[min(22rem,calc(100vw-2rem))] max-md:inset-x-3
+               max-md:bottom-3 max-md:top-auto max-md:w-auto"
+        role="menu"
+        [attr.aria-label]="ucfg.name"
+        [style]="dropdownPanelStyle()"
+      >
+        <div
+          class="dga-panel-enter dga-panel-enter--anchor-end max-h-[min(85svh,36rem)]
+                 overflow-y-auto overscroll-contain rounded-2xl border border-border bg-card
+                 shadow-xl md:max-h-[none] md:overflow-visible md:rounded-md"
+        >
+          <div class="flex items-center gap-lg border-b border-border-subtle px-xl py-lg">
+            <dga-avatar [name]="ucfg.name" [src]="ucfg.avatarSrc" size="md" />
+            <div class="flex min-w-0 flex-1 flex-col gap-xxs">
+              <span class="truncate text-body-md font-semibold text-display">{{ ucfg.name }}</span>
+              @if (ucfg.role) {
+                <span class="truncate text-body-sm text-muted">{{ ucfg.role }}</span>
+              }
+              @if (ucfg.email) {
+                <span class="truncate text-body-sm text-paragraph">{{ ucfg.email }}</span>
+              }
+            </div>
+            <button
+              type="button"
+              class="inline-flex size-5xl shrink-0 cursor-pointer items-center justify-center
+                     rounded-sm text-muted transition-colors hover:bg-neutral-light hover:text-fg
+                     focus-visible:outline focus-visible:outline-2
+                     focus-visible:outline-offset-2 focus-visible:outline-focus"
+              aria-label="Close"
+              (click)="closeUserMenu()"
+            >
+              <dga-icon name="close" size="md" />
+            </button>
+          </div>
+          <div class="flex flex-col gap-xxs p-sm">
+            @for (link of ucfg.links || []; track link.id) {
+              @if (link.id === 'logout') {
+                <div class="my-xs border-t border-border-subtle" role="separator"></div>
+                <button
+                  type="button"
+                  role="menuitem"
+                  class="flex w-full cursor-pointer items-center gap-md rounded-sm px-lg py-sm
+                         text-start text-body-md text-fg-error transition-colors hover:bg-error-light
+                         focus-visible:outline focus-visible:outline-2
+                         focus-visible:outline-offset-[-2px] focus-visible:outline-focus"
+                  (click)="onUserLink(link)"
+                >
+                  @if (link.icon) {
+                    <dga-icon [name]="link.icon" size="md" />
+                  }
+                  <span>{{ link.label }}</span>
+                </button>
+              } @else if (link.href) {
+                <a
+                  role="menuitem"
+                  class="flex w-full cursor-pointer items-center gap-md rounded-sm px-lg py-sm
+                         text-start text-body-md text-fg transition-colors hover:bg-neutral-light
+                         focus-visible:outline focus-visible:outline-2
+                         focus-visible:outline-offset-[-2px] focus-visible:outline-focus"
+                  [href]="appHref(link.href)"
+                  (click)="onUserLink(link)"
+                >
+                  @if (link.icon) {
+                    <dga-icon [name]="link.icon" size="md" />
+                  }
+                  <span>{{ link.label }}</span>
+                </a>
+              } @else {
+                <button
+                  type="button"
+                  role="menuitem"
+                  class="flex w-full cursor-pointer items-center gap-md rounded-sm px-lg py-sm
+                         text-start text-body-md text-fg transition-colors hover:bg-neutral-light
+                         focus-visible:outline focus-visible:outline-2
+                         focus-visible:outline-offset-[-2px] focus-visible:outline-focus"
+                  (click)="onUserLink(link)"
+                >
+                  @if (link.icon) {
+                    <dga-icon [name]="link.icon" size="md" />
+                  }
+                  <span>{{ link.label }}</span>
+                </button>
+              }
+            }
+          </div>
+        </div>
+      </div>
+    }
+      </div>
+    }
+
+    <!-- Mobile navigation: sheet | fullscreen | push -->
+    @if (isPortal() && items().length) {
+      @if (mobileOpen() && mobileNav() !== 'push') {
+        <button
+          type="button"
+          class="fixed inset-0 cursor-default md:hidden"
+          [class]="
+            mobileNav() === 'fullscreen'
+              ? 'z-[35] bg-overlay/60 backdrop-blur-[3px]'
+              : 'z-10 bg-overlay/40 backdrop-blur-[1px]'
+          "
+          tabindex="-1"
+          [attr.aria-label]="menuCloseLabel()"
+          (click)="closeAll()"
+        ></button>
+      }
+
+      <div
+        [id]="collapseId"
+        [class]="mobilePanelClass()"
+        [attr.data-mobile-nav]="mobileNav()"
+        [attr.aria-hidden]="!mobileOpen()"
+        [attr.inert]="mobileOpen() ? null : ''"
+      >
+        @if (mobileNav() === 'fullscreen') {
+          <div
+            class="flex h-(--size-header-portal) shrink-0 items-center justify-between
+                   gap-lg border-b border-border px-xl"
+          >
+            <div class="flex min-w-0 items-center gap-lg">
+              @if (brandLogo()) {
+                <img
+                  class="h-5xl w-auto max-w-[10rem] shrink-0 object-contain"
+                  [src]="brandLogo()"
+                  [alt]="brandLogoAlt()"
+                />
+              } @else {
+                <span class="truncate text-body-md font-semibold text-display">{{
+                  brand() || brandLogoAlt() || navLabel()
+                }}</span>
+              }
+            </div>
+            <button
+              type="button"
+              class="inline-flex size-6xl shrink-0 cursor-pointer items-center justify-center
+                     rounded-md text-fg transition-colors hover:bg-neutral-light
+                     focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
+                     focus-visible:outline-focus"
+              [attr.aria-label]="menuCloseLabel()"
+              (click)="closeAll()"
+            >
+              <dga-icon name="close" size="xl" />
+            </button>
+          </div>
+        }
+
+        @if (mobileNav() === 'sheet') {
+          <div
+            class="flex min-h-(--size-header-portal) shrink-0 items-center justify-end
+                   border-b border-border-subtle px-md
+                   pt-[env(safe-area-inset-top,0px)]"
+          >
+            <button
+              type="button"
+              class="inline-flex size-6xl shrink-0 cursor-pointer items-center justify-center
+                     rounded-md text-fg transition-colors hover:bg-neutral-light
+                     focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
+                     focus-visible:outline-focus"
+              [attr.aria-label]="menuCloseLabel()"
+              (click)="closeAll()"
+            >
+              <dga-icon name="close" size="xl" />
+            </button>
+          </div>
+        }
+
+        @if (mobileNav() === 'push') {
+          <div class="border-b border-border-subtle px-xl py-md">
+            <p class="m-0 text-body-sm font-medium text-muted">{{ navLabel() }}</p>
+          </div>
+        }
+
+        <div
+          class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-xl py-lg
+                 pb-[max(1rem,env(safe-area-inset-bottom))]"
+        >
+          <ul class="m-0 flex list-none flex-col gap-none p-0" role="list">
+            @for (item of items(); track item.label; let i = $index) {
+              <li class="border-b border-border-subtle last:border-b-0">
+                @if (item.dropdown) {
+                  <button
+                    type="button"
+                    [class]="mobileItemClass(!!item.current, openDropdown() === i)"
+                    [attr.aria-expanded]="openDropdown() === i"
+                    (click)="toggleDropdown(i, $event)"
+                  >
+                    <span class="min-w-0 flex-1" [class]="item.current ? 'text-fg-primary' : ''">{{
+                      item.label
+                    }}</span>
+                    <dga-icon
+                      name="chevronDown"
+                      size="md"
+                      class="shrink-0"
+                      [class]="
+                        openDropdown() === i
+                          ? 'rotate-180 text-fg-primary transition-transform duration-200'
+                          : 'text-muted transition-transform duration-200'
+                      "
+                    />
+                  </button>
+
+                  @if (openDropdown() === i) {
+                    <div
+                      class="dga-panel-enter space-y-md border-s-2 border-primary/30 pb-lg ps-lg
+                             ms-sm"
+                    >
+                      @if (item.dropdown.featured; as feat) {
+                        <a
+                          class="flex flex-col gap-sm rounded-md border border-border
+                                 bg-primary-faint p-xl text-start no-underline"
+                          [href]="appHref(feat.href || '#')"
+                          (click)="closeAll()"
+                        >
+                          <span class="text-body-md font-semibold text-display">{{
+                            feat.title
+                          }}</span>
+                          @if (feat.description) {
+                            <span class="text-body-sm text-paragraph">{{
+                              feat.description
+                            }}</span>
+                          }
+                          @if (feat.cta) {
+                            <span class="text-body-sm font-medium text-fg-primary">{{
+                              feat.cta
+                            }}</span>
+                          }
+                        </a>
+                      }
+
+                      @if (item.dropdown.columns?.length) {
+                        @for (col of item.dropdown.columns!; track col.title ?? $index) {
+                          <div class="flex flex-col gap-xs">
+                            @if (col.title) {
+                              <p class="px-xl text-body-sm font-medium text-fg-primary">
+                                {{ col.title }}
+                              </p>
+                            }
+                            <ul class="m-0 flex list-none flex-col gap-none p-0">
+                              @for (link of col.links; track link.label) {
+                                <li>
+                                  <a
+                                    [class]="mobileLink"
+                                    [href]="appHref(link.href || '#')"
+                                    (click)="onNavLinkClick(link, $event); closeAll()"
+                                  >
+                                    <span>{{ link.label }}</span>
+                                    @if (link.description) {
+                                      <span class="text-body-sm text-muted">{{
+                                        link.description
+                                      }}</span>
+                                    }
+                                  </a>
+                                </li>
+                              }
+                            </ul>
+                          </div>
+                        }
+                      } @else {
+                        <ul class="m-0 flex list-none flex-col gap-none p-0">
+                          @for (link of flatLinks(item); track link.label) {
+                            <li>
+                              <a
+                                [class]="mobileLink"
+                                [href]="appHref(link.href || '#')"
+                                (click)="onNavLinkClick(link, $event); closeAll()"
+                              >
+                                <span>{{ link.label }}</span>
+                                @if (link.description) {
+                                  <span class="text-body-sm text-muted">{{
+                                    link.description
+                                  }}</span>
+                                }
+                              </a>
+                            </li>
+                          }
+                        </ul>
+                      }
+                    </div>
+                  }
+                } @else {
+                  <a
+                    [class]="mobileItemClass(!!item.current)"
+                    [attr.aria-current]="item.current ? 'page' : null"
+                    [href]="appHref(item.href || '#')"
+                    (click)="onNavLinkClick(item, $event); closeAll()"
+                  >
+                    @if (item.current) {
+                      <span
+                        class="absolute inset-y-md start-0 w-1 rounded-e-sm bg-primary"
+                        aria-hidden="true"
+                      ></span>
+                    }
+                    <span class="min-w-0 flex-1" [class]="item.current ? 'text-fg-primary' : ''">{{
+                      item.label
+                    }}</span>
+                  </a>
+                }
+              </li>
+            }
+          </ul>
+        </div>
+
+        @if (actions().length) {
+          <div
+            class="flex shrink-0 items-center justify-around gap-sm border-t border-border
+                   bg-nav px-xl py-md pb-[max(0.75rem,env(safe-area-inset-bottom))]"
+          >
+            @for (action of actions(); track action.id) {
+              @if (action.href) {
+                <a
+                  class="relative inline-flex min-h-6xl min-w-6xl cursor-pointer flex-col
+                         items-center justify-center gap-xxs rounded-md px-md text-fg
+                         hover:bg-neutral-light
+                         focus-visible:outline focus-visible:outline-2
+                         focus-visible:outline-offset-2 focus-visible:outline-focus"
+                  [href]="appHref(action.href)"
+                  [attr.aria-label]="action.label"
+                  [attr.data-dga-action]="action.id"
+                  (click)="closeAll()"
+                >
+                  @if (action.icon) {
+                    <dga-icon [name]="action.icon" size="xl" />
+                  }
+                  <span class="max-w-11xl truncate text-body-2xs">{{ action.label }}</span>
+                  @if (action.badge) {
+                    <span [class]="badgeClass()">{{ action.badge }}</span>
+                  }
+                </a>
+              } @else {
+                <button
+                  type="button"
+                  class="relative inline-flex min-h-6xl min-w-6xl cursor-pointer flex-col
+                         items-center justify-center gap-xxs rounded-md px-md text-fg
+                         hover:bg-neutral-light
+                         focus-visible:outline focus-visible:outline-2
+                         focus-visible:outline-offset-2 focus-visible:outline-focus"
+                  [attr.aria-label]="action.label"
+                  [attr.data-dga-action]="action.id"
+                  (click)="onMobileAction(action, $event)"
+                >
+                  @if (action.icon) {
+                    <dga-icon [name]="action.icon" size="xl" />
+                  }
+                  <span class="max-w-11xl truncate text-body-2xs">{{ action.label }}</span>
+                  @if (action.badge) {
+                    <span [class]="badgeClass()">{{ action.badge }}</span>
+                  }
+                </button>
+              }
+            }
+          </div>
+        }
+      </div>
+    }
+  `,isInline:!0,styles:[`@keyframes dga-fade-in{0%{opacity:0}to{opacity:1}}@keyframes dga-panel-in{0%{opacity:0;transform:translateY(-.625rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dga-chip-in{0%{opacity:0;transform:translateY(.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes dga-notif-row-in{0%{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:translateY(0)}}@keyframes dga-expand-fade{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes dga-spin{to{transform:rotate(360deg)}}@keyframes dga-badge-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}@keyframes dga-push-in{0%{opacity:0;transform:translateY(-.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes dga-sheet-in-ltr{0%{opacity:.85;transform:translate3d(-100%,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes dga-sheet-in-rtl{0%{opacity:.85;transform:translate3d(100%,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes dga-fs-in{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes dga-sheet-in{0%{opacity:0;transform:translateY(1.25rem)}to{opacity:1;transform:translateY(0)}}:host .dga-util-backdrop,.dga-header-util-layer .dga-util-backdrop{animation:dga-fade-in .22s ease both}.dga-header-util-layer{position:fixed;inset:0;z-index:var(--z-index-urgent, 400);pointer-events:none}.dga-header-util-layer>.dga-util-backdrop,.dga-header-util-layer>.dga-header-util-panel{pointer-events:auto}:host .dga-panel-enter,.dga-header-util-layer .dga-panel-enter{animation:dga-panel-in .28s cubic-bezier(.16,1,.3,1) both;transform-origin:top center;will-change:transform,opacity}:host .dga-panel-enter--anchor-end,.dga-header-util-layer .dga-panel-enter--anchor-end{transform-origin:top right}:host-context([dir="rtl"]) .dga-panel-enter--anchor-end,:host([dir="rtl"]) .dga-panel-enter--anchor-end,:host-context([dir="rtl"]) .dga-header-util-layer .dga-panel-enter--anchor-end,[dir=rtl] .dga-header-util-layer .dga-panel-enter--anchor-end{transform-origin:top left}@media(max-width:767px){:host .dga-panel-enter--anchor-end,.dga-header-util-layer .dga-panel-enter--anchor-end{animation-name:dga-sheet-in;transform-origin:bottom center}}:host .dga-search-chip{animation:dga-chip-in .28s cubic-bezier(.16,1,.3,1) both}:host .dga-search-input{-webkit-appearance:none;appearance:none}:host .dga-search-input::-webkit-search-decoration,:host .dga-search-input::-webkit-search-cancel-button,:host .dga-search-input::-webkit-search-results-button,:host .dga-search-input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none;display:none}:host .dga-search-voice.dga-search-voice--active{color:var(--dga-text-primary, #1b8354)!important;background:var(--dga-bg-primary-faint, #f3faf6)!important}:host .dga-notif-item,.dga-header-util-layer .dga-notif-item{animation:dga-notif-row-in .26s cubic-bezier(.16,1,.3,1) both}:host .dga-notif-actions,.dga-header-util-layer .dga-notif-actions{animation:dga-expand-fade .2s ease both}:host .dga-login-spinner,.dga-header-util-layer .dga-login-spinner{animation:dga-spin .7s linear infinite}:host .dga-action-badge{animation:dga-badge-pulse 1.8s ease-in-out infinite;transform-origin:center}@media(prefers-reduced-motion:reduce){:host .dga-util-backdrop,:host .dga-panel-enter,:host .dga-search-chip,:host .dga-notif-item,:host .dga-notif-actions,.dga-header-util-layer .dga-util-backdrop,.dga-header-util-layer .dga-panel-enter{animation-duration:.01ms!important;animation-delay:0ms!important}}:host .dga-burger__box{position:relative;display:block;width:1.375rem;height:1rem}:host .dga-burger__line{position:absolute;inset-inline:0;height:2px;border-radius:1px;background:currentColor;transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .16s ease,top .22s cubic-bezier(.4,0,.2,1)}:host .dga-burger__line:nth-child(1){top:0}:host .dga-burger__line:nth-child(2){top:calc(50% - 1px)}:host .dga-burger__line:nth-child(3){top:calc(100% - 2px)}:host .dga-burger--open{background:var(--color-neutral-light, #f3f4f6)}:host .dga-burger--hidden{visibility:hidden;pointer-events:none}:host .dga-burger--open .dga-burger__line:nth-child(1){top:calc(50% - 1px);transform:rotate(45deg)}:host .dga-burger--open .dga-burger__line:nth-child(2){opacity:0;transform:scaleX(.4)}:host .dga-burger--open .dga-burger__line:nth-child(3){top:calc(50% - 1px);transform:rotate(-45deg)}:host .dga-mobile-nav-closed{display:none}:host .dga-mobile-nav-open{display:flex}:host .dga-mobile-push-open{animation:dga-push-in .24s cubic-bezier(.4,0,.2,1) forwards}:host .dga-mobile-sheet-open{animation:dga-sheet-in-rtl .28s cubic-bezier(.4,0,.2,1) forwards}:host-context([dir="rtl"]) .dga-mobile-sheet-open{animation:dga-sheet-in-ltr .28s cubic-bezier(.4,0,.2,1) forwards}:host .dga-mobile-fs-open{animation:dga-fs-in .24s cubic-bezier(.4,0,.2,1) forwards}@media(prefers-reduced-motion:reduce){:host .dga-action-badge,:host .dga-mobile-push-open,:host .dga-mobile-sheet-open,:host .dga-mobile-fs-open,:host-context([dir="rtl"]) .dga-mobile-sheet-open,:host .dga-burger__line{animation:none;transition:none}}
+`],dependencies:[{kind:"component",type:S,selector:"dga-avatar",inputs:["src","name","size","alt"]},{kind:"component",type:C,selector:"dga-badge",inputs:["variant","size"]},{kind:"component",type:D,selector:"dga-field",inputs:["label","labelHint","hint","error","status","statusMessage","controlId","required"]},{kind:"component",type:I,selector:"dga-form-control",inputs:["size","status","disabled","filled","startIcon","endIcon"]},{kind:"directive",type:z,selector:"[dgaEnd]"},{kind:"component",type:M,selector:"dga-icon",inputs:["name","glyph","size","tone","label"]},{kind:"component",type:A,selector:"dga-icon-badge",inputs:["size","appearance"]},{kind:"component",type:P,selector:"dga-modal",inputs:["open","title","description","size","animation","closeLabel","closeOnBackdrop","closeOnEscape","showClose","scrollable","centered"],outputs:["openChange","closed","opened"]},{kind:"component",type:O,selector:"dga-tooltip",inputs:["text","title","placement","variant","showIcon","disabled","showDelay","hideDelay","dismissMs"]}],changeDetection:a.ChangeDetectionStrategy.OnPush})}a.\u0275\u0275ngDeclareClassMetadata({minVersion:"12.0.0",version:"22.0.7",ngImport:a,type:g,decorators:[{type:V,args:[{selector:"dga-header",standalone:!0,changeDetection:F.OnPush,imports:[S,C,D,I,z,M,A,P,O],template:`
+    <div [class]="innerClasses()">
+      <div class="relative flex min-w-0 shrink-0 items-center self-center">
+        <ng-content select="[dgaHeaderBrand]" />
+        @if (brand() || brandLogo()) {
+          <a
+            class="inline-flex h-(--size-header-logo) cursor-pointer items-center gap-lg font-sans
+                   focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
+                   focus-visible:outline-focus"
+            [href]="appHref(brandHref())"
+          >
+            @if (brandLogo()) {
+              <img
+                class="h-(--size-header-logo) w-auto max-w-[min(100%,14rem)] shrink-0 object-contain"
+                [src]="brandLogo()"
+                [alt]="brandLogoAlt()"
+                height="58"
+              />
+            } @else if (appearance() === 'portal' && brandPlaceholder()) {
+              <span
+                class="inline-flex size-(--size-header-logo) shrink-0 items-center justify-center rounded-sm
+                       bg-primary-faint text-fg-primary"
+                aria-hidden="true"
+              >
+                <dga-icon name="home" size="xl" tone="primary" />
+              </span>
+            }
+            @if (brand() && !brandLogo()) {
+              <span class="flex min-w-0 flex-col gap-xxs">
+                <span class="text-body-md font-bold text-display">{{ brand() }}</span>
+                @if (brandSlogan()) {
+                  <span class="text-body-sm font-normal text-muted">{{ brandSlogan() }}</span>
+                }
+              </span>
+            }
+          </a>
+        }
+      </div>
+
+      @if (isPortal() && items().length) {
+        <button
+          type="button"
+          class="dga-burger relative z-30 ms-auto hidden h-full w-6xl shrink-0 cursor-pointer
+                 items-center justify-center self-stretch rounded-md text-fg transition-colors
+                 hover:bg-neutral-light max-md:inline-flex
+                 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
+                 focus-visible:outline-focus"
+          [class.dga-burger--open]="mobileOpen()"
+          [class.dga-burger--hidden]="mobileOpen() && mobileNav() !== 'push'"
+          [attr.aria-expanded]="mobileOpen()"
+          [attr.aria-controls]="collapseId"
+          [attr.aria-label]="mobileOpen() ? menuCloseLabel() : menuToggleLabel()"
+          (click)="toggleMobile()"
+        >
+          <span class="dga-burger__box" aria-hidden="true">
+            <span class="dga-burger__line"></span>
+            <span class="dga-burger__line"></span>
+            <span class="dga-burger__line"></span>
+          </span>
+        </button>
+      }
+
+      <!-- Desktop navigation -->
+      <nav
+        [class]="desktopNavClasses()"
+        [attr.aria-label]="navLabel()"
+        [attr.hidden]="null"
+      >
+        @if (items().length) {
+          <ul
+            class="m-0 flex list-none flex-row flex-nowrap items-stretch gap-none p-0"
+            [class.overflow-x-auto]="openDropdown() === null"
+            [class.overflow-visible]="openDropdown() !== null"
+            role="list"
+          >
+            @for (item of items(); track item.label; let i = $index) {
+              <li
+                class="relative"
+                [class.z-dropdown]="openDropdown() === i"
+                [attr.data-open]="openDropdown() === i || null"
+                [attr.data-variant]="item.dropdown ? resolveVariant(item) : null"
+                (mouseenter)="onItemEnter(i)"
+                (focusin)="onItemEnter(i)"
+              >
+                @if (item.dropdown) {
+                  <button
+                    type="button"
+                    [class]="navItemClass(!!item.current, openDropdown() === i)"
+                    [attr.aria-expanded]="openDropdown() === i"
+                    [attr.aria-haspopup]="'true'"
+                    (click)="toggleDropdown(i, $event)"
+                  >
+                    <span
+                      aria-hidden="true"
+                      [class]="indicatorClass(!!item.current || openDropdown() === i)"
+                    ></span>
+                    <span class="whitespace-nowrap">{{ item.label }}</span>
+                    <dga-icon
+                      name="chevronDown"
+                      size="md"
+                      [class]="
+                        openDropdown() === i
+                          ? 'rotate-180 transition-transform duration-200'
+                          : 'transition-transform duration-200'
+                      "
+                    />
+                  </button>
+
+                  @if (openDropdown() === i && resolveVariant(item) === 'menu') {
+                    <div
+                      class="absolute start-0 top-full z-dropdown min-w-[16rem]
+                             max-w-[min(100vw-2rem,20rem)]"
+                      role="menu"
+                      [attr.aria-label]="item.label"
+                    >
+                      <div class="h-xs" aria-hidden="true"></div>
+                      <div
+                        class="dga-panel-enter rounded-md border border-border bg-card p-sm
+                               shadow-lg"
+                      >
+                        @if (item.dropdown.columns?.length) {
+                          <div class="flex flex-col gap-lg p-md">
+                            @for (col of item.dropdown.columns!; track col.title ?? $index) {
+                              <div class="flex flex-col gap-xs">
+                                @if (col.title) {
+                                  <p class="px-xl text-body-sm font-medium text-fg-primary">
+                                    {{ col.title }}
+                                  </p>
+                                }
+                                <ul class="m-0 flex list-none flex-col gap-none p-0" role="list">
+                                  @for (link of col.links; track link.label) {
+                                    <li role="none">
+                                      <a
+                                        role="menuitem"
+                                        [class]="dropLink"
+                                        [href]="appHref(link.href || '#')"
+                                        (click)="onNavLinkClick(link, $event)"
+                                        >{{ link.label }}</a
+                                      >
+                                    </li>
+                                  }
+                                </ul>
+                              </div>
+                            }
+                          </div>
+                        } @else {
+                          <ul class="m-0 flex list-none flex-col gap-none p-0" role="list">
+                            @for (link of item.dropdown.links || []; track link.label) {
+                              <li role="none">
+                                <a
+                                  role="menuitem"
+                                  [class]="dropLink"
+                                  [href]="appHref(link.href || '#')"
+                                  (click)="onNavLinkClick(link, $event)"
+                                  >{{ link.label }}</a
+                                >
+                              </li>
+                            }
+                          </ul>
+                        }
+                      </div>
+                    </div>
+                  }
+                } @else {
+                  <a
+                    [class]="navItemClass(!!item.current)"
+                    [attr.aria-current]="item.current ? 'page' : null"
+                    [href]="appHref(item.href || '#')"
+                    (click)="onNavLinkClick(item, $event)"
+                  >
+                    <span aria-hidden="true" [class]="indicatorClass(!!item.current)"></span>
+                    <span class="whitespace-nowrap">{{ item.label }}</span>
+                  </a>
+                }
+              </li>
+            }
+          </ul>
+        }
+        <div class="contents">
+          <ng-content />
+        </div>
+      </nav>
+
+      <div [class]="actionsClasses()">
+        @for (action of actions(); track action.id) {
+          <dga-tooltip
+            class="relative flex h-full"
+            [text]="actionTooltip(action)"
+            placement="bottom"
+            [showIcon]="false"
+            [disabled]="!isIconOnly(action) && !(isLoginAction(action) && authenticated())"
+          >
+            @if (action.href) {
+              <a
+                [class]="actionClass(action)"
+                [href]="appHref(action.href)"
+                [attr.aria-label]="actionAriaLabel(action)"
+                [attr.data-dga-action]="action.id"
+              >
+                <span aria-hidden="true" [class]="indicatorClass(false)"></span>
+                @if (action.icon) {
+                  <dga-icon [name]="action.icon" size="xl" />
+                }
+                @if (!isIconOnly(action)) {
+                  <span>{{ action.label }}</span>
+                }
+                @if (action.badge) {
+                  <span [class]="badgeClass()">{{ action.badge }}</span>
+                }
+              </a>
+            } @else {
+              <button
+                type="button"
+                [class]="actionClass(action)"
+                [attr.aria-label]="actionAriaLabel(action)"
+                [attr.aria-expanded]="actionExpanded(action)"
+                [attr.aria-controls]="actionControls(action)"
+                [attr.data-dga-action]="action.id"
+                (click)="onAction(action, $event)"
+              >
+                <span
+                  aria-hidden="true"
+                  [class]="indicatorClass(actionIndicatorActive(action))"
+                ></span>
+                @if (isLoginAction(action) && authenticated() && userConfig(); as u) {
+                  <dga-avatar [name]="u.name" [src]="u.avatarSrc" size="sm" />
+                  <span class="hidden max-w-11xl truncate lg:inline">{{ u.name }}</span>
+                } @else {
+                  @if (action.icon) {
+                    <dga-icon [name]="action.icon" size="xl" />
+                  }
+                  @if (!isIconOnly(action)) {
+                    <span>{{ action.label }}</span>
+                  }
+                }
+                @if (action.badge) {
+                  <span [class]="badgeClass()">{{ action.badge }}</span>
+                }
+              </button>
+            }
+          </dga-tooltip>
+        }
+        <ng-content select="[dgaHeaderEnd]" />
+      </div>
+    </div>
+
+    <!-- Desktop mega / featured -->
+    @if (activeWideDropdown(); as drop) {
+      <div
+        class="absolute start-0 end-0 top-full z-dropdown hidden w-full md:block"
+        role="region"
+        [attr.aria-label]="drop.item.label"
+        [attr.data-variant]="drop.variant"
+        (mouseenter)="onPanelEnter()"
+      >
+        <div
+          class="dga-panel-enter border-b border-border bg-card shadow-lg md:rounded-b-lg"
+        >
+          <div class="w-full px-(--wrapper-padding) py-2xl lg:py-3xl">
+            <div [class]="featuredGridClass(drop.variant, !!drop.item.dropdown!.featured)">
+              <div class="min-w-0">
+                @switch (resolveLayout(drop.item)) {
+                  @case ('columns') {
+                    <div [class]="columnsGridClass(colCount(drop.item))">
+                      @for (
+                        col of drop.item.dropdown!.columns!;
+                        track col.title ?? $index
+                      ) {
+                        <div class="flex min-w-0 flex-col gap-md">
+                          @if (col.title) {
+                            <p
+                              class="border-b border-border-subtle pb-sm text-body-lg
+                                     font-medium text-fg-primary"
+                            >
+                              {{ col.title }}
+                            </p>
+                          }
+                          <ul class="m-0 flex list-none flex-col gap-none p-0" role="list">
+                            @for (link of col.links; track link.label) {
+                              <li>
+                                <a
+                                  [class]="dropLink"
+                                  [href]="appHref(link.href || '#')"
+                                  (click)="onNavLinkClick(link, $event)"
+                                >
+                                  <span>{{ link.label }}</span>
+                                  @if (link.description) {
+                                    <span class="text-body-sm text-muted">{{
+                                      link.description
+                                    }}</span>
+                                  }
+                                </a>
+                              </li>
+                            }
+                          </ul>
+                        </div>
+                      }
+                    </div>
+                  }
+                  @case ('rows') {
+                    <ul
+                      class="m-0 grid w-full list-none grid-cols-1 gap-md p-0
+                             sm:grid-cols-2 lg:grid-cols-4"
+                      role="list"
+                    >
+                      @for (link of drop.item.dropdown!.links || []; track link.label) {
+                        <li class="min-w-0">
+                          <a
+                            [class]="dropTile"
+                            [href]="appHref(link.href || '#')"
+                            (click)="onNavLinkClick(link, $event)"
+                          >
+                            <span class="text-body-md font-medium text-fg">{{
+                              link.label
+                            }}</span>
+                            @if (link.description) {
+                              <span class="text-body-sm text-muted">{{
+                                link.description
+                              }}</span>
+                            }
+                          </a>
+                        </li>
+                      }
+                    </ul>
+                  }
+                  @default {
+                    <ul
+                      class="m-0 grid w-full max-w-(--container-5xl) list-none grid-cols-1 gap-xs
+                             p-0 sm:grid-cols-2 lg:grid-cols-3"
+                      role="list"
+                    >
+                      @for (link of flatLinks(drop.item); track link.label) {
+                        <li class="min-w-0">
+                          <a
+                            [class]="dropLink"
+                            [href]="appHref(link.href || '#')"
+                            (click)="onNavLinkClick(link, $event)"
+                          >
+                            <span>{{ link.label }}</span>
+                            @if (link.description) {
+                              <span class="text-body-sm text-muted">{{
+                                link.description
+                              }}</span>
+                            }
+                          </a>
+                        </li>
+                      }
+                    </ul>
+                  }
+                }
+              </div>
+
+              @if (drop.variant === 'featured' && drop.item.dropdown!.featured; as feat) {
+                <aside
+                  class="flex min-w-0 flex-col gap-lg overflow-hidden rounded-md
+                         border border-border bg-primary-faint p-2xl lg:self-start"
+                >
+                  @if (feat.imageUrl) {
+                    <img
+                      class="aspect-[16/10] h-auto w-full rounded-sm object-cover"
+                      [src]="feat.imageUrl"
+                      alt=""
+                    />
+                  }
+                  <div class="flex min-w-0 flex-col gap-md">
+                    <p class="text-body-lg font-semibold text-display">{{ feat.title }}</p>
+                    @if (feat.description) {
+                      <p class="text-body-sm leading-relaxed text-paragraph">
+                        {{ feat.description }}
+                      </p>
+                    }
+                    @if (feat.cta) {
+                      <a
+                        class="mt-xs inline-flex h-5xl cursor-pointer items-center justify-center gap-sm
+                               rounded-sm bg-primary px-xl text-body-md font-medium text-on-color
+                               transition-opacity hover:opacity-90
+                               focus-visible:outline focus-visible:outline-2
+                               focus-visible:outline-offset-2 focus-visible:outline-focus"
+                        [href]="appHref(feat.href || '#')"
+                      >
+                        <span>{{ feat.cta }}</span>
+                        <dga-icon name="chevronLeft" size="sm" />
+                      </a>
+                    }
+                  </div>
+                </aside>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+
+    <!-- Header search popup (dga-modal) -->
+    @if (searchConfig(); as cfg) {
+      <dga-modal
+        class="dga-header-search-modal"
+        [id]="searchPanelId"
+        [open]="searchOpen()"
+        (openChange)="onSearchModalOpenChange($event)"
+        [title]="cfg.title || cfg.submitLabel || 'Search'"
+        [description]="cfg.description || ''"
+        [closeLabel]="cfg.closeLabel || 'Close'"
+        size="lg"
+        animation="scale"
+        [scrollable]="false"
+        (opened)="focusSearchInput()"
+      >
+        <form
+          class="flex flex-col gap-xl"
+          role="search"
+          [attr.aria-label]="cfg.submitLabel || 'Search'"
+          (submit)="onSearchFormSubmit($event)"
+        >
+          <div class="flex w-full flex-col gap-md sm:flex-row sm:items-stretch sm:gap-lg">
+            <div class="min-w-0 flex-1">
+              <dga-form-control size="lg" startIcon="search" [filled]="!!searchQuery()">
+                <input
+                  #searchInput
+                  type="search"
+                  name="q"
+                  class="dga-search-input placeholder:text-muted"
+                  [placeholder]="cfg.placeholder || 'Search...'"
+                  [attr.aria-label]="cfg.placeholder || 'Search...'"
+                  [value]="searchQuery()"
+                  (input)="searchQuery.set($any($event.target).value)"
+                />
+                @if (searchQuery()) {
+                  <button
+                    type="button"
+                    dgaEnd
+                    [attr.aria-label]="cfg.clearLabel || 'Clear search'"
+                    (click)="clearSearchQuery()"
+                  >
+                    <dga-icon name="close" size="sm" />
+                  </button>
+                }
+                @if (cfg.voice !== false) {
+                  <button
+                    type="button"
+                    dgaEnd
+                    class="dga-search-voice"
+                    [class.dga-search-voice--active]="voiceListening()"
+                    [attr.aria-label]="cfg.voiceLabel || 'Voice input'"
+                    [attr.aria-pressed]="voiceListening()"
+                    (click)="onSearchVoice()"
+                  >
+                    <dga-icon
+                      name="mic"
+                      size="sm"
+                      [tone]="voiceListening() ? 'current' : 'muted'"
+                    />
+                  </button>
+                }
+              </dga-form-control>
+            </div>
+            <button
+              type="submit"
+              class="inline-flex min-h-6xl shrink-0 cursor-pointer items-center justify-center gap-sm
+                     rounded-md bg-primary px-xl text-body-md font-medium text-on-color shadow-sm
+                     transition-opacity hover:opacity-90
+                     focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
+                     focus-visible:outline-focus sm:px-2xl"
+            >
+              <dga-icon name="search" size="md" />
+              <span>{{ cfg.submitLabel || 'Search' }}</span>
+            </button>
+          </div>
+
+          @if (cfg.suggestions?.length) {
+            <div class="flex flex-col gap-md">
+              <span class="text-body-sm font-semibold text-display">
+                {{ cfg.suggestionsLabel || 'Suggestions:' }}
+              </span>
+              <div class="flex flex-wrap gap-sm">
+                @for (item of cfg.suggestions!; track item.value ?? item.label; let i = $index) {
+                  <button
+                    type="button"
+                    class="dga-search-chip inline-flex h-4xl cursor-pointer items-center gap-xs
+                           rounded-full border border-border bg-neutral-light px-lg text-body-sm
+                           text-paragraph transition-[background-color,transform,border-color]
+                           duration-150 ease-out hover:-translate-y-px hover:border-primary
+                           hover:bg-sunken
+                           focus-visible:outline focus-visible:outline-2
+                           focus-visible:outline-offset-2 focus-visible:outline-focus"
+                    [style.animation-delay]="i * 40 + 'ms'"
+                    (click)="applySearchSuggestion(item)"
+                  >
+                    <dga-icon [name]="item.icon || 'plus'" size="xs" />
+                    <span>{{ item.label }}</span>
+                  </button>
+                }
+              </div>
+            </div>
+          }
+        </form>
+      </dga-modal>
+    }
+
+    <!--
+      Utility overlays (notifications / login / user): portaled to body at z-urgent
+      so sticky announcement + chatbot/a11y FABs stay underneath.
+    -->
+    @if (utilityOverlayOpen()) {
+      <div #utilLayer class="dga-header-util-layer">
+        <button
+          type="button"
+          class="dga-util-backdrop absolute inset-0 cursor-default bg-overlay/50"
+          tabindex="-1"
+          aria-label="Close"
+          (click)="closeUtilityOverlays()"
+        ></button>
+
+    <!-- Header notifications panel -->
+    @if (notificationsOpen() && notificationsConfig(); as ncfg) {
+      <div
+        [id]="notificationsPanelId"
+        class="dga-header-util-panel fixed w-[min(28rem,calc(100vw-2rem))] max-md:inset-x-3
+               max-md:bottom-3 max-md:top-auto max-md:w-auto"
+        role="region"
+        [attr.aria-label]="ncfg.title || ncfg.viewAllLabel || 'Notifications'"
+        [style]="dropdownPanelStyle()"
+      >
+        <div
+          class="dga-panel-enter dga-panel-enter--anchor-end flex max-h-[min(85svh,40rem)]
+                 flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-xl
+                 md:max-h-[none] md:rounded-md"
+        >
+          <div
+            class="flex shrink-0 flex-col gap-sm border-b border-border-subtle px-xl py-md
+                   md:flex-row md:items-center md:justify-between md:gap-md"
+          >
+            <div class="flex min-w-0 items-center justify-between gap-sm md:justify-start">
+              <div class="flex min-w-0 items-center gap-sm">
+                <h2 class="m-0 truncate text-body-lg font-semibold text-display md:text-body-md">
+                  {{ ncfg.title || 'Notifications' }}
+                </h2>
+                @if (unreadNotificationCount() > 0) {
+                  <span
+                    class="inline-flex min-w-4xl items-center justify-center rounded-full
+                           bg-error px-sm py-xxs text-body-2xs font-semibold text-on-color"
+                  >
+                    {{ unreadNotificationCount() }}
+                  </span>
+                }
+              </div>
+              <button
+                type="button"
+                class="inline-flex size-5xl shrink-0 cursor-pointer items-center justify-center
+                       rounded-sm text-muted transition-colors hover:bg-neutral-light hover:text-fg
+                       focus-visible:outline focus-visible:outline-2
+                       focus-visible:outline-offset-2 focus-visible:outline-focus md:hidden"
+                [attr.aria-label]="ncfg.closeLabel || 'Close'"
+                (click)="closeNotifications()"
+              >
+                <dga-icon name="close" size="md" />
+              </button>
+            </div>
+            <div class="flex shrink-0 items-center gap-xxs max-md:justify-stretch">
+              @if (unreadNotificationCount() > 0) {
+                <button
+                  type="button"
+                  class="inline-flex h-4xl flex-1 cursor-pointer items-center justify-center
+                         rounded-sm px-md text-body-sm font-medium text-fg-primary
+                         transition-colors hover:bg-primary-faint
+                         focus-visible:outline focus-visible:outline-2
+                         focus-visible:outline-offset-2 focus-visible:outline-focus
+                         md:flex-none"
+                  (click)="markAllNotificationsRead()"
+                >
+                  {{ ncfg.markAllReadLabel || 'Mark all as read' }}
+                </button>
+              }
+              <button
+                type="button"
+                class="hidden size-5xl cursor-pointer items-center justify-center rounded-sm
+                       text-muted transition-colors hover:bg-neutral-light hover:text-fg
+                       focus-visible:outline focus-visible:outline-2
+                       focus-visible:outline-offset-2 focus-visible:outline-focus md:inline-flex"
+                [attr.aria-label]="ncfg.closeLabel || 'Close'"
+                (click)="closeNotifications()"
+              >
+                <dga-icon name="close" size="md" />
+              </button>
+            </div>
+          </div>
+
+          <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain md:max-h-[min(48svh,28rem)]">
+            @if (visibleNotifications().length === 0) {
+              <div class="flex flex-col items-center gap-md px-xl py-3xl text-center">
+                <span
+                  class="inline-flex size-6xl items-center justify-center rounded-full
+                         bg-neutral-light text-muted"
+                  aria-hidden="true"
+                >
+                  <dga-icon name="bell" size="xl" tone="muted" />
+                </span>
+                <p class="m-0 text-body-sm text-muted">
+                  {{ ncfg.emptyLabel || 'No notifications' }}
+                </p>
+              </div>
+            } @else {
+              <ul class="m-0 flex list-none flex-col p-0" role="list">
+                @for (item of visibleNotifications(); track item.id) {
+                  <li
+                    class="border-b border-border-subtle last:border-b-0"
+                    [class]="item.read ? 'bg-surface' : 'bg-card'"
+                  >
+                    <button
+                      type="button"
+                      class="flex w-full cursor-pointer items-start gap-lg px-xl py-lg text-start
+                             transition-colors hover:bg-neutral-light
+                             focus-visible:outline focus-visible:outline-2
+                             focus-visible:outline-offset-[-2px] focus-visible:outline-focus"
+                      [attr.aria-expanded]="expandedNotificationId() === item.id"
+                      (click)="toggleNotificationExpand(item)"
+                    >
+                      <span class="relative mt-xxs shrink-0">
+                        <dga-icon-badge size="sm">
+                          <dga-icon [name]="item.icon || 'bell'" size="sm" />
+                        </dga-icon-badge>
+                        @if (!item.read) {
+                          <span
+                            class="absolute -end-xxs -top-xxs size-[0.5rem] rounded-full bg-primary
+                                   ring-2 ring-white"
+                            aria-hidden="true"
+                          ></span>
+                        }
+                      </span>
+                      <span class="min-w-0 flex-1">
+                        <span class="mb-xs flex flex-wrap items-center gap-sm">
+                          @if (item.statusLabel) {
+                            <dga-badge [variant]="item.tone || 'neutral'" size="sm">
+                              {{ item.statusLabel }}
+                            </dga-badge>
+                          }
+                          <span
+                            class="min-w-0 truncate text-body-md text-display"
+                            [class.font-semibold]="!item.read"
+                            [class.font-medium]="item.read"
+                            [class.text-muted]="item.read"
+                          >
+                            {{ item.title }}
+                          </span>
+                        </span>
+                        <span
+                          class="text-body-sm text-paragraph"
+                          [class.line-clamp-2]="expandedNotificationId() !== item.id"
+                        >
+                          {{ item.message }}
+                        </span>
+                      </span>
+                      <dga-icon
+                        class="mt-xs shrink-0 text-muted transition-transform duration-200"
+                        [class.rotate-180]="expandedNotificationId() === item.id"
+                        name="chevronDown"
+                        size="sm"
+                      />
+                    </button>
+
+                    @if (expandedNotificationId() === item.id) {
+                      <div
+                        class="dga-notif-actions flex flex-wrap gap-sm border-t border-border-subtle
+                               bg-surface px-xl py-md"
+                      >
+                        @if (!item.read) {
+                          <button
+                            type="button"
+                            class="inline-flex h-4xl cursor-pointer items-center gap-xs rounded-sm
+                                   px-md text-body-sm text-fg transition-colors hover:bg-neutral-light
+                                   focus-visible:outline focus-visible:outline-2
+                                   focus-visible:outline-offset-2 focus-visible:outline-focus"
+                            (click)="onNotificationAction(item, 'read'); $event.stopPropagation()"
+                          >
+                            <dga-icon name="success" size="sm" />
+                            <span>{{ ncfg.markReadLabel || 'Mark as read' }}</span>
+                          </button>
+                        }
+                        <button
+                          type="button"
+                          class="inline-flex h-4xl cursor-pointer items-center gap-xs rounded-sm
+                                 px-md text-body-sm text-fg transition-colors hover:bg-neutral-light
+                                 focus-visible:outline focus-visible:outline-2
+                                 focus-visible:outline-offset-2 focus-visible:outline-focus"
+                          (click)="onNotificationAction(item, 'view'); $event.stopPropagation()"
+                        >
+                          <dga-icon name="eye" size="sm" />
+                          <span>{{ ncfg.viewLabel || 'View' }}</span>
+                        </button>
+                        <button
+                          type="button"
+                          class="inline-flex h-4xl cursor-pointer items-center gap-xs rounded-sm
+                                 px-md text-body-sm text-fg-error transition-colors hover:bg-error-light
+                                 focus-visible:outline focus-visible:outline-2
+                                 focus-visible:outline-offset-2 focus-visible:outline-focus"
+                          (click)="onNotificationAction(item, 'dismiss'); $event.stopPropagation()"
+                        >
+                          <dga-icon name="close" size="sm" />
+                          <span>{{ ncfg.dismissLabel || 'Dismiss' }}</span>
+                        </button>
+                      </div>
+                    }
+                  </li>
+                }
+              </ul>
+            }
+          </div>
+
+          @if (ncfg.viewAllHref || ncfg.viewAllLabel) {
+            <div
+              class="shrink-0 border-t border-border
+                     pb-[max(0px,env(safe-area-inset-bottom))] md:pb-0"
+            >
+              <a
+                class="inline-flex w-full cursor-pointer items-center justify-center gap-sm
+                       px-xl py-lg text-body-sm font-medium text-fg-primary
+                       transition-colors hover:bg-neutral-light
+                       focus-visible:outline focus-visible:outline-2
+                       focus-visible:outline-offset-[-2px] focus-visible:outline-focus"
+                [href]="appHref(ncfg.viewAllHref || '#')"
+                (click)="closeNotifications()"
+              >
+                <span>{{ ncfg.viewAllLabel || 'View all notifications' }}</span>
+                <dga-icon name="chevronLeft" size="sm" />
+              </a>
+            </div>
+          }
+        </div>
+      </div>
+    }
+
+    <!-- Header login panel (guest) -->
+    @if (loginOpen() && loginConfig(); as lcfg) {
+      <div
+        [id]="loginPanelId"
+        class="dga-header-util-panel fixed w-[min(24rem,calc(100vw-2rem))] max-md:inset-x-3
+               max-md:bottom-3 max-md:top-auto max-md:w-auto"
+        role="dialog"
+        [attr.aria-label]="lcfg.title || 'Login'"
+        [style]="dropdownPanelStyle()"
+      >
+        <div
+          class="dga-panel-enter dga-panel-enter--anchor-end max-h-[min(90svh,44rem)]
+                 overflow-y-auto overscroll-contain rounded-2xl border border-border bg-card
+                 shadow-xl md:max-h-[none] md:overflow-visible md:rounded-md"
+        >
+          <div class="flex items-start justify-between gap-md px-2xl pt-2xl max-md:pt-xl">
+            <div class="flex min-w-0 flex-col gap-xs">
+              <h2 class="m-0 text-body-lg font-semibold text-display">
+                {{ lcfg.title || 'Login' }}
+              </h2>
+              <p class="m-0 text-body-sm text-paragraph">
+                {{ lcfg.description || 'Sign in to access your account' }}
+              </p>
+            </div>
+            <button
+              type="button"
+              class="inline-flex size-5xl shrink-0 cursor-pointer items-center justify-center
+                     rounded-sm text-muted transition-colors hover:bg-neutral-light hover:text-fg
+                     focus-visible:outline focus-visible:outline-2
+                     focus-visible:outline-offset-2 focus-visible:outline-focus"
+              [attr.aria-label]="lcfg.closeLabel || lcfg.cancelLabel || 'Close'"
+              (click)="closeLogin()"
+            >
+              <dga-icon name="close" size="md" />
+            </button>
+          </div>
+
+          <form
+            class="flex flex-col gap-xl px-2xl pb-[max(1.5rem,env(safe-area-inset-bottom))]
+                   pt-xl md:pb-2xl"
+            (submit)="onLoginSubmit($event)"
+          >
+            <dga-field
+              [label]="lcfg.emailLabel || 'Email'"
+              controlId="dga-header-login-email"
+              [hint]="lcfg.emailHint || ''"
+              required
+            >
+              <dga-form-control startIcon="mail" [filled]="!!loginEmail()">
+                <input
+                  id="dga-header-login-email"
+                  type="email"
+                  name="email"
+                  autocomplete="username"
+                  required
+                  class="placeholder:text-muted"
+                  [placeholder]="lcfg.emailPlaceholder || 'name@example.gov.sa'"
+                  [value]="loginEmail()"
+                  (input)="loginEmail.set($any($event.target).value)"
+                />
+              </dga-form-control>
+            </dga-field>
+
+            <dga-field
+              [label]="lcfg.passwordLabel || 'Password'"
+              controlId="dga-header-login-password"
+              [hint]="lcfg.passwordHint || ''"
+              required
+            >
+              <dga-form-control [filled]="!!loginPassword()">
+                <input
+                  id="dga-header-login-password"
+                  [type]="showLoginPassword() ? 'text' : 'password'"
+                  name="password"
+                  autocomplete="current-password"
+                  required
+                  class="placeholder:text-muted"
+                  [placeholder]="lcfg.passwordPlaceholder || 'Enter your password'"
+                  [value]="loginPassword()"
+                  (input)="loginPassword.set($any($event.target).value)"
+                />
+                <button
+                  type="button"
+                  dgaEnd
+                  [attr.aria-label]="
+                    showLoginPassword()
+                      ? lcfg.hidePasswordLabel || 'Hide password'
+                      : lcfg.showPasswordLabel || 'Show password'
+                  "
+                  (click)="showLoginPassword.set(!showLoginPassword())"
+                >
+                  <dga-icon [name]="showLoginPassword() ? 'eyeOff' : 'eye'" size="sm" />
+                </button>
+              </dga-form-control>
+            </dga-field>
+
+            @if (lcfg.forgotPasswordHref || lcfg.forgotPasswordLabel) {
+              <a
+                class="self-start text-body-sm font-medium text-fg-primary transition-opacity
+                       hover:opacity-80
+                       focus-visible:outline focus-visible:outline-2
+                       focus-visible:outline-offset-2 focus-visible:outline-focus"
+                [href]="appHref(lcfg.forgotPasswordHref || '#')"
+              >
+                {{ lcfg.forgotPasswordLabel || 'Forgot password?' }}
+              </a>
+            }
+
+            <div class="flex flex-col gap-md pt-xs">
+              <button
+                type="submit"
+                class="inline-flex h-5xl w-full cursor-pointer items-center justify-center gap-sm
+                       rounded-sm bg-primary px-xl text-body-md font-medium text-on-color shadow-sm
+                       transition-opacity hover:opacity-90 disabled:cursor-wait disabled:opacity-60
+                       focus-visible:outline focus-visible:outline-2
+                       focus-visible:outline-offset-2 focus-visible:outline-focus"
+                [disabled]="loginSubmitting()"
+              >
+                @if (loginSubmitting()) {
+                  <span
+                    class="dga-login-spinner size-md rounded-full border-2 border-on-color/30
+                           border-t-on-color"
+                    aria-hidden="true"
+                  ></span>
+                }
+                <span>
+                  {{
+                    loginSubmitting()
+                      ? '\u2026'
+                      : lcfg.submitLabel || 'Login'
+                  }}
+                </span>
+              </button>
+              <button
+                type="button"
+                class="inline-flex h-5xl w-full cursor-pointer items-center justify-center
+                       rounded-sm px-xl text-body-md font-medium text-fg transition-colors
+                       hover:bg-neutral-light
+                       focus-visible:outline focus-visible:outline-2
+                       focus-visible:outline-offset-2 focus-visible:outline-focus"
+                (click)="closeLogin()"
+              >
+                {{ lcfg.cancelLabel || 'Cancel' }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    }
+
+    <!-- Header user menu (authenticated) -->
+    @if (userMenuOpen() && userConfig(); as ucfg) {
+      <div
+        [id]="userPanelId"
+        class="dga-header-util-panel fixed w-[min(22rem,calc(100vw-2rem))] max-md:inset-x-3
+               max-md:bottom-3 max-md:top-auto max-md:w-auto"
+        role="menu"
+        [attr.aria-label]="ucfg.name"
+        [style]="dropdownPanelStyle()"
+      >
+        <div
+          class="dga-panel-enter dga-panel-enter--anchor-end max-h-[min(85svh,36rem)]
+                 overflow-y-auto overscroll-contain rounded-2xl border border-border bg-card
+                 shadow-xl md:max-h-[none] md:overflow-visible md:rounded-md"
+        >
+          <div class="flex items-center gap-lg border-b border-border-subtle px-xl py-lg">
+            <dga-avatar [name]="ucfg.name" [src]="ucfg.avatarSrc" size="md" />
+            <div class="flex min-w-0 flex-1 flex-col gap-xxs">
+              <span class="truncate text-body-md font-semibold text-display">{{ ucfg.name }}</span>
+              @if (ucfg.role) {
+                <span class="truncate text-body-sm text-muted">{{ ucfg.role }}</span>
+              }
+              @if (ucfg.email) {
+                <span class="truncate text-body-sm text-paragraph">{{ ucfg.email }}</span>
+              }
+            </div>
+            <button
+              type="button"
+              class="inline-flex size-5xl shrink-0 cursor-pointer items-center justify-center
+                     rounded-sm text-muted transition-colors hover:bg-neutral-light hover:text-fg
+                     focus-visible:outline focus-visible:outline-2
+                     focus-visible:outline-offset-2 focus-visible:outline-focus"
+              aria-label="Close"
+              (click)="closeUserMenu()"
+            >
+              <dga-icon name="close" size="md" />
+            </button>
+          </div>
+          <div class="flex flex-col gap-xxs p-sm">
+            @for (link of ucfg.links || []; track link.id) {
+              @if (link.id === 'logout') {
+                <div class="my-xs border-t border-border-subtle" role="separator"></div>
+                <button
+                  type="button"
+                  role="menuitem"
+                  class="flex w-full cursor-pointer items-center gap-md rounded-sm px-lg py-sm
+                         text-start text-body-md text-fg-error transition-colors hover:bg-error-light
+                         focus-visible:outline focus-visible:outline-2
+                         focus-visible:outline-offset-[-2px] focus-visible:outline-focus"
+                  (click)="onUserLink(link)"
+                >
+                  @if (link.icon) {
+                    <dga-icon [name]="link.icon" size="md" />
+                  }
+                  <span>{{ link.label }}</span>
+                </button>
+              } @else if (link.href) {
+                <a
+                  role="menuitem"
+                  class="flex w-full cursor-pointer items-center gap-md rounded-sm px-lg py-sm
+                         text-start text-body-md text-fg transition-colors hover:bg-neutral-light
+                         focus-visible:outline focus-visible:outline-2
+                         focus-visible:outline-offset-[-2px] focus-visible:outline-focus"
+                  [href]="appHref(link.href)"
+                  (click)="onUserLink(link)"
+                >
+                  @if (link.icon) {
+                    <dga-icon [name]="link.icon" size="md" />
+                  }
+                  <span>{{ link.label }}</span>
+                </a>
+              } @else {
+                <button
+                  type="button"
+                  role="menuitem"
+                  class="flex w-full cursor-pointer items-center gap-md rounded-sm px-lg py-sm
+                         text-start text-body-md text-fg transition-colors hover:bg-neutral-light
+                         focus-visible:outline focus-visible:outline-2
+                         focus-visible:outline-offset-[-2px] focus-visible:outline-focus"
+                  (click)="onUserLink(link)"
+                >
+                  @if (link.icon) {
+                    <dga-icon [name]="link.icon" size="md" />
+                  }
+                  <span>{{ link.label }}</span>
+                </button>
+              }
+            }
+          </div>
+        </div>
+      </div>
+    }
+      </div>
+    }
+
+    <!-- Mobile navigation: sheet | fullscreen | push -->
+    @if (isPortal() && items().length) {
+      @if (mobileOpen() && mobileNav() !== 'push') {
+        <button
+          type="button"
+          class="fixed inset-0 cursor-default md:hidden"
+          [class]="
+            mobileNav() === 'fullscreen'
+              ? 'z-[35] bg-overlay/60 backdrop-blur-[3px]'
+              : 'z-10 bg-overlay/40 backdrop-blur-[1px]'
+          "
+          tabindex="-1"
+          [attr.aria-label]="menuCloseLabel()"
+          (click)="closeAll()"
+        ></button>
+      }
+
+      <div
+        [id]="collapseId"
+        [class]="mobilePanelClass()"
+        [attr.data-mobile-nav]="mobileNav()"
+        [attr.aria-hidden]="!mobileOpen()"
+        [attr.inert]="mobileOpen() ? null : ''"
+      >
+        @if (mobileNav() === 'fullscreen') {
+          <div
+            class="flex h-(--size-header-portal) shrink-0 items-center justify-between
+                   gap-lg border-b border-border px-xl"
+          >
+            <div class="flex min-w-0 items-center gap-lg">
+              @if (brandLogo()) {
+                <img
+                  class="h-5xl w-auto max-w-[10rem] shrink-0 object-contain"
+                  [src]="brandLogo()"
+                  [alt]="brandLogoAlt()"
+                />
+              } @else {
+                <span class="truncate text-body-md font-semibold text-display">{{
+                  brand() || brandLogoAlt() || navLabel()
+                }}</span>
+              }
+            </div>
+            <button
+              type="button"
+              class="inline-flex size-6xl shrink-0 cursor-pointer items-center justify-center
+                     rounded-md text-fg transition-colors hover:bg-neutral-light
+                     focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
+                     focus-visible:outline-focus"
+              [attr.aria-label]="menuCloseLabel()"
+              (click)="closeAll()"
+            >
+              <dga-icon name="close" size="xl" />
+            </button>
+          </div>
+        }
+
+        @if (mobileNav() === 'sheet') {
+          <div
+            class="flex min-h-(--size-header-portal) shrink-0 items-center justify-end
+                   border-b border-border-subtle px-md
+                   pt-[env(safe-area-inset-top,0px)]"
+          >
+            <button
+              type="button"
+              class="inline-flex size-6xl shrink-0 cursor-pointer items-center justify-center
+                     rounded-md text-fg transition-colors hover:bg-neutral-light
+                     focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
+                     focus-visible:outline-focus"
+              [attr.aria-label]="menuCloseLabel()"
+              (click)="closeAll()"
+            >
+              <dga-icon name="close" size="xl" />
+            </button>
+          </div>
+        }
+
+        @if (mobileNav() === 'push') {
+          <div class="border-b border-border-subtle px-xl py-md">
+            <p class="m-0 text-body-sm font-medium text-muted">{{ navLabel() }}</p>
+          </div>
+        }
+
+        <div
+          class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-xl py-lg
+                 pb-[max(1rem,env(safe-area-inset-bottom))]"
+        >
+          <ul class="m-0 flex list-none flex-col gap-none p-0" role="list">
+            @for (item of items(); track item.label; let i = $index) {
+              <li class="border-b border-border-subtle last:border-b-0">
+                @if (item.dropdown) {
+                  <button
+                    type="button"
+                    [class]="mobileItemClass(!!item.current, openDropdown() === i)"
+                    [attr.aria-expanded]="openDropdown() === i"
+                    (click)="toggleDropdown(i, $event)"
+                  >
+                    <span class="min-w-0 flex-1" [class]="item.current ? 'text-fg-primary' : ''">{{
+                      item.label
+                    }}</span>
+                    <dga-icon
+                      name="chevronDown"
+                      size="md"
+                      class="shrink-0"
+                      [class]="
+                        openDropdown() === i
+                          ? 'rotate-180 text-fg-primary transition-transform duration-200'
+                          : 'text-muted transition-transform duration-200'
+                      "
+                    />
+                  </button>
+
+                  @if (openDropdown() === i) {
+                    <div
+                      class="dga-panel-enter space-y-md border-s-2 border-primary/30 pb-lg ps-lg
+                             ms-sm"
+                    >
+                      @if (item.dropdown.featured; as feat) {
+                        <a
+                          class="flex flex-col gap-sm rounded-md border border-border
+                                 bg-primary-faint p-xl text-start no-underline"
+                          [href]="appHref(feat.href || '#')"
+                          (click)="closeAll()"
+                        >
+                          <span class="text-body-md font-semibold text-display">{{
+                            feat.title
+                          }}</span>
+                          @if (feat.description) {
+                            <span class="text-body-sm text-paragraph">{{
+                              feat.description
+                            }}</span>
+                          }
+                          @if (feat.cta) {
+                            <span class="text-body-sm font-medium text-fg-primary">{{
+                              feat.cta
+                            }}</span>
+                          }
+                        </a>
+                      }
+
+                      @if (item.dropdown.columns?.length) {
+                        @for (col of item.dropdown.columns!; track col.title ?? $index) {
+                          <div class="flex flex-col gap-xs">
+                            @if (col.title) {
+                              <p class="px-xl text-body-sm font-medium text-fg-primary">
+                                {{ col.title }}
+                              </p>
+                            }
+                            <ul class="m-0 flex list-none flex-col gap-none p-0">
+                              @for (link of col.links; track link.label) {
+                                <li>
+                                  <a
+                                    [class]="mobileLink"
+                                    [href]="appHref(link.href || '#')"
+                                    (click)="onNavLinkClick(link, $event); closeAll()"
+                                  >
+                                    <span>{{ link.label }}</span>
+                                    @if (link.description) {
+                                      <span class="text-body-sm text-muted">{{
+                                        link.description
+                                      }}</span>
+                                    }
+                                  </a>
+                                </li>
+                              }
+                            </ul>
+                          </div>
+                        }
+                      } @else {
+                        <ul class="m-0 flex list-none flex-col gap-none p-0">
+                          @for (link of flatLinks(item); track link.label) {
+                            <li>
+                              <a
+                                [class]="mobileLink"
+                                [href]="appHref(link.href || '#')"
+                                (click)="onNavLinkClick(link, $event); closeAll()"
+                              >
+                                <span>{{ link.label }}</span>
+                                @if (link.description) {
+                                  <span class="text-body-sm text-muted">{{
+                                    link.description
+                                  }}</span>
+                                }
+                              </a>
+                            </li>
+                          }
+                        </ul>
+                      }
+                    </div>
+                  }
+                } @else {
+                  <a
+                    [class]="mobileItemClass(!!item.current)"
+                    [attr.aria-current]="item.current ? 'page' : null"
+                    [href]="appHref(item.href || '#')"
+                    (click)="onNavLinkClick(item, $event); closeAll()"
+                  >
+                    @if (item.current) {
+                      <span
+                        class="absolute inset-y-md start-0 w-1 rounded-e-sm bg-primary"
+                        aria-hidden="true"
+                      ></span>
+                    }
+                    <span class="min-w-0 flex-1" [class]="item.current ? 'text-fg-primary' : ''">{{
+                      item.label
+                    }}</span>
+                  </a>
+                }
+              </li>
+            }
+          </ul>
+        </div>
+
+        @if (actions().length) {
+          <div
+            class="flex shrink-0 items-center justify-around gap-sm border-t border-border
+                   bg-nav px-xl py-md pb-[max(0.75rem,env(safe-area-inset-bottom))]"
+          >
+            @for (action of actions(); track action.id) {
+              @if (action.href) {
+                <a
+                  class="relative inline-flex min-h-6xl min-w-6xl cursor-pointer flex-col
+                         items-center justify-center gap-xxs rounded-md px-md text-fg
+                         hover:bg-neutral-light
+                         focus-visible:outline focus-visible:outline-2
+                         focus-visible:outline-offset-2 focus-visible:outline-focus"
+                  [href]="appHref(action.href)"
+                  [attr.aria-label]="action.label"
+                  [attr.data-dga-action]="action.id"
+                  (click)="closeAll()"
+                >
+                  @if (action.icon) {
+                    <dga-icon [name]="action.icon" size="xl" />
+                  }
+                  <span class="max-w-11xl truncate text-body-2xs">{{ action.label }}</span>
+                  @if (action.badge) {
+                    <span [class]="badgeClass()">{{ action.badge }}</span>
+                  }
+                </a>
+              } @else {
+                <button
+                  type="button"
+                  class="relative inline-flex min-h-6xl min-w-6xl cursor-pointer flex-col
+                         items-center justify-center gap-xxs rounded-md px-md text-fg
+                         hover:bg-neutral-light
+                         focus-visible:outline focus-visible:outline-2
+                         focus-visible:outline-offset-2 focus-visible:outline-focus"
+                  [attr.aria-label]="action.label"
+                  [attr.data-dga-action]="action.id"
+                  (click)="onMobileAction(action, $event)"
+                >
+                  @if (action.icon) {
+                    <dga-icon [name]="action.icon" size="xl" />
+                  }
+                  <span class="max-w-11xl truncate text-body-2xs">{{ action.label }}</span>
+                  @if (action.badge) {
+                    <span [class]="badgeClass()">{{ action.badge }}</span>
+                  }
+                </button>
+              }
+            }
+          </div>
+        }
+      </div>
+    }
+  `,host:{role:"banner","[class]":"hostClasses()","[attr.data-appearance]":"appearance()","[attr.data-mobile-nav]":"mobileNav()","[attr.data-mobile-open]":"mobileOpen() || null","(mouseleave)":"onHostLeave($event)"},styles:[`@keyframes dga-fade-in{0%{opacity:0}to{opacity:1}}@keyframes dga-panel-in{0%{opacity:0;transform:translateY(-.625rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dga-chip-in{0%{opacity:0;transform:translateY(.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes dga-notif-row-in{0%{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:translateY(0)}}@keyframes dga-expand-fade{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes dga-spin{to{transform:rotate(360deg)}}@keyframes dga-badge-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}@keyframes dga-push-in{0%{opacity:0;transform:translateY(-.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes dga-sheet-in-ltr{0%{opacity:.85;transform:translate3d(-100%,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes dga-sheet-in-rtl{0%{opacity:.85;transform:translate3d(100%,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes dga-fs-in{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes dga-sheet-in{0%{opacity:0;transform:translateY(1.25rem)}to{opacity:1;transform:translateY(0)}}:host .dga-util-backdrop,.dga-header-util-layer .dga-util-backdrop{animation:dga-fade-in .22s ease both}.dga-header-util-layer{position:fixed;inset:0;z-index:var(--z-index-urgent, 400);pointer-events:none}.dga-header-util-layer>.dga-util-backdrop,.dga-header-util-layer>.dga-header-util-panel{pointer-events:auto}:host .dga-panel-enter,.dga-header-util-layer .dga-panel-enter{animation:dga-panel-in .28s cubic-bezier(.16,1,.3,1) both;transform-origin:top center;will-change:transform,opacity}:host .dga-panel-enter--anchor-end,.dga-header-util-layer .dga-panel-enter--anchor-end{transform-origin:top right}:host-context([dir="rtl"]) .dga-panel-enter--anchor-end,:host([dir="rtl"]) .dga-panel-enter--anchor-end,:host-context([dir="rtl"]) .dga-header-util-layer .dga-panel-enter--anchor-end,[dir=rtl] .dga-header-util-layer .dga-panel-enter--anchor-end{transform-origin:top left}@media(max-width:767px){:host .dga-panel-enter--anchor-end,.dga-header-util-layer .dga-panel-enter--anchor-end{animation-name:dga-sheet-in;transform-origin:bottom center}}:host .dga-search-chip{animation:dga-chip-in .28s cubic-bezier(.16,1,.3,1) both}:host .dga-search-input{-webkit-appearance:none;appearance:none}:host .dga-search-input::-webkit-search-decoration,:host .dga-search-input::-webkit-search-cancel-button,:host .dga-search-input::-webkit-search-results-button,:host .dga-search-input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none;display:none}:host .dga-search-voice.dga-search-voice--active{color:var(--dga-text-primary, #1b8354)!important;background:var(--dga-bg-primary-faint, #f3faf6)!important}:host .dga-notif-item,.dga-header-util-layer .dga-notif-item{animation:dga-notif-row-in .26s cubic-bezier(.16,1,.3,1) both}:host .dga-notif-actions,.dga-header-util-layer .dga-notif-actions{animation:dga-expand-fade .2s ease both}:host .dga-login-spinner,.dga-header-util-layer .dga-login-spinner{animation:dga-spin .7s linear infinite}:host .dga-action-badge{animation:dga-badge-pulse 1.8s ease-in-out infinite;transform-origin:center}@media(prefers-reduced-motion:reduce){:host .dga-util-backdrop,:host .dga-panel-enter,:host .dga-search-chip,:host .dga-notif-item,:host .dga-notif-actions,.dga-header-util-layer .dga-util-backdrop,.dga-header-util-layer .dga-panel-enter{animation-duration:.01ms!important;animation-delay:0ms!important}}:host .dga-burger__box{position:relative;display:block;width:1.375rem;height:1rem}:host .dga-burger__line{position:absolute;inset-inline:0;height:2px;border-radius:1px;background:currentColor;transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .16s ease,top .22s cubic-bezier(.4,0,.2,1)}:host .dga-burger__line:nth-child(1){top:0}:host .dga-burger__line:nth-child(2){top:calc(50% - 1px)}:host .dga-burger__line:nth-child(3){top:calc(100% - 2px)}:host .dga-burger--open{background:var(--color-neutral-light, #f3f4f6)}:host .dga-burger--hidden{visibility:hidden;pointer-events:none}:host .dga-burger--open .dga-burger__line:nth-child(1){top:calc(50% - 1px);transform:rotate(45deg)}:host .dga-burger--open .dga-burger__line:nth-child(2){opacity:0;transform:scaleX(.4)}:host .dga-burger--open .dga-burger__line:nth-child(3){top:calc(50% - 1px);transform:rotate(-45deg)}:host .dga-mobile-nav-closed{display:none}:host .dga-mobile-nav-open{display:flex}:host .dga-mobile-push-open{animation:dga-push-in .24s cubic-bezier(.4,0,.2,1) forwards}:host .dga-mobile-sheet-open{animation:dga-sheet-in-rtl .28s cubic-bezier(.4,0,.2,1) forwards}:host-context([dir="rtl"]) .dga-mobile-sheet-open{animation:dga-sheet-in-ltr .28s cubic-bezier(.4,0,.2,1) forwards}:host .dga-mobile-fs-open{animation:dga-fs-in .24s cubic-bezier(.4,0,.2,1) forwards}@media(prefers-reduced-motion:reduce){:host .dga-action-badge,:host .dga-mobile-push-open,:host .dga-mobile-sheet-open,:host .dga-mobile-fs-open,:host-context([dir="rtl"]) .dga-mobile-sheet-open,:host .dga-burger__line{animation:none;transition:none}}
+`]}]}],ctorParameters:()=>[],propDecorators:{brand:[{type:a.Input,args:[{isSignal:!0,alias:"brand",required:!1}]}],brandSlogan:[{type:a.Input,args:[{isSignal:!0,alias:"brandSlogan",required:!1}]}],brandLogo:[{type:a.Input,args:[{isSignal:!0,alias:"brandLogo",required:!1}]}],brandLogoAlt:[{type:a.Input,args:[{isSignal:!0,alias:"brandLogoAlt",required:!1}]}],brandPlaceholder:[{type:a.Input,args:[{isSignal:!0,alias:"brandPlaceholder",required:!1}]}],brandHref:[{type:a.Input,args:[{isSignal:!0,alias:"brandHref",required:!1}]}],navLabel:[{type:a.Input,args:[{isSignal:!0,alias:"navLabel",required:!1}]}],menuToggleLabel:[{type:a.Input,args:[{isSignal:!0,alias:"menuToggleLabel",required:!1}]}],menuCloseLabel:[{type:a.Input,args:[{isSignal:!0,alias:"menuCloseLabel",required:!1}]}],appearance:[{type:a.Input,args:[{isSignal:!0,alias:"appearance",required:!1}]}],mobileNav:[{type:a.Input,args:[{isSignal:!0,alias:"mobileNav",required:!1}]}],sticky:[{type:a.Input,args:[{isSignal:!0,alias:"sticky",required:!1}]}],items:[{type:a.Input,args:[{isSignal:!0,alias:"items",required:!1}]}],actions:[{type:a.Input,args:[{isSignal:!0,alias:"actions",required:!1}]}],search:[{type:a.Input,args:[{isSignal:!0,alias:"search",required:!1}]}],searchQuery:[{type:a.Input,args:[{isSignal:!0,alias:"searchQuery",required:!1}]},{type:a.Output,args:["searchQueryChange"]}],notifications:[{type:a.Input,args:[{isSignal:!0,alias:"notifications",required:!1}]}],login:[{type:a.Input,args:[{isSignal:!0,alias:"login",required:!1}]}],user:[{type:a.Input,args:[{isSignal:!0,alias:"user",required:!1}]}],authenticated:[{type:a.Input,args:[{isSignal:!0,alias:"authenticated",required:!1}]},{type:a.Output,args:["authenticatedChange"]}],actionClick:[{type:a.Output,args:["actionClick"]}],searchSubmit:[{type:a.Output,args:["searchSubmit"]}],searchSuggestionSelect:[{type:a.Output,args:["searchSuggestionSelect"]}],searchVoice:[{type:a.Output,args:["searchVoice"]}],notificationAction:[{type:a.Output,args:["notificationAction"]}],loginSubmit:[{type:a.Output,args:["loginSubmit"]}],logout:[{type:a.Output,args:["logout"]}],userLinkClick:[{type:a.Output,args:["userLinkClick"]}],navLinkClick:[{type:a.Output,args:["navLinkClick"]}],searchInputRef:[{type:a.ViewChild,args:["searchInput",{isSignal:!0}]}],utilLayerRef:[{type:a.ViewChild,args:["utilLayer",{isSignal:!0}]}],onCloseHeaderOverlays:[{type:m,args:["document:dga-close-header-overlays"]}],onKey:[{type:m,args:["document:keydown",["$event"]]}],onScroll:[{type:m,args:["window:scroll"]}],onResize:[{type:m,args:["window:resize"]}],onDocClick:[{type:m,args:["document:click",["$event"]]}]}});export{g as DgaHeader};