@getflip/swirl-components 0.523.1 → 0.525.0

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

@@ -1,6 +1,6 @@
 import { autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/dom";
 import { h, Host, } from "@stencil/core";
-import { disableBodyScroll, enableBodyScroll } from "../../utils/body-scroll-lock";
+import { disableBodyScroll, enableBodyScroll, } from "../../utils/body-scroll-lock";
 import classnames from "classnames";
 import { tabbable } from "tabbable";
 import { getActiveElement, getPixelsFromRemToken, isMobileViewport, querySelectorAllDeep, } from "../../utils";
@@ -14,6 +14,7 @@ export class SwirlPopover {
         this.enableFlip = true;
         this.fallbackAxisSideDirection = "none";
         this.maxHeight = "22rem";
+        this.mobileBottomSheet = true;
         this.offset = 8;
         this.padded = true;
         this.placement = "bottom-start";
@@ -40,11 +41,10 @@ export class SwirlPopover {
             }
         };
         this.reposition = async () => {
-            const mobile = isMobileViewport();
             if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {
                 return;
             }
-            if (mobile) {
+            if (this.bottomSheetActive) {
                 this.position = undefined;
                 return;
             }
@@ -228,6 +228,9 @@ export class SwirlPopover {
             this.open(triggerEl, undefined, via);
         }
     }
+    get bottomSheetActive() {
+        return this.mobileBottomSheet && isMobileViewport();
+    }
     connectTrigger() {
         if (!Boolean(this.trigger)) {
             this.triggerEl = undefined;
@@ -277,8 +280,7 @@ export class SwirlPopover {
         else if ([false, "false"].includes(this.useContainerWidth)) {
             useContainerWidth = false;
         }
-        const mobile = !window.matchMedia("(min-width: 768px)").matches;
-        if (Boolean(useContainerWidth) && !mobile) {
+        if (Boolean(useContainerWidth) && !this.bottomSheetActive) {
             const container = typeof useContainerWidth === "string"
                 ? this.el.closest(useContainerWidth) || this.el.parentElement
                 : this.el.parentElement;
@@ -292,43 +294,48 @@ export class SwirlPopover {
         }
     }
     lockBodyScroll() {
-        const mobile = isMobileViewport();
-        if (!mobile || this.disableScrollLock || !Boolean(this.scrollContainer)) {
+        if (!this.bottomSheetActive ||
+            this.disableScrollLock ||
+            !Boolean(this.scrollContainer)) {
             return;
         }
         disableBodyScroll(this.scrollContainer);
     }
     unlockBodyScroll() {
-        const mobile = isMobileViewport();
-        if (!mobile || this.disableScrollLock || !Boolean(this.scrollContainer)) {
+        if (!this.bottomSheetActive ||
+            this.disableScrollLock ||
+            !Boolean(this.scrollContainer)) {
             return;
         }
         enableBodyScroll(this.scrollContainer);
     }
     render() {
-        const mobile = !window.matchMedia("(min-width: 768px)").matches;
+        const mobileBottomSheet = this.bottomSheetActive;
         const borderRadius = swirlPopoverBorderRadiusTokens.includes(this.borderRadius)
             ? `var(--s-border-radius-${this.borderRadius})`
             : this.borderRadius;
         const className = classnames("popover", `popover--animation-${this.animation}`, `popover--placement-${this.position?.placement}`, {
             "popover--active": this.active,
             "popover--closing": this.closing,
-            "popover--fullscreen-bottom-sheet": this.fullscreenBottomSheet,
+            "popover--fullscreen-bottom-sheet": this.fullscreenBottomSheet && this.mobileBottomSheet,
             "popover--inactive": !this.active,
+            "popover--mobile-bottom-sheet": this.mobileBottomSheet,
             "popover--translucent": this.translucent && !this.transparent,
             "popover--transparent": this.transparent,
             "popover--padded": this.padded,
         });
-        return (h(Host, { key: 'd966f9fd6e1ece3baea7e93ffa4db905471a96ad' }, h("div", { key: 'f27ac96f6d01ac88153419191c66a7c8cdeab400', popover: "manual", class: className, onKeyDown: this.onKeydown, ref: (el) => (this.popoverEl = el) }, h("div", { key: '3863fa7c4f56813174ce0a3605b48a8a64b091b5', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
+        return (h(Host, { key: 'ab0bf329be2aa18135208b7c780db24211bfd689' }, h("div", { key: 'f028e08aea8504f9a38289ceed191d4de5635de1', popover: "manual", class: className, onKeyDown: this.onKeydown, ref: (el) => (this.popoverEl = el) }, h("div", { key: 'e7d9900fe0ac68ac007f25fa2b481c86a6052de1', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
                 top: Boolean(this.position) ? `${this.position?.y}px` : "",
                 left: Boolean(this.position) ? `${this.position?.x}px` : "",
-                opacity: this.active && !this.position && !mobile ? "0" : undefined,
+                opacity: this.active && !this.position && !mobileBottomSheet
+                    ? "0"
+                    : undefined,
                 "--swirl-popover-border-radius": borderRadius,
-            }, tabindex: "-1" }, h("span", { key: 'a4aa963a233ad9ff72f900f5068b54c0b1a601ba', class: "popover__handle" }), h("div", { key: 'f29e897fa61b1ab24b301cde397daf8c5873a14d', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
-                maxHeight: !mobile && Boolean(this.maxHeight)
+            }, tabindex: "-1" }, h("span", { key: '0bd0634b214a43d96e3ac9236192284517df2dde', class: "popover__handle" }), h("div", { key: '2c15e566745089c66e34dbb2d91b410c674dfb4c', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
+                maxHeight: !mobileBottomSheet && Boolean(this.maxHeight)
                     ? this.maxHeight
                     : undefined,
-            } }, h("slot", { key: 'd1f6bb8e5e8d26083245d6971e62ea18ed498632' }))), this.active && (h("div", { key: '7e721d950c5d169c516f7e19e16b2da428b4aa81', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+            } }, h("slot", { key: '6738a50232fbcd30ff9f6d32ccecdeab84dd6601' }))), this.active && (h("div", { key: '235e0b3da6c09ca4de1092bad7cec77e1013e82d', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
     }
     static get is() { return "swirl-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -493,6 +500,26 @@ export class SwirlPopover {
                 "attribute": "max-height",
                 "defaultValue": "\"22rem\""
             },
+            "mobileBottomSheet": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mobile-bottom-sheet",
+                "defaultValue": "true"
+            },
             "offset": {
                 "type": "number",
                 "mutable": false,

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

@@ -6,6 +6,10 @@ export default {
             description: "You should disable the scroll lock for popovers inside modals and dialogs.",
             name: "disable-scroll-lock",
         },
+        mobileBottomSheet: {
+            description: "By default, the popover opens as a bottom sheet on viewports below 768px. Pass false to keep it anchored to its trigger on all viewports, e.g. for popovers opened on hover.",
+            name: "mobile-bottom-sheet",
+        },
         offset: {
             description: "Pass a number to specify the main axis offset. Use an array to provide the main axis and cross axis offsets.",
             control: {

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.js

@@ -185,7 +185,7 @@ export class SwirlPopoverTrigger {
         return isActive;
     }
     render() {
-        return (h(Host, { key: 'fb48616282c6830ff293157153cc2a8305729394', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '53c26254898129b05d8cbef745174288e9363a1e' })));
+        return (h(Host, { key: '99683794490d41e1acc29622fbe8b08daeb27357', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '89600056e488b91974157ea00003c4860c99d821' })));
     }
     static get is() { return "swirl-popover-trigger"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-progress-indicator/swirl-progress-indicator.css

@@ -50,24 +50,57 @@
   }
     }
 
-.progress-indicator--variant-bar.progress-indicator--size-xs,
-  .progress-indicator--variant-bar.progress-indicator--size-s {
+.progress-indicator--variant-bar.progress-indicator--size-xs {
+    height: 0.0625rem;
+  }
+
+.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-bar {
+      border-radius: 0.03125rem;
+    }
+
+.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-value {
+      border-radius: 0.03125rem;
+    }
+
+.progress-indicator--variant-bar.progress-indicator--size-xs::-moz-progress-bar {
+      height: 0.0625rem;
+      border-radius: 0.03125rem;
+    }
+
+.progress-indicator--variant-bar.progress-indicator--size-s {
     height: 0.125rem;
   }
 
-.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-bar, .progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar {
+.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar {
       border-radius: 0.0625rem;
     }
 
-.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-value, .progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value {
+.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value {
       border-radius: 0.0625rem;
     }
 
-.progress-indicator--variant-bar.progress-indicator--size-xs::-moz-progress-bar, .progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar {
+.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar {
       height: 0.125rem;
       border-radius: 0.0625rem;
     }
 
+.progress-indicator--variant-bar.progress-indicator--size-l {
+    height: 0.5rem;
+  }
+
+.progress-indicator--variant-bar.progress-indicator--size-l::-webkit-progress-bar {
+      border-radius: 0.25rem;
+    }
+
+.progress-indicator--variant-bar.progress-indicator--size-l::-webkit-progress-value {
+      border-radius: 0.25rem;
+    }
+
+.progress-indicator--variant-bar.progress-indicator--size-l::-moz-progress-bar {
+      height: 0.5rem;
+      border-radius: 0.25rem;
+    }
+
 .progress-indicator--variant-circle {
   position: relative;
   display: inline-flex;
@@ -86,6 +119,11 @@
     height: 1.5rem;
   }
 
+.progress-indicator--variant-circle.progress-indicator--size-l {
+    width: 6rem;
+    height: 6rem;
+  }
+
 .progress-indicator__circle {
   position: absolute;
   width: 100%;

package/dist/collection/components/swirl-progress-indicator/swirl-progress-indicator.js

@@ -4,6 +4,7 @@ const circleSizeConfig = {
     xs: { radius: 8, strokeWidth: 2 },
     s: { radius: 10, strokeWidth: 2 },
     m: { radius: 20, strokeWidth: 4 },
+    l: { radius: 40, strokeWidth: 8 },
 };
 export class SwirlProgressIndicator {
     constructor() {
@@ -16,7 +17,7 @@ export class SwirlProgressIndicator {
         const { radius, strokeWidth } = circleSizeConfig[this.size];
         const circumference = Math.round(radius * 2 * Math.PI);
         const dashOffset = Math.round(circumference * ((100 - this.value) / 100));
-        return (h(Host, { key: 'ad727a1e14301972d7da8f93ea1e56130ba1a74a', class: this.variant }, this.variant === "bar" && (h("progress", { key: '018e049e46653f9b036e112cc1f68afc72f51521', "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (h("span", { key: 'c493100a3b9bea0a2b322bab40dcd047dc3df151', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { key: '9920db6a32b1f0aad63a8d172219301b1d628935', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { key: '6babf1c8aa02a9d6d4cdbfe5a3bce4f996c440f3', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { key: '60c0ee8e78623f088fa296b97a3d3be5eba42298', class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
+        return (h(Host, { key: '1906fcc6f7588c541f7761fee614146c77acd93c', class: this.variant }, this.variant === "bar" && (h("progress", { key: '01bc671e27e33d82c14b88dd3b6bf4262608e529', "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (h("span", { key: '54cc3670f6d2ac06f164fcd48a75e84857f7f172', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { key: 'ce9223aeb38ccf20b21290ff62b56be08aaa9fbe', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { key: '7a3edf9222ab464712a2c05832679f682d8716bc', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { key: 'e9cae6b5f5b3cc1205a0e873995117d5db9b8446', class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
     }
     static get is() { return "swirl-progress-indicator"; }
     static get encapsulation() { return "shadow"; }
@@ -56,7 +57,7 @@ export class SwirlProgressIndicator {
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlProgressIndicatorSize",
-                    "resolved": "\"m\" | \"s\" | \"xs\"",
+                    "resolved": "\"l\" | \"m\" | \"s\" | \"xs\"",
                     "references": {
                         "SwirlProgressIndicatorSize": {
                             "location": "local",

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

@@ -30,7 +30,7 @@ export class SwirlRadio {
             "radio--invalid": this.invalid,
             "radio--unchecked": unchecked,
         });
-        return (h(Host, { key: 'ba03347710704c4b7e499251fcd4a9df191d101e', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: 'b051bf05d1698ad0413ba29a8d04292fb31490ad', class: className, htmlFor: this.inputId }, h("span", { key: 'd239df6b6803ed81bc5bc1db9a7f294da974a614', class: "radio__control" }, h("swirl-visually-hidden", { key: '6141bdb2dde5afe236634bdec8de51a3076a954b' }, h("input", { key: '08b791480fb67b7c06e34a22ad89cbddc6a02297', "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })), h("span", { key: 'c0683f4e514afe287ac9e225c2e5297ba1e3753d', "aria-hidden": "true", class: "radio__box" })), h("span", { key: '86051aac88e4375c3622e5a600ff8a57ec154889', class: "radio__label-container" }, this.label && (h("span", { key: 'a130c01085aa73419c30e5d2e315a15957d35f5c', class: "radio__label" }, this.label, this.tooltip && (h("swirl-tooltip", { key: 'd048616c7e231f763008eec487a86afe52e8c669', content: this.tooltip, position: "top" }, h("swirl-icon-help", { key: '1a3059195141f32917064c8212008fcb652978a3', color: "default", size: 20, tabIndex: 0 }))))), this.description && (h("span", { key: 'b9e85579b000dec098650230272735d4b87bb784', class: "radio__description", innerHTML: this.description }))))));
+        return (h(Host, { key: 'a0081ea7131edb61b6d1855656a0365bc5bc8822', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: '7cd3b277db993c463963b02e91e4ff2f343537ed', class: className, htmlFor: this.inputId }, h("span", { key: '430066d37d04c3c58e9ea6a91e56cf091563af0c', class: "radio__control" }, h("swirl-visually-hidden", { key: 'c2927d4e60ce2695c38e65d03165d307e36f576d' }, h("input", { key: '428fd2626ffb6e14a6b56361bee2b74e8352b860', "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })), h("span", { key: '9c024c258671966a51ee6d0d0d6231934deb6747', "aria-hidden": "true", class: "radio__box" })), h("span", { key: '62e63c6b091cb49fe629f94ff3c53e9cb7adfc93', class: "radio__label-container" }, this.label && (h("span", { key: 'dc903e01e457e6e989351d1696c1da30a2de93e0', class: "radio__label" }, this.label, this.tooltip && (h("swirl-tooltip", { key: 'cc44412671e701927e55a46942a3aaf1442f9725', content: this.tooltip, position: "top" }, h("swirl-icon-help", { key: 'ba1eac624fc7ff7e4fb382d64234640df67d994e', color: "default", size: 20, tabIndex: 0 }))))), this.description && (h("span", { key: '7e571f5a6d6ba5aa56d53ba12ae205265fcf39c4', class: "radio__description", innerHTML: this.description }))))));
     }
     static get is() { return "swirl-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -54,7 +54,7 @@ export class SwirlRadioGroup {
         });
     }
     render() {
-        return (h(Host, { key: '69a553461908462cc968c0ce104e65b3d3ef211c', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: '2dee487d5c601442d93ec673d925aee2e3e0d4d6', class: "radio-group" }, h("slot", { key: '93f27ef0359ae3f93d9785726ae8fce887904091' }))));
+        return (h(Host, { key: '7bfde5d9df9fa2d2ac1ffb2d4c97f59b1efd39cc', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: '204c94ee394336016e976cfdd73034b61c40129c', class: "radio-group" }, h("slot", { key: 'be3b64707417ed1c4d85379dd0c6cc851589d6b0' }))));
     }
     static get is() { return "swirl-radio-group"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list/swirl-resource-list.js

@@ -279,7 +279,7 @@ export class SwirlResourceList {
         });
     }
     render() {
-        return (h(Host, { key: '752bb4d96c91e44fde683aea0f053325d7636699', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: 'efd82ef5905163ff18a85d4a5cef3571975d3823', role: "alert" }, this.assistiveText), h("swirl-box", { key: '492739979774568556b704fe8bdc64bfd0f63930', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, h("swirl-stack", { key: 'ffa5d7a9b5cae3973fbd86baf396a67a148c71d4', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, h("slot", { key: '1c40609ce4a4a549f4611946560846bb64283aaf' })))));
+        return (h(Host, { key: '2aedc68cb6c71b3c3249cb7e42249796ca99adf9', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: '54da56764417cac816bc7b832382b5bfa5c3085c', role: "alert" }, this.assistiveText), h("swirl-box", { key: '22d070cf477f33a7e8d09f8f58b18467879b7059', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, h("swirl-stack", { key: 'b6d3859f853f0298ec81fac7df95f6073e04dbbd', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, h("slot", { key: 'f2dbadf6b161374cb2e7e37fbf159d5a6ce4ccf1' })))));
     }
     static get is() { return "swirl-resource-list"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list-file-item/swirl-resource-list-file-item.js

@@ -32,7 +32,7 @@ export class SwirlResourceListFileItem {
         const className = classnames("resource-list-file-item", {
             "resource-list-file-item--has-control": showSpinner || showRemoveButton,
         });
-        return (h(Host, { key: 'f74f32491b29220f37e86fe6d00fe72cd4d950db', role: hostRole }, h("div", { key: '2a6376353a44e0d846b8fe6e2cab86921dc57fd3', class: className, part: "resource-list-file-item", role: containerRole }, h("span", { key: 'bb189d973c9bf5754ba6f3f635d9424e605b9716', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: '02eef656aad73ad134cfd42e9b2d84cb7378bd65', class: "resource-list-file-item__label-container" }, h("span", { key: 'da11df6f968ac450e29029f90d481b196e02988b', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: '8d8e042062a500e7cded6da82716355e0d5e9018', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '5ba36f250dc494c2ef7e4b6c9be9b67cde7fe0ec', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '697f213b8f07246cf49c573b56a5de9155f8037b', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: 'cba04f048606fc914128c44f1c2f7cbf8fcd80fc', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: 'b2b545ebb356bde5b1797a509480d61ce4fd9c6d', size: "s" }))), showRemoveButton && (h("span", { key: 'bb608aa78304763311fec588343ebaa16f6e5990', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '242626e6114e0d0a7e975544773e17175e744bee', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+        return (h(Host, { key: '61a81a686e2c133e412becb3c19f8a85c6d31d81', role: hostRole }, h("div", { key: '71cdea112ffd94e461e613b096d410063fa3720f', class: className, part: "resource-list-file-item", role: containerRole }, h("span", { key: 'bf19bab0ba16ddec08798010a0b3b9a403820724', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: '3b8031b1eeeb46378fcd63f062405f62ef052707', class: "resource-list-file-item__label-container" }, h("span", { key: 'c498a8a51bcd32d9cdc36dba51818749a7370db8', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: '3d84373496321a4a58b736909444473237a60f07', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '3e7b777da0d6de33f8db1e6cc124e5926ddba34d', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '63afc6e7d7c3f4324b0cc253058d81f8169b87ce', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: '0109b1267a10b09656eb4e71a66f1c765af7deca', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: 'ffa702fa0b4021d48a0cc3c80ffe9d384f74e78f', size: "s" }))), showRemoveButton && (h("span", { key: 'afa4ec002d9132f03eb8565863711b539bee6f22', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: 'cd3bd1c6ffeac14fa1085be9385ea3e387e6762d', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
     }
     static get is() { return "swirl-resource-list-file-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js

@@ -162,7 +162,7 @@ export class SwirlResourceListItem {
         const labelContainerStyles = {
             minHeight: this.labelMinHeight ?? undefined,
         };
-        const renderLabel = () => (h("span", { key: '2ca5b88fefa12904f184dc19ad0846d7aea49336', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined, style: {
+        const renderLabel = () => (h("span", { key: '94eb6e173dd0e8c07ca049334c550a731ad303e3', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined, style: {
                 "-webkit-line-clamp": !!this.labelWrapMaxLines
                     ? String(this.labelWrapMaxLines)
                     : undefined,
@@ -185,8 +185,8 @@ export class SwirlResourceListItem {
             "resource-list-item--wrap-label": this.labelWrap,
             "resource-list-item--wrap-label-max-lines": this.labelWrapMaxLines,
         });
-        return (h(Host, { key: '10f26514a4cfeeae416a045434fc79aa7083e4df', role: hostRole }, h("div", { key: 'd923778b84f32fc3f267fd80adb65e02250d1d36', class: className, role: containerRole, onClick: this.onClick }, h(Tag, { key: 'c51508ba74307ac275a257515fad40ede1355a72', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, rel: isLink ? this.rel : undefined, target: isLink ? this.target : undefined, disabled: disabled, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: '32a6070ae1aedc8d40d49ae6b1b7fe89bd9de9ea', class: "resource-list-item__media" }, h("slot", { key: 'f7c954c6d72ee32cd324834d43e805c95eca485b', name: "media" }))), h("span", { key: 'ec3debb0e0520d5ef429095a4df2609de30cc96c', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition }, renderLabel())) : (renderLabel()), this.description && (h("span", { key: '92e8a311fc27cd1d8822c1591417a0df056fad1b', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable &&
-            (hasInteractiveCheckbox ? (h("button", { "aria-checked": String(this.checked), "aria-label": `${this.checkboxLabel} "${this.label}"`, class: "resource-list-item__checkbox", disabled: disabled, onClick: this.onCheckboxClick, ref: (el) => (this.checkboxEl = el), role: "checkbox", type: "button" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))) : (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null)))))), showMeta && (h("span", { key: '6951ac587e4ce85ebb829456e7c1241b121fcd78', class: "resource-list-item__meta" }, this.meta && (h("span", { key: '14ad74042025464d1be6a0e0b48ded0f94becd7f', class: "resource-list-item__meta-text" }, this.meta)), h("span", { key: 'e747e9fdc33e1cf02049aa72f61b0c40a24b5ce3', class: "resource-list-item__badges" }, h("slot", { key: '18c7dce3c560007b5a0cc2bc97dd4edfccb91a1c', name: "badges" })))), h("span", { key: 'efa3dff169329a580bcbf2d764a12167f0d698e7', class: "resource-list-item__control", onClick: this.onControlClick }, h("slot", { key: '0941dad4c812be4313b517aab9c556a10845421d', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '8e88d68a90e920f7aa5c0e2afebad6ca80d96e35', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '001776074d3f2af5a7fb0de6e7cc100610f834b5', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: 'c6fc94432a6ac6ce1371a23a37c8bcf266981ee3', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: 'cf199a9428320acc4997cc69883d3fdcd12b4174', size: this.iconSize })))));
+        return (h(Host, { key: '3d452b98f187256196a0d9e3aa21009ff2d0dee7', role: hostRole }, h("div", { key: '0a47471f5222795a380a595c50336cb22c1f31cb', class: className, role: containerRole, onClick: this.onClick }, h(Tag, { key: 'e5fcd45ba424f48c9b866b61b17894d4e235125d', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, rel: isLink ? this.rel : undefined, target: isLink ? this.target : undefined, disabled: disabled, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: '1d914b4b0cdc48d2a7868cb099095ecc46db8579', class: "resource-list-item__media" }, h("slot", { key: 'dba321608b134a5072d16f6f97f69563144f1fc3', name: "media" }))), h("span", { key: 'ccb528000b7298589271a66703066e5278c172ef', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition }, renderLabel())) : (renderLabel()), this.description && (h("span", { key: 'ac725a25fc879533f89f0656fb2f910af5cd5a50', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable &&
+            (hasInteractiveCheckbox ? (h("button", { "aria-checked": String(this.checked), "aria-label": `${this.checkboxLabel} "${this.label}"`, class: "resource-list-item__checkbox", disabled: disabled, onClick: this.onCheckboxClick, ref: (el) => (this.checkboxEl = el), role: "checkbox", type: "button" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))) : (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null)))))), showMeta && (h("span", { key: '01e471d2bddbb73eab1f662e6d77f6c24346db24', class: "resource-list-item__meta" }, this.meta && (h("span", { key: '605ecded4280fc4fcc8c8c34465c92ada7f7994a', class: "resource-list-item__meta-text" }, this.meta)), h("span", { key: '62a7a5eb61daefd535d185751b47900327bf6e3b', class: "resource-list-item__badges" }, h("slot", { key: '75b2eeb4bc67720538c5e210956bbe92503d31d5', name: "badges" })))), h("span", { key: 'f614f7fb62d1b0cbc3f8caa0d843cfb41d516b5e', class: "resource-list-item__control", onClick: this.onControlClick }, h("slot", { key: 'dcec9e53e1f37a17412b8559599681db06ed8dbf', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '708eef8ebfe0d44f0204cad744f9ecf52b7bfaff', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: 'b24284ec68b5d21833877c50b8f48cf9d5a28279', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: 'dbceebaa858fc28aef63c2117d14047784db4c85', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: 'a9d5a80c2e028e47f2563b4beb8867a205f3e1f6', size: this.iconSize })))));
     }
     static get is() { return "swirl-resource-list-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list-section/swirl-resource-list-section.js

@@ -11,7 +11,7 @@ export class SwirlResourceListSection {
     render() {
         const role = !!this.el.closest('[role="grid"]') ? "rowgroup" : "listitem";
         const childrenListRole = role === "listitem" ? "list" : undefined;
-        return (h(Host, { key: '2d3fedf2fcef3ff55a1c5ddcd3768dc53e89db64' }, this.hasSeparator && (h("swirl-separator", { key: '42499ffe3a517ee4bb6d5c1bc900664d7e62aaf6', spacing: this.separatorSpacing, semantics: "none" })), h("div", { key: 'de89f87ceac043a67bf267ac8bdc00a0f1705e7c', "aria-labelledby": "label", role: role }, h("span", { key: '82c88a4160ba416ed87692bc56fd62b9a720a5a9', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: 'd3b4d4248610a617e24d83ecbcce7a5bf6b7c2d5', spacing: this.spacing, swirlAriaRole: childrenListRole }, h("slot", { key: 'a1a8fa736ea3c9008c0311506ad0b7d2509cd5bd' })))));
+        return (h(Host, { key: '3740b95541b1b3ca540d43415249eb58ddd6032f' }, this.hasSeparator && (h("swirl-separator", { key: '76eaeeb1d8e2615fd0a6231897dabd7e0f50497d', spacing: this.separatorSpacing, semantics: "none" })), h("div", { key: '23da1de9d21c713f33c8b632de5d8d60985c58b3', "aria-labelledby": "label", role: role }, h("span", { key: 'ac37c95dbfd495911519d87125a079507c1f709c', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: '470c908a527bfa3e875a8e082b7a764c4ed8c7c3', spacing: this.spacing, swirlAriaRole: childrenListRole }, h("slot", { key: '1a70eb69f9d271a14317dd1a5395695bde33de0b' })))));
     }
     static get is() { return "swirl-resource-list-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -58,7 +58,7 @@ export class SwirlSearch {
         const className = classnames("search", `search--variant-${this.variant}`, {
             "search--disabled": this.disabled,
         });
-        return (h(Host, { key: '8e28d7e0f0fe00e19a90073b403290cd429200ec' }, h("span", { key: '1f2280a34872bcd9584d492b929fe4f1f55df627', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: 'a57e2f88aad434366e95a4fa53e6cb520e9c8499', "aria-hidden": "true", class: "search__icon" }), h("input", { key: '8b68769aa785f032a7890f682ad7eaa9c3a8b6ed', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && this.clearable && (h("button", { key: '114afb55daf47751877f24c2abc915dc2cc0c456', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.handleClear, type: "button" }, h("swirl-icon-cancel", { key: '2986ed718392276fe3757c72d452d943a886c3d9' }))))));
+        return (h(Host, { key: 'e81efc90b3d6a499688011221cc2a15c6f792dc2' }, h("span", { key: 'b7790e867c09bf68ffe59ec8d28f3880d4e8545a', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: 'dbda6b7c55171ee6c1d70d2eb12d42ed0158f10c', "aria-hidden": "true", class: "search__icon" }), h("input", { key: '4cebbf2d5e9543728453055bfed8a6d94f6bd935', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && this.clearable && (h("button", { key: 'a471b4e873ed08cf152c9b60fef8f36df2bb6b65', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.handleClear, type: "button" }, h("swirl-icon-cancel", { key: 'c418cfeddcadecbb411e72e5a66dd00ca3a46679' }))))));
     }
     static get is() { return "swirl-search"; }
     static get encapsulation() { return "scoped"; }

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

@@ -225,11 +225,11 @@ export class SwirlSelect {
             "select--search-loading": this.searchLoading,
             "select--standalone": this.standalone,
         });
-        return (h(Host, { key: 'bd650164c4cf37b03f2c4295980f75c782ae745a', onKeyDown: this.onKeyDown }, h("div", { key: '9cd9ad2549b0ad63829d8b5b8a2a651602e447b6', class: className }, h("swirl-popover-trigger", { key: '4c5f4949a8e25331a7ccd6ccf75aa204227a9814', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: '756295bc59b173fa239526a2cd967fd9947c96d1', class: "select__value-container" }, this.standalone && (h("span", { key: '81db3463dc1f27355dab96c35ca0559d3157126b', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: '209511630e371b4b23ed290879b2cf1c60ea95e1', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: '7ebfd6cd653ec41bbb7826f4877870c9c114db54', class: "select__multi-select-values" }, this.value
+        return (h(Host, { key: '9dbf9cfb6ffe83121b2c4d2dc4e1baf64f4a2873', onKeyDown: this.onKeyDown }, h("div", { key: 'e2404019c938f2db166480a528f65de6fac3d937', class: className }, h("swirl-popover-trigger", { key: '161f52041c92ac48a04b632340035a70bb8b336a', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: 'c5d927547a609c565fb217995e3174f78ee1dffa', class: "select__value-container" }, this.standalone && (h("span", { key: '0b632462094a30095112f77bd154952b1fee964b', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: '389d66eed98f9c1b4ae8d817adcbf8ef8314b688', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: 'da4df41ca9f50ad5af33cc2e40e8284431ef4811', class: "select__multi-select-values" }, this.value
             ?.map((value) => this.options.find((option) => option.value === value))
             ?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
             // eslint-disable-next-line react/jsx-no-bind
-            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: '0e1838b3f9651da8a87b130096f12ba985c45477', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '16d87bf0fe016fe08f7571b3dee438ea10989f07', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: '49d66b4a56e9921f8a2e9ccef83d758472243831', class: "select__search" }, h("swirl-icon-search", { key: '512c0b5c357c51712ff97293facc99c2e6695ed8', class: "select__search-icon", size: 20 }), h("input", { key: '7cf79b0d59ef76f3e8074d57f3794ffc1ff48cec', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '25a0d68d4009fc37d0db556ee7a1c71f56d38401', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: '7bc0c4467143232a81c4d7c0ec440d4bd4085042', class: "select__option-list", allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: 'ee2a47069552cc829896dcd581490d2c8edc6bb0', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '887bea0bbe3aebc669b531d9d3c9a5e915a50eb7', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: 'c95e6109170d160f4f6edea71264df75e48749ca', onSlotchange: this.onSlotChange }))))));
+            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: 'cc98de26ca16cdc93b92c1228e30e8218d8eb579', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '9a178afb309ad1293e4c359890c26fdfcd84f6a3', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: 'b22fd69f4454fffc9f02306de13a30f54075ade5', class: "select__search" }, h("swirl-icon-search", { key: '0f78872ac2d72c2ac72687447003386c56d1c0ca', class: "select__search-icon", size: 20 }), h("input", { key: '71918c760e999fd7de2d6b45a675128ca4d5ec58', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: 'b3a39714d98982d0dad54b8f806ab7b00133abff', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: '6ef5e6df3e406798397f26bfe6856ebd1a097135', class: "select__option-list", allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '7363cb40bf07d37dc0bb1130cdf70393ed1dd987', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: 'c167dca6ff5c79fd3530991ab4627c928c066d51', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: 'adb41f9740d387f20b81e8313305ac4de23e6917', onSlotchange: this.onSlotChange }))))));
     }
     static get is() { return "swirl-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.js

@@ -175,24 +175,24 @@ export class SwirlShellLayout {
             "shell-layout--mobile-navigation-active": this.mobileNavigationActive,
             "shell-layout--navigation-collapsed": mainNavCollapsed,
         });
-        return (h(Host, { key: '8ab2509d3640e6ff5ddf7644c84d52a9da818499' }, h("div", { key: 'ae61dbb833096a829df0117aa735c1f344b753b0', class: className }, h("header", { key: '2456b4b9dd7adf90bcb8e8030068b6dc9b1a2c48', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'c440272c0cb9cb2cc05b64480dc0464b0950bae0', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '803658c982ac00d9b21ef7f6cd982edbcced005b', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: 'ea9ecdfe7216719082b0f34d9cf8615b1dadaa27', content: this.navigationCollapsed
+        return (h(Host, { key: '0df2c20baa7bde61d6deba35b10a912baf09ee53' }, h("div", { key: 'fddca1320b500709a78b8c27cf40104ed88869f8', class: className }, h("header", { key: '4d97d3d4e8d24e99b868cef59ab641297e88c48a', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'f5786e887a58c682016e4a9dfadc01c6a9e73ae2', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '4f587bc7b6f233b32f09010b97f31a20b06cff36', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: '1f3f33269c494cb5b55808c8e80f656d9903f629', content: this.navigationCollapsed
                 ? this.expandNavigationButtonLabel
-                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '28518af9a719bd23993bab24c7549b26c41316d3', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (h("swirl-icon-dock-left-expand", { size: 20 })) : (h("swirl-icon-dock-left-collapse", { size: 20 })), h("swirl-visually-hidden", { key: '5893bfd1dbb2182af0cbe16116251270a71bce47' }, this.navigationCollapsed
+                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: 'ec38beba1849662adbcfaf77f6497cb062718332', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (h("swirl-icon-dock-left-expand", { size: 20 })) : (h("swirl-icon-dock-left-collapse", { size: 20 })), h("swirl-visually-hidden", { key: '9f7b3d9f62f3dc97f03fdc6e9ab9b3affe502359' }, this.navigationCollapsed
             ? this.expandNavigationButtonLabel
-            : this.collapseNavigationButtonLabel))), h("a", { key: 'cd11ecb0a4b78a7254b765a6c47c694c819d754b', class: "shell-layout__header-tool", onClick: this.historyBackClick.emit, href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: 'fb0095390d4d6b2d9ce123d1e62f0fbdeb045125', size: 20 }), h("swirl-visually-hidden", { key: '7eefa10bec70a97cb8c6659034b67fc233371998' }, this.browserBackButtonLabel)), h("a", { key: 'e4b9a6165674bed6f41e984db15e746ce2bfc5c5', class: "shell-layout__header-tool", onClick: this.historyForwardClick.emit, href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '916fb846cdec66cb68d7325a99008676ba6810ae', size: 20 }), h("swirl-visually-hidden", { key: '8319bdfbce89451ca5245dace1b22d8282f1d384' }, this.browserForwardButtonLabel)), h("slot", { key: '6c93bb6fb16b11dd85d524a94750b1a56c6ae22d', name: "left-header-tools" })), h("div", { key: '286f7489dc541a8d4c811ef14c1367bfd3e332b1', class: "shell-layout__logo" }, h("slot", { key: 'c5102079ac7b2be42c56d9df910be8f50516dde9', name: "logo" })), h("div", { key: '89cbd30fc8abee2f582a5b09e10288b7caf9b628', class: "shell-layout__header-right" }, h("slot", { key: '2e47c1364a63b1a89aa5dbe7646977b48b1443b5', name: "right-header-tools" }), h("slot", { key: 'fa411ae0cf28ce5e66cb17c332ca0c6c175effc1', name: "avatar" }))), h("div", { key: '862d113b89fe0667bae68c6c32a39196f4e3a432', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '4ebd16eb495762ddad2d13412aa39e70a5728907', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '89b5b7e663252be56bfed87debff40af1553ee2f', class: "shell-layout__mobile-header" }, h("slot", { key: '68a410d455e01a6820968aca84da34d2e6dcea45', name: "mobile-logo" }), h("div", { key: '57d0d71c4c6327d828d62bb73804c72e1dc32ff2', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '86a580d9e5b943a89dc30228a093aebbb327440d', name: "mobile-header-tools" }), h("button", { key: '8116fb2c2f2c8543e6aac0e1251ebd19cbd862da', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'ca49ac7ce96536af1d9d4674db43278ad11a030c', size: 20 }), h("swirl-visually-hidden", { key: '4df0f52299f6c922863d2730f65d18ae63500045' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: 'a250261dfdc43481e56aa8f0a56929f0121aca30', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: 'e427a5a9a1abf3b83522e258e1680175f983d699' }, h("span", { key: '0804d9124772472504471320459a315b582ff0da', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '81f79908deba3e155cb770e9ed804260807b3675', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '7bf92d40cdd8a7c86a23b53a523e56068a021319', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'daf96d787fbe84d5bcb840d8964a3311d185e1d8', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '24abed6e62a5f73769c7760999bfe0dd80883a3c', paddingBlockEnd: "16" }, h("swirl-stack", { key: '2eb7f00c2bb9ae54dfe86504728bf222f23d91c8', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: 'c35406894c7178bdb7ae6896b7bb23c8954b3dac', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
+            : this.collapseNavigationButtonLabel))), h("a", { key: '0812e7a332b7449d4d6c35a496040fac76f5e076', class: "shell-layout__header-tool", onClick: this.historyBackClick.emit, href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '3995e584995e805b428904b48183c1bbaf3c9a8b', size: 20 }), h("swirl-visually-hidden", { key: '5dd811ec31da84e44152e24dcf53b7a22a9d5cae' }, this.browserBackButtonLabel)), h("a", { key: '13e52d0c564c5e5c626a3d6061c827c9dd0f5933', class: "shell-layout__header-tool", onClick: this.historyForwardClick.emit, href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '63530b6b32f7917976365c3026b3bdffae38889b', size: 20 }), h("swirl-visually-hidden", { key: 'a8d109c40cce19029a733d2acac0c6c837f57f7d' }, this.browserForwardButtonLabel)), h("slot", { key: 'fcbead7a60ad9ce498fe521a7741afe97b029a6a', name: "left-header-tools" })), h("div", { key: '5e95f80f303599960b861a81983624205be950e8', class: "shell-layout__logo" }, h("slot", { key: 'ef5d8033fb7184577718a0e1fff0353023f5cd52', name: "logo" })), h("div", { key: '98b8440dd6db7a7d68e294e0f47806c0bbea1740', class: "shell-layout__header-right" }, h("slot", { key: '89f005b1d3de3803973723ebe8a8a9c27c89b14b', name: "right-header-tools" }), h("slot", { key: '8408ece20c06cebb0dd6806fbb22d4994c97d148', name: "avatar" }))), h("div", { key: '89f0294326e74fdd9e405ba062eb91fc8a056a1d', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: 'cb8048b0488394cddfdec7e8bfd8ceceee63d7e3', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '7e87de47c7ec2779b8cec8522bc9a885314f8a5d', class: "shell-layout__mobile-header" }, h("slot", { key: '09cffc0557feef085e231df9a3cd6f1ee34b0ef1', name: "mobile-logo" }), h("div", { key: '4a111c41e215834efb0abb8cefabcfd0eca63e7f', class: "shell-layout__mobile-header-tools" }, h("slot", { key: 'd97fabcf081a10a950143c0318434d6498c0fd08', name: "mobile-header-tools" }), h("button", { key: '0f87222f1514ba6bcdaddc541576148f582b8603', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '3eee7e2283ad38764fd33a99757a6b202bc62e21', size: 20 }), h("swirl-visually-hidden", { key: 'dc49231404cb761b9d1f8a5321eedf97c8f30134' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: 'b06b1482a38ff3c146cc04827d8fc3c0abd15e6b', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '09e334f1827e8dedba7d34a91d73cffa8782fbc0' }, h("span", { key: 'b310b5f8d2a26e9434d897284265c599801ed8f7', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'b9aa5f91ac6fce9d1f6497ed5f5206ee654ef60a', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '3152a89d29b711fdc9f1853381d7910ed94c272e', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'f28b0538afda37ea8f389c945c45ccb3951b414b', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '5e030cf09beafdc015ba72cd8ec50e62d2b02a74', paddingBlockEnd: "16" }, h("swirl-stack", { key: '6eabe3692316b33dc1d098c8f46f64d0d073b2cc', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '1b4960148cffcdf2a0da69eb1456ecd2d6847473', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
                 ? "<swirl-icon-expand-more></swirl-icon-expand-more>"
                 : "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
                 ? this.secondaryNavExpandLabel
-                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '034105feb112d6565151374fe46c09033929f805', icon: this.secondaryNavView === "grid"
+                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: 'f9ad0d814533f107623824148a406aeff464b657', icon: this.secondaryNavView === "grid"
                 ? "<swirl-icon-menu></swirl-icon-menu>"
                 : "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
                 ? this.gridNavLayoutToggleLabel
-                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '297358c0432f5c6f9cba83fdb19ecb7fce543a8f', class: {
+                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: 'a1be2fc91d2948012afb5625d18a089de7fe08c9', class: {
                 [`shell-layout__secondary-nav-items--${this.secondaryNavGridLayoutVariant}`]: true,
                 "shell-layout__secondary-nav-items": true,
                 "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
                     this.secondaryNavView === "grid",
-            } }, h("slot", { key: '277d58ee65b127675bb42b17d7e507bf11bfee96', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '1be0deefac85edc50478bf255fa3ff861183d11f', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '0349633ab62c8e360213b23cfea3da83f0ddd62c' })))));
+            } }, h("slot", { key: '178548bfa49aa871320a4bca72b94517a2be1d9c', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '9e3f904b12577733e14bd0ce3c3615bdfdc3d594', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '0a7f7fac29ecdf5adfdf3e4ae9efef7776e5a899' })))));
     }
     static get is() { return "swirl-shell-layout"; }
     static get encapsulation() { return "scoped"; }

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

@@ -63,9 +63,9 @@ export class SwirlShellNavigationItem {
         const tooltipContent = this.description
             ? `${this.label} ${this.description}`
             : this.label;
-        return (h(Host, { key: 'eb88aec0b325ba805671f35a721509f1ffffaddb' }, h("swirl-tooltip", { key: '46aca84aa4c3e4a5c1f894e3d017e2cf76b2641f', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right" }, h(Tag, { key: '995f5937212f80ec263bee4140b06dc39cf9db37', "aria-current": this.swirlAriaCurrent, class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button", title: !this.hideLabel ? this.label : undefined }, h("span", { key: 'dbdfc55cda70a2f7513f4a8d8cf08ec448006c55', class: "shell-navigation-item__icon" }, h("slot", { key: '47562f0fafec11e865f8542b32fde93e4a0229da', name: "icon" })), !this.hideLabel ? (this.variant !== "default" ? (h("span", { class: labelClassNames }, this.label)) : (h("div", { class: "shell-navigation-item__text-wrapper" }, h("span", { class: labelClassNames }, this.label), this.description && (h("span", { class: "shell-navigation-item__description" }, this.description))))) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), hasBadge && (h("span", { key: '789645f007ca97ba7221916dacf27dbf14630a16', class: "shell-navigation-item__badge-wrapper" }, h("swirl-badge", { key: 'f6afb63648b52560a5258e5c2171684f90ddce09', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
+        return (h(Host, { key: '33ee5699da985cdddbf63f7c389277c629879844' }, h("swirl-tooltip", { key: '8a1a5214fbc9632aa1b79b15fb463eaff62fee9b', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right" }, h(Tag, { key: '7502772db476e2cc6b8cf1f232dbb3a75f16423b', "aria-current": this.swirlAriaCurrent, class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button", title: !this.hideLabel ? this.label : undefined }, h("span", { key: '790a8af5734f0d21e4c6a5aa8638f683271d9375', class: "shell-navigation-item__icon" }, h("slot", { key: 'c3d0f50d2fc85c293c0291e1924e4e033894b6e1', name: "icon" })), !this.hideLabel ? (this.variant !== "default" ? (h("span", { class: labelClassNames }, this.label)) : (h("div", { class: "shell-navigation-item__text-wrapper" }, h("span", { class: labelClassNames }, this.label), this.description && (h("span", { class: "shell-navigation-item__description" }, this.description))))) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), hasBadge && (h("span", { key: '41b4e089f6108ec3254d9152d12c57b7e7fd91a1', class: "shell-navigation-item__badge-wrapper" }, h("swirl-badge", { key: 'b79b047139205211f0894c90ad63003077dc50c7', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
                 "shell-navigation-item__badge--dot": this.badgeLabel === "",
-            }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: 'aeb15827594215614b277e852d41895a026e4ff6', class: "shell-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "s", variant: "strong" })), showIsNewBadge && (h("swirl-badge", { key: '63f236a979a028a63e9e663b75996a1baebf360b', class: "shell-navigation-item__is-new-badge", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "xs", variant: "dot" }))))));
+            }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: '365bb7594f6e0a43bcbae8f1f53d7492e3444022', class: "shell-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "s", variant: "strong" })), showIsNewBadge && (h("swirl-badge", { key: '342437af8cf87922e1907fa2bf7d4e1a0666280c', class: "shell-navigation-item__is-new-badge", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "xs", variant: "dot" }))))));
     }
     static get is() { return "swirl-shell-navigation-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-skeleton-box/swirl-skeleton-box.js

@@ -7,11 +7,11 @@ export class SwirlSkeletonBox {
     }
     render() {
         const className = classnames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
-        return (h(Host, { key: '441b8a19f3335a6a306eb0c633170a9b7381e8f8', style: {
+        return (h(Host, { key: '0766d24e9c6dd8b47f0cde12acc961798539a663', style: {
                 width: !Boolean(this.width) && !Boolean(this.aspectRatio)
                     ? "100%"
                     : undefined,
-            } }, h("div", { key: 'ee2b103f0fe94577e43f25edf905201b1f4405ca', class: className, style: {
+            } }, h("div", { key: '78ef731b5c403dfe74d3034ac8bcef63e0bac16c', class: className, style: {
                 aspectRatio: this.aspectRatio,
                 borderRadius: this.borderRadius !== "pill" && this.borderRadius !== "none"
                     ? `var(--s-border-radius-${this.borderRadius})`

package/dist/collection/components/swirl-skeleton-text/swirl-skeleton-text.js

@@ -9,7 +9,7 @@ export class SwirlSkeletonText {
     render() {
         const className = classnames("skeleton-text", `skeleton-text--size-${this.size}`, { "skeleton-text--static": !this.animated });
         const lineClassName = classnames("skeleton-text__line", `skeleton-text__line--size-${this.size}`);
-        return (h(Host, { key: '2aa9835bfb3fd326dd9a5cbf891aeb7dac514984' }, h("div", { key: 'a75f8408ca22ec654f1694e88553f0474ab611b9', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index) => (h("div", { class: lineClassName, key: index, part: lineClassName }))))));
+        return (h(Host, { key: '77301b4779d053d7485e3fc056093c8aca75d56c' }, h("div", { key: 'd48fb445adb540f5fcc2a3c0fcfe64c263ef2be9', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index) => (h("div", { class: lineClassName, key: index, part: lineClassName }))))));
     }
     static get is() { return "swirl-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ export class SwirlSpinner {
     }
     render() {
         const className = classnames("spinner", `spinner--size-${this.size}`);
-        return (h(Host, { key: '5544edc0f82386b224bcf0c5792bb05424543668' }, h("span", { key: 'cb7548a02eb825da062b0f74ac1f772e230e0e29', class: className, role: Boolean(this.label) ? "status" : undefined }, h("svg", { key: '3a2cdc2eaca321e16bf12a42023e479aac570fc7', "aria-hidden": "true", class: "spinner__indicator", focusable: "false", viewBox: "0 0 50 50" }, h("circle", { key: 'b8283165b541c138e42a79ee74aeb48fdbaa5f93', class: "spinner__background", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" }), h("circle", { key: '63a5edeff65a8b4c4967919cca3e963153b6a3fa', class: "spinner__circle", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" })), this.label && (h("swirl-visually-hidden", { key: '2af2234781a294defafbcf4331234d0eee7aa701' }, h("span", { key: '4c09ced8e600d07396d9746c19e5dcf3a8d70cb0', class: "spinner__label" }, this.label))))));
+        return (h(Host, { key: '2f761771a7f8ce7e6a101e112e0ca13b28d3a395' }, h("span", { key: '6fab35299e5384a5ea83dab47f4e6cbfc5ed8334', class: className, role: Boolean(this.label) ? "status" : undefined }, h("svg", { key: '8d7450bf5fedf307a9372a28aeb61ce5d164daf6', "aria-hidden": "true", class: "spinner__indicator", focusable: "false", viewBox: "0 0 50 50" }, h("circle", { key: '80b2296b1b60e70d5b771406101d9d5e95cfdd7a', class: "spinner__background", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" }), h("circle", { key: 'ec3742637ae8514bbada169901575892ffd5e50f', class: "spinner__circle", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" })), this.label && (h("swirl-visually-hidden", { key: 'acc70969490493433e58b543b8e4db8e75e795bf' }, h("span", { key: 'a8fd095d46463f8c08fb52ac9d70ec8f670973f9', class: "spinner__label" }, this.label))))));
     }
     static get is() { return "swirl-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-status-indicator/swirl-status-indicator.js

@@ -3,7 +3,7 @@ import classnames from "classnames";
 export class SwirlStatusIndicator {
     render() {
         const className = classnames("status-indicator", `status-indicator--intent-${this.intent}`);
-        return (h(Host, { key: 'cb88526fa82919a5fafca6ffc7c391ef73384c6d' }, h("div", { key: 'b2c3acb744ad01e299cfcff90c2f0941a39a30df', class: className }, h("span", { key: '5b3104b21936adc88ac231b3b0166794482a3390', class: "status-indicator__dot" }), h("span", { key: '18da5951c88c29e8a29c63230cd3c26ae4c8001b', class: "status-indicator__label" }, this.label))));
+        return (h(Host, { key: '62f371ab1f733071a33215f1b2d618f352932906' }, h("div", { key: 'de36fa200de899dfa926b58506ebfe498095d65b', class: className }, h("span", { key: '70097360cd5d8f107768409986891c0e4759c768', class: "status-indicator__dot" }), h("span", { key: 'bb9a68874c9ea67161d73291315974c449688723', class: "status-indicator__label" }, this.label))));
     }
     static get is() { return "swirl-status-indicator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,9 +26,9 @@ export class SwirlSwitch {
             "switch--disabled": this.disabled,
             "switch--hide-content": this.hideLabel && (!this.description || this.hideDescription),
         });
-        return (h(Host, { key: '92bd74a7ece245755e1d796a493fe5839218c994' }, h("label", { key: 'f7da6cc360c199a461bb04c4d2b042865deb5542', class: className, htmlFor: this.inputId }, h("span", { key: '3de69f298db068eded6d488960b6cece2c5418de', class: "switch__control" }, h("swirl-visually-hidden", { key: '93403d1f8d9b7c50b626b738d999d936bd3b50ac' }, h("input", { key: '01099a9dd2920adb445e02dc4c442b64d4a0ec3e', "aria-checked": ariaCheckedLabel, "aria-label": !this.hideLabel && this.swirlAriaLabel
+        return (h(Host, { key: '50b3357b11531b7b54760da2a757c5d20c2456a7' }, h("label", { key: '2fb84e079c1e250042827d4b727ede8fb1d8dfbf', class: className, htmlFor: this.inputId }, h("span", { key: '272a48201fab35cdf5e9e5e2048369a864403b34', class: "switch__control" }, h("swirl-visually-hidden", { key: '66e44c3a9b42cd634cf87e399b37436c9c250fa6' }, h("input", { key: 'ae147b742a03936b5cb7e3337a9ad8ace135b6f7', "aria-checked": ariaCheckedLabel, "aria-label": !this.hideLabel && this.swirlAriaLabel
                 ? this.swirlAriaLabel
-                : undefined, checked: on, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), role: "switch", type: "checkbox", value: this.value })), h("span", { key: 'b75cfc6ce6d5ca8e5b6504d96978264a30f41ea2', "aria-hidden": "true", class: "switch__thumb" })), h("swirl-stack", { key: '301b8be940c55015ca2e43a532e203ac953f3024', class: "switch__content" }, this.label && !this.hideLabel && (h("span", { key: '801a5495bd6f7a0d155a2735c85fa525786d56e0', class: "switch__label" }, this.label)), this.hideLabel && (h("swirl-visually-hidden", { key: 'ca221c41c360eec3efbb83f9494a1f0227e0a499' }, this.swirlAriaLabel || this.label)), this.description && !this.hideDescription && (h("span", { key: '1d2e687530751c23a6cdcc8e5d9e1e66dd42f13b', class: "switch__description" }, this.description)), this.description && this.hideDescription && (h("swirl-visually-hidden", { key: '168f7986e7c1a76d618e8379af3861a46e7dfa0f' }, this.description))))));
+                : undefined, checked: on, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), role: "switch", type: "checkbox", value: this.value })), h("span", { key: '0e8bc773fa78d82f17e84b43d59d804246879619', "aria-hidden": "true", class: "switch__thumb" })), h("swirl-stack", { key: 'd9bec995417f915c3219ed3ff4d4eaa10d23f4b9', class: "switch__content" }, this.label && !this.hideLabel && (h("span", { key: 'bcb1123bdf250a15454fbed0cc0fcd3b484887bd', class: "switch__label" }, this.label)), this.hideLabel && (h("swirl-visually-hidden", { key: 'd8e3e5bc029e05b8f73500ab70d3fb73b1420b6a' }, this.swirlAriaLabel || this.label)), this.description && !this.hideDescription && (h("span", { key: 'a46ecfe95969643500e26224f8b021985f461fa9', class: "switch__description" }, this.description)), this.description && this.hideDescription && (h("swirl-visually-hidden", { key: '71c99b5f29ab55c5c9a48e4ae1e009e326a39729' }, this.description))))));
     }
     static get is() { return "swirl-switch"; }
     static get encapsulation() { return "scoped"; }

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

@@ -5,7 +5,7 @@ export class SwirlHeading {
     }
     render() {
         const Tag = `swirl-symbol-${this.glyph}`;
-        return (h(Host, { key: '78ce115a6f5134065593529d95c9e7914fff5fa2' }, h(Tag, { key: '66b78a72e2ffd6b35cc57bb1baa11d35a5e3e67e', size: this.size })));
+        return (h(Host, { key: '5f98e92252dfa54416fc589f089a97987d100178' }, h(Tag, { key: '4d6c9bf528569ff9e31fcc7f975cb836bc3ca796', size: this.size })));
     }
     static get is() { return "swirl-symbol"; }
     static get encapsulation() { return "shadow"; }