@xplortech/apollo-core 2.11.0 → 3.0.0

package/dist/components/xpl-tabs.js

@@ -1 +1 @@
-import{p as t,H as s,d as e,h as i,c as a,t as n}from"./p-BT_Lq3Vd.js";import{d as o}from"./p-DKUNbsb0.js";import{d as l}from"./p-BDWXBWGE.js";import{d as h}from"./p-2xGSxBGa.js";import{d as r}from"./p-CUYkG-PB.js";import{d}from"./p-ByJRw26d.js";import{d as c}from"./p-gfb3l9Pr.js";import{d as p}from"./p-ZTFt9sBy.js";let b=0;function u(t){var e,i;const a=t.querySelector("xpl-button button");if(a){const t=a.cloneNode(!0);if(t instanceof s){t.querySelectorAll(".xpl-button__icon, xpl-icon").forEach((t=>t.remove()));const s=null===(e=t.textContent)||void 0===e?void 0:e.replace(/\s+/g," ").trim();if(s)return s}}const n=t.querySelector(".xpl-tab__button");return n?Array.from(n.childNodes).filter((t=>t.nodeType===Node.TEXT_NODE)).map((t=>{var s;return(null!==(s=t.textContent)&&void 0!==s?s:"").trim()})).join(" "):null!==(i=t.getAttribute("target"))&&void 0!==i?i:""}const m=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.tabChange=e(this,"tabChange",7),this.tabHeadings=[],this.tabPanels=[],this.tablistKeydownBound=!1,this.activeBarPosition={left:0,width:0},this.choicesTick=1,this.isMobileSelectChange=!1,this.selectedValue="",this.disabled=!1,this.fullWidth=!1,this.type="tabs",this.handleTabChange=t=>{this.applySelection(t)},this.onTablistKeydown=async t=>{var s,e;if(this.disabled)return;const i=null===(e=null===(s=t.target)||void 0===s?void 0:s.closest)||void 0===e?void 0:e.call(s,"xpl-tab");if(!i||!this.tabHeadings.includes(i))return;const{key:a}=t;let n=!1,o=!1;this.isTablistRtl()?"ArrowLeft"===a||"ArrowDown"===a?n=!0:"ArrowRight"!==a&&"ArrowUp"!==a||(o=!0):"ArrowRight"===a||"ArrowDown"===a?n=!0:"ArrowLeft"!==a&&"ArrowUp"!==a||(o=!0);const l=n||o,h="Home"===a;if(!l&&!h&&"End"!==a)return;const r=this.getEnabledTabHeadingsSync();if(0===r.length)return;const d=r.indexOf(i);if(-1===d)return;let c;c=l?n?(d+1)%r.length:(d-1+r.length)%r.length:h?0:r.length-1;const p=r[c],b=null==p?void 0:p.getAttribute("target");if(!b)return;const u=i.getAttribute("target");t.preventDefault(),b!==u&&(this.applySelection(b),await p.focusTrigger(),this.tabChange.emit(b))}}onDisabledChanged(){this.syncGroupDisabledOnTabs(),this.disabled||this.syncRovingTabindex()}onFullWidthChanged(){this.syncFullWidthOnTabs()}onTypeChanged(){this.syncVariantOnTabs()}onValueChanged(t){this.applySelection(t)}connectedCallback(){this.el.hasAttribute("data-tabs-instance-id")||(b+=1,this.el.setAttribute("data-tabs-instance-id","xpl-tg-"+b)),"undefined"!=typeof MutationObserver&&(this.observer=new MutationObserver((()=>{this.collectTabs(!0)})),this.observer.observe(this.el,{childList:!0,subtree:!0}))}disconnectedCallback(){var t;null===(t=this.observer)||void 0===t||t.disconnect(),this.headingsContainerRef&&this.tablistKeydownBound&&(this.headingsContainerRef.removeEventListener("keydown",this.onTablistKeydown),this.tablistKeydownBound=!1),void 0!==this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=void 0)}componentWillLoad(){this.selectedValue=this.getDefaultValue()}componentDidLoad(){this.collectTabs(!1),this.attachTablistKeydown()}componentDidUpdate(){this.updateActiveBarPosition(),this.syncRovingTabindex()}componentDidRender(){!this.tablistKeydownBound&&this.headingsContainerRef&&this.attachTablistKeydown()}onWindowResize(){this.updateActiveBarPosition()}syncGroupDisabledOnTabs(){this.tabHeadings.forEach((t=>{this.disabled?t.setAttribute("data-group-disabled",""):t.removeAttribute("data-group-disabled")}))}applySelection(t){this.tabHeadings.forEach((s=>{t===s.getAttribute("target")?s.setAttribute("selected",""):s.removeAttribute("selected")})),this.tabPanels.forEach((s=>{t===s.getAttribute("target")?s.setAttribute("selected",""):s.removeAttribute("selected")})),this.syncGroupDisabledOnTabs(),void 0!==this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame((()=>{this.rafId=void 0,this.selectedValue=t,this.updateActiveBarPosition(),this.syncRovingTabindex()}))}isOwnedTabOrPanel(t){return t.closest("xpl-tabs")===this.el}collectTabs(t){this.tabHeadings=Array.from(this.el.querySelectorAll("xpl-tab")).filter((t=>this.isOwnedTabOrPanel(t))),this.tabPanels=Array.from(this.el.querySelectorAll("xpl-tab-panel")).filter((t=>this.isOwnedTabOrPanel(t))),this.syncVariantOnTabs(),this.syncFullWidthOnTabs(),this.applySelection(this.getDefaultValue()),t&&(this.choicesTick+=1)}syncVariantOnTabs(){this.tabHeadings.forEach((t=>{t.variant=this.type}))}syncFullWidthOnTabs(){this.tabHeadings.forEach((t=>{t.fullWidth=this.fullWidth}))}getDefaultValue(){var t,s;return this.value||(null===(s=null===(t=this.tabHeadings)||void 0===t?void 0:t[0])||void 0===s?void 0:s.getAttribute("target"))||""}async syncRovingTabindex(){this.disabled||await Promise.all(this.tabHeadings.map((async t=>{var s;const e=(null!==(s=t.getAttribute("target"))&&void 0!==s?s:"")===this.selectedValue;await t.setTabIndex(e?0:-1)})))}getEnabledTabHeadingsSync(){return this.tabHeadings.filter((t=>{if(this.disabled||t.hasAttribute("disabled"))return!1;const s=t.querySelector("segment"===t.variant?"xpl-button button":".xpl-tab__button");return!(!s||s.disabled)}))}attachTablistKeydown(){const t=this.headingsContainerRef;t&&!this.tablistKeydownBound&&(t.addEventListener("keydown",this.onTablistKeydown),this.tablistKeydownBound=!0)}isTablistRtl(){const t=this.headingsContainerRef;return!!t&&"rtl"===getComputedStyle(t).direction}renderChoices(){return this.tabHeadings.map((t=>{var s;const e=null!==(s=t.getAttribute("target"))&&void 0!==s?s:"",i=this.disabled||t.hasAttribute("disabled"),a="segment"===this.type&&t.getAttribute("icon")||void 0;return Object.assign({label:u(t),value:e,isDisabled:i},a?{icon:a}:{})}))}updateActiveBarPosition(){if("segment"===this.type)return;const t=this.tabHeadings.find((t=>t.getAttribute("target")===this.selectedValue));if(!this.headingsContainerRef||!t)return;const s=t.getBoundingClientRect(),e=this.headingsContainerRef.getBoundingClientRect(),i=s.left-e.left,a=s.width;this.activeBarPosition.left===i&&this.activeBarPosition.width===a||(this.activeBarPosition={left:i,width:a})}mobileSelectClassNames(){const t="xpl-tabs__mobile-select";return"segment"===this.type?t+" xpl-tabs__mobile-select--segment":t}render(){const t="segment"===this.type;return i(a,{key:"712b11ca22e287b8e981c327d1793fbc627c8508",class:{"xpl-tabs":!0,"xpl-tabs--full-width":this.fullWidth,"xpl-tabs--segment":t},"data-choices-tick":this.choicesTick},i("xpl-select",{key:"ca013d1c4848a13e3210e3e010f90969a70b609f",classNames:this.mobileSelectClassNames(),choices:this.renderChoices(),disabled:this.disabled,selectedValues:this.selectedValue,onDropdownStateChange:t=>{t.detail&&(this.isMobileSelectChange=!0)},onChangeEvent:t=>{if(this.isMobileSelectChange){const s=""+t.detail;this.handleTabChange(s),this.tabChange.emit(s),this.isMobileSelectChange=!1}}}),i("nav",{key:"bbabd600ae5e210b7a3e9cfa9c5938f12ee14e1d","aria-orientation":"horizontal",class:"xpl-tabs__headings",role:"tablist",ref:t=>{this.headingsContainerRef=t},onTabChange:t=>{t.stopPropagation(),this.isMobileSelectChange=!1,this.handleTabChange(t.detail),this.tabChange.emit(t.detail)}},!t&&i("div",{key:"fe8c53716bd0fe10b02a22ac3df643aa6627303d",class:"xpl-tabs__active-bar",style:{transform:`translateX(${this.activeBarPosition.left}px)`,width:this.activeBarPosition.width+"px"}}),i("slot",{key:"8a1232936ec72a91e4fcd57f1f35f598a337dd99",name:"heading"})),i("div",{key:"2ef4b61b894a326bc370a1c7631308b8b13261b5",class:"xpl-tabs__panels"},i("slot",{key:"28c9ccce6482c7cbe9ee46960c65bd59aaacb4b9",name:"panel"})))}get el(){return this}static get watchers(){return{disabled:[{onDisabledChanged:0}],fullWidth:[{onFullWidthChanged:0}],type:[{onTypeChanged:0}],value:[{onValueChanged:0}]}}},[260,"xpl-tabs",{disabled:[4],fullWidth:[4,"full-width"],type:[513],value:[1],activeBarPosition:[32],choicesTick:[32],isMobileSelectChange:[32],selectedValue:[32]},[[9,"resize","onWindowResize"]],{disabled:[{onDisabledChanged:0}],fullWidth:[{onFullWidthChanged:0}],type:[{onTypeChanged:0}],value:[{onValueChanged:0}]}]),g=m,f=function(){"undefined"!=typeof customElements&&["xpl-tabs","xpl-dropdown","xpl-dropdown-group","xpl-dropdown-heading","xpl-dropdown-option","xpl-icon","xpl-select","xpl-tag"].forEach((t=>{switch(t){case"xpl-tabs":customElements.get(n(t))||customElements.define(n(t),m);break;case"xpl-dropdown":customElements.get(n(t))||o();break;case"xpl-dropdown-group":customElements.get(n(t))||l();break;case"xpl-dropdown-heading":customElements.get(n(t))||h();break;case"xpl-dropdown-option":customElements.get(n(t))||r();break;case"xpl-icon":customElements.get(n(t))||d();break;case"xpl-select":customElements.get(n(t))||c();break;case"xpl-tag":customElements.get(n(t))||p()}}))};export{g as XplTabs,f as defineCustomElement}
+import{p as t,H as s,d as e,h as i,c as a,t as n}from"./p-BSHdGbmH.js";import{d as o}from"./p-xtOHikY0.js";import{d as h}from"./p-CnVGKN63.js";import{d as l}from"./p-YG9Jza0y.js";import{d}from"./p-DAb-txW3.js";import{d as r}from"./p-l3EZ-agL.js";import{d as c}from"./p-EfW0v54z.js";import{d as p}from"./p-D--kzomA.js";let b=0;function u(t){const e=t.querySelector("xpl-button button");if(e){const t=e.cloneNode(!0);if(t instanceof s){t.querySelectorAll(".xpl-button__icon, xpl-icon, xpl-badge").forEach((t=>t.remove()));const s=t.textContent?.replace(/\s+/g," ").trim();if(s)return s}}const i=t.querySelector(".xpl-tab__button");if(i){const t=Array.from(i.childNodes).filter((t=>t.nodeType===Node.TEXT_NODE)).map((t=>(t.textContent??"").trim())).join(" ").replace(/\s+/g," ").trim();if(t)return t}return t.getAttribute("target")??""}const m=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.tabChange=e(this,"tabChange",7),this.tabHeadings=[],this.tabPanels=[],this.tablistKeydownBound=!1,this.activeBarPosition={left:0,width:0},this.choicesTick=1,this.isMobileSelectChange=!1,this.selectedValue="",this.disabled=!1,this.fullWidth=!1,this.type="tabs",this.handleTabChange=t=>{this.applySelection(t)},this.onTablistKeydown=async t=>{if(this.disabled)return;const s=t.target?.closest?.("xpl-tab");if(!s||!this.tabHeadings.includes(s))return;const{key:e}=t;let i=!1,a=!1;this.isTablistRtl()?"ArrowLeft"===e||"ArrowDown"===e?i=!0:"ArrowRight"!==e&&"ArrowUp"!==e||(a=!0):"ArrowRight"===e||"ArrowDown"===e?i=!0:"ArrowLeft"!==e&&"ArrowUp"!==e||(a=!0);const n=i||a,o="Home"===e;if(!n&&!o&&"End"!==e)return;const h=this.getEnabledTabHeadingsSync();if(0===h.length)return;const l=h.indexOf(s);if(-1===l)return;let d;d=n?i?(l+1)%h.length:(l-1+h.length)%h.length:o?0:h.length-1;const r=h[d],c=r?.getAttribute("target");if(!c)return;const p=s.getAttribute("target");t.preventDefault(),c!==p&&(this.applySelection(c),await r.focusTrigger(),this.tabChange.emit(c))}}onDisabledChanged(){this.syncGroupDisabledOnTabs(),this.disabled||this.syncRovingTabindex()}onFullWidthChanged(){this.syncFullWidthOnTabs()}onTypeChanged(){this.syncVariantOnTabs()}onValueChanged(t){this.applySelection(t)}connectedCallback(){this.el.hasAttribute("data-tabs-instance-id")||(b+=1,this.el.setAttribute("data-tabs-instance-id","xpl-tg-"+b)),"undefined"!=typeof MutationObserver&&(this.observer=new MutationObserver((()=>{this.collectTabs(!0)})),this.observer.observe(this.el,{childList:!0,subtree:!0}))}disconnectedCallback(){this.observer?.disconnect(),this.headingsContainerRef&&this.tablistKeydownBound&&(this.headingsContainerRef.removeEventListener("keydown",this.onTablistKeydown),this.tablistKeydownBound=!1),void 0!==this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=void 0)}componentWillLoad(){this.selectedValue=this.getDefaultValue()}componentDidLoad(){this.collectTabs(!1),this.attachTablistKeydown()}componentDidUpdate(){this.updateActiveBarPosition(),this.syncRovingTabindex()}componentDidRender(){!this.tablistKeydownBound&&this.headingsContainerRef&&this.attachTablistKeydown()}onWindowResize(){this.updateActiveBarPosition()}syncGroupDisabledOnTabs(){this.tabHeadings.forEach((t=>{this.disabled?t.setAttribute("data-group-disabled",""):t.removeAttribute("data-group-disabled")}))}applySelection(t){this.tabHeadings.forEach((s=>{t===s.getAttribute("target")?s.setAttribute("selected",""):s.removeAttribute("selected")})),this.tabPanels.forEach((s=>{t===s.getAttribute("target")?s.setAttribute("selected",""):s.removeAttribute("selected")})),this.syncGroupDisabledOnTabs(),void 0!==this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame((()=>{this.rafId=void 0,this.selectedValue=t,this.updateActiveBarPosition(),this.syncRovingTabindex()}))}isOwnedTabOrPanel(t){return t.closest("xpl-tabs")===this.el}collectTabs(t){this.tabHeadings=Array.from(this.el.querySelectorAll("xpl-tab")).filter((t=>this.isOwnedTabOrPanel(t))),this.tabPanels=Array.from(this.el.querySelectorAll("xpl-tab-panel")).filter((t=>this.isOwnedTabOrPanel(t))),this.syncVariantOnTabs(),this.syncFullWidthOnTabs(),this.applySelection(this.getDefaultValue()),t&&(this.choicesTick+=1)}syncVariantOnTabs(){this.tabHeadings.forEach((t=>{t.variant=this.type}))}syncFullWidthOnTabs(){this.tabHeadings.forEach((t=>{t.fullWidth=this.fullWidth}))}getDefaultValue(){return this.value||this.tabHeadings?.[0]?.getAttribute("target")||""}async syncRovingTabindex(){this.disabled||await Promise.all(this.tabHeadings.map((async t=>{const s=(t.getAttribute("target")??"")===this.selectedValue;await t.setTabIndex(s?0:-1)})))}getEnabledTabHeadingsSync(){return this.tabHeadings.filter((t=>{if(this.disabled||t.hasAttribute("disabled"))return!1;const s=t.querySelector("segment"===t.variant?"xpl-button button":".xpl-tab__button");return!(!s||s.disabled)}))}attachTablistKeydown(){const t=this.headingsContainerRef;t&&!this.tablistKeydownBound&&(t.addEventListener("keydown",this.onTablistKeydown),this.tablistKeydownBound=!0)}isTablistRtl(){const t=this.headingsContainerRef;return!!t&&"rtl"===getComputedStyle(t).direction}renderChoices(){return this.tabHeadings.map((t=>{const s=t.getAttribute("target")??"",e=this.disabled||t.hasAttribute("disabled"),i=t.getAttribute("icon")||void 0;return{label:u(t),value:s,isDisabled:e,...i?{icon:i}:{}}}))}updateActiveBarPosition(){if("segment"===this.type)return;const t=this.tabHeadings.find((t=>t.getAttribute("target")===this.selectedValue));if(!this.headingsContainerRef||!t)return;const s=t.getBoundingClientRect(),e=this.headingsContainerRef.getBoundingClientRect(),i=s.left-e.left,a=s.width;this.activeBarPosition.left===i&&this.activeBarPosition.width===a||(this.activeBarPosition={left:i,width:a})}mobileSelectClassNames(){const t="xpl-tabs__mobile-select";return"segment"===this.type?t+" xpl-tabs__mobile-select--segment":t}render(){const t="segment"===this.type;return i(a,{key:"74e82ed3665bf7d8337d16f6253c2ae79d421473",class:{"xpl-tabs":!0,"xpl-tabs--full-width":this.fullWidth,"xpl-tabs--segment":t},"data-choices-tick":this.choicesTick},i("xpl-select",{key:"8b706667897c20145cdd528b692affb0db7f7ebc",classNames:this.mobileSelectClassNames(),choices:this.renderChoices(),disabled:this.disabled,selectedValues:this.selectedValue,onDropdownStateChange:t=>{t.detail&&(this.isMobileSelectChange=!0)},onChangeEvent:t=>{if(this.isMobileSelectChange){const s=""+t.detail;this.handleTabChange(s),this.tabChange.emit(s),this.isMobileSelectChange=!1}}}),i("nav",{key:"d23f6edc5da0525e4c8fc10aa30af64986fdda36","aria-orientation":"horizontal",class:"xpl-tabs__headings",role:"tablist",ref:t=>{this.headingsContainerRef=t},onTabChange:t=>{t.stopPropagation(),this.isMobileSelectChange=!1,this.handleTabChange(t.detail),this.tabChange.emit(t.detail)}},!t&&i("div",{key:"d2d080ffc049a408f2d93f3ce3bc694c0954ece3",class:"xpl-tabs__active-bar",style:{transform:`translateX(${this.activeBarPosition.left}px)`,width:this.activeBarPosition.width+"px"}}),i("slot",{key:"8c4b1403048b0eba5125abfc22494641aaf955cf",name:"heading"})),i("div",{key:"54a04bd883f364457cdf5922cad8ac2b42eceb61",class:"xpl-tabs__panels"},i("slot",{key:"2b51ebd00605dfbd76c6018d74f63f954016a025",name:"panel"})))}get el(){return this}static get watchers(){return{disabled:[{onDisabledChanged:0}],fullWidth:[{onFullWidthChanged:0}],type:[{onTypeChanged:0}],value:[{onValueChanged:0}]}}},[260,"xpl-tabs",{disabled:[4],fullWidth:[4,"full-width"],type:[513],value:[1],activeBarPosition:[32],choicesTick:[32],isMobileSelectChange:[32],selectedValue:[32]},[[9,"resize","onWindowResize"]],{disabled:[{onDisabledChanged:0}],fullWidth:[{onFullWidthChanged:0}],type:[{onTypeChanged:0}],value:[{onValueChanged:0}]}]),f=m,g=function(){"undefined"!=typeof customElements&&["xpl-tabs","xpl-dropdown","xpl-dropdown-group","xpl-dropdown-heading","xpl-dropdown-option","xpl-icon","xpl-select","xpl-tag"].forEach((t=>{switch(t){case"xpl-tabs":customElements.get(n(t))||customElements.define(n(t),m);break;case"xpl-dropdown":customElements.get(n(t))||o();break;case"xpl-dropdown-group":customElements.get(n(t))||h();break;case"xpl-dropdown-heading":customElements.get(n(t))||l();break;case"xpl-dropdown-option":customElements.get(n(t))||d();break;case"xpl-icon":customElements.get(n(t))||r();break;case"xpl-select":customElements.get(n(t))||c();break;case"xpl-tag":customElements.get(n(t))||p()}}))};export{f as XplTabs,g as defineCustomElement}

package/dist/components/xpl-tag.js

@@ -1 +1 @@
-import{T as s,d as o}from"./p-ZTFt9sBy.js";const t=s,p=o;export{t as XplTag,p as defineCustomElement}
+import{T as o,d as s}from"./p-D--kzomA.js";const m=o,p=s;export{m as XplTag,p as defineCustomElement}

package/dist/components/xpl-toast.js

@@ -1 +1 @@
-import{p as t,H as s,h as e,c as a,t as i}from"./p-BT_Lq3Vd.js";import{d as c}from"./p-ByJRw26d.js";const o=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.variant="neutral",this.showIcon=!0,this.dismissable=!0,this.timeout=8e3,this.handleAnimationEnd=()=>{var t,s;(null===(t=this.el)||void 0===t?void 0:t.classList.contains("xpl-toast--dismissed"))&&(null===(s=this.el)||void 0===s||s.remove())},this.getIcon=()=>{switch(this.variant){case"warning":return e("xpl-icon",{size:24,icon:"alert-hex"});case"success":return e("xpl-icon",{size:24,icon:"check-circle"});default:return e("xpl-icon",{size:24,icon:"comment-alt"})}},this.dismiss=()=>{var t;null===(t=this.el)||void 0===t||t.classList.add("xpl-toast--dismissed")}}componentDidLoad(){this.actionSlot.children.length<1&&setTimeout((()=>{this.dismiss()}),this.timeout)}render(){var t;return e(a,{key:"c9abdb6db66a9dad0d6ed3d2e6d178ea34852c86",class:"xpl-toast xpl-toast--"+this.variant,onAnimationEnd:this.handleAnimationEnd},e("div",{key:"7057e31e0f25dab1ba8b093f1dca15e6f08c44e4",class:"xpl-toast__left"},this.showIcon&&e("div",{key:"7875c518753729ae39a7bb9f2051751924a0d558",class:"xpl-toast__icon xpl-toast__icon--"+this.variant},this.getIcon()),e("div",{key:"e38c7d0593c16f3dfa83bc4e521f89ee644b46d4",class:"xpl-toast__notification"},e("p",{key:"8186437158381780554d2509a806704c52450f8c",class:"xpl-toast__title"},e("slot",{key:"0aa8df0520c33b4576acfb1ad4750a72928b94d5",name:"title"})),""!==this.caption&&e("p",{key:"3a4ce8f73e498373344b8b692e624f177212a70a",class:"xpl-toast__caption"},null===(t=this.caption)||void 0===t?void 0:t.substring(0,85)))),e("div",{key:"636ff5b9476cea09d21b97f3e1b78860a6f10669",class:"xpl-toast__action",ref:t=>{this.actionSlot=t}},e("slot",{key:"733bc27fba998cdbb97cc1124d8449b539a0fc21",name:"action"})),this.dismissable&&e("div",{key:"8f555e8a02c8aed5095ab659a792e19c242dae98",class:"xpl-toast__close"},e("button",{key:"ca64c6cb98c4cda5d2dab208afef54db4832e103",tabIndex:0,onClick:this.dismiss},e("xpl-icon",{key:"bf00f852ecffd16504a8ec95f3f6630b1aa569c9",icon:"x"}))))}get el(){return this}},[260,"xpl-toast",{variant:[1],showIcon:[4,"show-icon"],caption:[1],dismissable:[4],timeout:[2]}]),n=o,d=function(){"undefined"!=typeof customElements&&["xpl-toast","xpl-icon"].forEach((t=>{switch(t){case"xpl-toast":customElements.get(i(t))||customElements.define(i(t),o);break;case"xpl-icon":customElements.get(i(t))||c()}}))};export{n as XplToast,d as defineCustomElement}
+import{p as s,H as t,h as i,c as e,t as a}from"./p-BSHdGbmH.js";import{d as c}from"./p-Chpgh5SL.js";import{d as o}from"./p-l3EZ-agL.js";let n=!1;const l=s(class extends t{constructor(s){super(),!1!==s&&this.__registerHost(),this.caption="",this.dismissible=!0,this.showIcon=!0,this.timeout=8e3,this.variant="neutral",this.handleAnimationEnd=()=>{this.el?.classList.contains("xpl-toast--dismissed")&&this.el?.remove()},this.getIcon=()=>{switch(this.variant){case"warning":return i("xpl-icon",{size:24,icon:"octagon-warning"});case"success":return i("xpl-icon",{size:24,icon:"circle-check"});default:return i("xpl-icon",{size:24,icon:"message-writing"})}},this.dismiss=()=>{this.el?.classList.add("xpl-toast--dismissed")}}handleDismissableChange(){void 0!==this.dismissable&&(n||(n=!0,console.warn('[xpl-toast] The "dismissable" prop is deprecated (misspelled). Use "dismissible" instead.')))}handleTimeoutChange(){this.scheduleAutoDismiss()}disconnectedCallback(){this.clearAutoDismissTimer()}componentWillLoad(){this.handleDismissableChange()}componentDidLoad(){this.scheduleAutoDismiss()}get isDismissible(){return this.dismissable??this.dismissible}clearAutoDismissTimer(){void 0!==this.dismissTimerId&&(clearTimeout(this.dismissTimerId),this.dismissTimerId=void 0)}scheduleAutoDismiss(){this.clearAutoDismissTimer(),(this.actionSlot?.children?.length??0)<1&&this.timeout>0&&(this.dismissTimerId=setTimeout((()=>{this.dismiss()}),this.timeout))}render(){return i(e,{key:"8628e33a84d0ca36d5b99c791cf7860cadae6fb8",class:"xpl-toast xpl-toast--"+this.variant,onAnimationEnd:this.handleAnimationEnd},i("div",{key:"d1ea50362731f7cef97152eac2962f4d4084c514",class:"xpl-toast__left"},this.showIcon&&i("div",{key:"7eab4f78d0f8a2f5af12eeb1d74b14c300914841",class:"xpl-toast__icon xpl-toast__icon--"+this.variant},this.getIcon()),i("div",{key:"335be6f702b7300498d2960cb7184fe1fec059b4",class:"xpl-toast__notification"},i("p",{key:"1178d039190352d0482ae7486711ab2adfd2cc8f",class:"xpl-toast__title"},i("slot",{key:"75a98536db36c7a140b3d908cbd8f3d2e201ca81",name:"title"})),""!==this.caption&&i("p",{key:"009bba836fe9abbf34edf4618dd172961e9440fa",class:"xpl-toast__caption"},this.caption?.substring(0,85)))),i("div",{key:"4f47e498ea0c7627d9041a7a2e898fcecff9f59c",class:"xpl-toast__action",ref:s=>{s&&(this.actionSlot=s)}},i("slot",{key:"6ad3199d265b1298ea8200ba53690dcc92bdbf92",name:"action"})),this.isDismissible&&i("div",{key:"b1a1a790a592f5e4c7573c819b0c997a210bd68a",class:"xpl-toast__close"},i("xpl-button",{key:"2d9ad71fc8f8233f2fc12453ca8268fd5f1d8f74",variant:"tertiary",size:"sm",iconOnly:!0,icon:"xmark",type:"button","aria-label":"Dismiss notification",onClick:this.dismiss})))}get el(){return this}static get watchers(){return{dismissable:[{handleDismissableChange:0}],timeout:[{handleTimeoutChange:0}]}}},[260,"xpl-toast",{caption:[1],dismissable:[4],dismissible:[4],showIcon:[4,"show-icon"],timeout:[2],variant:[1]},void 0,{dismissable:[{handleDismissableChange:0}],timeout:[{handleTimeoutChange:0}]}]),d=l,h=function(){"undefined"!=typeof customElements&&["xpl-toast","xpl-button","xpl-icon"].forEach((s=>{switch(s){case"xpl-toast":customElements.get(a(s))||customElements.define(a(s),l);break;case"xpl-button":customElements.get(a(s))||c();break;case"xpl-icon":customElements.get(a(s))||o()}}))};export{d as XplToast,h as defineCustomElement}

package/dist/components/xpl-toggle.js

@@ -1 +1 @@
-import{p as e,H as s,d as t,h as l,c as i,t as a}from"./p-BT_Lq3Vd.js";import{v as c}from"./p-CK3_k8jD.js";const d=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.toggleChange=t(this,"toggleChange",7),this.variant="default",this.id=c(),this.onChange=e=>{this.toggleChange.emit(e.target.checked)}}render(){let e="xpl-toggle-container";this.disabled&&(e+=" xpl-toggle-container--disabled");let s="xpl-toggle";return"small"===this.variant&&(s+=" xpl-toggle--small"),l(i,{key:"c57e1813c72cba62eed2927763277341bb0d3f77",class:e},(this.heading||this.description)&&l("label",{key:"00ba33da343a47681982f6437f1cb45060d70ae9",class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},this.heading,this.description&&l("small",{key:"8ec4104abdb16ca405577f061c4cb68580317bc4",class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)),l("input",{key:"face83ccc22985b6d0a4c8b9e4c8dcf1d9d6b72a",class:s,type:"checkbox",checked:this.checked,disabled:this.disabled,id:this.id,name:this.name,onChange:this.onChange}),this.label&&l("label",{key:"aa89637f4b60b050a168fcf02e6702d9ed9bd186",htmlFor:this.id},this.label))}},[0,"xpl-toggle",{checked:[4],description:[1],disabled:[4],heading:[1],label:[1],name:[1],variant:[1],id:[32]}]),h=d,o=function(){"undefined"!=typeof customElements&&["xpl-toggle"].forEach((e=>{"xpl-toggle"===e&&(customElements.get(a(e))||customElements.define(a(e),d))}))};export{h as XplToggle,o as defineCustomElement}
+import{p as e,H as s,d as t,h as l,c as i,t as a}from"./p-BSHdGbmH.js";import{v as c}from"./p-CK3_k8jD.js";const d=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.toggleChange=t(this,"toggleChange",7),this.variant="default",this.id=c(),this.onChange=e=>{this.toggleChange.emit(e.target.checked)}}render(){let e="xpl-toggle-container";this.disabled&&(e+=" xpl-toggle-container--disabled");let s="xpl-toggle";return"small"===this.variant&&(s+=" xpl-toggle--small"),l(i,{key:"20b5e00613ac0f2567224d3ff2bcd7b7f761a8fc",class:e},(this.heading||this.description)&&l("label",{key:"a41dfe6403c629ef05792ba8dc7f0632fca9ca37",class:{"xpl-label":!0,"xpl-label--disabled":!!this.disabled},htmlFor:this.id},this.heading,this.description&&l("small",{key:"b0e1d30a0f5b358a7f588d3f8f0bc32f440b69df",class:{"xpl-description":!0,"xpl-description--disabled":!!this.disabled}},this.description)),l("input",{key:"a59406c7cccf8a43349841bb060496ce0832823f",class:s,type:"checkbox",checked:this.checked,disabled:this.disabled,id:this.id,name:this.name,onChange:this.onChange}),this.label&&l("label",{key:"276ce3ec937627fd9d21f2b3771d9c779c5f91f1",htmlFor:this.id},this.label))}},[0,"xpl-toggle",{checked:[4],description:[1],disabled:[4],heading:[1],label:[1],name:[1],variant:[1],id:[32]}]),h=d,o=function(){"undefined"!=typeof customElements&&["xpl-toggle"].forEach((e=>{"xpl-toggle"===e&&(customElements.get(a(e))||customElements.define(a(e),d))}))};export{h as XplToggle,o as defineCustomElement}

package/dist/components/xpl-toolbar.js

@@ -1 +1 @@
-import{p as e,H as t,h as s,c as a,t as o}from"./p-BT_Lq3Vd.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.selectedItemCount=0}componentDidLoad(){const e=this.el.querySelector('[slot="actions-right"]');null!==e&&(e.style.marginLeft="auto")}listenToSelectedItemCountChange(e){this.selectedItemCount=e.detail.length}render(){return s(a,{key:"eda1f57ef1a207b82f622f090dd30f21d60bbc61",class:{"xpl-toolbar":!0,dark:!0,hidden:0===this.selectedItemCount}},s("div",{key:"fe703bf7fb49ebe27f4eee7973ea1e24c5ed50a4",class:"toolbar"},s("p",{key:"d0d9cb84b4828688aabbabb3395ff3c18c4d2a78",class:"selected-item-count"},this.selectedItemCount," Selected"),s("div",{key:"c1259be179d245e4c18a3690f800eb493f491ba9",class:"actions"},s("slot",{key:"40000dda8efbfd0aa7175e0e5db1c1c9f4e7e89f",name:"actions-left"}),s("slot",{key:"255e21ebb1af8fde1bb76a1a1243eeadc4146d3d",name:"actions-right"}))))}get el(){return this}},[260,"xpl-toolbar",{selectedItemCount:[2,"selected-item-count"]},[[8,"selectedItemCountChange","listenToSelectedItemCountChange"]]]),d=c,n=function(){"undefined"!=typeof customElements&&["xpl-toolbar"].forEach((e=>{"xpl-toolbar"===e&&(customElements.get(o(e))||customElements.define(o(e),c))}))};export{d as XplToolbar,n as defineCustomElement}
+import{p as e,H as t,h as s,c as o,t as a}from"./p-BSHdGbmH.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.selectedItemCount=0}componentDidLoad(){const e=this.el.querySelector('[slot="actions-right"]');null!==e&&(e.style.marginLeft="auto")}listenToSelectedItemCountChange(e){this.selectedItemCount=e.detail.length}render(){return s(o,{key:"d834b3f68a399f33c02e2a7d85623d9fbe2a21e2",class:{"xpl-toolbar":!0,dark:!0,hidden:0===this.selectedItemCount}},s("div",{key:"54c4638e003685ade49f243f688e3ff5997f8759",class:"toolbar"},s("p",{key:"92815a7d1b10582742906aefa0ee9ef81311c459",class:"selected-item-count"},this.selectedItemCount," Selected"),s("div",{key:"dc1b9ee686a57bd7bca45785f90586751770f556",class:"actions"},s("slot",{key:"2cc26af5467e9ad44962bd1ac65f0b1087f86f7f",name:"actions-left"}),s("slot",{key:"f5f46662191f52c79f81ffd1ce47a492041c10ad",name:"actions-right"}))))}get el(){return this}},[260,"xpl-toolbar",{selectedItemCount:[2,"selected-item-count"]},[[8,"selectedItemCountChange","listenToSelectedItemCountChange"]]]),n=c,l=function(){"undefined"!=typeof customElements&&["xpl-toolbar"].forEach((e=>{"xpl-toolbar"===e&&(customElements.get(a(e))||customElements.define(a(e),c))}))};export{n as XplToolbar,l as defineCustomElement}

package/dist/components/xpl-tooltip.js

@@ -1 +1 @@
-import{T as o,d as s}from"./p-B8RYNiz-.js";const p=o,r=s;export{p as XplTooltip,r as defineCustomElement}
+import{T as s,d as o}from"./p-BYYFsuD3.js";const p=s,r=o;export{p as XplTooltip,r as defineCustomElement}

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

@@ -1 +1 @@
-import{T as o,d as s}from"./p-M900WO1C.js";const p=o,r=s;export{p as XplTopNavItem,r as defineCustomElement}
+import{T as s,d as o}from"./p-xFsB212F.js";const p=s,r=o;export{p as XplTopNavItem,r as defineCustomElement}

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

@@ -1 +1 @@
-import{p as t,H as e,h as i,c as n,t as s}from"./p-BT_Lq3Vd.js";import{T as o}from"./p-BUgtURvw.js";import{d as a}from"./p-ByJRw26d.js";import{d as l}from"./p-M900WO1C.js";const c=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.timers=new o,this.isMobileCascade=!1,this.onViewportChange=()=>{var t,e;this.isMobileCascade=null!==(e=null===(t=this.mobileMq)||void 0===t?void 0:t.matches)&&void 0!==e&&e},this.handleBackClick=async()=>{var t;const e=this.el.closest("xpl-top-nav-item");e&&(await e.closeMenu(),null===(t=e.querySelector(".xpl-top-nav-item__inner"))||void 0===t||t.focus())}}connectedCallback(){"undefined"!=typeof window&&"function"==typeof window.matchMedia&&(this.mobileMq=window.matchMedia("(max-width: 767px)"),this.mobileMq.addEventListener("change",this.onViewportChange),this.isMobileCascade=this.mobileMq.matches),this.connectParentOpenObserver()}disconnectedCallback(){var t;this.timers.dispose(),null===(t=this.mobileMq)||void 0===t||t.removeEventListener("change",this.onViewportChange),this.mobileMq=void 0,this.disconnectParentOpenObserver()}connectParentOpenObserver(){this.disconnectParentOpenObserver();const t=this.el.parentElement;t&&"undefined"!=typeof MutationObserver&&(this.parentOpenObserver=new MutationObserver((()=>{this.scheduleParentOpenCheck()})),this.parentOpenObserver.observe(t,{attributes:!0,attributeFilter:["class"]}))}disconnectParentOpenObserver(){var t;null===(t=this.parentOpenObserver)||void 0===t||t.disconnect(),this.parentOpenObserver=void 0}scheduleParentOpenCheck(){this.timers.scheduleCoalesced("parentOpenCheck",(()=>{this.el.isConnected&&this.focusBackRowIfJustOpenedOnMobile()}))}focusBackRowIfJustOpenedOnMobile(){var t;if(!this.isMobileCascade)return;const e=this.el.parentElement;(null==e?void 0:e.classList.contains("xpl-top-nav-item--dropdown-open"))&&(null===(t=this.el.querySelector(".xpl-top-nav-menu__back .xpl-top-nav-item__inner"))||void 0===t||t.focus())}renderBackRow(){var t;return this.isMobileCascade&&(null===(t=this.label)||void 0===t?void 0:t.trim())?i("xpl-top-nav-item",{class:"xpl-top-nav-menu__back",label:this.label,onNavItemClick:this.handleBackClick},i("xpl-icon",{slot:"leading-icon",icon:"chevron-left",size:24})):null}render(){return i(n,{key:"314c42b389883edceb333473d9bb97776e1f18de",class:{"xpl-top-nav-menu":!0,dark:!0},role:"list","aria-label":this.label||void 0},this.renderBackRow(),i("slot",{key:"a6b4e2c916ccc9c0cc1d5e7e6d03b2ad6032f7ac"}))}get el(){return this}},[260,"xpl-top-nav-menu",{label:[1],isMobileCascade:[32]}]),r=c,p=function(){"undefined"!=typeof customElements&&["xpl-top-nav-menu","xpl-icon","xpl-top-nav-item"].forEach((t=>{switch(t){case"xpl-top-nav-menu":customElements.get(s(t))||customElements.define(s(t),c);break;case"xpl-icon":customElements.get(s(t))||a();break;case"xpl-top-nav-item":customElements.get(s(t))||l()}}))};export{r as XplTopNavMenu,p as defineCustomElement}
+import{p as t,H as e,h as s,c as n,t as i}from"./p-BSHdGbmH.js";import{T as a,i as o}from"./p-Dqb1pIRo.js";import{a as c,d as p}from"./p-xFsB212F.js";import{d as l}from"./p-l3EZ-agL.js";const r=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.timers=new a,this.isMobileCascade=!1,this.onViewportChange=()=>{this.isMobileCascade=this.mobileMq?.matches??!1},this.handleBackClick=async()=>{const t=this.el.closest("xpl-top-nav-item");t&&(await t.closeMenu(),t.querySelector(".xpl-top-nav-item__inner")?.focus())}}connectedCallback(){o()&&"function"==typeof window.matchMedia&&(this.mobileMq=window.matchMedia(c),this.mobileMq.addEventListener("change",this.onViewportChange),this.isMobileCascade=this.mobileMq.matches),this.connectParentOpenObserver()}disconnectedCallback(){this.timers.dispose(),this.mobileMq?.removeEventListener("change",this.onViewportChange),this.mobileMq=void 0,this.disconnectParentOpenObserver()}connectParentOpenObserver(){this.disconnectParentOpenObserver();const t=this.el.parentElement;t&&"undefined"!=typeof MutationObserver&&(this.parentOpenObserver=new MutationObserver((()=>{this.scheduleParentOpenCheck()})),this.parentOpenObserver.observe(t,{attributes:!0,attributeFilter:["class"]}))}disconnectParentOpenObserver(){this.parentOpenObserver?.disconnect(),this.parentOpenObserver=void 0}scheduleParentOpenCheck(){this.timers.scheduleCoalesced("parentOpenCheck",(()=>{this.el.isConnected&&this.focusBackRowIfJustOpenedOnMobile()}))}focusBackRowIfJustOpenedOnMobile(){if(!this.isMobileCascade)return;const t=this.el.parentElement;t?.classList.contains("xpl-top-nav-item--dropdown-open")&&this.el.querySelector(".xpl-top-nav-menu__back .xpl-top-nav-item__inner")?.focus()}renderBackRow(){return this.isMobileCascade&&this.label?.trim()?s("xpl-top-nav-item",{class:"xpl-top-nav-menu__back",label:this.label,onNavItemClick:this.handleBackClick},s("xpl-icon",{slot:"leading-icon",icon:"chevron-left",size:24})):null}render(){return s(n,{key:"4b28448ecb93e59d9bdc731a8b56dd42ebda2c66",class:{"xpl-top-nav-menu":!0,dark:!0},role:"list","aria-label":this.label||void 0},this.renderBackRow(),s("slot",{key:"aa51dc10509298e469ca41a99ae7108283ee8f89"}))}get el(){return this}},[260,"xpl-top-nav-menu",{label:[1],isMobileCascade:[32]}]),h=r,m=function(){"undefined"!=typeof customElements&&["xpl-top-nav-menu","xpl-icon","xpl-top-nav-item"].forEach((t=>{switch(t){case"xpl-top-nav-menu":customElements.get(i(t))||customElements.define(i(t),r);break;case"xpl-icon":customElements.get(i(t))||l();break;case"xpl-top-nav-item":customElements.get(i(t))||p()}}))};export{h as XplTopNavMenu,m as defineCustomElement}

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-Chpgh5SL.js";import{d as h}from"./p-l3EZ-agL.js";import{d as p}from"./p-BdpZR4KO.js";import{d as c}from"./p-xFsB212F.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:"00d598070bc4cee97d311206f48bf5cd873dcc8e",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:"0b42d835c3aa211fa1686d3611ace212d69f1921","aria-label":this.label??"top-navigation-bar",class:"xpl-top-nav__bar"},i("div",{key:"b55f526eca470d1d50b19bf1694f66991d369ad7",class:"xpl-top-nav__inner-left"},this.navControl&&i("button",{key:"37589314adb7f9cc4a33dd4bc421b2473ece5b54",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:"acbdd20739df23cf49ff6542605513159cffe1da",class:"xpl-top-nav__control-icon",icon:"menu",size:32})),this.hasBrand&&i("div",{key:"148ba3e7114ce3f1edbf0618a231d94c4cc3c04f",class:"xpl-top-nav__brand-bar"},i("xpl-top-nav-item",{key:"cda2c5f5dca554b7b61d95b941bd0b969f871dd0",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:"abca8522fe239fe207a291d7bd8bdfd1cab0ffc3",class:{"xpl-top-nav__aside":!0,"xpl-nav-left":!0}},i("div",{key:"f2fde6503e8bc319fbd60a4d5000d93644999d9a",class:"xpl-top-nav__left-primary",role:"list"},i("slot",{key:"ebbb61cf32cf5b0246cecc3d967f93f1834b9e11",name:"left-aside"})))),i("div",{key:"18c8d5990551ee655190aabb8ee85ad8d772b54e",class:{"xpl-top-nav__aside":!0,"xpl-nav-right":!0}},i("div",{key:"3120cb36425177943c3a52345396b5b2de9cc028",class:"xpl-nav-right__list"},i("div",{key:"6fde79b8b6d87bfdb617c591530307382bdff243",class:"xpl-top-nav__right-rail"},i("div",{key:"7e69e3e660887b7b39db058fb7e8cf42679a730e",class:"xpl-top-nav__right-lead"},i("slot",{key:"c198ab94307d3d126b5902890de73b434cb583b1",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}

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 s,d as a,h as i,c as e,t as n}from"./p-BSHdGbmH.js";import{d as l}from"./p-l3EZ-agL.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:"3ed4e8e9214075b9062b221a05f1b27aa0b0bfbf"},i("nav",{key:"c809f6f649965d0b60d35c2bda31f721d67ccca1","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:"99e22823c94e66c5dce24815485c7513b11e9267",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-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