@xplortech/apollo-core 2.10.0 → 2.11.0

package/dist/collection/components/xpl-slideout/xpl-slideout.js

@@ -26,7 +26,7 @@ export class Slideout {
         this.handleScroll();
     }
     render() {
-        return (h(Host, { key: 'f42f8f576d4e8387511d0cd5e5a24913606dce5e', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: '5e80a7f340487ee653d266edc8d7cbd7a1ae5a52', onClick: this.handleClose })), h("aside", { key: 'beb647a98119f53d01a911af9df5ea97babad7c1', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: 'ef3ba3c61fd5542696c271d0d3d3d40214a2605e', class: "header" }, h("div", { key: 'ed343a1553fb5da4d5db9f6a746f89eadf258f68', class: "title" }, h("slot", { key: '0793234025cb9ed92e45805f74ad85928c71f585', name: "title" }), h("xpl-button", { key: 'b9049478a5ac330b6439fc5a71440db634d51b5e', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: '1dad5a0fc6d0b1888a450639b9f40d694b9942db', icon: "x" }))), h("div", { key: 'c5f3f124e81ce4b916af4dd114c8ce9b45d567c7', class: "subtitle" }, h("slot", { key: '41d10f0742562a8dc824b45b2987d45dda76abb4', name: "subtitle" })), h("div", { key: '5a60f3f9e9c5fd86d8262f47eea7b83f64e149a2', class: "search" }, h("slot", { key: '80f950ece315afe975aed51ac8a10804670eb8fe', name: "search" }))), h("xpl-divider", { key: '02e53e01c2f148c8bbd54b086bac669ee65014ba', tier: 0, class: "divider top" }), h("article", { key: '5425462fe1ef6104c5d8c7d5c4c892cf77349d38', class: "content", tabIndex: 0 }, h("slot", { key: '370dd088e84a33112f7f3e1c46341f521430485a', name: "content" })), this.showFooter && (h("footer", { key: 'becd0aea10f8a35af12cedae53814b1c9db92669' }, h("xpl-divider", { key: '5f53e23fbd9330d1b28ba705a7b9438ba098a6a7', tier: 0, class: "divider bottom" }), h("div", { key: '00c0c39b04999a12b47d5fe35bceae2ac8dc1def', class: "footer" }, h("slot", { key: '024d1c72ac7ab44b93608020ef20619b504d6725', name: "tertiary" }), h("slot", { key: '199910e96905946e393fcd600ddc7878701be5fb', name: "secondary" }), h("slot", { key: '55f351a5bb4c18833c5db4408ce01b01c1853fe3', name: "primary" })))))));
+        return (h(Host, { key: '2784d3da5b726f04552fa93289f34ff0347d3e70', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: 'b8978c6811b9d1c175bfaee2296fbcb433c048d4', onClick: this.handleClose })), h("aside", { key: '0e4357253aa004531aa86fc2f93fb1332cec089b', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: '132170bf2c8ff6c23e6bc85bce4dc8a2aec0c5d5', class: "header" }, h("div", { key: 'a38f7f2a2da8c622a9d2ef53c370560761b87b51', class: "title" }, h("slot", { key: 'ba7b485b02bd472a4f64e067cabf5cf6ae0ad1b0', name: "title" }), h("xpl-button", { key: '9538bc33599840f7756e747c63d9717cf14a0c58', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: '6d6846794afea4053736bc67b3c0c90fb822ca96', icon: "x" }))), h("div", { key: 'da9630c9cdc8d9c3e57242c58993f5815052e684', class: "subtitle" }, h("slot", { key: 'c923c0cdae7e6f09713592e31216ec10accce39f', name: "subtitle" })), h("div", { key: 'c9fc409c7e2c14987b4df6be17d7d2c9a5906100', class: "search" }, h("slot", { key: 'b963bc05b745e55bbdc27cc4bb224af97feccdda', name: "search" }))), h("xpl-divider", { key: 'e5f9201e96ac5d6b202e3e88edfa07dacfbb3786', tier: 0, class: "divider top" }), h("article", { key: '41b424ea94bdc2577b56166f45de2b1addc3a8b4', class: "content", tabIndex: 0 }, h("slot", { key: '5d316d1981d44536af9cc5d67ef7fd20f6375ec8', name: "content" })), this.showFooter && (h("footer", { key: '3d9c2b22153b6a9057d3c40b98af97d345b9e9c1' }, h("xpl-divider", { key: '77e87834d203624cc03ff2b0cf894300c2749094', tier: 0, class: "divider bottom" }), h("div", { key: '44737714daf25a087ad2c0d8938f94ec4668b071', class: "footer" }, h("slot", { key: '2c0c7b62872fa826ef117a730c92369ba7e340f1', name: "tertiary" }), h("slot", { key: '31ac0e95189487b668b3e5c0bd8d414ab7d73f30', name: "secondary" }), h("slot", { key: 'a0dd4999caac29b546cd0526e652596937dff83b', name: "primary" })))))));
     }
     static get is() { return "xpl-slideout"; }
     static get properties() {

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

@@ -10,10 +10,10 @@ export class TabPanel {
         const t = (_a = this.target) !== null && _a !== void 0 ? _a : '';
         const panelId = tabPanelDomId(groupId, t);
         const labelledBy = tabTriggerId(groupId, t);
-        return (h(Host, { key: '90f81b56f9d1d482ebe9bfb3e11a9b796bdbc5d2', "aria-labelledby": labelledBy, class: {
+        return (h(Host, { key: 'd1d6b910b84ee0aa483d605d10aaabf662d2efcf', "aria-labelledby": labelledBy, class: {
                 'xpl-tab-panel': true,
                 'xpl-tab-panel--selected': this.selected,
-            }, id: panelId, role: "tabpanel" }, h("slot", { key: 'b2de2e79c06bde4bde5c99cc3d91045b1e73b72e' })));
+            }, id: panelId, role: "tabpanel" }, h("slot", { key: '1fe282e7372fb0353cf1c32db841269aaa3c44a9' })));
     }
     static get is() { return "xpl-tab-panel"; }
     static get properties() {

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

@@ -126,24 +126,24 @@ export class Table {
             (!this.sortTypeArray || this.sortTypeArray.length !== this.columns.length)) {
             this.sortTypeArray = this.columns.map(() => null);
         }
-        return (h(Host, { key: 'b2ed918c3c434b6403fe6d18619d0a1a5bf864bf' }, h("div", { key: 'd55accaecba09869f07dcc7030eca5cc1175dd95', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+        return (h(Host, { key: 'feca62966731c111adc18988af07bd269dd63868' }, h("div", { key: 'b585fe5b3161eb7763e4292a7015fb3209a3fa90', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
                 this.container = el;
-            } }, h("table", { key: '6406b92ee6717c80f5f363110fda38fa5bbe61ff', class: {
+            } }, h("table", { key: '37930d45de6739b43ff6d541d46d7f960d922716', class: {
                 'xpl-table': true,
                 'xpl-table--striped': this.striped,
                 'xpl-table--freeze': this.freeze,
                 'xpl-table--has-scrolled': this.hasScrolled,
-            } }, this.columns && (h("thead", { key: '2f89526153301be4ad9ba2f2ec2dac791b4702ae' }, this.columns.map((column, i) => {
+            } }, this.columns && (h("thead", { key: '40e9b8bb9cb641a2f89a63a707ecaa3a286fc99d' }, this.columns.map((column, i) => {
             var _a;
             const iconType = getIconType((_a = this.sortTypeArray) === null || _a === void 0 ? void 0 : _a[i]);
             const isColumnSortable = !!(this.isSortable && this.sortableColumns[i]);
             return (h("th", null, h("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i, column.replace(/ /g, '-').toLowerCase()), class: isColumnSortable ? 'cursor-pointer' : '' }, this.multiselect && i === 0 && (h("xpl-checkbox", { checked: this.areAllSelected, indeterminate: !this.areAllSelected &&
                     this.selected.some((a) => a), onClick: (e) => e.stopPropagation(), onCheckboxChange: (e) => this.selectAll(e), value: `select-all-${this.selectAllValue}`, "aria-label": "Select all rows" })), column, isColumnSortable && !!this.sortTypeArray[i] && (h("xpl-icon", { icon: iconType, size: 16 })))));
-        }))), h("tbody", { key: 'd1c762bc09191ac0b5b84ade9409d87a726f15f4' }, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
+        }))), h("tbody", { key: '99bc5a0fd8b91d040483cc5749490b5319097ab9' }, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
                 ? 'xpl-table-row-selected'
                 : '' }, row.map((cell, i) => (h("td", null, this.multiselect && i === 0 ? (h("label", null, h("xpl-checkbox", { checked: !!this.selected[rowNum], onCheckboxChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues.length > 0
                 ? this.selectedValues[rowNum]
-                : `xpl-table-checkbox-${rowNum}`, "aria-label": `Select row ${rowNum + 1}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("tfoot", { key: '99e0e8cbe768f3c565d5fd6328c6e305483bf3f1' }, this.rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
+                : `xpl-table-checkbox-${rowNum}`, "aria-label": `Select row ${rowNum + 1}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("tfoot", { key: '404659d5846461f017e974786ec359473be0a7b6' }, this.rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
     }
     static get is() { return "xpl-table"; }
     static get properties() {

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class TableHeader {
     render() {
-        return (h(Host, { key: 'f50c2c0ca2743e47ad44a368a9ea684c57a72261', role: "row", class: "xpl-table-header" }, h("slot", { key: '7a61b45818de8675015ca3defb9ee8c3280e961a' })));
+        return (h(Host, { key: '1123c671d82d987a74264ef2869494155746d7d8', role: "row", class: "xpl-table-header" }, h("slot", { key: 'f1a238ba023ce03559f87cf92214a1804c8ac821' })));
     }
     static get is() { return "xpl-table-header"; }
 }

package/dist/collection/components/xpl-tabs/xpl-tabs.js

@@ -317,11 +317,11 @@ export class Tabs {
     }
     render() {
         const isSegment = this.type === 'segment';
-        return (h(Host, { key: 'a030a35038572d70f3fb2b979adbaa56d77a1d49', class: {
+        return (h(Host, { key: '712b11ca22e287b8e981c327d1793fbc627c8508', class: {
                 'xpl-tabs': true,
                 'xpl-tabs--full-width': this.fullWidth,
                 'xpl-tabs--segment': isSegment,
-            }, "data-choices-tick": this.choicesTick }, h("xpl-select", { key: '8260974c68020dea475f6e0780c766abfca94fda', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
+            }, "data-choices-tick": this.choicesTick }, h("xpl-select", { key: 'ca013d1c4848a13e3210e3e010f90969a70b609f', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
                 if (event.detail) {
                     this.isMobileSelectChange = true;
                 }
@@ -332,17 +332,17 @@ export class Tabs {
                     this.tabChange.emit(selectedValue);
                     this.isMobileSelectChange = false;
                 }
-            } }), h("nav", { key: '73a1e4ad4830b9b22b4eee00bad5793705cf3ac3', "aria-orientation": "horizontal", class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
+            } }), h("nav", { key: 'bbabd600ae5e210b7a3e9cfa9c5938f12ee14e1d', "aria-orientation": "horizontal", class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
                 this.headingsContainerRef = el;
             }, onTabChange: (event) => {
                 event.stopPropagation();
                 this.isMobileSelectChange = false;
                 this.handleTabChange(event.detail);
                 this.tabChange.emit(event.detail);
-            } }, !isSegment && (h("div", { key: '8008620a99470824fe61ea535fb46a3dea75afc3', class: "xpl-tabs__active-bar", style: {
+            } }, !isSegment && (h("div", { key: 'fe8c53716bd0fe10b02a22ac3df643aa6627303d', class: "xpl-tabs__active-bar", style: {
                 transform: `translateX(${this.activeBarPosition.left}px)`,
                 width: `${this.activeBarPosition.width}px`,
-            } })), h("slot", { key: 'be53fe549e5b9c887ad90cbafcc8f95631361fee', name: "heading" })), h("div", { key: 'd97b138b5fcb0207684698752ec72c1dcd9464a3', class: "xpl-tabs__panels" }, h("slot", { key: 'fe40edbf2c9f20d02d75ab62a142e7df04ef0afd', name: "panel" }))));
+            } })), h("slot", { key: '8a1232936ec72a91e4fcd57f1f35f598a337dd99', name: "heading" })), h("div", { key: '2ef4b61b894a326bc370a1c7631308b8b13261b5', class: "xpl-tabs__panels" }, h("slot", { key: '28c9ccce6482c7cbe9ee46960c65bd59aaacb4b9', name: "panel" }))));
     }
     static get is() { return "xpl-tabs"; }
     static get properties() {

package/dist/collection/components/xpl-tag/xpl-tag.js

@@ -121,7 +121,7 @@ export class Tag {
     }
     render() {
         const dragEnabled = this.isDraggable && !this.disabled;
-        return (h(Host, { key: '13a500c63b29cb19a53e2abb69f86f62164d79d2', class: {
+        return (h(Host, { key: '4b8228da443d411561306e790333d676fc3907e3', class: {
                 'xpl-tag': true,
                 'xpl-tag-container': true,
                 'xpl-tag--disabled': this.disabled,
@@ -129,7 +129,7 @@ export class Tag {
                 'xpl-tag--dragging': this.isDragging,
                 'xpl-tag--draggable': dragEnabled,
                 'xpl-tag--sm': this.size === 'sm',
-            }, onDragOver: dragEnabled ? this.handleDragOver : undefined, onDragEnter: dragEnabled ? this.handleDragEnter : undefined, onDragStart: this.isDraggable ? this.handleHostDragStart : undefined }, dragEnabled ? (h("div", { class: "xpl-tag__content xpl-tag", role: "button", tabIndex: 0, draggable: true, "aria-grabbed": String(this.isDragging), onClick: this.handleTagClick, onKeyDown: this.handleContentKeyDown, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd }, h("slot", null))) : (h("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, h("slot", null))), this.dismissible && (h("button", { key: 'ceb929c98cb7a66390cf1c09b32535696e4d2b04', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, h("xpl-icon", { key: '8a5a6f13014334fee2193703674bdfd49710a265', icon: "xmark", size: 10 })))));
+            }, onDragOver: dragEnabled ? this.handleDragOver : undefined, onDragEnter: dragEnabled ? this.handleDragEnter : undefined, onDragStart: this.isDraggable ? this.handleHostDragStart : undefined }, dragEnabled ? (h("div", { class: "xpl-tag__content xpl-tag", role: "button", tabIndex: 0, draggable: true, "aria-grabbed": String(this.isDragging), onClick: this.handleTagClick, onKeyDown: this.handleContentKeyDown, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd }, h("slot", null))) : (h("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, h("slot", null))), this.dismissible && (h("button", { key: 'bf634c6b75d1cd2eaadff8e4459b74a097e3f221', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, h("xpl-icon", { key: 'fb37896890c9afb56c02a3ff4e62f096c416a569', icon: "xmark", size: 10 })))));
     }
     static get is() { return "xpl-tag"; }
     static get properties() {

package/dist/collection/components/xpl-toast/xpl-toast.js

@@ -35,9 +35,9 @@ export class Toast {
     }
     render() {
         var _a;
-        return (h(Host, { key: '8b53818d7882160ab13ba700520c2c54f3d0b630', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '6cc47a618684dacf1031bdacfc6cb9134db659e1', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: '2360e3bb5d173d97fb63e3ff2069ef6ac53f2a7d', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: 'e4c318a21bf17d951deade92c9288791b6664a4f', class: "xpl-toast__notification" }, h("p", { key: '6697407277294d71106c9429f5822966572c1f06', class: "xpl-toast__title" }, h("slot", { key: '108769cc76b1ed7b42ad436885831d9e7fd4412f', name: "title" })), this.caption !== '' && (h("p", { key: '7570a85eaebbd9c236841541557324b45c86dab6', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: 'b5f98b93c56f877d6c749c82550aad3b86bb3786', class: "xpl-toast__action", ref: (el) => {
+        return (h(Host, { key: 'c9abdb6db66a9dad0d6ed3d2e6d178ea34852c86', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '7057e31e0f25dab1ba8b093f1dca15e6f08c44e4', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: '7875c518753729ae39a7bb9f2051751924a0d558', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: 'e38c7d0593c16f3dfa83bc4e521f89ee644b46d4', class: "xpl-toast__notification" }, h("p", { key: '8186437158381780554d2509a806704c52450f8c', class: "xpl-toast__title" }, h("slot", { key: '0aa8df0520c33b4576acfb1ad4750a72928b94d5', name: "title" })), this.caption !== '' && (h("p", { key: '3a4ce8f73e498373344b8b692e624f177212a70a', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: '636ff5b9476cea09d21b97f3e1b78860a6f10669', class: "xpl-toast__action", ref: (el) => {
                 this.actionSlot = el;
-            } }, h("slot", { key: 'c2007b4a30836c3a1b071539029c1290875bdd2c', name: "action" })), this.dismissable && (h("div", { key: 'f0706d95d8091beb32dfbe1535ebbdfb1ce9a018', class: "xpl-toast__close" }, h("button", { key: 'b1415be4d68035d21857f688f16558470cca2f81', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: '61ba3accb69a2637190b5ee3a4f7105fdf896af7', icon: "x" }))))));
+            } }, h("slot", { key: '733bc27fba998cdbb97cc1124d8449b539a0fc21', name: "action" })), this.dismissable && (h("div", { key: '8f555e8a02c8aed5095ab659a792e19c242dae98', class: "xpl-toast__close" }, h("button", { key: 'ca64c6cb98c4cda5d2dab208afef54db4832e103', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: 'bf00f852ecffd16504a8ec95f3f6630b1aa569c9', icon: "x" }))))));
     }
     static get is() { return "xpl-toast"; }
     static get properties() {

package/dist/collection/components/xpl-toggle/xpl-toggle.js

@@ -16,13 +16,13 @@ export class Toggle {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (h(Host, { key: 'bc7363fd59d7cc10f0df644b5c54021ce860dbbc', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '06b031581d173694651e58265b287865daeaf22b', class: {
+        return (h(Host, { key: 'c57e1813c72cba62eed2927763277341bb0d3f77', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '00ba33da343a47681982f6437f1cb45060d70ae9', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: 'a633107a6dcc2c0c43cd626c3013876831535588', class: {
+            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: '8ec4104abdb16ca405577f061c4cb68580317bc4', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
-            } }, this.description)))), h("input", { key: 'fc1d734118dafc0a5f64119eb91d19e8af1254a6', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && h("label", { key: '7f1a465da3ec136c11797746505c0629fe2d31a9', htmlFor: this.id }, this.label)));
+            } }, this.description)))), h("input", { key: 'face83ccc22985b6d0a4c8b9e4c8dcf1d9d6b72a', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && h("label", { key: 'aa89637f4b60b050a168fcf02e6702d9ed9bd186', htmlFor: this.id }, this.label)));
     }
     static get is() { return "xpl-toggle"; }
     static get properties() {

package/dist/collection/components/xpl-toolbar/xpl-toolbar.js

@@ -12,11 +12,11 @@ export class Toolbar {
         this.selectedItemCount = event.detail.length;
     }
     render() {
-        return (h(Host, { key: '782235b9cb7a50f4ba1a38ce2add940a051167a9', class: {
+        return (h(Host, { key: 'eda1f57ef1a207b82f622f090dd30f21d60bbc61', class: {
                 'xpl-toolbar': true,
                 dark: true,
                 hidden: this.selectedItemCount === 0,
-            } }, h("div", { key: 'cb29423baac9e936ea02d4e177966161cb0f0486', class: "toolbar" }, h("p", { key: '484e52174e0b11b158e4865cdc62fa05136eac2d', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: '51ba928ccfae827b73f67348b64e34a14d36c235', class: "actions" }, h("slot", { key: 'f96d57f3e6101a277a0195e072f69b63d5b29671', name: "actions-left" }), h("slot", { key: '278f41ab191c18479f9c99a531ca7636be571478', name: "actions-right" })))));
+            } }, h("div", { key: 'fe703bf7fb49ebe27f4eee7973ea1e24c5ed50a4', class: "toolbar" }, h("p", { key: 'd0d9cb84b4828688aabbabb3395ff3c18c4d2a78', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'c1259be179d245e4c18a3690f800eb493f491ba9', class: "actions" }, h("slot", { key: '40000dda8efbfd0aa7175e0e5db1c1c9f4e7e89f', name: "actions-left" }), h("slot", { key: '255e21ebb1af8fde1bb76a1a1243eeadc4146d3d', name: "actions-right" })))));
     }
     static get is() { return "xpl-toolbar"; }
     static get properties() {

package/dist/collection/components/xpl-tooltip/xpl-tooltip.js

@@ -6,7 +6,7 @@ export class Tooltip {
         this.hideArrow = false;
     }
     render() {
-        return (h(Host, { key: 'c060588959e22e35117e15925ed57e951b4fe51d' }, h("div", { key: '69572a540e2dcf3c819a2af20b6e900ea8d483c9', class: "xpl-tooltip-container" }, h("slot", { key: 'b767815cc05aec2ce3e3f0411602659d142ce64f' }), h("div", { key: 'eb80138e423992a8b5f8f823029f1a57993e5355', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text, !this.hideArrow && (h("div", { key: '01c556ac6491bca26550dd1dc34689ff09e2d418', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: '8844c7e4b28132fc8a11c1a9ce6920061ae741b4' })))))));
+        return (h(Host, { key: '9890dea245d2fbd24c67fea6e39ce3430ffc8d81' }, h("div", { key: '0930c7ee1f0e1f6a625f41e34f31d2432fdff7eb', class: "xpl-tooltip-container" }, h("slot", { key: '3b9a8aebce020a13f3d7ef624b59c06e55398907' }), h("div", { key: '50fe33b8bef96df08899b449065558ea8f2ed820', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text, !this.hideArrow && (h("div", { key: '53668e28af956a2293c36eb4991782aee8542378', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: 'ebbbf0e6b2a848af99d14ddecdb70723bff5181b' })))))));
     }
     static get is() { return "xpl-tooltip"; }
     static get properties() {

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

@@ -0,0 +1 @@
+export const TOP_NAV_MOBILE_MQ = '(max-width: 767px)';

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

@@ -99,12 +99,17 @@ const TOP_NAV_STORY_CSS = `
 }
 .sb-top-nav-html-item-inner {
   padding: var(--xpl-space-8);
+  font: inherit;
   font-size: var(--xpl-font-size-body);
+  border: 0;
   border-radius: var(--xpl-border-radius-small);
+  appearance: none;
+  background: transparent;
   display: flex;
   align-items: center;
   gap: var(--xpl-space-8);
   cursor: pointer;
+  text-align: inherit;
   text-decoration: none;
   color: inherit;
 }
@@ -134,7 +139,10 @@ const TOP_NAV_STORY_CSS = `
   border-bottom: var(--xpl-border-small) solid var(--xpl-border-default);
 }
 .sb-top-nav-menu-profile-inner { width: 100%; min-width: 0; }
-.sb-top-nav-menu-username { font-weight: var(--xpl-font-weight-medium); }
+.sb-top-nav-menu-username {
+  font-weight: var(--xpl-font-weight-medium);
+  color: var(--xpl-text-strong);
+}
 .sb-top-nav-menu-email {
   font-size: var(--xpl-font-size-caption);
   color: var(--xpl-text-subdued);
@@ -147,7 +155,7 @@ const TOP_NAV_STORY_CSS = `
   align-items: center;
   gap: var(--xpl-space-8);
   padding: var(--xpl-space-8) var(--xpl-space-16);
-  color: inherit;
+  color: var(--xpl-text-default);
   text-decoration: none;
 }
 .sb-top-nav-menu-right-aside-mobile {
@@ -162,7 +170,7 @@ const TOP_NAV_STORY_CSS = `
   align-items: center;
   gap: var(--xpl-space-8);
   padding: var(--xpl-space-10) var(--xpl-space-12);
-  color: inherit;
+  color: var(--xpl-text-default);
   text-decoration: none;
 }
 `.trim();
@@ -226,7 +234,9 @@ const TOP_NAV_FIGMA_DESIGN = {
     url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=36021-13064&p=f&t=zPkMI4H5nK5XE3ZU-11',
 };
 const topNavFamilyDocsDescription = [
-    'Horizontal top bar (`xpl-top-nav`), nav items (`xpl-top-nav-item`), and profile header (`xpl-nav-header-menu`). **`xpl-top-nav`** supports **`brand-name`**, **`brand-href`**, **`brand-logo`** (image URL), and **`slot="brand-logo"`** for the built-in brand row; **`slot="left-aside"`** holds primary links; **`slot="right-aside"`** then **`slot="user-menu"`**; on narrow viewports (**one pixel below Tailwind `md`** — **`max-width: 767px`** with default **`screens.md`**) **`right-aside`** is hidden in the bar — duplicate those actions into **`slot="right-aside-mobile"`** on **`xpl-nav-header-menu`**. The account region uses an **internal** **`xpl-popover`** (**`bottom-end`**, **`display="menu"`**): set **`child-account-label`** for the built-in trigger label beside **`chevron-down`**, put the panel in **`slot="user-menu"`**, or use **`slot="user-menu-trigger"`** to replace the built-in trigger. Use **Top Navigation** Controls for props + **Actions** for **`navOpen`** / **`brandClick`**. With **`nav-control`**, the hamburger is visible only on those narrow widths (CSS **`top-nav.css`**). **`brandClick`** fires when the built-in brand is activated and **`brand-href`** is **not** set.',
+    'Horizontal top bar (`xpl-top-nav`), nav items (`xpl-top-nav-item`), grouping container (`xpl-top-nav-menu`), and profile header (`xpl-nav-header-menu`). **`xpl-top-nav`** supports **`brand-name`**, **`brand-href`**, **`brand-logo`** (image URL), and **`slot="brand-logo"`** for the built-in brand row; **`slot="left-aside"`** holds primary links; **`slot="right-aside"`** then **`slot="user-menu"`**; on narrow viewports (**one pixel below Tailwind `md`** — **`max-width: 767px`** with default **`screens.md`**) **`right-aside`** is hidden in the bar — duplicate those actions into **`slot="right-aside-mobile"`** on **`xpl-nav-header-menu`**. The account region uses an **internal** **`xpl-popover`** (**`bottom-end`**, **`display="menu"`**): set **`child-account-label`** for the built-in trigger label beside **`chevron-down`**, put the panel in **`slot="user-menu"`**, or use **`slot="user-menu-trigger"`** to replace the built-in trigger. Use **Top Navigation** Controls for props + **Actions** for **`navOpen`** / **`brandClick`**. With **`nav-control`**, the hamburger is visible only on those narrow widths (CSS **`top-nav.css`**). **`brandClick`** fires when the built-in brand is activated and **`brand-href`** is **not** set.',
+    '',
+    'Group a parent nav item\'s children with **`xpl-top-nav-menu`** in its **`slot="dropdown"`**: on desktop it opens as a flyout under the parent; on narrow viewports the **same markup** drives a mobile cascade — the drawer swaps its top-level list for the group\'s rows in place (auto back row + `chevron-left`, no second panel). See the **`TopNavItem`** story\'s **`showDropdown`** control, or the grouped "Xplor Ops" item in this story\'s Controls, and switch **`previewViewport`** to a narrow preset to try the cascade.',
     '',
     '**Storybook:** These stories wrap the canvas in Foundation **`dark`** so previews match the components’ dark palette. The manager **moon** toggle targets the addon store and may still look “light” in the chrome; the preview area uses dark tokens regardless.',
     '',
@@ -237,7 +247,9 @@ const topNavFamilyDocsDescription = [
     '| **`xpl-top-nav`** | `navOpen` | Mobile menu toggled via control, or drawer closed with **Escape** (`nav-control` must be set). | `boolean` — `true` when open, `false` when closed. |',
     '| **`xpl-top-nav`** | `brandClick` | Built-in brand is activated (click or keyboard) and **`brand-href`** is unset. | `MouseEvent` — same as **`navItemClick`** on the internal brand **`xpl-top-nav-item`**. |',
     '| **`xpl-top-nav-item`** | `navItemClick` | User activates a plain item (click or Enter/Space). Not emitted for dropdown items (`slot="dropdown"`) or for internal chevron-only toggles. | `MouseEvent` (the original click). |',
+    '| **`xpl-top-nav-item`** | `openChange` | `open` changes (click, hover, keyboard, Escape, outside click, or programmatic). | `boolean` — new open state. |',
     '| **`xpl-nav-header-menu`** | — | No custom events. | — |',
+    '| **`xpl-top-nav-menu`** | — | No custom events — the back row calls `closeMenu()` on the parent trigger directly. | — |',
 ].join('\n');
 const meta = {
     title: 'Components/Navigation/Top Navigation',
@@ -314,15 +326,28 @@ export const TopNavigation = (args) => {
     const rightAsideMobileBlock = `
             <xpl-top-nav-item slot="right-aside-mobile" label="Inbox" icon="message-writing"></xpl-top-nav-item>
         `;
+    const groupedNavItem = `
+    <xpl-top-nav-item slot="left-aside" label="Xplor Ops" open-mode="hover">
+        <xpl-top-nav-menu slot="dropdown" label="Xplor Ops">
+            <xpl-top-nav-item label="Payroll" href="#"></xpl-top-nav-item>
+            <xpl-top-nav-item label="Capital" href="#">
+                <xpl-icon slot="trailing-icon" icon="open-rect-arrow-out"></xpl-icon>
+            </xpl-top-nav-item>
+        </xpl-top-nav-menu>
+    </xpl-top-nav-item>`;
     return `
 <xpl-top-nav${navControlAttr}${labelAttr}${childAccountAttr}${brandAttr}>
 ${brandLogoSlot}
     <xpl-top-nav-item slot="left-aside" label="Home" selected></xpl-top-nav-item>
     <xpl-top-nav-item slot="left-aside" label="Dashboard"></xpl-top-nav-item>
-    <xpl-top-nav-item slot="left-aside" label="Settings"></xpl-top-nav-item>${rightAsideBlock}
+    <xpl-top-nav-item slot="left-aside" label="Settings"></xpl-top-nav-item>${groupedNavItem}${rightAsideBlock}
     <xpl-nav-header-menu slot="user-menu" ${navHeaderMenuAttrs}>${rightAsideMobileBlock}
         <xpl-top-nav-item label="View Account" icon="house-4" selected></xpl-top-nav-item>
-        <xpl-top-nav-item label="Change Account" icon="refresh"></xpl-top-nav-item>
+        <xpl-top-nav-item
+            label="Change Account"
+            icon="refresh"
+            description="Acme Corp — Downtown Location"
+        ></xpl-top-nav-item>
         <xpl-top-nav-item label="Logout" icon="open-rect-arrow-out"></xpl-top-nav-item>
     </xpl-nav-header-menu>
 </xpl-top-nav>
@@ -451,23 +476,39 @@ TopNavigation.parameters = {
     },
 };
 export const TopNavItem = (args) => {
+    var _a;
     const attrs = [
         args.active === true ? ' active' : '',
         args.href != null && args.href !== '' ? `href="${escapeAttr(args.href)}"` : '',
         args.label != null && args.label !== '' ? `label="${escapeAttr(args.label)}"` : '',
         args.icon != null && args.icon !== '' ? `icon="${escapeAttr(args.icon)}"` : '',
+        args.description != null && args.description !== ''
+            ? `description="${escapeAttr(args.description)}"`
+            : '',
         args.itemAriaLabel != null && args.itemAriaLabel !== ''
             ? `item-aria-label="${escapeAttr(args.itemAriaLabel)}"`
             : '',
+        args.openMode === 'hover' ? ' open-mode="hover"' : '',
         args.selected === true ? ' selected' : '',
     ]
         .filter(Boolean)
         .join(' ');
     const hasLabel = args.label != null && args.label !== '';
+    const trailingIconSlot = args.trailingIcon != null && args.trailingIcon !== ''
+        ? `\n        <xpl-icon slot="trailing-icon" icon="${escapeAttr(args.trailingIcon)}"></xpl-icon>`
+        : '';
+    const dropdownSlot = args.showDropdown === true
+        ? `\n        <xpl-top-nav-menu slot="dropdown" label="${escapeAttr((_a = args.label) !== null && _a !== void 0 ? _a : 'Menu')}">
+            <xpl-top-nav-item label="Payroll" href="#"></xpl-top-nav-item>
+            <xpl-top-nav-item label="Capital" href="#" selected>
+                <xpl-icon slot="trailing-icon" icon="open-rect-arrow-out"></xpl-icon>
+            </xpl-top-nav-item>
+        </xpl-top-nav-menu>`
+        : '';
     return `
 <div class="dark sb-top-nav-item-story-bar">
     <xpl-top-nav-item ${attrs.trim()}>
-${hasLabel ? '' : '        <span>Custom slot content</span>'}
+${hasLabel ? '' : '        <span>Custom slot content</span>'}${trailingIconSlot}${dropdownSlot}
     </xpl-top-nav-item>
 </div>
 `.trim();
@@ -491,8 +532,8 @@ const HtmlTopNavItem = (args) => {
         .join(' ');
     const innerTag = hasHref
         ? `    <a href="${escapeAttr((_a = args.href) !== null && _a !== void 0 ? _a : '')}"${ariaCurrent} class="${innerClasses}">`
-        : `    <div role="button" tabindex="0"${ariaCurrent} class="${innerClasses}">`;
-    const innerClose = hasHref ? '    </a>' : '    </div>';
+        : `    <button type="button"${ariaCurrent} class="${innerClasses}">`;
+    const innerClose = hasHref ? '    </a>' : '    </button>';
     const lines = [
         '<div class="dark sb-top-nav-item-story-bar">',
         '  <div role="listitem">',
@@ -508,6 +549,8 @@ TopNavItem.args = {
     href: '',
     label: 'Nav item',
     selected: false,
+    openMode: 'click',
+    showDropdown: false,
 };
 TopNavItem.argTypes = {
     active: {
@@ -516,7 +559,7 @@ TopNavItem.argTypes = {
     },
     href: {
         control: 'text',
-        description: 'When set, the item renders as a native `<a>` link instead of a `div[role="button"]`. Use `#` for in-page demo. Clear to switch back to button mode.',
+        description: 'When set, the item renders as a native `<a>` link instead of a native `<button>`. Use `#` for in-page demo. Clear to switch back to button mode.',
     },
     label: {
         control: 'text',
@@ -524,21 +567,45 @@ TopNavItem.argTypes = {
     },
     icon: {
         control: 'text',
-        description: 'Icon name from the Apollo icon set to display before the label (e.g. house-4, wrench). Empty = no icon.',
+        description: 'Icon name from the Apollo icon set for `slot="leading-icon"`\'s fallback (e.g. house-4, wrench). Empty = no icon. Ignored when `slot="leading-icon"` content is present.',
+    },
+    description: {
+        control: 'text',
+        description: 'Optional second line below `label` (row context — e.g. inside `xpl-nav-header-menu`). Empty = single-line row.',
+    },
+    trailingIcon: {
+        control: 'text',
+        description: 'Storybook-only: demos `slot="trailing-icon"` with the given icon name (e.g. `open-rect-arrow-out` for "opens in new window"). When `showDropdown` is also on, this replaces the auto `chevron-down`.',
+        table: { category: 'Storybook' },
     },
     itemAriaLabel: {
         control: 'text',
         description: 'Maps to `item-aria-label`: accessible name for icon-only items (no label / default-slot text).',
     },
+    openMode: {
+        control: 'select',
+        options: ['click', 'hover'],
+        description: 'How `slot="dropdown"` opens. `hover` only activates on hover-capable, fine-pointer, `md`-and-up devices (falls back to click/tap otherwise); Enter/Space always toggles regardless. Requires `showDropdown`.',
+    },
     selected: {
         control: 'boolean',
         description: 'Whether the item is selected. Sets aria-current="page" and selected styling.',
     },
+    showDropdown: {
+        control: 'boolean',
+        description: 'Storybook-only: demos this item as a dropdown trigger with `slot="dropdown"` content (auto chevron, `open` state, `openMode`).',
+        table: { category: 'Storybook' },
+    },
     navItemClick: {
         control: false,
         description: '**Event** (not a prop): `navItemClick` — `CustomEvent<MouseEvent>`; `detail` is the originating click. Not emitted when `slot="dropdown"` is used.',
         table: { category: 'Events' },
     },
+    openChange: {
+        control: false,
+        description: '**Event** (not a prop): `openChange` — `CustomEvent<boolean>`; fires whenever `open` changes (click, hover, keyboard, Escape, outside click, or programmatic).',
+        table: { category: 'Events' },
+    },
 };
 TopNavItem.parameters = {
     layout: 'centered',
@@ -550,6 +617,59 @@ TopNavItem.parameters = {
         render: HtmlTopNavItem(TopNavItem.args),
     },
 };
+export const TopNavMenuGroup = (args) => {
+    const label = args.label != null && args.label !== '' ? args.label : 'Xplor Ops';
+    return `
+<div class="dark sb-top-nav-menu-shell--min">
+    <xpl-top-nav-menu label="${escapeAttr(label)}">
+        <xpl-top-nav-item label="Payroll" href="#"></xpl-top-nav-item>
+        <xpl-top-nav-item label="Capital" href="#" selected>
+            <xpl-icon slot="trailing-icon" icon="open-rect-arrow-out"></xpl-icon>
+        </xpl-top-nav-item>
+        <xpl-top-nav-item label="Xplor Ops Home" description="xplorops.com" href="#"></xpl-top-nav-item>
+    </xpl-top-nav-menu>
+</div>
+`.trim();
+};
+const HtmlTopNavMenuGroup = (args) => {
+    const label = args.label != null && args.label !== '' ? args.label : 'Xplor Ops';
+    return [
+        '<div class="dark sb-top-nav-menu-shell--min">',
+        `  <div role="list" aria-label="${escapeAttr(label)}" class="sb-top-nav-menu-list">`,
+        '    <a href="#">Payroll</a>',
+        '    <a href="#">Capital</a>',
+        '    <a href="#">Xplor Ops Home</a>',
+        '  </div>',
+        '</div>',
+    ].join('\n');
+};
+TopNavMenuGroup.args = {
+    label: 'Xplor Ops',
+};
+TopNavMenuGroup.argTypes = {
+    label: {
+        control: 'text',
+        description: 'Accessible name for the list (`aria-label`) and, on small screens, the mobile cascade back-row label for this group.',
+    },
+};
+TopNavMenuGroup.parameters = {
+    layout: 'centered',
+    design: TOP_NAV_FIGMA_DESIGN,
+    docs: {
+        description: {
+            story: 'Thin grouping container for `xpl-top-nav-item` rows — the panel content for a desktop flyout ' +
+                '(nest it in a parent `xpl-top-nav-item`\'s `slot="dropdown"`, see the `TopNavItem` story\'s ' +
+                '`showDropdown` control) and, in a follow-up PR, the source list for the mobile cascade. Panel ' +
+                'chrome (width, surface, shadow, radius, padding) matches `xpl-nav-header-menu`.',
+        },
+    },
+    'web-component': {
+        render: TopNavMenuGroup(TopNavMenuGroup.args),
+    },
+    html: {
+        render: HtmlTopNavMenuGroup(TopNavMenuGroup.args),
+    },
+};
 export const TopNavMenu = (args) => {
     const attrs = [
         args.username != null && args.username !== ''

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

@@ -64,11 +64,11 @@ export class NavHeaderMenu {
     }
     render() {
         const hasProfile = !!this.username || !!this.email;
-        return (h(Host, { key: '605d14e70deb43e79834d39cb3a078b3298e853a', class: {
+        return (h(Host, { key: 'c2a9e2904ae2cd06462f7e2d4407ac3e34ded34e', class: {
                 'xpl-nav-header-menu': true,
                 'xpl-nav-header-menu--has-right-aside-mobile': this.rightAsideMobilePresent,
                 dark: true,
-            } }, hasProfile && (h("div", { key: '4d7f4ffc4d0391fb3b20db6be3a1c32126f02dfe', class: "xpl-nav-header-menu__profile" }, h("div", { key: 'f79f233a7dd322329b4f571b6858d5f6954eb972', class: "xpl-nav-header-menu__info" }, this.username && (h("div", { key: '5672342ae08198b52525ca2fe75d0d489e678c6b', class: "xpl-nav-header-menu__username" }, this.username)), this.email && (h("div", { key: '90f13a468d30f939b3e99f932dc96746d99c4196', class: "xpl-nav-header-menu__email" }, this.email))))), h("div", { key: '70ae77baf3570e700639e7d8d387c5e4df7739c4', class: "xpl-nav-header-menu__right-aside-mobile" }, h("slot", { key: 'e9e1170bc8648f3676e083c7aa5c03d16e09b2ed', name: "right-aside-mobile" })), h("div", { key: '225c538dc72259da900406eb3fc6f222f93292e1', class: "xpl-nav-header-menu__slot", role: "list" }, h("slot", { key: '7631ce2ee1e6acdf4fdc9d54671e186de597de63' }))));
+            } }, hasProfile && (h("div", { key: '0b7c1b081ac1e73b95bf36724e83511c27e522be', class: "xpl-nav-header-menu__profile" }, h("div", { key: '77ac13de474f5508b5bae03aba09f782a0a05cbc', class: "xpl-nav-header-menu__info" }, this.username && (h("div", { key: '58722b17d64c8cffe7a38b81f30f885a26b0b19e', class: "xpl-nav-header-menu__username" }, this.username)), this.email && (h("div", { key: 'ad7aa885518ee8c205cc3f0e1c84a24b3e486335', class: "xpl-nav-header-menu__email" }, this.email))))), h("div", { key: 'e8c6cdb4e57b02d8b9591eef07a9f0458b73acaa', class: "xpl-nav-header-menu__right-aside-mobile" }, h("slot", { key: 'bb884eeb89b4de9d45cb4a7466cc2d7aac90cf6f', name: "right-aside-mobile" })), h("div", { key: '4fa5347923a9f9db10e8875e9ec00407b843263c', class: "xpl-nav-header-menu__slot", role: "list" }, h("slot", { key: '694d33b2fe8b1cfa302de845a15aa24fdb33fc62' }))));
     }
     static get is() { return "xpl-nav-header-menu"; }
     static get properties() {

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

@@ -0,0 +1,2 @@
+export const TOP_NAV_ITEM_HOVER_OPEN_MQ = '(hover: hover) and (pointer: fine) and (min-width: 768px)';
+export const TOP_NAV_ITEM_HOVER_CLOSE_DELAY_MS = 150;