@xplortech/apollo-core 2.6.0 → 2.7.0

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:"48056451ad54987de8d046a3892cc1011ed41bbb",class:{"xpl-toolbar":!0,dark:!0,hidden:0===this.selectedItemCount}},c("div",{key:"3c9680e4cf006dee69372d271a0720b6802767bc",class:"toolbar"},c("p",{key:"afcfba4a2d5c73d6bf602b94340280dcc28d6493",class:"selected-item-count"},this.selectedItemCount," Selected"),c("div",{key:"fdadc34738fcf397a38772ab817c3a5bc1e5015f",class:"actions"},c("slot",{key:"b6571d83f8ac800143e4f9cd62559aac83c7e424",name:"actions-left"}),c("slot",{key:"30aa34da340647dbcb79f8862c5ca9647ebedb12",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-tooltip2.js

@@ -1 +1 @@
-import{h as e,proxyCustomElement as t,HTMLElement as o,Host as i,transformTag as l}from"@stencil/core/internal/client";const r=()=>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"})))),s=t(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.position="top-middle",this.hideArrow=!1}render(){return e(i,{key:"849e02776ea70de89a5bd3c133df6205ff3265b3"},e("div",{key:"98947c9ece90e6ebcbf90c23cd2e1c0902ae59d5",class:"xpl-tooltip-container"},e("slot",{key:"a24df50f2081fcc4ef70c685933fab1420eb850a"}),e("div",{key:"be1a1832cdf428f2d368258b3a784e7b27589a97",class:`xpl-tooltip xpl-tooltip--${this.position}`},this.text),!this.hideArrow&&e("div",{key:"43241958db2b8fec0993040f7321bca7d5a163e6",class:"xpl-tooltip-arrow"},e(r,{key:"34359c7bec6b7ee0616eac8961e9941b60c7d321"}))))}},[260,"xpl-tooltip",{text:[1],position:[1],hideArrow:[4,"hide-arrow"]}]);function a(){"undefined"!=typeof customElements&&["xpl-tooltip"].forEach((e=>{"xpl-tooltip"===e&&(customElements.get(l(e))||customElements.define(l(e),s))}))}export{s as T,a 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 e,transformTag as n}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(e,{key:"b32ed07473f48009a3a6e76ba1a51fe156b19f1c"},a("nav",{key:"7a98d494b15c5af7e8e0089ab64806c04d394381","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:"d5f62631648bcd858b26a6500e2506e6f40d5c99",name:"main"})))}},[260,"xpl-utility-bar",{navControl:[4,"nav-control"],isNavOpenAtStartup:[4,"is-nav-open-at-startup"],open:[32]}]),c=o,r=function(){"undefined"!=typeof customElements&&["xpl-utility-bar","xpl-icon"].forEach((t=>{switch(t){case"xpl-utility-bar":customElements.get(n(t))||customElements.define(n(t),o);break;case"xpl-icon":customElements.get(n(t))||l()}}))};export{c as XplUtilityBar,r as defineCustomElement}
+import{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-avatar/readme.md

@@ -1,37 +1,311 @@
 # xpl-avatar
-An Avatar is a visual representation of a user or entity. There are 5 types of avatar Figma component; Avatar Default, Avatar Group, Avatar Profile, Avatar Text, and Avatar Clickable. Each comes in a variety of sizes, faces and placeholder colors. 
 
-Avatars typically display a user’s image. When no image is available, use the first and last initial of a user’s name. The avatar can handle up to three letters.
+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.
 
-There are 10 avatar faces and 10 corresponding colors. We suggest randomly generating placeholder colors to show a visual differentiator when multiple avatars or an avatar group is displayed. 
 
 <!-- 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-badge/readme.md

@@ -13,7 +13,11 @@ Badges support multiple **variants** (colors), **sizes**, **shapes**, and **dot
 <xpl-badge variant="gray" size="small">Draft</xpl-badge>
 ```
 
-Attach badges close to the item they describe (a label, row, chip, or control) and keep the text short – usually one or two words.
+Attach badges close to the item they describe (a label, row, chip, or control). Prefer **short labels** (often one or two words) for readability.
+
+### Label text and overflow
+
+Slot content is rendered inside an internal `.xpl-badge__label` wrapper (you do not add this in your markup). Labels are **single-line**: text does not wrap to multiple lines. When horizontal space is tight (for example a narrow column or flex layout), overflowing text **truncates with an ellipsis** (`…`). The host respects the parent width (`max-width: 100%`). If truncation makes a label hard to read, shorten the copy or widen the layout; use a tooltip or similar only if your product needs the full string on hover.
 
 ## Sizes & shapes
 
@@ -44,17 +48,16 @@ Set `dot` to add a colored dot before the text, inside the pill:
 ### Dot-only badge (compact status / count)
 
 > [!IMPORTANT]
-> The numbered badge are meant to be used with numeric values only. For showing text in the badge, its recommended to use normal badge component (without `dot-only` enabled).
+> Dot-only badges are meant to be used with **numeric values** (or very short strings). For longer text labels, use the standard badge (without `dot-only`).
 
-- When overlaying another element with a background color, use the `bordered` property to allow the badge to stand off.
+- When overlaying another element with a background color, use the `bordered` property so the badge separates clearly from what is behind it.
 
 Set `dot-only` when you want a badge built around the dot:
 
 - With **no children**: renders a small circular status dot.
-- With **children**: renders a compact pill with a dot and text/number inside (e.g. unread count).
-- **Number badges** serve as notifications, typically appended to a label or another component. Color can be any --background-accent color variable.
-Badges expand horizontally with content.
-- This version now have `bordered` prop that can be used to toggle the border around dot badge for better separation from avatar or wherever it is being used.
+- With **children**: renders a compact pill with text or a number inside (for example an unread count).
+- **Notification-style counts** are often appended to a label or another component. Dot-only label text follows the same **single-line truncation** rules as standard badges when space is limited.
+- Use **`bordered`** to toggle a ring around the dot badge for separation from an avatar or similar surface.
 
 ```html
 <!-- Status dot only -->
@@ -108,12 +111,14 @@ The legacy semantic names `success`, `warning`, `inactive`, and `error` are stil
 
 ### Used by
 
- - [xpl-list](../xpl-list)
+ - [xpl-avatar](../xpl-avatar)
+ - [xpl-list-item](../xpl-list/xpl-list-item)
 
 ### Graph
 ```mermaid
 graph TD;
-  xpl-list --> xpl-badge
+  xpl-avatar --> xpl-badge
+  xpl-list-item --> xpl-badge
   style xpl-badge fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

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

@@ -2,17 +2,56 @@
 
 Banners display a system level or page level message at the top of the screen. The section-banner variant displays important messages inline within a section.
 
+## Usage
+
+### Web component (`<xpl-banner>`)
+
+Bar layout (default) with heading, description, primary action, and dismiss:
+
+```html
+<xpl-banner
+  appearance="information"
+  heading="Your session will expire soon."
+  description="Save your work to avoid losing changes."
+  action-text="Extend session"
+  is-dismissible="true"
+></xpl-banner>
+```
+
+Section layout with optional secondary action and no leading icon:
+
+```html
+<xpl-banner
+  appearance="positive"
+  is-section="true"
+  has-icon="false"
+  heading="Changes saved"
+  description="Your updates are stored."
+  action-text="View details"
+  secondary-action-text="Undo"
+></xpl-banner>
+```
+
+### Plain HTML (BEM classes)
+
+Use the same structure when styling with `banner.css` without the Stencil component. Switch bar vs section with host modifiers (`xpl-banner--section`, `xpl-banner--no-icon`, `xpl-banner--{appearance}`).
+
 ## Accessibility
 
-`xpl-banner` renders with `role="region"` and a computed `aria-label` that reflects the current `appearance`
-(e.g. "Information banner", "Positive banner", "Warning banner", "Error banner"). This makes the banner a navigable ARIA
-landmark so assistive-technology users can locate and identify it without reading the full message content.
+`xpl-banner` uses `role="region"` so the banner is a navigable landmark.
 
-- The leading icon wrapper carries `aria-hidden="true"` — the icon is decorative; the message text is the
-  accessible content.
-- The dismiss `<xpl-icon>` inside the dismiss button also carries `aria-hidden="true"` to prevent the
-  icon's figcaption ("xmark icon") from being announced alongside the button's own `aria-label`.
-- The dismiss button `aria-label` is "Dismiss banner" for default layout and "Dismiss section banner" for section layout.
+**`aria-label` on the host (never empty):**
+
+| Layout | `aria-label` source |
+| ------ | ------------------- |
+| Bar (default) | Fixed label from `appearance`: `"Information banner"`, `"Positive banner"`, `"Warning banner"`, or `"Error banner"`. |
+| Section | Trimmed `heading` when present; otherwise `"Section banner"`. |
+
+Keyboard: **Tab** moves focus to action buttons and the dismiss control; **Enter** and **Space** activate `xpl-button` actions and the dismiss button. Focus rings use `:focus-visible` (dismiss uses appearance-specific outline tokens in CSS; actions use `xpl-button` focus styles).
+
+- The leading icon wrapper carries `aria-hidden="true"` — the icon is decorative; the message text is the accessible content.
+- The dismiss `<xpl-icon>` inside the dismiss button also carries `aria-hidden="true"` so the decorative icon is not announced in addition to the button label.
+- The dismiss button `aria-label` is `"Dismiss banner"` in bar layout and `"Dismiss section banner"` when `is-section` is true.
 
 ## Token Use
 
@@ -83,9 +122,7 @@ Set `is-section` to render the section-banner layout:
 
 Set `has-icon="false"` to hide the leading icon in the section layout. This applies `xpl-banner--no-icon` on the host, which shifts heading, description, and actions to start in the first grid column instead of the second. In bar layout the icon always renders regardless of `hasIcon`.
 
-## HTML/CSS Usage
-
-Both the bar and section variants share the same DOM structure. Switch between them using only a class on the host:
+Bar and section variants share the same DOM shape. Plain-HTML example (classes only):
 
 ```html
 <!-- Bar variant -->