@xplortech/apollo-core 3.3.0 → 3.4.0

package/dist/components/xpl-top-nav.js

@@ -1 +1 @@
-import{p as t,H as s,d as e,h as i,c as n,t as o}from"./p-BqhTjJWq.js";import{h as a}from"./p-DkqlawVY.js";import{i as l}from"./p-Dqb1pIRo.js";import{d as r}from"./p-CfZI7bBe.js";import{d as h}from"./p-Bh-U2qmp.js";import{d as p}from"./p-Dl__XgUD.js";import{d as c}from"./p-n-yq7lf4.js";const d=[".xpl-top-nav__brand-logo-slot",".xpl-top-nav__brand-bar"],v=".xpl-top-nav__user-menu-panel",u=[v,".xpl-top-nav__user-menu-stash"],b=[".xpl-top-nav__user-popover",".xpl-top-nav__user-menu-stash",".xpl-top-nav__right-user"],m=[v],x=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.brandClick=e(this,"brandClick",7),this.navOpen=e(this,"navOpen",7),this.slotProjectionDirty=!1,this.userPopoverDrawerSyncHost=null,this.brandLogoSlotPresent=!1,this.open=!1,this.slotProjectionNonce=0,this.userMenuSlotPresent=!1,this.userMenuTriggerSlotPresent=!1,this.focusNavControlAfterClose=()=>{void 0!==this.navControlFocusTimeoutId&&clearTimeout(this.navControlFocusTimeoutId),this.navControlFocusTimeoutId=setTimeout((()=>{this.navControlFocusTimeoutId=void 0,this.el.querySelector(".xpl-top-nav__nav-control")?.focus()}),0)},this.handleUserPopoverIsOpenChange=t=>{const{detail:s}=t;!0===s&&this.closeMobileDrawerWhenAccountMenuOpens()},this.onBrandNavItemClick=t=>{null==this.brandHref&&this.brandClick.emit(t.detail)},this.onDocKeyDownEscape=t=>{this.navControl&&this.open&&"Escape"===t.key&&(this.anyDescendantPopoverIsOpen()||this.el.querySelector("xpl-top-nav-item.xpl-top-nav-item--dropdown-open")||(t.preventDefault(),t.stopPropagation(),this.open=!1,this.navOpen.emit(!1),this.focusNavControlAfterClose()))},this.onDocClickOutsideDismiss=t=>{if(!this.navControl||!this.open)return;const s=t.target;null==s||this.anyDescendantPopoverIsOpen()||this.el.querySelector(".xpl-top-nav__left-primary")?.contains(s)||this.el.querySelector(".xpl-top-nav__nav-control")?.contains(s)||(this.open=!1,this.resetMobileCascade(),this.navOpen.emit(!1))},this.onNavToggle=()=>{const t=this.open;this.open=!this.open,this.navOpen.emit(this.open),t&&!this.open&&(this.resetMobileCascade(),this.focusNavControlAfterClose())},this.onUserPopoverInnerOpenClassChange=()=>{const t=this.userPopoverDrawerSyncHost;if(!t)return;const s=t.querySelector(".xpl-popover");s?.classList.contains("xpl-popover--is-open")&&this.closeMobileDrawerWhenAccountMenuOpens()},this.syncBrandLogoSlot=()=>{const t=a(this.el,"brand-logo",{hostTag:"xpl-top-nav",projectionRegionSelectors:d});t!==this.brandLogoSlotPresent&&(this.brandLogoSlotPresent=t)},this.syncUserMenuSlots=()=>{const t=a(this.el,"user-menu",{hostTag:"xpl-top-nav",projectionRegionSelectors:u}),s=a(this.el,"user-menu-trigger",{hostTag:"xpl-top-nav",projectionRegionSelectors:b,excludedRegionSelectors:m});t!==this.userMenuSlotPresent&&(this.userMenuSlotPresent=t),s!==this.userMenuTriggerSlotPresent&&(this.userMenuTriggerSlotPresent=s)}}onNavControlChanged(){this.syncOpenFromNavControl(),this.syncDocDismissListeners()}connectedCallback(){this.syncOpenFromNavControl(),this.syncDocDismissListeners(),this.syncBrandLogoSlot(),this.syncUserMenuSlots(),this.connectSlotContentObserver(),this.flushPendingSlotProjection()}disconnectedCallback(){void 0!==this.navControlFocusTimeoutId&&(clearTimeout(this.navControlFocusTimeoutId),this.navControlFocusTimeoutId=void 0),void 0!==this.deferredSlotContentObserverSyncTimeoutId&&(clearTimeout(this.deferredSlotContentObserverSyncTimeoutId),this.deferredSlotContentObserverSyncTimeoutId=void 0),this.removeDocDismissListeners(),this.disconnectSlotContentObserver(),this.disconnectUserPopoverDrawerSync()}componentWillLoad(){this.syncOpenFromNavControl(),this.syncBrandLogoSlot(),this.syncUserMenuSlots()}componentWillRender(){this.disconnectSlotContentObserver()}componentDidRender(){this.connectSlotContentObserver(),this.connectUserPopoverDrawerSync()}get childAccountLabelText(){return this.childAccountLabel?.trim()??""}get hasBrand(){const t=this.brandName?.trim()??"",s=this.brandLogo?.trim()??"";return t.length>0||s.length>0||this.brandLogoSlotPresent}get hasUserMenu(){return this.userMenuSlotPresent}get needsUserMenuSlotStash(){return!this.userMenuSlotPresent&&this.userMenuTriggerSlotPresent}get usesBuiltInChildAccountTrigger(){return this.hasUserMenu&&!this.userMenuTriggerSlotPresent}anyDescendantPopoverIsOpen(){const t=this.el.querySelectorAll("xpl-popover");for(let s=0;s<t.length;s+=1){const e=t[s].querySelector(".xpl-popover");if(e?.classList.contains("xpl-popover--is-open"))return!0}return!1}closeMobileDrawerWhenAccountMenuOpens(){this.navControl&&this.open&&(this.open=!1,this.navOpen.emit(!1))}connectSlotContentObserver(){this.disconnectSlotContentObserver(),"undefined"!=typeof MutationObserver&&(this.slotContentObserver=new MutationObserver((t=>{this.scheduleSlotContentSyncFromObserver(t)})),this.slotContentObserver.observe(this.el,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot"]}))}connectUserPopoverDrawerSync(){const t=this.hasUserMenu?this.el.querySelector("xpl-popover.xpl-top-nav__user-popover"):null;if(t===this.userPopoverDrawerSyncHost)return;if(this.disconnectUserPopoverDrawerSync(),!t)return;this.userPopoverDrawerSyncHost=t,t.addEventListener("isOpenChange",this.handleUserPopoverIsOpenChange);const s=t.querySelector(".xpl-popover");s&&"undefined"!=typeof MutationObserver&&(this.userPopoverDrawerOpenObserver=new MutationObserver((()=>{this.onUserPopoverInnerOpenClassChange()})),this.userPopoverDrawerOpenObserver.observe(s,{attributes:!0,attributeFilter:["class"]}),this.onUserPopoverInnerOpenClassChange())}disconnectSlotContentObserver(){this.slotContentObserver?.disconnect(),this.slotContentObserver=void 0}disconnectUserPopoverDrawerSync(){this.userPopoverDrawerSyncHost&&(this.userPopoverDrawerSyncHost.removeEventListener("isOpenChange",this.handleUserPopoverIsOpenChange),this.userPopoverDrawerSyncHost=null),this.userPopoverDrawerOpenObserver?.disconnect(),this.userPopoverDrawerOpenObserver=void 0}removeDocDismissListeners(){const t=this.el.ownerDocument;t.removeEventListener("keydown",this.onDocKeyDownEscape,!1),t.removeEventListener("click",this.onDocClickOutsideDismiss,!0)}resetMobileCascade(){const t=this.el.querySelector(".xpl-top-nav__left-primary > xpl-top-nav-item.xpl-top-nav-item--dropdown-open");t?.closeMenu().catch((()=>{}))}scheduleSlotContentSyncFromObserver(t){this.mutationsAffectHostSlotting(t)&&(this.slotProjectionDirty=!0),void 0!==this.deferredSlotContentObserverSyncTimeoutId&&clearTimeout(this.deferredSlotContentObserverSyncTimeoutId),this.deferredSlotContentObserverSyncTimeoutId=setTimeout((()=>{this.deferredSlotContentObserverSyncTimeoutId=void 0,this.el.isConnected&&(this.syncBrandLogoSlot(),this.syncUserMenuSlots(),this.flushPendingSlotProjection())}),0)}flushPendingSlotProjection(){this.slotProjectionDirty&&(this.slotProjectionDirty=!1,this.slotProjectionNonce+=1)}mutationsAffectHostSlotting(t){return t.some((t=>"attributes"===t.type||"childList"===t.type&&t.target===this.el))}syncDocDismissListeners(){if(this.removeDocDismissListeners(),l()&&this.navControl){const t=this.el.ownerDocument;t.addEventListener("keydown",this.onDocKeyDownEscape,!1),t.addEventListener("click",this.onDocClickOutsideDismiss,!0)}}syncOpenFromNavControl(){const t=this.open;this.open=!1,t&&!this.navControl&&(this.resetMobileCascade(),this.navOpen.emit(!1))}render(){return i(n,{key:"f51ed285523198b4ef39de7ea1e5dc025d5a308a",class:{"xpl-top-nav":!0,"xpl-top-nav--nav-control":!!this.navControl,"xpl-top-nav--open":this.open,"xpl-top-nav--has-child-account-label":this.childAccountLabelText.length>0,"xpl-top-nav--has-brand":this.hasBrand,"xpl-top-nav--has-user-menu":this.hasUserMenu,dark:!0}},i("nav",{key:"c2c14ed2ba975299efd76a391dfd6371b9214449","aria-label":this.label??"top-navigation-bar",class:"xpl-top-nav__bar"},i("div",{key:"c223b947ffbcb55c6c6a06fa3adaeaee7661b61e",class:"xpl-top-nav__inner-left"},this.navControl&&i("button",{key:"d364b6dd709d59730d40e7a0d41f9dd8fd55d40b",type:"button",class:"xpl-top-nav__nav-control","aria-expanded":this.open?"true":"false","aria-label":this.open?"Close navigation menu":"Open navigation menu",onClick:this.onNavToggle},i("xpl-icon",{key:"b84614dc20189f641b2f5a08eef1c76610135598",class:"xpl-top-nav__control-icon",icon:"menu",size:32})),this.hasBrand&&i("div",{key:"90b104133cbdea89643923fd06f54179978862a5",class:"xpl-top-nav__brand-bar"},i("xpl-top-nav-item",{key:"2b40b31ba1312a76231f7a89b1e95508a5a146a1",class:"xpl-top-nav__brand",href:this.brandHref,onNavItemClick:this.onBrandNavItemClick},this.brandLogo?.trim()?i("img",{class:"xpl-top-nav__brand-logo",src:this.brandLogo,alt:this.brandName?.trim()?this.brandName.trim():"Brand"}):this.brandLogoSlotPresent?i("span",{class:"xpl-top-nav__brand-logo-slot"},i("slot",{name:"brand-logo"})):null,this.brandName?.trim()?i("span",{class:"xpl-top-nav__brand-name"},this.brandName.trim()):null)),i("div",{key:"ca3e9b4501ab3756301b2079bcb9632734e56922",class:{"xpl-top-nav__aside":!0,"xpl-nav-left":!0}},i("div",{key:"f2674faf140853536150058d13a5d40c7399979e",class:"xpl-top-nav__left-primary",role:"list"},i("slot",{key:"29363ac15d3f3bf7a43b237a7f7e0622c5bd54c4",name:"left-aside"})))),i("div",{key:"7c83bd0a80649b9cbe9ed757ead1136b6fabd09c",class:{"xpl-top-nav__aside":!0,"xpl-nav-right":!0}},i("div",{key:"c67e6d3365d90cd7f7c55b08dcc4fa56dcb3e291",class:"xpl-nav-right__list"},i("div",{key:"46b9c3b0b010bf52a5632bc81b279310c0a54438",class:"xpl-top-nav__right-rail"},i("div",{key:"72279d15a5464dfabd9f92c04bc231e270ea04b9",class:"xpl-top-nav__right-lead"},i("slot",{key:"d8b44d01141f9cfbeb7d6b019345ffc8c94fd0c3",name:"right-aside"})),this.hasUserMenu?i("div",{class:"xpl-top-nav__right-user"},i("xpl-popover",{class:"xpl-top-nav__user-popover dark",position:"bottom-end",display:"menu"},this.userMenuTriggerSlotPresent?i("slot",{name:"user-menu-trigger",slot:"trigger"}):this.usesBuiltInChildAccountTrigger?i("xpl-button",{slot:"trigger",class:"xpl-top-nav__child-account-trigger",type:"button",variant:"tertiary",icon:"chevron-down",iconPosition:"end",iconOnly:0===this.childAccountLabelText.length,"aria-haspopup":"dialog","aria-label":this.childAccountLabelText.length>0?void 0:"Open account menu"},this.childAccountLabelText.length>0?this.childAccountLabelText:null):null,i("div",{class:"xpl-top-nav__user-menu-panel"},i("slot",{name:"user-menu"})))):null,this.needsUserMenuSlotStash?i("div",{class:"xpl-top-nav__user-menu-stash",hidden:!0,"aria-hidden":"true"},i("slot",{name:"user-menu-trigger"}),i("slot",{name:"user-menu"})):null)))))}get el(){return this}static get watchers(){return{navControl:[{onNavControlChanged:0}]}}},[260,"xpl-top-nav",{brandHref:[1,"brand-href"],brandLogo:[1,"brand-logo"],brandName:[1,"brand-name"],childAccountLabel:[1,"child-account-label"],label:[1],navControl:[516,"nav-control"],brandLogoSlotPresent:[32],open:[32],slotProjectionNonce:[32],userMenuSlotPresent:[32],userMenuTriggerSlotPresent:[32]},void 0,{navControl:[{onNavControlChanged:0}]}]),f=x,_=function(){"undefined"!=typeof customElements&&["xpl-top-nav","xpl-button","xpl-icon","xpl-popover","xpl-top-nav-item"].forEach((t=>{switch(t){case"xpl-top-nav":customElements.get(o(t))||customElements.define(o(t),x);break;case"xpl-button":customElements.get(o(t))||r();break;case"xpl-icon":customElements.get(o(t))||h();break;case"xpl-popover":customElements.get(o(t))||p();break;case"xpl-top-nav-item":customElements.get(o(t))||c()}}))};export{f as XplTopNav,_ as defineCustomElement}
+import{p as t,H as s,d as e,h as i,c as n,t as o}from"./p-B_6p2HCL.js";import{h as a}from"./p-DkqlawVY.js";import{i as l}from"./p-Dqb1pIRo.js";import{d as r}from"./p-gs07oY0j.js";import{d as h}from"./p-6-DvgBzG.js";import{d as p}from"./p-WTdJQHaL.js";import{d as c}from"./p-COq-vU2g.js";const d=[".xpl-top-nav__brand-logo-slot",".xpl-top-nav__brand-bar"],v=".xpl-top-nav__user-menu-panel",u=[v,".xpl-top-nav__user-menu-stash"],b=[".xpl-top-nav__user-popover",".xpl-top-nav__user-menu-stash",".xpl-top-nav__right-user"],m=[v],f=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.brandClick=e(this,"brandClick",7),this.navOpen=e(this,"navOpen",7),this.slotProjectionDirty=!1,this.userPopoverDrawerSyncHost=null,this.brandLogoSlotPresent=!1,this.open=!1,this.slotProjectionNonce=0,this.userMenuSlotPresent=!1,this.userMenuTriggerSlotPresent=!1,this.focusNavControlAfterClose=()=>{void 0!==this.navControlFocusTimeoutId&&clearTimeout(this.navControlFocusTimeoutId),this.navControlFocusTimeoutId=setTimeout((()=>{this.navControlFocusTimeoutId=void 0,this.el.querySelector(".xpl-top-nav__nav-control")?.focus()}),0)},this.handleUserPopoverIsOpenChange=t=>{const{detail:s}=t;!0===s&&this.closeMobileDrawerWhenAccountMenuOpens()},this.onBrandNavItemClick=t=>{null==this.brandHref&&this.brandClick.emit(t.detail)},this.onDocKeyDownEscape=t=>{this.navControl&&this.open&&"Escape"===t.key&&(this.anyDescendantPopoverIsOpen()||this.el.querySelector("xpl-top-nav-item.xpl-top-nav-item--dropdown-open")||(t.preventDefault(),t.stopPropagation(),this.open=!1,this.navOpen.emit(!1),this.focusNavControlAfterClose()))},this.onDocClickOutsideDismiss=t=>{if(!this.navControl||!this.open)return;const s=t.target;null==s||this.anyDescendantPopoverIsOpen()||this.el.querySelector(".xpl-top-nav__left-primary")?.contains(s)||this.el.querySelector(".xpl-top-nav__nav-control")?.contains(s)||(this.open=!1,this.resetMobileCascade(),this.navOpen.emit(!1))},this.onNavToggle=()=>{const t=this.open;this.open=!this.open,this.navOpen.emit(this.open),t&&!this.open&&(this.resetMobileCascade(),this.focusNavControlAfterClose())},this.onUserPopoverInnerOpenClassChange=()=>{const t=this.userPopoverDrawerSyncHost;if(!t)return;const s=t.querySelector(".xpl-popover");s?.classList.contains("xpl-popover--is-open")&&this.closeMobileDrawerWhenAccountMenuOpens()},this.syncBrandLogoSlot=()=>{const t=a(this.el,"brand-logo",{hostTag:"xpl-top-nav",projectionRegionSelectors:d});t!==this.brandLogoSlotPresent&&(this.brandLogoSlotPresent=t)},this.syncUserMenuSlots=()=>{const t=a(this.el,"user-menu",{hostTag:"xpl-top-nav",projectionRegionSelectors:u}),s=a(this.el,"user-menu-trigger",{hostTag:"xpl-top-nav",projectionRegionSelectors:b,excludedRegionSelectors:m});t!==this.userMenuSlotPresent&&(this.userMenuSlotPresent=t),s!==this.userMenuTriggerSlotPresent&&(this.userMenuTriggerSlotPresent=s)}}onNavControlChanged(){this.syncOpenFromNavControl(),this.syncDocDismissListeners()}connectedCallback(){this.syncOpenFromNavControl(),this.syncDocDismissListeners(),this.syncBrandLogoSlot(),this.syncUserMenuSlots(),this.connectSlotContentObserver(),this.flushPendingSlotProjection()}disconnectedCallback(){void 0!==this.navControlFocusTimeoutId&&(clearTimeout(this.navControlFocusTimeoutId),this.navControlFocusTimeoutId=void 0),void 0!==this.deferredSlotContentObserverSyncTimeoutId&&(clearTimeout(this.deferredSlotContentObserverSyncTimeoutId),this.deferredSlotContentObserverSyncTimeoutId=void 0),this.removeDocDismissListeners(),this.disconnectSlotContentObserver(),this.disconnectUserPopoverDrawerSync()}componentWillLoad(){this.syncOpenFromNavControl(),this.syncBrandLogoSlot(),this.syncUserMenuSlots()}componentWillRender(){this.disconnectSlotContentObserver()}componentDidRender(){this.connectSlotContentObserver(),this.connectUserPopoverDrawerSync()}get childAccountLabelText(){return this.childAccountLabel?.trim()??""}get hasBrand(){const t=this.brandName?.trim()??"",s=this.brandLogo?.trim()??"";return t.length>0||s.length>0||this.brandLogoSlotPresent}get hasUserMenu(){return this.userMenuSlotPresent}get needsUserMenuSlotStash(){return!this.userMenuSlotPresent&&this.userMenuTriggerSlotPresent}get usesBuiltInChildAccountTrigger(){return this.hasUserMenu&&!this.userMenuTriggerSlotPresent}anyDescendantPopoverIsOpen(){const t=this.el.querySelectorAll("xpl-popover");for(let s=0;s<t.length;s+=1){const e=t[s].querySelector(".xpl-popover");if(e?.classList.contains("xpl-popover--is-open"))return!0}return!1}closeMobileDrawerWhenAccountMenuOpens(){this.navControl&&this.open&&(this.open=!1,this.navOpen.emit(!1))}connectSlotContentObserver(){this.disconnectSlotContentObserver(),"undefined"!=typeof MutationObserver&&(this.slotContentObserver=new MutationObserver((t=>{this.scheduleSlotContentSyncFromObserver(t)})),this.slotContentObserver.observe(this.el,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot"]}))}connectUserPopoverDrawerSync(){const t=this.hasUserMenu?this.el.querySelector("xpl-popover.xpl-top-nav__user-popover"):null;if(t===this.userPopoverDrawerSyncHost)return;if(this.disconnectUserPopoverDrawerSync(),!t)return;this.userPopoverDrawerSyncHost=t,t.addEventListener("isOpenChange",this.handleUserPopoverIsOpenChange);const s=t.querySelector(".xpl-popover");s&&"undefined"!=typeof MutationObserver&&(this.userPopoverDrawerOpenObserver=new MutationObserver((()=>{this.onUserPopoverInnerOpenClassChange()})),this.userPopoverDrawerOpenObserver.observe(s,{attributes:!0,attributeFilter:["class"]}),this.onUserPopoverInnerOpenClassChange())}disconnectSlotContentObserver(){this.slotContentObserver?.disconnect(),this.slotContentObserver=void 0}disconnectUserPopoverDrawerSync(){this.userPopoverDrawerSyncHost&&(this.userPopoverDrawerSyncHost.removeEventListener("isOpenChange",this.handleUserPopoverIsOpenChange),this.userPopoverDrawerSyncHost=null),this.userPopoverDrawerOpenObserver?.disconnect(),this.userPopoverDrawerOpenObserver=void 0}removeDocDismissListeners(){const t=this.el.ownerDocument;t.removeEventListener("keydown",this.onDocKeyDownEscape,!1),t.removeEventListener("click",this.onDocClickOutsideDismiss,!0)}resetMobileCascade(){const t=this.el.querySelector(".xpl-top-nav__left-primary > xpl-top-nav-item.xpl-top-nav-item--dropdown-open");t?.closeMenu().catch((()=>{}))}scheduleSlotContentSyncFromObserver(t){this.mutationsAffectHostSlotting(t)&&(this.slotProjectionDirty=!0),void 0!==this.deferredSlotContentObserverSyncTimeoutId&&clearTimeout(this.deferredSlotContentObserverSyncTimeoutId),this.deferredSlotContentObserverSyncTimeoutId=setTimeout((()=>{this.deferredSlotContentObserverSyncTimeoutId=void 0,this.el.isConnected&&(this.syncBrandLogoSlot(),this.syncUserMenuSlots(),this.flushPendingSlotProjection())}),0)}flushPendingSlotProjection(){this.slotProjectionDirty&&(this.slotProjectionDirty=!1,this.slotProjectionNonce+=1)}mutationsAffectHostSlotting(t){return t.some((t=>"attributes"===t.type||"childList"===t.type&&t.target===this.el))}syncDocDismissListeners(){if(this.removeDocDismissListeners(),l()&&this.navControl){const t=this.el.ownerDocument;t.addEventListener("keydown",this.onDocKeyDownEscape,!1),t.addEventListener("click",this.onDocClickOutsideDismiss,!0)}}syncOpenFromNavControl(){const t=this.open;this.open=!1,t&&!this.navControl&&(this.resetMobileCascade(),this.navOpen.emit(!1))}render(){return i(n,{key:"93c1434cfab90ea8a21d3fc824e877edb2292d7f",class:{"xpl-top-nav":!0,"xpl-top-nav--nav-control":!!this.navControl,"xpl-top-nav--open":this.open,"xpl-top-nav--has-child-account-label":this.childAccountLabelText.length>0,"xpl-top-nav--has-brand":this.hasBrand,"xpl-top-nav--has-user-menu":this.hasUserMenu,dark:!0}},i("nav",{key:"7a68202ba4a467f1f4c0e4acde8eed38fd81eabe","aria-label":this.label??"top-navigation-bar",class:"xpl-top-nav__bar"},i("div",{key:"5d90e4597ead418cff05105e164c7a51ac77ea6b",class:"xpl-top-nav__inner-left"},this.navControl&&i("button",{key:"f01f960a6612985fb6054bb26e8f15e652f9e9e5",type:"button",class:"xpl-top-nav__nav-control","aria-expanded":this.open?"true":"false","aria-label":this.open?"Close navigation menu":"Open navigation menu",onClick:this.onNavToggle},i("xpl-icon",{key:"b330f04963bf2f7407d091d5546acb4923acfdd6",class:"xpl-top-nav__control-icon",icon:"menu",size:32})),this.hasBrand&&i("div",{key:"d43a05bf08ddec1a62c3000fce3e0e3332b1eb27",class:"xpl-top-nav__brand-bar"},i("xpl-top-nav-item",{key:"ee5ca421e2a48c7048f418d4d105ee33bb591951",class:"xpl-top-nav__brand",href:this.brandHref,onNavItemClick:this.onBrandNavItemClick},this.brandLogo?.trim()?i("img",{class:"xpl-top-nav__brand-logo",src:this.brandLogo,alt:this.brandName?.trim()?this.brandName.trim():"Brand"}):this.brandLogoSlotPresent?i("span",{class:"xpl-top-nav__brand-logo-slot"},i("slot",{name:"brand-logo"})):null,this.brandName?.trim()?i("span",{class:"xpl-top-nav__brand-name"},this.brandName.trim()):null)),i("div",{key:"eebb82d6e3b74cfefd5dc37f2d943982af57143f",class:{"xpl-top-nav__aside":!0,"xpl-nav-left":!0}},i("div",{key:"80831a29fc9a549e322659c9019b91e8859ae621",class:"xpl-top-nav__left-primary",role:"list"},i("slot",{key:"1afe64acf17e364209086a5d921f7ff1e249426e",name:"left-aside"})))),i("div",{key:"40742d04b8bca081837201c260580367a9a7b44e",class:{"xpl-top-nav__aside":!0,"xpl-nav-right":!0}},i("div",{key:"5fd88026428adc7984960967f1f5f95b4e4775de",class:"xpl-nav-right__list"},i("div",{key:"bebf175590e3dfc04ce1e1824fa6391e4c4618f7",class:"xpl-top-nav__right-rail"},i("div",{key:"64e93df91296ab370401d8df9a5a41a83b8b38d4",class:"xpl-top-nav__right-lead"},i("slot",{key:"103d72d4b657adea4fb4a2bbd5a4ff70b0d7a034",name:"right-aside"})),this.hasUserMenu?i("div",{class:"xpl-top-nav__right-user"},i("xpl-popover",{class:"xpl-top-nav__user-popover dark",position:"bottom-end",display:"menu"},this.userMenuTriggerSlotPresent?i("slot",{name:"user-menu-trigger",slot:"trigger"}):this.usesBuiltInChildAccountTrigger?i("xpl-button",{slot:"trigger",class:"xpl-top-nav__child-account-trigger",type:"button",variant:"tertiary",icon:"chevron-down",iconPosition:"end",iconOnly:0===this.childAccountLabelText.length,"aria-haspopup":"dialog","aria-label":this.childAccountLabelText.length>0?void 0:"Open account menu"},this.childAccountLabelText.length>0?this.childAccountLabelText:null):null,i("div",{class:"xpl-top-nav__user-menu-panel"},i("slot",{name:"user-menu"})))):null,this.needsUserMenuSlotStash?i("div",{class:"xpl-top-nav__user-menu-stash",hidden:!0,"aria-hidden":"true"},i("slot",{name:"user-menu-trigger"}),i("slot",{name:"user-menu"})):null)))))}get el(){return this}static get watchers(){return{navControl:[{onNavControlChanged:0}]}}},[260,"xpl-top-nav",{brandHref:[1,"brand-href"],brandLogo:[1,"brand-logo"],brandName:[1,"brand-name"],childAccountLabel:[1,"child-account-label"],label:[1],navControl:[516,"nav-control"],brandLogoSlotPresent:[32],open:[32],slotProjectionNonce:[32],userMenuSlotPresent:[32],userMenuTriggerSlotPresent:[32]},void 0,{navControl:[{onNavControlChanged:0}]}]),x=f,_=function(){"undefined"!=typeof customElements&&["xpl-top-nav","xpl-button","xpl-icon","xpl-popover","xpl-top-nav-item"].forEach((t=>{switch(t){case"xpl-top-nav":customElements.get(o(t))||customElements.define(o(t),f);break;case"xpl-button":customElements.get(o(t))||r();break;case"xpl-icon":customElements.get(o(t))||h();break;case"xpl-popover":customElements.get(o(t))||p();break;case"xpl-top-nav-item":customElements.get(o(t))||c()}}))};export{x as XplTopNav,_ as defineCustomElement}

package/dist/components/xpl-utility-bar.js

@@ -1 +1 @@
-import{p as t,H as s,d as a,h as i,c as e,t as n}from"./p-BqhTjJWq.js";import{d as l}from"./p-Bh-U2qmp.js";const o=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.navOpen=a(this,"navOpen",7),this.open=!0}onNavToggle(){this.open=!this.open,this.navOpen.emit(this.open)}componentWillLoad(){this.open=void 0!==this.isNavOpenAtStartup?this.isNavOpenAtStartup:this.open}render(){return i(e,{key:"68d645d450da9bb09ab698b865cdb90643276b04"},i("nav",{key:"7c8e37a3c7029af28eea94f8c4db4a681f903fb7","aria-label":"utility navigation bar",class:"xpl-utility-bar"},this.navControl?i("div",null,i("button",{class:"xpl-utility-bar__nav-control",onClick:()=>this.onNavToggle()},i("xpl-icon",{class:"xpl-utility-nav__bars",icon:"three-bars"})),i("slot",{name:"aside"})):i("slot",{name:"aside"}),i("slot",{key:"36fd1261aeafbdcb52cee2b19b3f29ce7c3f7539",name:"main"})))}},[260,"xpl-utility-bar",{navControl:[4,"nav-control"],isNavOpenAtStartup:[4,"is-nav-open-at-startup"],open:[32]}]),c=o,r=function(){"undefined"!=typeof customElements&&["xpl-utility-bar","xpl-icon"].forEach((t=>{switch(t){case"xpl-utility-bar":customElements.get(n(t))||customElements.define(n(t),o);break;case"xpl-icon":customElements.get(n(t))||l()}}))};export{c as XplUtilityBar,r as defineCustomElement}
+import{p as t,H as s,d as a,h as i,c as e,t as n}from"./p-B_6p2HCL.js";import{d as l}from"./p-6-DvgBzG.js";const o=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.navOpen=a(this,"navOpen",7),this.open=!0}onNavToggle(){this.open=!this.open,this.navOpen.emit(this.open)}componentWillLoad(){this.open=void 0!==this.isNavOpenAtStartup?this.isNavOpenAtStartup:this.open}render(){return i(e,{key:"68d645d450da9bb09ab698b865cdb90643276b04"},i("nav",{key:"7c8e37a3c7029af28eea94f8c4db4a681f903fb7","aria-label":"utility navigation bar",class:"xpl-utility-bar"},this.navControl?i("div",null,i("button",{class:"xpl-utility-bar__nav-control",onClick:()=>this.onNavToggle()},i("xpl-icon",{class:"xpl-utility-nav__bars",icon:"three-bars"})),i("slot",{name:"aside"})):i("slot",{name:"aside"}),i("slot",{key:"36fd1261aeafbdcb52cee2b19b3f29ce7c3f7539",name:"main"})))}},[260,"xpl-utility-bar",{navControl:[4,"nav-control"],isNavOpenAtStartup:[4,"is-nav-open-at-startup"],open:[32]}]),c=o,r=function(){"undefined"!=typeof customElements&&["xpl-utility-bar","xpl-icon"].forEach((t=>{switch(t){case"xpl-utility-bar":customElements.get(n(t))||customElements.define(n(t),o);break;case"xpl-icon":customElements.get(n(t))||l()}}))};export{c as XplUtilityBar,r as defineCustomElement}

package/dist/docs/xpl-avatar/readme.md

@@ -189,7 +189,7 @@ Use `color` when no `src` is provided to set the placeholder background:
 
 ## Design tokens
 
-These are the main Apollo Foundation tokens used in `packages/apollo-core/src/css/avatar.css`. Use them when overriding or migrating styles.
+These are the main Apollo Foundation tokens used in `packages/apollo-core/src/components/xpl-avatar/avatar.css`. Use them when overriding or migrating styles.
 
 | Role | Token(s) |
 | ---- | -------- |

package/dist/docs/xpl-dropdown/readme.md

@@ -19,12 +19,21 @@ Tokens used by this component from `@xplortech/apollo-foundation`. The panel sur
 - `--xpl-background-surface-subtlest` — option `:hover` background (neutral subtle surface)
 - `--xpl-background-surface-information` — `--selected` background (purple-50 light / neutral-700 dark)
 - `--xpl-background-action-primary-default` — `--selected` right accent border color
+- `--xpl-icon-information` — multi-select checkmark color (purple in both light and dark mode)
 
 **Border**
 - `--xpl-border-small` — panel and heading border width (1px)
-- `--xpl-border-large` — used via `calc(2 * …)` for the 4px `--selected` accent border (see `TECH_DEBT.md`)
+- `--xpl-border-xlarge` — 4px `--selected` accent border
 - `--xpl-border-radius-small` — panel corner radius (4px), matching the anchored `xpl-select` trigger
 
+**Spacing / Sizing**
+- `--xpl-space-16` — multi-select checkmark right offset
+- `--xpl-size-075` — multi-select checkmark size (12px)
+- `--xpl-dropdown-list-max-height` — component custom property for the options list max-height (default 300px)
+
+**Elevation**
+- `--xpl-elevation-2` — panel drop shadow
+
 **Typography**
 - `@extend .xpl-text-callout-bold` — heading: 12px / semibold weight / line-height 1.3333
 - `@extend .xpl-text-callout` — list-item subtitle: 12px / normal weight / line-height 1.3333

package/dist/docs/xpl-list/readme.md

@@ -257,7 +257,7 @@ graph TD;
 
 ## Design tokens
 
-List styling is split across [`list.css`](https://github.com/xplor/apollo/blob/main/packages/apollo-core/src/css/list.css) (the `xpl-list` host), [`list-item.css`](https://github.com/xplor/apollo/blob/main/packages/apollo-core/src/css/list-item.css) (legacy vs slot-based row layout, error/disabled/hidden, title/metadata columns), and [`list-action.css`](https://github.com/xplor/apollo/blob/main/packages/apollo-core/src/css/list-action.css) (reorder handle, selectable radio chrome, legacy action-button modifiers). All are imported from the package `style` entry. Visual values use **Apollo Foundation** CSS variables (`--xpl-*`); no raw hex colors in those stylesheets.
+List styling is split across [`list.css`](https://github.com/xplor/apollo/blob/main/packages/apollo-core/src/components/xpl-list/list.css) (the `xpl-list` host), [`list-item.css`](https://github.com/xplor/apollo/blob/main/packages/apollo-core/src/components/xpl-list/xpl-list-item/list-item.css) (legacy vs slot-based row layout, error/disabled/hidden, title/metadata columns), and [`list-action.css`](https://github.com/xplor/apollo/blob/main/packages/apollo-core/src/components/xpl-list/list-action.css) (reorder handle, selectable radio chrome, legacy action-button modifiers). All are imported from the package `style` entry. Visual values use **Apollo Foundation** CSS variables (`--xpl-*`); no raw hex colors in those stylesheets.
 
 
 | Category             | Tokens (representative)                                                                                                                                                                      |

package/dist/docs/xpl-nav-item/readme.md

@@ -14,7 +14,7 @@ This component should be used within sections of the `<xpl-main-nav>`. This comp
 - `--xpl-color-orange-400` — active brand accent border + icon (primitive; consult-Figma — see `TECH_DEBT.md`)
 
 **Border**
-- `calc(2 * var(--xpl-border-large))` — 4px active accent border width (no 4px Foundation token)
+- `--xpl-border-xlarge` — 4px active accent border width
 
 <!-- Auto Generated Below -->
 

package/dist/docs/xpl-pagination/readme.md

@@ -7,7 +7,7 @@ Pagination bar allows users to navigate pages of content.
 ## Design Tokens
 
 Pagination themes with the app (light/dark) using Apollo Foundation tokens
-(`packages/apollo-core/src/css/pagination.css`):
+(`packages/apollo-core/src/components/xpl-pagination/pagination.css`):
 
 | Element / state | Property | Token | Resolves (light / dark) |
 | --- | --- | --- | --- |

package/dist/docs/xpl-secondary-nav/readme.md

@@ -19,13 +19,15 @@ The secondary nav uses Apollo Foundation purpose-specific tokens, which theme au
 | item active | accent `border-color` | `--xpl-border-accent-brand` |
 | item `:focus-visible` | `outline-color` | `--xpl-border-focus` |
 | item `:focus-visible` | `z-index` (above scroll fade) | `--xpl-z-index-200` |
-| item accent border | `border-width` (4px) | `calc(2 * var(--xpl-border-large))` |
+| item | `padding` | `--xpl-space-16` / `--xpl-space-24` |
+| item accent border (inactive) | `border-width` (0) | `--xpl-border-none` |
+| item accent border | `border-width` (4px) | `--xpl-border-xlarge` |
 | item (desktop) | `height` (48px) | `--xpl-size-300` |
 | scroll fade `nav::after` | `z-index` (below focused item) | `--xpl-z-index-100` |
 
 The horizontal-scroll fade (`nav::after`, mobile only) fills a strip with `--xpl-background-surface-default` and fades it out with an alpha-only `mask-image`, so it blends into the themed nav background in both modes. It is `pointer-events: none` and sits at `--xpl-z-index-100`, below a keyboard-focused item (`--xpl-z-index-200`), so it never intercepts taps or hides an item's `:focus-visible` ring.
 
-**Known token gaps** (see [`TECH_DEBT.md`](../../../../../../TECH_DEBT.md)): the item `height` (52px) and desktop `width` (200px) have no matching Foundation size token; the 4px accent border and the scroll-fade gradient stops have no dedicated Foundation tokens.
+**Known token gaps** (see [`TECH_DEBT.md`](../../../../../../TECH_DEBT.md)): the item `height` (52px) and desktop `width` (200px) have no matching Foundation size token; the scroll-fade gradient stops have no dedicated Foundation tokens.
 
 <!-- Auto Generated Below -->
 

package/dist/docs/xpl-toolbar/readme.md

@@ -6,7 +6,7 @@
 
 The toolbar is an **always-dark** selection bar (nav-rail pattern) — its surface stays dark
 in both light and dark themes. Styling comes from Apollo Foundation tokens
-(`packages/apollo-core/src/css/toolbar.css`):
+(`packages/apollo-core/src/components/xpl-toolbar/toolbar.css`):
 
 | Element | Property | Token | Resolves (light / dark) |
 | --- | --- | --- | --- |

package/dist/docs/xpl-top-nav/xpl-nav-header-menu/readme.md

@@ -2,7 +2,7 @@
 
 Profile block (username, email) and a default slot for menu rows. Typically inside **`xpl-popover`** or **`xpl-dropdown`** under a user trigger.
 
-**Styles** for this component live in **`packages/apollo-core/src/css/top-nav.css`** (with **`xpl-top-nav-item`** rules in the same file).
+**Styles** for this component live in **`packages/apollo-core/src/components/xpl-top-nav/top-nav.css`** (with **`xpl-top-nav-item`** rules in the same file).
 
 ## Usage