@xplortech/apollo-core 2.11.0 → 2.12.0

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

@@ -5,12 +5,12 @@ export class Skeleton {
         this.size = 'custom';
     }
     render() {
-        return (h(Host, { key: '6d2a1a9164bb1568663b944f3f4ea66517256528', class: {
+        return (h(Host, { key: 'd5f7861a88adeaa570b9101e0b0ffc89d22c6fe1', class: {
                 'xpl-skeleton': true,
                 [`xpl-skeleton--shape-${this.shape}`]: true,
                 [`xpl-skeleton--size-${this.size}`]: true,
-                [this.classNames]: !!this.classNames,
-                'xpl-skeleton--full-width': this.fullWidth,
+                [this.classNames ?? '']: !!this.classNames,
+                'xpl-skeleton--full-width': !!this.fullWidth,
             }, style: {
                 width: this.width || undefined,
                 height: this.height || undefined,

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

@@ -1,6 +1,19 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForComponentsRender } from "../../../../src/utils/story-vrt";
 export default {
     title: 'Components/Slideout',
     component: 'xpl-slideout',
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({
+            enable: true,
+            failureThreshold: 2,
+            failureThresholdType: 'percent',
+        });
+    },
+    play: async ({ canvasElement }) => {
+        await waitForComponentsRender(canvasElement);
+    },
     argTypes: {
         isOpen: {
             control: 'boolean',

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

@@ -15,6 +15,9 @@ export class Slideout {
     }
     handleScroll() {
         const content = this.el.querySelector('.content');
+        if (!content) {
+            return;
+        }
         if (content.scrollHeight > content.clientHeight) {
             content.classList.add('has-shadow');
         }
@@ -26,7 +29,7 @@ export class Slideout {
         this.handleScroll();
     }
     render() {
-        return (h(Host, { key: '2784d3da5b726f04552fa93289f34ff0347d3e70', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: 'b8978c6811b9d1c175bfaee2296fbcb433c048d4', onClick: this.handleClose })), h("aside", { key: '0e4357253aa004531aa86fc2f93fb1332cec089b', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: '132170bf2c8ff6c23e6bc85bce4dc8a2aec0c5d5', class: "header" }, h("div", { key: 'a38f7f2a2da8c622a9d2ef53c370560761b87b51', class: "title" }, h("slot", { key: 'ba7b485b02bd472a4f64e067cabf5cf6ae0ad1b0', name: "title" }), h("xpl-button", { key: '9538bc33599840f7756e747c63d9717cf14a0c58', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: '6d6846794afea4053736bc67b3c0c90fb822ca96', icon: "x" }))), h("div", { key: 'da9630c9cdc8d9c3e57242c58993f5815052e684', class: "subtitle" }, h("slot", { key: 'c923c0cdae7e6f09713592e31216ec10accce39f', name: "subtitle" })), h("div", { key: 'c9fc409c7e2c14987b4df6be17d7d2c9a5906100', class: "search" }, h("slot", { key: 'b963bc05b745e55bbdc27cc4bb224af97feccdda', name: "search" }))), h("xpl-divider", { key: 'e5f9201e96ac5d6b202e3e88edfa07dacfbb3786', tier: 0, class: "divider top" }), h("article", { key: '41b424ea94bdc2577b56166f45de2b1addc3a8b4', class: "content", tabIndex: 0 }, h("slot", { key: '5d316d1981d44536af9cc5d67ef7fd20f6375ec8', name: "content" })), this.showFooter && (h("footer", { key: '3d9c2b22153b6a9057d3c40b98af97d345b9e9c1' }, h("xpl-divider", { key: '77e87834d203624cc03ff2b0cf894300c2749094', tier: 0, class: "divider bottom" }), h("div", { key: '44737714daf25a087ad2c0d8938f94ec4668b071', class: "footer" }, h("slot", { key: '2c0c7b62872fa826ef117a730c92369ba7e340f1', name: "tertiary" }), h("slot", { key: '31ac0e95189487b668b3e5c0bd8d414ab7d73f30', name: "secondary" }), h("slot", { key: 'a0dd4999caac29b546cd0526e652596937dff83b', name: "primary" })))))));
+        return (h(Host, { key: '9f0e122ce05688523e4bc55fbeafb584b0bacaf9', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: '62f708a14d6e45b9bed40b0d2587186543463a25', onClick: this.handleClose })), h("aside", { key: 'cb9499d3295d6cc29f2e007d12fcd80eee2bc794', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: 'ca191a1c3387e69d4cff95d112d1bf834693316f', class: "header" }, h("div", { key: '252035d87faac31b3706a2abd4cae0fbddaaa3e8', class: "title" }, h("slot", { key: 'a5961cfd192bb02aec2ab6a522bf656487f4083e', name: "title" }), h("xpl-button", { key: 'd58b03a81b394dc6b91f86f9db5c756929796df7', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: '4ebb45aa90f5017f0651c190909eb4759a02dfaa', icon: "xmark" }))), h("div", { key: 'f67edca86dfc31bb2d69ce00f409610f5010d9a8', class: "subtitle" }, h("slot", { key: '390190ad442a301937d9733632fd9fd15416fe6a', name: "subtitle" })), h("div", { key: '8a50eae2c57ac9c1f15643758e75f821feb9c9e5', class: "search" }, h("slot", { key: '96ae8ec7a5a630d0e51510cf64c7888241bcfd9a', name: "search" }))), h("xpl-divider", { key: '467308913b114d26438b0eea2ed64642d26286c5', tier: 0, class: "divider top" }), h("article", { key: 'b0377d229795fc7371665df458765037da1178ad', class: "content", tabIndex: 0 }, h("slot", { key: 'bf4c5ee2de34e50b605465ad9f253e54be803d6d', name: "content" })), this.showFooter && (h("footer", { key: 'edf941b295e97010fd22b7077ed15f5ca409fe5d' }, h("xpl-divider", { key: '57d7514ae797fc4e309fcc3966abfea992f6aecb', tier: 0, class: "divider bottom" }), h("div", { key: 'df72450ab64fcc163edbbf5514c88b4e17496e51', class: "footer" }, h("slot", { key: '2cbb005039f013fdcf76304c470a5dbdfca58d19', name: "tertiary" }), h("slot", { key: '97270ca76edd0d27970f6358b78e834b8140a715', name: "secondary" }), h("slot", { key: 'c742e527e1ff5878f6d0fcfeb23b2c32c409e260', name: "primary" })))))));
     }
     static get is() { return "xpl-slideout"; }
     static get properties() {

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

@@ -1,12 +1,13 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 const escapeHtmlAttribute = (value) => value
     .replace(/&/g, '&')
     .replace(/"/g, '"')
     .replace(/'/g, ''')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;');
-const optionalAttr = (name, value) => (value === null || value === void 0 ? void 0 : value.trim()) ? ` ${name}="${escapeHtmlAttribute(value)}"` : '';
+const optionalAttr = (name, value) => value?.trim() ? ` ${name}="${escapeHtmlAttribute(value)}"` : '';
 const renderWebComponent = (args) => {
-    var _a, _b, _c;
     const attrs = [
         args.actionLayout ? `action-layout="${args.actionLayout}"` : '',
         args.anchorPosition ? `anchor-position="${args.anchorPosition}"` : '',
@@ -23,9 +24,9 @@ const renderWebComponent = (args) => {
         args.showImage != null ? `show-image="${args.showImage}"` : '',
         args.showSteps != null ? `show-steps="${args.showSteps}"` : '',
         args.totalSteps != null ? `total-steps="${args.totalSteps}"` : '',
-        ((_a = args.heading) === null || _a === void 0 ? void 0 : _a.trim()) ? `heading="${escapeHtmlAttribute(args.heading)}"` : '',
-        ((_b = args.body) === null || _b === void 0 ? void 0 : _b.trim()) ? `body="${escapeHtmlAttribute(args.body)}"` : '',
-        ((_c = args.target) === null || _c === void 0 ? void 0 : _c.trim()) ? `target="${escapeHtmlAttribute(args.target)}"` : '',
+        args.heading?.trim() ? `heading="${escapeHtmlAttribute(args.heading)}"` : '',
+        args.body?.trim() ? `body="${escapeHtmlAttribute(args.body)}"` : '',
+        args.target?.trim() ? `target="${escapeHtmlAttribute(args.target)}"` : '',
     ]
         .filter(Boolean)
         .join('\n    ');
@@ -34,16 +35,15 @@ const renderWebComponent = (args) => {
 ></xpl-spotlight>`;
 };
 const renderHtml = (args) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const anchorPos = (_a = args.anchorPosition) !== null && _a !== void 0 ? _a : 'top-left';
-    const actionLayout = (_b = args.actionLayout) !== null && _b !== void 0 ? _b : 'default';
+    const anchorPos = args.anchorPosition ?? 'top-left';
+    const actionLayout = args.actionLayout ?? 'default';
     const showImage = args.showImage !== false;
     const showActions = args.showActions !== false;
     const showSteps = args.showSteps !== false;
     const isDismissible = args.isDismissible !== false;
     const isSingle = actionLayout === 'single';
-    const currentStep = (_c = args.currentStep) !== null && _c !== void 0 ? _c : 1;
-    const totalSteps = (_d = args.totalSteps) !== null && _d !== void 0 ? _d : 1;
+    const currentStep = args.currentStep ?? 1;
+    const totalSteps = args.totalSteps ?? 1;
     const dismissHtml = isDismissible
         ? `
   <div class="xpl-spotlight__dismiss">
@@ -61,18 +61,18 @@ const renderHtml = (args) => {
       </div>
     </div>`
         : '';
-    const headingHtml = ((_e = args.heading) === null || _e === void 0 ? void 0 : _e.trim())
+    const headingHtml = args.heading?.trim()
         ? `
         <span class="xpl-spotlight__title">${escapeHtmlAttribute(args.heading)}</span>`
         : '';
-    const bodyHtml = ((_f = args.body) === null || _f === void 0 ? void 0 : _f.trim())
+    const bodyHtml = args.body?.trim()
         ? `
         <p class="xpl-spotlight__body">${escapeHtmlAttribute(args.body)}</p>`
         : '';
     const secondaryBtn = !isSingle
         ? `
           <button type="button" class="xpl-button xpl-button--secondary xpl-button--default">
-            ${escapeHtmlAttribute((_g = args.secondaryActionLabel) !== null && _g !== void 0 ? _g : 'Back')}
+            ${escapeHtmlAttribute(args.secondaryActionLabel ?? 'Back')}
           </button>`
         : '';
     const stepLabel = showSteps && !isSingle
@@ -81,7 +81,7 @@ const renderHtml = (args) => {
         : '';
     const primaryBtn = `
           <button type="button" class="xpl-button xpl-button--primary xpl-button--default">
-            ${escapeHtmlAttribute((_h = args.primaryActionLabel) !== null && _h !== void 0 ? _h : 'Next')}
+            ${escapeHtmlAttribute(args.primaryActionLabel ?? 'Next')}
           </button>`;
     const actionsHtml = showActions
         ? `
@@ -92,7 +92,7 @@ const renderHtml = (args) => {
         </div>
       </div>`
         : '';
-    const ariaLabel = ((_j = args.heading) === null || _j === void 0 ? void 0 : _j.trim()) ? '' : ' aria-label="Tour step"';
+    const ariaLabel = args.heading?.trim() ? '' : ' aria-label="Tour step"';
     return `<div class="xpl-spotlight xpl-spotlight--${anchorPos}${showActions ? ` xpl-spotlight--action-layout-${actionLayout}` : ''}${!showImage ? ' xpl-spotlight--no-image' : ''} xpl-spotlight--visible"
      role="dialog" aria-modal="false"${ariaLabel} tabindex="-1">${dismissHtml}
   <button type="button" class="xpl-spotlight__target" aria-label="Spotlight indicator">
@@ -208,6 +208,13 @@ Spotlight.args = {
     target: '',
     totalSteps: 5,
 };
+Spotlight.tags = ['vrt'];
+Spotlight.beforeEach = () => {
+    setAutoSnapshotOptions({ enable: true });
+};
+Spotlight.play = async ({ canvasElement }) => {
+    await waitForHydration(canvasElement);
+};
 Spotlight.parameters = {
     layout: 'padded',
     docs: {

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

@@ -1,12 +1,12 @@
 import { Host, forceUpdate, h, } from "@stencil/core";
+import { isBrowser } from "../../utils/lifecycle";
 import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 const SPOTLIGHT_FOCUS_BUTTON_SELECTOR = '.xpl-spotlight__dismiss button, .xpl-spotlight__actions button';
 const SPOTLIGHT_FOCUS_FALLBACK_MAX_TICKS = 120;
 const SPOTLIGHT_FOCUS_OBSERVER_MAX_MS = 2500;
 function waitForSpotlightFocusButtonWithoutMutationObserver(root, options) {
     return new Promise((resolve) => {
-        var _a, _b;
-        if ((_a = options === null || options === void 0 ? void 0 : options.signal) === null || _a === void 0 ? void 0 : _a.aborted) {
+        if (options?.signal?.aborted) {
             resolve(null);
             return;
         }
@@ -23,7 +23,7 @@ function waitForSpotlightFocusButtonWithoutMutationObserver(root, options) {
             resolve(value);
         };
         const onAbort = () => finish(null);
-        (_b = options === null || options === void 0 ? void 0 : options.signal) === null || _b === void 0 ? void 0 : _b.addEventListener('abort', onAbort, { once: true });
+        options?.signal?.addEventListener('abort', onAbort, { once: true });
         const schedule = (fn) => {
             if (typeof requestAnimationFrame !== 'undefined') {
                 rafId = requestAnimationFrame(() => {
@@ -39,20 +39,19 @@ function waitForSpotlightFocusButtonWithoutMutationObserver(root, options) {
             }
         };
         const tick = () => {
-            var _a, _b, _c;
-            if ((_a = options === null || options === void 0 ? void 0 : options.signal) === null || _a === void 0 ? void 0 : _a.aborted) {
+            if (options?.signal?.aborted) {
                 finish(null);
                 return;
             }
             const el = root.querySelector(SPOTLIGHT_FOCUS_BUTTON_SELECTOR);
             if (el) {
-                (_b = options === null || options === void 0 ? void 0 : options.signal) === null || _b === void 0 ? void 0 : _b.removeEventListener('abort', onAbort);
+                options?.signal?.removeEventListener('abort', onAbort);
                 finish(el);
                 return;
             }
             ticks += 1;
             if (ticks >= SPOTLIGHT_FOCUS_FALLBACK_MAX_TICKS) {
-                (_c = options === null || options === void 0 ? void 0 : options.signal) === null || _c === void 0 ? void 0 : _c.removeEventListener('abort', onAbort);
+                options?.signal?.removeEventListener('abort', onAbort);
                 finish(null);
                 return;
             }
@@ -62,19 +61,17 @@ function waitForSpotlightFocusButtonWithoutMutationObserver(root, options) {
     });
 }
 function waitForSpotlightFocusButton(root, options) {
-    var _a;
     const existing = root.querySelector(SPOTLIGHT_FOCUS_BUTTON_SELECTOR);
     if (existing) {
         return Promise.resolve(existing);
     }
-    if ((_a = options === null || options === void 0 ? void 0 : options.signal) === null || _a === void 0 ? void 0 : _a.aborted) {
+    if (options?.signal?.aborted) {
         return Promise.resolve(null);
     }
     if (typeof MutationObserver === 'undefined') {
         return waitForSpotlightFocusButtonWithoutMutationObserver(root, options);
     }
     return new Promise((resolve) => {
-        var _a;
         let settled = false;
         let timeoutId;
         let observer;
@@ -100,7 +97,7 @@ function waitForSpotlightFocusButton(root, options) {
             subtree: true,
         });
         timeoutId = setTimeout(() => finish(null), SPOTLIGHT_FOCUS_OBSERVER_MAX_MS);
-        (_a = options === null || options === void 0 ? void 0 : options.signal) === null || _a === void 0 ? void 0 : _a.addEventListener('abort', () => {
+        options?.signal?.addEventListener('abort', () => {
             finish(null);
         }, { once: true });
     });
@@ -202,7 +199,9 @@ export class Spotlight {
             this.syncTitleSlotIds();
         };
         this.updatePosition = async (referenceEl) => {
-            var _a, _b, _c, _d, _e, _f;
+            if (!isBrowser()) {
+                return;
+            }
             const generation = this.positioningGeneration;
             try {
                 const initialPlacement = ANCHOR_TO_PLACEMENT[this.anchorPosition];
@@ -220,18 +219,19 @@ export class Spotlight {
                 }
                 this.el.style.left = `${x}px`;
                 this.el.style.top = `${y}px`;
-                const shiftX = (_b = (_a = middlewareData.shift) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
-                const shiftY = (_d = (_c = middlewareData.shift) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0;
+                const shiftX = middlewareData.shift?.x ?? 0;
+                const shiftY = middlewareData.shift?.y ?? 0;
                 this.el.style.setProperty('--xpl-spotlight-shift-x', `${-shiftX}px`);
                 this.el.style.setProperty('--xpl-spotlight-shift-y', `${-shiftY}px`);
                 this.hasFloatingPosition = true;
-                const corner = (_e = PLACEMENT_TO_CORNER[placement]) !== null && _e !== void 0 ? _e : PLACEMENT_TO_CORNER[(_f = placement.split('-')[0]) !== null && _f !== void 0 ? _f : ''];
-                this.resolvedAnchorPosition = corner !== null && corner !== void 0 ? corner : this.anchorPosition;
+                const corner = PLACEMENT_TO_CORNER[placement] ??
+                    PLACEMENT_TO_CORNER[placement.split('-')[0] ?? ''];
+                this.resolvedAnchorPosition = corner ?? this.anchorPosition;
                 if (this.pendingEnterTransitionAfterAnchor) {
                     this.scheduleEnterTransition();
                 }
             }
-            catch (_g) {
+            catch {
                 if (generation !== this.positioningGeneration) {
                     return;
                 }
@@ -256,8 +256,7 @@ export class Spotlight {
     }
     onIsOpenChange(isOpen) {
         if (Spotlight.coerceBoolean(isOpen)) {
-            this.previousFocus =
-                document.activeElement instanceof HTMLElement ? document.activeElement : null;
+            this.capturePreviousFocus();
             this.shouldMoveFocusOnRender = true;
             this.isVisible = false;
             this.refreshBodySlotState();
@@ -305,8 +304,7 @@ export class Spotlight {
             this.isVisible = false;
             return;
         }
-        this.previousFocus =
-            document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        this.capturePreviousFocus();
         this.shouldMoveFocusOnRender = true;
         this.scheduleEnterTransition();
         if (this.pendingEnterVisible) {
@@ -328,12 +326,8 @@ export class Spotlight {
         this.hasImageSlotContent = this.hasSlottedContent('image');
         this.hasTitleSlotContent = this.hasSlottedContent('title');
         this.dialogLabelId = this.getDialogLabelId();
-        if (this.isOpenEnabled) {
-            this.previousFocus =
-                document.activeElement instanceof HTMLElement ? document.activeElement : null;
-            if (!this.target) {
-                this.pendingEnterVisible = true;
-            }
+        if (this.isOpenEnabled && !this.target) {
+            this.pendingEnterVisible = true;
         }
         this.shouldMoveFocusOnRender = this.isOpenEnabled;
     }
@@ -375,6 +369,7 @@ export class Spotlight {
             return;
         }
         this.shouldMoveFocusOnRender = false;
+        this.capturePreviousFocus();
         this.focusInitial();
     }
     handleKeyDown(ev) {
@@ -452,16 +447,13 @@ export class Spotlight {
         return Spotlight.coerceBoolean(this.showSteps);
     }
     get headingPropHasText() {
-        var _a;
-        return Boolean((_a = this.heading) === null || _a === void 0 ? void 0 : _a.trim());
+        return Boolean(this.heading?.trim());
     }
     get bodyPropHasText() {
-        var _a;
-        return Boolean((_a = this.body) === null || _a === void 0 ? void 0 : _a.trim());
+        return Boolean(this.body?.trim());
     }
     async focusInitial() {
-        var _a;
-        (_a = this.focusAbort) === null || _a === void 0 ? void 0 : _a.abort();
+        this.focusAbort?.abort();
         this.focusAbort = new AbortController();
         if (!this.hasRenderableFocusChrome && this.isOpenEnabled) {
             this.focusFrameId = requestAnimationFrame(() => {
@@ -490,15 +482,20 @@ export class Spotlight {
         const { activeElement } = document;
         return (Boolean(activeElement) && (activeElement === this.el || this.el.contains(activeElement)));
     }
+    capturePreviousFocus() {
+        if (!isBrowser()) {
+            return;
+        }
+        this.previousFocus =
+            document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    }
     restoreFocus() {
-        var _a;
-        if ((_a = this.previousFocus) === null || _a === void 0 ? void 0 : _a.isConnected) {
+        if (this.previousFocus?.isConnected) {
             this.previousFocus.focus();
         }
     }
     cancelPendingFocusWait() {
-        var _a;
-        (_a = this.focusAbort) === null || _a === void 0 ? void 0 : _a.abort();
+        this.focusAbort?.abort();
         if (this.focusFrameId != null) {
             cancelAnimationFrame(this.focusFrameId);
             this.focusFrameId = null;
@@ -513,7 +510,7 @@ export class Spotlight {
     }
     scheduleEnterTransition(options) {
         this.cancelEnterTransition();
-        const shouldDeferUntilAnchored = !(options === null || options === void 0 ? void 0 : options.skipAnchorWait) &&
+        const shouldDeferUntilAnchored = !options?.skipAnchorWait &&
             Boolean(this.target && this.referenceEl) &&
             !this.hasFloatingPosition;
         if (shouldDeferUntilAnchored) {
@@ -524,7 +521,6 @@ export class Spotlight {
         this.pendingEnterVisible = true;
     }
     getFirstTitleSlottedElement() {
-        var _a;
         const fromHost = Array.from(this.el.children).find((node) => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === 'title');
         if (fromHost) {
             return fromHost;
@@ -536,12 +532,12 @@ export class Spotlight {
                 return assigned;
             }
         }
-        return (_a = this.el.querySelector('[slot="title"]')) !== null && _a !== void 0 ? _a : null;
+        return this.el.querySelector('[slot="title"]') ?? null;
     }
     getDialogLabelId() {
         if (this.hasTitleSlotContent) {
             const first = this.getFirstTitleSlottedElement();
-            if (first === null || first === void 0 ? void 0 : first.id) {
+            if (first?.id) {
                 return first.id;
             }
             return this.headingId;
@@ -592,8 +588,7 @@ export class Spotlight {
         });
     }
     stopSlotContentObserver() {
-        var _a;
-        (_a = this.slotContentObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.slotContentObserver?.disconnect();
         this.slotContentObserver = null;
     }
     hasSlottedContent(slotName) {
@@ -603,15 +598,15 @@ export class Spotlight {
         const hasAssigned = slot
             ? slot
                 .assignedNodes({ flatten: true })
-                .some((n) => {
-                var _a;
-                return n.nodeType === Node.ELEMENT_NODE ||
-                    (n.nodeType === Node.TEXT_NODE && ((_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim()));
-            })
+                .some((n) => n.nodeType === Node.ELEMENT_NODE ||
+                (n.nodeType === Node.TEXT_NODE && n.textContent?.trim()))
             : false;
         return Boolean(fromQuery || fromHostChildren) || hasAssigned;
     }
     startPositioning() {
+        if (!isBrowser()) {
+            return;
+        }
         if (!this.target) {
             return;
         }
@@ -619,7 +614,7 @@ export class Spotlight {
         try {
             el = this.el.ownerDocument.querySelector(this.target);
         }
-        catch (_a) {
+        catch {
             this.stopPositioning();
             this.resolvedAnchorPosition = this.anchorPosition;
             return;

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

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import { getTabGroupInstanceId, tabPanelDomId, tabTriggerId, } from "../../utils/tab-a11y-ids";
 export class Tab {
     constructor() {
+        this.badgeVariant = 'purple';
         this.disabled = false;
         this.fullWidth = false;
         this.groupDisabled = false;
@@ -29,12 +30,11 @@ export class Tab {
     }
     async focusTrigger() {
         const btn = await this.getFocusableElement();
-        btn === null || btn === void 0 ? void 0 : btn.focus();
+        btn?.focus();
     }
     get a11yIds() {
-        var _a;
         const groupId = getTabGroupInstanceId(this.el);
-        const t = (_a = this.target) !== null && _a !== void 0 ? _a : '';
+        const t = this.target ?? '';
         return {
             panelId: tabPanelDomId(groupId, t),
             triggerId: tabTriggerId(groupId, t),
@@ -46,8 +46,16 @@ export class Tab {
     get isSegment() {
         return this.variant === 'segment';
     }
+    get hasBadge() {
+        return this.badge != null && this.badge.length > 0;
+    }
+    renderBadge() {
+        if (!this.hasBadge) {
+            return null;
+        }
+        return (h("xpl-badge", { class: "xpl-tab__badge", dotOnly: true, variant: this.badgeVariant }, this.badge));
+    }
     render() {
-        var _a;
         const segment = this.isSegment;
         const { panelId, triggerId } = this.a11yIds;
         const ariaSelected = this.selected ? 'true' : 'false';
@@ -63,13 +71,60 @@ export class Tab {
                     role: 'tab',
                     'aria-controls': panelId,
                     'aria-selected': ariaSelected,
-                }, disabled: this.effectivelyDisabled, fullWidth: this.fullWidth, icon: (_a = this.icon) !== null && _a !== void 0 ? _a : '', iconPosition: this.iconPosition, onClick: this.handleTabClick, size: "sm", type: "button", variant: this.selected ? 'primary' : 'tertiary' }, h("slot", null))));
+                }, disabled: this.effectivelyDisabled, fullWidth: this.fullWidth, icon: this.icon ?? '', iconPosition: this.iconPosition, onClick: this.handleTabClick, size: "sm", type: "button", variant: this.selected ? 'primary' : 'tertiary' }, h("slot", null), this.renderBadge())));
         }
-        return (h(Host, { class: hostClass }, h("button", { "aria-controls": panelId, "aria-selected": ariaSelected, class: "xpl-tab__button", disabled: this.effectivelyDisabled, id: triggerId, onClick: this.handleTabClick, role: "tab", type: "button" }, h("slot", null))));
+        const iconEl = this.icon ? (h("xpl-icon", { class: "xpl-tab__icon", icon: this.icon, size: 16 })) : null;
+        return (h(Host, { class: hostClass }, h("button", { "aria-controls": panelId, "aria-selected": ariaSelected, class: "xpl-tab__button", disabled: this.effectivelyDisabled, id: triggerId, onClick: this.handleTabClick, role: "tab", type: "button" }, this.iconPosition === 'start' ? iconEl : null, h("slot", null), this.iconPosition === 'end' ? iconEl : null, this.renderBadge())));
     }
     static get is() { return "xpl-tab"; }
     static get properties() {
         return {
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional trailing number badge (e.g. a count). Rendered after the label as a compact\n`xpl-badge` in both underline (`type=\"tabs\"`) and segment (`type=\"segment\"`) tabs.\nLeave empty to omit the badge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "badge"
+            },
+            "badgeVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgePalette",
+                    "resolved": "\"blue\" | \"gray\" | \"green\" | \"orange\" | \"purple\" | \"red\" | \"yellow\"",
+                    "references": {
+                        "BadgePalette": {
+                            "location": "import",
+                            "path": "../xpl-badge/xpl-badge",
+                            "id": "src/components/components/xpl-badge/xpl-badge.tsx::BadgePalette",
+                            "referenceLocation": "BadgePalette"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color palette for the trailing number badge. Only applies when `badge` is set.\nDefaults to `purple` \u2014 the standard number-badge color in the Figma XPL-Tab Group spec."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-variant",
+                "defaultValue": "'purple'"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -145,7 +200,7 @@ export class Tab {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional icon name for segment-style pills (`type=\"segment\"` on parent `xpl-tabs`). Ignored for default tabs."
+                    "text": "Optional leading icon name (from the Apollo icon set). Rendered in both underline\n(`type=\"tabs\"`) and segment (`type=\"segment\"`) tabs."
                 },
                 "getter": false,
                 "setter": false,
@@ -164,7 +219,7 @@ export class Tab {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon position for segment-style pills."
+                    "text": "Icon position relative to the label. Applies to both underline and segment tabs."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -5,15 +5,14 @@ export class TabPanel {
         this.selected = false;
     }
     render() {
-        var _a;
         const groupId = getTabGroupInstanceId(this.el);
-        const t = (_a = this.target) !== null && _a !== void 0 ? _a : '';
+        const t = this.target ?? '';
         const panelId = tabPanelDomId(groupId, t);
         const labelledBy = tabTriggerId(groupId, t);
-        return (h(Host, { key: 'd1d6b910b84ee0aa483d605d10aaabf662d2efcf', "aria-labelledby": labelledBy, class: {
+        return (h(Host, { key: '89c4bb26274f9cd2f317e308d58b03ee48d80ac8', "aria-labelledby": labelledBy, class: {
                 'xpl-tab-panel': true,
                 'xpl-tab-panel--selected': this.selected,
-            }, id: panelId, role: "tabpanel" }, h("slot", { key: '1fe282e7372fb0353cf1c32db841269aaa3c44a9' })));
+            }, id: panelId, role: "tabpanel" }, h("slot", { key: '2d8ccc1f14e7415528bbb09fa9ed174e5cea8e00' })));
     }
     static get is() { return "xpl-tab-panel"; }
     static get properties() {

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

@@ -1,5 +1,14 @@
 import { v4 as uuid } from "uuid";
+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/Table',
     argTypes: {
         freeze: { control: { type: 'boolean' } },
@@ -41,7 +50,7 @@ const selectedValuesDefault = [
 ];
 const sortableColumnsDefault = [false, false, false, false, false, false];
 const footerDefault = [['Total', '676.5', '159.75', 'All Seasons', '26', '106']];
-const script = ({ columns, data, footer, id, selectedValues, isSortable, sortableColumns }) => `
+const script = ({ columns, data, footer, id, selectedValues, isSortable, sortableColumns, }) => `
     (function() {
         const table = document.getElementById("${id}");
         table.columns = ${JSON.stringify(columns)};
@@ -68,7 +77,7 @@ export const Table = ({ columns, data, footer, freeze, multiselect, selectedValu
             <xpl-table id="${id}"${attrs}></xpl-table>
         </div>
         <script>
-            ${script({ id, columns, data, footer, selectedValues, sortableColumns, isSortable })}
+            ${script({ id, columns, data, footer, selectedValues, sortableColumns, isSortable, freeze, multiselect, striped })}
         </script>
     `;
 };