@getflip/swirl-components 0.483.0 → 0.484.0

package/dist/collection/components/swirl-thumbnail/swirl-thumbnail.js

@@ -1,28 +1,86 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
+const COMPACT_SIZES = ["s", "m", "l"];
 export class SwirlThumbnail {
     constructor() {
+        this.cursor = "pointer";
         this.editButtonIcon = "<swirl-icon-crop></swirl-icon-crop>";
         this.editButtonLabel = "Edit";
         this.format = "landscape";
+        this.menuButtonLabel = "More actions";
+        this.openButtonIcon = "<swirl-icon-visibility></swirl-icon-visibility>";
+        this.openButtonLabel = "Open";
         this.progressLabel = "Loading progress";
+        this.removeButtonIcon = "<swirl-icon-delete></swirl-icon-delete>";
         this.removeButtonLabel = "Remove";
         this.size = "m";
+        this.hasHover = true;
+        this.onEditClick = (event) => {
+            this.edit.emit(event);
+            this.popoverEl?.close();
+        };
+        this.onOpenClick = (event) => {
+            this.thumbnailClick.emit(event);
+            this.popoverEl?.close();
+        };
+        this.onRemoveClick = (event) => {
+            this.remove.emit(event);
+            this.popoverEl?.close();
+        };
+        this.onHoverChange = (event) => {
+            this.hasHover = event.matches;
+        };
+    }
+    connectedCallback() {
+        if (typeof window === "undefined" || !window.matchMedia) {
+            return;
+        }
+        this.hoverMediaQuery = window.matchMedia("(hover: hover)");
+        this.hasHover = this.hoverMediaQuery.matches;
+        this.hoverMediaQuery.addEventListener?.("change", this.onHoverChange);
+    }
+    disconnectedCallback() {
+        this.hoverMediaQuery?.removeEventListener?.("change", this.onHoverChange);
+        this.hoverMediaQuery = undefined;
+    }
+    componentDidRender() {
+        if (this.popoverTriggerEl && this.popoverEl) {
+            this.popoverTriggerEl.swirlPopover = this.popoverEl;
+        }
     }
     render() {
-        const showInteractable = (this.size === "xl" || this.size === "2xl") && this.format === "square";
-        const showRemoveButton = this.showRemoveButton && showInteractable;
-        const showEditButton = this.showEditButton &&
-            showInteractable &&
-            !(this.size === "xl" && showRemoveButton);
-        const showButtonGroup = showEditButton || showRemoveButton;
-        const showTimestamp = Boolean(this.timestamp) && showInteractable;
-        const ImageWrapper = this.interactive ? "button" : "span";
+        const isCompact = COMPACT_SIZES.includes(this.size);
+        const isUploading = this.progress !== undefined;
+        const showError = Boolean(this.error);
+        const showUploadingOverlay = isUploading && !showError;
+        const showEditButton = Boolean(this.showEditButton);
+        const showRemoveButton = Boolean(this.showRemoveButton);
+        const hasAnyAction = showEditButton || showRemoveButton;
+        const useThumbnailAsPopoverTrigger = !this.hasHover && hasAnyAction;
+        const showCompactMenu = isCompact && this.hasHover && showEditButton && showRemoveButton;
+        const showCompactEditButton = isCompact && this.hasHover && showEditButton && !showRemoveButton;
+        const showCompactRemoveButton = isCompact && this.hasHover && showRemoveButton && !showEditButton;
+        const showSegmentedGroup = !isCompact && this.hasHover && hasAnyAction;
+        const showPopover = showCompactMenu || useThumbnailAsPopoverTrigger;
+        const showOpenAction = useThumbnailAsPopoverTrigger && this.interactive;
+        const showTimestamp = Boolean(this.timestamp) && this.size !== "s";
+        const hideTimestampForUploading = isUploading && isCompact;
+        const isImageWrapperButton = this.interactive || useThumbnailAsPopoverTrigger;
+        const ImageWrapper = isImageWrapperButton ? "button" : "span";
         const className = classnames("thumbnail", `thumbnail--format-${this.format}`, `thumbnail--size-${this.size}`, {
             "thumbnail--interactive": this.interactive,
-            "thumbnail--has-progress": this.progress !== undefined,
+            "thumbnail--uploading-bar": isUploading && !isCompact,
         });
-        return (h(Host, { key: '5bc10ca0eb14a06dc7c6a72cede93d36c613214c' }, h("span", { key: '4523056916a2132b7c2b964fbe6e7e337590f63c', class: className, role: "group" }, h(ImageWrapper, { key: 'efa9b35d3151d6948ce7bc66314b5da4e55f5f85', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: '63a56765433c59dee5499c5b28de2bfffde1c7ad', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: 'fcabdab3221ead6e7c12e6b1586c6d68c0779c17', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: 'c9c31ce168b9427a94cbd0593a31e26e3c0bb5c8', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: '5c0b3d9a2393bef230d61ddfa219de99146dd087', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: '1c2b15b0a651247bdcccc76576d62f2c7ab51207' }, h("swirl-button", { key: '2aab8450f7b3a1216ec20a950eeffd6f7cdc8b5b', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: 'e8f4b28fd68dddf920d9d7af96110c87832eb8cb' }, h("swirl-button", { key: '4459e8f2c4931dcd0abb009ebeed4d64b06323f4', hideLabel: true, icon: "<swirl-icon-delete></swirl-icon-delete>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: '2e754460a8b4df69c027b281882b3169dabb363a', class: "thumbnail__timestamp" }, this.timestamp)))));
+        const imageWrapper = (h(ImageWrapper, { key: 'ba572297c4bc18760c2c106b4e738b49d68a53df', class: "thumbnail__image-wrapper", onClick: useThumbnailAsPopoverTrigger ? undefined : this.thumbnailClick.emit, style: isImageWrapperButton && this.cursor !== "pointer"
+                ? { cursor: this.cursor }
+                : undefined, type: isImageWrapperButton ? "button" : undefined }, h("img", { key: 'c80259bd15a87f787435ffc974be78f0d59297d7', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })));
+        return (h(Host, { key: 'e117c0dc831ba538324e0066c7fa1f638545271f' }, h("span", { key: '928b82872d5bb8fafc184a76c6d4321bb3b48745', class: className, role: "group" }, useThumbnailAsPopoverTrigger ? (h("swirl-popover-trigger", { ref: (el) => (this.popoverTriggerEl = el), swirlPopover: this.popoverEl }, imageWrapper)) : (imageWrapper), showUploadingOverlay && (h("span", { key: 'f12c5faf328c7a625133974385e3cdd49da66e19', class: isCompact
+                ? "thumbnail__uploading-overlay"
+                : "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '1f4544f587af7e8a580cfda0b85e688b3bcf7b35', label: this.progressLabel, size: isCompact ? "s" : undefined, value: this.progress, variant: isCompact ? "circle" : undefined }))), showError && (h("span", { key: '7babb76a660d6406346a42d0797ad540a6a08368', class: "thumbnail__error" }, h("swirl-icon-error", { key: '2076a840833af16d26a2deed5717476d04120669', color: "critical" }))), showSegmentedGroup && (h("swirl-button-group", { key: '757bcb7b1679b7e222af8ebcb2f7e129b0cfb2be', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: '8af120c6ca0e5880f66431242fe2325de36c4c93' }, h("swirl-button", { key: '30f31e9bbbc2a1185b5f294a790120a518cb6835', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, variant: "on-image" }))), showRemoveButton && (h("span", { key: '9f74a1266a0af9aa49762acebfa41ce826ec2509' }, h("swirl-button", { key: '2768666d0976934786c156d468ca5fc5b2062d52', hideLabel: true, icon: this.removeButtonIcon, label: this.removeButtonLabel, onClick: this.remove.emit, variant: "on-image" }))))), (showCompactEditButton || showCompactRemoveButton) && (h("span", { key: '38bf22b5d9ac7f092c9e7e787054494db2358126', class: "thumbnail__compact-action" }, h("button", { key: '202087b05c0929f17802ce3cfd6de194b5f6d194', "aria-label": showCompactEditButton
+                ? this.editButtonLabel
+                : this.removeButtonLabel, class: "thumbnail__compact-button", onClick: showCompactEditButton ? this.edit.emit : this.remove.emit, type: "button" }, h("span", { key: '043d9c2a87f6ab7fdfd90f78fff2eb33566b47ac', innerHTML: showCompactEditButton
+                ? this.editButtonIcon
+                : this.removeButtonIcon, ref: (el) => el?.children[0]?.setAttribute("size", "20") })))), showCompactMenu && (h("span", { key: 'acfe9142f49d86b61eb9235682e61d6fde4ff373', class: "thumbnail__compact-action" }, h("swirl-popover-trigger", { key: '824c061b9a86de1f6a550feeec4747129bf558e2', ref: (el) => (this.popoverTriggerEl = el), swirlPopover: this.popoverEl }, h("button", { key: '41b381bf338f21725e189613f69604821fdf33c1', "aria-label": this.menuButtonLabel, class: "thumbnail__compact-button", type: "button" }, h("swirl-icon-more-horizontal", { key: '9c60e34c4149d2f6d4ee9452d763b74ca5820721', size: 20 }))))), showPopover && (h("swirl-popover", { key: 'f0bdf5a554b2c86a9829f0cc7cd7bf98afff85df', label: this.menuButtonLabel, placement: "bottom-end", padded: false, ref: (el) => (this.popoverEl = el) }, h("swirl-action-list", { key: 'ebc942d4e0774005b725a7d947119eb297f8e798' }, showOpenAction && (h("swirl-action-list-item", { key: '811143ffecfcf512595d7c661500fc0d80f69c33', icon: this.openButtonIcon, label: this.openButtonLabel, onClick: this.onOpenClick })), showEditButton && (h("swirl-action-list-item", { key: '35e6d6f4710838757389a45899b3ed6179b201d8', icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.onEditClick })), showRemoveButton && (h("swirl-action-list-item", { key: 'b21d2837db025d6f17ee56b2ccdd9049b5690114', icon: this.removeButtonIcon, intent: "critical", label: this.removeButtonLabel, onClick: this.onRemoveClick }))))), showTimestamp && !hideTimestampForUploading && (h("span", { key: 'be2c6da605381330fb91afe3188a7be065224c76', class: "thumbnail__timestamp" }, this.timestamp)))));
     }
     static get is() { return "swirl-thumbnail"; }
     static get encapsulation() { return "shadow"; }
@@ -57,6 +115,33 @@ export class SwirlThumbnail {
                 "reflect": false,
                 "attribute": "alt"
             },
+            "cursor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlCursor",
+                    "resolved": "\"alias\" | \"all-scroll\" | \"auto\" | \"cell\" | \"col-resize\" | \"context-menu\" | \"copy\" | \"crosshair\" | \"default\" | \"e-resize\" | \"ew-resize\" | \"grab\" | \"grabbing\" | \"help\" | \"move\" | \"n-resize\" | \"ne-resize\" | \"nesw-resize\" | \"no-drop\" | \"none\" | \"not-allowed\" | \"ns-resize\" | \"nw-resize\" | \"nwse-resize\" | \"pointer\" | \"progress\" | \"row-resize\" | \"s-resize\" | \"se-resize\" | \"sw-resize\" | \"text\" | \"vertical-text\" | \"w-resize\" | \"wait\" | \"zoom-in\" | \"zoom-out\"",
+                    "references": {
+                        "SwirlCursor": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils.ts::SwirlCursor",
+                            "referenceLocation": "SwirlCursor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cursor",
+                "defaultValue": "\"pointer\""
+            },
             "editButtonIcon": {
                 "type": "string",
                 "mutable": false,
@@ -97,6 +182,25 @@ export class SwirlThumbnail {
                 "attribute": "edit-button-label",
                 "defaultValue": "\"Edit\""
             },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
             "format": {
                 "type": "string",
                 "mutable": false,
@@ -142,6 +246,66 @@ export class SwirlThumbnail {
                 "reflect": false,
                 "attribute": "interactive"
             },
+            "menuButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu-button-label",
+                "defaultValue": "\"More actions\""
+            },
+            "openButtonIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open-button-icon",
+                "defaultValue": "\"<swirl-icon-visibility></swirl-icon-visibility>\""
+            },
+            "openButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open-button-label",
+                "defaultValue": "\"Open\""
+            },
             "progress": {
                 "type": "number",
                 "mutable": false,
@@ -181,6 +345,26 @@ export class SwirlThumbnail {
                 "attribute": "progress-label",
                 "defaultValue": "\"Loading progress\""
             },
+            "removeButtonIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remove-button-icon",
+                "defaultValue": "\"<swirl-icon-delete></swirl-icon-delete>\""
+            },
             "removeButtonLabel": {
                 "type": "string",
                 "mutable": false,
@@ -305,6 +489,11 @@ export class SwirlThumbnail {
             }
         };
     }
+    static get states() {
+        return {
+            "hasHover": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "edit",

package/dist/collection/components/swirl-thumbnail/swirl-thumbnail.stories.js

@@ -2,23 +2,39 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-thumbnail.mdx";
 export default {
     argTypes: {
-        showEditButton: {
-            description: "Only displayed with format `square` and either size `2xl` or size `xl` with `show-remove-button` set to `false`. ",
-        },
-        showRemoveButton: {
-            description: "Only displayed with size `xl` or `2xl` and format `square`.",
+        editButtonIcon: {
+            table: {
+                type: {
+                    summary: "swirl-icon-*",
+                },
+            },
         },
-        timestamp: {
-            description: "Only displayed with size `xl` or `2xl` and format `square`.",
+        removeButtonIcon: {
+            table: {
+                type: {
+                    summary: "swirl-icon-*",
+                },
+            },
         },
-        editButtonIcon: {
+        openButtonIcon: {
             table: {
                 type: {
-                    detail: "e.g. <swirl-icon-edit></swirl-icon-edit>",
                     summary: "swirl-icon-*",
                 },
             },
         },
+        showEditButton: {
+            description: "Shows an edit action on hover. On sizes `s`/`m` the action renders as a small corner button (or inside a popover when combined with `showRemoveButton`). On sizes `l`/`xl`/`2xl` it renders as part of a segmented button group.",
+        },
+        showRemoveButton: {
+            description: "Shows a remove action on hover. Follows the same compact/segmented rules as `showEditButton`.",
+        },
+        timestamp: {
+            description: "Rendered at the bottom-left of the thumbnail for sizes `m` and above. Commonly used to display a video duration.",
+        },
+        progress: {
+            description: "When set, shows an uploading indicator. Sizes `s`/`m` show a centered circular spinner on a dark overlay, sizes `l`/`xl`/`2xl` show a bottom progress bar.",
+        },
     },
     component: "swirl-thumbnail",
     tags: ["autodocs"],
@@ -29,10 +45,7 @@ export default {
     },
     title: "Components/SwirlThumbnail",
 };
-const Template = (args) => {
-    const element = generateStoryElement("swirl-thumbnail", args);
-    return element;
-};
+const Template = (args) => generateStoryElement("swirl-thumbnail", args);
 export const SwirlThumbnail = Template.bind({});
 SwirlThumbnail.args = {
     alt: "Brief description of the image.",

package/dist/collection/components/swirl-time-input/swirl-time-input.js

@@ -161,7 +161,7 @@ export class SwirlTimeInput {
         const className = classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: '917c50baa5d5fe5dd8c8be8c5b10c4d9a7e649f9' }, h("div", { key: '1928271813a5ee0963caa64c9dab899779637e27', class: className }, h("input", { key: 'e2959b039e91f863560f047cd645cb94a5d9ee7a', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: '026d2ab8bfe7a8da339fa94c1db0f51e9f0d1bf5', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'c5ce4280df1293bc1477d66052deb6643801c4f5', size: this.iconSize })))));
+        return (h(Host, { key: '9a5bbb3c50c9db2cb4b2bb48021113209d733ab0' }, h("div", { key: '4740af4707a2ec76a2fb96c63e0fceb58d165c5a', class: className }, h("input", { key: '52ee31427daf2de83127d27f3837f835f1ebafa5', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: '7b6c9327d394608af3603f90ad808bf7a57494bc', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '2689cbab234f65cdc5776b7dd31a378c0a29ed79', size: this.iconSize })))));
     }
     static get is() { return "swirl-time-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -52,7 +52,7 @@ export class SwirlToast {
     }
     render() {
         const className = classnames("toast", `toast--intent-${this.intent}`);
-        return (h(Host, { key: '755346b31178e4af07834e1d95bf0241faedfc89' }, h("div", { key: 'baf1e4f5691fcfc21b11c35f6584e951a9039c43', class: className }, this.icon && (h("span", { key: 'af1d9cd2a9ccb33d4d473e2e8139018a55074adc', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '9bf836f9e64a343c76527c09868afb93b89dc1b6', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: 'be669cb508dd92b6d8dbc7cc416a147ba40a0bbe' })), this.actionLabel && (h("swirl-button", { key: '754a0a06417dfde70903c6099e3150913d1927c9', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" })), h("button", { key: '822e778a495dbfb52d872d461c7275f76bcf0ead', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: 'ed76a1a28b11be0da4973afb0669a2935d768bcf', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: 'b262aeaffd17ea3bd343809cfb0d8e97b1b62396' }, h("div", { key: '78272b495c2092ff7a4ee9e0eb5b4f13726aa9b7', class: className }, this.icon && (h("span", { key: '967d5fceb7d7497429313c832da27986ed160d5d', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '8b36bf2a453fb30a56b9eac3ca1b30e1add71d7e', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '781e18bb04e70bdfa4f7425db0fa3e93fbd8bffb' })), this.actionLabel && (h("swirl-button", { key: '59df81ec318efd3084317cc9af56e6c6d57cf21f', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" })), h("button", { key: 'f5677d18055dd6e51f78d45dde03e893cb93c466', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: '701b783b1c5a7ae56e79e5873c991d6ca74839c7', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get is() { return "swirl-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-toast-provider/swirl-toast-provider.js

@@ -115,7 +115,7 @@ export class SwirlToastProvider {
         this.popoverEl.showPopover();
     }
     render() {
-        return (h(Host, { key: '1999b5fabf0e1a73277adf8e7897ffa53d246c91', role: "status" }, h("swirl-stack", { key: 'b7ae38cdba993695c19e89b013767a83c07a38a1', class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (el) => (this.popoverEl = el) }, this.toasts.map((toast) => {
+        return (h(Host, { key: 'bd3dd3bf3b7965997cb99afb8b886d0d022b4a24', role: "status" }, h("swirl-stack", { key: '7699d04c7ff9b4d315f903bd69f0599bc8a55a39', class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (el) => (this.popoverEl = el) }, this.toasts.map((toast) => {
             const props = {
                 ...toast,
                 content: undefined,

package/dist/collection/components/swirl-toggle-button/swirl-toggle-button.js

@@ -13,7 +13,7 @@ export class SwirlToggleButton {
             "button--pressed": this.isPressed,
         });
         const ariaLabel = this.hideLabel ? this.label : undefined;
-        return (h("button", { key: 'cdc5df0dbba8b99ab51f3f9842f690e4f47dcf83', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", "aria-label": ariaLabel, onClick: this.onClick }, this.icon && (h("swirl-icon", { key: '26aea7336dcef9e846fdb785198930e53ed7ef95', class: "button__icon", glyph: this.icon })), !this.hideLabel && h("span", { key: '012e0184a316852d670b6338d68c6df797cf34c9', class: "button__label" }, this.label)));
+        return (h("button", { key: '4b9af071b3fcdec859b42dd27d735d2743a170e1', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", "aria-label": ariaLabel, onClick: this.onClick }, this.icon && (h("swirl-icon", { key: '12c7b91001bfc34e4d7d3155c14d451b22264e46', class: "button__icon", glyph: this.icon })), !this.hideLabel && h("span", { key: 'a48cbffb4a8faf475161c1816ba018c6d704c104', class: "button__label" }, this.label)));
     }
     static get is() { return "swirl-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-toggle-group/swirl-toggle-group.js

@@ -55,7 +55,7 @@ export class SwirlToggleGroup {
         const className = classnames("toggle-group", `toggle-group--variant-${this.variant}`, {
             "toggle-group--elevated": this.elevated,
         });
-        return (h("swirl-stack", { key: '86db70a77b4c71c52533392d8daab961555c0224', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '4f6742043f6e16c0953c7ec069ff7e4e2c2c1406', onSlotchange: this.onSlotChange })));
+        return (h("swirl-stack", { key: '67690dcc23d24c021eed8d5828fc0833807fb19a', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '535c7e563913262583d0e86c194a45c198da1a4d', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "swirl-toggle-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,7 +65,7 @@ export class SwirlToolbar {
         });
     }
     render() {
-        return (h(Host, { key: '70bf9f3d2ec87c5f36b9a8ded91abdee119f12e3' }, h("swirl-stack", { key: '53350ab541639aa2cba9cb2e689526af4d196382', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, h("slot", { key: '04a96fb9d55bb7af2a58b55c1172e33c73227c18' }))));
+        return (h(Host, { key: '57920cad38607c1a15c663b13874d19e06a16ff9' }, h("swirl-stack", { key: '4c9e08d5400d4229f9e30e6cbf96fbc05f1b06c6', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, h("slot", { key: 'dd7644db86035030fd9769bfc1525458618e5939' }))));
     }
     static get is() { return "swirl-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-tree-navigation/swirl-tree-navigation.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SwirlTreeNavigation {
     render() {
-        return (h(Host, { key: 'c42a1a8b3122e8de403a6a4d0f0bbcb81f4b06cf' }, h("ul", { key: '81878bc78812d155c5570422881c768edb4ee2dc', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '98e19f023943355a61a11020dc84b81b64693921' }))));
+        return (h(Host, { key: 'db2103702144b1f48a6f6a4b6ac74c2141fb8b31' }, h("ul", { key: '28ca3e64b714eb3845e3e3bb71be6bb3be9bd386', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '912be04c9fd64e54223c9a185be515eb32843970' }))));
     }
     static get is() { return "swirl-tree-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-tree-navigation-item/swirl-tree-navigation-item.js

@@ -84,12 +84,12 @@ export class SwirlTreeNavigationItem {
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: '3488fa9b78e3898cf556e9f75d04bb24d9edaec1', role: "none" }, h("li", { key: 'a430ade02ecced8d11f5c7da4ab0cb981e47da24', class: {
+        return (h(Host, { key: 'f639736894bed6c789a2bb537d8231c370ade0bb', role: "none" }, h("li", { key: 'c85045099677ca811eea8b84d3e3a7cd1f6220e3', class: {
                 "tree-navigation-item": true,
                 "tree-navigation-item--expanded": this.expanded,
-            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: '957c7bc383b1222cdbcccbb399c69bddf89c7b0d', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, h("span", { key: '7e9ef120c645741f66f9f399f432d9165e1a8d96', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '3bbcda50080b8fa2f21e133b7113139302b40abe', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '2f6ee8cf151394338ac03c9b0e81ba654905fa19', class: "tree-navigation-item__label" }, h("span", { key: '8719135c9264d1490f05801d47c520d549407b1a', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '61ab6e64be83f37845471fddc3f22213dc1ed540', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '1cb7a99a551bcaa5957a1461e289f631170c3d97', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'c2a26b703c40281bbedb170faf77197a8d3df4b6', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '0b9aef24f43d2ac0cc5b27fcff5167f6131f3162', size: 16, role: "img", "aria-label": "External link" })))), this.markAsNew && (h("swirl-tag", { key: '39acee516fcdcf73261de017215fc3d23abeb535', class: "tree-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel, size: "m", variant: "default" })))), this.hasChildren && (h("ul", { key: '17d3cbe92c3cb98e130e12698793a2521c93f17c', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
+            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: 'bb3c7dfc7bc881be8d7fae7aed968254936d483e', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, h("span", { key: 'cf614f5a4c13fcaf641b00d12aba3ba448f27222', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'f6632ee98c344777af8f6147c3cc68026408020d', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '8fd6d3396940a795614b209615b33e2a6a3ca28d', class: "tree-navigation-item__label" }, h("span", { key: '0449dac70e03a9cf654f51018e993e52a3d95f82', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: 'c9b8d08fbcd1e12cc23e51f7828d3e1c4ebba3cb', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'bd640fcd081f50e189ada0b0e17c4a90f3a9765c', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'e39b033d6183895d5b6811e02caf61d3e94b9fa7', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '8626cadcbeef84ef70dda06504b0fa11b8c77fe8', size: 16, role: "img", "aria-label": "External link" })))), this.markAsNew && (h("swirl-tag", { key: '9cc101ff1456c6e8be06623746cf14e9d47370d9', class: "tree-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel, size: "m", variant: "default" })))), this.hasChildren && (h("ul", { key: '53f0a70081717a316665673807032e680714da74', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
                 height: this.childrenHeight,
-            } }, h("slot", { key: 'a4eb2026f67c8d96c12c8d505279eec91e42baf3' }))))));
+            } }, h("slot", { key: '54cfc7b15820d80de2474a65180f3bef4884796e' }))))));
     }
     static get is() { return "swirl-tree-navigation-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-tree-view/swirl-tree-view.js

@@ -327,7 +327,7 @@ export class SwirlTreeView {
         }
     }
     render() {
-        return (h(Host, { key: '1f7a41b6ab67a789534b3638ee11d1de2da1cb87' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: 'a877069ad8ed12f0f6612d484fd6033d58245274' }, h("span", { key: '8db50809d89bcbd2c2201c005133734430e6c443', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: '8703927f12e7a2cbc49c789fead8e3242211d473', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: 'e29ee3b671fa82a637db1ec12f8d294ddf46ecbd', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: '30e6e9f186e102f9f0e963ceadbc4023eb27b559' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: 'a357db78cefc2dbb7ef751c88fa8700518e23936' }, h("span", { key: 'de4c7c511dee37fd462abd40ad9637387bf4a6c0', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: 'efa77a78b995e2e897ade19b111c4a03eed2f7ee', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: '66201ff8c5dfb3c18f061cc98740f824761371ee', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "swirl-tree-view"; }
     static get originalStyleUrls() {

package/dist/collection/components/swirl-tree-view-item/swirl-tree-view-item.js

@@ -329,17 +329,17 @@ export class SwirlTreeViewItem {
             "tree-view-item--disable-drag": this.disableDrag,
             "tree-view-item--has-tags": hasTags,
         });
-        return (h(Host, { key: 'fa77eb65e34260d867e3c4cd3ce53278c5671813', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: 'f6588d46099f38063ecb209dade982499168405b', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: 'a7b1ebe65874cf61cf15b7d9862e7d6aa789d04c', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
+        return (h(Host, { key: 'fef970c07fc3123503e035112fe7e52115ff057c', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: '33bc6518dcca289192ca2607a99f0efa10bba901', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: '55d51b7cc91bf9adb51c5e7f36365ec08012a763', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
                 ? undefined
                 : String(expanded), "aria-level": semantics === "tree" ? this.level + 1 : undefined, "aria-owns": hasChildren && semantics === "tree"
                 ? `${this.itemId}-children`
-                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: '3d663f5336df2c513cd00695bb399b277db4d95a', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: 'd0f47de87f1a0de9d33c99fca5babf9f8f0c93cd', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: '3bad764862675097f1b3b01407b74c6636135860', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: 'eb0fd50459d78c2585e8629248b3586d6a9ffb47' }, expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: '3111b110d6dc29588486f971417adf37604c4b55' }, h("span", { key: '6c030abac62da1de432846345e9159cf37732928', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '9097ce7ee740b643056874b0a2f74f896bdea108', class: "tree-view-item__label" }, this.label), h("span", { key: '3aac385884aa3a9cb6560f5048a339378d470083', class: "tree-view-item__tags" }, h("slot", { key: '93b476218086c857a82a2dd6156ebd288c36af66', name: "tags" }))), h("ul", { key: 'fc51e13ebe4d7071ae35f7b027584cf22b83495e', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
+                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: '6fe53ca04d992b2cef7d5d2cedb5eb119fdea162', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '001696960c2893a8fc881f5c961b18d75af2a23f', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: '1d458f9abae531dc0f48ca8ba57fcd62d0020eb2', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: 'c891f69fc682d14f1502ddec8dc6688453449711' }, expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: 'cde788efaed79b489c1765e14bc08a6e73344efa' }, h("span", { key: '3f8f49d065901483b521f5646df4ef3dba8a1143', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: 'e4f9af62617994508af401bc6867cb98151c3b75', class: "tree-view-item__label" }, this.label), h("span", { key: '86c3694ec3bfd6a78df23c91abed72900d15f135', class: "tree-view-item__tags" }, h("slot", { key: '25a3c909290b92c30f3694bd46670ab3cea7ab4c', name: "tags" }))), h("ul", { key: 'ec63119eebc2c54568e0557bb93ecd1337f7b565', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
                 ? "tree-view-item__children--drop-zone"
                 : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: semantics === "tree" ? "group" : undefined, style: {
                 display: (!expanded || !hasChildren) && !shouldShowChildrenDropZone
                     ? "none"
                     : undefined,
-            } }, h("slot", { key: 'ebef792c7ff381cd3614993d80ca04d347473c56' })))));
+            } }, h("slot", { key: '07d406b0fb59133df2d64b2e8228309a974c3072' })))));
     }
     static get is() { return "swirl-tree-view-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/swirl-video-thumbnail/swirl-video-thumbnail.js

@@ -4,7 +4,7 @@ export class SwirlVideoThumbnail {
         this.durationLabel = "Duration";
     }
     render() {
-        return (h(Host, { key: '44d3cf2290ae4d2b992e27aaa43af6cdf65eb15a' }, h("button", { key: 'a326cef7e4e9ea7bca8727bb5c2afc52e8497386', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'f5e57641acd33b25ee1e980611128c80af0218fb', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '3f0824b314fdb77ffc7fa78c0b14b6aa8dab1dda', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '7d2370ece099f7e82d04c8d97762035fdd83a8ac' }, this.durationLabel), this.duration)), h("svg", { key: 'c30507dca4dc86d3c4bd9216d0887e3fb6e5984d', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'bf5be85516606e11165d0a6dd214035616931143', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
+        return (h(Host, { key: '1d111254c6cf7a48608534f0198c497d282cad53' }, h("button", { key: '6b1cfd9e6fda1b95d3b82b620e2fd471ca8a9aac', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '8a9e545a63d6c459a733ede938d8d4ddc6c44b6f', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '43e92f3f70e57f931ae864f440254d541d67059a', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'ea8c61532cf72856d0bd20fdca0565e33da15e52' }, this.durationLabel), this.duration)), h("svg", { key: '52bc68ac62553c9cf085f3373873b83320e9db3b', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ef0acb75dfbd715b5186fdd6a740049d32e5ad65', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
     }
     static get is() { return "swirl-video-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-visually-hidden/swirl-visually-hidden.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SwirlVisuallyHidden {
     render() {
-        return (h(Host, { key: 'd92c8af38ad515473da75d630bf18ca904f9d7b8' }, h("slot", { key: '6cc3685036214482539265a0fb12990e8983094f' })));
+        return (h(Host, { key: '10b5f1132acca349dfade5fdf769c18c78cdf383' }, h("slot", { key: '52a489d29e2c7e0cdca6127ca0dd9ace69e1ff81' })));
     }
     static get is() { return "swirl-visually-hidden"; }
     static get encapsulation() { return "scoped"; }