@getflip/swirl-components-react 0.80.4 → 0.82.0

package/dist/{swirl-lightbox.entry.f54fdfa9.js → swirl-lightbox.entry.9720ca38.js}

@@ -1,17 +1,17 @@
-import { r as c, h as e, H as u, g } from "./index.1508b8d7.js";
+import { r as c, h as e, H as u, g } from "./index.5a52a569.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 v } from "./utils-bc84f36e.1fee9865.js";
+import { q as f } from "./utils-bc84f36e.1fee9865.js";
 import "react";
 import "react-dom";
-const f = ':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.6)}}.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__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 {
+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.6)}}.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__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.mediaPlayers = [], this.onCloseButtonClick = () => {
       this.close();
     }, this.onDownloadButtonClick = () => {
       var i;
-      (i = this.slides[this.activeSlideIndex]) === null || i === void 0 || i.download(), this.menu.close();
+      (i = this.slides[this.activeSlideIndex]) == null || i.download(), this.menu.close();
     }, this.onKeyDown = (i) => {
       i.code === "Escape" ? this.close() : i.code === "ArrowLeft" ? this.onPreviousSlideClick() : i.code === "ArrowRight" && this.onNextSlideClick();
     }, this.onNextSlideClick = () => {
@@ -21,29 +21,29 @@ const f = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:
     }, this.registerSlides = () => {
       this.slides = Array.from(this.el.children).filter((i) => i.tagName === "SWIRL-FILE-VIEWER"), this.setSlideAttributes(), this.updateMediaPlayers();
     }, this.onPointerDown = (i) => {
-      this.dragging = !0, this.dragStartPosition = i instanceof MouseEvent ? i.clientX : i.touches[0].clientX, this.slides.forEach((s) => {
-        s.style.transition = "none";
+      this.dragging = !0, this.dragStartPosition = i instanceof MouseEvent ? i.clientX : i.touches[0].clientX, this.slides.forEach((o) => {
+        o.style.transition = "none";
       });
     }, this.onPointerMove = async (i) => {
-      var s, o;
-      const l = !(i instanceof MouseEvent) && i.touches.length > 1, n = (o = (s = this.slides[this.activeSlideIndex]) === null || s === void 0 ? void 0 : s.shadowRoot) === null || o === void 0 ? void 0 : o.querySelector("swirl-file-viewer-image"), r = Boolean(n) ? await n.getZoom() > 1 : !1;
-      if (!(l || r) && this.dragging) {
+      var n, a;
+      const o = !(i instanceof MouseEvent) && i.touches.length > 1, s = (a = (n = this.slides[this.activeSlideIndex]) == null ? void 0 : n.shadowRoot) == null ? void 0 : a.querySelector("swirl-file-viewer-image"), l = Boolean(s) ? await s.getZoom() > 1 : !1;
+      if (!(o || l) && this.dragging) {
         i.preventDefault();
         const d = i instanceof MouseEvent ? i.clientX - this.dragStartPosition : i.touches[0].clientX - this.dragStartPosition;
-        this.slides.forEach((a) => {
-          const h = this.activeSlideIndex * a.getBoundingClientRect().width;
-          this.dragDelta = d, a.style.transform = `translate3d(${(-h + this.dragDelta) / 16}rem, 0, 0)`;
+        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 s = i > 0.2, o = i < -0.2;
+      const o = i > 0.2, s = i < -0.2;
       this.slides.forEach((l) => {
         l.style.transition = "";
-      }), s ? this.onPreviousSlideClick() : o ? this.onNextSlideClick() : this.resetSlidePositions();
-    }, this.closeButtonLabel = "Close modal", this.downloadButtonLabel = "Download", 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;
+      }), o ? this.onPreviousSlideClick() : s ? this.onNextSlideClick() : this.resetSlidePositions();
+    }, this.closeButtonLabel = "Close modal", 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();
@@ -53,7 +53,7 @@ const f = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:
   }
   disconnectedCallback() {
     var t;
-    (t = this.modal) === null || t === void 0 || t.destroy(), this.unlockBodyScroll();
+    (t = this.modal) == null || t.destroy(), this.unlockBodyScroll();
   }
   async open() {
     this.modal.show(), this.lockBodyScroll(), this.activateSlide(this.activeSlideIndex || 0);
@@ -64,12 +64,12 @@ const f = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:
     }, 150));
   }
   async activateSlide(t) {
-    var i, s;
-    (s = (i = this.menu) === null || i === void 0 ? void 0 : i.close) === null || s === void 0 || s.call(i), this.dragging = !1, this.activeSlideIndex = t, this.slides.forEach((o, l) => {
-      l === this.activeSlideIndex ? (o.removeAttribute("aria-hidden"), o.setAttribute("active", "true")) : l === this.activeSlideIndex - 1 || l === 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)`;
+    var i, o;
+    (o = (i = this.menu) == null ? void 0 : i.close) == null || o.call(i), this.dragging = !1, this.activeSlideIndex = t, this.slides.forEach((s, l) => {
+      l === this.activeSlideIndex ? (s.removeAttribute("aria-hidden"), s.setAttribute("active", "true")) : l === this.activeSlideIndex - 1 || l === 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, l) => {
-        l !== this.activeSlideIndex && l !== this.activeSlideIndex - 1 && l !== this.activeSlideIndex + 1 && o.setAttribute("active", "false");
+      this.slides.forEach((s, l) => {
+        l !== this.activeSlideIndex && l !== this.activeSlideIndex - 1 && l !== this.activeSlideIndex + 1 && s.setAttribute("active", "false");
       });
     }, 300), this.stopAllMediaPlayers(), this.updateMediaPlayers(), this.resetImageZoom();
   }
@@ -85,15 +85,15 @@ const f = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:
   }
   getCurrentFileName() {
     var t, i;
-    return (i = (t = this.slides[this.activeSlideIndex]) === null || t === void 0 ? void 0 : t.file) === null || i === void 0 ? void 0 : i.split("/").pop();
+    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 || t === void 0 ? void 0 : t.type;
+    return (t = this.slides[this.activeSlideIndex]) == null ? void 0 : t.type;
   }
   getCurrentThumbnailUrl() {
     var t;
-    return (t = this.slides[this.activeSlideIndex]) === null || t === void 0 ? void 0 : t.thumbnailUrl;
+    return (t = this.slides[this.activeSlideIndex]) == null ? void 0 : t.thumbnailUrl;
   }
   lockBodyScroll() {
     m(this.el);
@@ -102,7 +102,7 @@ const f = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:
     p(this.el);
   }
   updateMediaPlayers() {
-    const t = v(this.el, "video");
+    const t = f(this.el, "video");
     this.mediaPlayers = t;
   }
   stopAllMediaPlayers() {
@@ -110,22 +110,22 @@ const f = ':host{display:block}:host *{box-sizing:border-box}.lightbox{position:
   }
   resetImageZoom() {
     this.slides.forEach((t) => {
-      var i;
-      const s = (i = t == null ? void 0 : t.shadowRoot) === null || i === void 0 ? void 0 : i.querySelector("swirl-file-viewer-image");
-      Boolean(s) && s.resetZoom();
+      var o;
+      const i = (o = t == null ? void 0 : t.shadowRoot) == null ? void 0 : o.querySelector("swirl-file-viewer-image");
+      Boolean(i) && i.resetZoom();
     });
   }
   render() {
-    const t = this.slides.length > 1, i = this.getCurrentFileName(), s = this.getCurrentFileType(), o = this.getCurrentThumbnailUrl(), l = x("lightbox", {
+    const t = this.slides.length > 1, i = this.getCurrentFileName(), o = this.getCurrentFileType(), s = this.getCurrentThumbnailUrl(), l = x("lightbox", {
       "lightbox--closing": this.closing
     });
-    return e(u, null, e("section", { "aria-hidden": "true", "aria-label": this.label, class: l, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onKeyDown: this.onKeyDown, 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)), e("swirl-popover-trigger", { popover: 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" }, 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)), 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 }, s))), e("swirl-separator", null), e("swirl-action-list", null, e("swirl-action-list-item", { icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), e("slot", { name: "menu-items" }))))));
+    return e(u, null, e("section", { "aria-hidden": "true", "aria-label": this.label, class: l, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onKeyDown: this.onKeyDown, 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", { popover: 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" }, 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" }, s && e("div", { class: "lightbox__thumbnail" }, e("swirl-thumbnail", { alt: "", src: s })), e("div", { class: "lightbox__file-info" }, e("swirl-text", { truncate: !0, weight: "semibold" }, i), e("swirl-text", { color: "subdued", size: "sm", truncate: !0 }, o))), e("swirl-separator", null), e("swirl-action-list", null, 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 = f;
+_.style = v;
 export {
   _ as swirl_lightbox
 };

package/dist/{swirl-link.entry.0b28f686.js → swirl-link.entry.4d8929c8.js}

@@ -1,4 +1,4 @@
-import { r, h as i, H as t } from "./index.1508b8d7.js";
+import { r, h as i, H as t } from "./index.5a52a569.js";
 import { c as s } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-list.entry.89b874ba.js → swirl-list.entry.cc60e5b5.js}

@@ -1,4 +1,4 @@
-import { r as l, h as t, H as r } from "./index.1508b8d7.js";
+import { r as l, h as t, H as r } from "./index.5a52a569.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 = class {

package/dist/{swirl-menu-item.entry.0008121e.js → swirl-menu-item.entry.168fa030.js}

@@ -1,4 +1,4 @@
-import { r as a, h as i, H as l, g as u } from "./index.1508b8d7.js";
+import { r as a, h as i, H as l, g as u } from "./index.5a52a569.js";
 import { c as d, p as h } from "./utils-bc84f36e.1fee9865.js";
 import { c } from "./index-d280dafb.186cdb0e.js";
 import "react";
@@ -43,23 +43,23 @@ 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, t, n;
-    const r = Boolean((e = this.subMenu) === null || e === void 0 ? void 0 : e.value) ? (n = Array.from(((t = this.subMenu) === null || t === void 0 ? void 0 : t.querySelectorAll("swirl-menu-item")) || []).find((s) => {
-      var o;
-      return s.value === ((o = this.subMenu) === null || o === void 0 ? void 0 : o.value);
-    })) === null || n === void 0 ? void 0 : n.label : void 0;
-    return i("swirl-action-list-item", { badge: r, description: this.description, disabled: this.disabled, icon: this.icon, intent: this.intent, label: this.label, onClick: this.onActionListItemClick, ref: (s) => this.actionListItem = s });
+    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: e, description: this.description, disabled: this.disabled, icon: this.icon, intent: this.intent, label: this.label, onClick: this.onActionListItemClick, ref: (s) => this.actionListItem = s });
   }
   renderOptionListItem() {
     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 || e === void 0 ? void 0 : e.value) === this.value, swirlAriaRole: "menuitemradio", value: this.value });
+    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 = c("menu-item", {
+    var t;
+    const e = c("menu-item", {
       "menu-item--expanded": this.expanded
     });
-    return i(l, null, i("div", { class: t }, ((e = this.parentMenu) === null || e === void 0 ? void 0 : e.variant) === "selection" ? this.renderOptionListItem() : this.renderActionListItem(), i("slot", { onSlotchange: this.onSlotChange })));
+    return i(l, 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);

package/dist/{swirl-menu.entry.7eac0c60.js → swirl-menu.entry.21c3f6a1.js}

@@ -1,16 +1,16 @@
-import { r as d, c as r, h as o, H as v, g as p } from "./index.1508b8d7.js";
+import { r as d, c as h, h as o, H as p, g as v } from "./index.5a52a569.js";
 import { c as b, a as f, o as w, f as g } from "./floating-ui.dom.esm-ac7cc24e.79b318e4.js";
 import { c as M } from "./index-d280dafb.186cdb0e.js";
-import { q as n, c as l, p as u, i as x, a as y } from "./utils-bc84f36e.1fee9865.js";
+import { q as n, c as l, p as m, i as x, a as y } from "./utils-bc84f36e.1fee9865.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)}", _ = class {
-  constructor(t) {
-    d(this, t), this.done = r(this, "done", 7), this.valueChange = r(this, "valueChange", 7), this.mobileMediaQuery = window.matchMedia("(min-width: 768px)"), this.mediaQueryHandler = () => {
+  constructor(e) {
+    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((e) => {
-        e.tabIndex = -1;
+      this.items.forEach((t) => {
+        t.tabIndex = -1;
       }), !(this.level > 0) && setTimeout(() => {
         this.activeLevel = 0, n(this.el, "swirl-menu").forEach((i) => {
           i.active = !1, i.parentElement.expanded = !1;
@@ -23,21 +23,21 @@ const I = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--
         this.position = void 0;
         return;
       }
-      const e = this.el.parentElement;
-      !Boolean(e) || !Boolean(this.menuContainer) || (this.position = await b(e, this.menuContainer, {
+      const t = this.el.parentElement;
+      !Boolean(t) || !Boolean(this.menuContainer) || (this.position = await b(t, this.menuContainer, {
         placement: "right-start",
         strategy: "fixed",
         middleware: [w({ mainAxis: -10, crossAxis: 0 }), g()]
       }));
-    }, this.onKeyDown = (e) => {
-      if (e.code === "ArrowDown")
-        e.preventDefault(), e.stopPropagation(), this.focusNextItem();
-      else if (e.code === "ArrowUp")
-        e.preventDefault(), e.stopPropagation(), this.focusPreviousItem();
-      else if (e.code === "ArrowLeft")
-        e.preventDefault(), e.stopPropagation(), this.rootMenu.goBack();
-      else if (e.code === "ArrowRight") {
-        e.preventDefault();
+    }, this.onKeyDown = (t) => {
+      if (t.code === "ArrowDown")
+        t.preventDefault(), t.stopPropagation(), this.focusNextItem();
+      else if (t.code === "ArrowUp")
+        t.preventDefault(), t.stopPropagation(), this.focusPreviousItem();
+      else if (t.code === "ArrowLeft")
+        t.preventDefault(), t.stopPropagation(), this.rootMenu.goBack();
+      else if (t.code === "ArrowRight") {
+        t.preventDefault();
         const i = l(this.items[this.getActiveItemIndex()], "swirl-menu-item");
         if (!Boolean(i))
           return;
@@ -55,26 +55,26 @@ 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 = u(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();
   }
   disconnectedCallback() {
-    var t, e, i;
-    this.popover.removeEventListener("popoverClose", this.resetMenu), (e = (t = this.mobileMediaQuery).removeEventListener) === null || e === void 0 || e.call(t, "change", this.mediaQueryHandler), (i = this.observer) === null || i === void 0 || i.disconnect();
+    var e, t, i;
+    this.popover.removeEventListener("popoverClose", this.resetMenu), (t = (e = this.mobileMediaQuery).removeEventListener) == null || t.call(e, "change", this.mediaQueryHandler), (i = this.observer) == null || i.disconnect();
   }
   watchActive() {
     this.reposition(), this.disableAutoUpdate && this.disableAutoUpdate(), this.disableAutoUpdate = f(this.el.parentElement, this.menuContainer, this.reposition);
   }
-  async activateMenuItem(t) {
+  async activateMenuItem(e) {
     if (Boolean(this.parentMenu))
       return;
-    const e = await t.getParentMenu();
-    n(this.el, "swirl-menu").filter((s) => s.level >= e.level && s !== e).forEach((s) => {
+    const t = await e.getParentMenu();
+    n(this.el, "swirl-menu").filter((s) => s.level >= t.level && s !== t).forEach((s) => {
       s.active = !1, s.parentElement.expanded = !1;
     });
-    const a = await t.getSubMenu();
-    !Boolean(a) || (t.expanded = !0, a.active = !0, this.activeLevel = a.level, setTimeout(() => {
+    const a = await e.getSubMenu();
+    !Boolean(a) || (e.expanded = !0, a.active = !0, this.activeLevel = a.level, setTimeout(() => {
       a.focusFirstItem();
     }, this.mobile ? 200 : 60));
   }
@@ -84,19 +84,19 @@ const I = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--
   async goBack() {
     if (Boolean(this.parentMenu) || this.activeLevel === 0)
       return;
-    const e = (n(this.el, "swirl-menu").find((s) => s.level === this.activeLevel && s.active) || this.rootMenu).parentElement;
-    e.expanded = !1, this.activeLevel = Math.max(this.activeLevel - 1, 0), n(this.el, "swirl-menu").filter((s) => s.level > this.activeLevel).forEach((s) => {
+    const t = (n(this.el, "swirl-menu").find((s) => s.level === this.activeLevel && s.active) || this.rootMenu).parentElement;
+    t.expanded = !1, this.activeLevel = Math.max(this.activeLevel - 1, 0), n(this.el, "swirl-menu").filter((s) => s.level > this.activeLevel).forEach((s) => {
       s.active = !1;
-    }), (n(this.el, "swirl-menu").find((s) => s.level === this.activeLevel && s.active) || this.rootMenu).focusItemAtIndex(Array.from(e.parentElement.children).indexOf(e));
+    }), (n(this.el, "swirl-menu").find((s) => s.level === this.activeLevel && s.active) || this.rootMenu).focusItemAtIndex(Array.from(t.parentElement.children).indexOf(t));
   }
   async focusFirstItem() {
     this.focusItem(this.items[0]);
   }
-  async focusItemAtIndex(t) {
-    this.focusItem(this.items[t]);
+  async focusItemAtIndex(e) {
+    this.focusItem(this.items[e]);
   }
-  async updateSelection(t) {
-    this.valueChange.emit(t.value);
+  async updateSelection(e) {
+    this.valueChange.emit(e.value);
   }
   observeSlotChanges() {
     this.observer = new MutationObserver(() => {
@@ -104,55 +104,55 @@ const I = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--
     }), this.observer.observe(this.el, { childList: !0 });
   }
   updateMobileState() {
-    const t = x();
-    t !== this.mobile && (this.mobile = t);
+    const e = x();
+    e !== this.mobile && (this.mobile = e);
   }
   updateItems() {
     this.items = [
       ...n(this.el, '[role="menuitem"]'),
       ...n(this.el, '[role="menuitemradio"]')
-    ].filter((t) => l(t, "swirl-menu") === this.el);
+    ].filter((e) => l(e, "swirl-menu") === this.el);
   }
   updateLevel() {
-    const t = u(this.el.parentNode, "swirl-menu");
-    this.level = t.length;
+    const e = m(this.el.parentNode, "swirl-menu");
+    this.level = e.length;
   }
-  focusItem(t) {
+  focusItem(e) {
     [
       ...n(this.rootMenu, '[role="menuitem"]'),
       ...n(this.rootMenu, '[role="menuitemradio"]')
     ].forEach((i) => {
       i.tabIndex = -1;
-    }), Boolean(t) && (t.tabIndex = 0, t.focus());
+    }), Boolean(e) && (e.tabIndex = 0, e.focus());
   }
   focusNextItem() {
-    const e = (this.getActiveItemIndex() + 1) % this.items.length, i = this.items[e];
+    const t = (this.getActiveItemIndex() + 1) % this.items.length, i = this.items[t];
     this.focusItem(i);
   }
   focusPreviousItem() {
-    const t = this.getActiveItemIndex(), e = t === 0 ? this.items.length - 1 : t - 1, i = this.items[e];
+    const e = this.getActiveItemIndex(), t = e === 0 ? this.items.length - 1 : e - 1, i = this.items[t];
     this.focusItem(i);
   }
   getActiveItemIndex() {
-    const t = y();
-    return this.items.findIndex((e) => e === t || e === (t == null ? void 0 : t.querySelector('[role="menuitem"]')) || e === (t == null ? void 0 : t.querySelector('[role="menuitemradio"]')));
+    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 t, e;
-    const i = !Boolean(this.parentMenu), a = i && this.mobile ? void 0 : this.label, s = i && this.mobile ? "menu-title" : void 0, h = i ? "menubar" : "menu", m = M("menu", `menu--level-${this.level}`, {
+    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 = M("menu", `menu--level-${this.level}`, {
       "menu--active": this.active,
       "menu--mobile": this.mobile,
-      "menu--root": i
+      "menu--root": e
     });
-    return o(v, null, o("div", { class: m }, this.mobile && i && 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": a, "aria-labelledby": s, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (c) => this.menuContainer = c, role: h, style: !this.mobile && this.level > 0 ? {
-      top: Boolean(this.position) ? `${(t = this.position) === null || t === void 0 ? void 0 : t.y}px` : "",
-      left: Boolean(this.position) ? `${(e = this.position) === null || e === void 0 ? void 0 : e.x}px` : ""
+    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: i ? `calc(-100% * ${this.activeLevel})` : "100%"
+      left: e ? `calc(-100% * ${this.activeLevel})` : "100%"
     } : void 0 }, o("slot", null))));
   }
   get el() {
-    return p(this);
+    return v(this);
   }
   static get watchers() {
     return {