@getflip/swirl-components-react 0.239.0 → 0.240.0

package/dist/swirl-image-grid-item.entry.263f3e4f.js

@@ -0,0 +1,75 @@
+import { r as l, c as n, h as e, H as c, g as m } from "./index.dc76e74e.js";
+import { c as h } from "./index-267776a4.6beb4f4b.js";
+import "react";
+import "react-dom";
+const b = ':host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:only-child) button.image-grid-item:focus-visible:before,:host(:only-child) button.image-grid-item:focus-visible:after{border-radius:var(--s-border-radius-sm)}:host([data-sibling-count="2"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="2"]:nth-child(1)) button.image-grid-item:focus-visible:after,:host([data-sibling-count="3"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="2"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="2"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm);border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="3"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="3"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(4)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(4)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus{outline:none}button.image-grid-item:focus-visible:before{content:"";position:absolute;inset:0;border:0.125rem solid var(--s-focus-default);z-index:3}button.image-grid-item:focus-visible:after{content:"";position:absolute;inset:0;border:0.1875rem solid var(--s-background-default);z-index:2}.image-grid-item--has-error .image-grid-item__image{display:none}.image-grid-item--has-overlay .image-grid-item__image{scale:1.1;filter:blur(5px)}.image-grid-item__background{position:absolute;background-size:cover;inset:-40px;filter:blur(20px)}.image-grid-item__image{z-index:1;display:inline-flex;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__loading-placeholder{display:inline-flex;width:100%;height:100%}.image-grid-item__icon{position:absolute;z-index:1;top:50%;left:50%;display:flex;width:3rem;height:3rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);transform:translate3d(-50%, -50%, 0)}.image-grid-item__icon ::part(icon){width:2rem;height:2rem}.image-grid-item__gif-controls{position:absolute;z-index:1;bottom:var(--s-space-8);left:var(--s-space-8)}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon{display:flex;padding:var(--s-space-2);justify-content:center;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-icon-on-image);background-color:var(--s-surface-on-image-default)}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon--button{border:none;cursor:pointer}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon--label{padding-left:var(--s-space-8);padding-right:var(--s-space-8)}.image-grid-item__overlay{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.4);font-size:var(--s-font-size-2xl);inset:0}.image-grid-item__spinner{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.4);inset:0}.image-grid-item__error{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.1);inset:0}', u = b, f = class {
+  constructor(i) {
+    l(this, i), this.gifStarted = n(this, "gifStarted", 7), this.gifStopped = n(this, "gifStopped", 7), this.imageError = n(this, "imageError", 7), this.imageLoad = n(this, "imageLoad", 7), this.onLoad = () => {
+      this.error = !1, this.loaded = !0, this.imageLoad.emit();
+    }, this.onError = () => {
+      this.loaded = !0, this.error = !0, this.imageError.emit();
+    }, this.playGif = () => {
+      this.gifPaused = !1;
+      const t = this.img;
+      t.src = this.src, this.backgroundImg.attributeStyleMap.set("background-image", `url(${this.src})`), this.gifStarted.emit();
+    }, this.handleControlClick = (t) => {
+      t.stopImmediatePropagation(), this.gifPaused ? this.playGif() : this.pauseGif();
+    }, this.alt = void 0, this.gifPauseLabel = "Pause GIF playback", this.gifPlayLabel = "Continue GIF playback", this.icon = void 0, this.interactive = void 0, this.loading = void 0, this.overlay = void 0, this.showGifControls = void 0, this.src = void 0, this.error = !1, this.loaded = !1, this.inViewport = !1, this.gifPaused = !1;
+  }
+  async play() {
+    this.playGif();
+  }
+  async pause() {
+    this.pauseGif();
+  }
+  componentDidLoad() {
+    var i;
+    this.setupIntersectionObserver(), (i = this.img) != null && i.complete && (this.loaded = !0);
+  }
+  componentDidRender() {
+    var i;
+    ((i = this.img) == null ? void 0 : i.complete) && !this.loaded && (this.loaded = !0);
+  }
+  disconnectedCallback() {
+    var i;
+    (i = this.intersectionObserver) == null || i.disconnect();
+  }
+  setupIntersectionObserver() {
+    this.loading === "intersecting" && (this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
+      threshold: 0
+    }), this.intersectionObserver.observe(this.el));
+  }
+  onVisibilityChange(i) {
+    this.inViewport = i.some((t) => t.isIntersecting);
+  }
+  async pauseGif() {
+    const i = this.img, t = await this.readImageFromCanvas(i.src);
+    this.gifPaused = !0, i.src = t, this.backgroundImg.attributeStyleMap.set("background-image", `url(${t})`), this.gifStopped.emit();
+  }
+  readImageFromCanvas(i) {
+    return new Promise((t, d) => {
+      const o = new Image();
+      o.src = i, o.onload = (a) => {
+        const s = a.target, r = document.createElement("canvas"), g = r.getContext("2d");
+        r.width = s.width, r.height = s.height, g.drawImage(s, 0, 0, s.width, s.height), t(r.toDataURL("image/jpeg"));
+      }, o.onerror = () => d();
+    });
+  }
+  render() {
+    var a, s;
+    const i = this.interactive ? "button" : "div", t = !Boolean(this.loading) || this.loading === "eager" || this.loaded && (this.loading !== "intersecting" || this.inViewport), d = (s = Math.min((a = this.el.parentElement) == null ? void 0 : a.children.length, 4)) != null ? s : 1, o = h("image-grid-item", {
+      "image-grid-item--has-error": this.error,
+      "image-grid-item--has-overlay": this.overlay
+    });
+    return e(c, { key: "3c53f84167d5e69ec6c7b63b4b1eaaa597a8004f", "data-sibling-count": d, role: "listitem" }, e(i, { key: "f6f10cb0f5553011ecd0d4f2c0b499054112a834", class: o, type: this.interactive ? "button" : void 0 }, e("div", { key: "0ea16d14fbe3e758858b8d8a869f59288d3cc1d6", class: "image-grid-item__background", style: {
+      backgroundImage: t ? `url(${this.src})` : void 0
+    }, ref: (r) => this.backgroundImg = r }), this.loading !== "intersecting" || this.inViewport ? 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: (r) => this.img = r, src: this.src }) : e("div", { class: "image-grid-item__loading-placeholder" }), this.showGifControls && e("swirl-stack", { key: "0a1a18a75771a1723bf95ea1114a7c2e600dcca8", class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, e("button", { key: "bc0a37b547a700ae3800884c0329a04811e5902d", 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", null) : e("swirl-icon-pause", null)), e("div", { key: "38e17721eb87f49d6c84e649bcae9cbf9a9701d8", class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, e("swirl-icon-gif", { key: "b7d086f5defcbe4852fd9797711c849dc30178dc" }))), this.loaded && !this.error && this.icon && !Boolean(this.overlay) && e("div", { key: "0ae7a70a3751a3655a97373f30b3e5e0afa9dfb6", class: "image-grid-item__icon", innerHTML: this.icon }), this.overlay && e("div", { key: "46b6bbc2c069c6b0702ad0a6daa084707307e368", class: "image-grid-item__overlay" }, this.overlay), !this.loaded && e("div", { key: "7717ed85bd8fe462568737da3f6b4fb3ffc9ec1a", class: "image-grid-item__spinner" }, e("swirl-spinner", { key: "b7bfa2477052e94e57fe567d73bd9e600eb0166f" })), this.loaded && this.error && e("div", { key: "d60f0a2b7d1a4ee98a58c9ed620b91f9ef83c941", class: "image-grid-item__error" }, e("swirl-icon-error", { key: "21cab1b6b681da0e47fd44b5895d2d2ae18813b2", color: "critical" }))));
+  }
+  get el() {
+    return m(this);
+  }
+};
+f.style = u;
+export {
+  f as swirl_image_grid_item
+};

package/dist/{swirl-image-grid.entry.7a12264c.js → swirl-image-grid.entry.857a307e.js}

@@ -1,10 +1,10 @@
-import { r as i, h as e, H as s, g as a } from "./index.646f35e4.js";
+import { r as i, h as e, H as a, g as s } from "./index.dc76e74e.js";
 import { c as r } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
-const d = `:host{display:block}:host *{box-sizing:border-box}.image-grid{display:grid;overflow:hidden;width:100%;min-height:0;border-radius:var(--s-border-radius-sm);gap:var(--s-space-2)}.image-grid--item-count-1{grid-template-columns:100%;grid-template-rows:100%}.image-grid--item-count-2{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2))}.image-grid--item-count-3{grid-template-columns:calc(100% / 3 * 2 - var(--space-2) / 2) calc(
+const c = `:host{display:block}:host *{box-sizing:border-box}.image-grid{display:grid;overflow:hidden;width:100%;min-height:0;border-radius:var(--s-border-radius-sm);gap:var(--s-space-2)}.image-grid--item-count-1{grid-template-columns:100%;grid-template-rows:100%}.image-grid--item-count-2{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2))}.image-grid--item-count-3{grid-template-columns:calc(100% / 3 * 2 - var(--space-2) / 2) calc(
       100% / 3 - 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))}`, l = d, c = class {
+    )}.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))}`, l = c, m = class {
   constructor(t) {
     i(this, t), this.updateItems = () => {
       this.items = Array.from(this.el.children), this.items.length > 4 && (this.items[3].overlay = `+${this.items.length - 4}`);
@@ -15,13 +15,13 @@ const d = `:host{display:block}:host *{box-sizing:border-box}.image-grid{display
   }
   render() {
     const t = r("image-grid", `image-grid--item-count-${Math.min(4, this.items.length)}`);
-    return e(s, { key: "b96dc8f282a93a9cd7a938647ab7513e3654ff36" }, e("div", { key: "08d278c42319075184f72b4f60294175ada448ee", "aria-label": this.label, class: t, role: "list", style: { aspectRatio: this.aspectRatio } }, e("slot", { key: "dc3fbaf593dd1a6c89dbf7d6b0d977b320438340", onSlotchange: this.updateItems })));
+    return e(a, { key: "8aa0201454ae7cac1368fb5ee923568220f23994" }, e("div", { key: "c1bc6c32ab59053042a83f29aea5023431bceb04", "aria-label": this.label, class: t, role: "list", style: { aspectRatio: this.aspectRatio } }, e("slot", { key: "67124f8c2703cb1042a431ccd1972df71fa6618d", onSlotchange: this.updateItems })));
   }
   get el() {
-    return a(this);
+    return s(this);
   }
 };
-c.style = l;
+m.style = l;
 export {
-  c as swirl_image_grid
+  m as swirl_image_grid
 };

package/dist/{swirl-inline-notification.entry.fc2bde15.js → swirl-inline-notification.entry.2d76763f.js}

@@ -1,17 +1,17 @@
-import { r as e, h as i, H as t } from "./index.646f35e4.js";
+import { r as e, h as i, H as t } from "./index.dc76e74e.js";
 import { c } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
-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)}", s = o, a = 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";
   }
   render() {
     const n = c("inline-notification", `inline-notification--intent-${this.intent}`);
-    return i(t, { key: "4b2e57407f5274172e7e8f085ed42d260dc2184a" }, i("div", { key: "98c77c8280df8f2b63d6a3b1e88775f3054b9db7", "aria-describedby": "content", class: n, role: this.importance, tabIndex: 0 }, i("span", { key: "296974cc050044e5345c236907c558161d2657ee", "aria-hidden": "true", class: "inline-notification__icon" }, this.intent === "critical" && i("swirl-icon-error", { key: "3cb430b55ee684f7cbd2f6468b3ec9561871fce9", size: 20 }), this.intent === "success" && i("swirl-icon-check-circle", { key: "2cc564dc39750790f863f89bfff31d5998a7098e", size: 20 }), this.intent === "warning" && i("swirl-icon-warning", { key: "b28e6c482c791ed3c2c8488dfaef622f106ffe6f", size: 20 }), this.intent === "info" && i("swirl-icon-info", { key: "60211f93ce1c9f0e35a7cb9ea79b7f358b647ebf", size: 20 })), i("span", { key: "9e9de6d4291db24f4d13ea9c282759754cffbf73", class: "inline-notification__content", id: "content" }, i("swirl-text", { key: "6f0adb1aacb0a92a59de70c2de1e6a18486f52c7", class: "inline-notification__heading", size: "sm", weight: "semibold" }, this.heading), i("slot", { key: "1c15c6158b86b350032993e9b400678fefcd0af9" }))));
+    return i(t, { key: "02fd3c55682e56a9445badf81215c7be1a1f12f2" }, i("div", { key: "e640936e273a3896800d4b32e7acb13569c1df4b", "aria-describedby": "content", class: n, role: this.importance, tabIndex: 0 }, i("span", { key: "515ff5bdd7cf4d43afea431be9c2f904ab34c5ae", "aria-hidden": "true", class: "inline-notification__icon" }, this.intent === "critical" && i("swirl-icon-error", { key: "3f66f2880fcdc6f6fedcb5aa29c92fac41357d6e", size: 20 }), this.intent === "success" && i("swirl-icon-check-circle", { key: "37cfdbb4925dcc3e7a4236fdc74654782fb61511", size: 20 }), this.intent === "warning" && i("swirl-icon-warning", { key: "97ebe30c47426cedb36707f934e720098f1b3f55", size: 20 }), this.intent === "info" && i("swirl-icon-info", { key: "e8238d8123854e5980d61b2a2a5d2d23bb68c7e6", size: 20 })), i("span", { key: "5e0d0809f4015fe4b4c9d0942ee1187d13288dd4", class: "inline-notification__content", id: "content" }, i("swirl-text", { key: "43299e79012f160f32b23103a2101a88342c00be", class: "inline-notification__heading", size: "sm", weight: "semibold" }, this.heading), i("slot", { key: "60a2cfe91d5fea4c95cc515e8b35df5db75cbcba" }))));
   }
 };
-a.style = s;
+s.style = a;
 export {
-  a as swirl_inline_notification
+  s as swirl_inline_notification
 };

package/dist/{swirl-inline-status.entry.c04330c4.js → swirl-inline-status.entry.de3b5e3e.js}

@@ -1,4 +1,4 @@
-import { r as s, h as e, H as a } from "./index.646f35e4.js";
+import { r as s, h as e, H as a } from "./index.dc76e74e.js";
 import { c as o } from "./index-267776a4.6beb4f4b.js";
 import { g as r } from "./utils-c16952ba.529dd544.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: "60bf7e9dc09792c00ab96a8df37f8c66e38be7eb" }, e("span", { key: "ba229e8de2b55222bd94881e36669a5c86721aa3", class: t, part: "inline-status" }, this.icon && e("span", { key: "7883adbc0d389321c3fc38e324f7cc94c53804e1", class: "inline-status__icon", innerHTML: this.icon, ref: (i) => this.iconEl = i }), e("span", { key: "ff074ad858f5a2ec415de60d0975241b50a1ed10", class: "inline-status__message" }, this.message)));
+    return e(a, { key: "dead8fd6471282b38692ed067771dff6ed0b661b" }, e("span", { key: "fea8c86b1e9acdf04f9e5bfc2df5408ee4ac5671", class: t, part: "inline-status" }, this.icon && e("span", { key: "5cf32f454ea173dc8644516a6fa384a584afe99a", class: "inline-status__icon", innerHTML: this.icon, ref: (i) => this.iconEl = i }), e("span", { key: "d60dc4ed468b9715dc1e3096b1bf7142baa04b03", class: "inline-status__message" }, this.message)));
   }
 };
 d.style = c;

package/dist/{swirl-lightbox.entry.c6512729.js → swirl-lightbox.entry.9ca31058.js}

@@ -1,5 +1,5 @@
-import { r as h, c as b, h as i, H as u, g } from "./index.646f35e4.js";
-import { d as f, e as m } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
+import { r as h, c as b, h as i, H as f, g as u } from "./index.dc76e74e.js";
+import { d as g, 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";
 import { q as v } from "./utils-c16952ba.529dd544.js";
@@ -25,17 +25,17 @@ const y = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:
         a.style.transition = "none";
       }));
     }, this.onPointerMove = async (e) => {
-      var n, l;
+      var l, n;
       if (!this.dragging)
         return;
-      const a = !(e instanceof MouseEvent) && e.touches.length > 1, o = (l = (n = this.slides[this.activeSlideIndex]) == null ? void 0 : n.shadowRoot) == null ? void 0 : l.querySelector("swirl-file-viewer-image"), s = Boolean(o) ? await o.getZoom() > 1 : !1;
-      if (a || s)
+      const a = !(e instanceof MouseEvent) && e.touches.length > 1, s = (n = (l = this.slides[this.activeSlideIndex]) == null ? void 0 : l.shadowRoot) == null ? void 0 : n.querySelector("swirl-file-viewer-image"), o = Boolean(s) ? await s.getZoom() > 1 : !1;
+      if (a || o)
         return;
       e.preventDefault();
-      const d = e instanceof MouseEvent ? e.clientX - this.dragStartPosition : e.touches[0].clientX - this.dragStartPosition;
-      this.slides.forEach((r) => {
-        const c = this.activeSlideIndex * r.getBoundingClientRect().width;
-        this.dragDelta = d, r.style.transform = `translate3d(${(-c + this.dragDelta) / 16}rem, 0, 0)`;
+      const r = e instanceof MouseEvent ? e.clientX - this.dragStartPosition : e.touches[0].clientX - this.dragStartPosition;
+      this.slides.forEach((d) => {
+        const c = this.activeSlideIndex * d.getBoundingClientRect().width;
+        this.dragDelta = r, d.style.transform = `translate3d(${(-c + this.dragDelta) / 16}rem, 0, 0)`;
       });
     }, this.onPointerUp = () => {
       if (!this.dragging)
@@ -43,10 +43,10 @@ const y = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:
       this.dragging = !1, this.dragStartPosition = void 0;
       const e = this.dragDelta / this.slides[this.activeSlideIndex].getBoundingClientRect().width;
       this.dragDelta = 0;
-      const a = e > 0.2, o = e < -0.2;
-      this.slides.forEach((s) => {
-        s.style.transition = "";
-      }), a ? this.onPreviousSlideClick() : o ? this.onNextSlideClick() : this.resetSlidePositions();
+      const a = e > 0.2, s = e < -0.2;
+      this.slides.forEach((o) => {
+        o.style.transition = "";
+      }), a ? this.onPreviousSlideClick() : s ? this.onNextSlideClick() : this.resetSlidePositions();
     }, this.onBackdropClick = (e) => {
       e.target === this.slidesContainer && this.close();
     }, this.onContextMenu = (e) => {
@@ -64,8 +64,8 @@ const y = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:
     (t = this.focusTrap) == null || t.updateContainerElements(this.modalEl);
   }
   disconnectedCallback() {
-    var t;
-    (t = this.focusTrap) == null || t.deactivate(), this.unlockBodyScroll();
+    var t, e;
+    (t = this.focusTrap) == null || t.deactivate(), this.unlockBodyScroll(), (e = this.containerObserver) == null || e.disconnect();
   }
   watchActiveSlideIndex() {
     this.activeSlideChange.emit(this.activeSlideIndex);
@@ -75,6 +75,22 @@ const y = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:
       var t;
       this.focusTrap = x(this.modalEl, {
         allowOutsideClick: !0,
+        checkCanFocusTrap: (e) => {
+          var a;
+          return (a = this.containerObserver) == null || a.disconnect(), new Promise((s) => {
+            const o = e[0];
+            if (o.tabIndex !== -1) {
+              s();
+              return;
+            }
+            this.containerObserver = new MutationObserver(() => {
+              o.tabIndex !== -1 && (this.containerObserver.disconnect(), s());
+            }), this.containerObserver.observe(o, {
+              attributes: !0,
+              attributeFilter: ["tabindex"]
+            });
+          });
+        },
         tabbableOptions: {
           getShadowRoot: (e) => e.shadowRoot
         }
@@ -89,11 +105,11 @@ const y = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:
   }
   async activateSlide(t) {
     var e, a;
-    (a = (e = this.menu) == null ? void 0 : e.close) == null || a.call(e), this.dragging = !1, this.activeSlideIndex = t, this.slides.forEach((o, s) => {
-      s === this.activeSlideIndex ? (o.removeAttribute("aria-hidden"), o.setAttribute("active", "true")) : s === this.activeSlideIndex - 1 || s === this.activeSlideIndex + 1 ? (o.setAttribute("aria-hidden", "true"), o.setAttribute("active", "true")) : o.setAttribute("aria-hidden", "true"), o.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
+    (a = (e = this.menu) == null ? void 0 : e.close) == null || a.call(e), this.dragging = !1, this.activeSlideIndex = t, this.slides.forEach((s, o) => {
+      o === this.activeSlideIndex ? (s.removeAttribute("aria-hidden"), s.setAttribute("active", "true")) : o === this.activeSlideIndex - 1 || o === this.activeSlideIndex + 1 ? (s.setAttribute("aria-hidden", "true"), s.setAttribute("active", "true")) : s.setAttribute("aria-hidden", "true"), s.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
     }), setTimeout(() => {
-      this.slides.forEach((o, s) => {
-        s !== this.activeSlideIndex && s !== this.activeSlideIndex - 1 && s !== this.activeSlideIndex + 1 && o.setAttribute("active", "false");
+      this.slides.forEach((s, o) => {
+        o !== this.activeSlideIndex && o !== this.activeSlideIndex - 1 && o !== this.activeSlideIndex + 1 && s.setAttribute("active", "false");
       });
     }, 300), this.stopAllMediaPlayers(), this.resetImageZoom();
   }
@@ -120,7 +136,7 @@ const y = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:
     return (t = this.slides[this.activeSlideIndex]) == null ? void 0 : t.thumbnailUrl;
   }
   lockBodyScroll() {
-    f(this.el);
+    g(this.el);
   }
   unlockBodyScroll() {
     m(this.el);
@@ -139,15 +155,15 @@ const y = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:
     });
   }
   render() {
-    const t = this.slides.length > 1, e = this.getCurrentFileName(), a = this.getCurrentFileType(), o = this.getCurrentThumbnailUrl(), s = Boolean(this.el.querySelector("[slot='menu-items']")) || this.downloadButtonEnabled, d = Boolean(this.el.querySelector("[slot='toolbar']")), n = p("lightbox", {
+    const t = this.slides.length > 1, e = this.getCurrentFileName(), a = this.getCurrentFileType(), s = this.getCurrentThumbnailUrl(), o = Boolean(this.el.querySelector("[slot='menu-items']")) || this.downloadButtonEnabled, r = Boolean(this.el.querySelector("[slot='toolbar']")), l = p("lightbox", {
       "lightbox--closing": this.closing,
-      "lightbox--hide-menu": !s,
-      "lightbox--hide-toolbar": !d
+      "lightbox--hide-menu": !o,
+      "lightbox--hide-toolbar": !r
     });
-    return i(u, { key: "c8bceace07cc5e3b383335dc1922d07bc4cf798b", onKeydown: this.onKeyDown }, i("section", { key: "8ca4e1bcb1ace564031324c272dd563982f3a75c", "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: n, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (l) => this.modalEl = l, role: "dialog", tabIndex: this.isOpen ? 0 : -1 }, i("div", { key: "49627fff6dc158e3f6e3d2d086dab6c4ef777ba0", class: "lightbox__body", role: "document" }, i("header", { key: "67d2f759a45f3939c5892452043542ac16d35ab7", class: "lightbox__header" }, i("button", { key: "2b435c584e51e9a9eea53af0943be02f498a7b49", "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, i("swirl-icon-close", { key: "82190b87b6ad51c76822347a4fdae34fa0e2a7c7" })), i("div", { key: "8d15812a8a6b407b2fbfc979e9be4d6a58170090", class: "lightbox__toolbar" }, i("slot", { key: "5b078a82aed53bef1aa03e07af6d3da872c0cb85", name: "toolbar" })), !this.hideMenu && i("swirl-popover-trigger", { key: "4ec3bd91ddd69b2295876c0a424051b99b95829a", swirlPopover: this.menu }, i("button", { key: "35bb0b5371992f1eb29ddee66afa6b09a6b18346", "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, i("swirl-icon-more-vertikal", { key: "1fb8003b8e37af7abd8c1a03c04d6e0cd711afe6" })))), i("div", { key: "f6fd3f1762c09c1c930215962e90bfd04405bce0", "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, i("div", { key: "815d2d6f5800e575ac64610e42bb30b226769c9e", "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (l) => this.slidesContainer = l }, i("slot", { key: "b46ef3120b76503ac36811d5de60674e3ba69637", onSlotchange: this.registerSlides }))), i("div", { key: "773e340fc2b34e70267999130fc58e3f9f87551b", class: "lightbox__controls" }, i("button", { key: "cb1d0ec423a5acaef3b2e79e0844fdfb619eaab0", "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, i("swirl-icon-arrow-left", { key: "75d67efa6013b58257954eb71ed605d8779fe2ce" })), i("button", { key: "c15d3b79ca8a78cf1d68c2af04f15a714c8cb827", "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: "634d86163558e3c078892b93ef6f96794a5e0152" }))), t && i("span", { key: "75e7c65ca250fcfb0487f315d692ce9bc9048b7f", class: "lightbox__pagination" }, i("span", { key: "4f096d2236a0dc33cd69aab5db7e90d8a37cdb39", "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length)), !this.hideMenu && i("swirl-popover", { key: "6f870321b6452c6f9b02231e64a38f1184a9d33c", animation: "scale-in-y", disableScrollLock: !0, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (l) => this.menu = l }, i("swirl-stack", { key: "2cb775e68b06df634e63346b7839749eb25e7763" }, i("div", { key: "d03d1d668d90719210d40e56403110a556e0740f", class: "lightbox__meta" }, o && i("div", { key: "1164d0f2cd2446bd048c62addc7e8147685dbf47", class: "lightbox__thumbnail" }, i("swirl-thumbnail", { key: "13ac1fc1f9faebeb6ecacc631269fb1931ae5224", alt: "", src: o })), i("div", { key: "4c57f31a20af4ee19be6c619502af9ba12bf6546", class: "lightbox__file-info" }, i("swirl-text", { key: "288009371a95651f4fd6b0879e646e7da012ef27", truncate: !0, weight: "semibold" }, e), i("swirl-text", { key: "94d0bfd02e8b6fc2fad610046048d562300ac42d", color: "subdued", size: "sm", truncate: !0 }, a))), s && i("swirl-separator", { key: "a2cf20122147542395fb5b737404b3cd6c5975f2" }), i("swirl-action-list", { key: "1a686aa967b0a0c09771dd9dd677aa77e5dfc6b8" }, this.downloadButtonEnabled && i("swirl-action-list-item", { key: "aa44455bf6bc7efc78ddebb92aa20a86b2aa3c1d", icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), i("slot", { key: "fc2d9e366e62781039a7c345c9d3a98de48b7381", name: "menu-items" }))))));
+    return i(f, { key: "a52416b75199fa8f3b489acd7406e64eb3620b50", onKeydown: this.onKeyDown }, i("section", { key: "e9041095aaf0e89554a75af58fa6e773a5972fab", "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: "6a75bb57f70aefa7569975c5035c226f8f205dcd", class: "lightbox__body", role: "document" }, i("header", { key: "9a6e48f63c9768cce4fabcd761010af9dc2bedf5", class: "lightbox__header" }, i("button", { key: "f1fec0983a47512f770eff61b886c5a04bf12a60", "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, i("swirl-icon-close", { key: "b4d87c80e4e10d06ccf3fd26a9a08d409cbf2523" })), i("div", { key: "70d2aeacd6c61262306ab913be4888a8260025e9", class: "lightbox__toolbar" }, i("slot", { key: "2a7d2c738e5a2aca535f37f642a854bde3631097", name: "toolbar" })), !this.hideMenu && i("swirl-popover-trigger", { key: "2225cecb21b381def39f0e21ed2400c24c97f453", swirlPopover: this.menu }, i("button", { key: "5c08e68751b553ccbea1584695595e46546a08cb", "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, i("swirl-icon-more-vertikal", { key: "f65185ec1ec27944805fa977ea04f0d623d3cba4" })))), i("div", { key: "94bb1a8d7d296183a38a97c49ffea7eeb646f05d", "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, i("div", { key: "e08807648fd8540db943193285c029624f05a998", "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (n) => this.slidesContainer = n }, i("slot", { key: "9ee945f2cb8bdb874d36632f2c06fd5135095916", onSlotchange: this.registerSlides }))), i("div", { key: "3a0b45e1a5675f84250295d92820ccd520df6a9c", class: "lightbox__controls" }, i("button", { key: "56ddd3cfec949805d1f981ccb9ed55172b2abe49", "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, i("swirl-icon-arrow-left", { key: "6f318ea123dc2fe7d5e0a0e37e3949b3db5c70f4" })), i("button", { key: "f3850661da995831834b5c65254f3188a3fe8899", "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: "08f7b891095718d60dfffb01208b83be6d47fec7" }))), t && i("span", { key: "59463bd6d4995ef72fd1bf29d40d59e7894bf599", class: "lightbox__pagination" }, i("span", { key: "edf1d4c73fd50d8d84422ba0e08cef1d7dec3dc5", "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length)), !this.hideMenu && i("swirl-popover", { key: "56501d91dcd7f1f859446f7a5cc169e7dcdbd9b6", animation: "scale-in-y", disableScrollLock: !0, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (n) => this.menu = n }, i("swirl-stack", { key: "baa99c20e4243f70b521c30453c2e8bd2df23c56" }, i("div", { key: "258c3ec82b6a75b0ecf2f83d36e77f2cb99f74ea", class: "lightbox__meta" }, s && i("div", { key: "7f08e29a6e6712bc18bcfe739c8eb004efaeac42", class: "lightbox__thumbnail" }, i("swirl-thumbnail", { key: "16bb3c6b030ba27610f6ade4c6974e3f1b6932fc", alt: "", src: s })), i("div", { key: "c9607aa3a9a6943fc41f8ca0e1accffef33e6f78", class: "lightbox__file-info" }, i("swirl-text", { key: "bcb020430a14daf9878018fc8bfbd3cf53eb9877", truncate: !0, weight: "semibold" }, e), i("swirl-text", { key: "403ee2f73116d899b981613279bc72aa40bc0174", color: "subdued", size: "sm", truncate: !0 }, a))), o && i("swirl-separator", { key: "ccbf966bcf8d10cd3ed47a3b9c3f522361749522" }), i("swirl-action-list", { key: "48dc0f840db5323a8e4fd32eddb26a48744f1f3a" }, this.downloadButtonEnabled && i("swirl-action-list-item", { key: "940d3f5dc2cb186c7632c0bfc644014318baf950", icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), i("slot", { key: "7aefc60dc1eb95ac9d0c99ac7f336b6e8faf1ce1", name: "menu-items" }))))));
   }
   get el() {
-    return g(this);
+    return u(this);
   }
   static get watchers() {
     return {

package/dist/{swirl-link.entry.d1d6e778.js → swirl-link.entry.0746bc4c.js}

@@ -1,4 +1,4 @@
-import { r, h as i, H as t } from "./index.646f35e4.js";
+import { r, h as i, H as t } from "./index.dc76e74e.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: "00ca392c41452b30703cbf0e3bc9b6b9720ca980" }, i("a", { key: "bacc5aa74540feb08b91bd24eb584e2afcc100d7", class: e, href: this.href, part: "link", target: this.target }, this.label));
+    return i(t, { key: "a8ccaab9a67b7b3e6858212989db1b8ec7d1346d" }, i("a", { key: "b430310db7a30ca1b9ec46e11726ffa16f4ceb88", class: e, href: this.href, part: "link", target: this.target }, this.label));
   }
 };
 o.style = n;

package/dist/{swirl-list.entry.6554074a.js → swirl-list.entry.61f648ec.js}

@@ -1,4 +1,4 @@
-import { r as l, h as i, H as r } from "./index.646f35e4.js";
+import { r as l, h as i, H as r } from "./index.dc76e74e.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: "02f21218b2a1faf01fabc3dcb9a41e912f8658e7" }, i("div", { key: "5c8618ba4e499bfe8ee249cb4eebe788f092eff4", class: "swirl-list", ref: (e) => this.containerEl = e }, i("slot", { key: "95aae58901c4bb9b9023d4c44fb41ed15603570b" })));
+    return i(r, { key: "20fc202d59888c9c5fe0345fc7ed4808d9821e9c" }, i("div", { key: "05db743b98a1c31454def296f8f6fb24b07cd4c2", class: "swirl-list", ref: (e) => this.containerEl = e }, i("slot", { key: "29cf7dad09b215bb5b5504bee107599d5ec00691" })));
   }
 };
 o.style = n;

package/dist/{swirl-menu-item.entry.96bf29c9.js → swirl-menu-item.entry.6bfc6d17.js}

@@ -1,4 +1,4 @@
-import { r, h as i, H as d, g as u } from "./index.646f35e4.js";
+import { r, h as i, H as d, g as u } from "./index.dc76e74e.js";
 import { c as l } from "./index-267776a4.6beb4f4b.js";
 import { c as h, p as c } from "./utils-c16952ba.529dd544.js";
 import "react";
@@ -59,7 +59,7 @@ const p = ":host{display:block}:host *{box-sizing:border-box}.menu-item--expande
     const t = l("menu-item", {
       "menu-item--expanded": this.expanded
     });
-    return i(d, { key: "41a7d3cfa1197bceedadfd55cee2399f05ae4d83" }, i("div", { key: "53cc512b856b9ec277e4efbc9b3d94d6945b2498", class: t }, ((e = this.parentMenu) == null ? void 0 : e.variant) === "selection" ? this.renderOptionListItem() : this.renderActionListItem(), i("slot", { key: "60e0e595d046f962b699106e9a3ba90a73406539", onSlotchange: this.onSlotChange })));
+    return i(d, { key: "7ee67244e9a30eec12f25483ba8c0c00788342b2" }, i("div", { key: "df2fa7fcab05c3ddb1f8b9459006621026e1ade9", class: t }, ((e = this.parentMenu) == null ? void 0 : e.variant) === "selection" ? this.renderOptionListItem() : this.renderActionListItem(), i("slot", { key: "fd1e1d4a27be53bd84d64daec86944f9c7c311d9", onSlotchange: this.onSlotChange })));
   }
   get el() {
     return u(this);

package/dist/{swirl-menu.entry.486e674d.js → swirl-menu.entry.fd757213.js}

@@ -1,4 +1,4 @@
-import { r as m, c, h as n, H as b, g as p } from "./index.646f35e4.js";
+import { r as d, c, h as n, H as b, g as p } from "./index.dc76e74e.js";
 import { c as f, a as v, 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-c16952ba.529dd544.js";
@@ -6,7 +6,7 @@ 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 {
   constructor(e) {
-    m(this, e), this.done = c(this, "done", 7), this.valueChange = c(this, "valueChange", 7), this.mobileMediaQuery = window.matchMedia("(min-width: 768px)"), this.mediaQueryHandler = () => {
+    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();
     }, this.resetMenu = () => {
       this.items.forEach((t) => {
@@ -144,12 +144,12 @@ const I = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--
       "menu--mobile": this.mobile,
       "menu--root": e
     });
-    return n(b, { key: "b4e552529340f01ecb4bebe4e4173f715df3a27b" }, n("div", { key: "0d1707ba19ed7883dbe9d7bd96934c2c309118a3", class: s }, this.mobile && e && n("div", { key: "8b3d9cbe0530cef4bae80f13a42083bf17d428a7", class: "menu__mobile-header" }, this.activeLevel === 0 && n("swirl-button", { key: "0117c818faf9c3f3dafa7c35f97d5db53456ecc5", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" }), this.activeLevel > 0 && n("swirl-button", { key: "9740502a05cd1fed79959c41a1582276b87393cd", hideLabel: !0, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" }), n("span", { key: "4b59154f73fe9addceaea548be8d11fcdb3e1ab0", class: "menu__title", id: "menu-title" }, n("swirl-heading", { key: "15b54f36f4be42c879ae4eed7e4262b7cdaeddff", align: "center", as: "span", level: 4, text: this.label, truncate: !0 })), n("swirl-button", { key: "1a9adbc4f25fd6fd0c4d40b8b900967513e229ff", class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone })), n("div", { key: "02decf5ac5997e1cac5a577349ac2e9618965292", "aria-label": t, "aria-labelledby": i, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (d) => this.menuContainer = d, role: o, style: !this.mobile && this.level > 0 ? {
+    return n(b, { key: "46380ac4cecdd96b653112c0c4d86d23bbef3325" }, n("div", { key: "985eaecdb58e58dfbd73557dcb19c11a355c185b", class: s }, this.mobile && e && n("div", { key: "c0195c70e01d73f0eb52634a9b10f6f0a79fc129", class: "menu__mobile-header" }, this.activeLevel === 0 && n("swirl-button", { key: "6bbe9e735a8bfa78555c9cb76fea8f0bfb2fd7af", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" }), this.activeLevel > 0 && n("swirl-button", { key: "1eae68bcda2138f48e20fae99c9624f22e5aa86f", hideLabel: !0, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" }), n("span", { key: "89ac8444fc2a1c01254f0d8642ac21bbf01f0bfc", class: "menu__title", id: "menu-title" }, n("swirl-heading", { key: "8e17f2b3b99424542273ad18ca820c75d67664e5", align: "center", as: "span", level: 4, text: this.label, truncate: !0 })), n("swirl-button", { key: "b157ac515cfe40e5480f9c02e38a4a2b5c1d160a", class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone })), n("div", { key: "6b522b5f2920db3f52a946c7b691281111b51c44", "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 ? {
       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: "8d017e8fe191846a0ce0d4628f62a48786794a3e" }))));
+    } : void 0 }, n("slot", { key: "33049a31c6beee19fe90fa032ed1b1dd3912d791" }))));
   }
   get el() {
     return p(this);

package/dist/{swirl-modal.entry.4b34e5a4.js → swirl-modal.entry.a1202b73.js}

@@ -1,4 +1,4 @@
-import { r as h, c as t, h as a, H as f, g as p } from "./index.646f35e4.js";
+import { r as h, c as t, h as a, H as f, g as p } from "./index.dc76e74e.js";
 import { d as u, e as b } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
 import { c as v } from "./index-267776a4.6beb4f4b.js";
 import { c as g } from "./focus-trap.esm-49c9613c.db20abcc.js";
@@ -11,40 +11,40 @@ const _ = `:host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghos
   );--swirl-resource-list-item-background-pressed:var(
     --s-surface-overlay-pressed
   );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-max-width:40rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16) var(--s-space-12) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24) var(--s-space-16) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0}.modal[aria-hidden="true"]{display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content .modal__body{max-width:64rem}.modal--has-secondary-content:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - 24rem);max-height:none;flex-basis:calc(100% - 24rem)}}.modal--has-secondary-content .modal__secondary-content{display:block}@media (min-width: 768px){.modal--scrolled:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;overflow:hidden;width:100vw;height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:3.75rem;padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse;gap:var(--s-space-16)}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;flex-basis:100%;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:24rem;max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%}}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}`, w = _, y = class {
-  constructor(e) {
-    h(this, e), this.modalClose = t(this, "modalClose", 7), this.modalOpen = t(this, "modalOpen", 7), this.primaryAction = t(this, "primaryAction", 7), this.requestModalClose = t(this, "requestModalClose", 7), this.secondaryAction = t(this, "secondaryAction", 7), this.onKeyDown = (o) => {
-      o.code === "Escape" && (o.stopImmediatePropagation(), this.close());
+  constructor(o) {
+    h(this, o), this.modalClose = t(this, "modalClose", 7), this.modalOpen = t(this, "modalOpen", 7), this.primaryAction = t(this, "primaryAction", 7), this.requestModalClose = t(this, "requestModalClose", 7), this.secondaryAction = t(this, "secondaryAction", 7), this.onKeyDown = (e) => {
+      e.code === "Escape" && (e.stopImmediatePropagation(), this.close());
     }, this.onBackdropClick = () => {
       this.close();
     }, this.onCloseButtonClick = () => {
       this.close();
-    }, this.onPrimaryAction = (o) => {
-      this.primaryAction.emit(o);
-    }, this.onSecondaryAction = (o) => {
-      this.secondaryAction.emit(o);
+    }, this.onPrimaryAction = (e) => {
+      this.primaryAction.emit(e);
+    }, this.onSecondaryAction = (e) => {
+      this.secondaryAction.emit(e);
     }, this.determineScrollStatus = () => {
       var r, l, i, n, c, m;
-      const o = ((r = this.scrollContainer) == null ? void 0 : r.scrollTop) > 0, d = Math.ceil(((l = this.scrollContainer) == null ? void 0 : l.scrollTop) + ((i = this.scrollContainer) == null ? void 0 : i.offsetHeight)) >= ((n = this.scrollContainer) == null ? void 0 : n.scrollHeight), s = ((c = this.scrollContainer) == null ? void 0 : c.scrollHeight) > ((m = this.scrollContainer) == null ? void 0 : m.offsetHeight);
-      o !== this.scrolled && (this.scrolled = o), d !== this.scrolledDown && (this.scrolledDown = d), s !== this.scrollable && (this.scrollable = s);
+      const e = ((r = this.scrollContainer) == null ? void 0 : r.scrollTop) > 0, d = Math.ceil(((l = this.scrollContainer) == null ? void 0 : l.scrollTop) + ((i = this.scrollContainer) == null ? void 0 : i.offsetHeight)) >= ((n = this.scrollContainer) == null ? void 0 : n.scrollHeight), s = ((c = this.scrollContainer) == null ? void 0 : c.scrollHeight) > ((m = this.scrollContainer) == null ? void 0 : m.offsetHeight);
+      e !== this.scrolled && (this.scrolled = e), d !== this.scrolledDown && (this.scrolledDown = d), s !== this.scrollable && (this.scrollable = s);
     }, this.closable = !0, this.closeButtonLabel = "Close modal", this.height = void 0, this.hideCloseButton = void 0, this.hideLabel = void 0, this.label = void 0, this.maxHeight = void 0, this.maxWidth = void 0, this.padded = !0, this.primaryActionLabel = void 0, this.secondaryActionLabel = void 0, this.variant = "default", this.isOpen = !1, this.closing = !1, this.hasCustomHeader = void 0, this.hasCustomFooter = void 0, this.hasHeaderTools = void 0, this.hasSecondaryContent = void 0, this.scrollable = !1, this.scrolled = !1, this.scrolledDown = !1;
   }
   componentDidLoad() {
     this.focusTrap = g(this.modalEl, {
       allowOutsideClick: !0,
       tabbableOptions: {
-        getShadowRoot: (e) => e.shadowRoot
+        getShadowRoot: (o) => o.shadowRoot
       }
     }), this.determineScrollStatus(), queueMicrotask(() => {
       this.updateCustomFooterStatus(), this.updateCustomHeaderStatus(), this.updateHeaderToolsStatus(), this.updateSecondaryContentStatus();
     });
   }
   componentDidRender() {
-    var e;
-    (e = this.focusTrap) == null || e.updateContainerElements(this.modalEl);
+    var o;
+    (o = this.focusTrap) == null || o.updateContainerElements(this.modalEl);
   }
   disconnectedCallback() {
-    var e;
-    (e = this.focusTrap) == null || e.deactivate(), this.unlockBodyScroll();
+    var o;
+    (o = this.focusTrap) == null || o.deactivate(), this.unlockBodyScroll();
   }
   onWindowResize() {
     this.determineScrollStatus();
@@ -56,8 +56,8 @@ const _ = `:host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghos
       this.focusTrap.activate(), this.handleAutoFocus();
     }, 200);
   }
-  async close(e) {
-    this.closing || (this.requestModalClose.emit(), !(!this.closable && !e) && (this.closing = !0, this.unlockBodyScroll(), setTimeout(() => {
+  async close(o) {
+    this.closing || (this.requestModalClose.emit(), !(!this.closable && !o) && (this.closing = !0, this.unlockBodyScroll(), setTimeout(() => {
       this.focusTrap.deactivate(), this.isOpen = !1, this.modalClose.emit(), this.closing = !1;
     }, 150)));
   }
@@ -74,8 +74,8 @@ const _ = `:host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghos
     this.hasSecondaryContent = Boolean(this.el.querySelector('[slot="secondary-content"]'));
   }
   handleAutoFocus() {
-    var e;
-    (e = this.modalEl.querySelector("input[autofocus]")) == null || e.focus();
+    var o;
+    (o = this.modalEl.querySelector("input[autofocus]")) == null || o.focus();
   }
   lockBodyScroll() {
     u(this.scrollContainer);
@@ -84,7 +84,7 @@ const _ = `:host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghos
     b(this.scrollContainer);
   }
   render() {
-    const e = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel), o = v("modal", `modal--variant-${this.variant}`, {
+    const o = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel), e = v("modal", `modal--variant-${this.variant}`, {
       "modal--closing": this.closing,
       "modal--has-custom-footer": this.hasCustomFooter,
       "modal--has-custom-header": this.hasCustomHeader,
@@ -96,11 +96,11 @@ const _ = `:host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghos
       "modal--scrolled": this.scrolled,
       "modal--scrolled-down": this.scrolledDown
     });
-    return a(f, { key: "c1f5834e2bd960d78fa05de1afb463cbb6fe0de0" }, a("section", { key: "30b92c1dd3433a61f5329891120c1ebbac9f7944", "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: o, onKeyDown: this.onKeyDown, role: "dialog", ref: (d) => this.modalEl = d }, a("div", { key: "e3d83e43953a389b8dab0389faf5a02ab2e7b2ca", class: "modal__backdrop", onClick: this.onBackdropClick }), a("div", { key: "4aa2300b3b5a203b6ec18a38aa2816ce239a1e29", class: "modal__body", style: {
+    return a(f, { key: "72def0840e7e4f1638077a0602096eb036960210" }, a("section", { key: "a634bcb499d217bed80a917dbd94e498f7095376", "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: e, onKeyDown: this.onKeyDown, role: "dialog", ref: (d) => this.modalEl = d }, a("div", { key: "8a075f7aaacf9f7d5e6d7e2962c18ef58aeac41b", class: "modal__backdrop", onClick: this.onBackdropClick }), a("div", { key: "ece030aa169dc50164ea6b08c5fc446ddf278dfc", class: "modal__body", style: {
       "--swirl-modal-max-height": this.maxHeight,
       "--swirl-modal-height": this.height,
       maxWidth: this.maxWidth
-    } }, a("header", { key: "a41127f7f387aca86f751a7896e23b16156ee591", class: "modal__custom-header" }, a("slot", { key: "8d88d314a0a292c1c6e13f69a4e54bfecb72a949", name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && a("header", { key: "5a10bb3a24e4529a91a135af4b6f24e6257874f5", class: "modal__header" }, a("div", { key: "3490ee3497101659d3a1e6860e93f24f9636ca38", class: "modal__header-bar" }, !this.hideCloseButton && a("swirl-button", { key: "aee5a54c01098261585e179a86112cb077d5cb64", class: "modal__close-button", hideLabel: !0, icon: this.variant === "default" ? "<swirl-icon-close></swirl-icon-close>" : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), !this.hideLabel && a("swirl-heading", { key: "e451cb60d7a4c6d20591b21cfef602d5849f2480", as: "h2", class: "modal__heading", level: 3, text: this.label }))), a("div", { key: "1f9ce0bfdd4c5f70381cfc07993a4e1746b377d2", class: "modal__content-container" }, a("div", { key: "2daefa0e2a195d737aa9fee4b146fdd4998653ea", class: "modal__primary-content" }, a("div", { key: "7dd0e058b3157ed376d2cd510078d7d1b62f4867", class: "modal__header-tools" }, a("slot", { key: "7b724b0c13969499a2ffb9e84c6811fe1eab0278", name: "header-tools" })), a("div", { key: "b6004ba4b7018c31340ddb58fef367652f1dcaac", class: "modal__content", onScroll: this.determineScrollStatus, ref: (d) => this.scrollContainer = d }, a("slot", { key: "eeab7392d8053b37302548fb39366d2e25c80b61" }))), a("div", { key: "cd4174514f28a2206db6f0aefcf43642de5856d4", class: "modal__secondary-content" }, a("slot", { key: "417468eb6d3eb9b67ac1bf3d6a3c054b131c6ec8", name: "secondary-content" }))), a("div", { key: "25a4638137fcd6bde5fadaae33a77da14e902678", class: "modal__custom-footer" }, a("slot", { key: "df099032165191986932b28715f4ff7fde7e4be8", name: "custom-footer" })), e && a("footer", { key: "654216cd39d77649a1aae119e9df1131a5abe859", class: "modal__controls" }, a("swirl-button-group", { key: "e123649bc7ce4fd365c95f36cf6ee4451920062d", wrap: !0 }, this.secondaryActionLabel && a("swirl-button", { key: "5de4ba1855993f82e633826f635a7ca5ce4d1115", label: this.secondaryActionLabel, onClick: this.onSecondaryAction }), this.primaryActionLabel && a("swirl-button", { key: "4065745859b3ceebcd668ea807abe4fa23146f62", intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))));
+    } }, a("header", { key: "461cd7f2fdf06a5907bf5d7e17daaeede0e807fa", class: "modal__custom-header" }, a("slot", { key: "4f98248ce86013faa34fd8f31e4538ad6362bae5", name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && a("header", { key: "d14d572794ec20023c41e6c07d5cc4d6819f0421", class: "modal__header" }, a("div", { key: "3b03c9d5e3fe2e27909d80c28cff8b751245c9ae", class: "modal__header-bar" }, !this.hideCloseButton && a("swirl-button", { key: "61f02602ae2a262981d53f99b17eed5aeb1d7907", class: "modal__close-button", hideLabel: !0, icon: this.variant === "default" ? "<swirl-icon-close></swirl-icon-close>" : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), !this.hideLabel && a("swirl-heading", { key: "5ee3a9ebdbe2699340789352afbc40d3d0b5a38c", as: "h2", class: "modal__heading", level: 3, text: this.label }))), a("div", { key: "cd6c4984135aaa9141fa7b68d43a5a3130e3172f", class: "modal__content-container" }, a("div", { key: "32dc79dd3c7c1c3d29923a1c260e72c1aea44456", class: "modal__primary-content" }, a("div", { key: "5d3e8f25816be3737c96960ec5fb6cb8aca4aac2", class: "modal__header-tools" }, a("slot", { key: "a6912e3974d826cf9990f6408f66dfac25a65bab", name: "header-tools" })), a("div", { key: "42c9c895024a74eba330128dc042aa0714c59c6e", class: "modal__content", onScroll: this.determineScrollStatus, ref: (d) => this.scrollContainer = d }, a("slot", { key: "3e0640bf6d7b34ec0daa0dd2aab9963a19457bc6" }))), a("div", { key: "bb96b7efc0f421b04358cc56706da32dadf11243", class: "modal__secondary-content" }, a("slot", { key: "07d62a87fc1edf219d070a8f150d5228dbf354c2", name: "secondary-content" }))), a("div", { key: "4674f5a0c0fe89c948551a0244efa4bad79981c2", class: "modal__custom-footer" }, a("slot", { key: "29c29f908474c6e63149ca7277b75f0b1179ef51", name: "custom-footer" })), o && a("footer", { key: "dd71a775e74461f69373a8f5caa2d275e32d1344", class: "modal__controls" }, a("swirl-button-group", { key: "c87d79bc087efb0e3815fb092c2dc8787cdc2d6e", wrap: !0 }, this.secondaryActionLabel && a("swirl-button", { key: "40c73a24872805d21a557743f0cbaf339ddec34d", label: this.secondaryActionLabel, onClick: this.onSecondaryAction }), this.primaryActionLabel && a("swirl-button", { key: "99c873a848821dd0b805db2c8af331ad35b13a9f", intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))));
   }
   get el() {
     return p(this);

package/dist/{swirl-option-list-section.entry.0c5cdf4d.js → swirl-option-list-section.entry.8ca2de01.js}

@@ -1,4 +1,4 @@
-import { r as i, h as e, H as s } from "./index.646f35e4.js";
+import { r as i, h as e, H as s } from "./index.dc76e74e.js";
 import "react";
 import "react-dom";
 const o = ":host{display:block}:host *{box-sizing:border-box}.option-list-section{background-color:var(--s-surface-overlay-default)}.option-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-section__label{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}", a = o, l = class {
@@ -6,7 +6,7 @@ const o = ":host{display:block}:host *{box-sizing:border-box}.option-list-sectio
     i(this, t), this.label = void 0;
   }
   render() {
-    return e(s, { key: "d43693ee855fb93feee191ad2b3f80df4f780d20" }, e("div", { key: "3e9120f32eb7cefc7775faee63ec449646179863", "aria-labelledby": "label", class: "option-list-section", role: "group" }, e("span", { key: "e075c79389f1a51692006a98ffcc4db9ddd74c79", class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), e("div", { key: "3422336a9659238229360e707fa55e247d36f022", class: "option-list-section__items" }, e("slot", { key: "c4f360f573fc645e1e93de1dd29fc1e6f84ca899" }))));
+    return e(s, { key: "6629142e67d509a16900e8d21d9886f39fee8910" }, e("div", { key: "0f4cb1707b74d6fd971a3af67b6e7eefe0659667", "aria-labelledby": "label", class: "option-list-section", role: "group" }, e("span", { key: "386d52d3473bebc22ad2632fd2170c6ba15bafc2", class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), e("div", { key: "5f1519295438f4113a6dbe8c1e68dce6ae9b85a9", class: "option-list-section__items" }, e("slot", { key: "fe96c7c540acb6a94936af809143b9654cd2c2e2" }))));
   }
 };
 l.style = a;

package/dist/{swirl-option-list_2.entry.7e179969.js → swirl-option-list_2.entry.b731be4f.js}

@@ -1,4 +1,4 @@
-import { r as c, c as o, h as a, H as d, g } from "./index.646f35e4.js";
+import { r as c, c as o, h as a, H as d, g } from "./index.dc76e74e.js";
 import { c as n, q as l } from "./utils-c16952ba.529dd544.js";
 import { S as m } from "./sortable.esm-8c3d5856.57c4f048.js";
 import { c as f } from "./index-267776a4.6beb4f4b.js";
@@ -173,7 +173,7 @@ const v = ".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-sw
   }
   render() {
     const e = this.multiSelect ? "true" : void 0, t = Boolean(this.dragging) ? 0 : void 0;
-    return a(d, { key: "9d78a4b55e1fc88bd8732e11cbb492491b156461" }, a("swirl-visually-hidden", { key: "a47d3d51f9c13f910d8f462e7d5dd33f62783a22", role: "alert" }, this.assistiveText), a("div", { key: "bb3954ef149a397a94a84f6ce3c066037e29c1ff", "aria-label": this.label, "aria-multiselectable": e, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (i) => this.listboxEl = i, role: "listbox", tabIndex: t }, a("slot", { key: "62df2e4c0a4ece90aa8927b902346dfc360e4e93" })));
+    return a(d, { key: "50582d566de3a9cd25965f66fc2617de3dc7d041" }, a("swirl-visually-hidden", { key: "d8b38253940d4959b3ae520be02af8e3b1912f8a", role: "alert" }, this.assistiveText), a("div", { key: "05d8ab84c0b9f6bbbac6399f2c36f34890427851", "aria-label": this.label, "aria-multiselectable": e, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (i) => this.listboxEl = i, role: "listbox", tabIndex: t }, a("slot", { key: "da679caf7cb8f391e3827147016600a8e3d77989" })));
   }
   get el() {
     return g(this);
@@ -211,7 +211,7 @@ const I = ":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-bo
   }
   render() {
     const e = f("tag", `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`);
-    return a(d, { key: "d9b53b131c58858a0922190df599fae2cb170aee" }, a("span", { key: "38b8fec15b9df157099cfb41830f2f982067fec4", class: e, part: "tag" }, this.icon && a("span", { key: "d0885325a096e957caae2c9072cb4fd8041271f8", class: "tag__icon", innerHTML: this.icon, ref: (t) => this.iconEl = t }), a("span", { key: "42e5fe554b7cc0eb1f65a712b6e97ef9d743c1b9", class: "tag__label" }, this.label), this.removable && a("button", { key: "86c46bec2444aeaacb597bce3caf05c7251429db", "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : void 0, type: "button" }, a("swirl-icon-close", { key: "bfb2d7f4383387bc1ac55bb3d67f3c7197548e4f", size: 16 }))));
+    return a(d, { key: "314bb385a4dfd4fc3aac39b3eff6c94e173b3170" }, a("span", { key: "b9a9454b145a745300d60fdf97f2970b7c2de009", class: e, part: "tag" }, this.icon && a("span", { key: "88a14178eb5b7d0d8cbfba7e30b5af17b6125582", class: "tag__icon", innerHTML: this.icon, ref: (t) => this.iconEl = t }), a("span", { key: "e52a51ff097e0783a6dbd6ddf0fbc0fa6936b307", class: "tag__label" }, this.label), this.removable && a("button", { key: "65c89bf99db994ae16146ee725af001c2f83960a", "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : void 0, type: "button" }, a("swirl-icon-close", { key: "6e1335d3304150b3172e4b93ba8e89773bfcfe57", size: 16 }))));
   }
   get el() {
     return g(this);