@xplortech/apollo-core 2.6.0 → 2.7.1

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

@@ -0,0 +1,153 @@
+function tagAttrs(args) {
+    const { disabled, dismissible, isDraggable, size, tagId } = args;
+    return [
+        `size="${size}"`,
+        disabled ? 'disabled' : '',
+        dismissible ? '' : 'dismissible="false"',
+        isDraggable ? 'is-draggable' : '',
+        tagId ? `tag-id="${tagId}"` : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
+export default {
+    title: 'Components/Tag',
+    component: 'xpl-tag',
+    argTypes: {
+        size: {
+            options: ['default', 'sm'],
+            control: { type: 'select' },
+        },
+        disabled: { control: 'boolean' },
+        dismissible: { control: 'boolean' },
+        isDraggable: { control: 'boolean' },
+        slot: { control: 'text' },
+        tagId: { control: 'text' },
+    },
+};
+export const Tag = (args) => {
+    var _a;
+    const attrs = tagAttrs(args);
+    const text = (_a = args.slot) !== null && _a !== void 0 ? _a : '';
+    return `
+        <div style="padding: var(--xpl-space-32);">
+            <xpl-tag ${attrs}>${text}</xpl-tag>
+        </div>
+
+        <hr style="margin: var(--xpl-space-32) 0; border: none; border-top: var(--xpl-border-small) solid var(--xpl-border-subtle)" />
+
+        <p style="margin: 0 0 var(--xpl-space-12); color: var(--xpl-text-subdued)">Drag tags to reorder them within the container.</p>
+        <div
+            id="drag-playground"
+            style="display: flex; flex-wrap: wrap; gap: var(--xpl-space-8); padding: var(--xpl-space-16); border: var(--xpl-border-large) dashed var(--xpl-border-default); border-radius: var(--xpl-border-radius-default); min-height: var(--xpl-size-300); transition: border-color 0.2s"
+        >
+            <xpl-tag tag-id="tag-design" is-draggable ${attrs}>Design</xpl-tag>
+            <xpl-tag tag-id="tag-develop" is-draggable ${attrs}>Development</xpl-tag>
+            <xpl-tag tag-id="tag-qa" is-draggable ${attrs}>QA</xpl-tag>
+            <xpl-tag tag-id="tag-release" is-draggable ${attrs}>Release</xpl-tag>
+        </div>
+        <script>
+            (function() {
+                const container = document.getElementById('drag-playground');
+                if (!container) return;
+                let draggedElement = null;
+
+                container.addEventListener('dragstart', function(e) {
+                    const tag = e.target instanceof Element ? e.target.closest('xpl-tag') : null;
+                    if (tag) {
+                        draggedElement = tag;
+                        container.style.borderColor = 'var(--xpl-border-accent-information)';
+                    }
+                });
+
+                container.addEventListener('dragend', function() {
+                    draggedElement = null;
+                    container.style.borderColor = '';
+                });
+
+                container.addEventListener('dragover', function(e) {
+                    e.preventDefault();
+                    if (!draggedElement) return;
+                    const afterElement = getDragAfterElement(container, e.clientX);
+                    if (afterElement == null) {
+                        container.appendChild(draggedElement);
+                    } else {
+                        container.insertBefore(draggedElement, afterElement);
+                    }
+                });
+
+                function getDragAfterElement(cont, x) {
+                    const els = [...cont.querySelectorAll('xpl-tag')].filter(el => el !== draggedElement);
+                    return els.reduce((closest, child) => {
+                        const box = child.getBoundingClientRect();
+                        const offset = x - box.left - box.width / 2;
+                        return offset < 0 && offset > closest.offset
+                            ? { offset, element: child }
+                            : closest;
+                    }, { offset: Number.NEGATIVE_INFINITY }).element;
+                }
+            })();
+        </script>
+    `;
+};
+Tag.args = {
+    disabled: false,
+    dismissible: true,
+    isDraggable: false,
+    size: 'default',
+    slot: 'Tag label',
+    tagId: '',
+};
+Tag.parameters = {
+    layout: 'padded',
+    docs: {
+        description: {
+            story: 'Tags represent interactive keywords for labeling and categorization. Use `size` to switch between Default (24px) and Small (20px) variants. Set `dismissible={false}` to hide the close button. Set `disabled` to disable interaction. Try long text in the `slot` control to see truncation at max-width.',
+        },
+    },
+    'web-component': {
+        render: (() => {
+            var _a;
+            const args = Object.assign({}, Tag.args);
+            const attrs = tagAttrs(args);
+            return `<xpl-tag ${attrs}>${(_a = args.slot) !== null && _a !== void 0 ? _a : ''}</xpl-tag>`;
+        })(),
+    },
+    html: {
+        render: (() => {
+            var _a, _b;
+            const args = Object.assign({}, Tag.args);
+            const sizeMod = args.size === 'sm' ? 'xpl-tag--sm' : '';
+            const disabledMod = args.disabled ? 'xpl-tag--disabled' : '';
+            const dismissibleMod = args.dismissible ? 'xpl-tag--dismissible' : '';
+            const dragEnabled = args.isDraggable && !args.disabled;
+            const draggableMod = dragEnabled ? 'xpl-tag--draggable' : '';
+            const hostClasses = [
+                'xpl-tag',
+                'xpl-tag-container',
+                sizeMod,
+                disabledMod,
+                dismissibleMod,
+                draggableMod,
+            ]
+                .filter(Boolean)
+                .join(' ');
+            const contentTag = dragEnabled ? 'div' : 'button';
+            const disabledAttr = args.disabled ? ' disabled' : '';
+            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 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>`
+                : '';
+            return `<div class="${hostClasses}">${contentEl}${dismissButton}</div>`;
+        })(),
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=15243-65363',
+    },
+};

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

@@ -1,13 +1,246 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 export class Tag {
-    render() {
-        return (h(Host, { key: '6a2aaaef81c317bb30ebfc20266581205db73ce2', class: "xpl-tag-container" }, h("button", { key: '2aaae9dd6bbdb13db531cf249baa96bfa15aff55', class: "xpl-tag", onClick: () => {
-                this.close.emit();
-            } }, h("slot", { key: 'cd56059cee54af39ce61e7560e00e013646c648f' })), h("button", { key: 'd529f61e40d097db2832e550e0f0b05c8ccc9179', class: "xpl-tag__close", onClick: () => {
+    constructor() {
+        this.dismissAriaLabelSuffix = 'tag';
+        this.isDragging = false;
+        this.disabled = false;
+        this.dismissible = true;
+        this.isDraggable = false;
+        this.size = 'default';
+        this.handleTagClick = (_event) => {
+            if (this.disabled) {
+                return;
+            }
+            if (!this.isDraggable) {
                 this.close.emit();
-            } }, "\u00D7")));
+            }
+        };
+        this.setDragPreviewToHost = (event) => {
+            if (!event.dataTransfer) {
+                return;
+            }
+            try {
+                const rect = this.el.getBoundingClientRect();
+                const offsetX = Math.max(0, event.clientX - rect.left);
+                const offsetY = Math.max(0, event.clientY - rect.top);
+                event.dataTransfer.setDragImage(this.el, offsetX, offsetY);
+            }
+            catch (_a) {
+            }
+        };
+        this.handleContentKeyDown = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            if (event.key !== 'Enter' && event.key !== ' ') {
+                return;
+            }
+            event.preventDefault();
+        };
+        this.handleDismissClick = (event) => {
+            event.stopPropagation();
+            if (this.disabled) {
+                return;
+            }
+            this.close.emit();
+            this.tagRemove.emit();
+        };
+        this.handleDragStart = (event) => {
+            this.isDragging = true;
+            if (event.dataTransfer) {
+                event.dataTransfer.effectAllowed = 'move';
+                this.setDragPreviewToHost(event);
+                if (this.tagId) {
+                    event.dataTransfer.setData('application/x-tag-id', this.tagId);
+                }
+                event.dataTransfer.setData('text/plain', this.getContentLabelText());
+            }
+            this.tagDragStart.emit({
+                tagId: this.tagId,
+                content: this.getContentLabelText(),
+                originalEvent: event,
+            });
+        };
+        this.handleDragEnd = (event) => {
+            var _a;
+            this.isDragging = false;
+            const wasDropped = ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.dropEffect) === 'move';
+            this.tagDragEnd.emit({
+                tagId: this.tagId,
+                dropped: wasDropped,
+                originalEvent: event,
+            });
+        };
+        this.handleDragOver = (event) => {
+            if (this.disabled || !this.isDraggable) {
+                return;
+            }
+            event.preventDefault();
+            if (event.dataTransfer) {
+                event.dataTransfer.dropEffect = 'move';
+            }
+        };
+        this.handleDragEnter = (event) => {
+            if (this.disabled || !this.isDraggable) {
+                return;
+            }
+            event.preventDefault();
+        };
+        this.handleHostDragStart = (event) => {
+            if (event.target === this.el && this.isDraggable) {
+                event.preventDefault();
+            }
+        };
+    }
+    onDisabledChange(newValue) {
+        if (newValue && this.isDragging) {
+            this.isDragging = false;
+        }
+    }
+    onIsDraggableChange(newValue) {
+        if (!newValue && this.isDragging) {
+            this.isDragging = false;
+        }
+    }
+    componentDidRender() {
+        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();
+    }
+    syncDismissAriaLabelSuffix() {
+        if (!this.el.isConnected) {
+            return;
+        }
+        const trimmed = this.getContentLabelText();
+        const next = trimmed === '' ? 'tag' : trimmed;
+        if (next !== this.dismissAriaLabelSuffix) {
+            this.dismissAriaLabelSuffix = next;
+        }
+    }
+    render() {
+        const dragEnabled = this.isDraggable && !this.disabled;
+        return (h(Host, { key: '7e85098bb9f5e8c0fceee3e7947337e0799c4de8', class: {
+                'xpl-tag': true,
+                'xpl-tag-container': true,
+                'xpl-tag--disabled': this.disabled,
+                'xpl-tag--dismissible': this.dismissible,
+                '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: 'cb875506819a0a58d42add85a1a09e95e4786eba', 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: '431f061a4c96dacb9dc76a753c9d2de01491b2be', icon: "xmark", size: 10 })))));
     }
     static get is() { return "xpl-tag"; }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tag is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tag shows a dismiss button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "true"
+            },
+            "isDraggable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the tag label uses native HTML5 drag (the inner label is the drag source).\nNamed `isDraggable` so the Stencil prop does not collide with the native `HTMLElement.draggable`\nAPI. `reflect: false` avoids syncing a `draggable` attribute onto the host; the inner label\nremains the drag source. Host `onDragStart` still suppresses stray native drags from host chrome."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-draggable",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'sm'",
+                    "resolved": "\"default\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the tag"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'default'"
+            },
+            "tagId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional stable id for the tag. When set, it is included in `tagDragStart` / `tagDragEnd` detail\nand written to `dataTransfer` as `application/x-tag-id`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag-id"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dismissAriaLabelSuffix": {},
+            "isDragging": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "close",
@@ -15,15 +248,85 @@ export class Tag {
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `tagRemove` for dismiss button clicks only. The `close` event will be removed in a future major version."
+                        }],
+                    "text": "Emitted when the tag is dismissed (content click when `isDraggable` is false, or dismiss button click)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tagDragEnd",
+                "name": "tagDragEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a drag operation ends. `event.detail`: `{ tagId?, dropped, originalEvent }`.\n`dropped` is `true` when `dataTransfer.dropEffect === 'move'`.\n`originalEvent` is the native `DragEvent`; browsers may clear `dataTransfer` after the\nsynchronous handler runs \u2014 do not read `originalEvent.dataTransfer.getData(...)` asynchronously."
+                },
+                "complexType": {
+                    "original": "TagDragEndDetail",
+                    "resolved": "TagDragEndDetail",
+                    "references": {
+                        "TagDragEndDetail": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-tag/xpl-tag.tsx",
+                            "id": "src/components/components/xpl-tag/xpl-tag.tsx::TagDragEndDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "tagDragStart",
+                "name": "tagDragStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Callback function that is called when tag text or `x` icon is clicked"
+                    "text": "Emitted when a drag operation starts (native `dragstart` on the inner label).\n`event.detail`: `{ tagId?, content, originalEvent }`.\n`originalEvent` is the native `DragEvent`; browsers may clear `dataTransfer` after the\nsynchronous handler runs \u2014 do not read `originalEvent.dataTransfer.getData(...)` asynchronously."
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "TagDragStartDetail",
+                    "resolved": "TagDragStartDetail",
+                    "references": {
+                        "TagDragStartDetail": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-tag/xpl-tag.tsx",
+                            "id": "src/components/components/xpl-tag/xpl-tag.tsx::TagDragStartDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "tagRemove",
+                "name": "tagRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the tag dismiss (\u00D7) button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
                     "references": {}
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "onDisabledChange"
+            }, {
+                "propName": "isDraggable",
+                "methodName": "onIsDraggableChange"
+            }];
+    }
 }

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

@@ -35,9 +35,9 @@ export class Toast {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'b8a25651f1dd57f9f574cd6401877295a6ca7101', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '20adfa314269787a9a03e793a1b74b9c5fb47585', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: 'e3346cee07a34c61ed825966c59c9c8ac30f6302', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: 'e85cc1925897c34079e73a9d094c681c835548f4', class: "xpl-toast__notification" }, h("p", { key: '467fc15e4d26f240d735ddc957218bb7ab508dab', class: "xpl-toast__title" }, h("slot", { key: '3b339cd7b382043919139e83679e7033d63c3196', name: "title" })), this.caption !== '' && (h("p", { key: '675f42d92a7bd0527416e5eb77a56a7319d8f9a5', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: '1904c868cba4f3178b0470b7381c23925a732a16', class: "xpl-toast__action", ref: (el) => {
+        return (h(Host, { key: '4f470ceb525c35a86ddbf65365fac1674ebe7033', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '04da6ca2777ceb222da2f4fd831d8aef5101a667', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: '0e5e75aa05e96361700c0c7b9eccbc4c5b75a00c', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: 'f1ccc651318b6d7128255918bdd68ef36a249e9f', class: "xpl-toast__notification" }, h("p", { key: '1ae879d8a670a0f1a4928bfa2a0692581040dca1', class: "xpl-toast__title" }, h("slot", { key: 'b819a773c11b88cb00f8638db8a960de55ce6508', name: "title" })), this.caption !== '' && (h("p", { key: '8f6eb8dd769e4aaf5b16b3caafd9e9ec5408a7e1', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: '46ae2f04fa38b50d2a07082b6972590f6bd28005', class: "xpl-toast__action", ref: (el) => {
                 this.actionSlot = el;
-            } }, h("slot", { key: '33c8ef7761d07e4d38b2a2a73c058f6769bc7a44', name: "action" })), this.dismissable && (h("div", { key: '3d67f14c2704a6b054be63ad35a9bd3d5355b4ca', class: "xpl-toast__close" }, h("button", { key: '345b314745b40b2c802b0221ea64d90bd5c36b38', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: '39634fb5cc157a05b05d2245d66fc23d96a1c790', icon: "x" }))))));
+            } }, h("slot", { key: '69512a9b482bb54252527d798dfa2884a19b7d8c', name: "action" })), this.dismissable && (h("div", { key: '818a5f9dde1a9c9b7ab3cd62cd807200e3687af6', class: "xpl-toast__close" }, h("button", { key: '3a617189f8f031e119a125efce0ab35a7f5cf31f', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: 'd86187aed0665da278f953be5ab92f7051f44438', icon: "x" }))))));
     }
     static get is() { return "xpl-toast"; }
     static get properties() {

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

@@ -12,13 +12,13 @@ export class Toggle {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (h(Host, { key: 'fe018e63a2c645565150c2b5494e057b24421cf3', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '461ba525112e90914f3d61b221f938ec94861b58', class: {
+        return (h(Host, { key: '0cf2e99934bbe447559fbe88cc61989bbfabbdea', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '7ab6e5535b8d88a5aabb5ced76faca68b2a8abcd', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: 'd764ac2dc9341192079f3791ce3e784c0d810c41', class: {
+            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: '0b8157e097f3890d6c521c399cf1f9c25514e341', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
-            } }, this.description)))), h("input", { key: '9fd76e6a84d08db81941db0aaa742c4e0205bffa', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && h("label", { key: 'fc58e8c3dba8a45a7c2aedda7daff3788f4dc0a0', htmlFor: this.id }, this.label)));
+            } }, this.description)))), h("input", { key: '3bcfe674974e16e50a38d17836da0aa1c49fd6dc', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && h("label", { key: 'cc91cdb86fb6bb4c7bfbabb6d47edf03adb53857', htmlFor: this.id }, this.label)));
     }
     static get is() { return "xpl-toggle"; }
     static get properties() {

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: '48056451ad54987de8d046a3892cc1011ed41bbb', class: {
+        return (h(Host, { key: '156bc52063283c17215e1d3a90c25939ae92685b', class: {
                 'xpl-toolbar': true,
                 dark: true,
                 hidden: this.selectedItemCount === 0,
-            } }, h("div", { key: '3c9680e4cf006dee69372d271a0720b6802767bc', class: "toolbar" }, h("p", { key: 'afcfba4a2d5c73d6bf602b94340280dcc28d6493', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'fdadc34738fcf397a38772ab817c3a5bc1e5015f', class: "actions" }, h("slot", { key: 'b6571d83f8ac800143e4f9cd62559aac83c7e424', name: "actions-left" }), h("slot", { key: '30aa34da340647dbcb79f8862c5ca9647ebedb12', name: "actions-right" })))));
+            } }, h("div", { key: '184e28d57a16d8ba6e10f29a95c931a036f44515', class: "toolbar" }, h("p", { key: 'ff6a7137db216c71859eac4398bbaf8bc6fe18f9', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'a610539a08383a3d1d3dad8d95a8b75f43eaf1a3', class: "actions" }, h("slot", { key: 'dd8ea3150b40926ab40f36d38770daaa969a6fff', name: "actions-left" }), h("slot", { key: 'b51f8940fb52dd6880841a917574f782e0d0c72c', name: "actions-right" })))));
     }
     static get is() { return "xpl-toolbar"; }
     static get properties() {

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

@@ -6,7 +6,7 @@ export class Tooltip {
         this.hideArrow = false;
     }
     render() {
-        return (h(Host, { key: '849e02776ea70de89a5bd3c133df6205ff3265b3' }, h("div", { key: '98947c9ece90e6ebcbf90c23cd2e1c0902ae59d5', class: "xpl-tooltip-container" }, h("slot", { key: 'a24df50f2081fcc4ef70c685933fab1420eb850a' }), h("div", { key: 'be1a1832cdf428f2d368258b3a784e7b27589a97', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text), !this.hideArrow && (h("div", { key: '43241958db2b8fec0993040f7321bca7d5a163e6', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: '34359c7bec6b7ee0616eac8961e9941b60c7d321' }))))));
+        return (h(Host, { key: 'a118d629923a433680360f746e063ca94d5f1c6a' }, h("div", { key: 'cfd9742ee2cebd56994480bd2a601cb4e93b12a9', class: "xpl-tooltip-container" }, h("slot", { key: '8aae99e1a187f8f737e896ccfd00d67f1cfeb3b3' }), h("div", { key: '4b418074b2ac7f8760f09e3af033ea93f7a0012e', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text), !this.hideArrow && (h("div", { key: 'ef6a166f78250f1f98eae41661fd7020b36eeaae', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: '7baecae00ab178f715c89443d250b068861afe5f' }))))));
     }
     static get is() { return "xpl-tooltip"; }
     static get properties() {