@getflip/swirl-components 0.527.0 → 0.529.0

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: '99683794490d41e1acc29622fbe8b08daeb27357', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '89600056e488b91974157ea00003c4860c99d821' })));
+        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-radio-group/swirl-radio-group.js

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

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

@@ -279,7 +279,7 @@ export class SwirlResourceList {
         });
     }
     render() {
-        return (h(Host, { key: '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-resource-list-file-item/swirl-resource-list-file-item.js

@@ -32,7 +32,7 @@ export class SwirlResourceListFileItem {
         const className = classnames("resource-list-file-item", {
             "resource-list-file-item--has-control": showSpinner || showRemoveButton,
         });
-        return (h(Host, { key: '61a81a686e2c133e412becb3c19f8a85c6d31d81', role: hostRole }, h("div", { key: '71cdea112ffd94e461e613b096d410063fa3720f', class: className, part: "resource-list-file-item", role: containerRole }, h("span", { key: 'bf19bab0ba16ddec08798010a0b3b9a403820724', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: '3b8031b1eeeb46378fcd63f062405f62ef052707', class: "resource-list-file-item__label-container" }, h("span", { key: 'c498a8a51bcd32d9cdc36dba51818749a7370db8', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: '3d84373496321a4a58b736909444473237a60f07', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '3e7b777da0d6de33f8db1e6cc124e5926ddba34d', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '63afc6e7d7c3f4324b0cc253058d81f8169b87ce', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: '0109b1267a10b09656eb4e71a66f1c765af7deca', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: 'ffa702fa0b4021d48a0cc3c80ffe9d384f74e78f', size: "s" }))), showRemoveButton && (h("span", { key: 'afa4ec002d9132f03eb8565863711b539bee6f22', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: 'cd3bd1c6ffeac14fa1085be9385ea3e387e6762d', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+        return (h(Host, { key: '57d8d886d1e3b8c58cc33c6109067ceca943575a', role: hostRole }, h("div", { key: 'b0506fae441acf58537c6f87b5f2b3685edbd3d6', class: className, part: "resource-list-file-item", role: containerRole }, h("span", { key: 'e087a525ec625e1e8a78e14a6e7ea1f11ac6ca63', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: 'ee3eea4d4298c57213823f57a7fbbec179513c69', class: "resource-list-file-item__label-container" }, h("span", { key: 'b97dec876b3960365b3c58938b3d77cefa8b1363', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: '274707a162d1c9ee6c5e4522af2b01bdd4770534', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: 'f09998e243ff0816de52bdc0c3d8239e453dd9c7', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: 'aaeb77c249ea0b3bc5f29c0327384caa83634c5e', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: '436b9144713b82d8764381490f6aa4cbdd54fbaa', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: '7d33a9c541b70bed0b15d90b548db1e3dff18e87', size: "s" }))), showRemoveButton && (h("span", { key: 'f530945cb30404165a853f49504162145a0f8b2b', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '6e4b097b951c92f8a3af15748f11342ba7e250da', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
     }
     static get is() { return "swirl-resource-list-file-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -162,7 +162,7 @@ export class SwirlResourceListItem {
         const labelContainerStyles = {
             minHeight: this.labelMinHeight ?? undefined,
         };
-        const renderLabel = () => (h("span", { key: '94eb6e173dd0e8c07ca049334c550a731ad303e3', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined, style: {
+        const renderLabel = () => (h("span", { key: 'fea7211cf22cb6523f2973cdd0ad40e422c8b5d5', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined, style: {
                 "-webkit-line-clamp": !!this.labelWrapMaxLines
                     ? String(this.labelWrapMaxLines)
                     : undefined,
@@ -185,8 +185,8 @@ export class SwirlResourceListItem {
             "resource-list-item--wrap-label": this.labelWrap,
             "resource-list-item--wrap-label-max-lines": this.labelWrapMaxLines,
         });
-        return (h(Host, { key: '3d452b98f187256196a0d9e3aa21009ff2d0dee7', role: hostRole }, h("div", { key: '0a47471f5222795a380a595c50336cb22c1f31cb', class: className, role: containerRole, onClick: this.onClick }, h(Tag, { key: 'e5fcd45ba424f48c9b866b61b17894d4e235125d', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, rel: isLink ? this.rel : undefined, target: isLink ? this.target : undefined, disabled: disabled, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: '1d914b4b0cdc48d2a7868cb099095ecc46db8579', class: "resource-list-item__media" }, h("slot", { key: 'dba321608b134a5072d16f6f97f69563144f1fc3', name: "media" }))), h("span", { key: 'ccb528000b7298589271a66703066e5278c172ef', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition }, renderLabel())) : (renderLabel()), this.description && (h("span", { key: 'ac725a25fc879533f89f0656fb2f910af5cd5a50', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable &&
-            (hasInteractiveCheckbox ? (h("button", { "aria-checked": String(this.checked), "aria-label": `${this.checkboxLabel} "${this.label}"`, class: "resource-list-item__checkbox", disabled: disabled, onClick: this.onCheckboxClick, ref: (el) => (this.checkboxEl = el), role: "checkbox", type: "button" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))) : (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null)))))), showMeta && (h("span", { key: '01e471d2bddbb73eab1f662e6d77f6c24346db24', class: "resource-list-item__meta" }, this.meta && (h("span", { key: '605ecded4280fc4fcc8c8c34465c92ada7f7994a', class: "resource-list-item__meta-text" }, this.meta)), h("span", { key: '62a7a5eb61daefd535d185751b47900327bf6e3b', class: "resource-list-item__badges" }, h("slot", { key: '75b2eeb4bc67720538c5e210956bbe92503d31d5', name: "badges" })))), h("span", { key: 'f614f7fb62d1b0cbc3f8caa0d843cfb41d516b5e', class: "resource-list-item__control", onClick: this.onControlClick }, h("slot", { key: 'dcec9e53e1f37a17412b8559599681db06ed8dbf', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '708eef8ebfe0d44f0204cad744f9ecf52b7bfaff', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: 'b24284ec68b5d21833877c50b8f48cf9d5a28279', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: 'dbceebaa858fc28aef63c2117d14047784db4c85', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: 'a9d5a80c2e028e47f2563b4beb8867a205f3e1f6', size: this.iconSize })))));
+        return (h(Host, { key: 'ce9b59a8ca38a15d10673ca82218ff75366568d6', role: hostRole }, h("div", { key: '9022a969766c2ac4713a5905c48b86fec35b4ecd', class: className, role: containerRole, onClick: this.onClick }, h(Tag, { key: '44c333e8f173cc07f2419d728510ce737d669dde', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, rel: isLink ? this.rel : undefined, target: isLink ? this.target : undefined, disabled: disabled, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: 'f8d27a75fdf104f349079b6958fec68657c7f9b2', class: "resource-list-item__media" }, h("slot", { key: '3e15606fa983a44f5b8af619b1c9d37401a160c7', name: "media" }))), h("span", { key: '6588f49298b4db91cffb0f16f00923a7dd9c5f8c', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition }, renderLabel())) : (renderLabel()), this.description && (h("span", { key: 'c412b89410706c3bd139999fe4496ecb7152bd8f', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable &&
+            (hasInteractiveCheckbox ? (h("button", { "aria-checked": String(this.checked), "aria-label": `${this.checkboxLabel} "${this.label}"`, class: "resource-list-item__checkbox", disabled: disabled, onClick: this.onCheckboxClick, ref: (el) => (this.checkboxEl = el), role: "checkbox", type: "button" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))) : (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null)))))), showMeta && (h("span", { key: 'bb6240107ad71fc0107b5533ec1964fbc40d6c61', class: "resource-list-item__meta" }, this.meta && (h("span", { key: '9eddc75aa1301fae3190f3e96c9fa4e3fe56bf59', class: "resource-list-item__meta-text" }, this.meta)), h("span", { key: 'fee6e458b26e312c70038b3ecac7475a1bd42a28', class: "resource-list-item__badges" }, h("slot", { key: 'f579b01951729f47b7ee3fc40d3541d5bdec9005', name: "badges" })))), h("span", { key: '2a9ac0d61e3c6880f01d1b9c11ba3310e8d5b89e', class: "resource-list-item__control", onClick: this.onControlClick }, h("slot", { key: 'f969ff21ff4dd43ed4aabbd8ab199c731eadbd67', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: 'ad9b97495ae044148d11b4b70ce7c3af1b44c8cb', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '84ddc33a749b9e3765ce7c6c818234acdeedaeba', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: '4f2ace004c8b5049576fd9c07af7aa1cf942f4a2', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: 'cb9b0043129ea4b3093279639ac47189008e3f4d', size: this.iconSize })))));
     }
     static get is() { return "swirl-resource-list-item"; }
     static get encapsulation() { return "scoped"; }

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

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

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

@@ -58,7 +58,7 @@ export class SwirlSearch {
         const className = classnames("search", `search--variant-${this.variant}`, {
             "search--disabled": this.disabled,
         });
-        return (h(Host, { key: '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-select/swirl-select.js

@@ -225,11 +225,11 @@ export class SwirlSelect {
             "select--search-loading": this.searchLoading,
             "select--standalone": this.standalone,
         });
-        return (h(Host, { key: '9dbf9cfb6ffe83121b2c4d2dc4e1baf64f4a2873', onKeyDown: this.onKeyDown }, h("div", { key: 'e2404019c938f2db166480a528f65de6fac3d937', class: className }, h("swirl-popover-trigger", { key: '161f52041c92ac48a04b632340035a70bb8b336a', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: 'c5d927547a609c565fb217995e3174f78ee1dffa', class: "select__value-container" }, this.standalone && (h("span", { key: '0b632462094a30095112f77bd154952b1fee964b', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: '389d66eed98f9c1b4ae8d817adcbf8ef8314b688', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: 'da4df41ca9f50ad5af33cc2e40e8284431ef4811', class: "select__multi-select-values" }, this.value
+        return (h(Host, { key: '9f4b0c21acc78dc2ae90715cedc93a74aca5bad1', onKeyDown: this.onKeyDown }, h("div", { key: '7e77ecf8d48911f8871ce677cdbcc108e5070ad0', class: className }, h("swirl-popover-trigger", { key: 'ccf5c7e77fa7866eef31111b5aa656186ebd5c67', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: '3b6b6afabfc904fd6ba8466b72ac103e8afd1579', class: "select__value-container" }, this.standalone && (h("span", { key: '1533999ddb4eae408dcde12802383a6e1f948c81', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: '898baba7c9381e4be2bfbf9036f2e9c6569848d3', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: 'c35fa2ed02641c6740ab17841a3f3d776a7cec13', class: "select__multi-select-values" }, this.value
             ?.map((value) => this.options.find((option) => option.value === value))
             ?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
             // eslint-disable-next-line react/jsx-no-bind
-            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: 'cc98de26ca16cdc93b92c1228e30e8218d8eb579', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '9a178afb309ad1293e4c359890c26fdfcd84f6a3', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: 'b22fd69f4454fffc9f02306de13a30f54075ade5', class: "select__search" }, h("swirl-icon-search", { key: '0f78872ac2d72c2ac72687447003386c56d1c0ca', class: "select__search-icon", size: 20 }), h("input", { key: '71918c760e999fd7de2d6b45a675128ca4d5ec58', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: 'b3a39714d98982d0dad54b8f806ab7b00133abff', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: '6ef5e6df3e406798397f26bfe6856ebd1a097135', class: "select__option-list", allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '7363cb40bf07d37dc0bb1130cdf70393ed1dd987', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: 'c167dca6ff5c79fd3530991ab4627c928c066d51', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: 'adb41f9740d387f20b81e8313305ac4de23e6917', onSlotchange: this.onSlotChange }))))));
+            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: '46fda1c3359e50e2752d43597c22a051ef6fc415', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '3eb488e752530334f65b15cef84d28bd5d792b08', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: '8517261e9a2a502a22d97e44b6a18a67b412786d', class: "select__search" }, h("swirl-icon-search", { key: '39f1153e13f39ebc66c2d92ea9ef30a12c825e87', class: "select__search-icon", size: 20 }), h("input", { key: '2b042aa00a684718c8c83421617b07c7145213d5', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '4e900aa861af0db6eecb802086992d3d873ae310', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: '36fa23c008271fc286f11acb5d308332a6009dee', class: "select__option-list", allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '980d823adf52dce1e5be52b8f1122e1f8a2c33fe', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '42cd770870bae6e2b914276a0e57c97c772c296a', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: 'aa1017f695f0f1fa0e35b87976702eb3bc6588c3', onSlotchange: this.onSlotChange }))))));
     }
     static get is() { return "swirl-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -175,24 +175,24 @@ export class SwirlShellLayout {
             "shell-layout--mobile-navigation-active": this.mobileNavigationActive,
             "shell-layout--navigation-collapsed": mainNavCollapsed,
         });
-        return (h(Host, { key: '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"; }