@xplortech/apollo-core 3.2.1 → 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-BSHdGbmH.js";import{h as a}from"./p-DkqlawVY.js";import{i as l}from"./p-Dqb1pIRo.js";import{d as r}from"./p-CV5nn1zR.js";import{d as h}from"./p-CQjJIHK6.js";import{d as p}from"./p-DTh_zemx.js";import{d as c}from"./p-Btb2UkLz.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-BSHdGbmH.js";import{d as l}from"./p-CQjJIHK6.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:"9bb4778368fca3035fc19b74ec3881b9c21ce856"},i("nav",{key:"909606f5baaef1a9c7402ac18107a607aa1df742","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:"d6bce27702906a01823de67d63173406ceb06290",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-accordion/readme.md

@@ -42,10 +42,11 @@ Type: `Promise<null>`
 
 ## Slots
 
-| Slot        | Description                                                       |
-| ----------- | ----------------------------------------------------------------- |
-| `"content"` | Content rendered inside of the collapsible body of the accordion. |
-| `"heading"` | The header for the accordion component                            |
+| Slot            | Description                                                                       |
+| --------------- | --------------------------------------------------------------------------------- |
+| `"content"`     | Content rendered inside of the collapsible body of the accordion.                 |
+| `"description"` | Additional text displayed under the header. Falls back to the `description` prop. |
+| `"heading"`     | The header for the accordion component                                            |
 
 
 ## Dependencies

package/dist/docs/xpl-application-shell/readme.md

@@ -48,6 +48,16 @@ The nav rail widths / transforms (`74px`, `112px`, `240px`) drive the CSS-only o
 | `withUtility`        | `with-utility`           |             | `boolean` | `true`      |
 
 
+## Slots
+
+| Slot        | Description                                                          |
+| ----------- | -------------------------------------------------------------------- |
+| `"content"` | The main page content area.                                          |
+| `"nav"`     | The primary navigation area (e.g. `xpl-main-nav` or `xpl-side-nav`). |
+| `"subnav"`  | The secondary navigation area (e.g. `xpl-secondary-nav`).            |
+| `"utility"` | The utility bar area (e.g. `xpl-utility-bar`).                       |
+
+
 ## Dependencies
 
 ### Depends on

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) |
 | ---- | -------- |
@@ -291,6 +291,13 @@ This component now depends on `xpl-badge`. Ensure `xpl-badge` is loaded in your
 | `variant`   | `variant`    | Optional layout: `profile` (large profile sizes), `group` (stacked faces + `groupData`; `status` not shown), `with-text` (avatar with `name` / `subText` beside it). Omit for the default single avatar.                                                                                                                                                              | `"group" \| "profile" \| "with-text"`                                                                             | `undefined` |
 
 
+## Slots
+
+| Slot | Description                                                                        |
+| ---- | ---------------------------------------------------------------------------------- |
+|      | Custom placeholder content (e.g. initials) shown when no `src` image is available. |
+
+
 ## Dependencies
 
 ### Used by

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

@@ -141,6 +141,13 @@ Tokens used by this component from `@xplortech/apollo-foundation`.
 | `variant`  | `variant`  | Badge variant (color).  Preferred values: `purple`, `green`, `yellow`, `orange`, `gray`, `red`, `blue`.  The legacy semantic names `success`, `warning`, `inactive`, and `error` are still accepted and map to `green`, `yellow`, `gray`, and `red` respectively. Prefer the color names for new code. | `"blue" \| "error" \| "gray" \| "green" \| "inactive" \| "orange" \| "purple" \| "red" \| "success" \| "warning" \| "yellow"` | `'purple'`  |
 
 
+## Slots
+
+| Slot | Description              |
+| ---- | ------------------------ |
+|      | The badge label content. |
+
+
 ## Dependencies
 
 ### Used by

package/dist/docs/xpl-breadcrumbs/xpl-breadcrumb-item/readme.md

@@ -11,6 +11,7 @@ This component yields an unnamed slot. Only links and buttons (styled as links)
 
 | Slot        | Description                                                             |
 | ----------- | ----------------------------------------------------------------------- |
+|             | The default slot                                                        |
 | `"unnamed"` | content rendered inside <li>, should be link or button (styled as link) |
 
 

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

@@ -23,6 +23,7 @@ Tokens used by this component from `@xplortech/apollo-foundation` (light/dark ha
 
 | Slot        | Description                                                               |
 | ----------- | ------------------------------------------------------------------------- |
+|             | The default slot                                                          |
 | `"unnamed"` | content rendered <ol>, should be a group of <li> or <xpl-breadcrumb-item> |
 
 

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

@@ -154,6 +154,13 @@ The **`state`** prop (`neutral` | `warning` | `success`) is deprecated. Use **`s
 | `variant`      | `variant`       | Button variant/style. Use "primary", "secondary", "tertiary" for new usage. "subtle" is deprecated but still supported for backward compatibility.                                                                                     | `"primary" \| "secondary" \| "subtle" \| "tertiary"`                                                                      | `'primary'` |
 
 
+## Slots
+
+| Slot | Description               |
+| ---- | ------------------------- |
+|      | The button label content. |
+
+
 ## Dependencies
 
 ### Used by

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

@@ -62,6 +62,13 @@ The checkbox label and description are styled by the shared `.xpl-label` / `.xpl
 | `checkboxChange` | Emits the new checked state of the checkbox after a user interaction.  Always emits a boolean so the event payload reliably represents whether the checkbox is now on or off. This is what Vue `v-model` binds to via the `checked` attribute — emitting the `value` string here would coerce any non-empty string to `true` and make it impossible to uncheck a checkbox that has a `value` prop set. Consumers that need the `value` can read it from the host element (`event.target.value`) or rely on native form submission (`name`/`value` pair). | `CustomEvent<boolean>` |
 
 
+## Slots
+
+| Slot | Description                 |
+| ---- | --------------------------- |
+|      | The checkbox label content. |
+
+
 ## Dependencies
 
 ### Used by

package/dist/docs/xpl-content-area/readme.md

@@ -20,6 +20,13 @@ Tokens used by this component from `@xplortech/apollo-foundation`.
 | `size`   | `size`    |             | `"full" \| "narrow" \| "wide"` | `'wide'` |
 
 
+## Slots
+
+| Slot | Description       |
+| ---- | ----------------- |
+|      | The page content. |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

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

@@ -5,6 +5,13 @@ The XPL-Dashboard component is a code-only utility component for responsive layo
 <!-- Auto Generated Below -->
 
 
+## Slots
+
+| Slot | Description            |
+| ---- | ---------------------- |
+|      | The dashboard content. |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-data-card/readme.md

@@ -27,6 +27,7 @@ The card is styled entirely with Apollo Foundation purpose-specific tokens (dark
 | Anchor hover shadow | `box-shadow` | `--xpl-elevation-2` (theme-aware) |
 | Header / stat spacing | `margin` | `--xpl-space-4`, `--xpl-space-6` |
 | Container-query stat | `font-size` | `--xpl-font-size-title-2` |
+| Container-query stat | `line-height` | `--xpl-line-height-title-2` |
 
 The resting anchor overlay keeps a `0.375rem` (6px) radius to match the card's `rounded-md`; Foundation has no 6px radius token (see `TECH_DEBT.md`).
 

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

@@ -30,6 +30,13 @@ Tokens used by this component from `@xplortech/apollo-foundation`.
 | `tier`   | `tier`    | The tier should be an integer between 0 and 3. Tier 0 dividers do not display text, and 1-3 increase in size with each increasing tier. | `number` | `undefined` |
 
 
+## Slots
+
+| Slot | Description                                                                   |
+| ---- | ----------------------------------------------------------------------------- |
+|      | Optional text content rendered inside the divider (not displayed for tier 0). |
+
+
 ## Dependencies
 
 ### Used by

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
@@ -78,6 +87,14 @@ Type: `Promise<void>`
 
 
 
+## Slots
+
+| Slot        | Description                                                                                      |
+| ----------- | ------------------------------------------------------------------------------------------------ |
+| `"header"`  | Optional header content rendered above the options list.                                         |
+| `"options"` | The `xpl-dropdown-option` / `xpl-dropdown-group` items. Used when the `options` prop is not set. |
+
+
 ## Dependencies
 
 ### Used by

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

@@ -13,6 +13,13 @@
 | `options`   | --        | options that are listed    | `Partial<DropdownOption & DropdownOptionGroup>[]` | `undefined` |
 
 
+## Slots
+
+| Slot        | Description                                                                             |
+| ----------- | --------------------------------------------------------------------------------------- |
+| `"options"` | The `xpl-dropdown-option` items in this group. Used when the `options` prop is not set. |
+
+
 ## Dependencies
 
 ### Used by

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

@@ -12,6 +12,13 @@
 | `label`  | `label`   | text to display as heading | `string` | `undefined` |
 
 
+## Slots
+
+| Slot        | Description                                                    |
+| ----------- | -------------------------------------------------------------- |
+| `"heading"` | Custom heading content. Used when the `label` prop is not set. |
+
+
 ## Dependencies
 
 ### Used by

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

@@ -17,6 +17,13 @@
 | `value`      | `value`    | The selected options value to be submitted with the form, should this option be selected. | `string`  | `undefined` |
 
 
+## Slots
+
+| Slot       | Description                                                   |
+| ---------- | ------------------------------------------------------------- |
+| `"option"` | Custom option content. Used when the `label` prop is not set. |
+
+
 ## Dependencies
 
 ### Used by

package/dist/docs/xpl-dynamic-table/readme.md

@@ -52,6 +52,14 @@ The table, cells, and rows use Apollo Foundation purpose-specific tokens (light
 | `selectedItemCountChange` | Emitted when the number of selected items changes. | `CustomEvent<string[]>` |
 
 
+## Slots
+
+| Slot       | Description                     |
+| ---------- | ------------------------------- |
+| `"body"`   | The body region of the table.   |
+| `"header"` | The header region of the table. |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-dynamic-table-cell/readme.md

@@ -15,6 +15,13 @@
 | `disabled` | `disabled` | Whether the cell and its contents are disabled. | `boolean` | `false` |
 
 
+## Slots
+
+| Slot | Description       |
+| ---- | ----------------- |
+|      | The cell content. |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-dynamic-table-row/readme.md

@@ -16,6 +16,13 @@
 | `selected` | `selected` | Whether the row is selected.                | `boolean` | `false` |
 
 
+## Slots
+
+| Slot | Description                                        |
+| ---- | -------------------------------------------------- |
+|      | The row cells (`xpl-dynamic-table-cell` elements). |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

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

@@ -15,6 +15,13 @@
 | `xs`     | `xs`      | The number of columns the element should span  out of a 6 column grid on a  xs size screen | `number` | `6`     |
 
 
+## Slots
+
+| Slot | Description                            |
+| ---- | -------------------------------------- |
+|      | Content rendered inside the grid item. |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-header-accordion/readme.md

@@ -37,6 +37,14 @@ The header uses Apollo Foundation purpose-specific tokens (light / dark resolve
 | `selectedCount`   | `selected-count`   | The number of selected child items, or -1 to auto-calculate.  | `number`  | `-1`        |
 
 
+## Slots
+
+| Slot        | Description                                                    |
+| ----------- | -------------------------------------------------------------- |
+| `"content"` | Content rendered inside the collapsible body of the accordion. |
+| `"title"`   | The header content of the accordion toggle.                    |
+
+
 ## Dependencies
 
 ### Depends on

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

@@ -2,7 +2,7 @@
 
 ## Available Icons
 
-For a complete list of available icon names, see [ICONS.md](./ICONS.md) (164 icons).
+For a complete list of available icon names, see [ICONS.md](./ICONS.md) (554 icons).
 
 You can also browse icons visually in [Storybook](?path=/story/components-icons--icons) with search functionality.
 

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

@@ -128,6 +128,14 @@ Type: `Promise<void>`
 
 
 
+## Slots
+
+| Slot        | Description                                                                          |
+| ----------- | ------------------------------------------------------------------------------------ |
+| `"pre"`     | Leading add-on content rendered before the input. Falls back to the `pre` prop text. |
+| `"trigger"` | Custom trigger element for the file picker. Only used with `type="file"`.            |
+
+
 ## Dependencies
 
 ### Used by

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)                                                                                                                                                                      |
@@ -318,6 +318,13 @@ Type: `Promise<void>`
 
 
 
+## Slots
+
+| Slot | Description                                |
+| ---- | ------------------------------------------ |
+|      | The list items (`xpl-list-item` elements). |
+
+
 ## Dependencies
 
 ### Depends on

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

@@ -64,6 +64,22 @@ Single row for [`xpl-list`](../xpl-list/readme.md). **Slot-based** rows expose `
 | `itemSelect`    | Emitted when the item is selected (radio change).                       | `CustomEvent<{ itemId?: string; }>`                    |
 
 
+## Slots
+
+| Slot                | Description                                                          |
+| ------------------- | -------------------------------------------------------------------- |
+| `"actions"`         | Right-side action controls.                                          |
+| `"avatar"`          | Leading avatar/media cell.                                           |
+| `"badges"`          | Right-side badges group.                                             |
+| `"details"`         | Right-side details content.                                          |
+| `"error-text"`      | Error message shown below the row; puts the item in the error state. |
+| `"metadata"`        | Secondary metadata row rendered below the title.                     |
+| `"stacked-extra-1"` | First additional stacked row, rendered below `metadata`.             |
+| `"stacked-extra-2"` | Second additional stacked row, rendered below `stacked-extra-1`.     |
+| `"stacked-extra-3"` | Third additional stacked row, rendered below `stacked-extra-2`.      |
+| `"title"`           | The primary title text.                                              |
+
+
 ## Dependencies
 
 ### Used by

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

@@ -18,6 +18,8 @@ The bottom area is fixed to the bottom and should be used for actions. To render
 
 **Typography**
 - `--xpl-font-size-body` — collapsed (`sm`/`md`) nav item label size
+- `--xpl-line-height-body` — collapsed (`sm`/`md`) nav item label line height
+- `--xpl-line-height-title-4` — brand lockup text line height (title-4)
 
 **Layout**
 - Collapse-state widths (240 / 112 / 74px) and the 42px brand logo box are raw literals — no matching Foundation size token (see `TECH_DEBT.md`)
@@ -39,6 +41,16 @@ The bottom area is fixed to the bottom and should be used for actions. To render
 | `navWidth` |             | `CustomEvent<string>` |
 
 
+## Slots
+
+| Slot           | Description                                                            |
+| -------------- | ---------------------------------------------------------------------- |
+| `"brand-name"` | Brand or product name rendered next to the logo in the sidebar header. |
+| `"footer"`     | Footer content pinned to the bottom of the sidebar.                    |
+| `"logo"`       | Brand logo rendered in the sidebar header.                             |
+| `"navigation"` | Primary navigation items.                                              |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

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 -->
 
@@ -33,6 +33,15 @@ This component should be used within sections of the `<xpl-main-nav>`. This comp
 | `navOpen` |             | `CustomEvent<boolean>` |
 
 
+## Slots
+
+| Slot     | Description                                                        |
+| -------- | ------------------------------------------------------------------ |
+|          | The item label content.                                            |
+| `"icon"` | Leading icon content rendered before the label.                    |
+| `"link"` | Optional wrapper around the item content (e.g. an anchor element). |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

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-popover/readme.md

@@ -49,6 +49,7 @@ Tokens used by this component from `@xplortech/apollo-foundation`.
 
 | Slot              | Description                                           |
 | ----------------- | ----------------------------------------------------- |
+|                   | The default slot                                      |
 | `"Inner Content"` | Content inside the popover                            |
 | `"trigger"`       | The element that, when clicked, will open the popover |
 

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

@@ -55,6 +55,13 @@ The radio label and description are styled by the shared `.xpl-label` / `.xpl-de
 | `radioChange` | Event that emits the current value of the radio input  Returns the value of the radio input if a value is provided, otherwise returns the checked state | `CustomEvent<boolean \| string>` |
 
 
+## Slots
+
+| Slot | Description              |
+| ---- | ------------------------ |
+|      | The radio label content. |
+
+
 ## Dependencies
 
 ### Used by

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

@@ -19,17 +19,26 @@ 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 -->
 
 
+## Slots
+
+| Slot | Description           |
+| ---- | --------------------- |
+|      | The navigation items. |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

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

@@ -69,6 +69,13 @@ Type: `Promise<void>`
 
 
 
+## Slots
+
+| Slot                     | Description                                                                                                     |
+| ------------------------ | --------------------------------------------------------------------------------------------------------------- |
+| `"custom-display-value"` | Custom content rendered as the selected-value display. Only rendered when the `customDisplayValue` prop is set. |
+
+
 ## Dependencies
 
 ### Used by