@xplortech/apollo-core 2.11.0 → 2.12.0

package/dist/cjs/xpl-top-nav.cjs.entry.js

@@ -0,0 +1,342 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+var lightDomSlots = require('./light-dom-slots-CS8Q9rRZ.js');
+var lifecycle = require('./lifecycle-DeSsFfQZ.js');
+
+const TOP_NAV_BRAND_LOGO_SLOT_REGIONS = [
+    '.xpl-top-nav__brand-logo-slot',
+    '.xpl-top-nav__brand-bar',
+];
+const TOP_NAV_USER_MENU_PANEL_REGION = '.xpl-top-nav__user-menu-panel';
+const TOP_NAV_USER_MENU_SLOT_REGIONS = [
+    TOP_NAV_USER_MENU_PANEL_REGION,
+    '.xpl-top-nav__user-menu-stash',
+];
+const TOP_NAV_USER_MENU_TRIGGER_SLOT_REGIONS = [
+    '.xpl-top-nav__user-popover',
+    '.xpl-top-nav__user-menu-stash',
+    '.xpl-top-nav__right-user',
+];
+const TOP_NAV_USER_MENU_TRIGGER_EXCLUDED_REGIONS = [TOP_NAV_USER_MENU_PANEL_REGION];
+const TopNav = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.brandClick = index.createEvent(this, "brandClick", 7);
+        this.navOpen = index.createEvent(this, "navOpen", 7);
+        this.slotProjectionDirty = false;
+        this.userPopoverDrawerSyncHost = null;
+        this.brandLogoSlotPresent = false;
+        this.open = false;
+        this.slotProjectionNonce = 0;
+        this.userMenuSlotPresent = false;
+        this.userMenuTriggerSlotPresent = false;
+        this.focusNavControlAfterClose = () => {
+            if (this.navControlFocusTimeoutId !== undefined) {
+                clearTimeout(this.navControlFocusTimeoutId);
+            }
+            this.navControlFocusTimeoutId = setTimeout(() => {
+                this.navControlFocusTimeoutId = undefined;
+                this.el.querySelector('.xpl-top-nav__nav-control')?.focus();
+            }, 0);
+        };
+        this.handleUserPopoverIsOpenChange = (e) => {
+            const { detail } = e;
+            if (detail === true) {
+                this.closeMobileDrawerWhenAccountMenuOpens();
+            }
+        };
+        this.onBrandNavItemClick = (e) => {
+            if (this.brandHref != null) {
+                return;
+            }
+            this.brandClick.emit(e.detail);
+        };
+        this.onDocKeyDownEscape = (e) => {
+            if (!this.navControl || !this.open || e.key !== 'Escape') {
+                return;
+            }
+            if (this.anyDescendantPopoverIsOpen()) {
+                return;
+            }
+            if (this.el.querySelector('xpl-top-nav-item.xpl-top-nav-item--dropdown-open')) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            this.open = false;
+            this.navOpen.emit(false);
+            this.focusNavControlAfterClose();
+        };
+        this.onDocClickOutsideDismiss = (e) => {
+            if (!this.navControl || !this.open) {
+                return;
+            }
+            const target = e.target;
+            if (target == null || this.anyDescendantPopoverIsOpen()) {
+                return;
+            }
+            if (this.el.querySelector('.xpl-top-nav__left-primary')?.contains(target)) {
+                return;
+            }
+            if (this.el.querySelector('.xpl-top-nav__nav-control')?.contains(target)) {
+                return;
+            }
+            this.open = false;
+            this.resetMobileCascade();
+            this.navOpen.emit(false);
+        };
+        this.onNavToggle = () => {
+            const wasOpen = this.open;
+            this.open = !this.open;
+            this.navOpen.emit(this.open);
+            if (wasOpen && !this.open) {
+                this.resetMobileCascade();
+                this.focusNavControlAfterClose();
+            }
+        };
+        this.onUserPopoverInnerOpenClassChange = () => {
+            const host = this.userPopoverDrawerSyncHost;
+            if (!host) {
+                return;
+            }
+            const inner = host.querySelector('.xpl-popover');
+            if (inner?.classList.contains('xpl-popover--is-open')) {
+                this.closeMobileDrawerWhenAccountMenuOpens();
+            }
+        };
+        this.syncBrandLogoSlot = () => {
+            const next = lightDomSlots.hasHostNamedSlot(this.el, 'brand-logo', {
+                hostTag: 'xpl-top-nav',
+                projectionRegionSelectors: TOP_NAV_BRAND_LOGO_SLOT_REGIONS,
+            });
+            if (next !== this.brandLogoSlotPresent) {
+                this.brandLogoSlotPresent = next;
+            }
+        };
+        this.syncUserMenuSlots = () => {
+            const panel = lightDomSlots.hasHostNamedSlot(this.el, 'user-menu', {
+                hostTag: 'xpl-top-nav',
+                projectionRegionSelectors: TOP_NAV_USER_MENU_SLOT_REGIONS,
+            });
+            const triggerSlot = lightDomSlots.hasHostNamedSlot(this.el, 'user-menu-trigger', {
+                hostTag: 'xpl-top-nav',
+                projectionRegionSelectors: TOP_NAV_USER_MENU_TRIGGER_SLOT_REGIONS,
+                excludedRegionSelectors: TOP_NAV_USER_MENU_TRIGGER_EXCLUDED_REGIONS,
+            });
+            if (panel !== this.userMenuSlotPresent) {
+                this.userMenuSlotPresent = panel;
+            }
+            if (triggerSlot !== this.userMenuTriggerSlotPresent) {
+                this.userMenuTriggerSlotPresent = triggerSlot;
+            }
+        };
+    }
+    onNavControlChanged() {
+        this.syncOpenFromNavControl();
+        this.syncDocDismissListeners();
+    }
+    connectedCallback() {
+        this.syncOpenFromNavControl();
+        this.syncDocDismissListeners();
+        this.syncBrandLogoSlot();
+        this.syncUserMenuSlots();
+        this.connectSlotContentObserver();
+        this.flushPendingSlotProjection();
+    }
+    disconnectedCallback() {
+        if (this.navControlFocusTimeoutId !== undefined) {
+            clearTimeout(this.navControlFocusTimeoutId);
+            this.navControlFocusTimeoutId = undefined;
+        }
+        if (this.deferredSlotContentObserverSyncTimeoutId !== undefined) {
+            clearTimeout(this.deferredSlotContentObserverSyncTimeoutId);
+            this.deferredSlotContentObserverSyncTimeoutId = undefined;
+        }
+        this.removeDocDismissListeners();
+        this.disconnectSlotContentObserver();
+        this.disconnectUserPopoverDrawerSync();
+    }
+    componentWillLoad() {
+        this.syncOpenFromNavControl();
+        this.syncBrandLogoSlot();
+        this.syncUserMenuSlots();
+    }
+    componentWillRender() {
+        this.disconnectSlotContentObserver();
+    }
+    componentDidRender() {
+        this.connectSlotContentObserver();
+        this.connectUserPopoverDrawerSync();
+    }
+    get childAccountLabelText() {
+        return this.childAccountLabel?.trim() ?? '';
+    }
+    get hasBrand() {
+        const name = this.brandName?.trim() ?? '';
+        const logo = this.brandLogo?.trim() ?? '';
+        return name.length > 0 || logo.length > 0 || this.brandLogoSlotPresent;
+    }
+    get hasUserMenu() {
+        return this.userMenuSlotPresent;
+    }
+    get needsUserMenuSlotStash() {
+        return !this.userMenuSlotPresent && this.userMenuTriggerSlotPresent;
+    }
+    get usesBuiltInChildAccountTrigger() {
+        return this.hasUserMenu && !this.userMenuTriggerSlotPresent;
+    }
+    anyDescendantPopoverIsOpen() {
+        const hosts = this.el.querySelectorAll('xpl-popover');
+        for (let i = 0; i < hosts.length; i += 1) {
+            const inner = hosts[i].querySelector('.xpl-popover');
+            if (inner?.classList.contains('xpl-popover--is-open')) {
+                return true;
+            }
+        }
+        return false;
+    }
+    closeMobileDrawerWhenAccountMenuOpens() {
+        if (!this.navControl || !this.open) {
+            return;
+        }
+        this.open = false;
+        this.navOpen.emit(false);
+    }
+    connectSlotContentObserver() {
+        this.disconnectSlotContentObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.slotContentObserver = new MutationObserver((mutations) => {
+            this.scheduleSlotContentSyncFromObserver(mutations);
+        });
+        this.slotContentObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    connectUserPopoverDrawerSync() {
+        const pop = this.hasUserMenu
+            ? this.el.querySelector('xpl-popover.xpl-top-nav__user-popover')
+            : null;
+        if (pop === this.userPopoverDrawerSyncHost) {
+            return;
+        }
+        this.disconnectUserPopoverDrawerSync();
+        if (!pop) {
+            return;
+        }
+        this.userPopoverDrawerSyncHost = pop;
+        pop.addEventListener('isOpenChange', this.handleUserPopoverIsOpenChange);
+        const inner = pop.querySelector('.xpl-popover');
+        if (inner && typeof MutationObserver !== 'undefined') {
+            this.userPopoverDrawerOpenObserver = new MutationObserver(() => {
+                this.onUserPopoverInnerOpenClassChange();
+            });
+            this.userPopoverDrawerOpenObserver.observe(inner, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+            this.onUserPopoverInnerOpenClassChange();
+        }
+    }
+    disconnectSlotContentObserver() {
+        this.slotContentObserver?.disconnect();
+        this.slotContentObserver = undefined;
+    }
+    disconnectUserPopoverDrawerSync() {
+        if (this.userPopoverDrawerSyncHost) {
+            this.userPopoverDrawerSyncHost.removeEventListener('isOpenChange', this.handleUserPopoverIsOpenChange);
+            this.userPopoverDrawerSyncHost = null;
+        }
+        this.userPopoverDrawerOpenObserver?.disconnect();
+        this.userPopoverDrawerOpenObserver = undefined;
+    }
+    removeDocDismissListeners() {
+        const doc = this.el.ownerDocument;
+        doc.removeEventListener('keydown', this.onDocKeyDownEscape, false);
+        doc.removeEventListener('click', this.onDocClickOutsideDismiss, true);
+    }
+    resetMobileCascade() {
+        const openItem = this.el.querySelector('.xpl-top-nav__left-primary > xpl-top-nav-item.xpl-top-nav-item--dropdown-open');
+        openItem?.closeMenu().catch(() => undefined);
+    }
+    scheduleSlotContentSyncFromObserver(mutations) {
+        if (this.mutationsAffectHostSlotting(mutations)) {
+            this.slotProjectionDirty = true;
+        }
+        if (this.deferredSlotContentObserverSyncTimeoutId !== undefined) {
+            clearTimeout(this.deferredSlotContentObserverSyncTimeoutId);
+        }
+        this.deferredSlotContentObserverSyncTimeoutId = setTimeout(() => {
+            this.deferredSlotContentObserverSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncBrandLogoSlot();
+            this.syncUserMenuSlots();
+            this.flushPendingSlotProjection();
+        }, 0);
+    }
+    flushPendingSlotProjection() {
+        if (this.slotProjectionDirty) {
+            this.slotProjectionDirty = false;
+            this.slotProjectionNonce += 1;
+        }
+    }
+    mutationsAffectHostSlotting(mutations) {
+        return mutations.some((m) => m.type === 'attributes' || (m.type === 'childList' && m.target === this.el));
+    }
+    syncDocDismissListeners() {
+        this.removeDocDismissListeners();
+        if (!lifecycle.isBrowser())
+            return;
+        if (this.navControl) {
+            const doc = this.el.ownerDocument;
+            doc.addEventListener('keydown', this.onDocKeyDownEscape, false);
+            doc.addEventListener('click', this.onDocClickOutsideDismiss, true);
+        }
+    }
+    syncOpenFromNavControl() {
+        const wasOpen = this.open;
+        this.open = false;
+        if (wasOpen && !this.navControl) {
+            this.resetMobileCascade();
+            this.navOpen.emit(false);
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '8f9f8e171b2b04706360048965e8e8a40f3f7013', class: {
+                'xpl-top-nav': true,
+                'xpl-top-nav--nav-control': Boolean(this.navControl),
+                'xpl-top-nav--open': this.open,
+                'xpl-top-nav--has-child-account-label': this.childAccountLabelText.length > 0,
+                'xpl-top-nav--has-brand': this.hasBrand,
+                'xpl-top-nav--has-user-menu': this.hasUserMenu,
+                dark: true,
+            } }, index.h("nav", { key: '2c05b69b2918753c4f928e53d92c6ca737a92b59', "aria-label": this.label ?? 'top-navigation-bar', class: "xpl-top-nav__bar" }, index.h("div", { key: '1dd5722748946d0adfad6cc40da03c21012d65b2', class: "xpl-top-nav__inner-left" }, this.navControl && (index.h("button", { key: '810e68f589ec13b942a78c877fea816407c05287', type: "button", class: "xpl-top-nav__nav-control", "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onNavToggle }, index.h("xpl-icon", { key: '550653cbd1d61c7b80a31ab48dce59936a107128', class: "xpl-top-nav__control-icon", icon: "menu", size: 32 }))), this.hasBrand && (index.h("div", { key: '6509a9a42b693b925204a9a42a34c0071d73f485', class: "xpl-top-nav__brand-bar" }, index.h("xpl-top-nav-item", { key: '623cfb95bd0a6581a057ddf37aa3920ee58b5734', class: "xpl-top-nav__brand", href: this.brandHref, onNavItemClick: this.onBrandNavItemClick }, this.brandLogo?.trim() ? (index.h("img", { class: "xpl-top-nav__brand-logo", src: this.brandLogo, alt: this.brandName?.trim()
+                ? this.brandName.trim()
+                : 'Brand' })) : this.brandLogoSlotPresent ? (index.h("span", { class: "xpl-top-nav__brand-logo-slot" }, index.h("slot", { name: "brand-logo" }))) : null, this.brandName?.trim() ? (index.h("span", { class: "xpl-top-nav__brand-name" }, this.brandName.trim())) : null))), index.h("div", { key: '61d8a6d485380c39ffa74cd8cfbea37df32060dd', class: {
+                'xpl-top-nav__aside': true,
+                'xpl-nav-left': true,
+            } }, index.h("div", { key: '3aab27091f543a9c6a813043883c218791cfaa4a', class: "xpl-top-nav__left-primary", role: "list" }, index.h("slot", { key: '93ff48c9bb3e0fa00b23a707da84d222ad74224d', name: "left-aside" })))), index.h("div", { key: 'd92afdae9ac68d49a370fb41b39aeef2b956af1f', class: {
+                'xpl-top-nav__aside': true,
+                'xpl-nav-right': true,
+            } }, index.h("div", { key: '36fadad47ed2862f88c1f42e1b95530d2e06b046', class: "xpl-nav-right__list" }, index.h("div", { key: '5b35413cbfcc5fd9af1e491f1a1f14d41ae35c0d', class: "xpl-top-nav__right-rail" }, index.h("div", { key: '37d00bfe95cdf35345ed9ec273a159255efc31a2', class: "xpl-top-nav__right-lead" }, index.h("slot", { key: 'b64f92c5886ef929b51fde06d48ea1fbf3660d44', name: "right-aside" })), this.hasUserMenu ? (index.h("div", { class: "xpl-top-nav__right-user" }, index.h("xpl-popover", { class: "xpl-top-nav__user-popover dark", position: "bottom-end", display: "menu" }, this.userMenuTriggerSlotPresent ? (index.h("slot", { name: "user-menu-trigger", slot: "trigger" })) : this.usesBuiltInChildAccountTrigger ? (index.h("xpl-button", { slot: "trigger", class: "xpl-top-nav__child-account-trigger", type: "button", variant: "tertiary", icon: "chevron-down", iconPosition: "end", iconOnly: this.childAccountLabelText.length === 0, "aria-haspopup": "dialog", "aria-label": this.childAccountLabelText.length > 0
+                ? undefined
+                : 'Open account menu' }, this.childAccountLabelText.length > 0
+            ? this.childAccountLabelText
+            : null)) : null, index.h("div", { class: "xpl-top-nav__user-menu-panel" }, index.h("slot", { name: "user-menu" }))))) : null, this.needsUserMenuSlotStash ? (index.h("div", { class: "xpl-top-nav__user-menu-stash", hidden: true, "aria-hidden": "true" }, index.h("slot", { name: "user-menu-trigger" }), index.h("slot", { name: "user-menu" }))) : null))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "navControl": [{
+                "onNavControlChanged": 0
+            }]
+    }; }
+};
+
+exports.xpl_top_nav = TopNav;

package/dist/cjs/xpl-utility-bar.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const UtilityBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.navOpen = index.createEvent(this, "navOpen", 7);
+        this.open = true;
+    }
+    onNavToggle() {
+        this.open = !this.open;
+        this.navOpen.emit(this.open);
+    }
+    componentWillLoad() {
+        this.open = this.isNavOpenAtStartup !== undefined ? this.isNavOpenAtStartup : this.open;
+    }
+    render() {
+        return (index.h(index.Host, { key: '7ad1182d72a730df69cf714b665a6d02eac2e51a' }, index.h("nav", { key: 'f0d5ffc31cabc8a075cae2c1ebdaa0e82ca53943', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (index.h("div", null, index.h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, index.h("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), index.h("slot", { name: "aside" }))) : (index.h("slot", { name: "aside" })), index.h("slot", { key: 'dfbacf5921308bd6056b8e6d903b31df28613ce0', name: "main" }))));
+    }
+};
+
+exports.xpl_utility_bar = UtilityBar;

package/dist/collection/collection-manifest.json

@@ -17,10 +17,10 @@
     "components/xpl-dashboard/xpl-dashboard.js",
     "components/xpl-data-card/xpl-data-card.js",
     "components/xpl-divider/xpl-divider.js",
+    "components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js",
     "components/xpl-dropdown/xpl-dropdown.js",
     "components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.js",
     "components/xpl-dropdown/xpl-dropdown-heading/xpl-dropdown-heading.js",
-    "components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js",
     "components/xpl-dynamic-table/xpl-dynamic-table.js",
     "components/xpl-dynamic-table-cell/xpl-dynamic-table-cell.js",
     "components/xpl-dynamic-table-row/xpl-dynamic-table-row.js",
@@ -50,7 +50,9 @@
     "components/xpl-secondary-nav/xpl-secondary-nav.js",
     "components/xpl-select/xpl-select.js",
     "components/xpl-side-nav/xpl-side-nav.js",
+    "components/xpl-side-nav/xpl-side-nav-header-item/xpl-side-nav-header-item.js",
     "components/xpl-side-nav/xpl-side-nav-item/xpl-side-nav-item.js",
+    "components/xpl-side-nav/xpl-side-nav-section/xpl-side-nav-section.js",
     "components/xpl-skeleton/xpl-skeleton.js",
     "components/xpl-slideout/xpl-slideout.js",
     "components/xpl-spotlight/xpl-spotlight.js",

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

@@ -1,6 +1,11 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
 export default {
     title: 'Components/Accordion',
     component: 'xpl-accordion',
+    tags: ['beta', 'vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
     argTypes: {
         header: { type: { name: 'string', required: true } },
         description: { type: { name: 'string' } },
@@ -18,7 +23,6 @@ export default {
         },
         initialExpanded: { type: { name: 'boolean' } },
     },
-    tags: ['beta'],
 };
 export const Accordion = ({ header, description, borderType, size, initialExpanded, }) => `
     <xpl-accordion
@@ -75,6 +79,6 @@ Accordion.parameters = {
     },
     design: {
         type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=1536-178167&p=f&t=hw4aTujDaAQUUbDN-11',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=19938-18383',
     },
 };

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

@@ -46,17 +46,19 @@ export class Accordion {
     }
     render() {
         const accordionBorder = {
+            '': '',
             none: '',
             bordered: `xpl-accordion--border-bordered${this.expanded ? '--expanded' : ''}`,
             bottom: `xpl-accordion--border-bottom${this.expanded ? '--expanded' : ''}`,
         }[this.borderType];
-        return (h(Host, { key: 'bae6a1bb97a21f3f49792be58fc72941ce5d8bed', class: `xpl-accordion ${accordionBorder}` }, h("button", { key: '255fc29fec4cdcc45f8e02daef062f35c5b8b74b', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "xpl-accordion-toggle-area", onClick: this.toggleAccordion, type: "button" }, h("header", { key: '0e5454de19424b6412b01c50227bc001e6ab5b3a', class: `xpl-accordion-header xpl-accordion-header--size-${this.size}` }, h("slot", { key: '438e8876c6c1c1b04282ce4d978284e3d6f7fa9a', name: "heading" }, this.header), h("xpl-icon", { key: '055818cbd1606ad560e4fa172c3d1130a6831f5f', size: 16, icon: "chevron-down", class: `xpl-accordion-icon-chevron ${this.expanded ? 'xpl-accordion-icon-chevron--rotate' : ''}` })), h("div", { key: '45f9ec5e1b6b4f6d21f7b126972543849353747c', class: "xpl-accordion-description" }, h("slot", { key: 'af85f48df4ddf572f5bef6da49c852152f44cc06', name: "description" }, this.description))), h("section", { key: 'fc2c6d12354cb6e972cf82ae988e647ea0a0dc26', id: this.contentId, role: "region", class: `xpl-accordion-content xpl-accordion-content--${!this.expanded ? 'hidden' : 'shown'} ${this.expanded
+        return (h(Host, { key: '4858640c2723a41baa28d11ac997078bd114e7d0', class: `xpl-accordion ${accordionBorder}` }, h("button", { key: '39a36d5436dfb022fea1237688689fece8a6959e', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "xpl-accordion-toggle-area", onClick: this.toggleAccordion, type: "button" }, h("header", { key: 'e8d98c3a0ab82986c5799a2855c4cdd979623021', class: `xpl-accordion-header xpl-accordion-header--size-${this.size}` }, h("slot", { key: '67d8c71ca1f9d5a2ffefa31933b2cfe6c6485633', name: "heading" }, this.header), h("xpl-icon", { key: '24d60d980af954ceda5511d634d0511f303f98d7', size: 16, icon: "chevron-down", class: `xpl-accordion-icon-chevron ${this.expanded ? 'xpl-accordion-icon-chevron--rotate' : ''}` })), h("div", { key: 'f8365a7b53724a3ed006d3957f52a61d5ca0d03f', class: "xpl-accordion-description" }, h("slot", { key: 'b3c0414e246d32ccc0925e36ba16a70edb529c42', name: "description" }, this.description))), h("section", { key: '40f5b9a980e73eb39f3db4d6d1bb4c11f9975790', id: this.contentId, role: "region", class: `xpl-accordion-content xpl-accordion-content--${!this.expanded ? 'hidden' : 'shown'} ${this.expanded
                 ? {
+                    '': '',
                     none: '',
                     bordered: 'xpl-accordion-content--shown-bordered',
                     bottom: 'xpl-accordion-content--shown-border-bottom',
                 }[this.borderType]
-                : ''}` }, h("slot", { key: '9fe9c25e6180a84cd73fec1a69984455417dc225', name: "content" }))));
+                : ''}` }, h("slot", { key: '87f1bb742663bff5284417a075768ee616dc8ade', name: "content" }))));
     }
     static get is() { return "xpl-accordion"; }
     static get properties() {

package/dist/collection/components/xpl-application-shell/application-shell.stories.js

@@ -1,5 +1,23 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 export default {
     title: 'Components/Application Shell',
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement, args }) {
+        await waitForHydration(canvasElement);
+        if (!args.isNavOpenAtStartup) {
+            return;
+        }
+        const shell = canvasElement.querySelector('xpl-application-shell');
+        const nav = shell?.querySelector('.xpl-application-shell__nav');
+        if (shell && nav && !nav.className.includes('--open')) {
+            shell.dispatchEvent(new CustomEvent('navOpen', { bubbles: true }));
+            await waitForHydration(canvasElement);
+        }
+    },
     argTypes: {
         navWidth: {
             options: ['default', 'sm', 'md'],
@@ -481,7 +499,7 @@ ApplicationShell.parameters = {
                     <p slot="brand-name">Apollo Components</p>
                     <div slot="navigation">
                         <xpl-nav-item>
-                            <a slot="link" href="./dev/choicelist/index.html">
+                            <a slot="link" href="#">
                                 <svg
                                     slot="icon"
                                     viewBox="0 0 16 16"

package/dist/collection/components/xpl-application-shell/xpl-application-shell.js

@@ -35,7 +35,7 @@ export class ApplicationShell {
         navClasses += this.navOpen
             ? ` xpl-application-shell__nav--${this.navWidth}--open`
             : ` xpl-application-shell__nav--${this.navWidth}`;
-        return (h(Host, { key: '1e7abbb1e45ea9cadfa9528ae2053f8239e69242', class: applicationShellClasses }, h("div", { key: '5fa3455f3de406db9bf392ae14a515f7fe603d59', class: navClasses }, h("slot", { key: 'b9ee294553892cc2235f9b2b4c3503d293d56ddc', name: "nav" })), h("div", { key: 'dc6ad7c9288385a47e1d6992bef56ceafcd04603', class: "xpl-application-shell__subnav" }, h("slot", { key: 'b31965275416b556194f4f65e4b66bf72f531779', name: "subnav" })), h("div", { key: '664d58b3ce69d7106ead13fe1a6a7a72cec0cceb', class: "xpl-application-shell__utility" }, h("slot", { key: 'd44f3614b627099443c70f23f258016a66d42716', name: "utility" })), h("div", { key: '0f8c629b737114fe40ae3bf3d2fbe3d18e3af0b9', class: "xpl-application-shell__content" }, h("slot", { key: '814afd80ea91d4b2859e3619e499791f728eb22b', name: "content" })), h("xpl-backdrop", { key: '490bf22787f1920f500f75eabf6a692e545d0ea3', onClick: () => this.navToggleHandler(), class: {
+        return (h(Host, { key: '6895a304b435811647b6a0f44f0d2a78d0be43c6', class: applicationShellClasses }, h("div", { key: '5767a122d4f62d9192c7d842634d568f773780fb', class: navClasses }, h("slot", { key: '00b964ddb21516528324510ab7b45769c6a988f0', name: "nav" })), h("div", { key: '55cf42980ad46b4e488e187396da6beb7e6d1233', class: "xpl-application-shell__subnav" }, h("slot", { key: '638dfdfa480756bc8e45f3673a909cac7a4a3def', name: "subnav" })), h("div", { key: 'b07703d98a000c9fb184b672dd04227640469dea', class: "xpl-application-shell__utility" }, h("slot", { key: '224779534adf2572ef39c01ee2e1eb5387da86c2', name: "utility" })), h("div", { key: 'c263b693266d46a486c29135df4b594ab1db119b', class: "xpl-application-shell__content" }, h("slot", { key: 'cd349b0208eb182a20dc423c134cf0f15926effa', name: "content" })), h("xpl-backdrop", { key: '2fe03e892cf9120857eae124994cfb924397da62', onClick: () => this.navToggleHandler(), class: {
                 'xpl-application-shell__backdrop--open': this.navOpen,
             }, relative: true })));
     }

package/dist/collection/components/xpl-avatar/avatar.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/Avatar',
 };
 const defaultGroupData = [
@@ -9,16 +18,14 @@ const defaultGroupData = [
     { src: 'https://placebear.com/128/128', name: 'E' },
 ];
 function statusToBadgeVariant(s) {
-    var _a;
     const map = {
         active: 'green',
         inactive: 'gray',
         warning: 'red',
     };
-    return (_a = map[s]) !== null && _a !== void 0 ? _a : s;
+    return map[s] ?? s;
 }
 function buildAttrs(args) {
-    var _a;
     const attrs = [];
     if (args.variant && args.variant !== 'default') {
         attrs.push(`variant="${args.variant}"`);
@@ -30,7 +37,7 @@ function buildAttrs(args) {
         attrs.push(`color="${args.color}"`);
     }
     if (args.variant === 'group') {
-        const data = JSON.stringify((_a = args.groupData) !== null && _a !== void 0 ? _a : defaultGroupData);
+        const data = JSON.stringify(args.groupData ?? defaultGroupData);
         attrs.push(`group-data='${data.replace(/'/g, ''')}'`);
     }
     else {
@@ -110,22 +117,24 @@ const commonParameters = {
         url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=6-1394',
     },
 };
-Avatar.parameters = Object.assign(Object.assign({}, commonParameters), { 'web-component': {
+Avatar.parameters = {
+    ...commonParameters,
+    'web-component': {
         render: Avatar(Avatar.args),
-    }, html: {
+    },
+    html: {
         render: ((args) => {
             const hasImage = !!args.src;
             const name = args.name || 'Profile';
             const placeholder = !hasImage
                 ? args.name
                     ? (() => {
-                        var _a, _b, _c;
                         const p = args.name.trim().split(/\s+/).filter(Boolean);
                         if (p.length === 0)
                             return '';
                         if (p.length === 1)
                             return p[0].slice(0, 3).toUpperCase();
-                        return `${(_a = p[0][0]) !== null && _a !== void 0 ? _a : ''}${p.length > 2 ? ((_b = p[1][0]) !== null && _b !== void 0 ? _b : '') : ''}${(_c = p[p.length - 1][0]) !== null && _c !== void 0 ? _c : ''}`
+                        return `${p[0][0] ?? ''}${p.length > 2 ? (p[1][0] ?? '') : ''}${p[p.length - 1][0] ?? ''}`
                             .slice(0, 3)
                             .toUpperCase();
                     })()
@@ -144,4 +153,5 @@ Avatar.parameters = Object.assign(Object.assign({}, commonParameters), { 'web-co
             </div>
             `;
         })(Avatar.args),
-    } });
+    },
+};