@xplortech/apollo-core 2.10.0 → 2.12.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: '4290084c30b164abb653943a81783c35531d6316', 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: '55ce7202269eab851c0d753fd87ef2d5bf9f59a8' }), 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: '1bfa7238314b7560cdd4dbafae3240fc5e89f72c', 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: 'ee1e57aff365af47ec0ace762cdfeabd0783ee6f' }), 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/main-nav.stories.js

@@ -1,5 +1,10 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
 export default {
     title: 'Components/Navigation/Main Nav',
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
     argTypes: {
         width: {
             options: ['default', 'sm', 'md'],

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: '2e8b8744026876205bd66e04f5d93a2cf23415dd', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: 'ad2a7cadd3a9a4ac898b6e27604aff51a3cf5c40' }, h("header", { key: '14e0e676e8d22147c6fe3093da3a8a4c0f102243', "aria-label": "Sidebar Header" }, h("slot", { key: '5da2fe9fa391e56ae7ea3a742f7a060c78dcec56', name: "logo" }), h("slot", { key: 'd3631d0d23c5c0404e134ebc9d852bfd1651c982', name: "brand-name" })), h("div", { key: 'f0ff1cda64b9474386ce4f56fb4027b4f193e0c3', class: "xpl-main-nav__main_section" }, h("slot", { key: '0ef80166585b66d4af64a1b13383a551444c10f0', name: "navigation" })), h("footer", { key: 'd23f595c3705823dd1e7a86b6db66f98bc70504a', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: 'b4ba325347935557ee9e2e37b824c5dc42aa32b3', name: "footer" })))));
+        return (h(Host, { key: 'a2bd0e9fc9de814e5522b315dbb6da2672c6da72', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: 'f6c75ca9ef37747054994457c2bf2b1d44941479' }, h("header", { key: 'a338af682f79147b22fcb7e72a86fcaab867e19f', "aria-label": "Sidebar Header" }, h("slot", { key: '7208e18c6bc8202ef709ee9a2c07369aeb3f7a8f', name: "logo" }), h("slot", { key: '189761d3d465c4a8ddbdc8dca05ff81b2f2dc2a4', name: "brand-name" })), h("div", { key: '0c981cfaf3267a82319864185d55b4ffad06d114', class: "xpl-main-nav__main_section" }, h("slot", { key: '1301a128dfb5399867527d2afbf350c1e2e92b26', name: "navigation" })), h("footer", { key: 'b3010ec6e8773fad12d60abffcb4226dc5ae091b', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: 'a662e627533ec313acc169a1c01093cf8f450c8a', name: "footer" })))));
     }
     static get is() { return "xpl-main-nav"; }
     static get properties() {

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

@@ -1,7 +1,19 @@
-import { INITIAL_VIEWPORTS } from "storybook/viewport";
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForComponentsRender } from "../../../../src/utils/story-vrt";
 export default {
     title: 'Components/Modal',
     component: 'xpl-modal',
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({
+            enable: true,
+            failureThreshold: 1,
+            failureThresholdType: 'percent',
+        });
+    },
+    play: async ({ canvasElement }) => {
+        await waitForComponentsRender(canvasElement);
+    },
     argTypes: {
         isOpen: {
             control: {
@@ -46,18 +58,15 @@ export default {
         },
     },
 };
-export const Modal = ({ isOpen, title, subtitle, body, actions, primaryButtonText, secondaryButtonText, tertiaryButtonText, size, variant, }, { globals: { viewport } }) => {
+export const Modal = ({ isOpen, title, subtitle, body, actions, primaryButtonText, secondaryButtonText, tertiaryButtonText, size, variant, }) => {
     const renderButtons = () => {
-        var _a, _b;
-        const viewportWidth = parseInt((_b = (_a = INITIAL_VIEWPORTS[viewport]) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.width, 10);
-        const isDesktop = viewport === 'reset' || viewportWidth > 768;
         const buttons = [];
         buttons.push(`<xpl-button slot="primary" variant=${variant === 'warning' ? 'warning' : 'primary'}>${primaryButtonText}</xpl-button>`);
         if (actions >= 2) {
             buttons.push(`<xpl-button slot="secondary" variant="secondary">${secondaryButtonText}</xpl-button>`);
         }
         if (actions === 3) {
-            buttons.push(`<xpl-button slot="tertiary" variant=${isDesktop ? 'secondary' : 'subtle'}>${tertiaryButtonText}</xpl-button>`);
+            buttons.push(`<xpl-button slot="tertiary" variant="secondary">${tertiaryButtonText}</xpl-button>`);
         }
         return buttons;
     };

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class Modal {
     constructor() {
+        this.dialogElement = null;
         this.isOpen = false;
         this.size = 'medium';
         this.variant = 'default';
@@ -9,10 +10,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 ||
@@ -24,30 +26,41 @@ export class Modal {
     }
     componentDidLoad() {
         this.dialogElement = this.element.querySelector('dialog');
+        if (!this.dialogElement) {
+            return;
+        }
         this.updateModalState();
         this.dialogElement.addEventListener('cancel', this.handleDialogClose);
         this.dialogElement.addEventListener('click', this.handleNativeBackdropClick);
     }
     disconnectedCallback() {
+        this.clearCloseTimer();
         if (this.dialogElement) {
             this.dialogElement.removeEventListener('cancel', this.handleDialogClose);
             this.dialogElement.removeEventListener('click', this.handleNativeBackdropClick);
         }
     }
     updateModalState() {
-        var _a, _b;
         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.clearCloseTimer();
+            this.dialogElement?.showModal?.();
         }
         else if (this.dialogElement && typeof this.dialogElement.close === 'function') {
-            setTimeout(() => {
-                var _a;
-                (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.close();
+            this.clearCloseTimer();
+            this.closeTimerId = setTimeout(() => {
+                this.closeTimerId = undefined;
+                this.dialogElement?.close();
             }, 250);
         }
     }
+    clearCloseTimer() {
+        if (this.closeTimerId !== undefined) {
+            clearTimeout(this.closeTimerId);
+            this.closeTimerId = undefined;
+        }
+    }
     render() {
-        return (h(Host, { key: 'b6d5d1c4b2fd755b74d2b138e937cb8f70256e17', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: '972f5031f80eb1c394f7e5be5dc04a604bb91a34' }), h("dialog", { key: '544203fa98a61f4f1e41cbffca3c1048fab8e236', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, h("div", { key: 'f37cc41033d765577ae3280d2b4969e71aabe369', class: "xpl-modal__header" }, h("div", { key: '356a2ba82b16bd1c47813d6589b45a901a108d10', class: "xpl-modal__title" }, this.variant === 'warning' && (h("xpl-icon", { key: '4144c0f94f9760b7ed3379b2a2e7f69e31ef0829', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), h("slot", { key: 'fd2c48017a620ec83ce0f79d13d18aa2aae57b14', name: "title" }), h("xpl-button", { key: 'd6c816ff2a44911333196531641d620a0cafafaf', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, h("xpl-icon", { key: 'b7c7b6754d0a94f3aa927d390c35faf165b1b776', icon: "x" }))), h("div", { key: 'fb96c212c96648434f821c2ec4169fb6499f1230', class: "xpl-modal__subtitle" }, h("slot", { key: 'b838fbe968ffdec5f5d71cffde42c02b6bf085f1', name: "subtitle" }))), h("div", { key: '7d9230791de065bdbf9703821021ce6230c8b568', class: "xpl-modal__body" }, h("slot", { key: '60449861f56680023c79139eb5dc04a2cfe5fbd5', name: "body" })), h("div", { key: 'adb79ff548bb3475c7b8bd4fe9bd3b9f2a454f89', class: "xpl-modal__footer" }, h("slot", { key: '32148fd7cabc15deb2f40b6706a5e1761dab4cde', name: "tertiary" }), h("slot", { key: 'bbacc31d2b03825ab14fb08e0307ac70767c3ebd', name: "secondary" }), h("slot", { key: '89f492273b1d71772551c2454bd4bbb56899fe3b', name: "primary" })))));
+        return (h(Host, { key: 'f7778c1d428d6a008cfe7731a7cbef692cf0dce8', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: '764ba9d33983e2c680c732e909226a6295326b85' }), h("dialog", { key: '0d8c01d5dd3c9cb14cd3ca5d6c6a2a466cfbeb7c', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, h("div", { key: '825ee88c897ba15bb75e851481f2f5078b647b6d', class: "xpl-modal__header" }, h("div", { key: '7630900b3e13a9fcbe5e73db3cabe3f43efe5cb0', class: "xpl-modal__title" }, this.variant === 'warning' && (h("xpl-icon", { key: '5f1aadc57fe05727395f6feabbc4c9ce8c83dd61', size: 20, icon: "triangle-warning", class: "xpl-modal__alert-icon" })), h("slot", { key: '2735d03fbc4e2520855a5225eed51c4c725c3732', name: "title" }), h("xpl-button", { key: '8c0196cb3d07388308451a050a4becac995cd281', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, h("xpl-icon", { key: '8f1764666f2b86592c0c62b06750edf29cc14a14', icon: "xmark" }))), h("div", { key: '6e4fc6a67288640f8a8ac1f69fb4f44df1c9d229', class: "xpl-modal__subtitle" }, h("slot", { key: 'ce59d8d14ffd3200e64c65a1ea2bda7918190a1f', name: "subtitle" }))), h("div", { key: 'a1e6dd317884149a38863ba97b480f21feaf2657', class: "xpl-modal__body" }, h("slot", { key: '43eb4ccf4febe7fe5ae5ed992ce5f6e701231247', name: "body" })), h("div", { key: 'a0648d0b989c86ed2592fa15c2c0a06d6b5470e5', class: "xpl-modal__footer" }, h("slot", { key: '3f6d0f703cb726d9f603aeeee42cf673dfbbeca6', name: "tertiary" }), h("slot", { key: '98412e5f51a4e86cc68dd3133de2611638deee7e', name: "secondary" }), h("slot", { key: '0121aca5ebaaa738fabf32da32e962deb7920fd5', name: "primary" })))));
     }
     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: '1653225a63a82d72768a162430f11918d3b57810', class: "xpl-nav-item", role: "listitem", onClick: () => {
+        return (h(Host, { key: 'ffbe4b34fe5a30cec5bfe506fbc325663db7d02b', class: "xpl-nav-item", role: "listitem", onClick: () => {
                 if (this.navControl) {
                     this.onNavToggle();
                 }
-            } }, h("slot", { key: 'c04f946780264be513575537ee1041b576e1834f', name: "link" }, h("slot", { key: 'cd415288c4caf0c7ffd4906531f858a0e21cbb93', name: "icon" }), h("slot", { key: 'a1678415d40e459597738013500a715396b5b759' }))));
+            } }, h("slot", { key: 'c772716a5cac78963468f7e6ae7a34f16dbd2636', name: "link" }, h("slot", { key: '0b120ea6bc0e596fee7730459689906e2233521c', name: "icon" }), h("slot", { key: 'fd9edd0051e771ba87a37b72245d3bcfa71bd468' }))));
     }
     static get is() { return "xpl-nav-item"; }
     static get properties() {

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

@@ -1,3 +1,5 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 export default {
     title: 'Components/Pagination',
     parameters: {
@@ -5,7 +7,13 @@ export default {
             handles: ['pageChange', 'rowsPerPageChange'],
         },
     },
-    tags: ['beta'],
+    tags: ['beta', 'vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
     argTypes: {
         totalPages: {
             control: {
@@ -40,7 +48,7 @@ Pagination.parameters = {
 export const PaginationWithPageControl = (args) => {
     const { totalPages, withPageControl } = args;
     return `
-        <div style="min-height: 120vh; display: flex; align-items: flex-end; padding: 24px;">
+        <div style="display: flex; align-items: flex-end; padding: 24px;">
             <xpl-pagination total-pages="${totalPages}" with-page-control="${withPageControl}"></xpl-pagination>
         </div>
     `;

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: '48dc3bfd2f81b621c0c4cacd5e8aa43e974a3c2b', class: {
+        return (h(Host, { key: '9184904c32aa8d4e552f9493f343a162b8f2d8ee', class: {
                 'xpl-pagination': true,
                 'xpl-pagination__with-page-control': this.withPageControl,
                 'xpl-pagination__no-page-control': !this.withPageControl,
-            } }, this.withPageControl && (h("div", { key: 'a8eb321da956ac31d62ee6a8e776a9949733310b', class: "xpl-pagination__rows-per-page" }, h("label", { key: '42688af51596e843faec89c04b99eef0569b9289', class: "xpl-pagination__rows-label" }, "Rows per page:"), h("xpl-select", { key: '276646a15894d4434d72bbe3a9e74fe4ec151d09', class: "xpl-pagination__rows-per-page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.rowsPerPageOptionsArray.map((option) => ({
+            } }, this.withPageControl && (h("div", { key: '26febbb3a6bf061bfcf8d61190dc7947aa04efb1', class: "xpl-pagination__rows-per-page" }, h("label", { key: '7a5b406ee8bfd2582e8b543db14b39a493ff2d9c', class: "xpl-pagination__rows-label" }, "Rows per page:"), h("xpl-select", { key: 'd82e693f4ada5897f163ae5243c047348be63a08', 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: '808b1a352b4500e593e9887b9957a292bbc64b18', class: "xpl-pagination__pager" }, h("button", { key: '9a18f0e6843deeb1c4efcb3cbb29e8c22ebee923', 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: 'd761379de5063bf5739c92f90d1a795ccda03b5f', icon: "arrow-left", size: 20 })), h("xpl-select", { key: 'cd18e7c9a1d15a6b4a353b32f90bfe646ab321ee', 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: '117fa90e904994b44fe86055aea62af0a404904e', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), h("button", { key: 'dbd3c30917758594d41fec4a313e204ccbd56e16', 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: '4ca90e03195972c79a9a6b09027d8cf594a1dacc', icon: "arrow-right", size: 20 })))));
+                this.rowsPerPageSelectRef = el ?? null;
+            } }))), h("div", { key: '23fdb444921471c1121a82f6b17050beea69a93c', class: "xpl-pagination__pager" }, h("button", { key: 'bae0457c8c0cda02feb837de3c20965aabc937c0', 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: '714f2d15b2e2c129d2bd70c28858ac95ae3518a7', icon: "arrow-left", size: 20 })), h("xpl-select", { key: 'c52b9974fc675706cdcfe43fe939225a4561cef5', 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: '7dcc6c4b3f0b0470986006c2ab7dbcfcbaba0f92', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), h("button", { key: '0afaf6e4b4acd626e7972c0fb5d5f8aad1e16f2a', 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: '3759f242a05741cf53938539cd69b9074c6cf323', icon: "arrow-right", size: 20 })))));
     }
     static get is() { return "xpl-pagination"; }
     static get properties() {

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

@@ -1,4 +1,13 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 export default {
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
     title: 'Components/Panel',
     component: 'xpl-panel',
     argTypes: {

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: 'e028327c45513aed4bdaf60f230292c3ca427abb', class: {
+        return (h(Host, { key: '2be99cac0dda8442b54752745f3bf647df334e70', class: {
                 'xpl-panel': true,
                 [`xpl-panel--accent-${this.accent}`]: hasAccent,
                 [`xpl-panel--padding-${this.padding}`]: true,
-            } }, hasAccent && h("div", { key: '131b41a89c2d34ee7e1c9313a8659bc62c5a882a', "aria-hidden": "true", class: "xpl-panel__accent" }), h("div", { key: '67e1dae738eb616fa024fda3f64fcf8008c4fbce', class: "xpl-panel__content" }, h("slot", { key: '39ec3513aaab2138ae1c7b45dea4e3bc7ef9a9d1' }))));
+            } }, hasAccent && h("div", { key: 'ff25fa59eff4d886540a5abc3b637478b533b23b', "aria-hidden": "true", class: "xpl-panel__accent" }), h("div", { key: '415205b25333615cfe22d41fdfaf4e114547746b', class: "xpl-panel__content" }, h("slot", { key: '5573ed5bb1cb102720d2c6e1245656fba8d36b8f' }))));
     }
     static get is() { return "xpl-panel"; }
     static get properties() {

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

@@ -1,4 +1,13 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 export default {
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
     title: 'Components/Popover',
     parameters: {
         actions: {
@@ -74,7 +83,8 @@ export const LargerContent = ({ isOpen = true, position }) => {
   `;
 };
 [Simple, LargerTrigger, LargerContent].forEach((comp) => {
-    comp.argTypes = {
+    const story = comp;
+    story.argTypes = {
         isOpen: {
             control: 'boolean',
             description: 'Whether the popover is open initially',
@@ -106,15 +116,15 @@ export const LargerContent = ({ isOpen = true, position }) => {
             description: 'Display style of the popover',
         },
     };
-    comp.args = {
+    story.args = {
         isOpen: true,
         position: 'top-middle',
         display: 'arrow',
     };
-    comp.parameters = {
+    story.parameters = {
         layout: 'centered',
         'web-component': {
-            render: comp(comp.args),
+            render: story(story.args ?? { isOpen: true, position: 'top-middle', display: 'arrow' }),
         },
         html: {
             render: (({ isOpen = true, position = 'top-middle', display = 'arrow' }) => `
@@ -154,7 +164,7 @@ export const LargerContent = ({ isOpen = true, position }) => {
                         Content for the popover goes here.
                     </div>
                 </div>
-                `)(comp.args),
+                `)(story.args ?? { isOpen: true, position: 'top-middle', display: 'arrow' }),
         },
         design: {
             type: 'figma',

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: 'e6c2991b7550ee3d49d0e6389f0e5734873d2ec9' }, h("div", { key: '5feb4134506e40be7f1485913f197b5e976a22eb', class: {
+        return (h(Host, { key: '0e697fc04e3fd17595eb05f70104c6ffaa2c641c' }, h("div", { key: '749de61a600d9eb55074910d3093217b3fb08863', class: {
                 'xpl-popover': true,
                 [`xpl-popover--${this.actualPosition}`]: true,
                 'xpl-popover--is-open': this.isOpenState,
-            } }, h("span", { key: '0fd0c9ecf34e28f05b1c74cd54b259af985a8f48', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
+            } }, h("span", { key: 'd42b2a4893a5dc18e4298e5ed79eac0c93996385', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
                 this.triggerRef = el;
-            } }, h("slot", { key: '036625c11df6140ae5e66c5b07d48034d4f85a8c', name: "trigger" })), this.display === 'arrow' && (h("div", { key: 'dc701c9b71dfc1ac2cd5397928366c807ec12680', class: "xpl-popover__arrow" }, h("svg", { key: '714129740bb1ced6b465636e85fa006733d03e20', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'aa489883a369f713b6f04093ed39fe4f91088213', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), h("path", { key: '1e341b0b3f7be9c4387c3b2560d31f023090b5d8', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), h("div", { key: 'fb1ca2715f2bbb0bd32ed532e61da5f2a8aa8b63', class: {
+            } }, h("slot", { key: 'e99d7e89b3d825ae716a93c423d31854914e5fa9', name: "trigger" })), this.display === 'arrow' && (h("div", { key: '18809dc747e4646920238a0b05e54be568e63311', class: "xpl-popover__arrow" }, h("svg", { key: 'b3f78f3c82cc0969cd4c36117f562eb538864cbe', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c2f12882970e1e599e7e508e5cd57210b7d08015', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), h("path", { key: 'bce5aecd1ee49ae8252a27bf8db0677c891beb54', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), h("div", { key: 'd970490de0d7ed8413afcc8fa1b1f0985352b796', class: {
                 'xpl-popover__content': true,
                 [`xpl-popover__content--display-${this.display}`]: true,
-            }, ref: (el) => (this.contentRef = el) }, h("slot", { key: '365e7a91de4254cc8f8423b1e832d5adeff1490a' })))));
+            }, ref: (el) => (this.contentRef = el) }, h("slot", { key: '742a4d13a4bb0e21ab0135f316bfec76da6fde82' })))));
     }
     static get is() { return "xpl-popover"; }
     static get properties() {

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

@@ -1,4 +1,13 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 export default {
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
     title: 'Components/Progress Bar',
     argTypes: {
         label: {
@@ -70,7 +79,7 @@ ProgressBar.parameters = {
             const helperHtml = helperText
                 ? `<div class="xpl-progress-bar__helper">${helperText}</div>`
                 : '';
-            const maxValue = max !== null && max !== void 0 ? max : 100;
+            const maxValue = max ?? 100;
             const currentValue = variant !== 'indeterminate' && value !== undefined ? value : maxValue;
             const className = `xpl-progress-bar xpl-progress-bar--${size} xpl-progress-bar--${variant}`;
             const progressHtml = variant === 'indeterminate'

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: '25abe25b042ab5fb4d81246275538abaad3c4086', class: {
+        return (h(Host, { key: 'e6c2e96d1af4b56204eba288d35b065fbe7d3c71', 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: '926c1407043a98c265dffbaa616b640624671352', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (h("div", { key: '78ece9b7848541236ce2ad4309b664204bfb370e', class: "xpl-progress-bar__header" }, this.label && h("div", { key: '9b673b4ae9aeebb7bebd9a72dc4384383e15227d', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (h("div", { key: 'a144dba46c7ae48ad54e9655b4335a253b1bc1bb', class: "xpl-progress-bar__icon" }, this.isError ? (h("xpl-icon", { icon: "circle-xmark-1" })) : (h("xpl-icon", { icon: "circle-check-1" })))))), h("div", { key: 'cf0f7a209c2278e4d1ccf00577457d175abb78bc', 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: 'ff5b336a3b3a14cb4e0531688705983350f9812f', class: "xpl-progress-bar__helper" }, this.helperText)))));
+            } }, h("div", { key: '5d8e7731bf5588c8549398dca087e7f39078eec0', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (h("div", { key: 'b36f70ed46b5a8dd46a9f8ea0b5188b90f33741e', class: "xpl-progress-bar__header" }, this.label && h("div", { key: '1fed869f23b4c449c56ff4b40d79fe315118de94', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (h("div", { key: '8ec535833016b380a133599311aa02f8a7765901', class: "xpl-progress-bar__icon" }, this.isError ? (h("xpl-icon", { icon: "circle-xmark-1" })) : (h("xpl-icon", { icon: "circle-check-1" })))))), h("div", { key: 'ea1e88ff71d2e10a71df1c6d63269b16b0c03129', 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: '71a2ceee37369f823b598f385dd895b807693aa1', class: "xpl-progress-bar__helper" }, this.helperText)))));
     }
     static get is() { return "xpl-progress-bar"; }
     static get properties() {

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

@@ -1,3 +1,5 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 export default {
     title: 'Components/Progress Indicator',
     component: 'xpl-progress-indicator',
@@ -8,7 +10,13 @@ export default {
         showNumbers: { control: { type: 'boolean' } },
         showLabels: { control: { type: 'boolean' } },
     },
-    tags: ['beta'],
+    tags: ['beta', 'vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
 };
 const defaultSteps = ['Details', 'Location', 'Instructor', 'Customers'];
 export const ProgressIndicator = ({ steps = defaultSteps, currentStep = 1, layout = 'horizontal', showNumbers = true, showLabels = true, }) => {

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: '1c545195c093b97f72d81801efc686eb98fec787', class: hostClasses, role: "group", "aria-label": ariaLabel }, h("div", { key: '754af5ed292fb0d34c61aec88ccb87f52e2076bf', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
+        return (h(Host, { key: 'bba19d0d09e3bf9ae1fa1e04824f84f4a74b3431', class: hostClasses, role: "group", "aria-label": ariaLabel }, h("div", { key: '529becbce8bfcc02ddf0f4de3c550bfef94ec7ba', 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() {