@xplortech/apollo-core 2.11.0 → 2.12.0

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

@@ -7,7 +7,6 @@ const LEGACY_STATUS_TO_BADGE = {
 const MAX_GROUP_VISIBLE = 4;
 const MAX_INITIALS = 3;
 function getInitials(name) {
-    var _a, _b, _c;
     if (!name || !name.trim())
         return '';
     const parts = name.trim().split(/\s+/).filter(Boolean);
@@ -15,9 +14,9 @@ function getInitials(name) {
         return '';
     if (parts.length === 1)
         return parts[0].slice(0, MAX_INITIALS).toUpperCase();
-    const first = (_a = parts[0][0]) !== null && _a !== void 0 ? _a : '';
-    const last = (_b = parts[parts.length - 1][0]) !== null && _b !== void 0 ? _b : '';
-    const mid = parts.length > 2 ? ((_c = parts[1][0]) !== null && _c !== void 0 ? _c : '') : '';
+    const first = parts[0][0] ?? '';
+    const last = parts[parts.length - 1][0] ?? '';
+    const mid = parts.length > 2 ? (parts[1][0] ?? '') : '';
     return (first + mid + last).slice(0, MAX_INITIALS).toUpperCase();
 }
 function formatRemainingCount(n) {
@@ -40,8 +39,7 @@ export class Avatar {
         this.cachedGroupItems = Avatar.parseGroupData(newValue);
     }
     componentWillLoad() {
-        var _a, _b, _c;
-        this.cachedSlotContent = (_c = (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim().slice(0, MAX_INITIALS)) !== null && _c !== void 0 ? _c : '';
+        this.cachedSlotContent = this.el?.textContent?.trim().slice(0, MAX_INITIALS) ?? '';
         this.onGroupDataChange(this.groupData);
     }
     static parseGroupData(raw) {
@@ -52,7 +50,7 @@ export class Avatar {
                 const parsed = JSON.parse(raw);
                 return Array.isArray(parsed) ? parsed : [];
             }
-            catch (_a) {
+            catch {
                 return [];
             }
         }
@@ -62,11 +60,10 @@ export class Avatar {
         return this.cachedGroupItems;
     }
     get statusBadgeVariant() {
-        var _a;
         const s = this.status;
         if (s === undefined)
             return undefined;
-        return ((_a = LEGACY_STATUS_TO_BADGE[s]) !== null && _a !== void 0 ? _a : s);
+        return (LEGACY_STATUS_TO_BADGE[s] ?? s);
     }
     getPlaceholderText() {
         if (this.cachedSlotContent.length > 0)
@@ -83,24 +80,23 @@ export class Avatar {
         };
     }
     getAnchorProps(className) {
-        var _a;
         return {
             href: this.href,
             target: this.target,
             rel: this.target === '_blank' ? 'noopener noreferrer' : undefined,
-            'aria-label': (_a = this.name) !== null && _a !== void 0 ? _a : 'Profile',
+            'aria-label': this.name ?? 'Profile',
             class: className,
         };
     }
     static renderAvatarMedia(src, name, placeholderText, ariaLabelFallback, showSlot = true) {
         if (src) {
-            return h("img", { alt: name !== null && name !== void 0 ? name : '', src: src });
+            return h("img", { alt: name ?? '', src: src });
         }
-        return (h("div", { class: "xpl-avatar__placeholder", role: "img", "aria-label": name !== null && name !== void 0 ? name : ariaLabelFallback }, placeholderText || (showSlot ? h("slot", null) : null)));
+        return (h("div", { class: "xpl-avatar__placeholder", role: "img", "aria-label": name ?? ariaLabelFallback }, placeholderText || (showSlot ? h("slot", null) : null)));
     }
     renderAvatarMediaWithStatusBadge(wrapperClass) {
         const placeholderText = this.getPlaceholderText();
-        return (h("div", Object.assign({}, (wrapperClass ? { class: wrapperClass } : {})), Avatar.renderAvatarMedia(this.src, this.name, placeholderText, 'Profile', true), this.statusBadgeVariant && (h("xpl-badge", { dotOnly: true, bordered: true, variant: this.statusBadgeVariant, "aria-hidden": "true" }))));
+        return (h("div", { ...(wrapperClass ? { class: wrapperClass } : {}) }, Avatar.renderAvatarMedia(this.src, this.name, placeholderText, 'Profile', true), this.statusBadgeVariant && (h("xpl-badge", { dotOnly: true, bordered: true, variant: this.statusBadgeVariant, "aria-hidden": "true" }))));
     }
     renderGroupItem(item, index) {
         const placeholderText = item.name ? getInitials(item.name) : '';
@@ -138,14 +134,14 @@ export class Avatar {
                 [`xpl-avatar--${this.color}`]: !!this.color,
                 'xpl-avatar--disabled': !!this.disabled,
             };
-            return (h(Host, null, this.href && !this.disabled ? (h("a", Object.assign({}, this.getAnchorProps('xpl-avatar__with-text-link')), h("div", { class: withTextClasses }, avatarBlock, this.renderWithTextContent()))) : (h("div", { class: withTextClasses, "aria-disabled": this.disabled ? 'true' : undefined }, avatarBlock, this.renderWithTextContent()))));
+            return (h(Host, null, this.href && !this.disabled ? (h("a", { ...this.getAnchorProps('xpl-avatar__with-text-link') }, h("div", { class: withTextClasses }, avatarBlock, this.renderWithTextContent()))) : (h("div", { class: withTextClasses, "aria-disabled": this.disabled ? 'true' : undefined }, avatarBlock, this.renderWithTextContent()))));
         }
         const isProfile = v === 'profile';
         const singleSize = isProfile && this.size === 'md' ? undefined : this.size;
         const singleClasses = Avatar.getSingleAvatarClasses(singleSize, this.color, isProfile, this.disabled);
         const content = this.renderAvatarMediaWithStatusBadge();
         if (this.href && !this.disabled) {
-            return (h(Host, null, h("a", Object.assign({}, this.getAnchorProps(singleClasses)), content)));
+            return (h(Host, null, h("a", { ...this.getAnchorProps(singleClasses) }, content)));
         }
         return (h(Host, null, h("div", { class: singleClasses, "aria-disabled": this.disabled ? 'true' : undefined }, content)));
     }

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

@@ -1,8 +1,22 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
 export default {
     title: 'Components/Backdrop',
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
 };
+const content = `
+    <div class="xpl-content-area">
+        <h2>Backdrop</h2>
+        <p>
+            The backdrop adds a translucent scrim over the page to focus attention
+            on an active dialog such as a modal or slide-out panel.
+        </p>
+    </div>
+`;
 export const Backdrop = () => `
-    <img src="https://media.giphy.com/media/mi6DsSSNKDbUY/giphy-downsized-large.gif" />
+    ${content}
     <xpl-backdrop></xpl-backdrop>
 `;
 Backdrop.args = {};
@@ -10,12 +24,12 @@ Backdrop.parameters = {
     layout: 'centered',
     'web-component': {
         render: ((_) => `
-            <img src="https://media.giphy.com/media/mi6DsSSNKDbUY/giphy-downsized-large.gif" />
+            ${content}
             <xpl-backdrop></xpl-backdrop>
         `)(Backdrop.args),
     },
     html: {
-        render: ((_) => `<div class="xpl-backdrop" aria-hidden="true"></div>`)(Backdrop.args),
+        render: ((_) => `<div class="xpl-backdrop xpl-backdrop--fixed" aria-hidden="true"></div>`)(Backdrop.args),
     },
     design: {
         type: 'figma',

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

@@ -4,7 +4,7 @@ export class Backdrop {
         this.relative = false;
     }
     render() {
-        return (h(Host, { key: '7d5a73e7d7927828e0cb1a7cdca6648c4512cc5a', class: {
+        return (h(Host, { key: '9a815cbf4ec4d4b5f789a8a6fdabeaef90844096', class: {
                 'xpl-backdrop': true,
                 'xpl-backdrop--fixed': !this.relative,
                 'xpl-backdrop--relative': this.relative,

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

@@ -1,3 +1,5 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 const VARIANT_OPTIONS = [
     'purple',
     'green',
@@ -19,7 +21,15 @@ const commonParameters = {
     },
 };
 export default {
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
     title: 'Components/Badge',
+    component: 'xpl-badge',
     argTypes: {
         variant: {
             options: [...VARIANT_OPTIONS],
@@ -61,9 +71,8 @@ function badgeAttrs(args) {
         .join(' ');
 }
 export const Badge = (args) => {
-    var _a;
     const attrs = badgeAttrs(args);
-    const text = (_a = args.text) !== null && _a !== void 0 ? _a : '';
+    const text = args.text ?? '';
     return `
         <div style="padding: 2rem;">
             <xpl-badge ${attrs}>${text}</xpl-badge>
@@ -79,13 +88,17 @@ Badge.args = {
     dotOnly: false,
     bordered: false,
 };
-Badge.parameters = Object.assign(Object.assign({}, commonParameters), { 'web-component': {
+Badge.parameters = {
+    ...commonParameters,
+    htmlSnippet: { mode: 'auto' },
+    'web-component': {
         render: (() => {
-            var _a;
-            const args = Object.assign({}, Badge.args);
+            const args = { ...Badge.args };
             const attrs = badgeAttrs(args);
-            return `<xpl-badge ${attrs}>${(_a = args.text) !== null && _a !== void 0 ? _a : ''}</xpl-badge>`;
+            return `<xpl-badge ${attrs}>${args.text ?? ''}</xpl-badge>`;
         })(),
-    }, html: {
+    },
+    html: {
         render: `<div class="xpl-badge xpl-badge--dot xpl-badge--purple xpl-badge--size-default xpl-badge--shape-rounded"><span class="xpl-badge__label">Badge</span></div>`,
-    } });
+    },
+};

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

@@ -14,20 +14,19 @@ export class Badge {
         this.variant = 'purple';
     }
     get resolvedVariant() {
-        var _a;
-        return (_a = LEGACY_VARIANT_MAP[this.variant]) !== null && _a !== void 0 ? _a : this.variant;
+        return LEGACY_VARIANT_MAP[this.variant] ?? this.variant;
     }
     render() {
         const className = {
-            'xpl-badge--dot-only': this.dotOnly,
-            'xpl-badge--dot-only-bordered': this.dotOnly && this.bordered,
+            'xpl-badge--dot-only': !!this.dotOnly,
+            'xpl-badge--dot-only-bordered': !!this.dotOnly && !!this.bordered,
             'xpl-badge': !this.dotOnly,
             'xpl-badge--dot': !this.dotOnly && !!this.dot,
             [`xpl-badge--${this.resolvedVariant}`]: true,
             [`xpl-badge--size-${this.size}`]: !!this.size,
             [`xpl-badge--shape-${this.shape}`]: !this.dotOnly && !!this.shape,
         };
-        return (h(Host, { key: '3a2ab519bb627a1e46bc7686c6aafdcb3c789822' }, h("div", { key: 'e9ebf0d6a9a6a6f516065ceb969aca5f68cbb3ee', class: className }, h("span", { key: '1bd6735a1a67a9720424833a213fcde9e5e6db46', class: "xpl-badge__label" }, h("slot", { key: '397cb4768204c4b4a2dd7cd85534270a165776d8' })))));
+        return (h(Host, { key: '2d4179362c0cbb0b6f811311dd22388999e10862' }, h("div", { key: '060964cfc2e6df5b51edc0af9a79e050fddcb4ae', class: className }, h("span", { key: '54f018c6ece279aa17c655b1e5502a6526173433', class: "xpl-badge__label" }, h("slot", { key: '4199e21fb1d83f81cf5001c0c51902f1bc8764f6' })))));
     }
     static get is() { return "xpl-badge"; }
     static get properties() {

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

@@ -27,7 +27,7 @@ export default {
         secondaryActionText: { control: 'text' },
     },
 };
-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)}"` : '';
 export const Banner = ({ appearance, heading, description, truncateDesc, isDismissible, isSection, hasIcon, actionText, secondaryActionText, }) => `
     <xpl-banner
         appearance="${appearance}"

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

@@ -37,9 +37,8 @@ export class Banner {
         return this.appearance === 'error' ? 'primary' : 'subtle';
     }
     getAriaLabel() {
-        var _a;
         if (this.isSection) {
-            return ((_a = this.heading) === null || _a === void 0 ? void 0 : _a.trim()) || 'Section banner';
+            return this.heading?.trim() || 'Section banner';
         }
         return {
             information: 'Information banner',
@@ -49,20 +48,19 @@ export class Banner {
         }[this.appearance];
     }
     render() {
-        var _a, _b, _c, _d;
-        const hasAction = !!((_a = this.actionText) === null || _a === void 0 ? void 0 : _a.trim());
-        const hasSecondaryAction = !!((_b = this.secondaryActionText) === null || _b === void 0 ? void 0 : _b.trim());
+        const hasAction = !!this.actionText?.trim();
+        const hasSecondaryAction = !!this.secondaryActionText?.trim();
         const actionVariant = this.getActionButtonVariant();
         const actionState = this.getActionButtonState();
-        const isHeadingPresent = !!((_c = this.heading) === null || _c === void 0 ? void 0 : _c.trim());
-        const isDescPresent = !!((_d = this.description) === null || _d === void 0 ? void 0 : _d.trim());
-        return (h(Host, { key: '6d137a4577f93942bcb41b3b2f67f3d851bee454', class: {
+        const isHeadingPresent = !!this.heading?.trim();
+        const isDescPresent = !!this.description?.trim();
+        return (h(Host, { key: '476c72c3dad23d9d62a8d68a826fb75a93fc88ee', class: {
                 'xpl-banner': true,
                 'xpl-banner--section': this.isSection,
                 [`xpl-banner--${this.appearance}`]: true,
                 'xpl-banner--truncate-desc': this.truncateDesc,
                 'xpl-banner--no-icon': this.isSection && !this.hasIcon,
-            }, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (h("div", { key: 'e854bc2ca363a23e3e6cb9eb512886c325e09362', class: "xpl-banner__icon", "aria-hidden": "true" }, h("xpl-icon", { key: '14a0916310e6e0b68f9a36b4e1714cee015ad22f', icon: this.getIcon(), size: 24 }))), h("div", { key: 'bea8f5cafe66e649926aa0ee634b71ffa0f1b73e', class: "xpl-banner__body" }, isHeadingPresent && h("p", { key: 'f18ae9e7d4014211eea3a160fb05945149705832', class: "xpl-banner__heading" }, this.heading), isDescPresent && (h("p", { key: 'e36c00dadf6bd0d35b88c9a091d140573e6b6677', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (h("div", { key: 'dda19df805050c93d5c5ea8214f97084a5b0c0eb', class: "xpl-banner__actions" }, hasAction && (h("xpl-button", { key: '5bd3047d1b8250ed28a7720fb09f316a3b45bae1', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (h("xpl-button", { key: 'c0f0a32b69384194e4033ae85eebc788e005a8af', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (h("button", { key: '721faa946e9fc896a6bafafd8450d81f50e982ed', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, h("xpl-icon", { key: '4c27dbd8b394839ed98f5b4e2d4720eba1b0184f', icon: "xmark", size: 24, "aria-hidden": "true" })))));
+            }, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (h("div", { key: 'b81395caa66c8c56a54535a5ace6fd3a027b0075', class: "xpl-banner__icon", "aria-hidden": "true" }, h("xpl-icon", { key: 'e8dd31a592ba17dd1825630a4f1ba9bc7323891a', icon: this.getIcon(), size: 24 }))), h("div", { key: '034eab05c801635fdbfb7ea549c4472407f3f09f', class: "xpl-banner__body" }, isHeadingPresent && h("p", { key: 'c9216bd4c11c1d3bda0e1654282d9a713e955968', class: "xpl-banner__heading" }, this.heading), isDescPresent && (h("p", { key: 'e67d92d7b71b678b19627741a01d2e4b26ef7093', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (h("div", { key: 'dd4d7bcae4bde9d16124b27993d7d1b2e96e086e', class: "xpl-banner__actions" }, hasAction && (h("xpl-button", { key: '51df92818c4194c76c609776f85aa31c7bffb34b', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (h("xpl-button", { key: '7f911d3a81190cde339f69a2d93eb0c2518c9036', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (h("button", { key: 'b9d1b8d15f0adac5b7eaa5c3e287c4b0fe7b987e', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, h("xpl-icon", { key: '528fd238ccfb1e52c7fe5c0d093f30a4fa4603bd', icon: "xmark", size: 24, "aria-hidden": "true" })))));
     }
     static get is() { return "xpl-banner"; }
     static get properties() {

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

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

package/dist/collection/components/xpl-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.js

@@ -7,7 +7,7 @@ export class BreadcrumbItem {
     `;
     }
     render() {
-        return (h(Host, { key: 'dd246c29fcb1afca4007299380a59b47c0a10c9d', class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { key: 'b6df20888b3891241e52f0f2be14f1eedee2cac6', role: "none" }, h("slot", { key: 'f2f64effe0f58bb33bc983abfaa8b2996714e3b4' })), h("span", { key: '31c15dd296e6dab1d207a84179a4803b7366c1a2', innerHTML: this.chevron })));
+        return (h(Host, { key: '05e99f78af5eab5e1cec089972ffb032eea34e88', class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { key: 'a692a2e091bf8038fc04f675dcaaac0f2e7a7c2f', role: "none" }, h("slot", { key: 'f4b90f80b4eba10d285ff104b529d22bdc8f0e0b' })), h("span", { key: 'a6b05807f7683d9ebbffdc3566c3f1754bb41206', innerHTML: this.chevron })));
     }
     static get is() { return "xpl-breadcrumb-item"; }
 }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class Breadcrumbs {
     render() {
-        return (h(Host, { key: 'd4a4ae7bbf7f8eafc8a44b56c66983303e039d7e' }, h("nav", { key: '8e5decbdce778c1768e3412a59663cd37938f361', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { key: '612620c37a84ad022b9da5cdb884410a4df4dd29', role: "list" }, h("slot", { key: 'ae6cfc4f4e65ba7ca755fa7d9eb3751aae8905ff' })))));
+        return (h(Host, { key: 'ec9689395d536e7018469193ba61c094d79fa004' }, h("nav", { key: 'ffb0b88d3b331a22d1ae620aeb67ad901c801153', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { key: '9649caceca01e86584682f4843c30fe080b364e1', role: "list" }, h("slot", { key: '68f438d33b5cd458cd0643a4f28c04dd824366c7' })))));
     }
     static get is() { return "xpl-breadcrumbs"; }
 }

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

@@ -1,6 +1,7 @@
 import { setAutoSnapshotOptions } from "vitest-plugin-vis";
 export default {
     title: 'Components/Button',
+    component: 'xpl-button',
     tags: ['vrt'],
     beforeEach() {
         setAutoSnapshotOptions({ enable: true });
@@ -124,6 +125,7 @@ Button.args = {
 };
 Button.parameters = {
     layout: 'centered',
+    htmlSnippet: { mode: 'auto' },
     'web-component': {
         render: Button(Button.args),
     },

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

@@ -14,19 +14,23 @@ export class Button {
     componentDidRender() {
         const attrs = this.el.attributes;
         const dataAttrs = Object.keys(attrs)
-            .filter((k) => {
-            const propertyName = attrs[k].name;
-            if (propertyName) {
-                return propertyName.includes('data-test') || propertyName.includes('aria-');
-            }
-            return false;
+            .map((key) => Number(key))
+            .filter((index) => {
+            const attr = attrs[index];
+            return attr?.name.includes('data-test') || attr?.name.includes('aria-') || false;
         })
-            .reduce((acc, k) => (Object.assign(Object.assign({}, acc), { [attrs[k].name]: attrs[k].value })), {});
+            .reduce((acc, index) => {
+            const attr = attrs[index];
+            if (attr) {
+                acc[attr.name] = attr.value;
+            }
+            return acc;
+        }, {});
         const button = this.el.querySelector('button');
         if (button) {
-            Object.keys(dataAttrs).forEach((k) => {
-                button.setAttribute(k, dataAttrs[k]);
-                this.el.removeAttribute(k);
+            Object.entries(dataAttrs).forEach(([name, value]) => {
+                button.setAttribute(name, value);
+                this.el.removeAttribute(name);
             });
         }
     }
@@ -50,8 +54,7 @@ export class Button {
         }
     }
     render() {
-        var _a;
-        return (h(Host, { key: '4fa90ae10b235af3fbfadb40097c5cc238e40dc6', class: {
+        return (h(Host, { key: '88b28108ae3675732cc51462438c4d067223fbcd', class: {
                 'xpl-button': true,
                 [`xpl-button--${this.size}`]: true,
                 [`xpl-button--${this.variant}`]: true,
@@ -61,12 +64,12 @@ export class Button {
                 'xpl-button--icon-only': this.iconOnly,
                 'xpl-button--disabled': this.disabled,
                 'xpl-button--loading': this.isLoading && !this.link,
-            } }, this.link ? (h("slot", null)) : (h("button", Object.assign({}, ((_a = this.controlAttrs) !== null && _a !== void 0 ? _a : {}), { disabled: this.disabled, onClick: (e) => this.handleLoadingState(e), type: this.isLoading &&
+            } }, this.link ? (h("slot", null)) : (h("button", { ...(this.controlAttrs ?? {}), disabled: this.disabled, onClick: (e) => this.handleLoadingState(e), type: this.isLoading &&
                 (this.type === 'submit' ||
                     this.type === 'reset' ||
                     this.type === undefined)
                 ? 'button'
-                : this.type, name: this.name, value: this.value, form: this.form, "aria-busy": this.isLoading ? 'true' : undefined }), this.icon && h("span", { class: "xpl-button__icon" }, this.renderIcon()), h("slot", null), this.isLoading && (h("span", { class: "xpl-button__loading-overlay", "aria-hidden": "true" }, h("span", { class: "xpl-button__loading-spinner" }, h("xpl-icon", { icon: "loader-4" }))))))));
+                : this.type, name: this.name, value: this.value, form: this.form, "aria-busy": this.isLoading ? 'true' : undefined }, this.icon && h("span", { class: "xpl-button__icon" }, this.renderIcon()), h("slot", null), this.isLoading && (h("span", { class: "xpl-button__loading-overlay", "aria-hidden": "true" }, h("span", { class: "xpl-button__loading-spinner" }, h("xpl-icon", { icon: "loader-4" }))))))));
     }
     static get is() { return "xpl-button"; }
     static get properties() {

package/dist/collection/components/xpl-button-row/button-row.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/Button Row',
     argTypes: {
         primary: {

package/dist/collection/components/xpl-button-row/xpl-button-row.js

@@ -6,7 +6,7 @@ export class ButtonRow {
         this.onTertiary = () => this.clickTertiary.emit();
     }
     render() {
-        return (h(Host, { key: '9cd6193bed50a82872803b95bd5fc56c9347dd1a', class: "xpl-button-row" }, h("div", { key: 'eefebfcad667ceec154117b9318e2ff88c420f8f', class: "xpl-button-row-inner" }, h("div", { key: '94633d213b36306cf51a70e04d21a964ca13c430', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: '2e47003e6f35f5acd7a6129c903d4591cc10759f', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: '05397d469cd97188f56934354850a8c3cd77e4d6', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: 'd3f6a953144e8e64aa34a37c9c80f7363dc0ee9c', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: 'abd03f3c33a48517a7f268ecf302767e605a2400', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: 'be417c38b0427e9cdbbacb700d4651677cff8ec9', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
+        return (h(Host, { key: '060eb37a03ab854c56b383cf2ed598915f8b4c6f', class: "xpl-button-row" }, h("div", { key: '169e722e0ccb0045680001755943aa1087c70a79', class: "xpl-button-row-inner" }, h("div", { key: '8a49375971621161e3c1ad692ef9257b1c4bac43', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: '3cc16072ce7e9b4731b50fbaf647659b842763ad', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: 'e1d248e9b65f241f5eee07d2808ee3cb67b6c867', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: '827f7c01fb4617bb10acfc79b20a515718c6d539', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: '726167a62d0b3dc6f19b6e38abaa446cb474a07c', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: '2d7d7fe4e965ce093d969936ff96d224762499e1', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
     }
     static get is() { return "xpl-button-row"; }
     static get properties() {

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

@@ -1,3 +1,5 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 const meta = {
     title: 'Components/Calendar',
     component: 'xpl-calendar',
@@ -19,10 +21,16 @@ const meta = {
             handles: ['dateSelected'],
         },
     },
-    tags: ['beta'],
+    tags: ['beta', 'vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
 };
 export default meta;
-export const Calendar = ({ defaultDate, dateFormat, max, min, mode }) => `
+export const Calendar = ({ defaultDate, dateFormat, max, min, mode, }) => `
     <div style="padding: 30px; width: 300px;">
         <xpl-calendar
             date-format="${dateFormat || 'Y-m-d'}"
@@ -35,7 +43,7 @@ export const Calendar = ({ defaultDate, dateFormat, max, min, mode }) => `
 `;
 Calendar.args = {
     mode: 'single',
-    defaultDate: new Date().toISOString().split('T')[0],
+    defaultDate: '2026-01-15',
     dateFormat: 'Y-m-d',
     max: '',
     min: '',

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { v4 as uuid } from "uuid";
 import flatpickr from "flatpickr";
+import { isBrowser } from "../../utils/lifecycle";
 const arrowSvg = (rotate = false) => `<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="${rotate
     ? 'M0.557948 5.6813L6.06209 0.132167C6.23831 -0.0440556 6.52327 -0.0440556 6.69949 0.132167L7.44187 0.874551C7.61809 1.05077 7.61809 1.33573 7.44187 1.51195L2.99882 6L7.44187 10.488C7.61809 10.6643 7.61809 10.9492 7.44187 11.1254L6.69949 11.8678C6.52327 12.0441 6.23831 12.0441 6.06209 11.8678L0.557948 6.3187C0.381726 6.14248 0.381726 5.85752 0.557948 5.6813Z'
     : 'M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z'}" /></svg>`;
@@ -21,9 +22,12 @@ export class Calendar {
         }
     }
     componentWillLoad() {
-        this.calendarInputId = this.inputId;
+        this.calendarInputId = this.inputId ?? '';
     }
     componentDidLoad() {
+        if (!isBrowser()) {
+            return;
+        }
         this.flatpickrInstance = flatpickr(this.inputElement, {
             allowInput: true,
             dateFormat: this.dateFormat,
@@ -36,9 +40,8 @@ export class Calendar {
             inline: true,
             monthSelectorType: 'dropdown',
             onChange: (selectedDates) => {
-                var _a;
                 if (this.mode === 'single') {
-                    this.dateSelected.emit((_a = selectedDates[0]) === null || _a === void 0 ? void 0 : _a.toISOString());
+                    this.dateSelected.emit(selectedDates[0]?.toISOString());
                 }
                 else {
                     this.dateSelected.emit(selectedDates.map((date) => date.toISOString()));
@@ -52,8 +55,9 @@ export class Calendar {
         }
     }
     render() {
-        return (h(Host, { key: '8693d0e9612e2995b03f6392387758c843db0be5', class: "xpl-calendar" }, h("input", { key: '29077057568f288f42d4e0eb94e2fa83ce6ea9c6', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
-                this.inputElement = el;
+        return (h(Host, { key: '76d2b26fe34d766b1e1348f7d5336c5ec478bae9', class: "xpl-calendar" }, h("input", { key: '8f015adda8e5c4f7a5f0dd9815bdead0249e3a4e', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
+                if (el)
+                    this.inputElement = el;
             } })));
     }
     static get is() { return "xpl-calendar"; }

package/dist/collection/components/xpl-checkbox/checkbox.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/Checkbox',
     argTypes: {
         label: {
@@ -29,7 +38,7 @@ export default {
         },
     },
 };
-export const Checkbox = ({ label, description, checked, disabled, indeterminate, styled }) => {
+export const Checkbox = ({ label, description, checked, disabled, indeterminate, styled, }) => {
     let attrs = '';
     if (description)
         attrs += ` description="${description}"`;
@@ -57,7 +66,7 @@ Checkbox.parameters = {
         render: Checkbox(Checkbox.args),
     },
     html: {
-        render: (({ label, description, checked, disabled, indeterminate, styled }) => {
+        render: (({ label, description, checked, disabled, indeterminate, styled, }) => {
             let attrs = '';
             if (checked)
                 attrs += ` checked`;

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

@@ -10,17 +10,16 @@ export class Checkbox {
         };
     }
     render() {
-        var _a;
-        return (h(Host, { key: 'd173bab038a25f785864e5614b29ec2fde832786', class: {
+        return (h(Host, { key: 'fba24f4540febb1d52a143ae8249978820731422', class: {
                 'xpl-checkbox-radio-container': true,
-                styled: this.styled,
-                disabled: this.disabled,
-            } }, h("input", { key: 'badfc1e403ba5b51b757823354c4cec86f678116', class: "xpl-checkbox", type: "checkbox", "aria-label": ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || undefined, checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), h("label", { key: 'b56888525a7b3d9544d8595b71d1ffe36f00e7b8', class: {
+                styled: !!this.styled,
+                disabled: !!this.disabled,
+            } }, h("input", { key: '1663fd03d0f76952ddbe1a8ce87ea7c76c31631c', class: "xpl-checkbox", type: "checkbox", "aria-label": (this.ariaLabel ?? '').trim() || undefined, checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), h("label", { key: '84548eea585da460e834d1e34b24e0b3724a38ea', class: {
                 'xpl-label': true,
-                'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: 'a5f06411725e10f5e5fafc33ff5e8f4adfec9e5b' }), this.description && (h("small", { key: '16ac47d9316e4a78f732cb3c0851efd8eaf903f2', class: {
+                'xpl-label--disabled': !!this.disabled,
+            }, htmlFor: this.id }, h("slot", { key: 'f9451918bee8abc6dea4fd65acef75bb13b69e4d' }), this.description && (h("small", { key: '02db357e5080d87595bdfd5baac1be2a2bb771d7', class: {
                 'xpl-description': true,
-                'xpl-description--disabled': this.disabled,
+                'xpl-description--disabled': !!this.disabled,
             } }, this.description)))));
     }
     static get is() { return "xpl-checkbox"; }

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

@@ -1,6 +1,11 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
 import { v4 as uuid } from "uuid";
 export default {
     title: 'Components/Choicelist',
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
     argTypes: {
         multi: {
             control: {
@@ -57,6 +62,25 @@ Choicelist.args = {
     multi: false,
     styled: false,
 };
+export const Styled = ({ multi }) => {
+    const id = uuid();
+    return `<xpl-choicelist id="${id}" name="choicelist-styled" heading="Choice list" description="Pick the options that apply."></xpl-choicelist><script>
+        (function () {
+            const choicelist = document.getElementById("${id}");
+            choicelist.choices = ${JSON.stringify(data)};
+            choicelist.multi = ${multi ? 'true' : 'false'};
+            choicelist.styled = true;
+        })();
+    </script>`;
+};
+Styled.args = {
+    multi: true,
+    styled: true,
+};
+Styled.parameters = {
+    layout: 'centered',
+    controls: { include: ['multi'] },
+};
 Choicelist.parameters = {
     layout: 'centered',
     'web-component': {