@getflip/swirl-components-react 0.190.0 → 0.192.0

package/dist/swirl-icon.entry.703f8f60.js

@@ -0,0 +1,16 @@
+import { r as t, h as s, H as o } from "./index.646f8b70.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%}", n = class {
+  constructor(i) {
+    t(this, i), this.color = void 0, this.glyph = void 0, this.size = 24;
+  }
+  render() {
+    const i = `swirl-icon-${this.glyph}`;
+    return s(o, null, s(i, { color: this.color, size: this.size }));
+  }
+};
+n.style = r;
+export {
+  n as swirl_icon
+};

package/dist/{swirl-image-grid-item.entry.cbb59e85.js → swirl-image-grid-item.entry.60e4907f.js}

@@ -1,43 +1,43 @@
-import { r as s, c as r, h as i, H as n, g as a } from "./index.d90adc50.js";
-import { c as d } from "./index-267776a4.6beb4f4b.js";
+import { r as s, c as r, h as e, H as n, g as a } from "./index.646f8b70.js";
+import { c as d } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";
-const c = ":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(: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:not(:focus-visible){outline:none}button.image-grid-item:focus-visible{z-index:1;outline-color:var(--s-focus-default);outline-offset:var(--s-space-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__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}", l = c, g = class {
-  constructor(e) {
-    s(this, e), this.imageError = r(this, "imageError", 7), this.imageLoad = r(this, "imageLoad", 7), this.onLoad = () => {
+const l = ":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(: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:not(:focus-visible){outline:none}button.image-grid-item:focus-visible{z-index:1;outline-color:var(--s-focus-default);outline-offset:var(--s-space-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__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}", g = class {
+  constructor(i) {
+    s(this, i), this.imageError = r(this, "imageError", 7), this.imageLoad = r(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.alt = void 0, this.icon = void 0, this.interactive = void 0, this.loading = void 0, this.overlay = void 0, this.src = void 0, this.error = !1, this.loaded = !1, this.inViewport = !1;
   }
   componentDidLoad() {
-    var e;
-    this.setupIntersectionObserver(), (e = this.img) != null && e.complete && (this.loaded = !0);
+    var i;
+    this.setupIntersectionObserver(), (i = this.img) != null && i.complete && (this.loaded = !0);
   }
   componentDidRender() {
-    var e;
-    ((e = this.img) == null ? void 0 : e.complete) && !this.loaded && (this.loaded = !0);
+    var i;
+    ((i = this.img) == null ? void 0 : i.complete) && !this.loaded && (this.loaded = !0);
   }
   disconnectedCallback() {
-    var e;
-    (e = this.intersectionObserver) == null || e.disconnect();
+    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(e) {
-    this.inViewport = e.some((t) => t.isIntersecting);
+  onVisibilityChange(i) {
+    this.inViewport = i.some((t) => t.isIntersecting);
   }
   render() {
-    const e = this.interactive ? "button" : "div", t = d("image-grid-item", {
+    const i = this.interactive ? "button" : "div", t = d("image-grid-item", {
       "image-grid-item--has-error": this.error,
       "image-grid-item--has-overlay": this.overlay
     });
-    return i(n, { key: "298777d9439f4a7094c470e4df8f75b3bfecd2e7", role: "listitem" }, i(e, { key: "110e3f4e92242c2ea4c3757243d5d2ad225b08f4", class: t, type: this.interactive ? "button" : void 0 }, i("div", { key: "6af9e13456808d53908ef99bf277c566f93677b6", class: "image-grid-item__background", style: {
+    return e(n, { role: "listitem" }, e(i, { class: t, type: this.interactive ? "button" : void 0 }, e("div", { class: "image-grid-item__background", style: {
       backgroundImage: !Boolean(this.loading) || this.loading === "eager" || this.loaded ? `url(${this.src})` : void 0
-    } }), this.loading !== "intersecting" || this.inViewport ? i("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : void 0, onError: this.onError, onLoad: this.onLoad, ref: (o) => this.img = o, src: this.src }) : i("div", { class: "image-grid-item__loading-placeholder" }), this.loaded && !this.error && this.icon && !Boolean(this.overlay) && i("div", { key: "58ca544c5f5fab28047bfea67e68508a6cc25b91", class: "image-grid-item__icon", innerHTML: this.icon }), this.overlay && i("div", { key: "fd27e9528667228d6c7f0a52ce3527c1c82b45af", class: "image-grid-item__overlay" }, this.overlay), !this.loaded && i("div", { key: "0e7faab9865bae238cee0e4e73539ba290f8a981", class: "image-grid-item__spinner" }, i("swirl-spinner", { key: "a90812a5afcaffdc8b2fe71d695798ecfe6d5024" })), this.loaded && this.error && i("div", { key: "d7f5b66884c3d9a34cde5f718a14b419bcc794cd", class: "image-grid-item__error" }, i("swirl-icon-error", { key: "8b25f161750e2fe5af29964b9ed3ce30a7176823", color: "critical" }))));
+    } }), 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: (o) => this.img = o, src: this.src }) : e("div", { class: "image-grid-item__loading-placeholder" }), this.loaded && !this.error && this.icon && !Boolean(this.overlay) && e("div", { class: "image-grid-item__icon", innerHTML: this.icon }), this.overlay && e("div", { class: "image-grid-item__overlay" }, this.overlay), !this.loaded && e("div", { class: "image-grid-item__spinner" }, e("swirl-spinner", null)), this.loaded && this.error && e("div", { class: "image-grid-item__error" }, e("swirl-icon-error", { color: "critical" }))));
   }
   get el() {
     return a(this);

package/dist/{swirl-image-grid.entry.0b1f368f.js → swirl-image-grid.entry.2a0fcc71.js}

@@ -1,8 +1,8 @@
-import { r as i, h as e, H as s, g as a } from "./index.d90adc50.js";
-import { c as r } from "./index-267776a4.6beb4f4b.js";
+import { r as i, h as e, H as s, g as r } from "./index.646f8b70.js";
+import { c as a } from "./index-d280dafb.186cdb0e.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, 50%)}.image-grid--item-count-3{grid-template-columns:calc(100% / 3 * 2) calc(100% / 3)}.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, 50%);grid-template-rows:repeat(2, 50%)}", m = d, o = class {
+const m = ":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, 50%)}.image-grid--item-count-3{grid-template-columns:calc(100% / 3 * 2) calc(100% / 3)}.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, 50%);grid-template-rows:repeat(2, 50%)}", o = 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}`);
@@ -12,11 +12,11 @@ const d = ":host{display:block}:host *{box-sizing:border-box}.image-grid{display
     this.updateItems();
   }
   render() {
-    const t = r("image-grid", `image-grid--item-count-${Math.min(4, this.items.length)}`);
-    return e(s, { key: "d1abb5025f58aa7faec64bde61cbf20067a0b6c1" }, e("div", { key: "36753ffa56d1879df5c186ff84fcd04f14bb12a6", "aria-label": this.label, class: t, role: "list", style: { aspectRatio: this.aspectRatio } }, e("slot", { key: "ea7e90d03178365803ef2870f1dac042e0acc26b", onSlotchange: this.updateItems })));
+    const t = a("image-grid", `image-grid--item-count-${Math.min(4, this.items.length)}`);
+    return e(s, null, e("div", { "aria-label": this.label, class: t, role: "list", style: { aspectRatio: this.aspectRatio } }, e("slot", { onSlotchange: this.updateItems })));
   }
   get el() {
-    return a(this);
+    return r(this);
   }
 };
 o.style = m;

package/dist/swirl-inline-notification.entry.7a948d82.js

@@ -0,0 +1,17 @@
+import { r as t, h as i, H as o } from "./index.646f8b70.js";
+import { c as s } from "./index-d280dafb.186cdb0e.js";
+import "react";
+import "react-dom";
+const e = ":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)}", c = class {
+  constructor(n) {
+    t(this, n), this.heading = void 0, this.importance = "status", this.intent = "info";
+  }
+  render() {
+    const n = s("inline-notification", `inline-notification--intent-${this.intent}`);
+    return i(o, null, i("div", { "aria-describedby": "content", class: n, role: this.importance, tabIndex: 0 }, i("span", { "aria-hidden": "true", class: "inline-notification__icon" }, this.intent === "critical" && i("swirl-icon-error", { size: 20 }), this.intent === "success" && i("swirl-icon-check-circle", { size: 20 }), this.intent === "warning" && i("swirl-icon-warning", { size: 20 }), this.intent === "info" && i("swirl-icon-info", { size: 20 })), i("span", { class: "inline-notification__content", id: "content" }, i("swirl-text", { class: "inline-notification__heading", size: "sm", weight: "semibold" }, this.heading), i("slot", null))));
+  }
+};
+c.style = e;
+export {
+  c as swirl_inline_notification
+};

package/dist/{swirl-inline-status.entry.defadaeb.js → swirl-inline-status.entry.c73b3b9c.js}

@@ -1,11 +1,11 @@
-import { r as n, h as s, H as a } from "./index.d90adc50.js";
-import { c as o } from "./index-267776a4.6beb4f4b.js";
-import { g as r } from "./utils-aab10c80.240adddc.js";
+import { r as e, h as s, H as a } from "./index.646f8b70.js";
+import { c as o } from "./index-d280dafb.186cdb0e.js";
+import { g as r } from "./utils-c5f2f98f.af14538a.js";
 import "react";
 import "react-dom";
-const l = ":host{display:inline-flex}:host *{box-sizing:border-box}.inline-status{display:inline-flex;color:var(--s-text-default);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.inline-status--size-s{font-size:var(--s-font-size-sm)}.inline-status--size-s .inline-status__icon{width:1rem;height:1rem;margin-top:0.125rem}.inline-status--size-s .inline-status__message{padding-top:0}.inline-status--intent-critical{color:var(--s-text-critical)}.inline-status--intent-critical .inline-status__icon{color:var(--s-icon-critical)}.inline-status--intent-info{color:var(--s-text-info)}.inline-status--intent-info .inline-status__icon{color:var(--s-icon-info)}.inline-status--intent-success{color:var(--s-text-success)}.inline-status--intent-success .inline-status__icon{color:var(--s-icon-success)}.inline-status--intent-warning{color:var(--s-text-warning)}.inline-status--intent-warning .inline-status__icon{color:var(--s-icon-warning)}.inline-status__icon{display:inline-flex;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);color:var(--s-icon-default);align-self:flex-start}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status__icon{width:1.25rem;height:1.25rem}}.inline-status__message{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding-top:0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status__message{padding-top:0}}", c = l, d = class {
+const l = ":host{display:inline-flex}:host *{box-sizing:border-box}.inline-status{display:inline-flex;color:var(--s-text-default);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.inline-status--size-s{font-size:var(--s-font-size-sm)}.inline-status--size-s .inline-status__icon{width:1rem;height:1rem;margin-top:0.125rem}.inline-status--size-s .inline-status__message{padding-top:0}.inline-status--intent-critical{color:var(--s-text-critical)}.inline-status--intent-critical .inline-status__icon{color:var(--s-icon-critical)}.inline-status--intent-info{color:var(--s-text-info)}.inline-status--intent-info .inline-status__icon{color:var(--s-icon-info)}.inline-status--intent-success{color:var(--s-text-success)}.inline-status--intent-success .inline-status__icon{color:var(--s-icon-success)}.inline-status--intent-warning{color:var(--s-text-warning)}.inline-status--intent-warning .inline-status__icon{color:var(--s-icon-warning)}.inline-status__icon{display:inline-flex;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);color:var(--s-icon-default);align-self:flex-start}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status__icon{width:1.25rem;height:1.25rem}}.inline-status__message{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding-top:0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status__message{padding-top:0}}", c = class {
   constructor(t) {
-    n(this, t), this.desktopMediaQuery = r(), this.desktopMediaQueryHandler = (i) => {
+    e(this, t), this.desktopMediaQuery = r(), this.desktopMediaQueryHandler = (i) => {
       this.forceIconProps(i.matches);
     }, this.icon = void 0, this.intent = void 0, this.message = void 0, this.size = "m", this.iconSize = 20;
   }
@@ -22,15 +22,15 @@ const l = ":host{display:inline-flex}:host *{box-sizing:border-box}.inline-statu
     const i = this.iconEl.children[0];
     if (!Boolean(i))
       return;
-    let e = "24";
-    this.size === "s" ? e = "16" : t && (e = "20"), i.setAttribute("size", e);
+    let n = "24";
+    this.size === "s" ? n = "16" : t && (n = "20"), i.setAttribute("size", n);
   }
   render() {
     const t = o("inline-status", `inline-status--intent-${this.intent}`, `inline-status--size-${this.size}`);
-    return s(a, { key: "1de609bbf0bf6d020852f50a633bdfd9bfe10498" }, s("span", { key: "8cc9d1d9bb7337d00bd6b868b79a8134674bcfc4", class: t, part: "inline-status" }, this.icon && s("span", { key: "4bff93f30364d615179e8822f39d931778b2ec8a", class: "inline-status__icon", innerHTML: this.icon, ref: (i) => this.iconEl = i }), s("span", { key: "41c6198517400ba567ffb902f450dd61e4834282", class: "inline-status__message" }, this.message)));
+    return s(a, null, s("span", { class: t, part: "inline-status" }, this.icon && s("span", { class: "inline-status__icon", innerHTML: this.icon, ref: (i) => this.iconEl = i }), s("span", { class: "inline-status__message" }, this.message)));
   }
 };
-d.style = c;
+c.style = l;
 export {
-  d as swirl_inline_status
+  c as swirl_inline_status
 };

package/dist/swirl-lightbox.entry.b244af2f.js

@@ -0,0 +1,136 @@
+import { r as c, h as e, H as u, g } from "./index.646f8b70.js";
+import { A as b } from "./a11y-dialog.esm-d7a94c8c.bd6ae411.js";
+import { d as m, e as p } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
+import { c as x } from "./index-d280dafb.186cdb0e.js";
+import { q as f } from "./utils-c5f2f98f.af14538a.js";
+import "react";
+import "react-dom";
+const v = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:fixed;z-index:var(--s-z-40);background-color:rgba(0, 0, 0, 1);inset:0}.lightbox[aria-hidden="true"]{display:none}@media (min-width: 768px){.lightbox{background-color:rgba(0, 0, 0, 0.8)}}.lightbox:not(.lightbox--closing) .lightbox__body{animation:0.15s lightbox-fade-in}@media (prefers-reduced-motion){.lightbox:not(.lightbox--closing) .lightbox__body{animation:none}}.lightbox--closing{animation:0.15s lightbox-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.lightbox--closing{animation:none}}.lightbox--hide-menu .lightbox__menu{display:none}.lightbox__body{position:relative;width:100%;height:100%}.lightbox__header{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;padding:var(--s-space-12) var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}.lightbox__controls{position:absolute;z-index:1;top:50%;right:0;left:0;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}@media (min-width: 768px){.lightbox__controls{display:flex}}.lightbox__close-button,.lightbox__menu-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.lightbox__close-button:disabled,.lightbox__menu-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}.lightbox__content{overflow:hidden;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lightbox__slides{display:flex;width:100%;height:100%}.lightbox__slides ::slotted(*){flex-basis:100%;flex-shrink:0;transition:transform 0.3s}@media (min-width: 768px){.lightbox__slides ::slotted(*){padding:4rem 5rem}}@media (prefers-reduced-motion){.lightbox__slides ::slotted(*){transition:none}}.lightbox__pagination{position:absolute;bottom:var(--s-space-32);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 768px){.lightbox__pagination{display:none}}.lightbox__meta{display:flex;padding-top:var(--s-space-4);padding-right:var(--s-space-16);padding-bottom:var(--s-space-4);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-12)}@media (min-width: 768px){.lightbox__meta{max-width:18rem}}.lightbox__thumbnail{display:inline-flex;flex-shrink:0}.lightbox__file-info{display:flex;min-width:0;flex-grow:1;flex-direction:column}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}', _ = class {
+  constructor(t) {
+    c(this, t), this.dragging = !1, this.onCloseButtonClick = () => {
+      this.close();
+    }, this.onDownloadButtonClick = () => {
+      var i;
+      (i = this.slides[this.activeSlideIndex]) == null || i.download(), this.menu.close();
+    }, this.onNextSlideClick = () => {
+      this.activateSlide(Math.min(this.slides.length - 1, this.activeSlideIndex + 1));
+    }, this.onPreviousSlideClick = () => {
+      this.activateSlide(Math.max(0, this.activeSlideIndex - 1));
+    }, this.registerSlides = () => {
+      this.slides = Array.from(this.el.children).filter((i) => i.tagName === "SWIRL-FILE-VIEWER"), this.setSlideAttributes();
+    }, this.onPointerDown = (i) => {
+      this.dragging = !0, this.dragStartPosition = i instanceof MouseEvent ? i.clientX : i.touches[0].clientX, this.slides.forEach((l) => {
+        l.style.transition = "none";
+      });
+    }, this.onPointerMove = async (i) => {
+      var a, n;
+      const l = !(i instanceof MouseEvent) && i.touches.length > 1, o = (n = (a = this.slides[this.activeSlideIndex]) == null ? void 0 : a.shadowRoot) == null ? void 0 : n.querySelector("swirl-file-viewer-image"), s = Boolean(o) ? await o.getZoom() > 1 : !1;
+      if (!(l || s) && this.dragging) {
+        i.preventDefault();
+        const d = i instanceof MouseEvent ? i.clientX - this.dragStartPosition : i.touches[0].clientX - this.dragStartPosition;
+        this.slides.forEach((r) => {
+          const h = this.activeSlideIndex * r.getBoundingClientRect().width;
+          this.dragDelta = d, r.style.transform = `translate3d(${(-h + this.dragDelta) / 16}rem, 0, 0)`;
+        });
+      }
+    }, this.onPointerUp = () => {
+      this.dragging = !1, this.dragStartPosition = void 0;
+      const i = this.dragDelta / this.slides[this.activeSlideIndex].getBoundingClientRect().width;
+      this.dragDelta = 0;
+      const l = i > 0.2, o = i < -0.2;
+      this.slides.forEach((s) => {
+        s.style.transition = "";
+      }), l ? this.onPreviousSlideClick() : o ? this.onNextSlideClick() : this.resetSlidePositions();
+    }, this.onBackdropClick = (i) => {
+      i.target === this.slidesContainer && this.close();
+    }, this.onContextMenu = (i) => {
+      this.downloadButtonEnabled || i.preventDefault();
+    }, this.closeButtonLabel = "Close modal", this.downloadButtonEnabled = !0, this.downloadButtonLabel = "Download", this.hideMenu = void 0, this.label = void 0, this.menuLabel = "Slide options", this.menuTriggerLabel = "Open slide menu", this.nextSlideButtonLabel = "Next slide", this.previousSlideButtonLabel = "Previous slide", this.activeSlideIndex = 0, this.closing = !1, this.slides = void 0;
+  }
+  componentWillLoad() {
+    this.registerSlides();
+  }
+  componentDidLoad() {
+    this.modal = new b(this.modalEl), this.activateSlide(0);
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this.modal) == null || t.destroy(), this.unlockBodyScroll();
+  }
+  onKeyDown(t) {
+    !this.modal.shown || (t.code === "Escape" ? (t.stopImmediatePropagation(), this.close()) : t.code === "ArrowLeft" ? this.onPreviousSlideClick() : t.code === "ArrowRight" && this.onNextSlideClick());
+  }
+  async open() {
+    this.modal.show(), this.lockBodyScroll(), this.activateSlide(this.activeSlideIndex || 0);
+  }
+  async close() {
+    this.closing || (this.closing = !0, this.unlockBodyScroll(), setTimeout(() => {
+      this.modal.hide(), this.resetImageZoom(), this.stopAllMediaPlayers(), this.closing = !1;
+    }, 150));
+  }
+  async activateSlide(t) {
+    var i, l;
+    (l = (i = this.menu) == null ? void 0 : i.close) == null || l.call(i), 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)`;
+    }), setTimeout(() => {
+      this.slides.forEach((o, s) => {
+        s !== this.activeSlideIndex && s !== this.activeSlideIndex - 1 && s !== this.activeSlideIndex + 1 && o.setAttribute("active", "false");
+      });
+    }, 300), this.stopAllMediaPlayers(), this.resetImageZoom();
+  }
+  setSlideAttributes() {
+    this.slides.forEach((t) => {
+      t.setAttribute("active", "false"), t.setAttribute("aria-label", t.file), t.setAttribute("aria-roledescription", "slide"), t.setAttribute("role", "group");
+    });
+  }
+  resetSlidePositions() {
+    this.slides.forEach((t) => {
+      t.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
+    });
+  }
+  getCurrentFileName() {
+    var t, i;
+    return (i = (t = this.slides[this.activeSlideIndex]) == null ? void 0 : t.file) == null ? void 0 : i.split("/").pop();
+  }
+  getCurrentFileType() {
+    var t;
+    return (t = this.slides[this.activeSlideIndex]) == null ? void 0 : t.type;
+  }
+  getCurrentThumbnailUrl() {
+    var t;
+    return (t = this.slides[this.activeSlideIndex]) == null ? void 0 : t.thumbnailUrl;
+  }
+  lockBodyScroll() {
+    m(this.el);
+  }
+  unlockBodyScroll() {
+    p(this.el);
+  }
+  getMediaPlayers() {
+    return f(this.el, "video");
+  }
+  stopAllMediaPlayers() {
+    this.getMediaPlayers().forEach((t) => t.pause());
+  }
+  resetImageZoom() {
+    this.slides.forEach((t) => {
+      var l;
+      const i = (l = t == null ? void 0 : t.shadowRoot) == null ? void 0 : l.querySelector("swirl-file-viewer-image");
+      Boolean(i) && i.resetZoom();
+    });
+  }
+  render() {
+    const t = this.slides.length > 1, i = this.getCurrentFileName(), l = this.getCurrentFileType(), o = this.getCurrentThumbnailUrl(), s = Boolean(this.el.querySelector("[slot='menu-items']")) || this.downloadButtonEnabled, a = x("lightbox", {
+      "lightbox--closing": this.closing,
+      "lightbox--hide-menu": !s
+    });
+    return e(u, null, e("section", { "aria-hidden": "true", "aria-label": this.label, class: a, 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 }, e("div", { class: "lightbox__body", role: "document" }, e("header", { class: "lightbox__header" }, e("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, e("swirl-icon-close", null)), !this.hideMenu && e("swirl-popover-trigger", { swirlPopover: this.menu }, e("button", { "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, e("swirl-icon-more-vertikal", null)))), e("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, e("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (n) => this.slidesContainer = n }, e("slot", { onSlotchange: this.registerSlides }))), e("div", { class: "lightbox__controls" }, e("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, e("swirl-icon-arrow-left", null)), e("button", { "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, e("swirl-icon-arrow-right", null))), t && e("span", { class: "lightbox__pagination" }, e("span", { "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length)), !this.hideMenu && e("swirl-popover", { animation: "scale-in-y", disableScrollLock: !0, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (n) => this.menu = n }, e("swirl-stack", null, e("div", { class: "lightbox__meta" }, o && e("div", { class: "lightbox__thumbnail" }, e("swirl-thumbnail", { alt: "", src: o })), e("div", { class: "lightbox__file-info" }, e("swirl-text", { truncate: !0, weight: "semibold" }, i), e("swirl-text", { color: "subdued", size: "sm", truncate: !0 }, l))), s && e("swirl-separator", null), e("swirl-action-list", null, this.downloadButtonEnabled && e("swirl-action-list-item", { icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), e("slot", { name: "menu-items" }))))));
+  }
+  get el() {
+    return g(this);
+  }
+};
+_.style = v;
+export {
+  _ as swirl_lightbox
+};

package/dist/{swirl-link.entry.e9747d7e.js → swirl-link.entry.31f69ea0.js}

@@ -1,14 +1,14 @@
-import { r, h as i, H as t } from "./index.d90adc50.js";
-import { c as s } from "./index-267776a4.6beb4f4b.js";
+import { r, h as i, H as t } from "./index.646f8b70.js";
+import { c as s } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";
-const a = ":host{display:inline-flex}:host *{box-sizing:border-box}.link{color:var(--s-interactive-primary-default);line-height:var(--s-line-height-base);text-underline-offset:var(--s-space-4)}.link:hover{color:var(--s-interactive-primary-hovered)}.link:active{color:var(--s-interactive-primary-pressed)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.link{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.link--color-subdued{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-medium);text-decoration:none}.link--color-subdued:hover{color:var(--s-interactive-neutral-hovered)}.link--color-subdued:active{color:var(--s-interactive-neutral-pressed)}", n = a, o = class {
+const n = ":host{display:inline-flex}:host *{box-sizing:border-box}.link{color:var(--s-interactive-primary-default);line-height:var(--s-line-height-base);text-underline-offset:var(--s-space-4)}.link:hover{color:var(--s-interactive-primary-hovered)}.link:active{color:var(--s-interactive-primary-pressed)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.link{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.link--color-subdued{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-medium);text-decoration:none}.link--color-subdued:hover{color:var(--s-interactive-neutral-hovered)}.link--color-subdued:active{color:var(--s-interactive-neutral-pressed)}", o = class {
   constructor(e) {
     r(this, e), this.color = "default", this.href = void 0, this.label = void 0, this.target = void 0;
   }
   render() {
     const e = s("link", `link--color-${this.color}`);
-    return i(t, { key: "bc56b7a8e0f5ea9436c6d823711340b024c65f52" }, i("a", { key: "a292053ba621f38ed881c825224593d364911a40", class: e, href: this.href, part: "link", target: this.target }, this.label));
+    return i(t, null, i("a", { class: e, href: this.href, part: "link", target: this.target }, this.label));
   }
 };
 o.style = n;

package/dist/{swirl-list.entry.34c88bce.js → swirl-list.entry.8c0b71f8.js}

@@ -1,18 +1,18 @@
-import { r as l, h as i, H as r } from "./index.d90adc50.js";
+import { r as l, h as t, H as r } from "./index.646f8b70.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 {
-  constructor(e) {
-    l(this, e);
+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 = class {
+  constructor(i) {
+    l(this, i);
   }
   componentDidRender() {
-    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 />.");
+    Array.from(this.containerEl.children).some((e) => !["UL", "OL"].includes(e.tagName)) && console.warn("[SwirlList] Only ul and ol elements are allowed as direct children of <swirl-list />.");
   }
   render() {
-    return i(r, { key: "af942e651e42dcabccbc4b0fa6943911e2d6748f" }, i("div", { key: "e2e221dfbcd5d131fe6d2fa681292d18a05c5ff7", class: "swirl-list", ref: (e) => this.containerEl = e }, i("slot", { key: "9e2ffcf497d75dcd2b78f68f92927f8cfe491f90" })));
+    return t(r, null, t("div", { class: "swirl-list", ref: (i) => this.containerEl = i }, t("slot", null)));
   }
 };
-o.style = n;
+n.style = s;
 export {
-  o as swirl_list
+  n as swirl_list
 };

package/dist/{swirl-menu-item.entry.cd5f4f83.js → swirl-menu-item.entry.ffa91056.js}

@@ -1,29 +1,29 @@
-import { r, h as i, H as d, g as u } from "./index.d90adc50.js";
-import { c as l } from "./index-267776a4.6beb4f4b.js";
-import { c as h, p as c } from "./utils-aab10c80.240adddc.js";
+import { r as a, h as i, H as u, g as l } from "./index.646f8b70.js";
+import { c as d } from "./index-d280dafb.186cdb0e.js";
+import { c as h, p as c } from "./utils-c5f2f98f.af14538a.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 {
-  constructor(t) {
-    r(this, t), this.onSlotChange = () => {
+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 = class {
+  constructor(e) {
+    a(this, e), this.onSlotChange = () => {
       this.subMenu = this.el.querySelector("swirl-menu"), this.updateActionListItemProps();
     }, this.onActionListItemClick = () => {
       this.actionListItem.disabled || this.rootMenu.activateMenuItem(this.el);
     }, this.onOptionListItemClick = () => {
       this.optionListItem.disabled || this.parentMenu.updateSelection(this.optionListItem);
-    }, this.onOptionListItemKeyDown = (e) => {
-      if (e.code === "Space")
-        e.preventDefault();
-      else if (e.code === "Enter") {
+    }, this.onOptionListItemKeyDown = (t) => {
+      if (t.code === "Space")
+        t.preventDefault();
+      else if (t.code === "Enter") {
         if (this.optionListItem.disabled)
           return;
-        e.preventDefault(), this.parentMenu.updateSelection(this.optionListItem);
+        t.preventDefault(), this.parentMenu.updateSelection(this.optionListItem);
       }
-    }, this.onOptionListItemKeyUp = (e) => {
-      if (e.code === "Space") {
+    }, this.onOptionListItemKeyUp = (t) => {
+      if (t.code === "Space") {
         if (this.optionListItem.disabled)
           return;
-        e.preventDefault(), this.parentMenu.updateSelection(this.optionListItem);
+        t.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;
   }
@@ -43,26 +43,26 @@ 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 a;
-      return s.value === ((a = this.subMenu) == null ? void 0 : a.value);
+    var t, n, o;
+    const e = Boolean((t = this.subMenu) == null ? void 0 : t.value) ? (o = Array.from(((n = this.subMenu) == null ? void 0 : n.querySelectorAll("swirl-menu-item")) || []).find((s) => {
+      var r;
+      return s.value === ((r = this.subMenu) == null ? void 0 : r.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: e, 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 });
   }
   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;
+    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: (t) => this.optionListItem = t, selected: ((e = this.parentMenu) == null ? void 0 : e.value) === this.value, swirlAriaRole: "menuitemradio", value: this.value });
   }
   render() {
-    var e;
-    const t = l("menu-item", {
+    var t;
+    const e = d("menu-item", {
       "menu-item--expanded": this.expanded
     });
-    return i(d, { key: "6bacbda44dfb2e8c25df23c6a7b6cfd9cc6c75cd" }, i("div", { key: "31569eafccaa5686c3b0d28e0fc46532eb89ad56", class: t }, ((e = this.parentMenu) == null ? void 0 : e.variant) === "selection" ? this.renderOptionListItem() : this.renderActionListItem(), i("slot", { key: "a7ab60529890de49a7087e3d8f20e90d4b2a8822", onSlotchange: this.onSlotChange })));
+    return i(u, null, i("div", { class: e }, ((t = this.parentMenu) == null ? void 0 : t.variant) === "selection" ? this.renderOptionListItem() : this.renderActionListItem(), i("slot", { onSlotchange: this.onSlotChange })));
   }
   get el() {
-    return u(this);
+    return l(this);
   }
   static get watchers() {
     return {
@@ -70,7 +70,7 @@ const p = ":host{display:block}:host *{box-sizing:border-box}.menu-item--expande
     };
   }
 };
-f.style = m;
+m.style = p;
 export {
-  f as swirl_menu_item
+  m as swirl_menu_item
 };

package/dist/{swirl-menu.entry.14f87bbe.js → swirl-menu.entry.67d9e63e.js}

@@ -1,12 +1,12 @@
-import { r as d, c, h as o, H as b, g as p } from "./index.d90adc50.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 n, c as l, p as h, i as M, b as x } from "./utils-aab10c80.240adddc.js";
+import { r as d, c as h, h as o, H as p, g as v } from "./index.646f8b70.js";
+import { c as b, a as f, o as w, f as g } from "./floating-ui.dom.esm-b73e243b.647a7c7e.js";
+import { c as M } from "./index-d280dafb.186cdb0e.js";
+import { q as n, c as l, p as m, i as x, b as y } from "./utils-c5f2f98f.af14538a.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 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)}", _ = 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 = () => {
+    d(this, e), this.done = h(this, "done", 7), this.valueChange = h(this, "valueChange", 7), this.mobileMediaQuery = window.matchMedia("(min-width: 768px)"), this.mediaQueryHandler = () => {
       this.updateMobileState();
     }, this.resetMenu = () => {
       this.items.forEach((t) => {
@@ -24,7 +24,7 @@ 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, {
+      !Boolean(t) || !Boolean(this.menuContainer) || (this.position = await b(t, this.menuContainer, {
         placement: "right-start",
         strategy: "fixed",
         middleware: [w({ mainAxis: -10, crossAxis: 0 }), g()]
@@ -55,7 +55,7 @@ const I = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--
     this.updateMobileState(), this.updateLevel(), this.observeSlotChanges();
   }
   componentDidLoad() {
-    this.mobileMediaQuery.onchange = this.mediaQueryHandler, this.parentMenu = l(this.el.parentElement, "swirl-menu"), this.popover = l(this.el, "swirl-popover"), this.rootMenu = h(this.el, "swirl-menu").pop(), Boolean(this.parentMenu) && queueMicrotask(() => {
+    this.mobileMediaQuery.onchange = this.mediaQueryHandler, this.parentMenu = l(this.el.parentElement, "swirl-menu"), this.popover = l(this.el, "swirl-popover"), this.rootMenu = m(this.el, "swirl-menu").pop(), Boolean(this.parentMenu) && queueMicrotask(() => {
       this.active = !1;
     }), this.popover.addEventListener("popoverClose", this.resetMenu), this.updateItems();
   }
@@ -104,7 +104,7 @@ const I = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--
     }), this.observer.observe(this.el, { childList: !0 });
   }
   updateMobileState() {
-    const e = M();
+    const e = x();
     e !== this.mobile && (this.mobile = e);
   }
   updateItems() {
@@ -114,7 +114,7 @@ const I = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--
     ].filter((e) => l(e, "swirl-menu") === this.el);
   }
   updateLevel() {
-    const e = h(this.el.parentNode, "swirl-menu");
+    const e = m(this.el.parentNode, "swirl-menu");
     this.level = e.length;
   }
   focusItem(e) {
@@ -134,25 +134,25 @@ const I = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--
     this.focusItem(i);
   }
   getActiveItemIndex() {
-    const e = x();
+    const e = y();
     return this.items.findIndex((t) => t === e || t === (e == null ? void 0 : e.querySelector('[role="menuitem"]')) || t === (e == null ? void 0 : e.querySelector('[role="menuitemradio"]')));
   }
   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, a = 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, a = e ? "menubar" : "menu", s = M("menu", `menu--level-${this.level}`, {
       "menu--active": this.active,
       "menu--mobile": this.mobile,
       "menu--root": e
     });
-    return o(b, { key: "ff96a7a52b2dbe653c69d8b869c7e3a5fb448753" }, o("div", { key: "4dfdedb79b90291a0dae83a8d8538a82751c5133", class: s }, this.mobile && e && o("div", { key: "227fe10a71505540ad50a299046aa77b351a76b7", class: "menu__mobile-header" }, this.activeLevel === 0 && o("swirl-button", { key: "46f2bb83d9a9cb2932e2b84416e6cb362c841f95", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" }), this.activeLevel > 0 && o("swirl-button", { key: "f12e9f02940b14ccd0f2d2ce358995b51c7f726c", hideLabel: !0, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" }), o("span", { key: "b29303c584e2e6d4869f8cc8c0e8f6eb4dee0c60", class: "menu__title", id: "menu-title" }, o("swirl-heading", { key: "d653d90d77098f075c192e6b648e6719e93152bc", align: "center", as: "span", level: 4, text: this.label, truncate: !0 })), o("swirl-button", { key: "a60f65b5cf8fe99c140ad09e92d7d4b0818d061a", class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone })), o("div", { key: "937e9577ce801f4965b1563c9c276be0fee1e327", "aria-label": t, "aria-labelledby": i, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (m) => this.menuContainer = m, role: a, style: !this.mobile && this.level > 0 ? {
+    return o(p, null, o("div", { class: s }, this.mobile && e && o("div", { class: "menu__mobile-header" }, this.activeLevel === 0 && o("swirl-button", { hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" }), this.activeLevel > 0 && o("swirl-button", { hideLabel: !0, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" }), o("span", { class: "menu__title", id: "menu-title" }, o("swirl-heading", { align: "center", as: "span", level: 4, text: this.label, truncate: !0 })), o("swirl-button", { class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone })), o("div", { "aria-label": t, "aria-labelledby": i, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (c) => this.menuContainer = c, role: a, 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 }, o("slot", { key: "1a5c04bf0d554ca1e02bcf81b741bcbca8f80594" }))));
+    } : void 0 }, o("slot", null))));
   }
   get el() {
-    return p(this);
+    return v(this);
   }
   static get watchers() {
     return {
@@ -160,7 +160,7 @@ const I = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--
     };
   }
 };
-k.style = _;
+_.style = I;
 export {
-  k as swirl_menu
+  _ as swirl_menu
 };