@xplortech/apollo-core 2.11.0 → 2.12.0

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

@@ -1,3 +1,5 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 function tagAttrs(args) {
     const { disabled, dismissible, isDraggable, size, tagId } = args;
     return [
@@ -11,6 +13,13 @@ function tagAttrs(args) {
         .join(' ');
 }
 export default {
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
     title: 'Components/Tag',
     component: 'xpl-tag',
     argTypes: {
@@ -26,9 +35,8 @@ export default {
     },
 };
 export const Tag = (args) => {
-    var _a;
     const attrs = tagAttrs(args);
-    const text = (_a = args.slot) !== null && _a !== void 0 ? _a : '';
+    const text = args.slot ?? '';
     return `
         <div style="padding: var(--xpl-space-32);">
             <xpl-tag ${attrs}>${text}</xpl-tag>
@@ -107,16 +115,14 @@ Tag.parameters = {
     },
     'web-component': {
         render: (() => {
-            var _a;
-            const args = Object.assign({}, Tag.args);
+            const args = { ...Tag.args };
             const attrs = tagAttrs(args);
-            return `<xpl-tag ${attrs}>${(_a = args.slot) !== null && _a !== void 0 ? _a : ''}</xpl-tag>`;
+            return `<xpl-tag ${attrs}>${args.slot ?? ''}</xpl-tag>`;
         })(),
     },
     html: {
         render: (() => {
-            var _a, _b;
-            const args = Object.assign({}, Tag.args);
+            const args = { ...Tag.args };
             const sizeMod = args.size === 'sm' ? 'xpl-tag--sm' : '';
             const disabledMod = args.disabled ? 'xpl-tag--disabled' : '';
             const dismissibleMod = args.dismissible ? 'xpl-tag--dismissible' : '';
@@ -137,8 +143,8 @@ Tag.parameters = {
             const contentAttrs = dragEnabled
                 ? 'role="button" tabindex="0" draggable="true"'
                 : `type="button"${disabledAttr}`;
-            const contentEl = `<${contentTag} class="xpl-tag__content xpl-tag" ${contentAttrs}>${(_a = args.slot) !== null && _a !== void 0 ? _a : ''}</${contentTag}>`;
-            const dismissLabelBase = ((_b = args.slot) !== null && _b !== void 0 ? _b : '').trim() || 'tag';
+            const contentEl = `<${contentTag} class="xpl-tag__content xpl-tag" ${contentAttrs}>${args.slot ?? ''}</${contentTag}>`;
+            const dismissLabelBase = (args.slot ?? '').trim() || 'tag';
             const dismissAriaLabel = `Dismiss ${dismissLabelBase}`.replace(/"/g, '&quot;');
             const dismissButton = args.dismissible
                 ? `<button class="xpl-tag__dismiss xpl-tag__close" type="button" aria-label="${dismissAriaLabel}"${disabledAttr}><xpl-icon icon="xmark" size="10"></xpl-icon></button>`

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

@@ -25,7 +25,7 @@ export class Tag {
                 const offsetY = Math.max(0, event.clientY - rect.top);
                 event.dataTransfer.setDragImage(this.el, offsetX, offsetY);
             }
-            catch (_a) {
+            catch {
             }
         };
         this.handleContentKeyDown = (event) => {
@@ -62,9 +62,8 @@ export class Tag {
             });
         };
         this.handleDragEnd = (event) => {
-            var _a;
             this.isDragging = false;
-            const wasDropped = ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.dropEffect) === 'move';
+            const wasDropped = event.dataTransfer?.dropEffect === 'move';
             this.tagDragEnd.emit({
                 tagId: this.tagId,
                 dropped: wasDropped,
@@ -106,8 +105,7 @@ export class Tag {
         queueMicrotask(() => this.syncDismissAriaLabelSuffix());
     }
     getContentLabelText() {
-        var _a, _b;
-        return ((_b = (_a = this.el.querySelector('.xpl-tag__content')) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : '').trim();
+        return (this.el.querySelector('.xpl-tag__content')?.textContent ?? '').trim();
     }
     syncDismissAriaLabelSuffix() {
         if (!this.el.isConnected) {
@@ -121,7 +119,7 @@ export class Tag {
     }
     render() {
         const dragEnabled = this.isDraggable && !this.disabled;
-        return (h(Host, { key: '4b8228da443d411561306e790333d676fc3907e3', class: {
+        return (h(Host, { key: 'dc8048cbcdc849eef7f7ae81987760151bcf72bc', class: {
                 'xpl-tag': true,
                 'xpl-tag-container': true,
                 'xpl-tag--disabled': this.disabled,
@@ -129,7 +127,7 @@ export class Tag {
                 'xpl-tag--dragging': this.isDragging,
                 'xpl-tag--draggable': dragEnabled,
                 'xpl-tag--sm': this.size === 'sm',
-            }, onDragOver: dragEnabled ? this.handleDragOver : undefined, onDragEnter: dragEnabled ? this.handleDragEnter : undefined, onDragStart: this.isDraggable ? this.handleHostDragStart : undefined }, dragEnabled ? (h("div", { class: "xpl-tag__content xpl-tag", role: "button", tabIndex: 0, draggable: true, "aria-grabbed": String(this.isDragging), onClick: this.handleTagClick, onKeyDown: this.handleContentKeyDown, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd }, h("slot", null))) : (h("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, h("slot", null))), this.dismissible && (h("button", { key: 'bf634c6b75d1cd2eaadff8e4459b74a097e3f221', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, h("xpl-icon", { key: 'fb37896890c9afb56c02a3ff4e62f096c416a569', icon: "xmark", size: 10 })))));
+            }, onDragOver: dragEnabled ? this.handleDragOver : undefined, onDragEnter: dragEnabled ? this.handleDragEnter : undefined, onDragStart: this.isDraggable ? this.handleHostDragStart : undefined }, dragEnabled ? (h("div", { class: "xpl-tag__content xpl-tag", role: "button", tabIndex: 0, draggable: true, "aria-grabbed": String(this.isDragging), onClick: this.handleTagClick, onKeyDown: this.handleContentKeyDown, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd }, h("slot", null))) : (h("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, h("slot", null))), this.dismissible && (h("button", { key: '3c6007ea3377848cb83ffcfbcb11b84a4ce1219d', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, h("xpl-icon", { key: '7d45494a1327aff09948d687997e531e2e96be4e', icon: "xmark", size: 10 })))));
     }
     static get is() { return "xpl-tag"; }
     static get properties() {

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

@@ -1,6 +1,19 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForComponentsRender } from "../../../../src/utils/story-vrt";
 export default {
     title: 'Components/Toast',
     component: 'xpl-toast',
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({
+            enable: true,
+            failureThreshold: 1,
+            failureThresholdType: 'percent',
+        });
+    },
+    play: async ({ canvasElement }) => {
+        await waitForComponentsRender(canvasElement);
+    },
     argTypes: {
         variant: {
             options: ['neutral', 'warning', 'success'],
@@ -25,7 +38,7 @@ export const Toast = ({ variant, showIcon, dismissible, toastTitle, caption, sho
         show-icon="${showIcon}"
         caption="${caption}"
         dismissible="${dismissible}"
-        timeout="${timeout}"
+        timeout="${timeout ?? 8000}"
     >
         <p slot="title">${toastTitle}</p>
         ${showAction
@@ -40,40 +53,53 @@ Toast.args = {
     dismissible: true,
     toastTitle: 'This is a toast',
     caption: 'This is the caption',
-    timeout: 8000,
+    timeout: 0,
 };
 Toast.parameters = {
     'web-component': {
         render: Toast(Toast.args),
     },
     html: {
-        render: (({ variant, showIcon, dismissible, toastTitle, caption, showAction }) => {
+        render: ((args) => {
+            const { variant, showIcon, dismissible, toastTitle, caption, showAction } = args;
             const getIcon = () => {
                 switch (variant) {
                     case 'warning':
-                        return '<xpl-icon icon="alert-hex" size="24" />';
+                        return '<xpl-icon icon="octagon-warning" size="24" />';
                     case 'success':
-                        return '<xpl-icon icon="check-circle" size="24" />';
+                        return '<xpl-icon icon="circle-check" size="24" />';
                     default:
-                        return '<xpl-icon icon="comment-alt" size="24" />';
+                        return '<xpl-icon icon="message-writing" size="24" />';
                 }
             };
             return `
-                <div class="toast toast--${variant}">
-                    <div class="toast__left">
-                        ${showIcon ? `<span class="toast__icon">${getIcon()}</span>` : ''}
-                        <div class="toast__notification">
-                            <p class="toast__title">${toastTitle}</p>
-                            <p class="xpl-toast__caption">
-                                ${caption === null || caption === void 0 ? void 0 : caption.substring(0, 85)}
-                            </p>
+                <div class="xpl-toast xpl-toast--${variant}">
+                    <div class="xpl-toast__left">
+                        ${showIcon
+                ? `<div class="xpl-toast__icon xpl-toast__icon--${variant}">${getIcon()}</div>`
+                : ''}
+                        <div class="xpl-toast__notification">
+                            <p class="xpl-toast__title">${toastTitle}</p>
+                            ${caption
+                ? `<p class="xpl-toast__caption">${caption.substring(0, 85)}</p>`
+                : ''}
                         </div>
                     </div>
-                    <div class="toast__action">
-                        ${showAction ? `<button class="toast__button">Test Action</button>` : ''}
+                    <div class="xpl-toast__action">
+                        ${showAction
+                ? `<xpl-button size="sm" variant="${variant}">Test Action</xpl-button>`
+                : ''}
                     </div>
                     ${dismissible
-                ? `<button class="toast__close"><xpl-icon icon="x" /></button>`
+                ? `<div class="xpl-toast__close">
+                        <xpl-button
+                            variant="tertiary"
+                            size="sm"
+                            icon-only
+                            icon="xmark"
+                            aria-label="Dismiss notification"
+                        ></xpl-button>
+                    </div>`
                 : ''}
                 </div>
             `;

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

@@ -1,71 +1,102 @@
 import { Host, h } from "@stencil/core";
+let dismissablePropDeprecationWarned = false;
+function warnDismissableDeprecation() {
+    if (dismissablePropDeprecationWarned)
+        return;
+    dismissablePropDeprecationWarned = true;
+    console.warn('[xpl-toast] The "dismissable" prop is deprecated (misspelled). Use "dismissible" instead.');
+}
 export class Toast {
     constructor() {
-        this.variant = 'neutral';
+        this.caption = '';
+        this.dismissible = true;
         this.showIcon = true;
-        this.dismissable = true;
         this.timeout = 8000;
+        this.variant = 'neutral';
         this.handleAnimationEnd = () => {
-            var _a, _b;
-            if ((_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.contains('xpl-toast--dismissed'))
-                (_b = this.el) === null || _b === void 0 ? void 0 : _b.remove();
+            if (this.el?.classList.contains('xpl-toast--dismissed'))
+                this.el?.remove();
         };
         this.getIcon = () => {
             switch (this.variant) {
                 case 'warning':
-                    return h("xpl-icon", { size: 24, icon: "alert-hex" });
+                    return h("xpl-icon", { size: 24, icon: "octagon-warning" });
                 case 'success':
-                    return h("xpl-icon", { size: 24, icon: "check-circle" });
+                    return h("xpl-icon", { size: 24, icon: "circle-check" });
                 default:
-                    return h("xpl-icon", { size: 24, icon: "comment-alt" });
+                    return h("xpl-icon", { size: 24, icon: "message-writing" });
             }
         };
         this.dismiss = () => {
-            var _a;
-            (_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.add('xpl-toast--dismissed');
+            this.el?.classList.add('xpl-toast--dismissed');
         };
     }
+    handleDismissableChange() {
+        if (this.dismissable !== undefined) {
+            warnDismissableDeprecation();
+        }
+    }
+    handleTimeoutChange() {
+        this.scheduleAutoDismiss();
+    }
+    disconnectedCallback() {
+        this.clearAutoDismissTimer();
+    }
+    componentWillLoad() {
+        this.handleDismissableChange();
+    }
     componentDidLoad() {
-        const actionCount = this.actionSlot.children.length;
-        if (actionCount < 1) {
-            setTimeout(() => {
+        this.scheduleAutoDismiss();
+    }
+    get isDismissible() {
+        return this.dismissable ?? this.dismissible;
+    }
+    clearAutoDismissTimer() {
+        if (this.dismissTimerId !== undefined) {
+            clearTimeout(this.dismissTimerId);
+            this.dismissTimerId = undefined;
+        }
+    }
+    scheduleAutoDismiss() {
+        this.clearAutoDismissTimer();
+        const actionCount = this.actionSlot?.children?.length ?? 0;
+        if (actionCount < 1 && this.timeout > 0) {
+            this.dismissTimerId = setTimeout(() => {
                 this.dismiss();
             }, this.timeout);
         }
     }
     render() {
-        var _a;
-        return (h(Host, { key: 'c9abdb6db66a9dad0d6ed3d2e6d178ea34852c86', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '7057e31e0f25dab1ba8b093f1dca15e6f08c44e4', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: '7875c518753729ae39a7bb9f2051751924a0d558', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: 'e38c7d0593c16f3dfa83bc4e521f89ee644b46d4', class: "xpl-toast__notification" }, h("p", { key: '8186437158381780554d2509a806704c52450f8c', class: "xpl-toast__title" }, h("slot", { key: '0aa8df0520c33b4576acfb1ad4750a72928b94d5', name: "title" })), this.caption !== '' && (h("p", { key: '3a4ce8f73e498373344b8b692e624f177212a70a', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: '636ff5b9476cea09d21b97f3e1b78860a6f10669', class: "xpl-toast__action", ref: (el) => {
-                this.actionSlot = el;
-            } }, h("slot", { key: '733bc27fba998cdbb97cc1124d8449b539a0fc21', name: "action" })), this.dismissable && (h("div", { key: '8f555e8a02c8aed5095ab659a792e19c242dae98', class: "xpl-toast__close" }, h("button", { key: 'ca64c6cb98c4cda5d2dab208afef54db4832e103', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: 'bf00f852ecffd16504a8ec95f3f6630b1aa569c9', icon: "x" }))))));
+        return (h(Host, { key: 'cb45af3749d6db4042cf89a296fc5215d42249fd', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '0af19edba28e74246fe9eabbdf314c71cb2eefb9', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: '7684b67f9a507516799269b7c30e864ea2b854fc', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: '566ce59e4617b203bb4e9a02ffc07fc422257fda', class: "xpl-toast__notification" }, h("p", { key: 'f5a449e9dc150b12f5a364d8247a3a1247325cab', class: "xpl-toast__title" }, h("slot", { key: '0062ab257b833cacde007e7ca4dfa0a38d38e88f', name: "title" })), this.caption !== '' && (h("p", { key: '824755a3cdec234965fcedc5a9c156b173dc77ad', class: "xpl-toast__caption" }, this.caption?.substring(0, 85))))), h("div", { key: '241131c2221a67a5f9969d2701ab7ed8aeb2d8cf', class: "xpl-toast__action", ref: (el) => {
+                if (el) {
+                    this.actionSlot = el;
+                }
+            } }, h("slot", { key: '2eda8f8f3f7e3e1a4c608d5b5433557b55d3cbf7', name: "action" })), this.isDismissible && (h("div", { key: '92440f49d0c6356f6221471381718b314a928ee2', class: "xpl-toast__close" }, h("xpl-button", { key: 'eb8e975cc5361d8a9b44f6ca8bc3f5a3163c041c', variant: "tertiary", size: "sm", iconOnly: true, icon: "xmark", type: "button", "aria-label": "Dismiss notification", onClick: this.dismiss })))));
     }
     static get is() { return "xpl-toast"; }
     static get properties() {
         return {
-            "variant": {
+            "caption": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'neutral' | 'warning' | 'success'",
-                    "resolved": "\"neutral\" | \"success\" | \"warning\"",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{string} - The variant of the toast"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "The caption of the toast, limited to 85 characters."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "variant",
-                "defaultValue": "'neutral'"
+                "attribute": "caption",
+                "defaultValue": "''"
             },
-            "showIcon": {
+            "dismissable": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -77,40 +108,37 @@ export class Toast {
                 "optional": true,
                 "docs": {
                     "tags": [{
-                            "name": "property",
-                            "text": "{boolean} - Whether or not to show the icon"
+                            "name": "deprecated",
+                            "text": "Misspelled. Use `dismissible` instead. When both are set, `dismissable` wins so\nexisting markup keeps working; `dismissable` is removed in the next major version."
                         }],
-                    "text": ""
+                    "text": "Whether the toast shows a dismiss (close) button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-icon",
-                "defaultValue": "true"
+                "attribute": "dismissable"
             },
-            "caption": {
-                "type": "string",
+            "dismissible": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{string} - The caption of the toast, limited to 85 characters"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Whether the toast shows a dismiss (close) button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "caption"
+                "attribute": "dismissible",
+                "defaultValue": "true"
             },
-            "dismissable": {
+            "showIcon": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -119,18 +147,15 @@ export class Toast {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{boolean} - Whether or not the toast is dismissible"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Whether to show the leading sentiment icon."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "dismissable",
+                "attribute": "show-icon",
                 "defaultValue": "true"
             },
             "timeout": {
@@ -144,19 +169,45 @@ export class Toast {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{number} - The timeout for the toast to dismiss in ms, default 8 seconds"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "How long the toast waits before auto-dismissing, in ms. Set to `0` to disable auto-dismiss.\nIgnored when the `action` slot has content."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "timeout",
                 "defaultValue": "8000"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'neutral' | 'warning' | 'success'",
+                    "resolved": "\"neutral\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The sentiment of the toast."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'neutral'"
             }
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "dismissable",
+                "methodName": "handleDismissableChange"
+            }, {
+                "propName": "timeout",
+                "methodName": "handleTimeoutChange"
+            }];
+    }
 }

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

@@ -1,5 +1,11 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
 export default {
     title: 'Components/Toggle',
+    component: 'xpl-toggle',
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
     argTypes: {
         checked: {
             control: {
@@ -28,7 +34,7 @@ export default {
         },
     },
 };
-export const Toggle = ({ checked, description, disabled, label, heading, variant }) => {
+export const Toggle = ({ checked, description, disabled, label, heading, variant, }) => {
     let attrs = '';
     if (checked)
         attrs += ` checked`;
@@ -54,6 +60,7 @@ Toggle.args = {
 };
 Toggle.parameters = {
     layout: 'centered',
+    htmlSnippet: { mode: 'auto' },
     'web-component': {
         render: Toggle(Toggle.args),
     },

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

@@ -16,13 +16,13 @@ export class Toggle {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (h(Host, { key: 'c57e1813c72cba62eed2927763277341bb0d3f77', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '00ba33da343a47681982f6437f1cb45060d70ae9', class: {
+        return (h(Host, { key: '8088d36a67f046fc7c094b3e1426c8d533c2930e', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '93f1f01ca1c709f77230bc4245a5a77f0f3b48df', class: {
                 'xpl-label': true,
-                'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: '8ec4104abdb16ca405577f061c4cb68580317bc4', class: {
+                'xpl-label--disabled': !!this.disabled,
+            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: '6b39f78fc5991e00d87e792a15f16c60a176a73d', class: {
                 'xpl-description': true,
-                'xpl-description--disabled': this.disabled,
-            } }, this.description)))), h("input", { key: 'face83ccc22985b6d0a4c8b9e4c8dcf1d9d6b72a', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && h("label", { key: 'aa89637f4b60b050a168fcf02e6702d9ed9bd186', htmlFor: this.id }, this.label)));
+                'xpl-description--disabled': !!this.disabled,
+            } }, this.description)))), h("input", { key: '6d178f3d74d18172f2c25370269a7eb4399dc3aa', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && h("label", { key: '2c5310d15e41aedb505a8df32c65aaafc8ffbd70', htmlFor: this.id }, this.label)));
     }
     static get is() { return "xpl-toggle"; }
     static get properties() {

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

@@ -0,0 +1,39 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
+export default {
+    title: 'Components/Toolbar',
+    component: 'xpl-toolbar',
+    tags: ['beta', 'vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
+    argTypes: {
+        selectedItemCount: {
+            control: { type: 'number' },
+        },
+    },
+};
+export const Toolbar = ({ selectedItemCount }) => `
+    <xpl-toolbar selected-item-count="${selectedItemCount}">
+        <xpl-button slot="actions-left" variant="tertiary" size="sm" icon="trash">Delete</xpl-button>
+        <xpl-button slot="actions-left" variant="tertiary" size="sm" icon="export">Export</xpl-button>
+        <xpl-button slot="actions-right" variant="tertiary" size="sm" icon-only icon="xmark">Clear</xpl-button>
+    </xpl-toolbar>
+`;
+Toolbar.args = {
+    selectedItemCount: 3,
+};
+Toolbar.parameters = {
+    layout: 'fullscreen',
+    docs: {
+        description: {
+            story: 'The toolbar is an always-dark selection bar. It is hidden until `selectedItemCount` is greater than 0, and renders bulk actions in the `actions-left` and `actions-right` slots.',
+        },
+    },
+    'web-component': {
+        render: Toolbar(Toolbar.args),
+    },
+};

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

@@ -12,11 +12,11 @@ export class Toolbar {
         this.selectedItemCount = event.detail.length;
     }
     render() {
-        return (h(Host, { key: 'eda1f57ef1a207b82f622f090dd30f21d60bbc61', class: {
+        return (h(Host, { key: '6407dc110234806b694bd78e98920c96db62b678', class: {
                 'xpl-toolbar': true,
                 dark: true,
                 hidden: this.selectedItemCount === 0,
-            } }, h("div", { key: 'fe703bf7fb49ebe27f4eee7973ea1e24c5ed50a4', class: "toolbar" }, h("p", { key: 'd0d9cb84b4828688aabbabb3395ff3c18c4d2a78', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'c1259be179d245e4c18a3690f800eb493f491ba9', class: "actions" }, h("slot", { key: '40000dda8efbfd0aa7175e0e5db1c1c9f4e7e89f', name: "actions-left" }), h("slot", { key: '255e21ebb1af8fde1bb76a1a1243eeadc4146d3d', name: "actions-right" })))));
+            } }, h("div", { key: '42c9e451f0f796bf8b3ed967699deb4824ae9d76', class: "toolbar" }, h("p", { key: 'bc5a48dfc2f431a4e88337fa792920413048e059', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'ff4caddf1a499b238df37b5ed62543168fe32f4e', class: "actions" }, h("slot", { key: 'dd8225846c76dd50c943a4adc0e373717dc9c5c2', name: "actions-left" }), h("slot", { key: '066999024eb8cc98be2cfec8077b2afab99e3feb', name: "actions-right" })))));
     }
     static get is() { return "xpl-toolbar"; }
     static get properties() {

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

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

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

@@ -6,7 +6,7 @@ export class Tooltip {
         this.hideArrow = false;
     }
     render() {
-        return (h(Host, { key: '9890dea245d2fbd24c67fea6e39ce3430ffc8d81' }, h("div", { key: '0930c7ee1f0e1f6a625f41e34f31d2432fdff7eb', class: "xpl-tooltip-container" }, h("slot", { key: '3b9a8aebce020a13f3d7ef624b59c06e55398907' }), h("div", { key: '50fe33b8bef96df08899b449065558ea8f2ed820', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text, !this.hideArrow && (h("div", { key: '53668e28af956a2293c36eb4991782aee8542378', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: 'ebbbf0e6b2a848af99d14ddecdb70723bff5181b' })))))));
+        return (h(Host, { key: '1c9ac51c0d216a2822ec5637a02fa133c4055fe6' }, h("div", { key: '391476229ce86ce8502c7516d79a755d162c4bbb', class: "xpl-tooltip-container" }, h("slot", { key: '66e1f7420b538f6134170cb2ddfaaadb4f788783' }), h("div", { key: '017b59ec94760da135f7f4a00b042be023d7849f', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text, !this.hideArrow && (h("div", { key: '248aa16bbc3a7945ce6cf57bc5ce832f3676cc91', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: 'ca8a4d517630feb5833509644a335f08fa775b8b' })))))));
     }
     static get is() { return "xpl-tooltip"; }
     static get properties() {