@getflip/swirl-components-react 0.284.0 → 0.286.0

package/dist/{swirl-icon-web-asset.entry.80bb6307.js → swirl-icon-web-asset.entry.c84ea18a.js}

@@ -1,19 +1,19 @@
-import { r as o, h as e, F as i } from "./index.8c53dbed.js";
-import { c as d } from "./index-267776a4.6beb4f4b.js";
+import { r as o, h as s, F as i } from "./index.95b03b09.js";
+import { c as r } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
-const r = ":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}", a = r, n = class {
-  constructor(s) {
-    o(this, s), this.color = void 0, this.size = 24;
+const a = ":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}", n = a, l = class {
+  constructor(e) {
+    o(this, e), this.color = void 0, this.size = 24;
   }
   render() {
-    const s = this.size === 20 ? 24 : this.size, t = {
+    const e = this.size === 20 ? 24 : this.size, t = {
       color: Boolean(this.color) ? `var(--s-icon-${this.color})` : void 0
-    }, c = d("swirl-icon", `swirl-icon--size-${this.size}`);
-    return e("svg", { key: "d668a2ff5a7087d50efec88b6a4d0ff7b2a6e236", "aria-hidden": "true", class: c, fill: "none", height: this.size, part: "icon", style: t, viewBox: `0 0 ${s} ${s}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && e(i, { key: "fd3f0e4898ccb48deee2667c276936c5ac9566c5" }, e("path", { key: "010c4dc70e5dd9255bb42d042d2ca6ddd2ddb0eb", d: "M2.66665 13.3332C2.29998 13.3332 1.98609 13.2026 1.72498 12.9415C1.46387 12.6804 1.33331 12.3665 1.33331 11.9998V3.99984C1.33331 3.63317 1.46387 3.31928 1.72498 3.05817C1.98609 2.79706 2.29998 2.6665 2.66665 2.6665H13.3333C13.7 2.6665 14.0139 2.79706 14.275 3.05817C14.5361 3.31928 14.6666 3.63317 14.6666 3.99984V11.9998C14.6666 12.3665 14.5361 12.6804 14.275 12.9415C14.0139 13.2026 13.7 13.3332 13.3333 13.3332H2.66665ZM2.66665 11.9998H13.3333V5.33317H2.66665V11.9998Z", fill: "currentColor" })), (this.size === 20 || this.size === 24) && e(i, { key: "dd74ae6c46330da7464efdc1e464681282236273" }, e("path", { key: "4bbe727c99d8654294e2a8ac1a70234a8373194f", d: "M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V8H4V18Z", fill: "currentColor" })), this.size === 28 && e(i, { key: "94f141c6ad3f0c82f147d5aff43674f0f81a63db" }, e("path", { key: "853ed3f58ddd9cb69064c38c12df2f01cf5cfc56", d: "M4.66665 23.3332C4.02498 23.3332 3.47567 23.1047 3.01873 22.6478C2.56179 22.1908 2.33331 21.6415 2.33331 20.9998V6.99984C2.33331 6.35817 2.56179 5.80886 3.01873 5.35192C3.47567 4.89498 4.02498 4.6665 4.66665 4.6665H23.3333C23.975 4.6665 24.5243 4.89498 24.9812 5.35192C25.4382 5.80886 25.6666 6.35817 25.6666 6.99984V20.9998C25.6666 21.6415 25.4382 22.1908 24.9812 22.6478C24.5243 23.1047 23.975 23.3332 23.3333 23.3332H4.66665ZM4.66665 20.9998H23.3333V9.33317H4.66665V20.9998Z", fill: "currentColor" })));
+    }, c = r("swirl-icon", `swirl-icon--size-${this.size}`);
+    return s("svg", { key: "f0f26b998976d393b929b850c7c46b5d4a6b6fd2", "aria-hidden": "true", class: c, fill: "none", height: this.size, part: "icon", style: t, viewBox: `0 0 ${e} ${e}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && s(i, { key: "081a0fc6f77f836c208c4d88bc55972d8ea1cc8e" }, s("path", { key: "f1ec44433e39a92c400fb035476b4dbf68498286", d: "M2.66665 13.3332C2.29998 13.3332 1.98609 13.2026 1.72498 12.9415C1.46387 12.6804 1.33331 12.3665 1.33331 11.9998V3.99984C1.33331 3.63317 1.46387 3.31928 1.72498 3.05817C1.98609 2.79706 2.29998 2.6665 2.66665 2.6665H13.3333C13.7 2.6665 14.0139 2.79706 14.275 3.05817C14.5361 3.31928 14.6666 3.63317 14.6666 3.99984V11.9998C14.6666 12.3665 14.5361 12.6804 14.275 12.9415C14.0139 13.2026 13.7 13.3332 13.3333 13.3332H2.66665ZM2.66665 11.9998H13.3333V5.33317H2.66665V11.9998Z", fill: "currentColor" })), (this.size === 20 || this.size === 24) && s(i, { key: "d093278c66a2dd60309304518a245e3893dab4a2" }, s("path", { key: "d01a1d9342e58bd6389f4fc970017e74ddb708c9", d: "M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V8H4V18Z", fill: "currentColor" })), this.size === 28 && s(i, { key: "98a1c44096401604f112b3e919753c28c5d0efb5" }, s("path", { key: "78b71b7c1d1a10d7e1c2afeba914ca499207c2e9", d: "M4.66665 23.3332C4.02498 23.3332 3.47567 23.1047 3.01873 22.6478C2.56179 22.1908 2.33331 21.6415 2.33331 20.9998V6.99984C2.33331 6.35817 2.56179 5.80886 3.01873 5.35192C3.47567 4.89498 4.02498 4.6665 4.66665 4.6665H23.3333C23.975 4.6665 24.5243 4.89498 24.9812 5.35192C25.4382 5.80886 25.6666 6.35817 25.6666 6.99984V20.9998C25.6666 21.6415 25.4382 22.1908 24.9812 22.6478C24.5243 23.1047 23.975 23.3332 23.3333 23.3332H4.66665ZM4.66665 20.9998H23.3333V9.33317H4.66665V20.9998Z", fill: "currentColor" })));
   }
 };
-n.style = a;
+l.style = n;
 export {
-  n as swirl_icon_web_asset
+  l as swirl_icon_web_asset
 };

package/dist/{swirl-icon-work.entry.cfbdabe1.js → swirl-icon-work.entry.bd90b726.js}

@@ -1,19 +1,19 @@
-import { r as c, h as s, F as i } from "./index.8c53dbed.js";
-import { c as o } from "./index-267776a4.6beb4f4b.js";
+import { r as c, h as e, F as i } from "./index.95b03b09.js";
+import { c as r } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
-const r = ":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}", C = r, n = class {
-  constructor(e) {
-    c(this, e), this.color = void 0, this.size = 24;
+const C = ":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}", a = C, n = class {
+  constructor(s) {
+    c(this, s), this.color = void 0, this.size = 24;
   }
   render() {
-    const e = this.size === 20 ? 24 : this.size, t = {
+    const s = this.size === 20 ? 24 : this.size, t = {
       color: Boolean(this.color) ? `var(--s-icon-${this.color})` : void 0
-    }, a = o("swirl-icon", `swirl-icon--size-${this.size}`);
-    return s("svg", { key: "c9ded08fc379b32eb5d83010785cd1c2d11589aa", "aria-hidden": "true", class: a, fill: "none", height: this.size, part: "icon", style: t, viewBox: `0 0 ${e} ${e}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && s(i, { key: "f67cea5941a50e94aa3fc16131e852d9d24c026d" }, s("path", { key: "4c49a224f09cb62b3788047a69663a32d15e5e11", d: "M2.66668 14.0002C2.30001 14.0002 1.98612 13.8696 1.72501 13.6085C1.4639 13.3474 1.33334 13.0335 1.33334 12.6668V5.3335C1.33334 4.96683 1.4639 4.65294 1.72501 4.39183C1.98612 4.13072 2.30001 4.00016 2.66668 4.00016H5.33334V2.66683C5.33334 2.30016 5.4639 1.98627 5.72501 1.72516C5.98612 1.46405 6.30001 1.3335 6.66668 1.3335H9.33334C9.70001 1.3335 10.0139 1.46405 10.275 1.72516C10.5361 1.98627 10.6667 2.30016 10.6667 2.66683V4.00016H13.3333C13.7 4.00016 14.0139 4.13072 14.275 4.39183C14.5361 4.65294 14.6667 4.96683 14.6667 5.3335V12.6668C14.6667 13.0335 14.5361 13.3474 14.275 13.6085C14.0139 13.8696 13.7 14.0002 13.3333 14.0002H2.66668ZM2.66668 12.6668H13.3333V5.3335H2.66668V12.6668ZM6.66668 4.00016H9.33334V2.66683H6.66668V4.00016Z", fill: "currentColor" })), (this.size === 20 || this.size === 24) && s(i, { key: "f47425a1d687506554ce2f15dd3003797ada32d3" }, s("path", { key: "3c24a99b98600e2a731342537ec8214df0400a45", d: "M4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V8C2 7.45 2.19583 6.97917 2.5875 6.5875C2.97917 6.19583 3.45 6 4 6H8V4C8 3.45 8.19583 2.97917 8.5875 2.5875C8.97917 2.19583 9.45 2 10 2H14C14.55 2 15.0208 2.19583 15.4125 2.5875C15.8042 2.97917 16 3.45 16 4V6H20C20.55 6 21.0208 6.19583 21.4125 6.5875C21.8042 6.97917 22 7.45 22 8V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4ZM4 19H20V8H4V19ZM10 6H14V4H10V6Z", fill: "currentColor" })), this.size === 28 && s(i, { key: "9d9d97acad4f88b904db60cb83e9b55fe35a0f83" }, s("path", { key: "372cc52c604041435aad075aa8da64f6440f3c21", d: "M4.66668 24.5002C4.02501 24.5002 3.4757 24.2717 3.01876 23.8147C2.56182 23.3578 2.33334 22.8085 2.33334 22.1668V9.3335C2.33334 8.69183 2.56182 8.14252 3.01876 7.68558C3.4757 7.22863 4.02501 7.00016 4.66668 7.00016H9.33334V4.66683C9.33334 4.02516 9.56182 3.47586 10.0188 3.01891C10.4757 2.56197 11.025 2.3335 11.6667 2.3335H16.3333C16.975 2.3335 17.5243 2.56197 17.9813 3.01891C18.4382 3.47586 18.6667 4.02516 18.6667 4.66683V7.00016H23.3333C23.975 7.00016 24.5243 7.22863 24.9813 7.68558C25.4382 8.14252 25.6667 8.69183 25.6667 9.3335V22.1668C25.6667 22.8085 25.4382 23.3578 24.9813 23.8147C24.5243 24.2717 23.975 24.5002 23.3333 24.5002H4.66668ZM4.66668 22.1668H23.3333V9.3335H4.66668V22.1668ZM11.6667 7.00016H16.3333V4.66683H11.6667V7.00016Z", fill: "currentColor" })));
+    }, o = r("swirl-icon", `swirl-icon--size-${this.size}`);
+    return e("svg", { key: "80b3a9cd2c1c41f5ff0fb708a837950875ed5d1c", "aria-hidden": "true", class: o, fill: "none", height: this.size, part: "icon", style: t, viewBox: `0 0 ${s} ${s}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && e(i, { key: "23d8a56f952ed8343e755f092d66c55856365629" }, e("path", { key: "b5d54015f4b701d9e5bd2b45b61353796ca96801", d: "M2.66668 14.0002C2.30001 14.0002 1.98612 13.8696 1.72501 13.6085C1.4639 13.3474 1.33334 13.0335 1.33334 12.6668V5.3335C1.33334 4.96683 1.4639 4.65294 1.72501 4.39183C1.98612 4.13072 2.30001 4.00016 2.66668 4.00016H5.33334V2.66683C5.33334 2.30016 5.4639 1.98627 5.72501 1.72516C5.98612 1.46405 6.30001 1.3335 6.66668 1.3335H9.33334C9.70001 1.3335 10.0139 1.46405 10.275 1.72516C10.5361 1.98627 10.6667 2.30016 10.6667 2.66683V4.00016H13.3333C13.7 4.00016 14.0139 4.13072 14.275 4.39183C14.5361 4.65294 14.6667 4.96683 14.6667 5.3335V12.6668C14.6667 13.0335 14.5361 13.3474 14.275 13.6085C14.0139 13.8696 13.7 14.0002 13.3333 14.0002H2.66668ZM2.66668 12.6668H13.3333V5.3335H2.66668V12.6668ZM6.66668 4.00016H9.33334V2.66683H6.66668V4.00016Z", fill: "currentColor" })), (this.size === 20 || this.size === 24) && e(i, { key: "e27a945ba8420f8136a34464c99f1fb721843f71" }, e("path", { key: "2db85e2916eb011a18a35333fbaf57479c614523", d: "M4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V8C2 7.45 2.19583 6.97917 2.5875 6.5875C2.97917 6.19583 3.45 6 4 6H8V4C8 3.45 8.19583 2.97917 8.5875 2.5875C8.97917 2.19583 9.45 2 10 2H14C14.55 2 15.0208 2.19583 15.4125 2.5875C15.8042 2.97917 16 3.45 16 4V6H20C20.55 6 21.0208 6.19583 21.4125 6.5875C21.8042 6.97917 22 7.45 22 8V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4ZM4 19H20V8H4V19ZM10 6H14V4H10V6Z", fill: "currentColor" })), this.size === 28 && e(i, { key: "dce5caa6a926b068ff4dd8ef5443ce702cb2e83f" }, e("path", { key: "d9be411237163163159cc986e8402504f3ea78c0", d: "M4.66668 24.5002C4.02501 24.5002 3.4757 24.2717 3.01876 23.8147C2.56182 23.3578 2.33334 22.8085 2.33334 22.1668V9.3335C2.33334 8.69183 2.56182 8.14252 3.01876 7.68558C3.4757 7.22863 4.02501 7.00016 4.66668 7.00016H9.33334V4.66683C9.33334 4.02516 9.56182 3.47586 10.0188 3.01891C10.4757 2.56197 11.025 2.3335 11.6667 2.3335H16.3333C16.975 2.3335 17.5243 2.56197 17.9813 3.01891C18.4382 3.47586 18.6667 4.02516 18.6667 4.66683V7.00016H23.3333C23.975 7.00016 24.5243 7.22863 24.9813 7.68558C25.4382 8.14252 25.6667 8.69183 25.6667 9.3335V22.1668C25.6667 22.8085 25.4382 23.3578 24.9813 23.8147C24.5243 24.2717 23.975 24.5002 23.3333 24.5002H4.66668ZM4.66668 22.1668H23.3333V9.3335H4.66668V22.1668ZM11.6667 7.00016H16.3333V4.66683H11.6667V7.00016Z", fill: "currentColor" })));
   }
 };
-n.style = C;
+n.style = a;
 export {
   n as swirl_icon_work
 };

package/dist/{swirl-icon.entry.45a5e63d.js → swirl-icon.entry.210b8ba5.js}

@@ -1,13 +1,13 @@
-import { r as e, h as s, H as t } from "./index.8c53dbed.js";
+import { r as t, h as s, H as e } from "./index.95b03b09.js";
 import "react";
 import "react-dom";
 const o = ":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}", r = o, c = class {
   constructor(i) {
-    e(this, i), this.color = void 0, this.glyph = void 0, this.size = 24;
+    t(this, i), this.color = void 0, this.glyph = void 0, this.size = 24;
   }
   render() {
     const i = `swirl-icon-${this.glyph}`;
-    return s(t, { key: "0fb4aca6ca6dc2bd4a82e87530b2b782d70ee371" }, s(i, { key: "4da6475959debe66949de965f9872c064961a143", color: this.color, size: this.size }));
+    return s(e, { key: "a387674b39493bca8c22179bd056827a72e59a62" }, s(i, { key: "8596e88660ef0140e4c072d567b500eba51ff4c0", color: this.color, size: this.size }));
   }
 };
 c.style = r;

package/dist/{swirl-image-grid-item.entry.52febeb0.js → swirl-image-grid-item.entry.ff0d6212.js}

@@ -1,4 +1,4 @@
-import { r as g, c as d, h as e, H as l, g as h } from "./index.8c53dbed.js";
+import { r as g, c as d, h as e, H as l, g as h } from "./index.95b03b09.js";
 import { c as m } from "./index-267776a4.6beb4f4b.js";
 import { d as b } from "./utils-fbb8b494.acf1ae9e.js";
 import "react";
@@ -66,9 +66,9 @@ const u = ':host{display:block;width:100%;min-height:0}:host *{box-sizing:border
       "image-grid-item--has-error": this.error,
       "image-grid-item--has-overlay": this.overlay
     });
-    return e(l, { key: "25d55918ded8252b0cafd0e29245229189cd72f5", "data-sibling-count": n, role: "listitem" }, e(i, { key: "940ecc7d168d882352556df39576ba05949657dd", class: r, type: this.interactive ? "button" : void 0 }, e("div", { key: "b1962f4ad8cf634ee84e6335cfcc3bea668a5208", class: "image-grid-item__background", style: {
+    return e(l, { key: "f86d26a945d6c5a91d21c4b3d2e8e8cf7280cd52", "data-sibling-count": n, role: "listitem" }, e(i, { key: "168eeee1a6931bfbd5f32d49843d3dc3e76a7f0b", class: r, type: this.interactive ? "button" : void 0 }, e("div", { key: "2305b10cecf14f893d689184ae7f6dbcdffc86e1", class: "image-grid-item__background", style: {
       backgroundImage: t ? `url(${this.computedSrc})` : void 0
-    } }), this.loading !== "intersecting" || this.inViewport || this.gifPaused ? e("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : void 0, onError: this.onError, onLoad: this.onLoad, ref: (a) => this.img = a, src: this.computedSrc }) : e("div", { class: "image-grid-item__loading-placeholder" }), this.showGifControls && e("swirl-stack", { key: "25f5a42628d940986b45dc5f5dc3013480326360", class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, e("button", { key: "3954c9d057deff36d1d2273967fed3ed31a5c600", class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? e("swirl-icon-play-arrow", { size: 20 }) : e("swirl-icon-pause", { size: 20 })), e("div", { key: "dd212229dd965e6d93b4ead145538688a74f939a", class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, e("swirl-icon-gif", { key: "4b9c460a02c124e527f50be015e6acdcbf483847", size: 20 }))), this.loaded && !this.error && this.icon && !Boolean(this.overlay) && e("div", { key: "b6ba0c7c2acb6ed3263f6000799e0df4a04e2211", class: "image-grid-item__icon", innerHTML: this.icon }), this.overlay && e("div", { key: "f0cfd5469b86f7b608dbd7608d216a7a0b21cef9", class: "image-grid-item__overlay" }, this.overlay), !this.loaded && e("div", { key: "5782cb6dbdd706424d1b35b01bf1a53c32221fcd", class: "image-grid-item__spinner" }, e("swirl-spinner", { key: "bb5241d86afffd13c39f45a4b4e536726d8548e8" })), this.loaded && this.error && e("div", { key: "cef4a030dea24e0194d306ce555ab572b45366b9", class: "image-grid-item__error" }, e("swirl-icon-error", { key: "f88fd6dcc55b31e08817aa773901cad70d9af408", color: "critical" }))));
+    } }), this.loading !== "intersecting" || this.inViewport || this.gifPaused ? e("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : void 0, onError: this.onError, onLoad: this.onLoad, ref: (a) => this.img = a, src: this.computedSrc }) : e("div", { class: "image-grid-item__loading-placeholder" }), this.showGifControls && e("swirl-stack", { key: "3145ef9240597d8759a8f5db784ef897e0bd3138", class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, e("button", { key: "5c478e95705bd30e2ec37c24731b81af912fc3d6", class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? e("swirl-icon-play-arrow", { size: 20 }) : e("swirl-icon-pause", { size: 20 })), e("div", { key: "4cf34a427edb9c5a1137f72440af0d6341c03c14", class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, e("swirl-icon-gif", { key: "071d7bd9460469b88868b665b0adc4588aa2752c", size: 20 }))), this.loaded && !this.error && this.icon && !Boolean(this.overlay) && e("div", { key: "b7cba808a1ebaf6b4e04a5a119faf35649ec5e42", class: "image-grid-item__icon", innerHTML: this.icon }), this.overlay && e("div", { key: "df7a698640e0a2e16cae905d895caf573de73139", class: "image-grid-item__overlay" }, this.overlay), !this.loaded && e("div", { key: "a84815feb3d8efcaa727bc4e78a9f0a217a04b6e", class: "image-grid-item__spinner" }, e("swirl-spinner", { key: "d2ee1f7dcc0e043ed4a33b632e529f9503bc13df" })), this.loaded && this.error && e("div", { key: "d2d8f84c8b90bacbf93bf8f97bc8b48950cc7b4c", class: "image-grid-item__error" }, e("swirl-icon-error", { key: "f6988a46306d9e34b7a77469307808da5f6bd98a", color: "critical" }))));
   }
   get el() {
     return h(this);

package/dist/{swirl-image-grid.entry.cfc66bbc.js → swirl-image-grid.entry.8b3b4531.js}

@@ -1,4 +1,4 @@
-import { r as s, h as i, H as a, g as r } from "./index.8c53dbed.js";
+import { r as i, h as a, H as s, g as r } from "./index.95b03b09.js";
 import { c } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
@@ -6,7 +6,7 @@ const l = `:host{display:block}:host *{box-sizing:border-box}.image-grid{display
       100% / 3 - var(--s-space-2) / 2
     );grid-template-rows:calc(50% - var(--s-space-2) / 2)}.image-grid--item-count-3 ::slotted(*:nth-child(1)){grid-column-start:1;grid-row-start:1;grid-row-end:3}.image-grid--item-count-3 ::slotted(*:nth-child(3)){grid-column-start:2}.image-grid--item-count-4{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2));grid-template-rows:repeat(2, calc(50% - var(--s-space-2) / 2))}`, o = l, d = class {
   constructor(t) {
-    s(this, t), this.updateItems = () => {
+    i(this, t), this.updateItems = () => {
       this.items = Array.from(this.el.children), this.items.forEach((e) => {
         e.overlay = void 0;
       }), this.items.length > 4 && (this.items[3].overlay = `+${this.items.length - 3}`);
@@ -30,7 +30,7 @@ const l = `:host{display:block}:host *{box-sizing:border-box}.image-grid{display
   }
   render() {
     const t = c("image-grid", `image-grid--item-count-${Math.min(4, this.items.length)}`), e = this.caculateAspectRatio();
-    return i(a, { key: "b521308af38fdbacdba8c1f992e048846609d50a" }, i("div", { key: "964edf1a7b758b4779e5b67d7bff4ed91fb7b7de", "aria-label": this.label, class: t, role: "list", style: { aspectRatio: e } }, i("slot", { key: "57075e6e6286ab69d4479b4d1b53417cc7484c62", onSlotchange: this.updateItems })));
+    return a(s, { key: "ca99f48c0545736c178c59021a99ea93d544f61e" }, a("div", { key: "a09c0a0f5f2d86e13d7cbe567d7ead2ca089a9c7", "aria-label": this.label, class: t, role: "list", style: { aspectRatio: e } }, a("slot", { key: "7f9a667335f743b407877c4fae7e60235176ad1d", onSlotchange: this.updateItems })));
   }
   get el() {
     return r(this);

package/dist/{swirl-inline-notification.entry.a5a02d33.js → swirl-inline-notification.entry.d12f9bc8.js}

@@ -1,17 +1,17 @@
-import { r as e, h as i, H as t } from "./index.8c53dbed.js";
+import { r as t, h as i, H as e } from "./index.95b03b09.js";
 import { c } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
-const a = ":host{display:block}:host *{box-sizing:border-box}.inline-notification{display:flex;max-width:100%;padding:var(--s-space-12);border-radius:var(--s-border-radius-sm);gap:var(--s-space-8)}@media (min-width: 768px){.inline-notification{padding:var(--s-space-16)}}.inline-notification--intent-info{background-color:var(--s-surface-info-subdued)}.inline-notification--intent-info .inline-notification__icon{color:var(--s-icon-info)}.inline-notification--intent-critical{background-color:var(--s-surface-critical-subdued)}.inline-notification--intent-critical .inline-notification__icon{color:var(--s-icon-critical)}.inline-notification--intent-warning{background-color:var(--s-surface-warning-subdued)}.inline-notification--intent-warning .inline-notification__icon{color:var(--s-icon-warning)}.inline-notification--intent-success{background-color:var(--s-surface-success-subdued)}.inline-notification--intent-success .inline-notification__icon{color:var(--s-icon-success)}.inline-notification__icon{display:inline-flex;flex-shrink:0}.inline-notification__content{position:relative;top:0.0625rem;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}", o = a, s = class {
+const o = ":host{display:block}:host *{box-sizing:border-box}.inline-notification{display:flex;max-width:100%;padding:var(--s-space-12);border-radius:var(--s-border-radius-sm);gap:var(--s-space-8)}@media (min-width: 768px){.inline-notification{padding:var(--s-space-16)}}.inline-notification--intent-info{background-color:var(--s-surface-info-subdued)}.inline-notification--intent-info .inline-notification__icon{color:var(--s-icon-info)}.inline-notification--intent-critical{background-color:var(--s-surface-critical-subdued)}.inline-notification--intent-critical .inline-notification__icon{color:var(--s-icon-critical)}.inline-notification--intent-warning{background-color:var(--s-surface-warning-subdued)}.inline-notification--intent-warning .inline-notification__icon{color:var(--s-icon-warning)}.inline-notification--intent-success{background-color:var(--s-surface-success-subdued)}.inline-notification--intent-success .inline-notification__icon{color:var(--s-icon-success)}.inline-notification__icon{display:inline-flex;flex-shrink:0}.inline-notification__content{position:relative;top:0.0625rem;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}", a = o, s = class {
   constructor(n) {
-    e(this, n), this.heading = void 0, this.importance = "status", this.intent = "info";
+    t(this, n), this.heading = void 0, this.importance = "status", this.intent = "info";
   }
   render() {
     const n = c("inline-notification", `inline-notification--intent-${this.intent}`);
-    return i(t, { key: "d46e37a215c2373153991797e6b0a42336358109" }, i("div", { key: "4db88116c9ae4e6693f274a28a9a2d861e5aa94b", "aria-describedby": "content", class: n, role: this.importance, tabIndex: 0 }, i("span", { key: "feaf53259af2044c5ecbb461804a56ed22c6e0d9", "aria-hidden": "true", class: "inline-notification__icon" }, this.intent === "critical" && i("swirl-icon-error", { key: "aa261620830413297d2f63aff904c33d20390cf2", size: 20 }), this.intent === "success" && i("swirl-icon-check-circle", { key: "79c150f64b7e3a04a7b87cececf20b14f75a3518", size: 20 }), this.intent === "warning" && i("swirl-icon-warning", { key: "556335c1333e49167d0c2b67cb983e183716624c", size: 20 }), this.intent === "info" && i("swirl-icon-info", { key: "6e55a282809d8abaea589b5a7ed1977c69f03640", size: 20 })), i("span", { key: "bfdcf8c92ce723c0cd9ebc9284f4b8bc8ae79bdd", class: "inline-notification__content", id: "content" }, i("swirl-text", { key: "a1191ec6b628202f21b649d788430becfa08caba", class: "inline-notification__heading", size: "sm", weight: "semibold" }, this.heading), i("slot", { key: "5bf9952fa7288e97a8d728e06db17b7facb400ab" }))));
+    return i(e, { key: "bac4853bd1415e782d488b5b96645bbc7c0282ba" }, i("div", { key: "244983a8537f5d3df6a4cf3e13e871e5e10f1fb3", "aria-describedby": "content", class: n, role: this.importance, tabIndex: 0 }, i("span", { key: "54a225088c8995855082dd75554bfe19a68ad90b", "aria-hidden": "true", class: "inline-notification__icon" }, this.intent === "critical" && i("swirl-icon-error", { key: "98e6431541bdfc6c196d7963f63f27a20c87cc78", size: 20 }), this.intent === "success" && i("swirl-icon-check-circle", { key: "0ad1bfcf653921cce540f1454bd35208d86d99f0", size: 20 }), this.intent === "warning" && i("swirl-icon-warning", { key: "a53464fc9af06b470ba3d6e2945ba8b8d06d6d25", size: 20 }), this.intent === "info" && i("swirl-icon-info", { key: "9c729b8a785d145f85e171c4338fabf780ae6775", size: 20 })), i("span", { key: "4f243b5dec4e64b90bb4f01e7fc42e34a7e9815a", class: "inline-notification__content", id: "content" }, i("swirl-text", { key: "b9fc0a9977cfd4a5c41fdcc7df94bad0a423ab70", class: "inline-notification__heading", size: "sm", weight: "semibold" }, this.heading), i("slot", { key: "6a484e605fb208af6dc5bd4c92ace361a9910633" }))));
   }
 };
-s.style = o;
+s.style = a;
 export {
   s as swirl_inline_notification
 };

package/dist/{swirl-inline-status.entry.d10f651c.js → swirl-inline-status.entry.e7cd6798.js}

@@ -1,4 +1,4 @@
-import { r as s, h as e, H as a } from "./index.8c53dbed.js";
+import { r as s, h as e, H as a } from "./index.95b03b09.js";
 import { c as o } from "./index-267776a4.6beb4f4b.js";
 import { g as r } from "./utils-fbb8b494.acf1ae9e.js";
 import "react";
@@ -27,7 +27,7 @@ const l = ":host{display:inline-flex}:host *{box-sizing:border-box}.inline-statu
   }
   render() {
     const t = o("inline-status", `inline-status--intent-${this.intent}`, `inline-status--size-${this.size}`);
-    return e(a, { key: "2fc16697efad24365a563411111d6e2d954c8aee" }, e("span", { key: "02d1974c104f1bbc71effbff313b2c3a76104fc1", class: t, part: "inline-status" }, this.icon && e("span", { key: "6d93d978c0fd59663669aa2e46ed5ffed57e3213", class: "inline-status__icon", innerHTML: this.icon, ref: (i) => this.iconEl = i }), e("span", { key: "b75e6e5dbf94bf3532c9e2ab6bba4786b8a199d1", class: "inline-status__message" }, this.message)));
+    return e(a, { key: "4c053e16e4d783b0b2042ca49391979b6e7be7a9" }, e("span", { key: "686a0d475a755da9a3dd50c853420eaf92b60811", class: t, part: "inline-status" }, this.icon && e("span", { key: "305c6369560a439dc07dfad001c293c68ebe4cb2", class: "inline-status__icon", innerHTML: this.icon, ref: (i) => this.iconEl = i }), e("span", { key: "244a8d2636733667ec16c41e4945d6bcb4347df0", class: "inline-status__message" }, this.message)));
   }
 };
 d.style = c;

package/dist/{swirl-lightbox.entry.ad114fb7.js → swirl-lightbox.entry.3dd1d744.js}

@@ -1,4 +1,4 @@
-import { r as h, c as b, h as i, H as u, g } from "./index.8c53dbed.js";
+import { r as h, c as b, h as i, H as u, g } from "./index.95b03b09.js";
 import { d as f, e as m } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
 import { c as p } from "./index-267776a4.6beb4f4b.js";
 import { c as x } from "./focus-trap.esm-49c9613c.db20abcc.js";
@@ -160,7 +160,7 @@ const y = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:
       "lightbox--hide-menu": !o,
       "lightbox--hide-toolbar": !r
     });
-    return i(u, { key: "2a5453d620902876bcbd132ad33ce44c6968107e", onKeydown: this.onKeyDown }, i("section", { key: "7b83b8433a217bd9780e901330cd9b331d00edf1", "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: l, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (n) => this.modalEl = n, role: "dialog", tabIndex: this.isOpen ? 0 : -1 }, i("div", { key: "95ca4eb07ff51e097965646dc5d3cf8bf3aa927f", class: "lightbox__body", role: "document" }, i("header", { key: "bd85c4e4a3055e1d1c9ee166f4456e8003bdc4c3", class: "lightbox__header" }, i("button", { key: "070efd3285d7810f3d031ef35f08c1de8cf43da8", "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, i("swirl-icon-close", { key: "68388c53988fc57217988c429a6bed21ae16fc0c" })), i("div", { key: "63a4cef131faf70605cbc67ed6ad02c09bef5c3d", class: "lightbox__toolbar" }, i("slot", { key: "8025cc39ecc00930352801fc27175897322c060f", name: "toolbar" })), !this.hideMenu && i("swirl-popover-trigger", { key: "10747002ee19a6accb2bd8cd752b8794e930bdb1", swirlPopover: this.menu }, i("button", { key: "ee335848b6ad7abf69f300cb9adb0d8b0b4dff21", "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, i("swirl-icon-more-vertikal", { key: "b382292d75ec559ae542a98e145b1a12430f8fe4" })))), i("div", { key: "0d3e2f44c9e40b59d93a89aec8df2d383e3c742c", "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, i("div", { key: "dd625b34c88c2c3381cd034cfc7716dce7d01248", "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (n) => this.slidesContainer = n }, i("slot", { key: "6d04b0c40d9b46f783ab55363377055c6dcf69b8", onSlotchange: this.registerSlides }))), i("div", { key: "ed9289fedd42eadf4725075849704c19cd39fd36", class: "lightbox__controls" }, i("button", { key: "2d170a66a66260f3c01e5e5ca7750e1343db4ca1", "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, i("swirl-icon-arrow-left", { key: "287a5135c9a2d0eecac5078702ac9ba8fac6e922" })), i("button", { key: "d40a453bc90a99a2d76363d82b5b713c643d83b2", "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, i("swirl-icon-arrow-right", { key: "f3986c948ef6f413e97200cd0a8fc6d808829dc2" }))), t && i("span", { key: "83c2ec283ed0826f3ba02b9e0b3570a39f4a7355", class: "lightbox__pagination" }, i("span", { key: "b1f6fec8ebec336ce08aa298e77304b623c0c041", "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length)), !this.hideMenu && i("swirl-popover", { key: "383236d86dd9d640696e5f3e8348327328bf43ba", animation: "scale-in-y", disableScrollLock: !0, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (n) => this.menu = n }, i("swirl-stack", { key: "65557c3eb245265943014f796d31ff54a3e91a41" }, i("div", { key: "068ed1d56b8182cbf35ec1590fc78fa3837487a4", class: "lightbox__meta" }, s && i("div", { key: "1dc9d8bab3d912ba592ce888af85c468a9519391", class: "lightbox__thumbnail" }, i("swirl-thumbnail", { key: "a58b4a7afca1f839f767000d155892088b461923", alt: "", src: s })), i("div", { key: "ca589cee18ac4d0b459543f5502d1d39d59d4f69", class: "lightbox__file-info" }, i("swirl-text", { key: "99a0d34f43f5a5b1e1ae482c48c1dafc68b55837", truncate: !0, weight: "semibold" }, e), i("swirl-text", { key: "092772566ba28884e403146768cb6daa8704ef21", color: "subdued", size: "sm", truncate: !0 }, a))), o && i("swirl-separator", { key: "8631028db9cae09412589ece93784da10f40f6f1" }), i("swirl-action-list", { key: "9437a83d5958906a020f74cb6c109c0f96c61e9f" }, this.downloadButtonEnabled && i("swirl-action-list-item", { key: "8cf82b7362f2cd61ae347676008d6c217ca21cd5", icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), i("slot", { key: "24742385608222225982eb4bb0156690ea1372b3", name: "menu-items" }))))));
+    return i(u, { key: "e88754a2f0f423e74801ce972fd842e731b61708", onKeydown: this.onKeyDown }, i("section", { key: "516f422c1a6dd4ede93ae8cfcde7f34e79b49cc8", "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: l, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (n) => this.modalEl = n, role: "dialog", tabIndex: this.isOpen ? 0 : -1 }, i("div", { key: "3f0e3ebb08fe0cb43587b9d072ea4b2e97d6428e", class: "lightbox__body", role: "document" }, i("header", { key: "01a8c5de5a8b11c7339ebd2bd9bbe648f6747e39", class: "lightbox__header" }, i("button", { key: "36e59bf33f92ca2ad0b7c564c15d3343735c482e", "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, i("swirl-icon-close", { key: "5e7ccf6331f8ec7702e90aaf24558faf4174f80d" })), i("div", { key: "29af2e2e50287dbf8b7cbcb24b3ad2fa5e6479b3", class: "lightbox__toolbar" }, i("slot", { key: "2c6ce5dac4f30a6a58bd3d261a9a9abe340e00bd", name: "toolbar" })), !this.hideMenu && i("swirl-popover-trigger", { key: "74722ebf881850b4f82dcdecc16edd2a3c15afc1", swirlPopover: this.menu }, i("button", { key: "68732360f97ac8c2421256da7d4ee6daccc164c3", "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, i("swirl-icon-more-vertikal", { key: "591d90b5b89c21991c113686206203aa7f0cf8e4" })))), i("div", { key: "5a1bb39367cbb9b34cd075279a99123e965a83ec", "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, i("div", { key: "3c2ab44a659ebdc8cd7a9d575206f313fe370847", "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (n) => this.slidesContainer = n }, i("slot", { key: "9d885d2a054da511f20a458180e791b73c687ea4", onSlotchange: this.registerSlides }))), i("div", { key: "03b487d1581eefabe735641d5574b4cd80b0894d", class: "lightbox__controls" }, i("button", { key: "6cee882e5719f14144f7644247ece6329bb7af16", "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, i("swirl-icon-arrow-left", { key: "1e9d104ce09d39b9ea0d06ff04d48a7c0b7c09a6" })), i("button", { key: "244894d2a611ccd985b6c20e9fba9cc4929a5c6c", "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, i("swirl-icon-arrow-right", { key: "af17ad0a660ec5c0a8c92709825adea912ce2c4a" }))), t && i("span", { key: "a41afe011941338cf1ee9478ff7b41735c4fcbcf", class: "lightbox__pagination" }, i("span", { key: "fa6e709a007867e0d7296add459551aea46a9352", "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length)), !this.hideMenu && i("swirl-popover", { key: "dc2557676fdceeb623c6072fd83818d6955ec7ea", animation: "scale-in-y", disableScrollLock: !0, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (n) => this.menu = n }, i("swirl-stack", { key: "17d4a0be2ea414278d772cba2d10d4fb66779ca5" }, i("div", { key: "f0401e8ab16e8a07c4fc5ec1c8c0617b947d5737", class: "lightbox__meta" }, s && i("div", { key: "391a87f009e1b2e7f39c0b11a2c347ed3838bfc1", class: "lightbox__thumbnail" }, i("swirl-thumbnail", { key: "58fc5d491d8436865f8ba4f3627ef7f619d32dbd", alt: "", src: s })), i("div", { key: "1a58449c8aff41974aea5af941a297be05afa829", class: "lightbox__file-info" }, i("swirl-text", { key: "a94c0ab82a429df0f08003b85ef0348e2b5dd470", truncate: !0, weight: "semibold" }, e), i("swirl-text", { key: "9a6cc66ee9e99f61e3996901eda40ff5458a383e", color: "subdued", size: "sm", truncate: !0 }, a))), o && i("swirl-separator", { key: "e10cd4db71e7580c26682f88f7a554af29013418" }), i("swirl-action-list", { key: "093b25e2e7c0c591611702c74f3c91404b7262c2" }, this.downloadButtonEnabled && i("swirl-action-list-item", { key: "445017c8e0f0f146f2b5afa4a5f2c2b5a03ec9f7", icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), i("slot", { key: "f9c7628564d06d45c757d5cd7a3b4e0064744d71", name: "menu-items" }))))));
   }
   get el() {
     return g(this);

package/dist/{swirl-link.entry.1fb072d7.js → swirl-link.entry.bcc6f3da.js}

@@ -1,4 +1,4 @@
-import { r, h as i, H as t } from "./index.8c53dbed.js";
+import { r, h as i, H as t } from "./index.95b03b09.js";
 import { c as s } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
@@ -8,7 +8,7 @@ const a = ":host{display:inline-flex}:host *{box-sizing:border-box}.link{color:v
   }
   render() {
     const e = s("link", `link--color-${this.color}`);
-    return i(t, { key: "dd7fa6f72657545249f2f473fba736ae8b658e78" }, i("a", { key: "237411a3ddf6fe64d9a98e300d01f4af805a6877", class: e, href: this.href, part: "link", target: this.target }, this.label));
+    return i(t, { key: "083991c7fec410ca7262bcd145058cb0dfe5301d" }, i("a", { key: "199a5866a421a96cd073fe1b67d548ca4f637bea", class: e, href: this.href, part: "link", target: this.target }, this.label));
   }
 };
 o.style = n;

package/dist/{swirl-list.entry.5b10df4c.js → swirl-list.entry.7e75611c.js}

@@ -1,4 +1,4 @@
-import { r as l, h as i, H as r } from "./index.8c53dbed.js";
+import { r as l, h as i, H as r } from "./index.95b03b09.js";
 import "react";
 import "react-dom";
 const s = ':host{display:block}:host *{box-sizing:border-box}.swirl-list{line-height:var(--s-line-height-base)}.swirl-list ul,.swirl-list ol{margin:0;padding:0;list-style-position:outside;list-style-type:none}.swirl-list ul li{padding-left:1.5rem}.swirl-list ul li:before{display:inline-block;width:1.5rem;margin-left:-1.5rem;text-align:center;content:"\u2022"}.swirl-list ol{counter-reset:item}.swirl-list ol ol{counter-reset:letter}.swirl-list ol ol li:before{content:counter(letter, lower-alpha) ".";counter-increment:letter}.swirl-list ol li{padding-left:1.5rem}.swirl-list ol li:before{display:inline-block;min-width:1.5rem;margin-left:-1.5rem;padding-right:var(--s-space-8);text-align:right;content:counter(item) ".";counter-increment:item;font-variant-numeric:tabular-nums}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.swirl-list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}', n = s, o = class {
@@ -9,7 +9,7 @@ const s = ':host{display:block}:host *{box-sizing:border-box}.swirl-list{line-he
     Array.from(this.containerEl.children).some((t) => !["UL", "OL"].includes(t.tagName)) && console.warn("[SwirlList] Only ul and ol elements are allowed as direct children of <swirl-list />.");
   }
   render() {
-    return i(r, { key: "16573be560707316d191314a9139db4a461bd13d" }, i("div", { key: "040abef7bf722f778c5b02024da346b1992be0a7", class: "swirl-list", ref: (e) => this.containerEl = e }, i("slot", { key: "04e5e724cea7f526242606d799b611dedee23d3f" })));
+    return i(r, { key: "392cd0280a0263e74b908fd3f45fab02c57f19c1" }, i("div", { key: "776b4afabf6be15112c168754a55e0079151cf98", class: "swirl-list", ref: (e) => this.containerEl = e }, i("slot", { key: "e8aa61a642c22be774e277be4055955bc3cf4bda" })));
   }
 };
 o.style = n;

package/dist/{swirl-menu-item.entry.c63669d1.js → swirl-menu-item.entry.2cb525ca.js}

@@ -1,9 +1,9 @@
-import { r, h as i, H as d, g as u } from "./index.8c53dbed.js";
-import { c as l } from "./index-267776a4.6beb4f4b.js";
-import { c as h, p as c } from "./utils-fbb8b494.acf1ae9e.js";
+import { r, f as d, h as i, H as u, g as l } from "./index.95b03b09.js";
+import { c as h } from "./index-267776a4.6beb4f4b.js";
+import { c, p } from "./utils-fbb8b494.acf1ae9e.js";
 import "react";
 import "react-dom";
-const p = ":host{display:block}:host *{box-sizing:border-box}.menu-item--expanded ::part(action-list-item){background-color:var(--s-surface-overlay-hovered)}", m = p, f = class {
+const m = ":host{display:block}:host *{box-sizing:border-box}.menu-item--expanded ::part(action-list-item){background-color:var(--s-surface-overlay-hovered)}", f = m, b = class {
   constructor(t) {
     r(this, t), this.onSlotChange = () => {
       this.subMenu = this.el.querySelector("swirl-menu"), this.updateActionListItemProps();
@@ -25,10 +25,10 @@ const p = ":host{display:block}:host *{box-sizing:border-box}.menu-item--expande
           return;
         e.preventDefault(), this.parentMenu.updateSelection(this.optionListItem);
       }
-    }, this.description = void 0, this.disabled = void 0, this.expanded = void 0, this.icon = void 0, this.intent = "default", this.label = void 0, this.suffix = void 0, this.value = void 0, this.parentMenu = void 0, this.subMenu = void 0;
+    }, this.description = void 0, this.disabled = void 0, this.expanded = void 0, this.icon = void 0, this.iconBadge = void 0, this.intent = "default", this.label = void 0, this.suffix = void 0, this.value = void 0, this.parentMenu = void 0, this.subMenu = void 0;
   }
   componentWillLoad() {
-    this.parentMenu = h(this.el, "swirl-menu"), this.rootMenu = c(this.el, "swirl-menu").pop(), this.subMenu = this.el.querySelector("swirl-menu");
+    this.parentMenu = c(this.el, "swirl-menu"), this.rootMenu = p(this.el, "swirl-menu").pop(), this.subMenu = this.el.querySelector("swirl-menu");
   }
   watchExpanded() {
     this.updateActionListItemProps();
@@ -36,6 +36,9 @@ const p = ":host{display:block}:host *{box-sizing:border-box}.menu-item--expande
   async getSubMenu() {
     return this.subMenu;
   }
+  async updateValue() {
+    d(this);
+  }
   async getParentMenu() {
     return this.parentMenu;
   }
@@ -43,26 +46,27 @@ const p = ":host{display:block}:host *{box-sizing:border-box}.menu-item--expande
     !Boolean(this.actionListItem) || (this.actionListItem.swirlAriaExpanded = this.expanded ? "true" : void 0, this.actionListItem.swirlAriaHaspopup = Boolean(this.subMenu) ? "true" : void 0, this.actionListItem.suffix = Boolean(this.subMenu) ? '<swirl-icon-chevron-right size="16"></swirl-icon-chevron-right>' : void 0);
   }
   renderActionListItem() {
-    var e, n, o;
-    const t = Boolean((e = this.subMenu) == null ? void 0 : e.value) ? (o = Array.from(((n = this.subMenu) == null ? void 0 : n.querySelectorAll("swirl-menu-item")) || []).find((s) => {
+    var e, s, o;
+    const t = Boolean((e = this.subMenu) == null ? void 0 : e.value) ? (o = Array.from(((s = this.subMenu) == null ? void 0 : s.querySelectorAll("swirl-menu-item")) || []).find((n) => {
       var a;
-      return s.value === ((a = this.subMenu) == null ? void 0 : a.value);
+      return n.value === ((a = this.subMenu) == null ? void 0 : a.value);
     })) == null ? void 0 : o.label : void 0;
-    return i("swirl-action-list-item", { badge: t, description: this.description, disabled: this.disabled, icon: this.icon, intent: this.intent, label: this.label, onClick: this.onActionListItemClick, ref: (s) => this.actionListItem = s, suffix: this.suffix });
+    return i("swirl-action-list-item", { badge: t, description: this.description, disabled: this.disabled, icon: this.icon, iconBadge: this.iconBadge, intent: this.intent, label: this.label, onClick: this.onActionListItemClick, ref: (n) => this.actionListItem = n, suffix: this.suffix });
   }
   renderOptionListItem() {
-    var t;
-    return i("swirl-option-list-item", { disabled: this.disabled, icon: this.icon, label: this.label, onClick: this.onOptionListItemClick, onKeyDown: this.onOptionListItemKeyDown, onKeyUp: this.onOptionListItemKeyUp, ref: (e) => this.optionListItem = e, selected: ((t = this.parentMenu) == null ? void 0 : t.value) === this.value, swirlAriaRole: "menuitemradio", value: this.value });
+    var e;
+    const t = ((e = this.parentMenu) == null ? void 0 : e.value) === this.value;
+    return i("swirl-option-list-item", { disabled: this.disabled, icon: this.icon, iconBadge: this.iconBadge, label: this.label, onClick: this.onOptionListItemClick, onKeyDown: this.onOptionListItemKeyDown, onKeyUp: this.onOptionListItemKeyUp, ref: (s) => this.optionListItem = s, selected: t, swirlAriaRole: "menuitemradio", value: this.value });
   }
   render() {
     var e;
-    const t = l("menu-item", {
+    const t = h("menu-item", {
       "menu-item--expanded": this.expanded
     });
-    return i(d, { key: "60935d6905d5131e17c11745287d6b8a92dcc678" }, i("div", { key: "dae9950c41d49199ad06d12b4cae1a5bd02df989", class: t }, ((e = this.parentMenu) == null ? void 0 : e.variant) === "selection" ? this.renderOptionListItem() : this.renderActionListItem(), i("slot", { key: "927c8ca18d653dfa37e614691b4a955144b327b8", onSlotchange: this.onSlotChange })));
+    return i(u, { key: "7f5a66431e423470afbe853a5225e3c4cd89a35d" }, i("div", { key: "491659e687e4f38adbfd309f4559ce42c2db54b8", class: t }, ((e = this.parentMenu) == null ? void 0 : e.variant) === "selection" ? this.renderOptionListItem() : this.renderActionListItem(), i("slot", { key: "5bcc5ebd312d0054712de53f92eb26e020d0f3b5", onSlotchange: this.onSlotChange })));
   }
   get el() {
-    return u(this);
+    return l(this);
   }
   static get watchers() {
     return {
@@ -70,7 +74,7 @@ const p = ":host{display:block}:host *{box-sizing:border-box}.menu-item--expande
     };
   }
 };
-f.style = m;
+b.style = f;
 export {
-  f as swirl_menu_item
+  b as swirl_menu_item
 };

package/dist/{swirl-menu.entry.56efaed5.js → swirl-menu.entry.2b254b71.js}

@@ -1,10 +1,10 @@
-import { r as d, c, h as n, H as b, g as p } from "./index.8c53dbed.js";
-import { c as v, a as f, o as w, f as g } from "./floating-ui.dom.esm-bef21834.ec4a9cbf.js";
-import { c as y } from "./index-267776a4.6beb4f4b.js";
-import { q as a, c as l, p as h, i as M, b as x } from "./utils-fbb8b494.acf1ae9e.js";
+import { r as d, c, h as o, H as b, g as p } from "./index.95b03b09.js";
+import { c as v, a as f, o as w, s as g, f as y } from "./floating-ui.dom.esm-bef21834.ec4a9cbf.js";
+import { c as M } from "./index-267776a4.6beb4f4b.js";
+import { q as a, c as l, p as h, i as I, b as x } from "./utils-fbb8b494.acf1ae9e.js";
 import "react";
 import "react-dom";
-const I = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed)}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile) :not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-1)}:not(.menu--mobile).menu--active .menu__menu{display:block}:not(.menu--mobile) .menu__menu{position:fixed;display:none}.menu__mobile-header{display:flex;height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-8)}.menu__mobile-header>*{display:inline-flex;flex-shrink:0}.menu__title{min-width:0;flex-grow:1;flex-shrink:1}.menu__title swirl-heading{min-width:0}.menu__done-button{margin-right:calc(-1 * var(--s-space-8))}.menu__menu{padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-surface-overlay-default)}", _ = I, k = class {
+const _ = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed)}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile) :not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-1)}:not(.menu--mobile).menu--active .menu__menu{display:block}:not(.menu--mobile) .menu__menu{position:fixed;display:none}.menu__mobile-header{display:flex;height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-8)}.menu__mobile-header>*{display:inline-flex;flex-shrink:0}.menu__title{min-width:0;flex-grow:1;flex-shrink:1}.menu__title swirl-heading{min-width:0}.menu__done-button{margin-right:calc(-1 * var(--s-space-8))}.menu__menu{padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-surface-overlay-default)}", k = _, L = class {
   constructor(e) {
     d(this, e), this.done = c(this, "done", 7), this.valueChange = c(this, "valueChange", 7), this.mobileMediaQuery = window.matchMedia("(min-width: 768px)"), this.mediaQueryHandler = () => {
       this.updateMobileState();
@@ -24,11 +24,13 @@ const I = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--
         return;
       }
       const t = this.el.parentElement;
-      !Boolean(t) || !Boolean(this.menuContainer) || (this.position = await v(t, this.menuContainer, {
-        placement: "right-start",
-        strategy: "fixed",
-        middleware: [w({ mainAxis: -10, crossAxis: 0 }), g()]
-      }));
+      !Boolean(t) || !Boolean(this.menuContainer) || requestAnimationFrame(async () => {
+        this.position = await v(t, this.menuContainer, {
+          placement: "right-start",
+          strategy: "fixed",
+          middleware: [w({ mainAxis: -10, crossAxis: 0 }), g(), y()]
+        });
+      });
     }, this.onKeyDown = (t) => {
       if (t.code === "ArrowDown")
         t.preventDefault(), t.stopPropagation(), this.focusNextItem();
@@ -60,12 +62,15 @@ const I = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--
     }), this.swirlPopover.addEventListener("popoverClose", this.resetMenu), this.updateItems();
   }
   disconnectedCallback() {
-    var e, t, i, o;
-    (e = this.swirlPopover) == null || e.removeEventListener("popoverClose", this.resetMenu), (i = (t = this.mobileMediaQuery).removeEventListener) == null || i.call(t, "change", this.mediaQueryHandler), (o = this.observer) == null || o.disconnect();
+    var e, t, i, n;
+    (e = this.swirlPopover) == null || e.removeEventListener("popoverClose", this.resetMenu), (i = (t = this.mobileMediaQuery).removeEventListener) == null || i.call(t, "change", this.mediaQueryHandler), (n = this.observer) == null || n.disconnect();
   }
   watchActive() {
     this.reposition(), this.disableAutoUpdate && this.disableAutoUpdate(), this.disableAutoUpdate = f(this.el.parentElement, this.menuContainer, this.reposition);
   }
+  watchValue() {
+    this.updateActiveItem();
+  }
   async activateMenuItem(e) {
     if (Boolean(this.parentMenu))
       return;
@@ -73,9 +78,9 @@ const I = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--
     a(this.el, "swirl-menu").filter((s) => s.level >= t.level && s !== t).forEach((s) => {
       s.active = !1, s.parentElement.expanded = !1;
     });
-    const o = await e.getSubMenu();
-    !Boolean(o) || (e.expanded = !0, o.active = !0, this.activeLevel = o.level, setTimeout(() => {
-      o.focusFirstItem();
+    const n = await e.getSubMenu();
+    !Boolean(n) || (e.expanded = !0, n.active = !0, this.activeLevel = n.level, setTimeout(() => {
+      n.focusFirstItem();
     }, this.mobile ? 200 : 60));
   }
   async close() {
@@ -98,13 +103,18 @@ const I = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--
   async updateSelection(e) {
     this.valueChange.emit(e.value);
   }
+  async updateActiveItem() {
+    a(this.el, "swirl-menu-item").filter((t) => l(t, "swirl-menu") === this.el).forEach((t) => {
+      t.updateValue();
+    }), this.parentMenu && this.parentMenu.variant === "action" && this.parentMenu.updateActiveItem();
+  }
   observeSlotChanges() {
     this.observer = new MutationObserver(() => {
       this.updateItems();
     }), this.observer.observe(this.el, { childList: !0 });
   }
   updateMobileState() {
-    const e = M();
+    const e = I();
     e !== this.mobile && (this.mobile = e);
   }
   updateItems() {
@@ -139,28 +149,29 @@ const I = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--
   }
   render() {
     var r, u;
-    const e = !Boolean(this.parentMenu), t = e && this.mobile ? void 0 : this.label, i = e && this.mobile ? "menu-title" : void 0, o = e ? "menubar" : "menu", s = y("menu", `menu--level-${this.level}`, {
+    const e = !Boolean(this.parentMenu), t = e && this.mobile ? void 0 : this.label, i = e && this.mobile ? "menu-title" : void 0, n = e ? "menubar" : "menu", s = M("menu", `menu--level-${this.level}`, {
       "menu--active": this.active,
       "menu--mobile": this.mobile,
       "menu--root": e
     });
-    return n(b, { key: "871e162e3b3f261be6a9c8a0426d65f7abe50f25" }, n("div", { key: "01d3b2e0ffa7a55cda07a477f95fe4014685ff7e", class: s }, this.mobile && e && n("div", { key: "8927be3673d2db5cba405199f833cd7aabbb8610", class: "menu__mobile-header" }, this.activeLevel === 0 && n("swirl-button", { key: "4d4ee3f8485470270ae59c9635b96ebddb2d44ee", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" }), this.activeLevel > 0 && n("swirl-button", { key: "f4c63de9a83fe17567371528cff256228a12dd25", hideLabel: !0, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" }), n("span", { key: "c241e0b1573f5c96f570017ed2b9ac4a3361e89c", class: "menu__title", id: "menu-title" }, n("swirl-heading", { key: "78f3377166d291981bf076ae448278877a6288ba", align: "center", as: "span", level: 4, text: this.label, truncate: !0 })), n("swirl-button", { key: "dddf25259fa3495d9c16f9e2155fb1b69ecebb80", class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone })), n("div", { key: "04b4e0e348861cee0a34727850e69439a5c6b402", "aria-label": t, "aria-labelledby": i, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (m) => this.menuContainer = m, role: o, style: !this.mobile && this.level > 0 ? {
+    return o(b, { key: "3b92df4408a15cedf8b0a9bb60ce473fd0961873" }, o("div", { key: "2fd4cbac5b724bf356fbf8a947b2249e47bb3d3a", class: s }, this.mobile && e && o("div", { key: "371cb7e8a087531385df045dc6f0acda077c907b", class: "menu__mobile-header" }, this.activeLevel === 0 && o("swirl-button", { key: "d91a49b39335154a6c82dfe1b7ea17d337540550", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" }), this.activeLevel > 0 && o("swirl-button", { key: "e4c43afe40aa8b01f7cdeb24cedc77aa5723476d", hideLabel: !0, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" }), o("span", { key: "5d01bb8e93edbbee6fbcd9d824cd51687286b5f2", class: "menu__title", id: "menu-title" }, o("swirl-heading", { key: "5441040b35978d77aec036ab4989616932aa88e1", align: "center", as: "span", level: 4, text: this.label, truncate: !0 })), o("swirl-button", { key: "c19f08d241a3bd0adcaeded5680262e6f5a1b29e", class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone })), o("div", { key: "23cd7ab65a69830e1eda0cd915bd9a0da7a12553", "aria-label": t, "aria-labelledby": i, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (m) => this.menuContainer = m, role: n, style: !this.mobile && this.level > 0 ? {
       top: Boolean(this.position) ? `${(r = this.position) == null ? void 0 : r.y}px` : "",
       left: Boolean(this.position) ? `${(u = this.position) == null ? void 0 : u.x}px` : ""
     } : this.mobile ? {
       left: e ? `calc(-100% * ${this.activeLevel})` : "100%"
-    } : void 0 }, n("slot", { key: "894ca7c7b59993da2caecc103e14a166df1c60f2" }))));
+    } : void 0 }, o("slot", { key: "dfa08a4d4f6db200e3f9ffdc71b80f3cae307557" }))));
   }
   get el() {
     return p(this);
   }
   static get watchers() {
     return {
-      active: ["watchActive"]
+      active: ["watchActive"],
+      value: ["watchValue"]
     };
   }
 };
-k.style = _;
+L.style = k;
 export {
-  k as swirl_menu
+  L as swirl_menu
 };