@getflip/swirl-components 0.528.0 → 0.529.0

package/dist/esm/swirl-popover_2.entry.js

@@ -3,7 +3,7 @@ import { c as computePosition, a as autoUpdate, s as shift, o as offset, f as fl
 import { d as disableBodyScroll, e as enableBodyScroll } from './body-scroll-lock-BkJDOYVb.js';
 import { c as classnames } from './index-orsBiyT_.js';
 import { t as tabbable } from './index.esm-DBTxpXCn.js';
-import { o as getPixelsFromRemToken, k as getActiveElement, i as isMobileViewport, q as querySelectorAllDeep } from './utils-CCck-DTo.js';
+import { o as getPixelsFromRemToken, k as getActiveElement, i as isMobileViewport, q as querySelectorAllDeep, j as isDescendantOf } from './utils-CCck-DTo.js';
 
 const swirlPopoverCss = () => `:host{position:relative;z-index:var(--s-z-40);display:contents}:host *{box-sizing:border-box}.popover{border:none;padding:0;margin:0}.popover::backdrop{display:none}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-xy}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--inactive .popover__content{display:none}.popover--placement-bottom .popover__content,.popover--placement-bottom-start .popover__content,.popover--placement-right .popover__content,.popover--placement-right-start .popover__content{transform-origin:top left}.popover--placement-bottom-end .popover__content,.popover--placement-left .popover__content,.popover--placement-left-start .popover__content{transform-origin:top right}.popover--placement-top .popover__content,.popover--placement-top-start .popover__content,.popover--placement-right-end .popover__content{transform-origin:bottom left}.popover--placement-top-end .popover__content,.popover--placement-left-end .popover__content{transform-origin:bottom right}.popover--transparent .popover__content{background-color:transparent;box-shadow:none}.popover--transparent .popover__scroll-container{padding:0}.popover__backdrop{position:fixed;z-index:0;display:none;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}.popover__content{position:fixed;z-index:2;overflow:hidden;border-radius:var(     --swirl-popover-border-radius,     var(--s-border-radius-base)   );max-width:22.5rem;background-color:var(--s-surface-overlay-default);box-shadow:var(--s-shadow-level-2)}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:22rem;overscroll-behavior:contain}.popover--padded .popover__scroll-container{padding:var(--s-space-4)}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;display:none;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (max-width: 767px){.popover--mobile-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (prefers-reduced-motion){.popover--mobile-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--mobile-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (prefers-reduced-motion){.popover--mobile-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--mobile-bottom-sheet .popover__backdrop{display:block}.popover--mobile-bottom-sheet .popover__content{right:0;bottom:0;left:0;border-radius:var(--s-border-radius-xl) var(--s-border-radius-xl) 0 0;max-width:none;background-color:var(--s-surface-overlay-default);box-shadow:none}.popover--mobile-bottom-sheet .popover__scroll-container{max-height:90vh;padding:var(--s-space-24) 0}.popover--mobile-bottom-sheet .popover__handle{display:block}}.popover--translucent .popover__content{background-color:transparent;outline:var(--s-border-width-default) solid       var(--s-border-translucent-outline)}.popover--translucent .popover__content:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));border-radius:inherit}.popover--translucent .popover__handle{background-color:var(--s-border-on-translucent)}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{padding-top:env(safe-area-inset-top);top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}`;
 
@@ -176,7 +176,10 @@ const SwirlPopover = class {
             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();
         }
     }
@@ -262,7 +265,7 @@ const SwirlPopover = class {
         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));
         }
@@ -327,18 +330,18 @@ const SwirlPopover = class {
             "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 })))));
     }
     get el() { return getElement(this); }
 };
@@ -346,15 +349,23 @@ SwirlPopover.style = swirlPopoverCss();
 
 const swirlPopoverTriggerCss = () => `.sc-swirl-popover-trigger-h{display:contents}`;
 
+const swirlPopoverTriggerMethods = [
+    "click",
+    "hover",
+    "focus",
+];
 const SwirlPopoverTrigger = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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();
         };
@@ -364,49 +375,70 @@ const SwirlPopoverTrigger = class {
             }
         };
         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) {
@@ -418,7 +450,7 @@ const SwirlPopoverTrigger = class {
             }
             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"));
                 }
@@ -429,7 +461,7 @@ const SwirlPopoverTrigger = class {
                 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"));
                 }
@@ -447,6 +479,10 @@ const SwirlPopoverTrigger = class {
             this.setupIntersectionObserver();
         }
     }
+    componentWillLoad() {
+        this.warnAboutDeprecatedProps();
+        this.resolveTriggerMethods();
+    }
     componentDidLoad() {
         this.updateTriggerElAriaAttributes();
         this.setupHoverListeners();
@@ -456,17 +492,57 @@ const SwirlPopoverTrigger = class {
     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}`)
@@ -515,8 +591,10 @@ const SwirlPopoverTrigger = class {
     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);
@@ -524,21 +602,71 @@ const SwirlPopoverTrigger = class {
     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' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
         "swirlPopover": [{
                 "watchPopover": 0
             }],
+        "trigger": [{
+                "watchTrigger": 0
+            }],
+        "triggerOnClick": [{
+                "watchTrigger": 0
+            }],
         "triggerOnHover": [{
-                "watchHover": 0
+                "watchTrigger": 0
             }]
     }; }
 };

package/dist/esm/swirl-radio.entry.js

@@ -35,7 +35,7 @@ const SwirlRadio = class {
             "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 }))))));
     }
 };
 SwirlRadio.style = swirlRadioCss();

package/dist/esm/swirl-resource-list.entry.js

@@ -281,7 +281,7 @@ const SwirlResourceList = class {
         });
     }
     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' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/swirl-search.entry.js

@@ -68,7 +68,7 @@ const SwirlSearch = class {
         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' }))))));
     }
 };
 SwirlSearch.style = swirlSearchCss();

package/dist/esm/swirl-shell-layout.entry.js

@@ -1673,24 +1673,24 @@ const SwirlShellLayout = class {
             "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' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/swirl-shell-navigation-item.entry.js

@@ -63,9 +63,9 @@ const SwirlShellNavigationItem = class {
         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" }))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/swirl-skeleton-box.entry.js

@@ -11,11 +11,11 @@ const SwirlSkeletonBox = class {
     }
     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/esm/swirl-skeleton-text.entry.js

@@ -13,7 +13,7 @@ const SwirlSkeletonText = class {
     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 }))))));
     }
 };
 SwirlSkeletonText.style = swirlSkeletonTextCss();

package/dist/esm/swirl-status-indicator.entry.js

@@ -9,7 +9,7 @@ const SwirlStatusIndicator = class {
     }
     render() {
         const className = classnames("status-indicator", `status-indicator--intent-${this.intent}`);
-        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))));
+        return (h(Host, { key: 'b91fc2e61ef70be3150621494b5c772c03fc6de4' }, h("div", { key: 'db08d7d929df787d64e4be1172890c5a707e77c4', class: className }, h("span", { key: '839e99fb4d199ba50a635cd43ecda76a387a69a9', class: "status-indicator__dot" }), h("span", { key: 'c5ae565c984e4f1e0e88f2260ee77bb04710c283', class: "status-indicator__label" }, this.label))));
     }
 };
 SwirlStatusIndicator.style = swirlStatusIndicatorCss();

package/dist/esm/swirl-switch.entry.js

@@ -31,9 +31,9 @@ const SwirlSwitch = class {
             "switch--disabled": this.disabled,
             "switch--hide-content": this.hideLabel && (!this.description || this.hideDescription),
         });
-        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
+        return (h(Host, { key: '066b3fcb454c9f017b9c62e8ac5b0a77a312d670' }, h("label", { key: 'e893e25b2c694a057829de491a23cbb1a6493f1d', class: className, htmlFor: this.inputId }, h("span", { key: 'e1125ddca72ae0ab1b5130725f2387b10919d7af', class: "switch__control" }, h("swirl-visually-hidden", { key: 'cba26183467438e40955ec6b36f245e556075f86' }, h("input", { key: '0cbafdd0c1fc6a97eb14444d3621d3603ccac2bb', "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: '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))))));
+                : 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: '056fd9338fd9650d123585e34b4f0f1d29477c87', "aria-hidden": "true", class: "switch__thumb" })), h("swirl-stack", { key: '8c3287b7d047e10163d74e999912623404436c3e', class: "switch__content" }, this.label && !this.hideLabel && (h("span", { key: 'b5c2059a1bfd2b625b0313e2955608761e28c6aa', class: "switch__label" }, this.label)), this.hideLabel && (h("swirl-visually-hidden", { key: '92e29791307fcf313d1a4089e6ec1a676b1ed38a' }, this.swirlAriaLabel || this.label)), this.description && !this.hideDescription && (h("span", { key: 'f1b74a39ed51983aed20e39bca93b30b655d7ccf', class: "switch__description" }, this.description)), this.description && this.hideDescription && (h("swirl-visually-hidden", { key: '2aae8093774413099e8a0435b464e3133e3b841c' }, this.description))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/swirl-tab-bar.entry.js

@@ -62,7 +62,7 @@ const SwirlTabBar = class {
                 ? `var(--s-space-${this.paddingBlockStart})`
                 : undefined,
         };
-        return (h(Host, { key: '5bb40343763ee6ad52e369a3150322987a2c52d6' }, h("div", { key: 'b8b3829ab28e34dbb212eb724a35656cda80cd89', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
+        return (h(Host, { key: '32c72009b361c8a8073eca893363e3604586a278' }, h("div", { key: 'd351e22d18126c350c962168743c8bbce8ffe73f', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
             const className = classnames("tab-bar__tab", {
                 "tab-bar__tab--active": tab.active,
                 "tab-bar__tab--variant-pill": this.variant === "pill",

package/dist/esm/swirl-tab.entry.js

@@ -10,7 +10,7 @@ const SwirlTab = class {
     }
     render() {
         const className = classnames("tab", { "tab--active": this.active });
-        return (h(Host, { key: 'fde4f20eb0090df7b2ecf6c9b4c2f396773b8ca5', "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1, class: className, style: { padding: `var(--s-space-${this.padding})` } }, h("slot", { key: '8a81fccbb75f28831f0ad460e0ce9da732463e95' })));
+        return (h(Host, { key: 'fa4be95c04f4e1576d9723598bc3c6082c6180b5', "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1, class: className, style: { padding: `var(--s-space-${this.padding})` } }, h("slot", { key: '0a12aff1172585ac7ee31801d13ee1e47009a7e4' })));
     }
 };
 SwirlTab.style = swirlTabCss();

package/dist/esm/swirl-table-column.entry.js

@@ -26,7 +26,7 @@ const SwirlTableColumn = class {
             "table-column--sunken": variant === "sunken",
             "table-column--raised": variant === "raised",
         });
-        return (h(Host, { key: '56a69546db8dbd5233fff55c16a7f56c27c6322d', "aria-sort": this.sort, class: className, role: "columnheader", style: styles }, h("span", { key: '53af8c45f85e1ab805f95c77022483850ca4dfeb' }, h("slot", { key: '8817e0f568482f3b5c8ce027149a082c25097a70' })), this.sortable && (h("span", { key: '100e907905c4df26c1eec5300d8cbbe6ddf5e888', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: '3c0b6ef134b06d4add186e5c761759aa64c9ea8d', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: '441cacfb5b3c1e9f58f2820f3aa2d17332a9c6e2', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
+        return (h(Host, { key: '2b7440d3ae12872c302ae06a4f36ead38bef8b0f', "aria-sort": this.sort, class: className, role: "columnheader", style: styles }, h("span", { key: '4d824001b9ac246a40bba86c7159011af93516e6' }, h("slot", { key: '48446b51eb87e04a960ac86d14aa834c3d7c3e1c' })), this.sortable && (h("span", { key: '8cc98224f729be792b446b8e4b9343d8caa1a0b9', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: '2707182822a2e1fadac9cf66792160c10e114570', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: 'b3fb438c01016dd2bad18ad564d00db89806db2d', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/swirl-table.entry.js

@@ -578,7 +578,7 @@ const SwirlTable = class {
             "table--show-empty-state": this.empty && !this.loading,
             "table--keyboard-move": this.movingViaKeyboard,
         });
-        return (h(Host, { key: '58cb39e970718c947af8fb05e49327f69ce52406' }, h("div", { key: 'ccc4d4c35f16a0250bca6473848ec928a20d69f1', class: className }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '984ee69c68a1f7ede7c68d11e08ab87677c75d8c' }, h("span", { key: '7a27389724c8c0d877c79af23589b637e44d5669', "aria-live": "assertive" }, this.liveRegionText))), h("div", { key: 'd17f542eac55c6da592fc2ab12d838e30ef318e6', class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (el) => (this.container = el), tabIndex: -1 }, h("div", { key: 'dd983c262ce853828b3040c9f97c510c769662e3', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: '031594755193d7ca2e0f8624afd79ec38ac0dec7' }, h("div", { key: '7b76523681ef767eb7a5805cc45da2259d6b9ce5', id: "caption" }, this.caption))), h("div", { key: 'ac6f9ffa3703cbadb12b7384e8f897c5af9d0bc1', role: "rowgroup" }, h("div", { key: '5263be7e317340491ee5890a1a2e5d25fcba06d5', class: "table__header", ref: (el) => (this.headerEl = el), role: "row" }, h("slot", { key: '3171ffdd4027b3f32d2d2b110f55209c8bdc5e7e', name: "columns" }))), h("div", { key: '32c054e3e9f63439efb8f9cf9633f5b628a789e0', class: "table__body", ref: (el) => (this.bodyEl = el) }, h("slot", { key: '2f5b748c60f91dbe4df98d0f18b367f8292100d0', name: "rows" }), h("div", { key: 'b51e7e34b4d4e1c4044f9480a0a115393064d221', class: "table__empty-row", role: "row" }, h("div", { key: '1cb8061bef8a30965ea023b31dd0fcfac0276f26', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("slot", { key: 'e512da95e312bb19dca9b36e0092a0001810eda7', name: "empty" }), !hasEmptyStateSlotAssignment && (h("swirl-text", { key: 'ab17ca80ff8a609d5eaa4addee7d3358791bc11d', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
+        return (h(Host, { key: '16d0611e24b24ee9f79cc38e0095a67672d74c2e' }, h("div", { key: 'aec12bf6d94bef63f68acfaf028658254d01f181', class: className }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '0af23c204985e8578aee552beff188f5e599275f' }, h("span", { key: '0f4bcc195d7bd265c028b70604ba74b1531e3c25', "aria-live": "assertive" }, this.liveRegionText))), h("div", { key: '77e6c52ecbf5e81d268b9c49364cbe166e8ba45e', class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (el) => (this.container = el), tabIndex: -1 }, h("div", { key: '21156e4f5d0a98c1c11cdab2c8d812833d1af031', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: 'deea452f4a44ffaf0f8472e0ba07446f555de0c2' }, h("div", { key: 'e0f7da4bf4009659451e3890827861a64045d740', id: "caption" }, this.caption))), h("div", { key: 'ce3b91d7709fb0b607cf3b4fa48f5d118d04ac4f', role: "rowgroup" }, h("div", { key: '15c9d000b9d69eedc6ca1285a9dcfa20ca2bec02', class: "table__header", ref: (el) => (this.headerEl = el), role: "row" }, h("slot", { key: '31f61474ba47292819e5fbaf655817ed28a03434', name: "columns" }))), h("div", { key: '2d5e8fab1af067c1eb59ad84db517113cc6935e3', class: "table__body", ref: (el) => (this.bodyEl = el) }, h("slot", { key: '47f0b034e0412de19194c87bf2dd1eea524af173', name: "rows" }), h("div", { key: '4b97574c5c5919c35fd5a9ce48a4b4dbb24d9518', class: "table__empty-row", role: "row" }, h("div", { key: 'e8d44d595d30450512ad57defb3c61fd77f2040a', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("slot", { key: '6551e8e625520b44e608a41e67d58e65a06c20d2', name: "empty" }), !hasEmptyStateSlotAssignment && (h("swirl-text", { key: '7689d667f7574ddd4dfa3ad54d05906e1822c035', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/swirl-tag.entry.js

@@ -46,7 +46,7 @@ const SwirlTag = class {
             "tag--hide-label": this.hideLabel,
             "tag--interactive": this.interactive,
         });
-        return (h(Host, { key: '9637cdd4b1ad7b0dccb5c04a0ddefd8ee2325f7a' }, h(Tag, { key: '99dc3fb14fd345e4275bb8442be97fd254080c30', class: className, onClick: this.interactive ? this.onClick : undefined, part: "tag", tabIndex: this.interactive && this.el.ariaHidden === "true" ? -1 : undefined, type: this.interactive ? "button" : undefined }, this.icon && (h("span", { key: 'ee15018f6a8aa37397f235e7e10c32a567cc63d7', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !this.hideLabel ? (h("span", { class: "tag__label" }, this.label)) : (h("swirl-visually-hidden", null, this.label)), this.removable && (h("button", { key: '63fe4e28921608f31474a7a2698193b83cd065e9', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '51d9a82d4a1632c4b990e14ff170d14eeb3c2b45', size: 16 }))))));
+        return (h(Host, { key: '4ab5d9f7112162a8f3f2c6dbc3237dc3830ddb1b' }, h(Tag, { key: 'd690e8a0eb95291c61e04587230a235ad0c725f2', class: className, onClick: this.interactive ? this.onClick : undefined, part: "tag", tabIndex: this.interactive && this.el.ariaHidden === "true" ? -1 : undefined, type: this.interactive ? "button" : undefined }, this.icon && (h("span", { key: '19968e5bbef6e80830378a2c7f993cd89e332163', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !this.hideLabel ? (h("span", { class: "tag__label" }, this.label)) : (h("swirl-visually-hidden", null, this.label)), this.removable && (h("button", { key: 'f72194eaf3563457c2b51979186e55a710f0d7f5', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: 'fc7194c146a8a94af6e501158ccfb49bb35c295a', size: 16 }))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/swirl-text.entry.js

@@ -986,7 +986,7 @@ const SwirlText = class {
         const styles = {
             whiteSpace: truncate ? "nowrap" : this.whiteSpace,
         };
-        return (h(Host, { key: '8c79f4a91d37994ec7688132382e020621f584ca' }, h(Tag, { key: '7bac3b2004139bdc062db6e516bddf988aa176d4', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: 'cec08d6960f5e0acbceff329d3dba01b08f3eeff' }))));
+        return (h(Host, { key: '7876251f346121249f38d006c3d8a4ad7fa37327' }, h(Tag, { key: '62331a315bd3203bc9bd4f79709dd0f373fc44df', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '15e6057c97796a810d718c0b7d88c95af6453c3e' }))));
     }
     get el() { return getElement(this); }
 };