@xplortech/apollo-core 2.11.0 → 3.0.0

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

@@ -2,10 +2,9 @@ import { Host, h, } from "@stencil/core";
 import { TimerManager } from "../../utils/lifecycle";
 let xplListItemsPropDeprecationWarned = false;
 function getListItemFromComposedPath(e) {
-    var _a, _b;
-    const path = (_b = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)) !== null && _b !== void 0 ? _b : [];
+    const path = e.composedPath?.() ?? [];
     const fromPath = path.find((node) => node instanceof HTMLElement && node.tagName.toLowerCase() === 'xpl-list-item');
-    return fromPath !== null && fromPath !== void 0 ? fromPath : null;
+    return fromPath ?? null;
 }
 export class List {
     constructor() {
@@ -79,8 +78,7 @@ export class List {
         this.collectListItems();
     }
     handleItemDragStart(event) {
-        var _a;
-        const row = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.item;
+        const row = event.detail?.item;
         if (!row || row.parentElement !== this.el) {
             return;
         }
@@ -89,23 +87,21 @@ export class List {
         }
         this.draggedItem = row;
         const wrapper = this.draggedItem.querySelector('.xpl-list-item__wrapper');
-        wrapper === null || wrapper === void 0 ? void 0 : wrapper.classList.add('dragging');
+        wrapper?.classList.add('dragging');
     }
     handleItemDragEnd(event) {
-        var _a;
-        const row = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.item;
+        const row = event.detail?.item;
         if (!row || row.parentElement !== this.el) {
             return;
         }
         if (this.draggedItem) {
             const wrapper = this.draggedItem.querySelector('.xpl-list-item__wrapper');
-            wrapper === null || wrapper === void 0 ? void 0 : wrapper.classList.remove('dragging');
+            wrapper?.classList.remove('dragging');
         }
         this.draggedItem = null;
     }
     handleItemDrop(event) {
-        var _a;
-        const dropTarget = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.item;
+        const dropTarget = event.detail?.item;
         if (!dropTarget || dropTarget.parentElement !== this.el) {
             return;
         }
@@ -115,7 +111,7 @@ export class List {
         }
         if (this.draggedItem) {
             const wrapper = this.draggedItem.querySelector('.xpl-list-item__wrapper');
-            wrapper === null || wrapper === void 0 ? void 0 : wrapper.classList.remove('dragging');
+            wrapper?.classList.remove('dragging');
         }
         if (this.draggedItem && dropTarget && this.draggedItem !== dropTarget) {
             const visibleItems = this.getVisibleListItemElements();
@@ -159,7 +155,7 @@ export class List {
         event.stopPropagation();
         const { direction, itemId, keyboardMode, exitKeyboardMode } = event.detail;
         if (keyboardMode !== undefined) {
-            this.keyboardReorderItemId = keyboardMode ? itemId : null;
+            this.keyboardReorderItemId = keyboardMode ? (itemId ?? null) : null;
         }
         if (exitKeyboardMode) {
             this.keyboardReorderItemId = null;
@@ -170,7 +166,10 @@ export class List {
                 this.el.dispatchEvent(new CustomEvent('xplListReorder', {
                     bubbles: true,
                     composed: true,
-                    detail: Object.assign(Object.assign({}, event.detail), { orderedItemIds: this.getOrderedItemIds() }),
+                    detail: {
+                        ...event.detail,
+                        orderedItemIds: this.getOrderedItemIds(),
+                    },
                 }));
             }
         }
@@ -246,13 +245,12 @@ export class List {
         });
         this.announceReorder(itemId, orderedItemIds);
         this.timers.requestAnimationFrame(() => {
-            var _a;
             if (!this.el.isConnected) {
                 return;
             }
             const movedItem = this.getDirectChildListItems().find((el) => this.getItemRowId(el) === itemId);
-            const handleRoot = movedItem === null || movedItem === void 0 ? void 0 : movedItem.querySelector('.xpl-list-item__drag-handle');
-            const focusTarget = ((_a = handleRoot === null || handleRoot === void 0 ? void 0 : handleRoot.querySelector) === null || _a === void 0 ? void 0 : _a.call(handleRoot, 'button')) instanceof HTMLElement
+            const handleRoot = movedItem?.querySelector('.xpl-list-item__drag-handle');
+            const focusTarget = handleRoot?.querySelector?.('button') instanceof HTMLElement
                 ? handleRoot.querySelector('button')
                 : handleRoot;
             if (focusTarget instanceof HTMLElement) {
@@ -365,15 +363,12 @@ export class List {
         return item.getAttribute('item-id') || item.id || item.itemId || '';
     }
     render() {
-        var _a, _b, _c;
-        const ariaLabelledBy = ((_a = this.labelledBy) === null || _a === void 0 ? void 0 : _a.trim()) ? this.labelledBy.trim() : undefined;
-        const ariaLabel = !ariaLabelledBy && ((_b = this.label) === null || _b === void 0 ? void 0 : _b.trim()) ? this.label.trim() : undefined;
-        return (h(Host, { key: '66c41bf0c252a6ae1e61aea6d8c1c40fc594d8c7', role: "list", class: { 'xpl-list': true }, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, (_c = this.items) === null || _c === void 0 ? void 0 :
-            _c.map((item, index) => {
-                var _a;
-                const legacyRowId = (_a = item.id) !== null && _a !== void 0 ? _a : `item-${index}`;
-                return (h("xpl-list-item", { key: `legacy-item-${legacyRowId}`, item: item, href: item.href, itemId: legacyRowId }));
-            }), h("slot", { key: '922088a7fe36e8bb2ee905ac79ac845eff101707' }), this.reorderable ? (h("div", { class: "xpl-list__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)) : null));
+        const ariaLabelledBy = this.labelledBy?.trim() ? this.labelledBy.trim() : undefined;
+        const ariaLabel = !ariaLabelledBy && this.label?.trim() ? this.label.trim() : undefined;
+        return (h(Host, { key: '8b055baaf9acc04df19be097d0fb5bcb86c7165a', role: "list", class: { 'xpl-list': true }, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, this.items?.map((item, index) => {
+            const legacyRowId = item.id ?? `item-${index}`;
+            return (h("xpl-list-item", { key: `legacy-item-${legacyRowId}`, item: item, href: item.href, itemId: legacyRowId }));
+        }), h("slot", { key: '103e3fb6cb29f9527b090dd9e53412528ed7b9c2' }), this.reorderable ? (h("div", { class: "xpl-list__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)) : null));
     }
     static get is() { return "xpl-list"; }
     static get properties() {

package/dist/collection/components/xpl-main-nav/xpl-main-nav.js

@@ -13,7 +13,7 @@ export class MainNav {
         this.navWidthHandler();
     }
     render() {
-        return (h(Host, { key: '15982141de742a1daeae5ffbb172ea18e0667e2d', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: '41efe9e9a68a3a27653efee7f6ed92d7fde9e902' }, h("header", { key: '18c08d774991cd41dc3b395891d1621343a5d505', "aria-label": "Sidebar Header" }, h("slot", { key: 'b82477e1ae127d30e80ac4e82c22a5e8cbed94e4', name: "logo" }), h("slot", { key: '3841701331da0ea203c356b20098e36b67255384', name: "brand-name" })), h("div", { key: '512df331c13b69154550fe510a8887323167081e', class: "xpl-main-nav__main_section" }, h("slot", { key: '30da0851944d7ce43648efe3b22786b57079042a', name: "navigation" })), h("footer", { key: '3c58ec415052a4b7930ed8861593cb1c52bcd1f5', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: 'fac051cf4e6bc7635d58df0fbf9b504af244eb52', name: "footer" })))));
+        return (h(Host, { key: '936e7393a8037c6c78c7a6d5d284d9c37be2f866', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: '45fd74c979b53bbd8080ca92ea15e3135d0d49ae' }, h("header", { key: 'cb692d0e90aa70bce5e09af43e54d864849f4800', "aria-label": "Sidebar Header" }, h("slot", { key: '778c33ef024895ca44616ef9655843330e3c563b', name: "logo" }), h("slot", { key: '7728db09b46999e708c46d10d5de56c65ab9a9fa', name: "brand-name" })), h("div", { key: '0376fefe7921b061f3f2fdc972aa381ed7d124a2', class: "xpl-main-nav__main_section" }, h("slot", { key: '12a61a53d6c93695d38c70d9a953fe4e37438178', name: "navigation" })), h("footer", { key: '8cd0e32231e155324c78878dcaad955ab7b3e4fb', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: 'cdaf0bec22d3d8229441e7e036c3fcbcb244c32f', name: "footer" })))));
     }
     static get is() { return "xpl-main-nav"; }
     static get properties() {

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

@@ -1,6 +1,9 @@
 import { Host, h } from "@stencil/core";
+let modalInstanceCount = 0;
 export class Modal {
     constructor() {
+        this.dialogElement = null;
+        this.titleId = `xpl-modal-title-${(modalInstanceCount += 1)}`;
         this.isOpen = false;
         this.size = 'medium';
         this.variant = 'default';
@@ -9,10 +12,11 @@ export class Modal {
             this.modalClosed.emit();
         };
         this.handleNativeBackdropClick = (event) => {
-            if (event.target !== this.dialogElement) {
+            const { dialogElement } = this;
+            if (!dialogElement || event.target !== dialogElement) {
                 return;
             }
-            const rect = this.dialogElement.getBoundingClientRect();
+            const rect = dialogElement.getBoundingClientRect();
             const clickedOutsideDialog = event.clientX < rect.left ||
                 event.clientX > rect.right ||
                 event.clientY < rect.top ||
@@ -22,32 +26,70 @@ export class Modal {
             }
         };
     }
-    componentDidLoad() {
-        this.dialogElement = this.element.querySelector('dialog');
-        this.updateModalState();
-        this.dialogElement.addEventListener('cancel', this.handleDialogClose);
-        this.dialogElement.addEventListener('click', this.handleNativeBackdropClick);
+    connectedCallback() {
+        this.bindDialog();
     }
     disconnectedCallback() {
-        if (this.dialogElement) {
-            this.dialogElement.removeEventListener('cancel', this.handleDialogClose);
-            this.dialogElement.removeEventListener('click', this.handleNativeBackdropClick);
-        }
+        this.clearCloseTimer();
+        this.unbindDialog();
+    }
+    componentDidLoad() {
+        this.bindDialog();
     }
     updateModalState() {
-        var _a, _b;
+        this.clearCloseTimer();
         if (this.isOpen) {
-            (_b = (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.openDialog();
         }
-        else if (this.dialogElement && typeof this.dialogElement.close === 'function') {
-            setTimeout(() => {
-                var _a;
-                (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.close();
-            }, 250);
+        else {
+            this.scheduleClose();
+        }
+    }
+    bindDialog() {
+        const dialog = this.element.querySelector('dialog');
+        if (!dialog) {
+            return;
+        }
+        this.dialogElement = dialog;
+        dialog.removeEventListener('cancel', this.handleDialogClose);
+        dialog.removeEventListener('click', this.handleNativeBackdropClick);
+        dialog.addEventListener('cancel', this.handleDialogClose);
+        dialog.addEventListener('click', this.handleNativeBackdropClick);
+        this.updateModalState();
+    }
+    unbindDialog() {
+        const dialog = this.dialogElement;
+        if (!dialog) {
+            return;
+        }
+        if (dialog.open && typeof dialog.close === 'function') {
+            dialog.close();
+        }
+        dialog.removeEventListener('cancel', this.handleDialogClose);
+        dialog.removeEventListener('click', this.handleNativeBackdropClick);
+    }
+    clearCloseTimer() {
+        if (this.closeTimerId !== undefined) {
+            clearTimeout(this.closeTimerId);
+            this.closeTimerId = undefined;
+        }
+    }
+    openDialog() {
+        if (this.dialogElement && !this.dialogElement.open) {
+            this.dialogElement.showModal?.();
+        }
+    }
+    scheduleClose() {
+        if (!this.dialogElement || typeof this.dialogElement.close !== 'function') {
+            return;
         }
+        this.closeTimerId = setTimeout(() => {
+            this.closeTimerId = undefined;
+            this.dialogElement?.close();
+        }, 250);
     }
     render() {
-        return (h(Host, { key: 'd1457065d1448b866f21a5a7a903fbc8504567a5', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: '05807b08500c1ba557c9dabe04ca059f3638f36c' }), h("dialog", { key: '14f78e63f6e19f83fd159604175381b054848ad6', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, h("div", { key: '54cbd855c642bad93f74d8f6f875c32728d8539a', class: "xpl-modal__header" }, h("div", { key: 'd0ae962e9ddb8df05eeefd2cd083c0aaf6253814', class: "xpl-modal__title" }, this.variant === 'warning' && (h("xpl-icon", { key: '896dbc9e4c614b456f2b22626c294f86e655f811', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), h("slot", { key: '859b27499e4ae644c06d376225f56d47b0081dc2', name: "title" }), h("xpl-button", { key: '288822a0310d17b13360acb7d358e7b5711fa79f', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, h("xpl-icon", { key: '14181eec31afd43bf07a21f6ae65664ea12f789a', icon: "x" }))), h("div", { key: '4d23417d83bdb3312f1c883a367687e1d4fdfa7c', class: "xpl-modal__subtitle" }, h("slot", { key: '5db4d5c7997a4a27f7195cdd0ff56d81238835e1', name: "subtitle" }))), h("div", { key: 'e17d7805f75d00422d6eaa8148a1f0f3297369df', class: "xpl-modal__body" }, h("slot", { key: 'f1f43ce5fce6c1567bf856071b5d283c28a64bbe', name: "body" })), h("div", { key: 'c7757cabc4d718a19ee8c91020f20e4437b73d6d', class: "xpl-modal__footer" }, h("slot", { key: 'bdcf1d5ca962025e7cdd2368b1dd6117b5dc190a', name: "tertiary" }), h("slot", { key: '483ce3eb24f84d4c08a84e97e6e6a9af9829b007', name: "secondary" }), h("slot", { key: '7c7ec707d80fecb81a21c997c84a1622370285b0', name: "primary" })))));
+        return (h(Host, { key: '3194d5377b7438543a3f6e6ab41fd7c307674a28', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: 'dfc30ff7879364920669a1d1ebfdaea39951b966' }), h("dialog", { key: 'bfb33a8d97d17981f582768b0e34b0d167cf60cb', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}`, "aria-labelledby": this.titleId }, h("div", { key: '0b71adc30bde109aa831a28200c918a458a7da52', class: "xpl-modal__header" }, h("div", { key: '657c5aad60fa85e4285e299dcbe24209742277e6', class: "xpl-modal__title" }, h("xpl-button", { key: '2301014d0f4bd129dbbfc7b1eb242db98622f866', type: "button", class: "xpl-modal__close-button", "icon-only": true, variant: "tertiary", "aria-label": "Close modal", onClick: this.handleDialogClose }, h("xpl-icon", { key: 'a978ff514926ca4b319c4920b2057baa50a1fb24', icon: "xmark" })), this.variant === 'warning' && (h("xpl-icon", { key: '2a1cf704d1aa75170d53ef3887a4d1e7874762fa', size: 20, icon: "triangle-warning", class: "xpl-modal__alert-icon" })), h("span", { key: 'd2bcd4c5b4596e80875eb9000ee75d592e41ce74', class: "xpl-modal__title-text", id: this.titleId }, h("slot", { key: 'cf009856b6e86bab36bc16a249ad9b3ebc09fd1c', name: "title" }))), h("div", { key: '29258401d4ec72c81a5a7e28e2365efd2227445e', class: "xpl-modal__subtitle" }, h("slot", { key: '9f749c62f55edabcec4dc5d8677ad9b45e64be50', name: "subtitle" }))), h("div", { key: 'f12dd8ee02ef7f9aeeedd0d7c7b5ffe52c24a336', class: "xpl-modal__body" }, h("slot", { key: '0a9e2d67a7842075560e1cf846e4b3d18bfe1bee', name: "body" })), h("div", { key: '720e9bf0cb5746b31b7dee9cb1ad4226eb13bf11', class: "xpl-modal__footer" }, h("slot", { key: '819ba75ee04742fb872c0345b4cc1732891856ee', name: "primary" }), h("slot", { key: 'b74d4339586fd2d863791d6cb6cd3d593a9c9785', name: "secondary" }), h("slot", { key: 'a4d437d7e9142bf91307edae5ed5dbd89e8921f0', name: "tertiary" })))));
     }
     static get is() { return "xpl-modal"; }
     static get properties() {

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

@@ -9,11 +9,11 @@ export class NavItem {
         }
     }
     render() {
-        return (h(Host, { key: 'f7494edb113b4eccf244c312447e69248af495ba', class: "xpl-nav-item", role: "listitem", onClick: () => {
+        return (h(Host, { key: '6632b50719b413f69b1943035e60c086951709d7', class: "xpl-nav-item", role: "listitem", onClick: () => {
                 if (this.navControl) {
                     this.onNavToggle();
                 }
-            } }, h("slot", { key: 'acde5d80edbead75a558b964954caa18e1cc0c5f', name: "link" }, h("slot", { key: '66838cf7e6610e48d7102475cc6463aa65f4651b', name: "icon" }), h("slot", { key: 'de185eaab42a425cf82eaaf6883b1472fecb9754' }))));
+            } }, h("slot", { key: '1c7f754d3fa4b67883562f4877414cefc7947920', name: "link" }, h("slot", { key: 'c4268f625e8a4ef9323293d064abee42afee5d1f', name: "icon" }), h("slot", { key: '5f843056b4c5852e3fa89c9a5ef36442b76238a0' }))));
     }
     static get is() { return "xpl-nav-item"; }
     static get properties() {

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

@@ -66,31 +66,29 @@ export class Pagination {
         this.buildPageChoices();
     }
     componentDidLoad() {
-        var _a, _b;
-        (_a = this.rowsPerPageSelectRef) === null || _a === void 0 ? void 0 : _a.addEventListener('changeEvent', this.handleRowsChange);
-        (_b = this.pageSelectRef) === null || _b === void 0 ? void 0 : _b.addEventListener('changeEvent', this.handlePageChange);
+        this.rowsPerPageSelectRef?.addEventListener('changeEvent', this.handleRowsChange);
+        this.pageSelectRef?.addEventListener('changeEvent', this.handlePageChange);
     }
     disconnectedCallback() {
-        var _a, _b;
-        (_a = this.rowsPerPageSelectRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('changeEvent', this.handleRowsChange);
-        (_b = this.pageSelectRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('changeEvent', this.handlePageChange);
+        this.rowsPerPageSelectRef?.removeEventListener('changeEvent', this.handleRowsChange);
+        this.pageSelectRef?.removeEventListener('changeEvent', this.handlePageChange);
     }
     render() {
         const disablePrev = this.currentPage <= 1;
         const disableNext = this.currentPage >= this.totalPages;
-        return (h(Host, { key: '7ee32b9506487555cf9c96b8204bc06acff20614', class: {
+        return (h(Host, { key: '23b4aec5d70fcfa1ec02089716f7649d15fcb0ca', class: {
                 'xpl-pagination': true,
                 'xpl-pagination__with-page-control': this.withPageControl,
                 'xpl-pagination__no-page-control': !this.withPageControl,
-            } }, this.withPageControl && (h("div", { key: 'd0b77c50e30c046df37e806912d9d144066ce8ea', class: "xpl-pagination__rows-per-page" }, h("label", { key: '5a596a7f2e440f007cc51ffb965f8c6da057bd11', class: "xpl-pagination__rows-label" }, "Rows per page:"), h("xpl-select", { key: '3592c6c2b8efa704536e64bf6ae085f228921573', class: "xpl-pagination__rows-per-page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.rowsPerPageOptionsArray.map((option) => ({
+            } }, this.withPageControl && (h("div", { key: '2383d3488dc1435f1384f98cf07459cfb6ccb1bc', class: "xpl-pagination__rows-per-page" }, h("label", { key: 'be3f5e3815a11f5cb02710d253e02e10fdf6236d', class: "xpl-pagination__rows-label" }, "Rows per page:"), h("xpl-select", { key: 'dd06add7fde18b8616b18fc945e78457ddedb8b7', class: "xpl-pagination__rows-per-page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.rowsPerPageOptionsArray.map((option) => ({
                 label: option.toString(),
                 value: option.toString(),
                 isSelected: option === this.selectedRowsPerPage,
             })), ref: (el) => {
-                this.rowsPerPageSelectRef = el;
-            } }))), h("div", { key: '0c4e020f133b9bff31e185fb3ea11d3e98f0ac00', class: "xpl-pagination__pager" }, h("button", { key: 'add5b2b91bb1c1d08637bc7e8cf907274126765c', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, h("xpl-icon", { key: 'ca29bdc9acb1f220afb7cbb5a2f1bfc8602c07c9', icon: "arrow-left", size: 20 })), h("xpl-select", { key: '89244ec17d7e8f10188a6b7b25dde30f9885aef2', class: "xpl-pagination__page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.pageChoices, "custom-display-value": true, ref: (el) => {
-                this.pageSelectRef = el;
-            } }, h("div", { key: '916de27d7e201ba0920c265109edf2a6e9bd0620', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), h("button", { key: '7ddaf9be0ab94e8e0e1fdbdca20e76294d7d2706', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, h("xpl-icon", { key: '37703d9e35a8288bf24c8675e4e973a400f7a0e9', icon: "arrow-right", size: 20 })))));
+                this.rowsPerPageSelectRef = el ?? null;
+            } }))), h("div", { key: '9a41a8e940f04ba2da9a7e9331d5ff496043771f', class: "xpl-pagination__pager" }, h("button", { key: 'cfe0a954aaa79e5b8af00a86d384bf9d1d2831b8', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, h("xpl-icon", { key: 'd3cf107b6f1a2cc02c50e0bd23b19b857ebd812d', icon: "arrow-left", size: 20 })), h("xpl-select", { key: '90d4c563a755c83a759b8e4028aac09b8a0be715', class: "xpl-pagination__page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.pageChoices, "custom-display-value": true, ref: (el) => {
+                this.pageSelectRef = el ?? null;
+            } }, h("div", { key: '3f9071ff9ba2094c5014628366519db328efc466', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), h("button", { key: '474df34b27cd0cd6ffcb58c4408691f5bf765c99', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, h("xpl-icon", { key: '0466f500b1cc7f2fa8e22da485e889775a53b2e8', icon: "arrow-right", size: 20 })))));
     }
     static get is() { return "xpl-pagination"; }
     static get properties() {

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

@@ -6,11 +6,11 @@ export class XplPanel {
     }
     render() {
         const hasAccent = this.accent !== 'none';
-        return (h(Host, { key: 'f7216acfba4419e26d171a24aa64153991841701', class: {
+        return (h(Host, { key: '7e2a96b285cc06379f8f7f98ae44affcfac0c8dc', class: {
                 'xpl-panel': true,
                 [`xpl-panel--accent-${this.accent}`]: hasAccent,
                 [`xpl-panel--padding-${this.padding}`]: true,
-            } }, hasAccent && h("div", { key: '18f1ed385cb4d29dbe18e7272e779a40a2ead05e', "aria-hidden": "true", class: "xpl-panel__accent" }), h("div", { key: 'd0a13066c9c4b472b505ffd7592f882bb886b9a2', class: "xpl-panel__content" }, h("slot", { key: '0c8c6495afcbd3a897a6f118e17df75dc7328363' }))));
+            } }, hasAccent && h("div", { key: '3a6740a44c18c9973c86a314d26bd565971c19f2', "aria-hidden": "true", class: "xpl-panel__accent" }), h("div", { key: 'd4951bd49e7600a58fa0ecb31fddf4df1dfe7956', class: "xpl-panel__content" }, h("slot", { key: '2374d130b274a64e875b0c4b1ce03b34d96554b4' }))));
     }
     static get is() { return "xpl-panel"; }
     static get properties() {

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

@@ -20,11 +20,31 @@ export class Popover {
             }
         };
         this.handleClickOutside = ({ target }) => {
+            if (!target || !(target instanceof Node)) {
+                return;
+            }
             const isInside = this.el.contains(target);
             if (!isInside && this.isOpenState) {
                 this.isOpenState = false;
             }
         };
+        this.handleWindowBlur = () => {
+            if (!this.isOpenState) {
+                return;
+            }
+            if (this.blurCloseTimeoutId !== undefined) {
+                clearTimeout(this.blurCloseTimeoutId);
+            }
+            this.blurCloseTimeoutId = setTimeout(() => {
+                this.blurCloseTimeoutId = undefined;
+                const active = document.activeElement;
+                if (this.isOpenState &&
+                    active instanceof HTMLIFrameElement &&
+                    !this.el.contains(active)) {
+                    this.isOpenState = false;
+                }
+            }, 0);
+        };
     }
     onIsOpenPropChange(newValue) {
         this.isOpenState = newValue;
@@ -34,7 +54,9 @@ export class Popover {
         this.isOpenChange.emit(newValue);
     }
     updateActualPosition(opened) {
-        if (!this.triggerRef || !this.contentRef || !opened) {
+        const { triggerRef } = this;
+        const { contentRef } = this;
+        if (!triggerRef || !contentRef || !opened) {
             return;
         }
         const preferredOrderMap = {
@@ -136,8 +158,8 @@ export class Popover {
             ],
         };
         const fitsPosition = (position) => {
-            const { top: triggerTop, left: triggerLeft, bottom: triggerBottom, right: triggerRight, } = this.triggerRef.getBoundingClientRect();
-            const { width: popoverWidth, height: popoverHeight } = this.contentRef.getBoundingClientRect();
+            const { top: triggerTop, left: triggerLeft, bottom: triggerBottom, right: triggerRight, } = triggerRef.getBoundingClientRect();
+            const { width: popoverWidth, height: popoverHeight } = contentRef.getBoundingClientRect();
             const { innerWidth: screenWidth, innerHeight: screenHeight } = window;
             const visibleBottom = triggerBottom + popoverHeight < screenHeight;
             const visibleTop = triggerTop - popoverHeight >= 0;
@@ -187,8 +209,9 @@ export class Popover {
         this.actualPosition = actual;
     }
     connectedCallback() {
-        document.addEventListener('mousedown', this.handleClickOutside.bind(this));
+        document.addEventListener('mousedown', this.handleClickOutside);
         document.addEventListener('keydown', this.handleKeyDown);
+        window.addEventListener('blur', this.handleWindowBlur);
         this.updateListener = throttle(() => {
             this.updateActualPosition(this.isOpenState);
         });
@@ -199,23 +222,28 @@ export class Popover {
         });
     }
     disconnectedCallback() {
+        if (this.blurCloseTimeoutId !== undefined) {
+            clearTimeout(this.blurCloseTimeoutId);
+            this.blurCloseTimeoutId = undefined;
+        }
         document.removeEventListener('mousedown', this.handleClickOutside);
         document.removeEventListener('keydown', this.handleKeyDown);
+        window.removeEventListener('blur', this.handleWindowBlur);
         ['resize', 'scroll'].forEach((event) => {
             window.removeEventListener(event, this.updateListener);
         });
     }
     render() {
-        return (h(Host, { key: 'fd4ba66077f4909fe71a47b719fc76e8b0970bcc' }, h("div", { key: 'f54d27275be2e332ae72e225197eb76350803db3', class: {
+        return (h(Host, { key: 'b747fcdda5987a1d0506486d325cdf9a57cab6a8' }, h("div", { key: '547d595121db1b713c204eb5ac173828fff4b35b', class: {
                 'xpl-popover': true,
                 [`xpl-popover--${this.actualPosition}`]: true,
                 'xpl-popover--is-open': this.isOpenState,
-            } }, h("span", { key: 'a45378d297636bcb6eddd0ea2927703291f27571', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
+            } }, h("span", { key: 'd12773148d327475c8ff51fbb5a717c95231cabf', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
                 this.triggerRef = el;
-            } }, h("slot", { key: 'e40f33425dede71e45fefca68eed6231f569b6f4', name: "trigger" })), this.display === 'arrow' && (h("div", { key: '4c6dbd56d3b6c782bdd25c9674df29b92866e55c', class: "xpl-popover__arrow" }, h("svg", { key: '6492c5f9ffd7609ed0fb334f515bf5448db9b837', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e1e92c7c65caece9b89b9b23f6031409cd67312c', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), h("path", { key: '496097d86300cdd3a09732e3fb5492e8b3e4a292', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), h("div", { key: 'ed12d8116e9c230dbe166b4479b19d640849b873', class: {
+            } }, h("slot", { key: '6322dc3b9e7292eeb41aaf5c662aa99273868c7d', name: "trigger" })), this.display === 'arrow' && (h("div", { key: '2a3fe87cc9a82c8e914f6917a999bdd4433b9042', class: "xpl-popover__arrow" }, h("svg", { key: 'a191461ac07cf6693d5461aa4d343214e62ed6ef', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '61003e404b4e031057e0d2ef39a31bc9b7fba6df', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), h("path", { key: '15de3ff2ec9657fd3e47410de79d2362076c797b', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), h("div", { key: 'ec4ae8672673fa63b918ab6222a6fbf7099758ff', class: {
                 'xpl-popover__content': true,
                 [`xpl-popover__content--display-${this.display}`]: true,
-            }, ref: (el) => (this.contentRef = el) }, h("slot", { key: 'ad827a2a95546d4e3c975cd410ba4067fd69ad04' })))));
+            }, ref: (el) => (this.contentRef = el) }, h("slot", { key: '50c82f8c1833c91f6e2aabdfe3773725c9d9296d' })))));
     }
     static get is() { return "xpl-popover"; }
     static get properties() {

package/dist/collection/components/xpl-progress-bar/xpl-progress-bar.js

@@ -25,12 +25,12 @@ export class ProgressBar {
         return this.variant === 'indeterminate';
     }
     render() {
-        return (h(Host, { key: 'bae4b080ca10ce596b7f889fc50b41199bcee67b', class: {
+        return (h(Host, { key: '7c374a5f2f89aed6b0c3a0daa4cc843efea8d262', class: {
                 'xpl-progress-bar': true,
                 [`xpl-progress-bar--${this.size}`]: true,
                 [`xpl-progress-bar--${this.variant}`]: true,
                 'xpl-progress-bar--complete': this.isComplete,
-            } }, h("div", { key: '3e13c35002888a7ea5b4710ec96ea72ab6e8811c', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (h("div", { key: 'c41d0c11ef55fc3be48b8007716439a0791245c5', class: "xpl-progress-bar__header" }, this.label && h("div", { key: 'c680eb355e174bfa3a17b29e64d5d9e8d3699718', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (h("div", { key: 'a4d541ee3fa68549dbfa8f371b8d3e5a5d9dcfd0', class: "xpl-progress-bar__icon" }, this.isError ? (h("xpl-icon", { icon: "circle-xmark-1" })) : (h("xpl-icon", { icon: "circle-check-1" })))))), h("div", { key: '24aa03523c672a1604b91da88dae9a58895a412b', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (h("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, h("div", { class: "xpl-progress-bar__indeterminate" }))) : (h("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (h("div", { key: '67a687ba35eb5208286833834b1a4e75d64ca47d', class: "xpl-progress-bar__helper" }, this.helperText)))));
+            } }, h("div", { key: 'f1be4a82fbb87ffac27bb2b8d0f479ad36aae340', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (h("div", { key: 'd415f09b3d0d237bc348b33470162d2b44048856', class: "xpl-progress-bar__header" }, this.label && h("div", { key: '48bc06b81c4445d811e6cd5f3ac086192cbcb392', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (h("div", { key: 'd31ccfc3ed1f956fdc89e01ca262b606219bb78e', class: "xpl-progress-bar__icon" }, this.isError ? (h("xpl-icon", { icon: "circle-xmark-1" })) : (h("xpl-icon", { icon: "circle-check-1" })))))), h("div", { key: '5c97c6193a2ebb0626052953f1a11c9afc258da8', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (h("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, h("div", { class: "xpl-progress-bar__indeterminate" }))) : (h("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (h("div", { key: '8e78ed094ab41425272b1818cc004a9094c3632d', class: "xpl-progress-bar__helper" }, this.helperText)))));
     }
     static get is() { return "xpl-progress-bar"; }
     static get properties() {

package/dist/collection/components/xpl-progress-indicator/xpl-progress-indicator.js

@@ -55,7 +55,7 @@ export class ProgressIndicator {
                 ? `Progress: all ${totalSteps} ${totalSteps === 1 ? 'step' : 'steps'} complete`
                 : `Progress: step ${currentStepNumber} of ${totalSteps}`
             : 'Progress';
-        return (h(Host, { key: '267a70a3c6ceffe23390abb57a524d5ddb2b53a6', class: hostClasses, role: "group", "aria-label": ariaLabel }, h("div", { key: 'd34a875d04fb035cc5cda9c8194135d173f7ebae', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
+        return (h(Host, { key: '2fa8128b81b665f0733e3c905cb99eaa1917e719', class: hostClasses, role: "group", "aria-label": ariaLabel }, h("div", { key: '279079d456f72748c77ac9f06281c838307ba092', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
     }
     static get is() { return "xpl-progress-indicator"; }
     static get properties() {

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

@@ -20,16 +20,16 @@ export class Radio {
         return Boolean(this.checked);
     }
     render() {
-        return (h(Host, { key: 'b25d59aa55a08aa7264e1dadc670b540d3740dfc', class: {
+        return (h(Host, { key: 'e3626967beb86dee46de974dd2a3c8993314d2d0', class: {
                 'xpl-checkbox-radio-container': true,
-                styled: this.styled,
-                disabled: this.disabled,
-            } }, h("input", { key: 'df724428d276baf063679829f2b1ffcdcbfbf2b2', class: "xpl-radio", type: "radio", checked: this.isChecked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), h("label", { key: 'd521ca252872494ed28826721dde6270e441a3a3', class: {
+                styled: !!this.styled,
+                disabled: !!this.disabled,
+            } }, h("input", { key: 'cdc8d7968dd78031f33b4f72024698f7afec27cf', class: "xpl-radio", type: "radio", checked: this.isChecked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), h("label", { key: '5bb2243b7fe42b219d3fa3696c92321b116f8c72', class: {
                 'xpl-label': true,
-                'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: '5093a78e1fb18908b700cb90cf932de06a3ce76d' }), this.description && (h("small", { key: '8806e9374a812df4db6fa8a9a9e1672abd282299', class: {
+                'xpl-label--disabled': !!this.disabled,
+            }, htmlFor: this.id }, h("slot", { key: '85f1bf2c73111b8f5c0b0ae26343f590c8a50faf' }), this.description && (h("small", { key: '6452b050fe0df584373a45d105434fe31a8a82ba', class: {
                 'xpl-description': true,
-                'xpl-description--disabled': this.disabled,
+                'xpl-description--disabled': !!this.disabled,
             } }, this.description)))));
     }
     static get is() { return "xpl-radio"; }

package/dist/collection/components/xpl-secondary-nav/xpl-secondary-nav.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SecondaryNav {
     render() {
-        return (h(Host, { key: '8137a8f7ecc1682f1b7e64d41f12c70b9030dd4d', class: "xpl-secondary-nav" }, h("nav", { key: 'f2f65911a356c4265ee583f37ffeb9f78f12d9b4', "aria-label": "Secondary Nav" }, h("slot", { key: '972a51f6d4d59f17a88681f1fbd537ff0dc9fe0b' }))));
+        return (h(Host, { key: '6fd3db4309ecb98fb1739fd69d964297a77a46eb', class: "xpl-secondary-nav" }, h("nav", { key: 'c08a1df306cee05760b6761409ebfb4ba87c2e4f', "aria-label": "Secondary Nav" }, h("slot", { key: '9d5d0657bdd581bce000f1ace49be8c1d018fe47' }))));
     }
     static get is() { return "xpl-secondary-nav"; }
 }

package/dist/collection/components/xpl-select/select.shared.js

@@ -0,0 +1,82 @@
+import { v4 as uuid } from "uuid";
+export const GROUPED_SELECT_CHOICES = (subtitle) => [
+    {
+        groupName: 'Group 1',
+        options: [
+            { label: 'Choice 1', subtitle },
+            { label: 'Choice 2', subtitle },
+            { label: 'Choice 3', subtitle },
+        ],
+    },
+    {
+        groupName: 'Group 2',
+        options: [{ label: 'Choice 4' }, { label: 'Choice 5' }, { label: 'Choice 6' }],
+    },
+];
+export const FLAT_SELECT_CHOICES = [
+    { label: 'Choice 1', value: 'choice-1' },
+    { label: 'Choice 2', value: 'choice-2' },
+    { label: 'Choice 3', value: 'choice-3' },
+    { label: 'Choice 4', value: 'choice-4' },
+    { label: 'Choice 5', value: 'choice-5' },
+    { label: 'Choice 6', value: 'choice-6' },
+];
+export function stripEmptySelectSentinels(args) {
+    return Object.fromEntries(Object.entries(args).filter(([key, value]) => !((key === 'error' || key === 'selectIcon') && value === '')));
+}
+export function buildSelectAttrs(args) {
+    let attrs = '';
+    if (args.label)
+        attrs += ` label="${args.label}"`;
+    if (args.description)
+        attrs += ` description="${args.description}"`;
+    if (args.mode !== 'single')
+        attrs += ` mode="${args.mode}"`;
+    if (args.disabled)
+        attrs += ` disabled`;
+    if (args.error)
+        attrs += ` error="${args.error}"`;
+    if (args.mode === 'multi' && !args.truncate)
+        attrs += ` truncate="false"`;
+    if (args.customDisplayValue)
+        attrs += ` custom-display-value`;
+    if (args.selectIcon)
+        attrs += ` select-icon="${args.selectIcon}"`;
+    if (args.placeholder)
+        attrs += ` placeholder="${args.placeholder}"`;
+    return attrs;
+}
+export function buildSelectPropertyScript(id, choices, selectedValues, preventDefault) {
+    const statements = [`component.choices = ${JSON.stringify(choices, null, 2)};`];
+    if (selectedValues !== undefined &&
+        selectedValues !== '' &&
+        !(Array.isArray(selectedValues) && selectedValues.length === 0)) {
+        statements.push(`component.selectedValues = ${JSON.stringify(selectedValues)};`);
+    }
+    if (preventDefault) {
+        statements.push(`component.addEventListener('triggerDropdown', function(event) {
+                event.preventDefault();
+            });`);
+    }
+    return `(function() {
+        const component = document.getElementById("${id}");
+        ${statements.join('\n        ')}
+    })();`;
+}
+export function renderSelectStory(args) {
+    const id = uuid();
+    const attrs = `${buildSelectAttrs(args)} id="${id}"`;
+    const slotContent = args.customDisplayValue
+        ? `<div slot="custom-display-value">${args.customDisplayValueContent || ''}</div>`
+        : '';
+    return `
+        <div style="width:75vw">
+            <div style="position: relative; min-width: 200px; width: 100%">
+                <xpl-select${attrs}>${slotContent}</xpl-select>
+            </div>
+        </div>
+        <script>
+            ${buildSelectPropertyScript(id, args.choices, args.selectedValues, args.preventDefaultTriggerDropdown)}
+        </script>
+    `;
+}