@a.nemreen/dga-ui 0.3.1 → 0.3.3

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

@@ -0,0 +1,2615 @@
+import*as i from"@angular/core";import{Directive as y,inject as g,ElementRef as B,input as n,booleanAttribute as I,model as w,output as u,signal as l,contentChild as M,Injector as Y,DOCUMENT as Q,DestroyRef as W,viewChild as P,computed as s,effect as L,untracked as z,afterNextRender as S,HostListener as b,ChangeDetectionStrategy as K,Component as G}from"@angular/core";import{APP_BASE_HREF as Z,PlatformLocation as X}from"@angular/common";import{dgaSafeHref as O,dgaCx as c,DgaAvatar as A,DgaBadge as E,DgaField as H,DgaFormControl as F,DgaFormEnd as $,DgaIcon as R,DgaIconBadge as j,DgaModal as q,DgaTooltip as V}from"@a.nemreen/dga-ui";function J(k,e="/"){if(typeof window>"u")return!1;const t=O(k.trim(),e);if(!t)return!1;try{const o=new URL(t,window.location.origin);return o.protocol!=="http:"&&o.protocol!=="https:"||o.origin!==window.location.origin?!1:(window.location.assign(`${o.pathname}${o.search}${o.hash}`),!0)}catch{return!1}}class h{static ɵfac=i.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:h,deps:[],target:i.ɵɵFactoryTarget.Directive});static ɵdir=i.ɵɵngDeclareDirective({minVersion:"14.0.0",version:"22.0.7",type:h,isStandalone:!0,selector:"[dgaHeaderLoginBeforeForm]",ngImport:i})}i.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:h,decorators:[{type:y,args:[{selector:"[dgaHeaderLoginBeforeForm]",standalone:!0}]}]});class x{static ɵfac=i.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:x,deps:[],target:i.ɵɵFactoryTarget.Directive});static ɵdir=i.ɵɵngDeclareDirective({minVersion:"14.0.0",version:"22.0.7",type:x,isStandalone:!0,selector:"[dgaHeaderLoginAfterFields]",ngImport:i})}i.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:x,decorators:[{type:y,args:[{selector:"[dgaHeaderLoginAfterFields]",standalone:!0}]}]});class p{static ɵfac=i.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:p,deps:[],target:i.ɵɵFactoryTarget.Directive});static ɵdir=i.ɵɵngDeclareDirective({minVersion:"14.0.0",version:"22.0.7",type:p,isStandalone:!0,selector:"[dgaHeaderLoginFooter]",ngImport:i})}i.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:p,decorators:[{type:y,args:[{selector:"[dgaHeaderLoginFooter]",standalone:!0}]}]});class m{static ɵfac=i.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:m,deps:[],target:i.ɵɵFactoryTarget.Directive});static ɵdir=i.ɵɵngDeclareDirective({minVersion:"14.0.0",version:"22.0.7",type:m,isStandalone:!0,selector:"[dgaHeaderLoginForm]",ngImport:i})}i.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:m,decorators:[{type:y,args:[{selector:"[dgaHeaderLoginForm]",standalone:!0}]}]});function ee(k,e){const t=k.trim();if(t.endsWith("rem")){const o=Number.parseFloat(t);return Number.isFinite(o)?o*16:e}if(t.endsWith("px")){const o=Number.parseFloat(t);return Number.isFinite(o)?o:e}return e}const T="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",te="pointer-events-none absolute start-xl end-xl bottom-0 h-[5px] rounded-full",ie="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",oe="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",ae="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",ne="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 v{host=g(B);baseHref=g(Z,{optional:!0})??g(X).getBaseHrefFromDOM()??"/";closeTimer=null;dropdownSyncFrame=null;lastDropdownStyleKey="";collapseId="dga-nav-collapse";dropLink=ie;dropTile=oe;mobileLink=ne;brand=n("",...ngDevMode?[{debugName:"brand"}]:[]);brandSlogan=n("",...ngDevMode?[{debugName:"brandSlogan"}]:[]);brandLogo=n("",...ngDevMode?[{debugName:"brandLogo"}]:[]);brandLogoAlt=n("شعار الجهة",...ngDevMode?[{debugName:"brandLogoAlt"}]:[]);brandPlaceholder=n(!1,{...ngDevMode?{debugName:"brandPlaceholder"}:{},transform:I});brandHref=n("#",...ngDevMode?[{debugName:"brandHref"}]:[]);navLabel=n("التنقل الرئيسي",...ngDevMode?[{debugName:"navLabel"}]:[]);menuToggleLabel=n("فتح قائمة التنقل",...ngDevMode?[{debugName:"menuToggleLabel"}]:[]);menuCloseLabel=n("إغلاق قائمة التنقل",...ngDevMode?[{debugName:"menuCloseLabel"}]:[]);appearance=n("default",...ngDevMode?[{debugName:"appearance"}]:[]);mobileNav=n("sheet",...ngDevMode?[{debugName:"mobileNav"}]:[]);sticky=n(!0,{...ngDevMode?{debugName:"sticky"}:{},transform:I});items=n([],...ngDevMode?[{debugName:"items"}]:[]);actions=n([],...ngDevMode?[{debugName:"actions"}]:[]);search=n(null,...ngDevMode?[{debugName:"search"}]:[]);searchQuery=w("",...ngDevMode?[{debugName:"searchQuery"}]:[]);notifications=n(null,...ngDevMode?[{debugName:"notifications"}]:[]);login=n(null,...ngDevMode?[{debugName:"login"}]:[]);user=n(null,...ngDevMode?[{debugName:"user"}]:[]);authenticated=w(!1,...ngDevMode?[{debugName:"authenticated"}]:[]);loginSubmitting=w(!1,...ngDevMode?[{debugName:"loginSubmitting"}]:[]);loginError=w("",...ngDevMode?[{debugName:"loginError"}]:[]);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"}]:[]);loginEmailError=l("",...ngDevMode?[{debugName:"loginEmailError"}]:[]);loginPasswordError=l("",...ngDevMode?[{debugName:"loginPasswordError"}]:[]);dropdownPanelStyle=l({},...ngDevMode?[{debugName:"dropdownPanelStyle"}]:[]);customLoginForm=M(m,...ngDevMode?[{debugName:"customLoginForm"}]:[]);customLoginFooter=M(p,...ngDevMode?[{debugName:"customLoginFooter"}]:[]);dismissedNotificationIds=l(new Set,...ngDevMode?[{debugName:"dismissedNotificationIds"}]:[]);readNotificationIds=l(new Set,...ngDevMode?[{debugName:"readNotificationIds"}]:[]);dropdownTrigger=null;dropdownActionId=null;injector=g(Y);doc=g(Q);destroyRef=g(W);searchInputRef=P("searchInput",...ngDevMode?[{debugName:"searchInputRef"}]:[]);utilLayerRef=P("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=s(()=>this.appearance()==="portal",...ngDevMode?[{debugName:"isPortal"}]:[]);appHref(e){return O(e,this.baseHref)}searchConfig=s(()=>this.search(),...ngDevMode?[{debugName:"searchConfig"}]:[]);searchActionId=s(()=>this.search()?.actionId??"search",...ngDevMode?[{debugName:"searchActionId"}]:[]);notificationsConfig=s(()=>this.notifications(),...ngDevMode?[{debugName:"notificationsConfig"}]:[]);notificationsActionId=s(()=>this.notifications()?.actionId??"notifications",...ngDevMode?[{debugName:"notificationsActionId"}]:[]);loginConfig=s(()=>this.login(),...ngDevMode?[{debugName:"loginConfig"}]:[]);loginActionId=s(()=>this.login()?.actionId??"login",...ngDevMode?[{debugName:"loginActionId"}]:[]);userConfig=s(()=>this.user(),...ngDevMode?[{debugName:"userConfig"}]:[]);hasCustomLoginForm=s(()=>!!this.customLoginForm(),...ngDevMode?[{debugName:"hasCustomLoginForm"}]:[]);hasCustomLoginFooter=s(()=>!!this.customLoginFooter(),...ngDevMode?[{debugName:"hasCustomLoginFooter"}]:[]);utilityOverlayOpen=s(()=>this.notificationsOpen()||this.loginOpen()||this.userMenuOpen(),...ngDevMode?[{debugName:"utilityOverlayOpen"}]:[]);visibleNotifications=s(()=>{const e=this.notifications()?.items??[],t=this.dismissedNotificationIds(),o=this.readNotificationIds();return e.filter(a=>!t.has(a.id)).map(a=>({...a,read:!!a.read||o.has(a.id)}))},...ngDevMode?[{debugName:"visibleNotifications"}]:[]);unreadNotificationCount=s(()=>this.visibleNotifications().filter(e=>!e.read).length,...ngDevMode?[{debugName:"unreadNotificationCount"}]:[]);constructor(){this.destroyRef.onDestroy(()=>this.removePortaledUtilLayer()),L(()=>{this.mobileNav(),z(()=>{this.mobileOpen()&&this.closeAll()})}),L(()=>{if(!this.utilityOverlayOpen())return;this.utilLayerRef()?.nativeElement&&this.portalUtilLayer(),S(()=>this.portalUtilLayer(),{injector:this.injector})}),L(()=>{this.authenticated()&&this.loginOpen()&&z(()=>this.closeLogin())})}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=s(()=>{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 o=this.resolveVariant(t);return o==="menu"?null:{index:e,item:t,variant:o}},...ngDevMode?[{debugName:"activeWideDropdown"}]:[]);hostClasses=s(()=>c("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=s(()=>c("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=s(()=>c("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=s(()=>c("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 c("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(o=>o.links)??[]:[]}columnsGridClass(e){return c("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 c("grid w-full gap-3xl",e==="featured"&&t&&"lg:grid-cols-[minmax(0,1fr)_minmax(14rem,18rem)]")}navItemClass(e,t=!1){return c(T,"justify-center",e&&"text-fg-primary",t&&"bg-neutral-light")}mobileItemClass(e,t=!1){return c(ae,e&&"bg-primary-faint",t&&"bg-neutral-light")}indicatorClass(e){return c(te,e?"bg-primary group-hover:bg-primary":"bg-transparent group-hover:bg-fg-disabled")}actionClass(e){return c(T,"relative justify-center")}badgeClass(){return c("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(o=>o===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 o=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(o),this.actionClick.emit(e);return}if(this.isLoginAction(e)){this.closeSearch(),this.closeNotifications(),this.authenticated()?(this.closeLogin(),this.toggleUserMenu(o)):(this.closeUserMenu(),this.toggleLogin(o)),this.actionClick.emit(e);return}this.closeSearch(),this.closeNotifications(),this.closeLogin(),this.closeUserMenu(),this.actionClick.emit(e)}onMobileAction(e,t){const o=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(o),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(o)):(this.closeUserMenu(),this.toggleLogin(o)),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(){S(()=>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.loginError.set(""),this.loginEmailError.set(""),this.loginPasswordError.set(""),this.loginEmail.set(""),this.loginPassword.set(""),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()}onLoginEmailInput(e){this.loginEmail.set(e),this.loginEmailError()&&this.loginEmailError.set("")}onLoginPasswordInput(e){this.loginPassword.set(e),this.loginPasswordError()&&this.loginPasswordError.set("")}showLoginRegisterRow(e){return!!(e.registerPrompt||e.registerLabel||e.registerHref)}loginPanelOuterStyle(){const e=this.dropdownPanelStyle();if(this.isMobileViewport())return e;const t=this.loginConfig()?.panelWidth??"24rem";return{...e,width:`min(${t}, calc(100vw - 2rem))`}}loginPanelInnerStyle(){return this.isMobileViewport()?{maxHeight:`min(90svh, ${this.loginConfig()?.maxHeight??"44rem"})`}:{}}onLoginSubmit(e){e.preventDefault();const t=this.loginConfig(),o=this.loginEmail().trim(),a=this.loginPassword();this.loginEmailError.set(""),this.loginPasswordError.set(""),this.loginError.set("");let r=!1;o?/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(o)||(this.loginEmailError.set(t?.emailInvalidMessage??"Enter a valid email address"),r=!0):(this.loginEmailError.set(t?.emailRequiredMessage??"Email is required"),r=!0),a||(this.loginPasswordError.set(t?.passwordRequiredMessage??"Password is required"),r=!0),!r&&(this.loginSubmitting.set(!0),this.loginSubmit.emit({email:o,password:a}))}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(o=>new Set([...o,e.id])),t==="dismiss"&&(this.dismissedNotificationIds.update(o=>new Set([...o,e.id])),this.expandedNotificationId.update(o=>o===e.id?null:o)),t==="view"&&e.href&&J(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 o=this.search();if(o?.resultsHref){const a=o.queryParam??"q",r=new URL(o.resultsHref,typeof window<"u"?window.location.origin:"http://localhost");t?r.searchParams.set(a,t):r.searchParams.delete(a),typeof window<"u"&&window.location.assign(`${r.pathname}${r.search}${r.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 o=new t;o.lang=typeof document<"u"&&document.documentElement.lang?document.documentElement.lang:"ar-SA",o.interimResults=!1,o.maxAlternatives=1,this.voiceListening.set(!0),o.onresult=a=>{const r=a.results[0]?.[0]?.transcript?.trim();r&&this.searchQuery.set(r),this.voiceListening.set(!1)},o.onerror=()=>this.voiceListening.set(!1),o.onend=()=>this.voiceListening.set(!1),this.speechRecognition=o,o.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,S(()=>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 o of Array.from(t)){const a=o;if(a.getClientRects().length>0)return a}return t[0]??null}activeUtilityPanelWidthPx(){if(typeof window>"u")return 448;const e=window.innerWidth-32;if(this.loginOpen()){const t=this.loginConfig()?.panelWidth??"24rem";return Math.min(ee(t,384),e)}return this.userMenuOpen()?Math.min(352,e):(this.notificationsOpen(),Math.min(448,e))}syncDropdownPanel(e){if(typeof window>"u")return;if(this.isMobileViewport()){const d={top:"auto",bottom:"max(0.75rem, env(safe-area-inset-bottom, 0px))",left:"0.75rem",right:"0.75rem",width:"auto",maxWidth:"none"},D=`sheet|${d.bottom}`;if(D===this.lastDropdownStyleKey)return;this.lastDropdownStyleKey=D,this.dropdownPanelStyle.set(d);return}const t=e??this.dropdownTrigger??(this.dropdownActionId?this.findActionTrigger(this.dropdownActionId):null);if(!t)return;this.dropdownTrigger=t;const o=t.getBoundingClientRect();if(o.width<1&&o.height<1)return;const a=getComputedStyle(this.host.nativeElement).direction,U=(typeof document<"u"?document.documentElement.getAttribute("dir"):null)==="rtl"||a==="rtl",_=8,N=this.activeUtilityPanelWidthPx(),f={top:`${Math.round(o.bottom+_)}px`};if(U){let d=Math.round(o.left);d=Math.max(16,Math.min(d,window.innerWidth-N-16)),f.left=`${d}px`,f.right="auto"}else{let d=Math.round(window.innerWidth-o.right);d=Math.max(16,Math.min(d,window.innerWidth-N-16)),f.right=`${d}px`,f.left="auto"}const C=`${f.top}|${f.left??""}|${f.right??""}`;C!==this.lastDropdownStyleKey&&(this.lastDropdownStyleKey=C,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 ɵfac=i.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:v,deps:[],target:i.ɵɵFactoryTarget.Component});static ɵcmp=i.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.0.7",type:v,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},loginSubmitting:{classPropertyName:"loginSubmitting",publicName:"loginSubmitting",isSignal:!0,isRequired:!1,transformFunction:null},loginError:{classPropertyName:"loginError",publicName:"loginError",isSignal:!0,isRequired:!1,transformFunction:null}},outputs:{searchQuery:"searchQueryChange",authenticated:"authenticatedChange",loginSubmitting:"loginSubmittingChange",loginError:"loginErrorChange",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"}},queries:[{propertyName:"customLoginForm",first:!0,predicate:m,descendants:!0,isSignal:!0},{propertyName:"customLoginFooter",first:!0,predicate:p,descendants:!0,isSignal:!0}],viewQueries:[{propertyName:"searchInputRef",first:!0,predicate:["searchInput"],descendants:!0,isSignal:!0},{propertyName:"utilLayerRef",first:!0,predicate:["utilLayer"],descendants:!0,isSignal:!0}],ngImport:i,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 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]="loginPanelOuterStyle()"
+      >
+        <div
+          class="dga-panel-enter dga-panel-enter--anchor-end overflow-y-auto overscroll-contain
+                 rounded-2xl border border-border bg-card shadow-xl md:overflow-visible
+                 md:rounded-md"
+          [style]="loginPanelInnerStyle()"
+        >
+          <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>
+
+          <ng-content select="[dgaHeaderLoginBeforeForm]" />
+
+          @if (hasCustomLoginForm()) {
+            <div
+              class="px-2xl pb-[max(1.5rem,env(safe-area-inset-bottom))] pt-xl md:pb-2xl"
+            >
+              <ng-content select="[dgaHeaderLoginForm]" />
+            </div>
+          } @else {
+            <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]="loginEmailError() ? '' : lcfg.emailHint || ''"
+                [error]="loginEmailError()"
+                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)="onLoginEmailInput($any($event.target).value)"
+                  />
+                </dga-form-control>
+              </dga-field>
+
+              <dga-field
+                [label]="lcfg.passwordLabel || 'Password'"
+                controlId="dga-header-login-password"
+                [hint]="loginPasswordError() ? '' : lcfg.passwordHint || ''"
+                [error]="loginPasswordError()"
+                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)="onLoginPasswordInput($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>
+              }
+
+              <ng-content select="[dgaHeaderLoginAfterFields]" />
+
+              @if (loginError() || lcfg.errorMessage) {
+                <p class="m-0 text-body-sm text-fg-error" role="alert">
+                  {{ loginError() || lcfg.errorMessage }}
+                </p>
+              }
+
+              <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()
+                        ? lcfg.submittingLabel || '…'
+                        : lcfg.submitLabel || 'Login'
+                    }}
+                  </span>
+                </button>
+                @if (lcfg.showCancel !== false) {
+                  <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>
+          }
+
+          @if (hasCustomLoginFooter()) {
+            <div
+              class="border-t border-border-subtle px-2xl py-xl pb-[max(1.5rem,env(safe-area-inset-bottom))]"
+            >
+              <ng-content select="[dgaHeaderLoginFooter]" />
+            </div>
+          } @else if (showLoginRegisterRow(lcfg) || (lcfg.footerLinks?.length ?? 0) > 0) {
+            <div
+              class="flex flex-col gap-md border-t border-border-subtle px-2xl py-xl
+                     pb-[max(1.5rem,env(safe-area-inset-bottom))]"
+            >
+              @if (showLoginRegisterRow(lcfg)) {
+                <p class="m-0 text-center text-body-sm text-muted">
+                  {{ lcfg.registerPrompt || "Don't have an account?" }}
+                  @if (lcfg.registerLabel || lcfg.registerHref) {
+                    <a
+                      class="ms-xs 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.registerHref || '#')"
+                    >
+                      {{ lcfg.registerLabel || 'Sign up' }}
+                    </a>
+                  }
+                </p>
+              }
+              @if (lcfg.footerLinks?.length) {
+                <div class="flex flex-col gap-xs">
+                  @for (link of lcfg.footerLinks; track link.id ?? link.label) {
+                    <a
+                      class="text-center 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(link.href || '#')"
+                    >
+                      {{ link.label }}
+                    </a>
+                  }
+                </div>
+              }
+            </div>
+          }
+        </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}}\n"],dependencies:[{kind:"component",type:A,selector:"dga-avatar",inputs:["src","name","size","alt"]},{kind:"component",type:E,selector:"dga-badge",inputs:["variant","size"]},{kind:"component",type:H,selector:"dga-field",inputs:["label","labelHint","hint","error","status","statusMessage","controlId","required"]},{kind:"component",type:F,selector:"dga-form-control",inputs:["size","status","disabled","filled","startIcon","endIcon"]},{kind:"directive",type:$,selector:"[dgaEnd]"},{kind:"component",type:R,selector:"dga-icon",inputs:["name","glyph","size","tone","label"]},{kind:"component",type:j,selector:"dga-icon-badge",inputs:["size","appearance"]},{kind:"component",type:q,selector:"dga-modal",inputs:["open","title","description","size","animation","closeLabel","closeOnBackdrop","closeOnEscape","showClose","scrollable","centered"],outputs:["openChange","closed","opened"]},{kind:"component",type:V,selector:"dga-tooltip",inputs:["text","title","placement","variant","showIcon","disabled","showDelay","hideDelay","dismissMs"]}],changeDetection:i.ChangeDetectionStrategy.OnPush})}i.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.0.7",ngImport:i,type:v,decorators:[{type:G,args:[{selector:"dga-header",standalone:!0,changeDetection:K.OnPush,imports:[A,E,H,F,$,R,j,q,V],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 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]="loginPanelOuterStyle()"
+      >
+        <div
+          class="dga-panel-enter dga-panel-enter--anchor-end overflow-y-auto overscroll-contain
+                 rounded-2xl border border-border bg-card shadow-xl md:overflow-visible
+                 md:rounded-md"
+          [style]="loginPanelInnerStyle()"
+        >
+          <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>
+
+          <ng-content select="[dgaHeaderLoginBeforeForm]" />
+
+          @if (hasCustomLoginForm()) {
+            <div
+              class="px-2xl pb-[max(1.5rem,env(safe-area-inset-bottom))] pt-xl md:pb-2xl"
+            >
+              <ng-content select="[dgaHeaderLoginForm]" />
+            </div>
+          } @else {
+            <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]="loginEmailError() ? '' : lcfg.emailHint || ''"
+                [error]="loginEmailError()"
+                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)="onLoginEmailInput($any($event.target).value)"
+                  />
+                </dga-form-control>
+              </dga-field>
+
+              <dga-field
+                [label]="lcfg.passwordLabel || 'Password'"
+                controlId="dga-header-login-password"
+                [hint]="loginPasswordError() ? '' : lcfg.passwordHint || ''"
+                [error]="loginPasswordError()"
+                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)="onLoginPasswordInput($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>
+              }
+
+              <ng-content select="[dgaHeaderLoginAfterFields]" />
+
+              @if (loginError() || lcfg.errorMessage) {
+                <p class="m-0 text-body-sm text-fg-error" role="alert">
+                  {{ loginError() || lcfg.errorMessage }}
+                </p>
+              }
+
+              <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()
+                        ? lcfg.submittingLabel || '…'
+                        : lcfg.submitLabel || 'Login'
+                    }}
+                  </span>
+                </button>
+                @if (lcfg.showCancel !== false) {
+                  <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>
+          }
+
+          @if (hasCustomLoginFooter()) {
+            <div
+              class="border-t border-border-subtle px-2xl py-xl pb-[max(1.5rem,env(safe-area-inset-bottom))]"
+            >
+              <ng-content select="[dgaHeaderLoginFooter]" />
+            </div>
+          } @else if (showLoginRegisterRow(lcfg) || (lcfg.footerLinks?.length ?? 0) > 0) {
+            <div
+              class="flex flex-col gap-md border-t border-border-subtle px-2xl py-xl
+                     pb-[max(1.5rem,env(safe-area-inset-bottom))]"
+            >
+              @if (showLoginRegisterRow(lcfg)) {
+                <p class="m-0 text-center text-body-sm text-muted">
+                  {{ lcfg.registerPrompt || "Don't have an account?" }}
+                  @if (lcfg.registerLabel || lcfg.registerHref) {
+                    <a
+                      class="ms-xs 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.registerHref || '#')"
+                    >
+                      {{ lcfg.registerLabel || 'Sign up' }}
+                    </a>
+                  }
+                </p>
+              }
+              @if (lcfg.footerLinks?.length) {
+                <div class="flex flex-col gap-xs">
+                  @for (link of lcfg.footerLinks; track link.id ?? link.label) {
+                    <a
+                      class="text-center 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(link.href || '#')"
+                    >
+                      {{ link.label }}
+                    </a>
+                  }
+                </div>
+              }
+            </div>
+          }
+        </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}}\n"]}]}],ctorParameters:()=>[],propDecorators:{brand:[{type:i.Input,args:[{isSignal:!0,alias:"brand",required:!1}]}],brandSlogan:[{type:i.Input,args:[{isSignal:!0,alias:"brandSlogan",required:!1}]}],brandLogo:[{type:i.Input,args:[{isSignal:!0,alias:"brandLogo",required:!1}]}],brandLogoAlt:[{type:i.Input,args:[{isSignal:!0,alias:"brandLogoAlt",required:!1}]}],brandPlaceholder:[{type:i.Input,args:[{isSignal:!0,alias:"brandPlaceholder",required:!1}]}],brandHref:[{type:i.Input,args:[{isSignal:!0,alias:"brandHref",required:!1}]}],navLabel:[{type:i.Input,args:[{isSignal:!0,alias:"navLabel",required:!1}]}],menuToggleLabel:[{type:i.Input,args:[{isSignal:!0,alias:"menuToggleLabel",required:!1}]}],menuCloseLabel:[{type:i.Input,args:[{isSignal:!0,alias:"menuCloseLabel",required:!1}]}],appearance:[{type:i.Input,args:[{isSignal:!0,alias:"appearance",required:!1}]}],mobileNav:[{type:i.Input,args:[{isSignal:!0,alias:"mobileNav",required:!1}]}],sticky:[{type:i.Input,args:[{isSignal:!0,alias:"sticky",required:!1}]}],items:[{type:i.Input,args:[{isSignal:!0,alias:"items",required:!1}]}],actions:[{type:i.Input,args:[{isSignal:!0,alias:"actions",required:!1}]}],search:[{type:i.Input,args:[{isSignal:!0,alias:"search",required:!1}]}],searchQuery:[{type:i.Input,args:[{isSignal:!0,alias:"searchQuery",required:!1}]},{type:i.Output,args:["searchQueryChange"]}],notifications:[{type:i.Input,args:[{isSignal:!0,alias:"notifications",required:!1}]}],login:[{type:i.Input,args:[{isSignal:!0,alias:"login",required:!1}]}],user:[{type:i.Input,args:[{isSignal:!0,alias:"user",required:!1}]}],authenticated:[{type:i.Input,args:[{isSignal:!0,alias:"authenticated",required:!1}]},{type:i.Output,args:["authenticatedChange"]}],loginSubmitting:[{type:i.Input,args:[{isSignal:!0,alias:"loginSubmitting",required:!1}]},{type:i.Output,args:["loginSubmittingChange"]}],loginError:[{type:i.Input,args:[{isSignal:!0,alias:"loginError",required:!1}]},{type:i.Output,args:["loginErrorChange"]}],actionClick:[{type:i.Output,args:["actionClick"]}],searchSubmit:[{type:i.Output,args:["searchSubmit"]}],searchSuggestionSelect:[{type:i.Output,args:["searchSuggestionSelect"]}],searchVoice:[{type:i.Output,args:["searchVoice"]}],notificationAction:[{type:i.Output,args:["notificationAction"]}],loginSubmit:[{type:i.Output,args:["loginSubmit"]}],logout:[{type:i.Output,args:["logout"]}],userLinkClick:[{type:i.Output,args:["userLinkClick"]}],navLinkClick:[{type:i.Output,args:["navLinkClick"]}],customLoginForm:[{type:i.ContentChild,args:[i.forwardRef(()=>m),{isSignal:!0}]}],customLoginFooter:[{type:i.ContentChild,args:[i.forwardRef(()=>p),{isSignal:!0}]}],searchInputRef:[{type:i.ViewChild,args:["searchInput",{isSignal:!0}]}],utilLayerRef:[{type:i.ViewChild,args:["utilLayer",{isSignal:!0}]}],onCloseHeaderOverlays:[{type:b,args:["document:dga-close-header-overlays"]}],onKey:[{type:b,args:["document:keydown",["$event"]]}],onScroll:[{type:b,args:["window:scroll"]}],onResize:[{type:b,args:["window:resize"]}],onDocClick:[{type:b,args:["document:click",["$event"]]}]}});export{v as DgaHeader,x as DgaHeaderLoginAfterFields,h as DgaHeaderLoginBeforeForm,p as DgaHeaderLoginFooter,m as DgaHeaderLoginForm};