@xplortech/apollo-core 2.5.0 → 2.7.0

package/dist/components/xpl-toast.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,h as s,Host as c,transformTag as i}from"@stencil/core/internal/client";import{d as a}from"./xpl-icon2.js";const o=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.variant="neutral",this.showIcon=!0,this.dismissable=!0,this.timeout=8e3,this.handleAnimationEnd=()=>{var t,e;(null===(t=this.el)||void 0===t?void 0:t.classList.contains("xpl-toast--dismissed"))&&(null===(e=this.el)||void 0===e||e.remove())},this.getIcon=()=>{switch(this.variant){case"warning":return s("xpl-icon",{size:24,icon:"alert-hex"});case"success":return s("xpl-icon",{size:24,icon:"check-circle"});default:return s("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 s(c,{key:"6a4c1dfe86f62c39db5573a0bb1eef2c14616085",class:"xpl-toast xpl-toast--"+this.variant,onAnimationEnd:this.handleAnimationEnd},s("div",{key:"282a4c5fc37e538d3359a0c38e7cd30e2a29e311",class:"xpl-toast__left"},this.showIcon&&s("div",{key:"dfb6bb1923f5c9e1b1dae80630cc7977529e834f",class:"xpl-toast__icon xpl-toast__icon--"+this.variant},this.getIcon()),s("div",{key:"9a1755b484e316be08b89044ae3c55e7a30c3795",class:"xpl-toast__notification"},s("p",{key:"afa9572dcb109c58c6c4045e14b604010da95230",class:"xpl-toast__title"},s("slot",{key:"0b80b8719e79a1e01bcf8ec125db8d9762f1a1d7",name:"title"})),""!==this.caption&&s("p",{key:"7debe4dd50870bc6478a86e7742450f667dfee3a",class:"xpl-toast__caption"},null===(t=this.caption)||void 0===t?void 0:t.substring(0,85)))),s("div",{key:"194104f419162bd4157fb5e8885983ca40467d9c",class:"xpl-toast__action",ref:t=>{this.actionSlot=t}},s("slot",{key:"c63cc79ec725417c4f317dd72511e72b24f8280e",name:"action"})),this.dismissable&&s("div",{key:"3328ad43d7cd4026d5b4488dc2d920031be0ca34",class:"xpl-toast__close"},s("button",{key:"ce3b27ae3c1570806916b3d668678513df5065ed",tabIndex:0,onClick:this.dismiss},s("xpl-icon",{key:"be1a177568f933417b62ce2a2705441d00b3118f",icon:"x"}))))}get el(){return this}},[260,"xpl-toast",{variant:[1],showIcon:[4,"show-icon"],caption:[1],dismissable:[4],timeout:[2]}]),n=o,l=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))||a()}}))};export{n as XplToast,l as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as s,h as e,Host as a,transformTag as i}from"@stencil/core/internal/client";import{d as c}from"./xpl-icon2.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,l=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,l as defineCustomElement}

package/dist/components/xpl-toggle.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,h as l,Host as s,transformTag as i}from"@stencil/core/internal/client";import{v as c}from"./v4.js";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.variant="default",this.id=c()}render(){let e="xpl-toggle-container";this.disabled&&(e+=" xpl-toggle-container--disabled");let t="xpl-toggle";return"small"===this.variant&&(t+=" xpl-toggle--small"),l(s,{key:"e5b8f2802e828221c2966fa85bafe7fb6bcf40bc",class:e},(this.heading||this.description)&&l("label",{key:"17aff6b0b12c4815d2848af71a84a808c5b2a356",class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},this.heading,this.description&&l("small",{key:"c5bf01336e7f02b41f050971b596f718cdc8a87d",class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)),l("input",{key:"e9426bde8c042f3727fbcac738bd4903c063b2a4",class:t,type:"checkbox",checked:this.checked,disabled:this.disabled,id:this.id,name:this.name}),this.label&&l("label",{key:"7d1bdfdf3ccc08276d86ffa3beb84a7946f576bb",htmlFor:this.id},this.label))}},[0,"xpl-toggle",{checked:[4],description:[1],disabled:[4],heading:[1],label:[1],name:[1],variant:[1],id:[32]}]),d=a,b=function(){"undefined"!=typeof customElements&&["xpl-toggle"].forEach((e=>{"xpl-toggle"===e&&(customElements.get(i(e))||customElements.define(i(e),a))}))};export{d as XplToggle,b as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,h as l,Host as s,transformTag as i}from"@stencil/core/internal/client";import{v as a}from"./v4.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.variant="default",this.id=a()}render(){let e="xpl-toggle-container";this.disabled&&(e+=" xpl-toggle-container--disabled");let t="xpl-toggle";return"small"===this.variant&&(t+=" xpl-toggle--small"),l(s,{key:"b501bb268b9fbc2756544b17481ae78ee3144960",class:e},(this.heading||this.description)&&l("label",{key:"34d2bb6e6c4538a863f333e8124fbde9ec2544cb",class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},this.heading,this.description&&l("small",{key:"f9f5ff29d428e776566d0a12e62ab7efe311feb5",class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)),l("input",{key:"f9b1baf90d9336711ce1354a66770c7423551af8",class:t,type:"checkbox",checked:this.checked,disabled:this.disabled,id:this.id,name:this.name}),this.label&&l("label",{key:"49f803372904b5b87394a55c67f428401cd14379",htmlFor:this.id},this.label))}},[0,"xpl-toggle",{checked:[4],description:[1],disabled:[4],heading:[1],label:[1],name:[1],variant:[1],id:[32]}]),d=c,o=function(){"undefined"!=typeof customElements&&["xpl-toggle"].forEach((e=>{"xpl-toggle"===e&&(customElements.get(i(e))||customElements.define(i(e),c))}))};export{d as XplToggle,o as defineCustomElement}

package/dist/components/xpl-toolbar.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,h as c,Host as o,transformTag as s}from"@stencil/core/internal/client";const a=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 c(o,{key:"097500ed053ff1f15d30fc62e2efa556f8f95ef2",class:{"xpl-toolbar":!0,dark:!0,hidden:0===this.selectedItemCount}},c("div",{key:"c2e73f623f8afe7ca8e9e367b173067992b661fa",class:"toolbar"},c("p",{key:"63c1b1f5edee4abc4fea15bdb6d483a682854403",class:"selected-item-count"},this.selectedItemCount," Selected"),c("div",{key:"bc387680fee35312128aac1e2d2a9e83e78b86af",class:"actions"},c("slot",{key:"a8e3e41f75565cbf9b8fc86665ecabdcf2f674f3",name:"actions-left"}),c("slot",{key:"b3e82f6aabb8279f39248b551570d8937cf35aa6",name:"actions-right"}))))}get el(){return this}},[260,"xpl-toolbar",{selectedItemCount:[2,"selected-item-count"]},[[8,"selectedItemCountChange","listenToSelectedItemCountChange"]]]),n=a,l=function(){"undefined"!=typeof customElements&&["xpl-toolbar"].forEach((e=>{"xpl-toolbar"===e&&(customElements.get(s(e))||customElements.define(s(e),a))}))};export{n as XplToolbar,l as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,h as o,Host as s,transformTag as a}from"@stencil/core/internal/client";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 o(s,{key:"eda1f57ef1a207b82f622f090dd30f21d60bbc61",class:{"xpl-toolbar":!0,dark:!0,hidden:0===this.selectedItemCount}},o("div",{key:"fe703bf7fb49ebe27f4eee7973ea1e24c5ed50a4",class:"toolbar"},o("p",{key:"d0d9cb84b4828688aabbabb3395ff3c18c4d2a78",class:"selected-item-count"},this.selectedItemCount," Selected"),o("div",{key:"c1259be179d245e4c18a3690f800eb493f491ba9",class:"actions"},o("slot",{key:"40000dda8efbfd0aa7175e0e5db1c1c9f4e7e89f",name:"actions-left"}),o("slot",{key:"255e21ebb1af8fde1bb76a1a1243eeadc4146d3d",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{X as o,d as t}from"./xpl-tooltip2.js";const p=o,s=t;export{p as XplTooltip,s as defineCustomElement}
+import{T as o,d as t}from"./xpl-tooltip2.js";const p=o,s=t;export{p as XplTooltip,s as defineCustomElement}

package/dist/components/xpl-tooltip2.js

@@ -1 +1 @@
-import{h as e,proxyCustomElement as t,HTMLElement as o,Host as a,transformTag as i}from"@stencil/core/internal/client";const l=()=>e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"17",height:"14"},e("g",{filter:"url(#a)"},e("path",{d:"M0 5h15l-7.5 7.5L0 5Z"})),e("defs",null,e("filter",{id:"a",width:"20",height:"8.171",x:".5",y:"5","color-interpolation-filters":"sRGB",filterUnits:"userSpaceOnUse"},e("feFlood",{"flood-opacity":"0",result:"BackgroundImageFix"}),e("feColorMatrix",{in:"SourceAlpha",result:"hardAlpha",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}),e("feOffset",{dy:"1"}),e("feComposite",{in2:"hardAlpha",operator:"out"}),e("feColorMatrix",{values:"0 0 0 0 0.882353 0 0 0 0 0.886275 0 0 0 0 0.909804 0 0 0 1 0"}),e("feBlend",{in2:"BackgroundImageFix",result:"effect1_dropShadow_20073_3067"}),e("feBlend",{in:"SourceGraphic",in2:"effect1_dropShadow_20073_3067",result:"shape"})))),r=t(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.position="top-middle",this.hideArrow=!1}render(){return e(a,{key:"2a442f9c9c54e8e6f8032b5d6384c84a1fbda0ad"},e("div",{key:"f30932db02af0f1273421b14c5b25840adbc3f58",class:"xpl-tooltip-container"},e("slot",{key:"729aee67e66fb3d281b84a86aeba2d12a8a08340"}),e("div",{key:"9c0f6a237f2a1a11459a311095a2bdf9be4b176d",class:`xpl-tooltip xpl-tooltip--${this.position}`},this.text),!this.hideArrow&&e("div",{key:"3bb6b085ddde321cf3063feba8ff23e785723afd",class:"xpl-tooltip-arrow"},e(l,{key:"f687c2776a7b9097aec183c5128e9e238e57d26e"}))))}},[260,"xpl-tooltip",{text:[1],position:[1],hideArrow:[4,"hide-arrow"]}]);function s(){"undefined"!=typeof customElements&&["xpl-tooltip"].forEach((e=>{"xpl-tooltip"===e&&(customElements.get(i(e))||customElements.define(i(e),r))}))}export{r as X,s as d}
+import{h as e,proxyCustomElement as t,HTMLElement as o,Host as i,transformTag as l}from"@stencil/core/internal/client";const d=()=>e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"17",height:"14"},e("g",{filter:"url(#a)"},e("path",{d:"M0 5h15l-7.5 7.5L0 5Z"})),e("defs",null,e("filter",{id:"a",width:"20",height:"8.171",x:".5",y:"5","color-interpolation-filters":"sRGB",filterUnits:"userSpaceOnUse"},e("feFlood",{"flood-opacity":"0",result:"BackgroundImageFix"}),e("feColorMatrix",{in:"SourceAlpha",result:"hardAlpha",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}),e("feOffset",{dy:"1"}),e("feComposite",{in2:"hardAlpha",operator:"out"}),e("feColorMatrix",{values:"0 0 0 0 0.882353 0 0 0 0 0.886275 0 0 0 0 0.909804 0 0 0 1 0"}),e("feBlend",{in2:"BackgroundImageFix",result:"effect1_dropShadow_20073_3067"}),e("feBlend",{in:"SourceGraphic",in2:"effect1_dropShadow_20073_3067",result:"shape"})))),r=t(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.position="top-middle",this.hideArrow=!1}render(){return e(i,{key:"9890dea245d2fbd24c67fea6e39ce3430ffc8d81"},e("div",{key:"0930c7ee1f0e1f6a625f41e34f31d2432fdff7eb",class:"xpl-tooltip-container"},e("slot",{key:"3b9a8aebce020a13f3d7ef624b59c06e55398907"}),e("div",{key:"50fe33b8bef96df08899b449065558ea8f2ed820",class:`xpl-tooltip xpl-tooltip--${this.position}`},this.text),!this.hideArrow&&e("div",{key:"eddf77e8e8093eff29c5c22fdc3d2b882de4a0ca",class:"xpl-tooltip-arrow"},e(d,{key:"fad3bccade4af1d9734d288c32d7951527398853"}))))}},[260,"xpl-tooltip",{text:[1],position:[1],hideArrow:[4,"hide-arrow"]}]);function s(){"undefined"!=typeof customElements&&["xpl-tooltip"].forEach((e=>{"xpl-tooltip"===e&&(customElements.get(l(e))||customElements.define(l(e),r))}))}export{r as T,s as d}

package/dist/components/xpl-top-nav-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplTopNavItem extends Components.XplTopNavItem, HTMLElement {}
+export const XplTopNavItem: {
+    prototype: XplTopNavItem;
+    new (): XplTopNavItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1 @@
+import{T as o,d as t}from"./xpl-top-nav-item2.js";const p=o,s=t;export{p as XplTopNavItem,s as defineCustomElement}

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

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as i,createEvent as s,h as e,Host as o,transformTag as n}from"@stencil/core/internal/client";import{d as l}from"./xpl-icon2.js";const r=t(class t extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.navItemClick=s(this,"navItemClick",7),this.hasDropdown=!1,this.hostListitemRole=!1,this.open=!1,this.active=!1,this.icon="",this.selected=!1,this.onDocClickCapture=t=>{if(!this.hasDropdown||!this.open)return;const i=t.target;i&&!this.el.contains(i)&&(this.open=!1)},this.onDocKeyDownCapture=t=>{this.hasDropdown&&this.open&&"Escape"===t.key&&(t.preventDefault(),t.stopPropagation(),this.open=!1)},this.handleClick=t=>{if(this.hasDropdown)return t.preventDefault(),t.stopPropagation(),this.broadcastCloseOtherDropdownHosts(),void(this.open=!this.open);this.navItemClick.emit(t)},this.handleKeyDown=t=>{if(null!=this.href&&!this.hasDropdown){if("Enter"===t.key)return;if(" "===t.key){t.preventDefault();const i=this.el.querySelector(".xpl-top-nav-item__inner");return void(null==i||i.click())}}"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleClick(this.syntheticActivationClickFromKeyboard(t)))}}onHasDropdownChanged(){this.hasDropdown||(this.open=!1),this.syncDropdownDocListeners()}connectedCallback(){this.syncHostListitemRole(),this.syncHasDropdownFromDom(),this.syncDropdownDocListeners(),this.connectDropdownSlotObserver()}disconnectedCallback(){void 0!==this.deferredHasDropdownObserverSyncTimeoutId&&(clearTimeout(this.deferredHasDropdownObserverSyncTimeoutId),this.deferredHasDropdownObserverSyncTimeoutId=void 0),void 0!==this.deferredPostRenderTopNavItemTimeoutId&&(clearTimeout(this.deferredPostRenderTopNavItemTimeoutId),this.deferredPostRenderTopNavItemTimeoutId=void 0),this.disconnectDropdownSlotObserver(),this.disconnectListitemContextObservers();const t=this.el.ownerDocument;t.removeEventListener("click",this.onDocClickCapture,!0),t.removeEventListener("keydown",this.onDocKeyDownCapture,!0)}componentWillLoad(){this.syncHostListitemRole(),this.syncHasDropdownFromDom(),this.syncDropdownDocListeners()}componentWillRender(){this.disconnectDropdownSlotObserver(),this.disconnectListitemContextObservers()}componentDidRender(){this.schedulePostRenderTopNavItemWork()}handleCloseNavDropdownRequest(){this.hasDropdown&&this.open&&(this.open=!1)}scheduleHasDropdownSyncFromObserver(){void 0!==this.deferredHasDropdownObserverSyncTimeoutId&&clearTimeout(this.deferredHasDropdownObserverSyncTimeoutId),this.deferredHasDropdownObserverSyncTimeoutId=setTimeout((()=>{this.deferredHasDropdownObserverSyncTimeoutId=void 0,this.el.isConnected&&this.syncHasDropdownFromDom()}),0)}connectDropdownSlotObserver(){this.disconnectDropdownSlotObserver(),"undefined"!=typeof MutationObserver&&(this.dropdownSlotObserver=new MutationObserver((()=>{this.scheduleHasDropdownSyncFromObserver()})),this.dropdownSlotObserver.observe(this.el,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot"]}))}disconnectDropdownSlotObserver(){var t;null===(t=this.dropdownSlotObserver)||void 0===t||t.disconnect(),this.dropdownSlotObserver=void 0}disconnectListitemContextObservers(){var t,i;null===(t=this.parentListitemContextObserver)||void 0===t||t.disconnect(),this.parentListitemContextObserver=void 0,null===(i=this.selfListitemContextObserver)||void 0===i||i.disconnect(),this.selfListitemContextObserver=void 0}connectListitemContextObservers(){if(this.disconnectListitemContextObservers(),"undefined"==typeof MutationObserver||!this.el.isConnected)return;this.selfListitemContextObserver=new MutationObserver((()=>{this.schedulePostRenderTopNavItemWork()})),this.selfListitemContextObserver.observe(this.el,{attributes:!0,attributeFilter:["class","slot"]});const t=this.el.parentElement;if(t){this.parentListitemContextObserver=new MutationObserver((()=>{this.schedulePostRenderTopNavItemWork()}));const i="xpl-top-nav"===t.tagName.toLowerCase()&&"left-aside"===this.el.getAttribute("slot")?t.querySelector(".xpl-top-nav__left-primary"):null;this.parentListitemContextObserver.observe(null!=i?i:t,{attributes:!0,attributeFilter:["role"],subtree:!1})}}schedulePostRenderTopNavItemWork(){void 0!==this.deferredPostRenderTopNavItemTimeoutId&&clearTimeout(this.deferredPostRenderTopNavItemTimeoutId),this.deferredPostRenderTopNavItemTimeoutId=setTimeout((()=>{this.deferredPostRenderTopNavItemTimeoutId=void 0,this.el.isConnected&&(this.syncHostListitemRole(),this.connectListitemContextObservers(),this.connectDropdownSlotObserver())}),0)}syncDropdownDocListeners(){const t=this.el.ownerDocument;t.removeEventListener("click",this.onDocClickCapture,!0),t.removeEventListener("keydown",this.onDocKeyDownCapture,!0),this.hasDropdown&&(t.addEventListener("click",this.onDocClickCapture,!0),t.addEventListener("keydown",this.onDocKeyDownCapture,!0))}syncHasDropdownFromDom(){this.hasDropdown=!!this.el.querySelector('[slot="dropdown"]')}getNavDropdownBroadcastRoot(){var t,i;return null!==(i=null!==(t=this.el.closest("xpl-top-nav"))&&void 0!==t?t:this.el.closest("xpl-nav-header-menu"))&&void 0!==i?i:this.el.ownerDocument}broadcastCloseOtherDropdownHosts(){this.getNavDropdownBroadcastRoot().querySelectorAll("xpl-top-nav-item").forEach((t=>{t!==this.el&&t.dispatchEvent(new CustomEvent("_xplCloseNavDropdown",{bubbles:!1}))}))}syntheticActivationClickFromKeyboard(t){var i;const s=this.el.querySelector(".xpl-top-nav-item__inner"),e=null==s?void 0:s.getBoundingClientRect();return new MouseEvent("click",{bubbles:!0,cancelable:!0,button:0,clientX:e?e.left+e.width/2:0,clientY:e?e.top+e.height/2:0,view:null!==(i=t.view)&&void 0!==i?i:void 0})}static isInternalRenderedHostChild(t){return t.classList.contains("xpl-top-nav-item__inner")||t.classList.contains("xpl-top-nav-item__dropdown")}hasNonDropdownLightDomChild(){return Array.from(this.el.childNodes).some((i=>{var s;if(i.nodeType===Node.TEXT_NODE)return Boolean(null===(s=i.textContent)||void 0===s?void 0:s.trim());if(i.nodeType===Node.ELEMENT_NODE){const s=i;return!t.isInternalRenderedHostChild(s)&&"dropdown"!==s.getAttribute("slot")}return!1}))}getInnerAriaLabel(){var t,i,s;if(null===(t=this.label)||void 0===t?void 0:t.trim())return;if(this.hasNonDropdownLightDomChild())return;return(null===(i=this.itemAriaLabel)||void 0===i?void 0:i.trim())||((null===(s=this.icon)||void 0===s?void 0:s.trim())?"Navigation item":void 0)}computeHostListitemRole(){const{el:t}=this;if(t.classList.contains("xpl-top-nav__brand"))return!1;if("right-aside-mobile"===t.getAttribute("slot"))return!1;const i=t.parentElement;return"list"===(null==i?void 0:i.getAttribute("role"))||null!=i&&"xpl-nav-header-menu"===i.tagName.toLowerCase()||"left-aside"===t.getAttribute("slot")&&"xpl-top-nav"===(null==i?void 0:i.tagName.toLowerCase())&&null!=i.querySelector('.xpl-top-nav__left-primary[role="list"]')}syncHostListitemRole(){const t=this.computeHostListitemRole();this.hostListitemRole!==t&&(this.hostListitemRole=t)}renderInner(){const t=this.selected?"page":void 0,i=this.hasDropdown?this.open?"true":"false":void 0,s=this.getInnerAriaLabel(),o=Object.assign(Object.assign({class:"xpl-top-nav-item__inner",tabIndex:0,"aria-current":t,"aria-expanded":i},s?{"aria-label":s}:{}),{onClick:this.handleClick,onKeyDown:this.handleKeyDown});return null==this.href||this.hasDropdown?e("div",Object.assign({},o,{role:"button"}),this.icon&&e("xpl-icon",{size:16,icon:this.icon}),this.label?e("span",{class:"xpl-top-nav-item__label",title:this.label},this.label):e("slot",null),this.hasDropdown&&e("xpl-icon",{icon:"chevron-down"})):e("a",Object.assign({},o,{href:this.href}),this.icon&&e("xpl-icon",{size:16,icon:this.icon}),this.label?e("span",{class:"xpl-top-nav-item__label",title:this.label},this.label):e("slot",null))}render(){return e(o,Object.assign({key:"391dd693aabff902ffd5de50d710d3fab06573e2",class:{"xpl-top-nav-item":!0,"xpl-top-nav-item--active":this.active,"xpl-top-nav-item--dropdown-open":this.open,"xpl-top-nav-item--has-dropdown":this.hasDropdown,"xpl-top-nav-item--selected":this.selected,dark:!0}},this.hostListitemRole?{role:"listitem"}:{}),this.renderInner(),this.hasDropdown&&e("div",{key:"c5d5239d0279722d5a78bc7436a3ebb9247f904d",class:"xpl-top-nav-item__dropdown"},e("slot",{key:"f0a735798a09218822fd14174d0c845014c5e557",name:"dropdown"})))}get el(){return this}static get watchers(){return{hasDropdown:[{onHasDropdownChanged:0}]}}},[260,"xpl-top-nav-item",{active:[516],href:[1],icon:[1],itemAriaLabel:[1,"item-aria-label"],label:[1],selected:[516],hasDropdown:[32],hostListitemRole:[32],open:[32]},[[0,"_xplCloseNavDropdown","handleCloseNavDropdownRequest"]],{hasDropdown:[{onHasDropdownChanged:0}]}]);function h(){"undefined"!=typeof customElements&&["xpl-top-nav-item","xpl-icon"].forEach((t=>{switch(t){case"xpl-top-nav-item":customElements.get(n(t))||customElements.define(n(t),r);break;case"xpl-icon":customElements.get(n(t))||l()}}))}export{r as T,h as d}

package/dist/components/xpl-top-nav.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplTopNav extends Components.XplTopNav, HTMLElement {}
+export const XplTopNav: {
+    prototype: XplTopNav;
+    new (): XplTopNav;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as n,transformTag as o}from"@stencil/core/internal/client";import{d as a}from"./xpl-button2.js";import{d as l}from"./xpl-icon2.js";import{d as r}from"./xpl-popover2.js";import{d as h}from"./xpl-top-nav-item2.js";const c=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.brandClick=s(this,"brandClick",7),this.navOpen=s(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:e}=t;!0===e&&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.focusNavControlAfterClose()},this.onUserPopoverInnerOpenClassChange=()=>{const t=this.userPopoverDrawerSyncHost;if(!t)return;const e=t.querySelector(".xpl-popover");(null==e?void 0:e.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"]'),e=null!=this.el.querySelector('[slot="user-menu-trigger"]');t!==this.userMenuSlotPresent&&(this.userMenuSlotPresent=t),e!==this.userMenuTriggerSlotPresent&&(this.userMenuTriggerSlotPresent=e)}}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,e;return null!==(e=null===(t=this.childAccountLabel)||void 0===t?void 0:t.trim())&&void 0!==e?e:""}get hasBrand(){var t,e,s,i;const n=null!==(e=null===(t=this.brandName)||void 0===t?void 0:t.trim())&&void 0!==e?e:"",o=null!==(i=null===(s=this.brandLogo)||void 0===s?void 0:s.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 e=0;e<t.length;e+=1){const s=t[e].querySelector(".xpl-popover");if(null==s?void 0:s.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 e=t.querySelector(".xpl-popover");e&&"undefined"!=typeof MutationObserver&&(this.userPopoverDrawerOpenObserver=new MutationObserver((()=>{this.onUserPopoverInnerOpenClassChange()})),this.userPopoverDrawerOpenObserver.observe(e,{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)}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.navOpen.emit(!1)}render(){var t,e,s,o;return i(n,{key:"7b9229d9aaa6e462102694f2af4cac513c0a897d",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:"15e65c606ec67d5dcb3de7e14dbbb2983d23f097","aria-label":null!==(t=this.label)&&void 0!==t?t:"top-navigation-bar",class:"xpl-top-nav__bar"},i("div",{key:"4dcd01744fac5acfd8370da93d3343fc9be1762c",class:"xpl-top-nav__inner-left"},this.navControl&&i("button",{key:"07bd342a80a412922a6d22a789694e2457312e1d",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:"1a69e0dac8d98b1331676e9e69fa76cac7a55de5",class:"xpl-top-nav__control-icon",icon:"menu",size:20})),this.hasBrand&&i("div",{key:"5af668cb6533a3f1e91101a1179c614215e3f431",class:"xpl-top-nav__brand-bar"},i("xpl-top-nav-item",{key:"f77e07635deb49f7db37fd965b389f5a3d379864",class:"xpl-top-nav__brand",href:this.brandHref,onNavItemClick:this.onBrandNavItemClick},(null===(e=this.brandLogo)||void 0===e?void 0:e.trim())?i("img",{class:"xpl-top-nav__brand-logo",src:this.brandLogo,alt:(null===(s=this.brandName)||void 0===s?void 0:s.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:"f349c1fa2021e705602eed288e83db9a5dade455",class:{"xpl-top-nav__aside":!0,"xpl-nav-left":!0}},i("div",{key:"718718595ec839e0aef4f703f766d1bedfd65c6b",class:"xpl-top-nav__left-primary",role:"list"},i("slot",{key:"ebcb856dc7c6bc247877a1306350073f9990ff18",name:"left-aside"})))),i("div",{key:"e582c5e3799d471b358c48c34d5c629a5b6db44d",class:{"xpl-top-nav__aside":!0,"xpl-nav-right":!0}},i("div",{key:"eda8ef4e6252b5c7362f1e30e15f9f60df2e77d6",class:"xpl-nav-right__list"},i("div",{key:"f99115361d8ec8e8c964f434b1c713488ece962a",class:"xpl-top-nav__right-rail"},i("div",{key:"0eeea604e76f47ee71c7e2310f7a4764aa47bf39",class:"xpl-top-nav__right-lead"},i("slot",{key:"d4fd4fa67af3bc6dbdb4b641e24603fcfc14e920",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}]}]),p=c,d=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),c);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{p as XplTopNav,d as defineCustomElement}

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

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as i,createEvent as s,h as a,Host as n,transformTag as e}from"@stencil/core/internal/client";import{d as l}from"./xpl-icon2.js";const o=t(class extends i{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 a(n,{key:"a67e91188d392358df4b052d7e9026cf2f6b9b04"},a("nav",{key:"f51a3c37a1c8ae3d4f4ba8b524fb1f2ff2dd5ea8","aria-label":"utility navigation bar",class:"xpl-utility-bar"},this.navControl?a("div",null,a("button",{class:"xpl-utility-bar__nav-control",onClick:()=>this.onNavToggle()},a("xpl-icon",{class:"xpl-utility-nav__bars",icon:"three-bars"})),a("slot",{name:"aside"})):a("slot",{name:"aside"}),a("slot",{key:"75f581a8455f372b692a9ec190c2f0974b214105",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(e(t))||customElements.define(e(t),o);break;case"xpl-icon":customElements.get(e(t))||l()}}))};export{c as XplUtilityBar,r as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as n,transformTag as a}from"@stencil/core/internal/client";import{d as l}from"./xpl-icon2.js";const o=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.navOpen=e(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 s(n,{key:"ace824cff0305860bce4dd4da2be0b2f8cf59672"},s("nav",{key:"0617af3b292b4459900c7e352c9486d666fc501e","aria-label":"utility navigation bar",class:"xpl-utility-bar"},this.navControl?s("div",null,s("button",{class:"xpl-utility-bar__nav-control",onClick:()=>this.onNavToggle()},s("xpl-icon",{class:"xpl-utility-nav__bars",icon:"three-bars"})),s("slot",{name:"aside"})):s("slot",{name:"aside"}),s("slot",{key:"e060a576b15089bc70d030a6c692124294b7eb4e",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(a(t))||customElements.define(a(t),o);break;case"xpl-icon":customElements.get(a(t))||l()}}))};export{c as XplUtilityBar,r as defineCustomElement}

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

@@ -1,6 +1,10 @@
 # xpl-accordion
 
+Accordions are collapsable containers and allow users to collapse or expand the container. Useful when many items are present in a section and users may benefit from closing content to gain more space or focus on content that is most important to them. 
 
+Use the content slot in the opened state to swap in Apollo components or make your own local component with groups of Apollo components or custom content.
+
+Note: Users will often miss any content that is hidden behind an interaction. If it is important that users see the content, use an accordion's open state on load `initialExpanded`, or use another pattern.
 
 <!-- Auto Generated Below -->
 

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

@@ -1,32 +1,311 @@
 # xpl-avatar
 
+The **Avatar** component shows a person or entity: a photo, initials on a colored surface, or custom slot content. It aligns with Apollo’s Figma patterns for default avatars, profile layouts, stacked groups, and rows with supporting text.
+
+## When to use
+
+- **Default (no `variant`)** — Inline UI: tables, nav, comments, lists. Supports image (`src`), initials from `name`, and an optional status dot (`status`).
+- **Profile (`variant="profile"`)** — Large avatars for profile pages and settings surfaces; optional `status` dot uses the same badge palette as the default avatar.
+- **Group (`variant="group"`)** — Stacked avatar groups with overflow count (`+N`). The `status` prop is not used (status dots are not shown for groups).
+- **With Text (`variant="with-text"`)** — Horizontal layout with avatar paired with name and optional sub-text; optional `status` on the avatar image.
+
+
+| Variant     | Purpose                                                | `status` dot |
+| ----------- | ------------------------------------------------------ | ------------ |
+| *(none)*    | Standard single avatar                                 | Supported    |
+| `profile`   | Larger profile-sized avatar for settings/profile pages | Supported    |
+| `group`     | Stacked avatar group with overflow count (`+N`)        | Not shown    |
+| `with-text` | Avatar paired with name and optional sub-text          | Supported    |
+
+
+---
+
+## Quick Start
+
+### Basic Avatar (Image)
+
+```html
+<xpl-avatar name="Katie Wilson" src="https://example.com/photo.jpg"></xpl-avatar>
+```
+
+### Initials Placeholder (No Image)
+
+```html
+<!-- Automatic initials from name -->
+<xpl-avatar name="Katie Wilson" color="green"></xpl-avatar>
+
+<!-- Custom initials via slot -->
+<xpl-avatar color="primary">KW</xpl-avatar>
+```
+
+### With Status Dot
+
+Status dots are rendered with [`xpl-badge`] using `dot-only` and `bordered`. The `status` prop sets the badge **variant** , so avatar status colors stay aligned with badge semantics across the system.
+
+**Where `status` applies:** default (no `variant`), `profile`, and `with-text`. It does **not** apply to `group` — stacked groups ignore `status`.
+
+**`status` values** (same names as `xpl-badge` `variant` palette values):
+
+
+| `status` | Badge palette    | Typical meaning (choose per product copy) |
+| -------- | ---------------- | ----------------------------------------- |
+| `purple` | Purple (default) | Default / general presence                |
+| `green`  | Green            | Positive, available, success-aligned      |
+| `yellow` | Yellow           | Caution, pending, away, warning-aligned   |
+| `orange` | Orange           | Attention, busy, secondary emphasis       |
+| `gray`   | Gray             | Neutral, offline, inactive                |
+| `red`    | Red              | Error, do not disturb, critical           |
+| `blue`   | Blue             | Informational, notifications              |
+
+
+```html
+<xpl-avatar name="Alex Chen" src="photo.jpg" status="green"></xpl-avatar>
+<xpl-avatar name="Jordan Lee" status="red"></xpl-avatar>
+<xpl-avatar name="Sam Smith" status="gray"></xpl-avatar>
+<xpl-avatar variant="with-text" name="Riley Park" sub-text="Designer" src="photo.jpg" status="blue"></xpl-avatar>
+```
+
+### Clickable Avatar (Link)
+
+```html
+<xpl-avatar name="Profile" src="photo.jpg" href="/profile" target="_blank"></xpl-avatar>
+```
+
+---
+
+## Variant Examples
+
+### Profile Avatar (Larger Size)
+
+For profile pages and settings surfaces. Optional `status` uses the same badge palette as other non-group variants.
+
+```html
+<!-- Large profile avatar (144px) -->
+<xpl-avatar variant="profile" name="Katie Wilson" src="photo.jpg"></xpl-avatar>
+
+<!-- With status dot -->
+<xpl-avatar variant="profile" name="Katie Wilson" src="photo.jpg" status="green"></xpl-avatar>
+
+<!-- Small profile avatar (80px) -->
+<xpl-avatar variant="profile" name="Jordan Lee" size="sm"></xpl-avatar>
+```
+
+### Avatar Group (Stacked)
+
+Displays up to 4 visible avatars with a `+N` overflow pill for additional members. The `status` prop is not used in this layout (no per-avatar or group-level status dot).
+
+```html
+<!-- Basic group with JSON data -->
+<xpl-avatar
+  variant="group"
+  group-data='[
+    {"name": "Alex", "color": "green"},
+    {"name": "Jordan", "color": "yellow"},
+    {"name": "Sam", "color": "pink"},
+    {"src": "https://example.com/photo.jpg", "name": "Dana"},
+    {"name": "Extra User"}
+  ]'
+></xpl-avatar>
+
+<!-- Medium group -->
+<xpl-avatar variant="group" size="md" group-data='[...]'></xpl-avatar>
+
+<!-- Small group -->
+<xpl-avatar variant="group" size="sm" group-data='[...]'></xpl-avatar>
+```
+
+**Group data format:**
+
+```typescript
+interface AvatarGroupItem {
+  src?: string;     // Image URL (optional)
+  name?: string;      // Used for initials and alt text
+  color?: 'green' | 'yellow' | 'pink' | 'primary' | 'secondary';
+}
+```
+
+### Avatar with Text
+
+Horizontal layout with avatar + name + optional sub-text (e.g., email).
+
+```html
+<!-- Basic with-text -->
+<xpl-avatar
+  variant="with-text"
+  name="Katie Wilson"
+  sub-text="katie@example.com"
+  src="photo.jpg"
+></xpl-avatar>
+
+<!-- Clickable version -->
+<xpl-avatar
+  variant="with-text"
+  name="View Profile"
+  sub-text="Product Designer"
+  src="photo.jpg"
+  href="/profile"
+></xpl-avatar>
+
+<!-- With status dot on the avatar -->
+<xpl-avatar
+  variant="with-text"
+  name="Katie Wilson"
+  sub-text="katie@example.com"
+  src="photo.jpg"
+  status="green"
+></xpl-avatar>
+```
+
+---
+
+## Size Options
+
+
+| Size     | Default Avatar | Profile Avatar | Group              |
+| -------- | -------------- | -------------- | ------------------ |
+| *(none)* | 40×40px        | 144×144px      | 40×40px per avatar |
+| `md`     | 32×32px        | —              | 32×32px per avatar |
+| `sm`     | 24×24px        | 80×80px        | 24×24px per avatar |
+
+
+---
+
+## Status vs placeholder `color`
+
+- **`status`** — Badge palette for the **status dot** (`purple` | `green` | `yellow` | `orange` | `gray` | `red` | `blue`). Passed through to `xpl-badge` as `variant`. Not used when `variant="group"`.
+- **`color`** — Placeholder **surface** behind initials when there is no `src` (`green` | `yellow` | `pink` | `primary` | `secondary`). Unrelated to the status dot.
+
+## Color Options (Placeholder Backgrounds)
+
+Use `color` when no `src` is provided to set the placeholder background:
+
+- `green` — Positive accent
+- `yellow` — Highlight accent
+- `pink` — Pink accent
+- `primary` — Brand primary
+- `secondary` — Action primary (purple)
+
+---
+
+## Design tokens
+
+These are the main Apollo Foundation tokens used in `packages/apollo-core/src/css/avatar.css`. Use them when overriding or migrating styles.
+
+| Role | Token(s) |
+| ---- | -------- |
+| Circular shape | `var(--xpl-border-radius-full)` |
+| Placeholder surface (default) | `var(--xpl-background-brand-secondary)`, `var(--xpl-text-inverse)` |
+| Placeholder `green` / `yellow` / `pink` | `var(--xpl-background-accent-positive)` / `var(--xpl-background-accent-highlight)` / `var(--xpl-background-accent-pink)` with `var(--xpl-text-inverse-on-light)` where applicable |
+| Placeholder `primary` / `secondary` | `var(--xpl-background-accent-brand)` / `var(--xpl-background-brand-secondary)` |
+| Link hover overlay | `var(--xpl-background-surface-transparent-25)` |
+| Focus outline | `var(--xpl-border-accent-default)` base; `color` modifiers use `var(--xpl-border-positive)`, `var(--xpl-border-accent-highlight)`, `var(--xpl-border-accent-brand)`, etc. (`outline` / `outline-offset` per `avatar.css`) |
+| With-text primary line | `var(--xpl-text-strong)`, `var(--xpl-font-size-title-5)`, `var(--xpl-font-weight-medium)` |
+| With-text secondary line | `var(--xpl-text-subdued)`, `var(--xpl-font-size-body)` |
+| Group overflow pill | `var(--xpl-background-surface-subtle)`, `var(--xpl-text-subdued)` |
+| Group avatar ring | `box-shadow` using `var(--xpl-border-large)` and `var(--xpl-background-surface-default)` |
+| Width / height | `var(--xpl-size-*)` for standard sizes; profile default uses `9rem` (documented in `TECH_DEBT.md`) |
+| Spacing & overlap | `var(--xpl-space-*)`, `var(--xpl-z-index-*)` |
+
+**Status dots** are styled by `xpl-badge`; see [`xpl-badge` readme](../xpl-badge/readme.md) for badge token usage.
+
+---
+
+## Accessibility
+
+- `name` is required for proper `alt` text on images and screen reader announcements
+- **Status dots** are implemented via `xpl-badge` and marked `aria-hidden` (purely visual); convey meaning in surrounding UI copy or labels if required
+- **Group overflow** includes `aria-label="{count} more"` for screen readers
+- **Links** use native `<a>` elements with full keyboard support
+- **Disabled state**: Use `disabled` prop to disable link behavior while keeping visual styles
+- **Focus management**: All interactive avatars (links) use `:focus-visible` for keyboard focus indicators
+
+---
+
+## Best Practices
+
+1. **Always provide `name`** — Essential for accessibility (alt text and screen readers; for placeholder initials, slot input has higher priority than the value passed in `name`)
+2. **Use `color` for placeholder consistency** — Assign consistent colors to users based on ID or name hash
+3. **Limit group data** — While the component handles any number, consider capping at reasonable numbers for UX
+4. **Slot content** — Use the default slot sparingly; prefer `name` prop for consistent initials generation
+
+---
+
+## Migration Notes
+
+### Status Dot Implementation:
+
+**What changed:** Status dots are implemented with `xpl-badge` (`dot-only` + `bordered`). The `status` prop uses the **badge color palette** (`purple`, `green`, `yellow`, `orange`, `gray`, `red`, `blue`) — the same names as `xpl-badge` `variant` — so avatar status stays consistent with badge semantics.
+
+**Impact:**
+
+- **Internal markup:** The status dot renders as `<xpl-badge dot-only bordered variant="...">` (with `variant` from `status`), not legacy `.xpl-avatar__dot--` classes.
+- **CSS targeting:** Custom selectors like `.xpl-avatar__dot--active` / `--warning` / `--inactive` are not used. Target `.xpl-avatar .xpl-badge--dot-only` if you must override styles.
+- **Prop values:** Use palette names above. Older examples sometimes used labels like `active` / `warning` / `inactive`; map those concepts to the palette (e.g. available → `green`, caution → `yellow`, offline → `gray`) per your design guidelines.
+
+**Recommended migration:**
+
+1. Replace custom CSS on `.xpl-avatar__dot--` with `.xpl-avatar .xpl-badge--dot-only` if needed
+2. Set `status` to the badge palette value that matches the intended color (see the status table in this readme)
+3. Remember `status` applies to default, `profile`, and `with-text` only — not `group`
+
+### Legacy `status` values — scheduled for removal (next major release)
+
+**These legacy string values are deprecated.** They exist only for backward compatibility with older integrations. They **will be removed** in the **next major** version of `@xplortech/apollo-core`. Plan your migration now; do not introduce new usage of the legacy names.
+
+| Deprecated `status` | Current mapping (temporary) | Replace with (badge palette) |
+| ------------------- | --------------------------- | ---------------------------- |
+| `active`            | `green`                     | `green`                      |
+| `inactive`          | `gray`                      | `gray`                       |
+| `warning`           | `red`                       | `red`                        |
+
+**Why:** Status dots use the same vocabulary as `xpl-badge` variants (`purple`, `green`, `yellow`, `orange`, `gray`, `red`, `blue`). The old semantic aliases (`active` / `warning` / `inactive`) duplicate that meaning with different names and increase maintenance cost, so they are being dropped from the public API.
+
+**Action items before the major release:**
+
+1. Search your codebase for `status="active"`, `status="inactive"`, and `status="warning"` on `<xpl-avatar>` (and framework wrappers).
+2. Replace each with the **`green`**, **`gray`**, or **`red`** value from the table above, matching your product intent.
+3. Re-test visuals: the mapped colors are unchanged today; after removal, only palette names will be accepted.
+
+### Component Dependency
+
+This component now depends on `xpl-badge`. Ensure `xpl-badge` is loaded in your application when using avatars with status dots.
+
+
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                                         | Type                                                        | Default     |
-| ---------- | ---------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------- |
-| `color`    | `color`    | Background color when there is no image src                                                         | `"green" \| "pink" \| "primary" \| "secondary" \| "yellow"` | `undefined` |
-| `disabled` | `disabled` | Sets a disabled state on the avatar when set to true                                                | `boolean`                                                   | `false`     |
-| `href`     | `href`     | The URL if the avatar should be hyperlinked                                                         | `string`                                                    | `undefined` |
-| `name`     | `name`     | Alt text for the image if there is an image src                                                     | `string`                                                    | `undefined` |
-| `size`     | `size`     | Size of the avatar                                                                                  | `"md" \| "sm"`                                              | `undefined` |
-| `src`      | `src`      | The image URL                                                                                       | `string`                                                    | `undefined` |
-| `status`   | `status`   | Color styles for the dot indicator to indicate varied states                                        | `"active" \| "inactive" \| "warning"`                       | `undefined` |
-| `target`   | `target`   | Where to open the URL chosen for the `href` prop: `_self` (default), `_blank`, `_parent`, or `_top` | `string`                                                    | `undefined` |
+| Property    | Attribute    | Description                                                                                                                                                                                                                                                                                                                                                           | Type                                                                                                              | Default     |
+| ----------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------- |
+| `color`     | `color`      | Background color when there is no image src                                                                                                                                                                                                                                                                                                                           | `"green" \| "pink" \| "primary" \| "secondary" \| "yellow"`                                                       | `undefined` |
+| `disabled`  | `disabled`   | Sets a disabled state on the avatar when set to true                                                                                                                                                                                                                                                                                                                  | `boolean`                                                                                                         | `false`     |
+| `groupData` | `group-data` | When `variant` is `group`, data for each face (max 4 visible + overflow count). Each item: { src?, name?, color? }.                                                                                                                                                                                                                                                   | `AvatarGroupItem[] \| string`                                                                                     | `undefined` |
+| `href`      | `href`       | The URL if the avatar should be hyperlinked                                                                                                                                                                                                                                                                                                                           | `string`                                                                                                          | `undefined` |
+| `name`      | `name`       | Alt text for the image; also used for initials when no image and no slot.                                                                                                                                                                                                                                                                                             | `string`                                                                                                          | `undefined` |
+| `size`      | `size`       | Size of the avatar (and of each avatar in a group).                                                                                                                                                                                                                                                                                                                   | `"md" \| "sm"`                                                                                                    | `undefined` |
+| `src`       | `src`        | The image URL                                                                                                                                                                                                                                                                                                                                                         | `string`                                                                                                          | `undefined` |
+| `status`    | `status`     | <span style="color:red">**[DEPRECATED]**</span> :** `active`, `warning`, and `inactive` still map to `green`, `red`, and `gray` for existing consumers. Prefer palette names; legacy values are scheduled for removal in the next **major** release.<br/><br/>Shown for the default avatar, `profile`, and `with-text`; not shown when `variant` is `group`. **Legacy | `"active" \| "blue" \| "gray" \| "green" \| "inactive" \| "orange" \| "purple" \| "red" \| "warning" \| "yellow"` | `undefined` |
+| `subText`   | `sub-text`   | Secondary text shown when `variant` is `with-text` (e.g. email).                                                                                                                                                                                                                                                                                                      | `string`                                                                                                          | `undefined` |
+| `target`    | `target`     | Where to open the URL chosen for the `href` prop: `_self` (default), `_blank`, `_parent`, or `_top`                                                                                                                                                                                                                                                                   | `string`                                                                                                          | `undefined` |
+| `variant`   | `variant`    | Optional layout: `profile` (large profile sizes), `group` (stacked faces + `groupData`; `status` not shown), `with-text` (avatar with `name` / `subText` beside it). Omit for the default single avatar.                                                                                                                                                              | `"group" \| "profile" \| "with-text"`                                                                             | `undefined` |
 
 
 ## Dependencies
 
 ### Used by
 
- - [xpl-list](../xpl-list)
+ - [xpl-list-item](../xpl-list/xpl-list-item)
+
+### Depends on
+
+- [xpl-badge](../xpl-badge)
 
 ### Graph
 ```mermaid
 graph TD;
-  xpl-list --> xpl-avatar
+  xpl-avatar --> xpl-badge
+  xpl-list-item --> xpl-avatar
   style xpl-avatar fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

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

@@ -1,6 +1,6 @@
 # xpl-backdrop
 
-This backdrop is used to add a transparent darker layer on top of the content area when the main nav is active.
+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. 
 
 <!-- Auto Generated Below -->