@xplortech/apollo-core 2.11.0 → 2.12.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-BT_Lq3Vd.js";import{d as a}from"./p-D2SFagIb.js";import{d as l}from"./p-ByJRw26d.js";import{d as r}from"./p-BJqNuBZr.js";import{d as h}from"./p-M900WO1C.js";const p=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.brandClick=e(this,"brandClick",7),this.navOpen=e(this,"navOpen",7),this.userPopoverDrawerSyncHost=null,this.brandLogoSlotPresent=!1,this.open=!1,this.userMenuSlotPresent=!1,this.userMenuTriggerSlotPresent=!1,this.focusNavControlAfterClose=()=>{void 0!==this.navControlFocusTimeoutId&&clearTimeout(this.navControlFocusTimeoutId),this.navControlFocusTimeoutId=setTimeout((()=>{var t;this.navControlFocusTimeoutId=void 0,null===(t=this.el.querySelector(".xpl-top-nav__nav-control"))||void 0===t||t.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.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");(null==s?void 0:s.classList.contains("xpl-popover--is-open"))&&this.closeMobileDrawerWhenAccountMenuOpens()},this.syncBrandLogoSlot=()=>{const t=null!=this.el.querySelector('[slot="brand-logo"]');t!==this.brandLogoSlotPresent&&(this.brandLogoSlotPresent=t)},this.syncUserMenuSlots=()=>{const t=null!=this.el.querySelector('[slot="user-menu"]'),s=null!=this.el.querySelector('[slot="user-menu-trigger"]');t!==this.userMenuSlotPresent&&(this.userMenuSlotPresent=t),s!==this.userMenuTriggerSlotPresent&&(this.userMenuTriggerSlotPresent=s)}}onNavControlChanged(){this.syncOpenFromNavControl(),this.syncDocEscapeListener()}connectedCallback(){this.syncOpenFromNavControl(),this.syncDocEscapeListener(),this.syncBrandLogoSlot(),this.syncUserMenuSlots(),this.connectSlotContentObserver()}disconnectedCallback(){void 0!==this.navControlFocusTimeoutId&&(clearTimeout(this.navControlFocusTimeoutId),this.navControlFocusTimeoutId=void 0),void 0!==this.deferredSlotContentObserverSyncTimeoutId&&(clearTimeout(this.deferredSlotContentObserverSyncTimeoutId),this.deferredSlotContentObserverSyncTimeoutId=void 0),this.removeDocEscapeListener(),this.disconnectSlotContentObserver(),this.disconnectUserPopoverDrawerSync()}componentWillLoad(){this.syncOpenFromNavControl(),this.syncBrandLogoSlot(),this.syncUserMenuSlots()}componentWillRender(){this.disconnectSlotContentObserver()}componentDidRender(){this.connectSlotContentObserver(),this.connectUserPopoverDrawerSync()}get childAccountLabelText(){var t,s;return null!==(s=null===(t=this.childAccountLabel)||void 0===t?void 0:t.trim())&&void 0!==s?s:""}get hasBrand(){var t,s,e,i;const n=null!==(s=null===(t=this.brandName)||void 0===t?void 0:t.trim())&&void 0!==s?s:"",o=null!==(i=null===(e=this.brandLogo)||void 0===e?void 0:e.trim())&&void 0!==i?i:"";return n.length>0||o.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(null==e?void 0: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((()=>{this.scheduleSlotContentSyncFromObserver()})),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(){var t;null===(t=this.slotContentObserver)||void 0===t||t.disconnect(),this.slotContentObserver=void 0}disconnectUserPopoverDrawerSync(){var t;this.userPopoverDrawerSyncHost&&(this.userPopoverDrawerSyncHost.removeEventListener("isOpenChange",this.handleUserPopoverIsOpenChange),this.userPopoverDrawerSyncHost=null),null===(t=this.userPopoverDrawerOpenObserver)||void 0===t||t.disconnect(),this.userPopoverDrawerOpenObserver=void 0}removeDocEscapeListener(){this.el.ownerDocument.removeEventListener("keydown",this.onDocKeyDownEscape,!1)}resetMobileCascade(){const t=this.el.querySelector(".xpl-top-nav__left-primary > xpl-top-nav-item.xpl-top-nav-item--dropdown-open");null==t||t.closeMenu().catch((()=>{}))}scheduleSlotContentSyncFromObserver(){void 0!==this.deferredSlotContentObserverSyncTimeoutId&&clearTimeout(this.deferredSlotContentObserverSyncTimeoutId),this.deferredSlotContentObserverSyncTimeoutId=setTimeout((()=>{this.deferredSlotContentObserverSyncTimeoutId=void 0,this.el.isConnected&&(this.syncBrandLogoSlot(),this.syncUserMenuSlots())}),0)}syncDocEscapeListener(){this.removeDocEscapeListener(),this.navControl&&this.el.ownerDocument.addEventListener("keydown",this.onDocKeyDownEscape,!1)}syncOpenFromNavControl(){const t=this.open;this.open=!1,t&&!this.navControl&&(this.resetMobileCascade(),this.navOpen.emit(!1))}render(){var t,s,e,o;return i(n,{key:"a1556bcc2dfc2d35b9b9540a3f0e0d162d547923",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:"5531a9157af00cbd8b8d5459801ae00337c5e4ec","aria-label":null!==(t=this.label)&&void 0!==t?t:"top-navigation-bar",class:"xpl-top-nav__bar"},i("div",{key:"5257bb97f7c388358820ae85e872644666538304",class:"xpl-top-nav__inner-left"},this.navControl&&i("button",{key:"8e8acb60ee8cac9bf84bb559444fbdcfcee13a10",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:"7bafdf086e9df7d4a2333ea9d2fed86de8466912",class:"xpl-top-nav__control-icon",icon:"menu",size:32})),this.hasBrand&&i("div",{key:"39fc108bfb4b30a98bc06ca8d12331527708d3ef",class:"xpl-top-nav__brand-bar"},i("xpl-top-nav-item",{key:"7c951eb3c0e349170bb017f6e1d375f3b328653f",class:"xpl-top-nav__brand",href:this.brandHref,onNavItemClick:this.onBrandNavItemClick},(null===(s=this.brandLogo)||void 0===s?void 0:s.trim())?i("img",{class:"xpl-top-nav__brand-logo",src:this.brandLogo,alt:(null===(e=this.brandName)||void 0===e?void 0:e.trim())?this.brandName.trim():"Brand"}):this.brandLogoSlotPresent?i("span",{class:"xpl-top-nav__brand-logo-slot"},i("slot",{name:"brand-logo"})):null,(null===(o=this.brandName)||void 0===o?void 0:o.trim())?i("span",{class:"xpl-top-nav__brand-name"},this.brandName.trim()):null)),i("div",{key:"16fa404db5c59741ec4a4c8c92c6f43f7502e906",class:{"xpl-top-nav__aside":!0,"xpl-nav-left":!0}},i("div",{key:"d5421d83454aadb4252cc244b24c9d3bf9881c69",class:"xpl-top-nav__left-primary",role:"list"},i("slot",{key:"c95fcd2f6365dbc03ee4e4e99db15e3460fd5358",name:"left-aside"})))),i("div",{key:"fa5afd226b5eed1468ef066fba956852f7f0d65d",class:{"xpl-top-nav__aside":!0,"xpl-nav-right":!0}},i("div",{key:"d84a6fc492147429d725b49681637a203fc36c35",class:"xpl-nav-right__list"},i("div",{key:"63ef2b0eddef28da05d172bb05b2edd64ad173dd",class:"xpl-top-nav__right-rail"},i("div",{key:"3ead1c8076e1ed51283ec6251c4ed252835457e3",class:"xpl-top-nav__right-lead"},i("slot",{key:"8076be6d9d726a2b380f41077d114b37cdfe15e9",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],userMenuSlotPresent:[32],userMenuTriggerSlotPresent:[32]},void 0,{navControl:[{onNavControlChanged:0}]}]),d=p,c=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),p);break;case"xpl-button":customElements.get(o(t))||a();break;case"xpl-icon":customElements.get(o(t))||l();break;case"xpl-popover":customElements.get(o(t))||r();break;case"xpl-top-nav-item":customElements.get(o(t))||h()}}))};export{d as XplTopNav,c as defineCustomElement}
+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-DywQ3S73.js";import{d as h}from"./p-imCMp2Nl.js";import{d as p}from"./p-BGqQbjLl.js";import{d as c}from"./p-BnTsRbko.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:"8f9f8e171b2b04706360048965e8e8a40f3f7013",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:"2c05b69b2918753c4f928e53d92c6ca737a92b59","aria-label":this.label??"top-navigation-bar",class:"xpl-top-nav__bar"},i("div",{key:"1dd5722748946d0adfad6cc40da03c21012d65b2",class:"xpl-top-nav__inner-left"},this.navControl&&i("button",{key:"810e68f589ec13b942a78c877fea816407c05287",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:"550653cbd1d61c7b80a31ab48dce59936a107128",class:"xpl-top-nav__control-icon",icon:"menu",size:32})),this.hasBrand&&i("div",{key:"6509a9a42b693b925204a9a42a34c0071d73f485",class:"xpl-top-nav__brand-bar"},i("xpl-top-nav-item",{key:"623cfb95bd0a6581a057ddf37aa3920ee58b5734",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:"61d8a6d485380c39ffa74cd8cfbea37df32060dd",class:{"xpl-top-nav__aside":!0,"xpl-nav-left":!0}},i("div",{key:"3aab27091f543a9c6a813043883c218791cfaa4a",class:"xpl-top-nav__left-primary",role:"list"},i("slot",{key:"93ff48c9bb3e0fa00b23a707da84d222ad74224d",name:"left-aside"})))),i("div",{key:"d92afdae9ac68d49a370fb41b39aeef2b956af1f",class:{"xpl-top-nav__aside":!0,"xpl-nav-right":!0}},i("div",{key:"36fadad47ed2862f88c1f42e1b95530d2e06b046",class:"xpl-nav-right__list"},i("div",{key:"5b35413cbfcc5fd9af1e491f1a1f14d41ae35c0d",class:"xpl-top-nav__right-rail"},i("div",{key:"37d00bfe95cdf35345ed9ec273a159255efc31a2",class:"xpl-top-nav__right-lead"},i("slot",{key:"b64f92c5886ef929b51fde06d48ea1fbf3660d44",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-BT_Lq3Vd.js";import{d as l}from"./p-ByJRw26d.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:"e990b6a7176fdb1d48fd1859f359f217a6600015"},i("nav",{key:"3b331ed5294f208dcededae078659d9b0d7b118f","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:"444363c10471bd6206d39d2da37bafdae6291137",name:"main"})))}},[260,"xpl-utility-bar",{navControl:[4,"nav-control"],isNavOpenAtStartup:[4,"is-nav-open-at-startup"],open:[32]}]),r=o,d=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{r as XplUtilityBar,d as defineCustomElement}
+import{p as t,H as a,d as s,h as i,c as e,t as n}from"./p-BSHdGbmH.js";import{d as l}from"./p-imCMp2Nl.js";const o=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.navOpen=s(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:"7ad1182d72a730df69cf714b665a6d02eac2e51a"},i("nav",{key:"f0d5ffc31cabc8a075cae2c1ebdaa0e82ca53943","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:"dfbacf5921308bd6056b8e6d903b31df28613ce0",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/css/typography.stories.js

@@ -1,4 +1,13 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../.storybook/utils/wait-for-hydration";
 export default {
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
     title: 'Base Styles/Typography',
     argTypes: {
         headingOne: {

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

@@ -1,6 +1,39 @@
 # xpl-application-shell
 
+`xpl-application-shell` is the top-level layout container for an Apollo application. It arranges the main navigation rail, an optional utility bar, an optional secondary navigation column, and the page content into a responsive CSS grid, and drives the CSS-only open/close animation of the navigation rail.
 
+## Usage
+
+```html
+<xpl-application-shell with-subnav is-nav-open-at-startup="true">
+  <xpl-main-nav slot="nav" width="default"><!-- ... --></xpl-main-nav>
+  <xpl-utility-bar slot="utility"><!-- ... --></xpl-utility-bar>
+  <xpl-secondary-nav slot="subnav"><!-- ... --></xpl-secondary-nav>
+  <xpl-content-area slot="content"><!-- ... --></xpl-content-area>
+</xpl-application-shell>
+```
+
+## Design Tokens
+
+Tokens used by this component from `@xplortech/apollo-foundation`. All purpose-specific tokens theme automatically in dark mode (no `.dark` overrides in the CSS).
+
+**Color**
+
+| Element | Property | Token | Resolves (light / dark) |
+| --- | --- | --- | --- |
+| Host nav rail | `background-color` | `--xpl-background-surface-inverse-on-light` | neutral-1000 / neutral-1000 (always dark) |
+| `&__subnav` | `background-color` | `--xpl-background-surface-default` | neutral-0 / neutral-1000 |
+| `&__content` | `background-color` | `--xpl-background-surface-subtlest` | neutral-50 / neutral-900 |
+| `&__subnav`, `&__content` | `color` (on-surface text) | `--xpl-text-default` | neutral-900 / neutral-50 |
+| `&__subnav` (top), `&__content` (left/top), `&__utility` (left) | `border-color` | `--xpl-border-default` | neutral-400 / neutral-600 |
+
+**Border width**
+
+- `--xpl-border-small` (0.0625rem / 1px) — all shell dividers.
+
+**Layout literals (not themeable)**
+
+The nav rail widths / transforms (`74px`, `112px`, `240px`) drive the CSS-only open/close animation and are kept as literals; no Foundation size token set covers animated grid-track widths. `grid-template`, `100vh`, and `-webkit-fill-available` are also kept as literals. See `TECH_DEBT.md`.
 
 <!-- Auto Generated Below -->
 

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

@@ -2,6 +2,13 @@
 
 This backdrop is used to add a transparent darker layer on top of the content area to focus the user’s attention. Typically used when a dialog such as a modal or slide out panel is active. 
 
+### Design Tokens
+
+Tokens used by this component from `@xplortech/apollo-foundation`.
+
+**Color**
+- `--xpl-background-surface-backdrop` — backdrop scrim fill. The token bakes the neutral alpha into the color (`rgba(48 45 59 / 0.5)` light / `rgba(48 45 59 / 0.75)` dark), so the standalone `opacity` property was removed to avoid double-dimming. It themes automatically — no `.dark` override.
+
 <!-- Auto Generated Below -->
 
 

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

@@ -147,12 +147,14 @@ Tokens used by this component from `@xplortech/apollo-foundation`.
 
  - [xpl-avatar](../xpl-avatar)
  - [xpl-list-item](../xpl-list/xpl-list-item)
+ - [xpl-tab](../xpl-tab)
 
 ### Graph
 ```mermaid
 graph TD;
   xpl-avatar --> xpl-badge
   xpl-list-item --> xpl-badge
+  xpl-tab --> xpl-badge
   style xpl-badge fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

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

@@ -7,6 +7,15 @@ This component can be used as a wrapper to `<xpl-breadcrumb-item>` components.
 The number of items is not restricted, although per Apollo's design guidelines, a maximum of three items should be used.
 In small screens (xs), only the 2 deepest items will be visible, even if 3 items are provided.
 
+### Design Tokens
+
+Tokens used by this component from `@xplortech/apollo-foundation` (light/dark handled automatically — no `.dark` overrides).
+
+**Color**
+- `--xpl-text-subdued` — breadcrumb list text and the separator glyph
+- `--xpl-text-link-hovered` — hovered breadcrumb item (per Figma node 1536:178167 UX note)
+- `--xpl-text-default` — current page (last item)
+
 <!-- Auto Generated Below -->
 
 

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

@@ -50,7 +50,7 @@ Use `icon` with a name from the xpl-icon library; use `icon-position` to place t
 Use `icon-only` when the button shows only an icon (no label). Always set `icon` and use a descriptive `aria-label` on the host or inner button for accessibility:
 
 ```html
-<xpl-button icon-only icon="x" aria-label="Close"></xpl-button>
+<xpl-button icon-only icon="xmark" aria-label="Close"></xpl-button>
 ```
 
 ### Loading state
@@ -126,7 +126,7 @@ The **`state`** prop (`neutral` | `warning` | `success`) is deprecated. Use **`s
 
 - The component renders a native `<button>`, so it is focusable and keyboard-activable by default.
 - When **`is-loading`** is true, the inner button has `aria-busy="true"` and the loading spinner is marked **`aria-hidden="true"`** so the label remains the accessible name.
-- For **icon-only** buttons, provide an accessible name via **`aria-label`** on the host (e.g. `<xpl-button icon-only icon="x" aria-label="Close">`) so screen readers announce the action.
+- For **icon-only** buttons, provide an accessible name via **`aria-label`** on the host (e.g. `<xpl-button icon-only icon="xmark" aria-label="Close">`) so screen readers announce the action.
 - For **WAI-ARIA composite widgets** (like tabs), use the **`controlAttrs`** prop to apply `id`, `role`, `aria-controls`, `aria-selected`, and `aria-current` directly to the inner `<button>`. This is preferred over setting these attributes on the host, which would be forwarded and removed from the host.
 
 <!-- Auto Generated Below -->
@@ -166,6 +166,7 @@ The **`state`** prop (`neutral` | `warning` | `success`) is deprecated. Use **`s
  - [xpl-slideout](../xpl-slideout)
  - [xpl-spotlight](../xpl-spotlight)
  - [xpl-tab](../xpl-tab)
+ - [xpl-toast](../xpl-toast)
  - [xpl-top-nav](../xpl-top-nav)
 
 ### Depends on
@@ -184,6 +185,7 @@ graph TD;
   xpl-slideout --> xpl-button
   xpl-spotlight --> xpl-button
   xpl-tab --> xpl-button
+  xpl-toast --> xpl-button
   xpl-top-nav --> xpl-button
   style xpl-button fill:#f9f,stroke:#333,stroke-width:4px
 ```

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

@@ -24,6 +24,18 @@ The checkbox component uses the following Apollo Foundation tokens:
 | `--xpl-border-small` | Border width (1px) |
 | `--xpl-size-100` | Checkbox dimensions (16px) |
 
+### Label tokens (shared `label.css`)
+
+The checkbox label and description are styled by the shared `.xpl-label` / `.xpl-description` classes.
+
+| Token | Usage |
+|-------|-------|
+| `--xpl-text-strong` | Label text color (matches `.xpl-input-label`; resolves to white in dark mode) |
+| `--xpl-text-disabled` | Disabled label text color |
+| `--xpl-text-subdued` | Description text color (enabled and disabled) |
+| `.xpl-text-body` | Label typography: `--xpl-font-size-body` (14px) / normal / 1.4286 line-height |
+| `.xpl-text-callout` | Description typography: `--xpl-font-size-callout` (12px) / normal / 1.3333 line-height |
+
 <!-- Auto Generated Below -->
 
 

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

@@ -1,6 +1,27 @@
 # xpl-choicelist
 
 A Choice List allows users to make single or multiple selections from a list of choices.  This component is meant to consume the radio and checkbox components, either styled or unstyled, then allow for customizing an option list very quickly.
+
+## Design Tokens
+
+Tokens used by this component from `@xplortech/apollo-foundation`.
+
+| Token | Usage |
+|-------|-------|
+| `--xpl-text-strong` | Heading (`h3`) text color |
+| `--xpl-text-subdued` | Description (`p`) text color |
+| `--xpl-background-surface-information` | Selected row background (styled variant) — matches the `xpl-checkbox` / `xpl-radio` styled selected state |
+| `--xpl-border-default` | Styled container border and per-row dividers — matches the `xpl-checkbox` / `xpl-radio` styled card border |
+| `--xpl-border-radius-small` | Styled container corner radius (4px) — matches the `xpl-checkbox` / `xpl-radio` styled card |
+| `--xpl-border-small` | Border width (1px) |
+| `--xpl-border-none` | Removes the divider on the last styled row (0) |
+| `.xpl-text-title-5` | Heading typography: `--xpl-font-size-title-5` (14px) / medium (500) / 1.4286 line-height |
+| `.xpl-text-callout` | Description typography: `--xpl-font-size-callout` (12px) / normal / 1.3333 line-height |
+| `--xpl-space-{8,12,16}` | Heading, row, and styled input/label spacing |
+| `--xpl-size-100` | Control width used to offset the styled label padding (16px) |
+
+Choice item labels and descriptions inherit their text tokens from the shared `label.css` (see `xpl-checkbox` / `xpl-radio`).
+
 <!-- Auto Generated Below -->
 
 

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

@@ -2,6 +2,14 @@
 
 The `<xpl-content-area>` sets up the area for the main content of the page. This component renders a `<main>` element with an unnamed `<slot>`, and should not be combined with another `<main>` in the same page.
 
+### Design Tokens
+
+Tokens used by this component from `@xplortech/apollo-foundation`.
+
+**Color**
+- `--xpl-background-surface-subtlest` — page surface behind the content (neutral-50 light / neutral-900 dark). Themes automatically — no `.dark` override. Matches the intended application-shell content surface.
+- `--xpl-text-default` — default text color (neutral-900 light / neutral-50 dark).
+
 <!-- Auto Generated Below -->
 
 

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

@@ -4,6 +4,32 @@ Data Cards display snippets of information and can be linked to larger data sets
 
 The `icon` and `smallStatIcon` properties accept icon names as strings. See [xpl-icon available icons](../xpl-icon/ICONS.md) for the complete list.
 
+## Design Tokens
+
+The card is styled entirely with Apollo Foundation purpose-specific tokens (dark mode is automatic — no `.dark` overrides).
+
+| Element / state | Property | Token |
+| --- | --- | --- |
+| Host surface | `background-color` | `--xpl-background-surface-default` |
+| Host / anchor border | `border-color` | `--xpl-border-default` |
+| Host, header, stats text | `color` | `--xpl-text-default` |
+| Header arrow (chevron) icon | `color` | `--xpl-icon-default` |
+| Detail text | `color` | `--xpl-text-subdued` |
+| `.positive` stat | `color` | `--xpl-text-positive` |
+| `.negative` stat | `color` | `--xpl-text-negative` |
+| `.neutral` stat | `color` | `--xpl-text-subdued` |
+| Primary leading icon | `color` | `--xpl-icon-brand` (orange) |
+| Secondary leading icon | `color` | `--xpl-background-action-primary-default` (purple) |
+| Anchor hover / active border | `border` | `--xpl-border-small` + `--xpl-background-action-primary-default` |
+| Anchor focus-visible border | `border` | `--xpl-border-small` + `--xpl-border-focus` (purple) |
+| Anchor focus-visible outline | `outline` | `--xpl-border-focus`, 2px width / 2px offset |
+| Anchor hover / focus-visible radius | `border-radius` | `--xpl-border-radius-default` |
+| Anchor hover shadow | `box-shadow` | `--xpl-background-surface-transparent-10` / `--xpl-background-surface-transparent-5` |
+| Header / stat spacing | `margin` | `--xpl-space-4`, `--xpl-space-6` |
+| Container-query stat | `font-size` | `--xpl-font-size-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`).
+
 <!-- Auto Generated Below -->
 
 

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

@@ -5,6 +5,32 @@ A selection within a dropdown does not change the parent trigger.
 
 ***If you want to present a list of **options** a user can select, or multi-select options, please use [XPL-Select](https://apollo.xplordocs.com/?path=/story/components-select--select).***
 
+### Design Tokens
+
+Tokens used by this component from `@xplortech/apollo-foundation`. The panel surface and border are aligned with the migrated [xpl-popover](../xpl-popover).
+
+**Color**
+- `--xpl-background-surface-default` — panel background
+- `--xpl-text-default` — panel text color (inherited default), option label color, and heading color
+- `--xpl-icon-default` — leading option icon color (`--xpl-icon` via the `icon` prop)
+- `--xpl-border-default` — panel border and heading bottom border
+- `--xpl-text-subdued` — list-item subtitle color
+- `--xpl-background-action-tertiary-hover` — option `:focus` background
+- `--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
+
+**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-radius-small` — panel corner radius (4px), matching the anchored `xpl-select` trigger
+
+**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
+
+**Note:** The multi-select checkmark is a data-URI SVG whose `fill` cannot be themed by a CSS variable, so a `.dark` override supplies the dark-mode glyph; and the disabled option keeps `opacity-60`. Both are tracked in `TECH_DEBT.md`.
+
 <!-- Auto Generated Below -->
 
 
@@ -22,7 +48,7 @@ A selection within a dropdown does not change the parent trigger.
 | `selectOnFocus`          | `select-on-focus`   | whether selection should be made when focusing on interactive element                                                                  | `boolean`                                                                                                                                                            | `false`          |
 | `selectedValues`         | `selected-values`   | The currently selected value(s) in the dropdown.                                                                                       | `string \| string[]`                                                                                                                                                 | `undefined`      |
 | `triggerId`              | `trigger-id`        | the id for the element that triggers the open state                                                                                    | `string`                                                                                                                                                             | `undefined`      |
-| `update`                 | --                  | call back function invoked when a selection is made                                                                                    | `(e: any, { component }: { component: Dropdown; }) => void`                                                                                                          | `undefined`      |
+| `update`                 | --                  | call back function invoked when a selection is made                                                                                    | `(e: Event, context: { component: Dropdown; }) => void`                                                                                                              | `undefined`      |
 
 
 ## Events
@@ -34,16 +60,16 @@ A selection within a dropdown does not change the parent trigger.
 
 ## Methods
 
-### `handleSelect(e: any, { component }: { component: XplDropdownOption; }) => Promise<void>`
+### `handleSelect(e: Event | null, { component }: DropdownSelectContext) => Promise<void>`
 
 called on dropdown option click and keydown events to update isSelected states
 
 #### Parameters
 
-| Name  | Type                                | Description |
-| ----- | ----------------------------------- | ----------- |
-| `e`   | `any`                               |             |
-| `__1` | `{ component: XplDropdownOption; }` |             |
+| Name  | Type                    | Description |
+| ----- | ----------------------- | ----------- |
+| `e`   | `Event`                 |             |
+| `__1` | `DropdownSelectContext` |             |
 
 #### Returns
 

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

@@ -4,6 +4,41 @@
 
 The Dynamic Table is a rich content table that can accommodate multiple types of data. 
 
+## Design Tokens
+
+The table, cells, and rows use Apollo Foundation purpose-specific tokens (light / dark resolve automatically — no `.dark` overrides):
+
+**Table** (`.xpl-dynamic-table`)
+
+| Element | Property | Token |
+| --- | --- | --- |
+| Grid columns | `grid-template-columns` | `--xpl-column-widths` (set at runtime from header cell widths) |
+| Row gap (with accordions) | `row-gap` (8px) | `--xpl-space-8` |
+
+**Cell** (`.xpl-dynamic-table-cell`)
+
+| Element | Property | Token |
+| --- | --- | --- |
+| Cell | Background | `--xpl-background-surface-default` |
+| Cell | Border | `--xpl-border-default` |
+| Cell | Text | `--xpl-text-default` |
+| Cell | Typography (title-5 / medium / 1.4286) | `@extend .xpl-text-title-5` |
+| Cell | Height (56px) | `--xpl-size-350` |
+| Cell | Min width (48px) | `--xpl-size-300` |
+| Cell rounded corners | Border radius (8px) | `--xpl-border-radius-default` |
+| Cell icons (chevron, kebab) | Color | `--xpl-icon-default` |
+| Dropdown button (`:focus-visible`) | Inset ring | `--xpl-border-focus` |
+
+**Row** (`.xpl-dynamic-table-row`)
+
+| State | Property | Token |
+| --- | --- | --- |
+| First cell | Left border | `--xpl-border-default` |
+| Selected | Cell background | `--xpl-background-surface-information` |
+| Disabled | Cell background | `--xpl-background-surface-subtlest` |
+| Disabled | Cell / badge text | `--xpl-text-disabled` |
+| Disabled | Cell icons | `--xpl-icon-disabled` |
+
 <!-- Auto Generated Below -->
 
 

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

@@ -4,6 +4,24 @@ The toolbar component allows users to manipulate selections within the Dynamic T
 
 > **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
 
+## Design Tokens
+
+The header uses Apollo Foundation purpose-specific tokens (light / dark resolve automatically — no `.dark` overrides):
+
+| Element | Property | Token |
+| --- | --- | --- |
+| Header bar | Background | `--xpl-background-surface-subtlest` |
+| Header bar | Border | `--xpl-border-default` |
+| Header bar | Text | `--xpl-text-subdued` |
+| Header bar | Typography (title-5 / medium / 1.4286) | `@extend .xpl-text-title-5` |
+| Header bar | Min height (56px) | `--xpl-size-350` |
+| Header bar corners | Border radius (8px) | `--xpl-border-radius-default` |
+| Toggle area (`:focus-visible`) | Outline color | `--xpl-border-focus` |
+| Chevron icon | Color | `--xpl-icon-default` |
+| Content panel | Background | `--xpl-background-surface-default` |
+| Content panel | Border | `--xpl-border-default` |
+| Content panel | Text | `--xpl-text-link-default` |
+| Content grid | `grid-template-columns` | `--xpl-column-widths` (set at runtime by `xpl-dynamic-table`) |
 
 <!-- Auto Generated Below -->
 

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

@@ -14,6 +14,21 @@ You can also browse icons visually in [Storybook](?path=/story/components-icons-
 
 The `icon` property accepts any icon name as a string. See the links above for the full list of available icons.
 
+### Design Tokens
+
+Tokens used by this component from `@xplortech/apollo-foundation`.
+
+**Color — icon accent backgrounds (`&--with-background`)**
+
+Subtle per-hue accent tints use primitive color tokens (`-50` light / `-900` dark). Foundation has no purpose-specific token for these subtle tints (`--xpl-background-accent-*` are far bolder), so primitives are used and the `.dark` overrides are **deliberately retained** to swap the dark value. This is a documented exception to the "no `.dark`" migration DoD (tracked in `TECH_DEBT.md`).
+
+- `--xpl-icon-default` — fallback glyph color for accent-background icons (neutral-900 light / neutral-50 dark). Set explicitly so the glyph themes with the background instead of relying on inherited `currentColor` (which left a dark glyph on the dark `-900` tint in dark mode). Note: `xpl-data-card` also uses the accent-background prop and overrides the glyph color with a hue-matched value directly on `.xpl-icon`, so it is unaffected by this fallback.
+- `--xpl-color-neutral-50` / `--xpl-color-neutral-900` — `--gray` background
+- `--xpl-color-orange-50` / `--xpl-color-orange-900` — `--orange` background
+- `--xpl-color-purple-50` / `--xpl-color-purple-900` — `--purple` background
+- `--xpl-color-red-50` / `--xpl-color-red-900` — `--red` background
+- `--xpl-color-yellow-50` / `--xpl-color-yellow-900` — `--yellow` background
+
 ---
 
 <!-- Auto Generated Below -->
@@ -52,9 +67,12 @@ The `icon` property accepts any icon name as a string. See the links above for t
  - [xpl-progress-bar](../xpl-progress-bar)
  - [xpl-progress-indicator](../xpl-progress-indicator)
  - [xpl-select](../xpl-select)
+ - [xpl-side-nav-header-item](../xpl-side-nav/xpl-side-nav-header-item)
  - [xpl-side-nav-item](../xpl-side-nav/xpl-side-nav-item)
+ - [xpl-side-nav-section](../xpl-side-nav/xpl-side-nav-section)
  - [xpl-slideout](../xpl-slideout)
  - [xpl-spotlight](../xpl-spotlight)
+ - [xpl-tab](../xpl-tab)
  - [xpl-table](../xpl-table)
  - [xpl-table-header-cell](../xpl-table-header-cell)
  - [xpl-tag](../xpl-tag)
@@ -87,9 +105,12 @@ graph TD;
   xpl-progress-bar --> xpl-icon
   xpl-progress-indicator --> xpl-icon
   xpl-select --> xpl-icon
+  xpl-side-nav-header-item --> xpl-icon
   xpl-side-nav-item --> xpl-icon
+  xpl-side-nav-section --> xpl-icon
   xpl-slideout --> xpl-icon
   xpl-spotlight --> xpl-icon
+  xpl-tab --> xpl-icon
   xpl-table --> xpl-icon
   xpl-table-header-cell --> xpl-icon
   xpl-tag --> xpl-icon

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

@@ -2,6 +2,24 @@
 
 
 
+### Design Tokens
+
+Tokens used by this component from `@xplortech/apollo-foundation`.
+
+**Color**
+- `--xpl-border-default` — display and swatch border
+- `--xpl-text-default` — display text color
+- `--xpl-text-subdued` — placeholder text color
+- `--xpl-background-action-disabled` — disabled display background
+- `--xpl-border-negative` — error state border color (unified with input-date / input-time)
+- `--xpl-icon-default` — toggle icon color
+- `--xpl-background-action-primary-default` — toggle icon hover color (purple; intentionally not `--xpl-icon-brand`, which is orange)
+- `--xpl-border-subtle` — picker saturation/lightness grid, preview, and range-track borders
+- `--xpl-color-neutral-0`, `--xpl-color-neutral-600` — fixed-color picker thumb ring/shadow (functional, non-themeable)
+
+**Typography**
+- `__placeholder`, `__value` — `@extend .xpl-text-body` (14 px normal)
+
 <!-- Auto Generated Below -->
 
 

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

@@ -2,6 +2,19 @@
 
 
 
+### Design Tokens
+
+Tokens used by this component from `@xplortech/apollo-foundation`.
+
+**Color**
+- `--xpl-text-default` — selected file list text color
+- `--xpl-text-subdued` — accepted-types (help) text color
+- `--xpl-icon-default` — remove (x-circle) icon color
+
+**Typography**
+- `__file-name` — `@extend .xpl-text-callout` (12 px normal) — uploaded file names
+- `__accept` — `@extend .xpl-text-caption` (10 px normal) — accepted file types help text
+
 <!-- Auto Generated Below -->
 
 

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

@@ -2,6 +2,15 @@
 
 
 
+### Design Tokens
+
+Tokens used by this component from `@xplortech/apollo-foundation`.
+
+**Color**
+- `--xpl-border-negative` — error state border color (unified with input-date / input-color)
+- `--xpl-icon-default` — leading clock icon color (matches input-date's calendar icon)
+- `--xpl-background-surface-transparent-10`, `--xpl-background-surface-transparent-5` — time dropdown box-shadow (purpose-specific; flips to white-based transparency in dark mode)
+
 <!-- Auto Generated Below -->
 
 

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

@@ -2,6 +2,24 @@
 
 A card is a container and can contain any type of information. Cards contain actions and a content slot. Cards are flexible and can be arranged in grids or lists.
 
+## Design Tokens
+
+The card is styled entirely with Apollo Foundation purpose-specific tokens (dark mode is automatic — no `.dark` overrides).
+
+| Element / state | Property | Token |
+| --- | --- | --- |
+| Host surface | `background-color` | `--xpl-background-surface-default` |
+| Host / anchor border | `border-color` | `--xpl-border-default` |
+| Host, header text | `color` | `--xpl-text-default` |
+| Header arrow (chevron) icon | `color` | `--xpl-icon-default` |
+| Description text | `color` | `--xpl-text-subdued` |
+| Anchor hover / active border | `border` | `--xpl-border-small` + `--xpl-background-action-primary-default` |
+| Anchor focus-visible border | `border` | `--xpl-border-small` + `--xpl-border-focus` (purple) |
+| Anchor focus-visible outline | `outline` | `--xpl-border-focus`, 2px width / 2px offset |
+| Anchor hover / focus-visible radius | `border-radius` | `--xpl-border-radius-default` |
+| Anchor hover shadow | `box-shadow` | `--xpl-background-surface-transparent-10` / `--xpl-background-surface-transparent-5` |
+| Header / tooltip / icon spacing | `margin` | `--xpl-space-4`, `--xpl-space-6`, `--xpl-space-8` |
+
 <!-- Auto Generated Below -->
 
 

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

@@ -328,14 +328,14 @@ Type: `Promise<void>`
 ```mermaid
 graph TD;
   xpl-list --> xpl-list-item
-  xpl-list-item --> xpl-avatar
   xpl-list-item --> xpl-icon
   xpl-list-item --> xpl-badge
   xpl-list-item --> xpl-button
   xpl-list-item --> xpl-radio
   xpl-list-item --> xpl-divider
-  xpl-avatar --> xpl-badge
+  xpl-list-item --> xpl-avatar
   xpl-button --> xpl-icon
+  xpl-avatar --> xpl-badge
   style xpl-list fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

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

@@ -72,24 +72,24 @@ Single row for [`xpl-list`](../xpl-list/readme.md). **Slot-based** rows expose `
 
 ### Depends on
 
-- [xpl-avatar](../../xpl-avatar)
 - [xpl-icon](../../xpl-icon)
 - [xpl-badge](../../xpl-badge)
 - [xpl-button](../../xpl-button)
 - [xpl-radio](../../xpl-radio)
 - [xpl-divider](../../xpl-divider)
+- [xpl-avatar](../../xpl-avatar)
 
 ### Graph
 ```mermaid
 graph TD;
-  xpl-list-item --> xpl-avatar
   xpl-list-item --> xpl-icon
   xpl-list-item --> xpl-badge
   xpl-list-item --> xpl-button
   xpl-list-item --> xpl-radio
   xpl-list-item --> xpl-divider
-  xpl-avatar --> xpl-badge
+  xpl-list-item --> xpl-avatar
   xpl-button --> xpl-icon
+  xpl-avatar --> xpl-badge
   xpl-list --> xpl-list-item
   style xpl-list-item fill:#f9f,stroke:#333,stroke-width:4px
 ```