@xplortech/apollo-core 2.5.0 → 2.6.0

package/dist/components/xpl-slideout.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as d,createEvent as t,h as s,Host as c,transformTag as a}from"@stencil/core/internal/client";import{d as o}from"./xpl-backdrop2.js";import{d as i}from"./xpl-button2.js";import{d as l}from"./xpl-divider2.js";import{d as b}from"./xpl-icon2.js";const f=e(class extends d{constructor(e){super(),!1!==e&&this.__registerHost(),this.isOpenChange=t(this,"isOpenChange",7),this.isOpen=!1,this.backdrop=!1,this.variant="default",this.showFooter=!0,this.handleClose=()=>{this.isOpen=!1}}watchPropHandler(e){this.isOpen=e,this.isOpenChange.emit(e)}handleScroll(){const e=this.el.querySelector(".content");e.scrollHeight>e.clientHeight?e.classList.add("has-shadow"):e.classList.remove("has-shadow")}componentDidLoad(){this.handleScroll()}render(){return s(c,{key:"d38f708c91ffd96369e5277b9e4d5c74e52a41d4",class:"xpl-slideout"},this.backdrop&&this.isOpen&&s("xpl-backdrop",{key:"8cfea9e2d270e84783f99db0b12b2749a829ff8a",onClick:this.handleClose}),s("aside",{key:"8b3a24dccbb44c281bad35ab8d2af895bde56d10",class:"slideout slideout--"+(!this.isOpen&&"closed")},s("header",{key:"921acd55e9aedcd5c04d2d6d4f2d26515ec744b8",class:"header"},s("div",{key:"dd434e7a1b5d28aa0833979f8d515df28ad00cc9",class:"title"},s("slot",{key:"9743e88555558ec66e46528b04d6f6391d1bd8df",name:"title"}),s("xpl-button",{key:"7b7b267fa892363d0d25af419bdaa55dd5a362ef",class:"close-button",iconOnly:!0,size:"sm",variant:"subtle",onClick:this.handleClose},s("xpl-icon",{key:"d27bd1de9864fbc6b72f1b71658ece1f5dfeddc9",icon:"x"}))),s("div",{key:"3183410cecb0973d8b7dca3997e1f6c254d28892",class:"subtitle"},s("slot",{key:"6dd1fbcdd15fde802a316053b19566c618f41dd0",name:"subtitle"})),s("div",{key:"b3c4a050275de296b43dc7d9e87bcc082c7f14ec",class:"search"},s("slot",{key:"c6f0ef04a753cb71da97021caa791ded9e2e0533",name:"search"}))),s("xpl-divider",{key:"68301c3540651d6d0dc2e9577d8fc6d2e5e9f536",tier:0,class:"divider top"}),s("article",{key:"eff6e4e81dfe48a9bf2f59d5f5ca09c5f56e6491",class:"content",tabIndex:0},s("slot",{key:"f3f25c5b51ae017cb6f84ea0f1c14329ba429adb",name:"content"})),this.showFooter&&s("footer",{key:"6e94107fefc5e2e24edb21f61b0e4af32c954445"},s("xpl-divider",{key:"89c550dbb352c6b22534edf7ff3a0e8d0513a206",tier:0,class:"divider bottom"}),s("div",{key:"32fe00b37f65ef0b1ba42bf8e7d8f59dfec7aa68",class:"footer"},s("slot",{key:"f42ee4c847be0ab553d039bc0ce50e29e70984fa",name:"tertiary"}),s("slot",{key:"dd6b8757bcd85dd79a084d3ec0bbbfd6629297bb",name:"secondary"}),s("slot",{key:"e6d4fea0d1ebfa7bd71fce313dee34b25f164b0c",name:"primary"})))))}get el(){return this}static get watchers(){return{isOpen:[{watchPropHandler:0}]}}},[260,"xpl-slideout",{isOpen:[1540,"is-open"],backdrop:[4],variant:[1],showFooter:[4,"show-footer"]},[[9,"scroll","handleScroll"]],{isOpen:[{watchPropHandler:0}]}]),r=f,n=function(){"undefined"!=typeof customElements&&["xpl-slideout","xpl-backdrop","xpl-button","xpl-divider","xpl-icon"].forEach((e=>{switch(e){case"xpl-slideout":customElements.get(a(e))||customElements.define(a(e),f);break;case"xpl-backdrop":customElements.get(a(e))||o();break;case"xpl-button":customElements.get(a(e))||i();break;case"xpl-divider":customElements.get(a(e))||l();break;case"xpl-icon":customElements.get(a(e))||b()}}))};export{r as XplSlideout,n as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as c,createEvent as t,h as a,Host as s,transformTag as d}from"@stencil/core/internal/client";import{d as o}from"./xpl-backdrop2.js";import{d as i}from"./xpl-button2.js";import{d as l}from"./xpl-divider2.js";import{d as r}from"./xpl-icon2.js";const b=e(class extends c{constructor(e){super(),!1!==e&&this.__registerHost(),this.isOpenChange=t(this,"isOpenChange",7),this.isOpen=!1,this.backdrop=!1,this.variant="default",this.showFooter=!0,this.handleClose=()=>{this.isOpen=!1}}watchPropHandler(e){this.isOpen=e,this.isOpenChange.emit(e)}handleScroll(){const e=this.el.querySelector(".content");e.scrollHeight>e.clientHeight?e.classList.add("has-shadow"):e.classList.remove("has-shadow")}componentDidLoad(){this.handleScroll()}render(){return a(s,{key:"b2628014184ba329999545fe940adcb175b89dfd",class:"xpl-slideout"},this.backdrop&&this.isOpen&&a("xpl-backdrop",{key:"3f243b5af61aee13d375874ddb6a974608405e05",onClick:this.handleClose}),a("aside",{key:"781804a784efad6f6e9d9d0ee09dd46b99800707",class:"slideout slideout--"+(!this.isOpen&&"closed")},a("header",{key:"35bf26acb7f45fc60d9447093d00c263c5c6a074",class:"header"},a("div",{key:"939262fd0caf93059c022bc827cf1ebf31cf0505",class:"title"},a("slot",{key:"d0434f317394c1e6aca52de73cb1645605b70a2c",name:"title"}),a("xpl-button",{key:"091d2454db101c318a6c5b42a5650d698e318a46",class:"close-button","icon-only":!0,size:"sm",variant:"tertiary",onClick:this.handleClose},a("xpl-icon",{key:"161a7bd05ce6864cd3b72a9a523c0f6e39d95cfb",icon:"x"}))),a("div",{key:"554153d17ba38df8b86534f4b59cb74c31553c0e",class:"subtitle"},a("slot",{key:"649d87c4dea7e87c8c860d81b337c5c284d4aab1",name:"subtitle"})),a("div",{key:"2fe24ec6b15e48da8b61f0601342e52f83dd52d7",class:"search"},a("slot",{key:"2ca9723ce317d1981485dcc923fff44c885eb814",name:"search"}))),a("xpl-divider",{key:"c11b01177de43cafc6cf6f59c8807027dd202cfb",tier:0,class:"divider top"}),a("article",{key:"12030211ebdfcc232e02e383d6ce9d64349882bc",class:"content",tabIndex:0},a("slot",{key:"b6af6c47722c8a1820ff94c052788b95736622b7",name:"content"})),this.showFooter&&a("footer",{key:"151c779df75a16947353701df695967686e9e07b"},a("xpl-divider",{key:"773e0ce1051ac5a2f67864c5b4a6bd8120b3c270",tier:0,class:"divider bottom"}),a("div",{key:"e2ed12c38474a0102fdc24063bae95e4e36c43f7",class:"footer"},a("slot",{key:"06f346214acfd3351adb9fca113466b1f95e5b9c",name:"tertiary"}),a("slot",{key:"1afb8a2250cd62a752a9bd60decade017a7ae58e",name:"secondary"}),a("slot",{key:"18f8b40b550b38eb44c765dd3cdbca44000032b8",name:"primary"})))))}get el(){return this}static get watchers(){return{isOpen:[{watchPropHandler:0}]}}},[260,"xpl-slideout",{isOpen:[1540,"is-open"],backdrop:[4],variant:[1],showFooter:[4,"show-footer"]},[[9,"scroll","handleScroll"]],{isOpen:[{watchPropHandler:0}]}]),n=b,f=function(){"undefined"!=typeof customElements&&["xpl-slideout","xpl-backdrop","xpl-button","xpl-divider","xpl-icon"].forEach((e=>{switch(e){case"xpl-slideout":customElements.get(d(e))||customElements.define(d(e),b);break;case"xpl-backdrop":customElements.get(d(e))||o();break;case"xpl-button":customElements.get(d(e))||i();break;case"xpl-divider":customElements.get(d(e))||l();break;case"xpl-icon":customElements.get(d(e))||r()}}))};export{n as XplSlideout,f as defineCustomElement}

package/dist/components/xpl-tab-panel.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,h as a,Host as l,transformTag as n}from"@stencil/core/internal/client";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.selected=!1}render(){return a(l,{key:"f22da3feed8a64baae080a1593ea35c68d41f857",class:{"xpl-tab-panel":!0,"xpl-tab-panel--selected":this.selected},role:"tabpanel","aria-labelledby":this.target},a("slot",{key:"88311f1af38490ec1b3ba8aee8f1bb39d58cfd11"}))}},[260,"xpl-tab-panel",{target:[1],selected:[4]}]),c=s,p=function(){"undefined"!=typeof customElements&&["xpl-tab-panel"].forEach((e=>{"xpl-tab-panel"===e&&(customElements.get(n(e))||customElements.define(n(e),s))}))};export{c as XplTabPanel,p as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,h as l,Host as a,transformTag as n}from"@stencil/core/internal/client";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.selected=!1}render(){return l(a,{key:"7266510f84437902c1ecfdfe19abd6f1a9ac09e2",class:{"xpl-tab-panel":!0,"xpl-tab-panel--selected":this.selected},role:"tabpanel","aria-labelledby":this.target},l("slot",{key:"7aa5c5633d7f06f521699f30539dcb505703db64"}))}},[260,"xpl-tab-panel",{target:[1],selected:[4]}]),c=s,p=function(){"undefined"!=typeof customElements&&["xpl-tab-panel"].forEach((e=>{"xpl-tab-panel"===e&&(customElements.get(n(e))||customElements.define(n(e),s))}))};export{c as XplTabPanel,p as defineCustomElement}

package/dist/components/xpl-tab.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as a,Host as c,transformTag as l}from"@stencil/core/internal/client";const n=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.tabChange=s(this,"tabChange",7),this.selected=!1,this.handleTabClick=()=>{this.tabChange.emit(this.target)}}render(){return a(c,{key:"3f1eaa197c02b1bb45da97e59a58aeea9f86bc6f",class:{"xpl-tab":!0,"xpl-tab--selected":this.selected}},a("button",{key:"12066216ecbc4fa91c7645b45e4affce20342e4b",onClick:this.handleTabClick,class:"xpl-tab__button",role:"tab","aria-controls":this.target},a("slot",{key:"bbe6f9c862510aa83d4816fc7366e82ac10cf266"})))}},[260,"xpl-tab",{target:[1],selected:[4]}]),b=n,o=function(){"undefined"!=typeof customElements&&["xpl-tab"].forEach((t=>{"xpl-tab"===t&&(customElements.get(l(t))||customElements.define(l(t),n))}))};export{b as XplTab,o as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as c,Host as a,transformTag as b}from"@stencil/core/internal/client";const l=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.tabChange=s(this,"tabChange",7),this.selected=!1,this.handleTabClick=()=>{this.tabChange.emit(this.target)}}render(){return c(a,{key:"1450ace89b692fe55c0d72baf719fc523b3f5cdd",class:{"xpl-tab":!0,"xpl-tab--selected":this.selected}},c("button",{key:"6bd68b6eb3cf05bbd21b17cbd6fba58ba2ca3a7c",onClick:this.handleTabClick,class:"xpl-tab__button",role:"tab","aria-controls":this.target},c("slot",{key:"5d54ca80925a7dd6ace6486e4dd6978d268ad584"})))}},[260,"xpl-tab",{target:[1],selected:[4]}]),n=l,d=function(){"undefined"!=typeof customElements&&["xpl-tab"].forEach((t=>{"xpl-tab"===t&&(customElements.get(b(t))||customElements.define(b(t),l))}))};export{n as XplTab,d as defineCustomElement}

package/dist/components/xpl-table-header.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,h as c,Host as a,transformTag as l}from"@stencil/core/internal/client";const r=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost()}render(){return c(a,{key:"ab15bfcac25fa381989ed3cdaf2b3c5f00db6bdb",role:"row",class:"xpl-table-header"},c("slot",{key:"e0a8ef7c92c44ea84abc182d93040a4c14cd7072"}))}},[260,"xpl-table-header"]),s=r,n=function(){"undefined"!=typeof customElements&&["xpl-table-header"].forEach((e=>{"xpl-table-header"===e&&(customElements.get(l(e))||customElements.define(l(e),r))}))};export{s as XplTableHeader,n as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,h as a,Host as l,transformTag as r}from"@stencil/core/internal/client";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost()}render(){return a(l,{key:"1724195feab553e1f5f468352be234a5f867e75a",role:"row",class:"xpl-table-header"},a("slot",{key:"14d458367da08aed53b57a4ccda1d26740922e05"}))}},[260,"xpl-table-header"]),n=s,o=function(){"undefined"!=typeof customElements&&["xpl-table-header"].forEach((e=>{"xpl-table-header"===e&&(customElements.get(r(e))||customElements.define(r(e),s))}))};export{n as XplTableHeader,o as defineCustomElement}

package/dist/components/xpl-table.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as s,createEvent as e,h as i,Host as h,transformTag as a}from"@stencil/core/internal/client";import{d as l}from"./xpl-icon2.js";const c=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.tableSelect=e(this,"tableSelect",7),this.sortChanged=e(this,"sortChanged",3),this.selectedValues=[],this.isSortable=!1,this.sortableColumns=[],this.areAllSelected=!1,this.hasScrolled=!1,this.sortTypeArray=[],this.selectAllValue=Math.random().toString(36).slice(2),this.selectAll=t=>{const{target:s}=t;if(!(s instanceof HTMLInputElement))return;const{checked:e}=s;this.areAllSelected=e,this.selected=this.selectedValues.length>0?Array.from(this.el.querySelectorAll("tbody td:first-child input")).map((t=>e?null==t?void 0:t.value:e)):this.selected.map((()=>e)),this.onChange()},this.selectOne=(t,s)=>{const{target:e}=t;if(!(e instanceof HTMLInputElement))return;const{checked:i,value:h}=e;this.areAllSelected=!1,this.selected=this.selected.map(((t,e)=>e!==s?t:this.selectedValues.length>0&&i?h:i)),this.onChange()},this.onChange=()=>{this.tableSelect.emit({selected:this.selected,areAllSelected:this.areAllSelected})},this.onScroll=()=>{this.hasScrolled=this.container.scrollLeft>0},this.sortBy=(t,s)=>{const e=(s,e)=>s[t].toLocaleLowerCase()<e[t].toLocaleLowerCase()?-1:s[t].toLocaleLowerCase()>e[t].toLocaleLowerCase()?1:0;switch(s[t]){case"asc":this.rowData.sort(((t,s)=>e(t,s)));break;case"desc":this.rowData.sort(((t,s)=>e(s,t)));break;default:this.rowData=this.data,this.sortTypeArray[t]=null}this.rowData=Array.from(this.rowData),this.render()},this.setData=()=>{this.rowData=void 0!==this.data?Array.from(this.data):[]},this.setFooterData=()=>{this.rowFooterData=void 0!==this.footer?Array.from(this.footer):[]}}handleSort(t,s,e,i){t.preventDefault(),t.stopPropagation(),s&&(this.sortTypeArray=this.sortTypeArray.map(((t,s)=>{if(s!==e)return null;switch(t){case"asc":return"desc";case"desc":return null;default:return"asc"}})),this.sortChanged.emit({colNum:e,colName:i,sortTypeArr:this.sortTypeArray}).defaultPrevented||this.sortBy(e,this.sortTypeArray))}watchData(){this.setData()}watchFooterData(){this.setFooterData()}watchColumns(){this.sortTypeArray=this.columns?this.columns.map((()=>null)):[]}componentWillLoad(){this.areAllSelected=!1,this.setData(),this.setFooterData(),this.selected=Array(this.rowData.length).fill(!1),this.sortTypeArray=this.columns?this.columns.map((()=>null)):[]}render(){var t;return!this.columns||this.sortTypeArray&&this.sortTypeArray.length===this.columns.length||(this.sortTypeArray=this.columns.map((()=>null))),i(h,{key:"3ac2c96a4d691a8e60a2f0f5732787a4dd43e71e"},i("div",{key:"242225267bf912ae46cf38dd1750dcd66fa627f7",class:"xpl-table-container",onScroll:this.onScroll,ref:t=>{this.container=t}},i("table",{key:"76f22b451b7d09f2843d1afc063f8e287afb419f",class:{"xpl-table":!0,"xpl-table--striped":this.striped,"xpl-table--freeze":this.freeze,"xpl-table--has-scrolled":this.hasScrolled}},this.columns&&i("thead",{key:"be12e8292faf5be828c281e3c7d5396652c7e4b8"},this.columns.map(((t,s)=>{var e;const h=(t=>{switch(t){case"asc":return"arrow-up";case"desc":return"arrow-down";default:return"dash"}})(null===(e=this.sortTypeArray)||void 0===e?void 0:e[s]),a=!(!this.isSortable||!this.sortableColumns[s]);return i("th",null,i("label",{onClick:e=>this.handleSort(e,a,s,t.replace(/ /g,"-").toLowerCase()),class:a?"cursor-pointer":""},this.multiselect&&0===s&&i("input",{checked:this.areAllSelected,id:"__xpl-table-th",indeterminate:!this.areAllSelected&&this.selected.some((t=>t)),onClick:t=>{t.stopPropagation(),this.selectAll(t)},type:"checkbox",value:"select-all-"+this.selectAllValue}),t,a&&!!this.sortTypeArray[s]&&i("xpl-icon",{icon:h,size:16})))}))),i("tbody",{key:"94c5ad3a68f1cffa73a55bb106e81c8899ddc2c4"},this.rowData.map(((t,s)=>i("tr",{class:this.selected&&this.selected[s]?"xpl-table-row-selected":""},t.map(((t,e)=>i("td",null,this.multiselect&&0===e?i("label",{htmlFor:"__xpl-table-row-"+s},i("input",{id:"__xpl-table-row-"+s,checked:!!this.selected[s],type:"checkbox",onChange:t=>this.selectOne(t,s),value:this.selectedValues.length>0?this.selectedValues[s]:"xpl-table-checkbox-"+s}),i("div",{innerHTML:t})):i("div",{innerHTML:t})))))))),(null===(t=this.rowFooterData)||void 0===t?void 0:t.length)>0&&i("tfoot",{key:"2bcfdfed0e5709f60f4beec7f8f58038899b8b30"},this.rowFooterData.map((t=>i("tr",null,t.map((t=>i("td",null,i("div",{innerHTML:t})))))))))))}get el(){return this}static get watchers(){return{data:[{watchData:0}],footer:[{watchFooterData:0}],columns:[{watchColumns:0}]}}},[0,"xpl-table",{columns:[16],data:[16],footer:[16],freeze:[4],multiselect:[4],striped:[4],selectedValues:[16],isSortable:[4,"is-sortable"],sortableColumns:[16],areAllSelected:[32],rowData:[32],rowFooterData:[32],hasScrolled:[32],selected:[32],sortTypeArray:[32]},void 0,{data:[{watchData:0}],footer:[{watchFooterData:0}],columns:[{watchColumns:0}]}]),r=c,o=function(){"undefined"!=typeof customElements&&["xpl-table","xpl-icon"].forEach((t=>{switch(t){case"xpl-table":customElements.get(a(t))||customElements.define(a(t),c);break;case"xpl-icon":customElements.get(a(t))||l()}}))};export{r as XplTable,o as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as s,createEvent as e,h as i,Host as h,transformTag as a}from"@stencil/core/internal/client";import{d as l}from"./xpl-icon2.js";const c=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.tableSelect=e(this,"tableSelect",7),this.sortChanged=e(this,"sortChanged",3),this.selectedValues=[],this.isSortable=!1,this.sortableColumns=[],this.areAllSelected=!1,this.hasScrolled=!1,this.sortTypeArray=[],this.selectAllValue=Math.random().toString(36).slice(2),this.selectAll=t=>{const{target:s}=t;if(!(s instanceof HTMLInputElement))return;const{checked:e}=s;this.areAllSelected=e,this.selected=this.selectedValues.length>0?Array.from(this.el.querySelectorAll("tbody td:first-child input")).map((t=>e?null==t?void 0:t.value:e)):this.selected.map((()=>e)),this.onChange()},this.selectOne=(t,s)=>{const{target:e}=t;if(!(e instanceof HTMLInputElement))return;const{checked:i,value:h}=e;this.areAllSelected=!1,this.selected=this.selected.map(((t,e)=>e!==s?t:this.selectedValues.length>0&&i?h:i)),this.onChange()},this.onChange=()=>{this.tableSelect.emit({selected:this.selected,areAllSelected:this.areAllSelected})},this.onScroll=()=>{this.hasScrolled=this.container.scrollLeft>0},this.sortBy=(t,s)=>{const e=(s,e)=>s[t].toLocaleLowerCase()<e[t].toLocaleLowerCase()?-1:s[t].toLocaleLowerCase()>e[t].toLocaleLowerCase()?1:0;switch(s[t]){case"asc":this.rowData.sort(((t,s)=>e(t,s)));break;case"desc":this.rowData.sort(((t,s)=>e(s,t)));break;default:this.rowData=this.data,this.sortTypeArray[t]=null}this.rowData=Array.from(this.rowData),this.render()},this.setData=()=>{this.rowData=void 0!==this.data?Array.from(this.data):[]},this.setFooterData=()=>{this.rowFooterData=void 0!==this.footer?Array.from(this.footer):[]}}handleSort(t,s,e,i){t.preventDefault(),t.stopPropagation(),s&&(this.sortTypeArray=this.sortTypeArray.map(((t,s)=>{if(s!==e)return null;switch(t){case"asc":return"desc";case"desc":return null;default:return"asc"}})),this.sortChanged.emit({colNum:e,colName:i,sortTypeArr:this.sortTypeArray}).defaultPrevented||this.sortBy(e,this.sortTypeArray))}watchData(){this.setData()}watchFooterData(){this.setFooterData()}watchColumns(){this.sortTypeArray=this.columns?this.columns.map((()=>null)):[]}componentWillLoad(){this.areAllSelected=!1,this.setData(),this.setFooterData(),this.selected=Array(this.rowData.length).fill(!1),this.sortTypeArray=this.columns?this.columns.map((()=>null)):[]}render(){var t;return!this.columns||this.sortTypeArray&&this.sortTypeArray.length===this.columns.length||(this.sortTypeArray=this.columns.map((()=>null))),i(h,{key:"eb52da2b523707a53c0bb414dda75197907e71af"},i("div",{key:"0f5bf430701ad905c4d918ee9039db52c19eb01c",class:"xpl-table-container",onScroll:this.onScroll,ref:t=>{this.container=t}},i("table",{key:"bdbb2c47a7bf119b46417118f334ba861960313d",class:{"xpl-table":!0,"xpl-table--striped":this.striped,"xpl-table--freeze":this.freeze,"xpl-table--has-scrolled":this.hasScrolled}},this.columns&&i("thead",{key:"a868be75efee1ec20d4845e8219a49ab1fae8aca"},this.columns.map(((t,s)=>{var e;const h=(t=>{switch(t){case"asc":return"arrow-up";case"desc":return"arrow-down";default:return"dash"}})(null===(e=this.sortTypeArray)||void 0===e?void 0:e[s]),a=!(!this.isSortable||!this.sortableColumns[s]);return i("th",null,i("label",{onClick:e=>this.handleSort(e,a,s,t.replace(/ /g,"-").toLowerCase()),class:a?"cursor-pointer":""},this.multiselect&&0===s&&i("input",{checked:this.areAllSelected,id:"__xpl-table-th",indeterminate:!this.areAllSelected&&this.selected.some((t=>t)),onClick:t=>{t.stopPropagation(),this.selectAll(t)},type:"checkbox",value:"select-all-"+this.selectAllValue}),t,a&&!!this.sortTypeArray[s]&&i("xpl-icon",{icon:h,size:16})))}))),i("tbody",{key:"8324eda16235ba66f2aa3bebc073a10a91a32518"},this.rowData.map(((t,s)=>i("tr",{class:this.selected&&this.selected[s]?"xpl-table-row-selected":""},t.map(((t,e)=>i("td",null,this.multiselect&&0===e?i("label",{htmlFor:"__xpl-table-row-"+s},i("input",{id:"__xpl-table-row-"+s,checked:!!this.selected[s],type:"checkbox",onChange:t=>this.selectOne(t,s),value:this.selectedValues.length>0?this.selectedValues[s]:"xpl-table-checkbox-"+s}),i("div",{innerHTML:t})):i("div",{innerHTML:t})))))))),(null===(t=this.rowFooterData)||void 0===t?void 0:t.length)>0&&i("tfoot",{key:"d3c55c0585359a28a51a8b0196c4e9841bc86919"},this.rowFooterData.map((t=>i("tr",null,t.map((t=>i("td",null,i("div",{innerHTML:t})))))))))))}get el(){return this}static get watchers(){return{data:[{watchData:0}],footer:[{watchFooterData:0}],columns:[{watchColumns:0}]}}},[0,"xpl-table",{columns:[16],data:[16],footer:[16],freeze:[4],multiselect:[4],striped:[4],selectedValues:[16],isSortable:[4,"is-sortable"],sortableColumns:[16],areAllSelected:[32],rowData:[32],rowFooterData:[32],hasScrolled:[32],selected:[32],sortTypeArray:[32]},void 0,{data:[{watchData:0}],footer:[{watchFooterData:0}],columns:[{watchColumns:0}]}]),r=c,o=function(){"undefined"!=typeof customElements&&["xpl-table","xpl-icon"].forEach((t=>{switch(t){case"xpl-table":customElements.get(a(t))||customElements.define(a(t),c);break;case"xpl-icon":customElements.get(a(t))||l()}}))};export{r as XplTable,o as defineCustomElement}

package/dist/components/xpl-tabs.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as a,Host as i,transformTag as l}from"@stencil/core/internal/client";import{d as o}from"./xpl-dropdown2.js";import{d}from"./xpl-dropdown-group2.js";import{d as n}from"./xpl-dropdown-heading2.js";import{d as r}from"./xpl-dropdown-option2.js";import{d as c}from"./xpl-icon2.js";import{d as p}from"./xpl-select2.js";import{d as h}from"./xpl-tag2.js";const b=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.tabChange=s(this,"tabChange",7),this.fullWidth=!1,this.selectedValue=this.getDefaultValue(),this.activeBarPosition={left:0,width:0},this.isMobileSelectChange=!1,this.tabHeadings=[],this.tabPanels=[],this.handleTabChange=e=>{this.updateTabsSelectedState(e)}}onWindowResize(){this.updateActiveBarPosition()}getDefaultValue(){var e,t;return this.value||(null===(t=null===(e=this.tabHeadings)||void 0===e?void 0:e[0])||void 0===t?void 0:t.getAttribute("target"))||""}updateActiveBarPosition(){const e=this.tabHeadings.find((e=>e.getAttribute("target")===this.selectedValue));if(!this.headingsContainerRef||!e)return;const t=e.getBoundingClientRect(),s=this.headingsContainerRef.getBoundingClientRect();this.activeBarPosition={left:t.left-s.left,width:t.width}}updateTabsSelectedState(e){this.tabHeadings.forEach((t=>{e===t.getAttribute("target")?t.setAttribute("selected",""):t.removeAttribute("selected")})),this.tabPanels.forEach((t=>{e===t.getAttribute("target")?t.setAttribute("selected",""):t.removeAttribute("selected")})),requestAnimationFrame((()=>{this.selectedValue=e,this.updateActiveBarPosition()}))}collectTabs(){this.tabHeadings=Array.from(this.el.querySelectorAll("xpl-tab")),this.tabPanels=Array.from(this.el.querySelectorAll("xpl-tab-panel")),this.handleTabChange(this.getDefaultValue())}renderChoices(){return this.tabHeadings.map((e=>{var t,s;return{label:Array.from(null!==(s=null===(t=e.querySelector(".xpl-tab__button"))||void 0===t?void 0:t.childNodes)&&void 0!==s?s:[]).filter((e=>e.nodeType===Node.TEXT_NODE)).map((e=>e.textContent.trim())).join(" "),value:e.getAttribute("target")}}))}connectedCallback(){"undefined"!=typeof MutationObserver&&(this.observer=new MutationObserver((()=>{this.collectTabs()})),this.observer.observe(this.el,{childList:!0,subtree:!0}))}disconnectedCallback(){var e;null===(e=this.observer)||void 0===e||e.disconnect()}componentDidLoad(){this.collectTabs()}render(){return a(i,{key:"c6858318e3adea4fb9a5587d16aff2778a69af0d",class:{"xpl-tabs":!0,"xpl-tabs--full-width":this.fullWidth}},a("xpl-select",{key:"f6e67e41dc20da4bd6c3d9d4b60045e0e55c7343",classNames:"xpl-tabs__mobile-select",choices:this.renderChoices(),selectedValues:this.selectedValue,onDropdownStateChange:e=>{e.detail&&(this.isMobileSelectChange=!0)},onChangeEvent:e=>{if(this.isMobileSelectChange){const t=""+e.detail;this.handleTabChange(t),this.tabChange.emit(t),this.isMobileSelectChange=!1}}}),a("nav",{key:"297eb4c0695adf1bea03de7e6874a0b61e108319",class:"xpl-tabs__headings",role:"tablist",ref:e=>{this.headingsContainerRef=e},onTabChange:e=>{this.isMobileSelectChange=!1,this.handleTabChange(e.detail)}},a("div",{key:"cd60b8acf47bb319bc92852d5f62ba456acee6f0",class:"xpl-tabs__active-bar",style:{transform:`translateX(${this.activeBarPosition.left}px)`,width:this.activeBarPosition.width+"px"}}),a("slot",{key:"a4b73230bfc7178381780a5136a5c1d820be7d65",name:"heading"})),a("div",{key:"e5d4cf94e1c75dabe73d8a5cc2d00cc97466f1b2",class:"xpl-tabs__panels"},a("slot",{key:"e3d2fbfed0ebc74f2fc41f74574e202e834e2129",name:"panel"})))}get el(){return this}static get watchers(){return{value:[{updateTabsSelectedState:0}]}}},[260,"xpl-tabs",{value:[1],fullWidth:[4,"full-width"],selectedValue:[32],activeBarPosition:[32],isMobileSelectChange:[32]},[[9,"resize","onWindowResize"]],{value:[{updateTabsSelectedState:0}]}]),u=b,m=function(){"undefined"!=typeof customElements&&["xpl-tabs","xpl-dropdown","xpl-dropdown-group","xpl-dropdown-heading","xpl-dropdown-option","xpl-icon","xpl-select","xpl-tag"].forEach((e=>{switch(e){case"xpl-tabs":customElements.get(l(e))||customElements.define(l(e),b);break;case"xpl-dropdown":customElements.get(l(e))||o();break;case"xpl-dropdown-group":customElements.get(l(e))||d();break;case"xpl-dropdown-heading":customElements.get(l(e))||n();break;case"xpl-dropdown-option":customElements.get(l(e))||r();break;case"xpl-icon":customElements.get(l(e))||c();break;case"xpl-select":customElements.get(l(e))||p();break;case"xpl-tag":customElements.get(l(e))||h()}}))};export{u as XplTabs,m as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as a,Host as i,transformTag as l}from"@stencil/core/internal/client";import{d as o}from"./xpl-dropdown2.js";import{d}from"./xpl-dropdown-group2.js";import{d as n}from"./xpl-dropdown-heading2.js";import{d as r}from"./xpl-dropdown-option2.js";import{d as c}from"./xpl-icon2.js";import{d as p}from"./xpl-select2.js";import{d as h}from"./xpl-tag2.js";const b=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.tabChange=s(this,"tabChange",7),this.fullWidth=!1,this.selectedValue=this.getDefaultValue(),this.activeBarPosition={left:0,width:0},this.isMobileSelectChange=!1,this.tabHeadings=[],this.tabPanels=[],this.handleTabChange=e=>{this.updateTabsSelectedState(e)}}onWindowResize(){this.updateActiveBarPosition()}getDefaultValue(){var e,t;return this.value||(null===(t=null===(e=this.tabHeadings)||void 0===e?void 0:e[0])||void 0===t?void 0:t.getAttribute("target"))||""}updateActiveBarPosition(){const e=this.tabHeadings.find((e=>e.getAttribute("target")===this.selectedValue));if(!this.headingsContainerRef||!e)return;const t=e.getBoundingClientRect(),s=this.headingsContainerRef.getBoundingClientRect();this.activeBarPosition={left:t.left-s.left,width:t.width}}updateTabsSelectedState(e){this.tabHeadings.forEach((t=>{e===t.getAttribute("target")?t.setAttribute("selected",""):t.removeAttribute("selected")})),this.tabPanels.forEach((t=>{e===t.getAttribute("target")?t.setAttribute("selected",""):t.removeAttribute("selected")})),requestAnimationFrame((()=>{this.selectedValue=e,this.updateActiveBarPosition()}))}collectTabs(){this.tabHeadings=Array.from(this.el.querySelectorAll("xpl-tab")),this.tabPanels=Array.from(this.el.querySelectorAll("xpl-tab-panel")),this.handleTabChange(this.getDefaultValue())}renderChoices(){return this.tabHeadings.map((e=>{var t,s;return{label:Array.from(null!==(s=null===(t=e.querySelector(".xpl-tab__button"))||void 0===t?void 0:t.childNodes)&&void 0!==s?s:[]).filter((e=>e.nodeType===Node.TEXT_NODE)).map((e=>e.textContent.trim())).join(" "),value:e.getAttribute("target")}}))}connectedCallback(){"undefined"!=typeof MutationObserver&&(this.observer=new MutationObserver((()=>{this.collectTabs()})),this.observer.observe(this.el,{childList:!0,subtree:!0}))}disconnectedCallback(){var e;null===(e=this.observer)||void 0===e||e.disconnect()}componentDidLoad(){this.collectTabs()}render(){return a(i,{key:"0f74359ee1e50de711500ed4d91a7f305a0c8b43",class:{"xpl-tabs":!0,"xpl-tabs--full-width":this.fullWidth}},a("xpl-select",{key:"9315829ad692ec8b80fe00f588974ed8f1b5dbc9",classNames:"xpl-tabs__mobile-select",choices:this.renderChoices(),selectedValues:this.selectedValue,onDropdownStateChange:e=>{e.detail&&(this.isMobileSelectChange=!0)},onChangeEvent:e=>{if(this.isMobileSelectChange){const t=""+e.detail;this.handleTabChange(t),this.tabChange.emit(t),this.isMobileSelectChange=!1}}}),a("nav",{key:"7abdf0d065f25c78b393ec9808fe7f44c84bfb27",class:"xpl-tabs__headings",role:"tablist",ref:e=>{this.headingsContainerRef=e},onTabChange:e=>{this.isMobileSelectChange=!1,this.handleTabChange(e.detail)}},a("div",{key:"de5157e6ce7914060f25e9b21bd8051a1437f92a",class:"xpl-tabs__active-bar",style:{transform:`translateX(${this.activeBarPosition.left}px)`,width:this.activeBarPosition.width+"px"}}),a("slot",{key:"fc61c457e2a4eb10609b97e911b9ddbb2a64757f",name:"heading"})),a("div",{key:"d6187a0de12b34f61ad10a602085d4525c2850ca",class:"xpl-tabs__panels"},a("slot",{key:"c5cf20e4677ee9f998c115d472cfc1cd5e5fa1fd",name:"panel"})))}get el(){return this}static get watchers(){return{value:[{updateTabsSelectedState:0}]}}},[260,"xpl-tabs",{value:[1],fullWidth:[4,"full-width"],selectedValue:[32],activeBarPosition:[32],isMobileSelectChange:[32]},[[9,"resize","onWindowResize"]],{value:[{updateTabsSelectedState:0}]}]),u=b,m=function(){"undefined"!=typeof customElements&&["xpl-tabs","xpl-dropdown","xpl-dropdown-group","xpl-dropdown-heading","xpl-dropdown-option","xpl-icon","xpl-select","xpl-tag"].forEach((e=>{switch(e){case"xpl-tabs":customElements.get(l(e))||customElements.define(l(e),b);break;case"xpl-dropdown":customElements.get(l(e))||o();break;case"xpl-dropdown-group":customElements.get(l(e))||d();break;case"xpl-dropdown-heading":customElements.get(l(e))||n();break;case"xpl-dropdown-option":customElements.get(l(e))||r();break;case"xpl-icon":customElements.get(l(e))||c();break;case"xpl-select":customElements.get(l(e))||p();break;case"xpl-tag":customElements.get(l(e))||h()}}))};export{u as XplTabs,m as defineCustomElement}

package/dist/components/xpl-tag.js

@@ -1 +1 @@
-import{X as o,d as s}from"./xpl-tag2.js";const t=o,a=s;export{t as XplTag,a as defineCustomElement}
+import{T as o,d as s}from"./xpl-tag2.js";const t=o,a=s;export{t as XplTag,a as defineCustomElement}

package/dist/components/xpl-tag2.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as c,Host as a,transformTag as n}from"@stencil/core/internal/client";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.close=s(this,"close",7)}render(){return c(a,{key:"4a5d37bbd7458d289bf7ea272bd3f944e5f1f1a8",class:"xpl-tag-container"},c("button",{key:"65701bf44741a791ab8d60db2de0f3308c83df33",class:"xpl-tag",onClick:()=>{this.close.emit()}},c("slot",{key:"bd3a1e0af2dbfbc70e18082a1cd0c02710f6ef26"})),c("button",{key:"13224cc6cc44e1c4ed9515019906ba3217edffd7",class:"xpl-tag__close",onClick:()=>{this.close.emit()}},"×"))}},[260,"xpl-tag"]);function o(){"undefined"!=typeof customElements&&["xpl-tag"].forEach((e=>{"xpl-tag"===e&&(customElements.get(n(e))||customElements.define(n(e),l))}))}export{l as X,o as d}
+import{proxyCustomElement as e,HTMLElement as t,createEvent as c,h as s,Host as a,transformTag as n}from"@stencil/core/internal/client";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.close=c(this,"close",7)}render(){return s(a,{key:"6a2aaaef81c317bb30ebfc20266581205db73ce2",class:"xpl-tag-container"},s("button",{key:"2aaae9dd6bbdb13db531cf249baa96bfa15aff55",class:"xpl-tag",onClick:()=>{this.close.emit()}},s("slot",{key:"cd56059cee54af39ce61e7560e00e013646c648f"})),s("button",{key:"d529f61e40d097db2832e550e0f0b05c8ccc9179",class:"xpl-tag__close",onClick:()=>{this.close.emit()}},"×"))}},[260,"xpl-tag"]);function o(){"undefined"!=typeof customElements&&["xpl-tag"].forEach((e=>{"xpl-tag"===e&&(customElements.get(n(e))||customElements.define(n(e),l))}))}export{l as T,o as d}

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 c,Host as e,transformTag as i}from"@stencil/core/internal/client";import{d as a}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 c("xpl-icon",{size:24,icon:"alert-hex"});case"success":return c("xpl-icon",{size:24,icon:"check-circle"});default:return c("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 c(e,{key:"b8a25651f1dd57f9f574cd6401877295a6ca7101",class:"xpl-toast xpl-toast--"+this.variant,onAnimationEnd:this.handleAnimationEnd},c("div",{key:"20adfa314269787a9a03e793a1b74b9c5fb47585",class:"xpl-toast__left"},this.showIcon&&c("div",{key:"e3346cee07a34c61ed825966c59c9c8ac30f6302",class:"xpl-toast__icon xpl-toast__icon--"+this.variant},this.getIcon()),c("div",{key:"e85cc1925897c34079e73a9d094c681c835548f4",class:"xpl-toast__notification"},c("p",{key:"467fc15e4d26f240d735ddc957218bb7ab508dab",class:"xpl-toast__title"},c("slot",{key:"3b339cd7b382043919139e83679e7033d63c3196",name:"title"})),""!==this.caption&&c("p",{key:"675f42d92a7bd0527416e5eb77a56a7319d8f9a5",class:"xpl-toast__caption"},null===(t=this.caption)||void 0===t?void 0:t.substring(0,85)))),c("div",{key:"1904c868cba4f3178b0470b7381c23925a732a16",class:"xpl-toast__action",ref:t=>{this.actionSlot=t}},c("slot",{key:"33c8ef7761d07e4d38b2a2a73c058f6769bc7a44",name:"action"})),this.dismissable&&c("div",{key:"3d67f14c2704a6b054be63ad35a9bd3d5355b4ca",class:"xpl-toast__close"},c("button",{key:"345b314745b40b2c802b0221ea64d90bd5c36b38",tabIndex:0,onClick:this.dismiss},c("xpl-icon",{key:"39634fb5cc157a05b05d2245d66fc23d96a1c790",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}

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:"fe018e63a2c645565150c2b5494e057b24421cf3",class:e},(this.heading||this.description)&&l("label",{key:"461ba525112e90914f3d61b221f938ec94861b58",class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},this.heading,this.description&&l("small",{key:"d764ac2dc9341192079f3791ce3e784c0d810c41",class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)),l("input",{key:"9fd76e6a84d08db81941db0aaa742c4e0205bffa",class:t,type:"checkbox",checked:this.checked,disabled:this.disabled,id:this.id,name:this.name}),this.label&&l("label",{key:"fc58e8c3dba8a45a7c2aedda7daff3788f4dc0a0",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 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}

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 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}

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 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}

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,4 +1,9 @@
 # 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.
+
+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 -->
 

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 -->
 

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

@@ -1,14 +1,107 @@
 # xpl-badge
 
+`xpl-badge` is a small, non-interactive status indicator used to communicate counts, states, or supplementary information next to another element. Badges are **never clickable** – use a button or link if you need interaction.
+
+Badges support multiple **variants** (colors), **sizes**, **shapes**, and **dot styles**, so they can be used both as pill labels and as compact status / notification indicators.
+
+## Usage
+
+```html
+<xpl-badge variant="green">Active</xpl-badge>
+<xpl-badge variant="yellow">Pending</xpl-badge>
+<xpl-badge variant="red">Error</xpl-badge>
+<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.
+
+## Sizes & shapes
+
+- **size**
+  - `default` (default): `24px` tall pill, used for most cases.
+  - `small`: `20px` tall, more compact for dense UIs or table rows.
+- **shape**
+  - `rounded` (default): full pill with fully rounded ends.
+  - `boxy`: rounded corners but not a full pill; better for more neutral / data-heavy contexts.
+
+```html
+<xpl-badge size="default" shape="rounded">Default pill</xpl-badge>
+<xpl-badge size="small" shape="boxy">Small boxy</xpl-badge>
+```
+
+## Dots and dot-only badges
+
+### Dot badge (pill with leading dot)
+
+Set `dot` to add a colored dot before the text, inside the pill:
+
+```html
+<xpl-badge variant="green" dot>Online</xpl-badge>
+<xpl-badge variant="yellow" dot>Syncing</xpl-badge>
+<xpl-badge variant="red" dot>Error</xpl-badge>
+```
+
+### 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).
+
+- When overlaying another element with a background color, use the `bordered` property to allow the badge to stand off.
+
+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.
+
+```html
+<!-- Status dot only -->
+<xpl-badge variant="green" dot-only></xpl-badge>
+
+<!-- Dot with count / text -->
+<xpl-badge variant="red" dot-only>3</xpl-badge>
+<xpl-badge variant="blue" dot-only>99+</xpl-badge>
+```
+
+## Variants
+
+Use variants to communicate state or category. Preferred values for `variant`:
+
+- `purple` (default)
+- `green`
+- `yellow`
+- `orange`
+- `gray`
+- `red`
+- `blue`
+
+The legacy semantic names `success`, `warning`, `inactive`, and `error` are still accepted and map to `green`, `yellow`, `gray`, and `red` respectively. Prefer the color names for new code.
+
+```html
+<xpl-badge variant="purple">Default</xpl-badge>
+<xpl-badge variant="orange" dot>In progress</xpl-badge>
+<xpl-badge variant="blue" dot-only>12</xpl-badge>
+```
+
+- Each dot has **stronger solid color** for dot-only badges, with dark-mode adjustments handled by CSS.
+
+- Each variant uses Apollo Foundation badge tokens (`--xpl-background-badge-`*, `--xpl-border-badge-*`, `--xpl-icon-badge-*`, `--xpl-text-badge-*`) that auto-switch between light and dark modes. Dot-only badges use the corresponding `--xpl-icon-badge-*` accent color for their solid fill.
+
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property  | Attribute | Description                                    | Type                                              | Default     |
-| --------- | --------- | ---------------------------------------------- | ------------------------------------------------- | ----------- |
-| `dot`     | `dot`     | Whether badge shows a dot icon before the text | `boolean`                                         | `undefined` |
-| `variant` | `variant` | Color styles to indicate varied states         | `"error" \| "inactive" \| "success" \| "warning"` | `undefined` |
+| Property   | Attribute  | Description                                                                                                                                                                                                                                                                                            | Type                                                                                                                          | Default     |
+| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `bordered` | `bordered` | Whether badge shows a bordered ring                                                                                                                                                                                                                                                                    | `boolean`                                                                                                                     | `false`     |
+| `dot`      | `dot`      | Whether badge shows a dot icon before the text (inside the pill)                                                                                                                                                                                                                                       | `boolean`                                                                                                                     | `undefined` |
+| `dotOnly`  | `dot-only` | When true, render a compact badge built around the dot. - With no children: just a dot (status/dot badge) - With children: a small dot badge with the text/number inside                                                                                                                               | `boolean`                                                                                                                     | `false`     |
+| `shape`    | `shape`    | Badge shape rounded (pill) boxy (rounded corners)                                                                                                                                                                                                                                                      | `"boxy" \| "rounded"`                                                                                                         | `'rounded'` |
+| `size`     | `size`     | Badge size default \| small                                                                                                                                                                                                                                                                            | `"default" \| "small"`                                                                                                        | `'default'` |
+| `variant`  | `variant`  | Badge variant (color).  Preferred values: `purple`, `green`, `yellow`, `orange`, `gray`, `red`, `blue`.  The legacy semantic names `success`, `warning`, `inactive`, and `error` are still accepted and map to `green`, `yellow`, `gray`, and `red` respectively. Prefer the color names for new code. | `"blue" \| "error" \| "gray" \| "green" \| "inactive" \| "orange" \| "purple" \| "red" \| "success" \| "warning" \| "yellow"` | `'purple'`  |
 
 
 ## Dependencies

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

@@ -0,0 +1,166 @@
+# xpl-banner
+
+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.
+
+## 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.
+
+- 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.
+
+## Token Use
+
+- `information`
+  - Background: `--xpl-background-messaging-information`
+  - Border: `--xpl-border-accent-information`
+  - Icon: `--xpl-icon-default`
+  - Main text: `--xpl-text-strong` (with `--xpl-text-default` fallback)
+  - Detail text: `--xpl-text-default`
+- `warning`
+  - Background: `--xpl-background-messaging-warning`
+  - Border: `--xpl-border-accent-warning`
+  - Icon: `--xpl-icon-default`
+  - Main text: `--xpl-text-strong` (with `--xpl-text-default` fallback)
+  - Detail text: `--xpl-text-default`
+  - Dismiss focus ring: `--xpl-border-accent-warning`
+- `positive`
+  - Background: `--xpl-background-messaging-positive`
+  - Border: `--xpl-border-positive`
+  - Icon: `--xpl-icon-default`
+  - Main text: `--xpl-text-strong` (with `--xpl-text-default` fallback)
+  - Detail text: `--xpl-text-default`
+- `error`
+  - Background: `--xpl-background-messaging-negative-bold`
+  - Border: `--xpl-border-negative`
+  - Icon and text: `--xpl-text-inverse-on-dark`
+  - Dismiss focus ring: `--xpl-text-inverse-on-dark`
+- Dismiss button follows the same icon token as the current appearance.
+- `information` dismiss focus ring uses `--xpl-border-accent-information`.
+
+Light and dark mode are handled by Apollo Foundation token definitions. `xpl-banner` does not use component-level `.dark` token overrides.
+
+## Icon Mapping
+
+Each `appearance` value maps to a fixed `xpl-icon` name. When building the component in plain HTML, use the icon from this table:
+
+| `appearance`  | `xpl-icon` name    |
+| ------------- | ------------------ |
+| `information` | `circle-info`      |
+| `warning`     | `triangle-warning` |
+| `positive`    | `circle-check`     |
+| `error`       | `octagon-warning`  |
+
+## Actions
+
+Use `actionText` and `secondaryActionText` to render up to two `xpl-button` actions in the banner.
+Both action buttons always render at `size="xs"` to match compact banner spacing.
+
+The `variant` and `state` attributes on the action buttons depend on both `appearance` and layout:
+
+| Layout    | `appearance`  | `variant`   | `state`     |
+| --------- | ------------- | ----------- | ----------- |
+| bar       | `information` | `subtle`    | —           |
+| bar       | `warning`     | `subtle`    | —           |
+| bar       | `positive`    | `subtle`    | —           |
+| bar       | `error`       | `primary`   | `warning`   |
+| section   | `information` | `subtle`    | —           |
+| section   | `warning`     | `subtle`    | —           |
+| section   | `positive`    | `subtle`    | `success`   |
+| section   | `error`       | `subtle`    | `warning`   |
+
+## Section Layout
+
+Set `is-section` to render the section-banner layout:
+- Header row with icon, heading, and optional dismiss
+- Description below the header (2-line clamp by default)
+- Actions below description
+
+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:
+
+```html
+<!-- Bar variant -->
+<div class="xpl-banner xpl-banner--information">
+  <div class="xpl-banner__icon" aria-hidden="true">
+    <xpl-icon icon="circle-info" size="24"></xpl-icon>
+  </div>
+  <div class="xpl-banner__body">
+    <p class="xpl-banner__heading">Heading</p>
+    <p class="xpl-banner__description">Description text</p>
+  </div>
+  <div class="xpl-banner__actions">
+    <xpl-button size="xs" variant="subtle">Action</xpl-button>
+  </div>
+  <button class="xpl-banner__dismiss" type="button" aria-label="Dismiss banner">
+    <xpl-icon icon="xmark" size="24" aria-hidden="true"></xpl-icon>
+  </button>
+</div>
+
+<!-- Section variant — add xpl-banner--section; same markup otherwise -->
+<div class="xpl-banner xpl-banner--section xpl-banner--information">
+  ...
+</div>
+
+<!-- Section variant without icon -->
+<div class="xpl-banner xpl-banner--section xpl-banner--no-icon xpl-banner--information">
+  <!-- omit .xpl-banner__icon -->
+  <div class="xpl-banner__body">...</div>
+  ...
+</div>
+```
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property              | Attribute               | Description                                                                                                                                                                                                                                                                | Type                                                  | Default         |
+| --------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | --------------- |
+| `actionText`          | `action-text`           | Primary action label. When provided, an action button is rendered.                                                                                                                                                                                                         | `string`                                              | `undefined`     |
+| `appearance`          | `appearance`            | Controls the visual appearance and semantic meaning of the banner. These values map to messaging background/border token sets in `banner.css`. Banner icons use `--xpl-icon-default`, except `error` which uses inverse icon/text tokens for contrast on dark backgrounds. | `"error" \| "information" \| "positive" \| "warning"` | `'information'` |
+| `description`         | `description`           | Optional supporting message shown after the heading. Description text uses `--xpl-text-default`.                                                                                                                                                                           | `string`                                              | `undefined`     |
+| `hasIcon`             | `has-icon`              | Whether to render the leading icon in section layout. Ignored in bar layout — bar banners always show the icon.                                                                                                                                                            | `boolean`                                             | `true`          |
+| `heading`             | `heading`               | Primary banner message shown with stronger title typography.                                                                                                                                                                                                               | `string`                                              | `undefined`     |
+| `isDismissible`       | `is-dismissible`        | Whether to show the trailing dismiss control.                                                                                                                                                                                                                              | `boolean`                                             | `true`          |
+| `isSection`           | `is-section`            | Renders the section-style banner layout when true.                                                                                                                                                                                                                         | `boolean`                                             | `false`         |
+| `secondaryActionText` | `secondary-action-text` | Secondary action label. When provided, a second action button is rendered.                                                                                                                                                                                                 | `string`                                              | `undefined`     |
+| `truncateDesc`        | `truncate-desc`         | When true, `description` is constrained to one line with ellipsis so banner height stays stable.                                                                                                                                                                           | `boolean`                                             | `false`         |
+
+
+## Events
+
+| Event             | Description                                   | Type                |
+| ----------------- | --------------------------------------------- | ------------------- |
+| `action`          | Emitted when the primary action is clicked.   | `CustomEvent<void>` |
+| `dismiss`         | Emitted when the dismiss button is clicked.   | `CustomEvent<void>` |
+| `secondaryAction` | Emitted when the secondary action is clicked. | `CustomEvent<void>` |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-icon](../xpl-icon)
+- [xpl-button](../xpl-button)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-banner --> xpl-icon
+  xpl-banner --> xpl-button
+  xpl-button --> xpl-icon
+  style xpl-banner fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*