@xplortech/apollo-core 2.9.0 → 2.11.0

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

@@ -19,29 +19,23 @@ export class Table {
         this.sortTypeArray = [];
         this.selectAllValue = Math.random().toString(36).slice(2);
         this.selectAll = (e) => {
-            const { target } = e;
-            if (!(target instanceof HTMLInputElement))
-                return;
-            const { checked } = target;
+            const checked = e.detail;
             this.areAllSelected = checked;
             this.selected =
                 this.selectedValues.length > 0
-                    ?
-                        Array.from(this.el.querySelectorAll('tbody td:first-child input')).map((input) => checked ? input === null || input === void 0 ? void 0 : input.value : checked)
+                    ? Array.from(this.el.querySelectorAll('tbody td:first-child xpl-checkbox')).map((checkbox) => (checked ? checkbox.value : checked))
                     : this.selected.map(() => checked);
             this.onChange();
         };
         this.selectOne = (e, checkboxIdx) => {
-            const { target } = e;
-            if (!(target instanceof HTMLInputElement))
-                return;
-            const { checked, value } = target;
-            this.areAllSelected = false;
+            const checked = e.detail;
+            const { value } = e.target;
             this.selected = this.selected.map((v, selectedIdx) => {
                 if (selectedIdx !== checkboxIdx)
                     return v;
                 return this.selectedValues.length > 0 ? (checked ? value : checked) : checked;
             });
+            this.areAllSelected = this.selected.every((v) => !!v);
             this.onChange();
         };
         this.onChange = () => {
@@ -132,27 +126,24 @@ export class Table {
             (!this.sortTypeArray || this.sortTypeArray.length !== this.columns.length)) {
             this.sortTypeArray = this.columns.map(() => null);
         }
-        return (h(Host, { key: '10b0bfd08e28fada9a2c8509d405c5314cce1689' }, h("div", { key: '8e5b4fe928618b175a58f858f6cfd65f4bd29c53', 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: 'a6df646737b9a1d5e67cebe9eaad41911ab606ca', 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: '5f14766107d69f26b865f63c323d417f43260267' }, 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("input", { checked: this.areAllSelected, id: "__xpl-table-th", indeterminate: !this.areAllSelected &&
-                    this.selected.some((a) => a), onClick: (e) => {
-                    e.stopPropagation();
-                    this.selectAll(e);
-                }, type: "checkbox", value: `select-all-${this.selectAllValue}` })), column, isColumnSortable && !!this.sortTypeArray[i] && (h("xpl-icon", { icon: iconType, size: 16 })))));
-        }))), h("tbody", { key: 'b13ca1d1a738de189d4f040dfd309187671b341d' }, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
+            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: '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", { htmlFor: `__xpl-table-row-${rowNum}` }, h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues.length > 0
+                : '' }, 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}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("tfoot", { key: '5d45854ba21aa7e0bfaaf3b8a537e0c121538ac9' }, 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: '7b36c9e640bd43ac38ea2625e7600e8699a13c5f', role: "row", class: "xpl-table-header" }, h("slot", { key: 'd03fe894a829477b6bf25dbd6dfa724b224b8d42' })));
+        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: '9998ae067e13e7c08338ae29bfe05bc3adacaa87', 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: '18209c354e77267a13ce0c7380df0e419595cca7', 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: 'cf1bf2ec95fbbe7f0a6b8774cc5ce26928c7d6ca', "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: '5bfd13566a17723ec166a934bc72e59307eacb8c', 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: '52baf508a46759fe908f8721b3089d3db0189383', name: "heading" })), h("div", { key: '363fe87f244eace0dc0af0903e0b8c25da3a613f', class: "xpl-tabs__panels" }, h("slot", { key: 'f3872844f486cf831bca26a228eba88fa18b42c3', 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: '7e85098bb9f5e8c0fceee3e7947337e0799c4de8', 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: 'cb875506819a0a58d42add85a1a09e95e4786eba', 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: '431f061a4c96dacb9dc76a753c9d2de01491b2be', 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: '4f470ceb525c35a86ddbf65365fac1674ebe7033', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '04da6ca2777ceb222da2f4fd831d8aef5101a667', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: '0e5e75aa05e96361700c0c7b9eccbc4c5b75a00c', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: 'f1ccc651318b6d7128255918bdd68ef36a249e9f', class: "xpl-toast__notification" }, h("p", { key: '1ae879d8a670a0f1a4928bfa2a0692581040dca1', class: "xpl-toast__title" }, h("slot", { key: 'b819a773c11b88cb00f8638db8a960de55ce6508', name: "title" })), this.caption !== '' && (h("p", { key: '8f6eb8dd769e4aaf5b16b3caafd9e9ec5408a7e1', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: '46ae2f04fa38b50d2a07082b6972590f6bd28005', 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: '69512a9b482bb54252527d798dfa2884a19b7d8c', name: "action" })), this.dismissable && (h("div", { key: '818a5f9dde1a9c9b7ab3cd62cd807200e3687af6', class: "xpl-toast__close" }, h("button", { key: '3a617189f8f031e119a125efce0ab35a7f5cf31f', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: 'd86187aed0665da278f953be5ab92f7051f44438', 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: '2665ccecd2df94b7ed7443e2ecb6265fca7f235f', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '75292b431419e1d34c127a82d61baa1ee024a2bb', 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: '772e34c7d553faee5b1dfc448ecb95706dc3e8df', 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: 'afec8fff16aadca330c804832dbd41c4b10f5caa', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && h("label", { key: '1b25d01805915cb2dacf03ad9340beec61565bcc', 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: '156bc52063283c17215e1d3a90c25939ae92685b', class: {
+        return (h(Host, { key: 'eda1f57ef1a207b82f622f090dd30f21d60bbc61', class: {
                 'xpl-toolbar': true,
                 dark: true,
                 hidden: this.selectedItemCount === 0,
-            } }, h("div", { key: '184e28d57a16d8ba6e10f29a95c931a036f44515', class: "toolbar" }, h("p", { key: 'ff6a7137db216c71859eac4398bbaf8bc6fe18f9', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'a610539a08383a3d1d3dad8d95a8b75f43eaf1a3', class: "actions" }, h("slot", { key: 'dd8ea3150b40926ab40f36d38770daaa969a6fff', name: "actions-left" }), h("slot", { key: 'b51f8940fb52dd6880841a917574f782e0d0c72c', 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/tooltip-arrow.js

@@ -1,2 +1,2 @@
 import { h } from "@stencil/core";
-export const TooltipArrow = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "17", height: "14" }, h("g", { filter: "url(#a)" }, h("path", { d: "M0 5h15l-7.5 7.5L0 5Z" })), h("defs", null, h("filter", { id: "a", width: "20", height: "8.171", x: ".5", y: "5", "color-interpolation-filters": "sRGB", filterUnits: "userSpaceOnUse" }, h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), h("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" }), h("feOffset", { dy: "1" }), h("feComposite", { in2: "hardAlpha", operator: "out" }), h("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" }), h("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_20073_3067" }), h("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_20073_3067", result: "shape" })))));
+export const TooltipArrow = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "13" }, h("path", { d: "M0.5 5h15l-7.5 7.5L0.5 5Z", fill: "white", stroke: "none", class: "xpl-tooltip-arrow__fill" }), h("path", { d: "M0.5 5 L8 12.5 L15.5 5", fill: "none", stroke: "black", "stroke-width": "1", class: "xpl-tooltip-arrow__stroke" })));

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

@@ -41,43 +41,12 @@ Tooltip.parameters = {
             <div class="xpl-tooltip-container">
                 <div class="xpl-tooltip xpl-tooltip--${position}">
                     ${text}
-                </div>
-                <div class="xpl-tooltip-arrow">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="40">
-                    <g filter="url(#a)">
-                        <path d="M0 5h15l-7.5 7.5L0 5Z" />
-                    </g>
-                    <defs>
-                        <filter
-                        id="a"
-                        width="20"
-                        height="8.171"
-                        x=".5"
-                        y="5"
-                        color-interpolation-filters="sRGB"
-                        filterUnits="userSpaceOnUse"
-                        >
-                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                        <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"
-                        />
-                        <feOffset dy="1" />
-                        <feComposite in2="hardAlpha" operator="out" />
-                        <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" />
-                        <feBlend
-                            in2="BackgroundImageFix"
-                            result="effect1_dropShadow_20073_3067"
-                        />
-                        <feBlend
-                            in="SourceGraphic"
-                            in2="effect1_dropShadow_20073_3067"
-                            result="shape"
-                        />
-                        </filter>
-                    </defs>
-                    </svg>
+                    <div class="xpl-tooltip-arrow">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="13">
+                            <path d="M0.5 5h15l-7.5 7.5L0.5 5Z" fill="white" stroke="none" class="xpl-tooltip-arrow__fill" />
+                            <path d="M0.5 5 L8 12.5 L15.5 5" fill="none" stroke="black" stroke-width="1" class="xpl-tooltip-arrow__stroke" />
+                        </svg>
+                    </div>
                 </div>
             </div>
         `)(Tooltip.args),

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

@@ -6,7 +6,7 @@ export class Tooltip {
         this.hideArrow = false;
     }
     render() {
-        return (h(Host, { key: 'a118d629923a433680360f746e063ca94d5f1c6a' }, h("div", { key: 'cfd9742ee2cebd56994480bd2a601cb4e93b12a9', class: "xpl-tooltip-container" }, h("slot", { key: '8aae99e1a187f8f737e896ccfd00d67f1cfeb3b3' }), h("div", { key: '4b418074b2ac7f8760f09e3af033ea93f7a0012e', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text), !this.hideArrow && (h("div", { key: 'ef6a166f78250f1f98eae41661fd7020b36eeaae', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: '7baecae00ab178f715c89443d250b068861afe5f' }))))));
+        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: '451149dc9d73f705492fc65bf4f014b8efa4ee8a', 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: 'f42b560492c110644d52b10f708a3ed650833861', class: "xpl-nav-header-menu__profile" }, h("div", { key: '6d98f720af85cbf8164bea7500175d6bfbb9465b', class: "xpl-nav-header-menu__info" }, this.username && (h("div", { key: '9d52880dc41c11e71ac3cc107d8009eccb787bac', class: "xpl-nav-header-menu__username" }, this.username)), this.email && (h("div", { key: 'd1b71ac2c4f6aaf5efd7b1910b8848f97ab08bf0', class: "xpl-nav-header-menu__email" }, this.email))))), h("div", { key: 'e1b298c39ccbe0f68b8d60fa82714572f656ab1e', class: "xpl-nav-header-menu__right-aside-mobile" }, h("slot", { key: 'fbb8d26c38a4a50568e8836ac3af4409fe6c93c0', name: "right-aside-mobile" })), h("div", { key: 'cbe858338ec04cdd3b74285f95b0466432924be2', class: "xpl-nav-header-menu__slot", role: "list" }, h("slot", { key: 'b47ccc7f955a30d8b9d9b884fa3d920d45958f7c' }))));
+            } }, 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;