@getflip/swirl-components 0.528.0 → 0.529.0

package/dist/collection/components/swirl-menu-item/swirl-menu-item.js

@@ -108,9 +108,9 @@ export class SwirlMenuItem {
         const className = classnames("menu-item", {
             "menu-item--expanded": this.expanded,
         });
-        return (h(Host, { key: '6d9aadc8d60101965a884aecb033ab687241372f' }, h("div", { key: '85c5ab88282aacba0754e047906ef01a889f4acb', class: className }, this.parentMenu?.variant === "selection"
+        return (h(Host, { key: '338a54ede7e89af70c2674395dc88424e1d1ba9f' }, h("div", { key: '749c99c31d8074a50ca5163e5f645b8df29735e4', class: className }, this.parentMenu?.variant === "selection"
             ? this.renderOptionListItem()
-            : this.renderActionListItem(), h("slot", { key: 'a3c910422dfb38843d2f6a377e59229c50b74ab7', onSlotchange: this.onSlotChange }))));
+            : this.renderActionListItem(), h("slot", { key: 'a45bf8498dc58c41b62deb5be77665f0544d57a9', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "swirl-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -173,7 +173,10 @@ export class SwirlPopover {
             this.openedVia = undefined;
         }, 150);
         this.unlockBodyScroll();
-        if (this.returnFocusToTrigger && !disableFocus) {
+        const openedWithoutActivation = this.openedVia === "hover" || this.openedVia === "focus";
+        if (this.returnFocusToTrigger &&
+            !disableFocus &&
+            !openedWithoutActivation) {
             this.getNativeTriggerElement()?.focus();
         }
     }
@@ -259,7 +262,7 @@ export class SwirlPopover {
         if (!Boolean(nativeTriggerEl)) {
             return;
         }
-        if (controlledVia !== "hover") {
+        if (controlledVia !== "hover" && controlledVia !== "focus") {
             nativeTriggerEl.setAttribute("aria-controls", this.el.id);
             nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
         }
@@ -324,18 +327,18 @@ export class SwirlPopover {
             "popover--transparent": this.transparent,
             "popover--padded": this.padded,
         });
-        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: {
+        return (h(Host, { key: '3b3bb710683441a4f971a25542894ad965254b42' }, h("div", { key: 'a142e898bbe09ad766ee5111b1ed6c1b0320cf7e', popover: "manual", class: className, onKeyDown: this.onKeydown, ref: (el) => (this.popoverEl = el) }, h("div", { key: '820a28e75d0b508b6d939219734522d92943c0d6', "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 && !mobileBottomSheet
                     ? "0"
                     : undefined,
                 "--swirl-popover-border-radius": borderRadius,
-            }, 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: {
+            }, tabindex: "-1" }, h("span", { key: '4ce3efbab020862c26ad9177274c0ed6794374bd', class: "popover__handle" }), h("div", { key: '526fc65ea325a29ece87639893af06f37cf71978', 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: '6738a50232fbcd30ff9f6d32ccecdeab84dd6601' }))), this.active && (h("div", { key: '235e0b3da6c09ca4de1092bad7cec77e1013e82d', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+            } }, h("slot", { key: '6fc74e080d35e318cf520d65520c2d73fb434d75' }))), this.active && (h("div", { key: '83df142ba2da01ee5312e82dbbc2b83775d526ed', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
     }
     static get is() { return "swirl-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -844,7 +847,7 @@ export class SwirlPopover {
                             "docs": ""
                         }, {
                             "name": "via",
-                            "type": "\"click\" | \"hover\" | \"programmatic\"",
+                            "type": "\"click\" | \"focus\" | \"hover\" | \"programmatic\"",
                             "docs": ""
                         }],
                     "references": {
@@ -901,7 +904,7 @@ export class SwirlPopover {
                             "docs": ""
                         }, {
                             "name": "via",
-                            "type": "\"click\" | \"hover\" | \"programmatic\"",
+                            "type": "\"click\" | \"focus\" | \"hover\" | \"programmatic\"",
                             "docs": ""
                         }],
                     "references": {

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

@@ -1,4 +1,10 @@
 import { h, Host } from "@stencil/core";
+import { getActiveElement, isDescendantOf } from "../../utils";
+const swirlPopoverTriggerMethods = [
+    "click",
+    "hover",
+    "focus",
+];
 /**
  * @slot slot - The trigger element (e.g. a button) that opens the popover.
  */
@@ -6,10 +12,13 @@ export class SwirlPopoverTrigger {
     constructor() {
         this.hidePopoverWhenInvisible = true;
         this.setAriaAttributes = true;
+        /** @deprecated Please use the "trigger" prop instead, e.g. trigger="click". */
         this.triggerOnClick = true;
+        /** @deprecated Please use the "trigger" prop instead, e.g. trigger="hover focus". */
         this.triggerOnHover = false;
         this.componentLoaded = false;
         this.triggerIsActive = false;
+        this.triggerMethods = [];
         this.popoverMouseEnter = () => {
             this.stopHoverLingerTimer();
         };
@@ -19,49 +28,70 @@ export class SwirlPopoverTrigger {
             }
         };
         this.onMouseenter = () => {
-            if (!this.triggerOnHover)
+            if (!this.triggerMethods.includes("hover"))
                 return;
             this.stopHoverLingerTimer();
             this.triggerIsActive = true;
             this.hoverDelayReference = setTimeout(() => {
                 this.hoverDelayReference = undefined;
-                if (this.triggerOnHover) {
-                    this.mouseenterHandler();
+                if (this.triggerMethods.includes("hover")) {
+                    this.openPopover("hover", true);
                 }
             }, this.hoverDelay);
         };
-        this.mouseenterHandler = () => {
-            const popoverEl = this.getPopoverEl();
-            const triggerEl = this.getTriggerEl();
-            popoverEl.open(triggerEl, true, "hover");
-            popoverEl.addEventListener("popoverOpen", () => {
-                this.updateTriggerElAriaAttributes(true);
-            }, { once: true });
-            popoverEl.addEventListener("popoverClose", () => {
-                this.updateTriggerElAriaAttributes(false);
-            }, { once: true });
-        };
         this.onMouseleave = () => {
             clearTimeout(this.hoverDelayReference);
             this.mouseleaveHandler();
         };
         this.mouseleaveHandler = () => {
-            if (!this.triggerOnHover)
+            if (!this.triggerMethods.includes("hover"))
                 return;
             this.startHoverLingerTimer();
         };
         this.onClick = () => {
-            if (!this.triggerOnClick)
+            if (!this.triggerMethods.includes("click"))
                 return;
             const popoverEl = this.getPopoverEl();
             const triggerEl = this.getTriggerEl();
+            if (!Boolean(popoverEl)) {
+                return;
+            }
+            this.syncAriaOnNextTransition(popoverEl);
             popoverEl.toggle(triggerEl, "click");
-            popoverEl.addEventListener("popoverOpen", () => {
-                this.updateTriggerElAriaAttributes(true);
-            }, { once: true });
-            popoverEl.addEventListener("popoverClose", () => {
-                this.updateTriggerElAriaAttributes(false);
-            }, { once: true });
+        };
+        this.onFocusin = () => {
+            if (!this.triggerMethods.includes("focus"))
+                return;
+            // Dead-click guard: with "click" active and "hover" not, focusin would
+            // open the popover and the click that follows would immediately toggle
+            // it shut again, making the click appear to do nothing.
+            if (this.triggerMethods.includes("click") &&
+                !this.triggerMethods.includes("hover")) {
+                return;
+            }
+            this.openPopover("focus", true);
+        };
+        this.onFocusout = (event) => {
+            if (!this.triggerMethods.includes("focus"))
+                return;
+            if (this.focusStaysWithin(event.relatedTarget)) {
+                return;
+            }
+            this.closePopover(true);
+        };
+        this.onKeyDown = (event) => {
+            if (event.code !== "Escape")
+                return;
+            if (!this.isPopoverOpen())
+                return;
+            event.stopPropagation();
+            this.closePopover(true);
+        };
+        this.ariaOpenHandler = () => {
+            this.updateTriggerElAriaAttributes(true);
+        };
+        this.ariaCloseHandler = () => {
+            this.updateTriggerElAriaAttributes(false);
         };
         this.updateTriggerElAriaAttributes = (open) => {
             if (!this.setAriaAttributes) {
@@ -73,7 +103,7 @@ export class SwirlPopoverTrigger {
             }
             const popoverId = this.getPopoverEl()?.id;
             if (triggerEl.tagName.startsWith("SWIRL-")) {
-                if (!this.triggerOnHover) {
+                if (!this.opensWithoutActivation) {
                     triggerEl.setAttribute("swirl-aria-controls", popoverId);
                     triggerEl.setAttribute("swirl-aria-expanded", String(open || "false"));
                 }
@@ -84,7 +114,7 @@ export class SwirlPopoverTrigger {
                 triggerEl.setAttribute("swirl-aria-haspopup", "dialog");
             }
             else {
-                if (!this.triggerOnHover) {
+                if (!this.opensWithoutActivation) {
                     triggerEl.setAttribute("aria-controls", popoverId);
                     triggerEl.setAttribute("aria-expanded", String(open || "false"));
                 }
@@ -102,6 +132,10 @@ export class SwirlPopoverTrigger {
             this.setupIntersectionObserver();
         }
     }
+    componentWillLoad() {
+        this.warnAboutDeprecatedProps();
+        this.resolveTriggerMethods();
+    }
     componentDidLoad() {
         this.updateTriggerElAriaAttributes();
         this.setupHoverListeners();
@@ -111,17 +145,57 @@ export class SwirlPopoverTrigger {
     disconnectedCallback() {
         this.intersectionObserver?.disconnect();
         this.removeHoverListeners();
+        this.removeAriaSyncListeners();
         clearTimeout(this.hoverDelayReference);
         clearTimeout(this.hoverLingerReference);
     }
     watchPopover() {
         this.updateTriggerElAriaAttributes();
     }
-    watchHover() {
-        this.updateTriggerElAriaAttributes();
+    watchTrigger() {
+        this.resolveTriggerMethods();
+        if (this.componentLoaded) {
+            this.updateTriggerElAriaAttributes();
+        }
         clearTimeout(this.hoverDelayReference);
         clearTimeout(this.hoverLingerReference);
     }
+    warnAboutDeprecatedProps() {
+        if (this.triggerOnHover === true) {
+            console.warn('[Swirl] The "triggerOnHover" prop of swirl-popover-trigger is deprecated and will be removed with the next major release. Please use the "trigger" prop instead, e.g. trigger="hover focus".');
+        }
+        if (this.triggerOnClick === false) {
+            console.warn('[Swirl] The "triggerOnClick" prop of swirl-popover-trigger is deprecated and will be removed with the next major release. Please use the "trigger" prop instead, e.g. trigger="hover focus".');
+        }
+        if (Boolean(this.trigger) &&
+            (this.triggerOnHover === true || this.triggerOnClick === false)) {
+            console.warn('[Swirl] swirl-popover-trigger: the "trigger" prop takes precedence over "triggerOnClick"/"triggerOnHover", which are ignored.');
+        }
+    }
+    resolveTriggerMethods() {
+        if (Boolean(this.trigger)) {
+            const rawValues = Array.isArray(this.trigger)
+                ? this.trigger
+                : String(this.trigger).split(/[\s,]+/);
+            const normalized = rawValues
+                .map((value) => String(value).trim().toLowerCase())
+                .filter((value) => value.length > 0);
+            const unsupported = normalized.filter((value) => !swirlPopoverTriggerMethods.includes(value));
+            if (unsupported.length > 0) {
+                console.warn(`[Swirl] Unsupported "trigger" value(s) for swirl-popover-trigger: ${unsupported.join(", ")}. Supported values: ${swirlPopoverTriggerMethods.join(", ")}.`);
+            }
+            this.triggerMethods = normalized.filter((value) => swirlPopoverTriggerMethods.includes(value));
+            return;
+        }
+        const methods = [];
+        if (this.triggerOnClick) {
+            methods.push("click");
+        }
+        if (this.triggerOnHover) {
+            methods.push("hover", "focus");
+        }
+        this.triggerMethods = methods;
+    }
     getPopoverEl() {
         return typeof this.swirlPopover === "string"
             ? document.querySelector(`#${this.swirlPopover}`)
@@ -170,8 +244,10 @@ export class SwirlPopoverTrigger {
     startHoverLingerTimer() {
         clearTimeout(this.hoverLingerReference);
         this.hoverLingerReference = setTimeout(() => {
-            if (this.triggerIsActive && this.isPopoverOpen()) {
-                this.getPopoverEl().close(true);
+            if (this.triggerIsActive &&
+                this.isPopoverOpen() &&
+                !this.focusStaysWithin(getActiveElement())) {
+                this.closePopover(true);
             }
             this.triggerIsActive = false;
         }, this.hoverLingerDuration);
@@ -179,13 +255,57 @@ export class SwirlPopoverTrigger {
     stopHoverLingerTimer() {
         clearTimeout(this.hoverLingerReference);
     }
+    focusStaysWithin(node) {
+        if (!Boolean(node)) {
+            return false;
+        }
+        const popoverEl = this.getPopoverEl();
+        return (isDescendantOf(node, this.el) ||
+            (Boolean(popoverEl) && isDescendantOf(node, popoverEl)));
+    }
+    removeAriaSyncListeners() {
+        const popoverEl = this.getPopoverEl();
+        popoverEl?.removeEventListener("popoverOpen", this.ariaOpenHandler);
+        popoverEl?.removeEventListener("popoverClose", this.ariaCloseHandler);
+    }
+    syncAriaOnNextTransition(popoverEl) {
+        this.removeAriaSyncListeners();
+        popoverEl.addEventListener("popoverOpen", this.ariaOpenHandler, {
+            once: true,
+        });
+        popoverEl.addEventListener("popoverClose", this.ariaCloseHandler, {
+            once: true,
+        });
+    }
+    openPopover(via, disableFocus) {
+        const popoverEl = this.getPopoverEl();
+        const triggerEl = this.getTriggerEl();
+        if (!Boolean(popoverEl)) {
+            return;
+        }
+        this.syncAriaOnNextTransition(popoverEl);
+        popoverEl.open(triggerEl, disableFocus, via);
+    }
+    closePopover(disableFocus) {
+        const popoverEl = this.getPopoverEl();
+        if (!Boolean(popoverEl)) {
+            return;
+        }
+        this.syncAriaOnNextTransition(popoverEl);
+        popoverEl.close(disableFocus);
+    }
+    get opensWithoutActivation() {
+        return (this.triggerMethods.includes("hover") ||
+            this.triggerMethods.includes("focus"));
+    }
     isPopoverOpen() {
         const popover = this.getPopoverEl();
-        const isActive = popover?.shadowRoot.firstChild?.classList.contains("popover--active");
-        return isActive;
+        const isActive = popover?.shadowRoot?.firstElementChild?.classList.contains("popover--active");
+        const isClosing = popover?.shadowRoot?.firstElementChild?.classList.contains("popover--closing");
+        return Boolean(isActive) && !isClosing;
     }
     render() {
-        return (h(Host, { key: '22bfdc7fa899a0d023822168e9bd27e45dd68e57', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: 'a999b770064430a58861caff85237d7653dfccb5' })));
+        return (h(Host, { key: '41d9dbdc7a68af0b94561323006b53c96242622d', onClick: this.onClick, onFocusin: this.onFocusin, onFocusout: this.onFocusout, onKeyDown: this.onKeyDown, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '4dd8f675b36af944ac83f22e087c3c5f6c572157' })));
     }
     static get is() { return "swirl-popover-trigger"; }
     static get encapsulation() { return "scoped"; }
@@ -293,6 +413,31 @@ export class SwirlPopoverTrigger {
                 "reflect": false,
                 "attribute": "swirl-popover"
             },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlPopoverTriggerMethod[] | string",
+                    "resolved": "SwirlPopoverTriggerMethod[] | string",
+                    "references": {
+                        "SwirlPopoverTriggerMethod": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-popover-trigger/swirl-popover-trigger.tsx",
+                            "id": "src/components/swirl-popover-trigger/swirl-popover-trigger.tsx::SwirlPopoverTriggerMethod"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger"
+            },
             "triggerOnClick": {
                 "type": "boolean",
                 "mutable": false,
@@ -304,7 +449,10 @@ export class SwirlPopoverTrigger {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Please use the \"trigger\" prop instead, e.g. trigger=\"click\"."
+                        }],
                     "text": ""
                 },
                 "getter": false,
@@ -324,7 +472,10 @@ export class SwirlPopoverTrigger {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Please use the \"trigger\" prop instead, e.g. trigger=\"hover focus\"."
+                        }],
                     "text": ""
                 },
                 "getter": false,
@@ -378,9 +529,15 @@ export class SwirlPopoverTrigger {
         return [{
                 "propName": "swirlPopover",
                 "methodName": "watchPopover"
+            }, {
+                "propName": "trigger",
+                "methodName": "watchTrigger"
+            }, {
+                "propName": "triggerOnClick",
+                "methodName": "watchTrigger"
             }, {
                 "propName": "triggerOnHover",
-                "methodName": "watchHover"
+                "methodName": "watchTrigger"
             }];
     }
 }

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

@@ -8,6 +8,19 @@ export default {
                 type: "text",
             },
         },
+        trigger: {
+            description: 'How the popover is opened. Accepts an array (["hover", "focus"]) or a space/comma-separated string ("hover focus") for plain HTML usage. Takes precedence over "triggerOnClick"/"triggerOnHover".',
+            control: {
+                type: "check",
+            },
+            options: ["click", "hover", "focus"],
+        },
+        triggerOnClick: {
+            description: '**Deprecated! Please use the "trigger" prop instead, e.g. trigger="click".**',
+        },
+        triggerOnHover: {
+            description: '**Deprecated! Please use the "trigger" prop instead, e.g. trigger="hover focus".**',
+        },
     },
     component: "swirl-popover-trigger",
     tags: ["autodocs"],

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

@@ -17,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: '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 }))))));
+        return (h(Host, { key: '2c0af5639d2ac10b2146d5d0e0277ec325d04b69', class: this.variant }, this.variant === "bar" && (h("progress", { key: '175abe47959736020729ac1a1c17951d25d9b184', "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: '905340c03044d34b85fe1619c22c12f6f1cd0aa2', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { key: '1305aac54405187b32518a85ed4ae6434a0cf896', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { key: 'ccbc4cd5829c5e532e30c475c0866e86695b0fec', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { key: '25bd3570bd8ddf03c3c02c66608f9fe5798b05ee', 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"; }

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: '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 }))))));
+        return (h(Host, { key: '9181653221cedb79869b31485fe601ef029ff8bc', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: '800685a86f6f4b1dbd20f20d2218d04a68822878', class: className, htmlFor: this.inputId }, h("span", { key: '410ffd0fdc0b061015dd554ab5a56229c979f4dd', class: "radio__control" }, h("swirl-visually-hidden", { key: 'e41aba02a81284faacd3aeee82b95ae8a28a449e' }, h("input", { key: '0f9cffc32cc44fb967098fedeea7f16388fe050a', "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: '4871dc0ced3a8a5220b95cadf004c4776901745d', "aria-hidden": "true", class: "radio__box" })), h("span", { key: '2c5c0205c7934d38092ee8bb374750dd46906a30', class: "radio__label-container" }, this.label && (h("span", { key: 'f17ef8b7670effbbc2baba7cc52eaf595b7d132c', class: "radio__label" }, this.label, this.tooltip && (h("swirl-tooltip", { key: '68877a4be5e32dc51c3c0115b30890ec65705039', content: this.tooltip, position: "top" }, h("swirl-icon-help", { key: 'b3f6a1ba1d8851b9e229818d7cad7bc28970dbd7', color: "default", size: 20, tabIndex: 0 }))))), this.description && (h("span", { key: '37802eb7bf729e22f4af1ef481499bddf37c16c8', class: "radio__description", innerHTML: this.description }))))));
     }
     static get is() { return "swirl-radio"; }
     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: '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' })))));
+        return (h(Host, { key: 'bf97022404d63466da4963c1509f28daa7f2e644', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: 'a211f1f71721b1bdedf22b4d46b9c3e9e2155445', role: "alert" }, this.assistiveText), h("swirl-box", { key: '3351ca192018097162b7f10e5e626971a29c6ccf', 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: '7051c1e80ffeefedbbc29204dfb2245b93962ccd', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, h("slot", { key: 'de736346c435e2c0536c667bd2ac061c347e0c74' })))));
     }
     static get is() { return "swirl-resource-list"; }
     static get encapsulation() { return "scoped"; }

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: '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' }))))));
+        return (h(Host, { key: 'aca10b0d23ef467808f336b5643b08c42bf262cb' }, h("span", { key: '07a4fd0d41cef8de6e45e2e55d2a213a6407d4dd', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: 'bc1f61fe4163a90bce59f85b473a50c99cc07b68', "aria-hidden": "true", class: "search__icon" }), h("input", { key: '68d54d16bff0908abe2333685e22097af32af295', "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: 'c7d91ad46c0b58dcb2ebee5b186f6210195bca30', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.handleClear, type: "button" }, h("swirl-icon-cancel", { key: 'ea95e50614e5405f96d9b7c9bdffceb43cec4fd5' }))))));
     }
     static get is() { return "swirl-search"; }
     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: '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
+        return (h(Host, { key: 'de96ada7e3b6994b6d167905c3d4f46b1bffa310' }, h("div", { key: '874ea28fdb92a81a5769f4b9ccf2f969b5d2e04a', class: className }, h("header", { key: 'a573269e5a124f99f328d42faaaa7c39c7ecdf6a', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '4e713b9b84e49ccb1a6e9b092385f4a6bee179db', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '94ad6914dcc642533f791f5e3ab20179eebeb2cb', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: '7384c7775eba3fb643eaa1be4d7e9a4c1168a909', content: this.navigationCollapsed
                 ? this.expandNavigationButtonLabel
-                : 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.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: 'c5f7d89fa6329565a98bcfc6b247c68ace917fb1', 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: '6d7e01a66432ba25e8425df610b7962752881504' }, this.navigationCollapsed
             ? this.expandNavigationButtonLabel
-            : 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
+            : this.collapseNavigationButtonLabel))), h("a", { key: '8ce53b9bd78a8001f57134176d9e98eca31ea3a8', class: "shell-layout__header-tool", onClick: this.historyBackClick.emit, href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '170cfba8ae2b54fa159fc7ea09aeaf8cdbddee97', size: 20 }), h("swirl-visually-hidden", { key: 'e5efad0cbaa63106605d30cbc6db26456281ca39' }, this.browserBackButtonLabel)), h("a", { key: '3d91fe8214997753f4c0f1105628179210a7cb71', class: "shell-layout__header-tool", onClick: this.historyForwardClick.emit, href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: 'f0b4997cd4213b7f73e6ad71c44348bb2559e62a', size: 20 }), h("swirl-visually-hidden", { key: '1f2b7ee684919715d7b06c7a71b3b8d922a6864f' }, this.browserForwardButtonLabel)), h("slot", { key: '0ef707231138f88a100217b7ed91554498c0b203', name: "left-header-tools" })), h("div", { key: '3cbf9e6388aa4987e20b464d35a59f05a9eafe1c', class: "shell-layout__logo" }, h("slot", { key: '4f44aeed00ca8ef679dbb0ed27e36a92d31abf07', name: "logo" })), h("div", { key: 'ba28fb7cd9bb75fac3191789014f6862a9021994', class: "shell-layout__header-right" }, h("slot", { key: '305cfb750e5adb56bf00de5bd596cbfc786a20db', name: "right-header-tools" }), h("slot", { key: '068e0c2ad1fa657613dd6c90ab9fa673efada09b', name: "avatar" }))), h("div", { key: '5c48fcca90e830f779cb4e90fab9b4010d7a266a', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: 'a77e9e5d3f7db1eb5a4c0af961788c342cc6f1f9', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '10b7221f2e08f3b6a799e20a8b832683e83ef280', class: "shell-layout__mobile-header" }, h("slot", { key: 'd093e9bc5dd3d791acde2390d5b3f14ad2963a17', name: "mobile-logo" }), h("div", { key: '9c27cdef0bdc2db253b1e9b799d75f908c2651ad', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '6c03625a7a9878c65992176a423827e54adbefb6', name: "mobile-header-tools" }), h("button", { key: 'ee7c1f2c70cef9305767d04366423d780816afc2', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'd847affc1dea24aa560ba45034e8bb84b1fb4251', size: 20 }), h("swirl-visually-hidden", { key: 'd2e7b047629f502f9f826d133741ea5f4a06541d' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '0f59ceabdf47f8e45c9e11836e57ea755db0384d', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: 'f2bce9497e8831734f50c484cd8b517d0f2f6e4c' }, h("span", { key: 'c45e263458def8240de6b3714a4b8b618575bad9', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'b67777ad705796834db3e87bdb081b54a737728a', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'cbb39859ec3f398cf08f6d2f61774c519a3d60bc', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '1eaa5e8a7beb123b59eb0f5b1d08e064e182a998', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'c03e9804dc32460c679867e0b5aa58c14569f909', paddingBlockEnd: "16" }, h("swirl-stack", { key: 'ed6489c725487e7e509b3472661f4216f7bf0337', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '069fb3eb456811d0a9186e48dd0f8fe5d403ba03', 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: 'f9ad0d814533f107623824148a406aeff464b657', icon: this.secondaryNavView === "grid"
+                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: 'c88ba436af1f6d7ed13ed6dd612be4467abb856f', 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: 'a1be2fc91d2948012afb5625d18a089de7fe08c9', class: {
+                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '4b2a5eab2e5d4b117df8bbf29dbd7914f1144650', 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: '178548bfa49aa871320a4bca72b94517a2be1d9c', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '9e3f904b12577733e14bd0ce3c3615bdfdc3d594', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '0a7f7fac29ecdf5adfdf3e4ae9efef7776e5a899' })))));
+            } }, h("slot", { key: '4bfdaf40935715cbc550d5fe3aa5973bfcf94748', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: 'c5376e170b46d1103a75105307b87c2ef139d79e', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '240da7bdb7f9049b425e029747aaeb23d4d65be2' })))));
     }
     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: '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", {
+        return (h(Host, { key: 'd9c4a7242e1472d6aa7477115b4983a680aa4bf2' }, h("swirl-tooltip", { key: '2222ce6d23df6a1905872fa534497ab55572f3a3', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right" }, h(Tag, { key: '7e539662e1a2e27be951884dca2e9574fd80b3ef', "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: 'f1efb63470074f527d72c7b1144d9e1ac36425c5', class: "shell-navigation-item__icon" }, h("slot", { key: 'ea33332465dc43474eaf9d6623c1483dfebc38f9', 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: 'b71675ebf36f8e094b9bd97c07a55f2d1843004c', class: "shell-navigation-item__badge-wrapper" }, h("swirl-badge", { key: '84e1d24455b9ff7547ccaefc8cac3033c8f1e1b9', "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: '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" }))))));
+            }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: 'cdd2308f10814d209fb93577bae0c85079bf1c2f', class: "shell-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "s", variant: "strong" })), showIsNewBadge && (h("swirl-badge", { key: 'd76d31c8ae0d28b5200d057f4962b02c0bf60a5d', 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: '0766d24e9c6dd8b47f0cde12acc961798539a663', style: {
+        return (h(Host, { key: '1c3b9bc5b79cb80b3cd0d459a618b3c6d5ce7d46', style: {
                 width: !Boolean(this.width) && !Boolean(this.aspectRatio)
                     ? "100%"
                     : undefined,
-            } }, h("div", { key: '78ef731b5c403dfe74d3034ac8bcef63e0bac16c', class: className, style: {
+            } }, h("div", { key: 'f6d0bfa0401250dca3862d834679db08999ddae2', 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: '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 }))))));
+        return (h(Host, { key: 'eac70b3c31ab60779a03634adca0d33bce9974f3' }, h("div", { key: 'ae98cb03436ad34518f24438fcf1b94df353f960', 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: '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))))));
+        return (h(Host, { key: '889d976962f3014dfef59593922bbc444b2e4371' }, h("span", { key: '37d8dec29873cc7378e04b87cef7e760e502704e', class: className, role: Boolean(this.label) ? "status" : undefined }, h("svg", { key: 'e71abd1b1afdf363a6d69f7f583c019f72f26cf2', "aria-hidden": "true", class: "spinner__indicator", focusable: "false", viewBox: "0 0 50 50" }, h("circle", { key: 'd94548f0d74dbf56174f420be1ba2c065d2cf895', class: "spinner__background", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" }), h("circle", { key: 'dc385f16179e495257da7c9a2c880256e3895272', class: "spinner__circle", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" })), this.label && (h("swirl-visually-hidden", { key: '898db6bc040d90d85f86d2bd432dd75a414b0fbe' }, h("span", { key: 'eb38733b804aa21e7a719ce7581c80a792b34363', class: "spinner__label" }, this.label))))));
     }
     static get is() { return "swirl-spinner"; }
     static get encapsulation() { return "shadow"; }