@getflip/swirl-components-react 0.421.0 → 0.422.0

package/dist/swirl-lightbox.entry.0ce3a860.js

@@ -0,0 +1,179 @@
+import { r as b, c, h as i, H as u, g as f } from "./index.bb5b19f3.js";
+import { d as g, e as m } from "./bodyScrollLock.esm-B0kNlhKL.c7a66a82.js";
+import { c as p } from "./index-orsBiyT_.fc4357c3.js";
+import { c as x } from "./focus-trap.esm-DIdMBZfn.c41dd5d8.js";
+import { q as v } from "./utils-wi_3Z3FQ.29a3aebe.js";
+import "react";
+import "react-dom";
+const y = ':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--hide-toolbar .lightbox__toolbar{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__toolbar{pointer-events:auto}.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(e) {
+    b(this, e), this.activeSlideChange = c(this, "activeSlideChange", 7), this.lightboxClose = c(this, "lightboxClose", 7), this.closeButtonLabel = "Close modal", this.downloadButtonEnabled = !0, this.downloadButtonLabel = "Download", this.menuLabel = "Slide options", this.menuTriggerLabel = "Open slide menu", this.nextSlideButtonLabel = "Next slide", this.previousSlideButtonLabel = "Previous slide", this.activeSlideIndex = 0, this.closing = !1, this.isOpen = !1, this.dragging = !1, this.onCloseButtonClick = () => {
+      this.close();
+    }, this.onDownloadButtonClick = () => {
+      var t;
+      (t = this.slides[this.activeSlideIndex]) == null || t.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((t) => t.tagName === "SWIRL-FILE-VIEWER"), this.setSlideAttributes();
+    }, this.onPointerDown = (t) => {
+      this.slides.length <= 1 || (this.dragging = !0, this.dragStartPosition = t instanceof MouseEvent ? t.clientX : t.touches[0].clientX, this.slides.forEach((a) => {
+        a.style.transition = "none";
+      }));
+    }, this.onPointerMove = async (t) => {
+      var n, l;
+      if (!this.dragging)
+        return;
+      const a = !(t instanceof MouseEvent) && t.touches.length > 1, o = (l = (n = this.slides[this.activeSlideIndex]) == null ? void 0 : n.shadowRoot) == null ? void 0 : l.querySelector("swirl-file-viewer-image"), s = Boolean(o) ? await o.getZoom() > 1 : !1;
+      if (a || s)
+        return;
+      t.preventDefault();
+      const r = t instanceof MouseEvent ? t.clientX - this.dragStartPosition : t.touches[0].clientX - this.dragStartPosition;
+      this.slides.forEach((d) => {
+        const h = this.activeSlideIndex * d.getBoundingClientRect().width;
+        this.dragDelta = r, d.style.transform = `translate3d(${(-h + this.dragDelta) / 16}rem, 0, 0)`;
+      });
+    }, this.onPointerUp = () => {
+      if (!this.dragging)
+        return;
+      this.dragging = !1, this.dragStartPosition = void 0;
+      const t = this.dragDelta / this.slides[this.activeSlideIndex].getBoundingClientRect().width;
+      this.dragDelta = 0;
+      const a = t > 0.2, o = t < -0.2;
+      this.slides.forEach((s) => {
+        s.style.transition = "";
+      }), a ? this.onPreviousSlideClick() : o ? this.onNextSlideClick() : this.resetSlidePositions();
+    }, this.onBackdropClick = (t) => {
+      t.target === this.slidesContainer && this.close();
+    }, this.onContextMenu = (t) => {
+      this.downloadButtonEnabled || t.preventDefault();
+    };
+  }
+  componentWillLoad() {
+    this.registerSlides();
+  }
+  componentDidLoad() {
+    this.activateSlide(0);
+  }
+  componentDidRender() {
+    var e;
+    (e = this.focusTrap) == null || e.updateContainerElements(this.modalEl);
+  }
+  disconnectedCallback() {
+    var e, t;
+    (e = this.focusTrap) == null || e.deactivate(), this.unlockBodyScroll(), (t = this.containerObserver) == null || t.disconnect(), this.activateSlideTimeout && clearTimeout(this.activateSlideTimeout), this.closingTimeout && clearTimeout(this.closingTimeout);
+  }
+  watchActiveSlideIndex() {
+    this.activeSlideChange.emit(this.activeSlideIndex);
+  }
+  onKeyDown(e) {
+    !this.isOpen || (e.code === "Escape" ? (e.stopImmediatePropagation(), this.close()) : e.code === "ArrowLeft" ? this.onPreviousSlideClick() : e.code === "ArrowRight" && this.onNextSlideClick());
+  }
+  async open() {
+    this.isOpen = !0, this.lockBodyScroll(), this.activateSlide(this.activeSlideIndex || 0), setTimeout(() => {
+      var e;
+      this.focusTrap = x(this.modalEl, {
+        allowOutsideClick: !0,
+        checkCanFocusTrap: (t) => {
+          var a;
+          return (a = this.containerObserver) == null || a.disconnect(), new Promise((o) => {
+            const s = t[0];
+            if (s.tabIndex !== -1) {
+              o();
+              return;
+            }
+            this.containerObserver = new MutationObserver(() => {
+              s.tabIndex !== -1 && (this.containerObserver.disconnect(), o());
+            }), this.containerObserver.observe(s, {
+              attributes: !0,
+              attributeFilter: ["tabindex"]
+            });
+          });
+        },
+        tabbableOptions: {
+          getShadowRoot: (t) => t.shadowRoot
+        }
+      }), (e = this.focusTrap) == null || e.activate();
+    });
+  }
+  async close() {
+    var e;
+    this.closing || (this.closing = !0, (e = this.focusTrap) == null || e.deactivate(), this.unlockBodyScroll(), this.closingTimeout && (clearTimeout(this.closingTimeout), this.closingTimeout = void 0), this.closingTimeout = setTimeout(() => {
+      this.isOpen = !1, this.resetImageZoom(), this.stopAllMediaPlayers(), this.closing = !1, this.lightboxClose.emit();
+    }, 150));
+  }
+  async activateSlide(e) {
+    var t, a;
+    (a = (t = this.menu) == null ? void 0 : t.close) == null || a.call(t), this.dragging = !1, this.activeSlideIndex = e, 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)`;
+    }), this.activateSlideTimeout && (clearTimeout(this.activateSlideTimeout), this.activateSlideTimeout = void 0), this.activateSlideTimeout = 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((e) => {
+      e.setAttribute("active", "false"), e.setAttribute("aria-label", e.file), e.setAttribute("aria-roledescription", "slide"), e.setAttribute("role", "group"), e.addEventListener("dragstart", (t) => t.preventDefault());
+    });
+  }
+  resetSlidePositions() {
+    this.slides.forEach((e) => {
+      e.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
+    });
+  }
+  getCurrentFileName() {
+    var t;
+    const e = this.slides[this.activeSlideIndex];
+    return (e == null ? void 0 : e.fileName) || ((t = e == null ? void 0 : e.file) == null ? void 0 : t.split("/").pop());
+  }
+  getCurrentFileType() {
+    var e;
+    return (e = this.slides[this.activeSlideIndex]) == null ? void 0 : e.type;
+  }
+  getCurrentThumbnailUrl() {
+    var e;
+    return (e = this.slides[this.activeSlideIndex]) == null ? void 0 : e.thumbnailUrl;
+  }
+  lockBodyScroll() {
+    g(this.el);
+  }
+  unlockBodyScroll() {
+    m(this.el);
+  }
+  getMediaPlayers() {
+    return v(this.el, "video");
+  }
+  stopAllMediaPlayers() {
+    this.getMediaPlayers().forEach((e) => e.pause());
+  }
+  resetImageZoom() {
+    this.slides.forEach((e) => {
+      var a;
+      const t = (a = e == null ? void 0 : e.shadowRoot) == null ? void 0 : a.querySelector("swirl-file-viewer-image");
+      Boolean(t) && t.resetZoom();
+    });
+  }
+  render() {
+    const e = this.slides.length > 1, t = this.getCurrentFileName(), a = this.getCurrentFileType(), o = this.getCurrentThumbnailUrl(), s = Boolean(this.el.querySelector("[slot='menu-items']")) || this.downloadButtonEnabled, r = Boolean(this.el.querySelector("[slot='toolbar']")), n = p("lightbox", {
+      "lightbox--closing": this.closing,
+      "lightbox--hide-menu": !s,
+      "lightbox--hide-toolbar": !r
+    });
+    return i(u, { key: "85eebfe3c8d61a4fa94dbdb58221fc101596739f" }, i("section", { key: "077a8f530aae49878f597878cc62912eec6ece4f", "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: n, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (l) => this.modalEl = l, role: "dialog", tabIndex: this.isOpen ? 0 : -1 }, i("div", { key: "e8e968936dfb71bcc93d87ae1176a011fbb7c935", class: "lightbox__body", role: "document" }, i("header", { key: "f980c233874815ca1db6d0302cb21868ec4e267e", class: "lightbox__header" }, i("button", { key: "f2b272e78f038dac9c5ff7f4cff02169e3a3ddeb", "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, i("swirl-icon-close", { key: "986a2458337c3083b6e73eeb0aa84f112d4d4572" })), i("div", { key: "a2f8fe3de5370d820be1e08529c7b80bb8d361d9", class: "lightbox__toolbar" }, i("slot", { key: "422d159a69b2f35a8354c16aa74625fa9c13c413", name: "toolbar" })), !this.hideMenu && i("swirl-popover-trigger", { key: "b8e7d8eeb83565831913c7f4837db330f35766cb", swirlPopover: this.menu }, i("button", { key: "e21b7437b58477ace93acc5848238e98e74a4ed7", "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, i("swirl-icon-more-vertikal", { key: "3b9450db04e030aec046e70c3c013fd26c255601" })))), i("div", { key: "6ab49eb381bfb3adad8b7bdccf90a5cbf59212bf", "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, i("div", { key: "e11bbf489158b10ef214924063fb3db7fc006e3e", "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (l) => this.slidesContainer = l }, i("slot", { key: "b0b62afa837852b49f911eae26967e6a467b145b", onSlotchange: this.registerSlides }))), i("div", { key: "a6f0aa6cfdc8687fd2ef3b8e4ceb57eb21740b69", class: "lightbox__controls" }, i("button", { key: "73099975122775fe43f5e7c460f8a7d9cad4c993", "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, i("swirl-icon-arrow-left", { key: "f67a11baaa162abcce98d5ef5d27b55b3d00637c" })), i("button", { key: "f502cfa06ee45748154c8090b2b84d981d08b51f", "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, i("swirl-icon-arrow-right", { key: "0bb2381c2c7bcf97ba4ec1db45639b1db43c35a1" }))), e && i("span", { key: "c5b7a83ac0e368e2d1de00ee4f6b64af61bf2a40", class: "lightbox__pagination" }, i("span", { key: "fa7016066eedcde194e7b3d307a50b9ed03343d9", "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length)), !this.hideMenu && i("swirl-popover", { key: "724d1c79484f313b7e57671dcfa48522ba8264ef", animation: "scale-in-y", disableScrollLock: !0, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (l) => this.menu = l }, i("swirl-stack", { key: "af2ad2a14d6d51d84efb5039356f71285d8eb385" }, i("div", { key: "6050dd91081597b95374fe78db6a761aba88b0eb", class: "lightbox__meta" }, o && i("div", { key: "228f4823504d2f13f4d1223c7926c291f9359668", class: "lightbox__thumbnail" }, i("swirl-thumbnail", { key: "60bfffa86c3a35a68eb30cf8ea2068a461f3e67d", alt: "", src: o })), i("div", { key: "7f06818a2ab8aae5442620d5828d9de89be5779a", class: "lightbox__file-info" }, i("swirl-text", { key: "d7ff45395d6aecf154952e69f8d2270ff614a0ed", truncate: !0, weight: "semibold" }, t), i("swirl-text", { key: "d2703a932453e97699c13bcaf4c4f70d0c6853b4", color: "subdued", size: "sm", truncate: !0 }, a))), s && i("swirl-separator", { key: "5df7e178f76d69d5fa110c0f7b1f92ca4192bd49" }), i("swirl-action-list", { key: "1e950dc78994b4672cb4e33b5fd4ee7b686c036c" }, this.downloadButtonEnabled && i("swirl-action-list-item", { key: "212b503af2859b8ef69b933e35e70940015f213e", icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), i("slot", { key: "17340e5ccda745279fdf49237173d22b0da236d0", name: "menu-items" }))))));
+  }
+  get el() {
+    return f(this);
+  }
+  static get watchers() {
+    return {
+      activeSlideIndex: ["watchActiveSlideIndex"]
+    };
+  }
+};
+_.style = y;
+export {
+  _ as swirl_lightbox
+};

package/dist/swirl-link.entry.889f6d36.js

@@ -0,0 +1,17 @@
+import { r as i, h as r, H as t } from "./index.bb5b19f3.js";
+import { c as s } from "./index-orsBiyT_.fc4357c3.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)}", o = class {
+  constructor(e) {
+    i(this, e), this.color = "default";
+  }
+  render() {
+    const e = s("link", `link--color-${this.color}`);
+    return r(t, { key: "040ddaf3ab3c1c05fec6a4a39ffc4057c0014c0f" }, r("a", { key: "f5b666c7d7e22871d44b1f30d67dd6bcb1933acf", class: e, href: this.href, part: "link", target: this.target }, this.label));
+  }
+};
+o.style = a;
+export {
+  o as swirl_link
+};

package/dist/swirl-list.entry.8242f2ba.js

@@ -0,0 +1,18 @@
+import { r as l, h as i, H as r } from "./index.bb5b19f3.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 {
+  constructor(e) {
+    l(this, e);
+  }
+  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 />.");
+  }
+  render() {
+    return i(r, { key: "d525c0da08c48bc5ab1229caf62ea7082ea4b34e" }, i("div", { key: "149d06c8072008e8dbf497b8da7abce70ceace34", class: "swirl-list", ref: (e) => this.containerEl = e }, i("slot", { key: "a5927efade8741a50355f7321d91ee3c84d58e28" })));
+  }
+};
+n.style = s;
+export {
+  n as swirl_list
+};

package/dist/swirl-menu-item.entry.f80d52ca.js

@@ -0,0 +1,84 @@
+import { r, f as l, h as i, H as h, g as u } from "./index.bb5b19f3.js";
+import { c } from "./index-orsBiyT_.fc4357c3.js";
+import { l as d, p } from "./utils-wi_3Z3FQ.29a3aebe.js";
+import "react";
+import "react-dom";
+const m = ":host{display:block}:host *{box-sizing:border-box}.menu-item--expanded ::part(action-list-item){background-color:var(--s-surface-overlay-hovered)}", f = class {
+  constructor(e) {
+    r(this, e), this.intent = "default", this.hasAvatar = !1, 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 = (t) => {
+      if (t.code === "Space")
+        t.preventDefault();
+      else if (t.code === "Enter") {
+        if (this.optionListItem.disabled)
+          return;
+        t.preventDefault(), this.parentMenu.updateSelection(this.optionListItem);
+      }
+    }, this.onOptionListItemKeyUp = (t) => {
+      if (t.code === "Space") {
+        if (this.optionListItem.disabled)
+          return;
+        t.preventDefault(), this.parentMenu.updateSelection(this.optionListItem);
+      }
+    };
+  }
+  componentWillLoad() {
+    this.parentMenu = d(this.el, "swirl-menu"), this.rootMenu = p(this.el, "swirl-menu").pop(), this.subMenu = this.el.querySelector("swirl-menu"), this.updateAvatarState();
+  }
+  watchExpanded() {
+    this.updateActionListItemProps();
+  }
+  async getSubMenu() {
+    return this.subMenu;
+  }
+  async updateValue() {
+    l(this);
+  }
+  async getParentMenu() {
+    return this.parentMenu;
+  }
+  updateActionListItemProps() {
+    !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);
+  }
+  updateAvatarState() {
+    const e = this.el.querySelector('[slot="avatar"]'), t = Boolean(e);
+    t !== this.hasAvatar && (this.hasAvatar = t);
+  }
+  renderActionListItem() {
+    var t, s, a;
+    const e = Boolean((t = this.subMenu) == null ? void 0 : t.value) ? (a = Array.from(((s = this.subMenu) == null ? void 0 : s.querySelectorAll("swirl-menu-item")) || []).find((n) => {
+      var o;
+      return n.value === ((o = this.subMenu) == null ? void 0 : o.value);
+    })) == null ? void 0 : a.label : void 0;
+    return i("swirl-action-list-item", { badge: e, description: this.description, disabled: this.disabled, icon: this.icon, iconBadge: this.iconBadge, intent: this.intent, label: this.label, onClick: this.onActionListItemClick, ref: (n) => this.actionListItem = n, suffix: this.suffix }, this.hasAvatar && i("slot", { name: "avatar", slot: "avatar" }));
+  }
+  renderOptionListItem() {
+    var t;
+    const e = ((t = this.parentMenu) == null ? void 0 : t.value) === this.value;
+    return i("swirl-option-list-item", { disabled: this.disabled, icon: this.icon, iconBadge: this.iconBadge, label: this.label, onClick: this.onOptionListItemClick, onKeyDown: this.onOptionListItemKeyDown, onKeyUp: this.onOptionListItemKeyUp, ref: (s) => this.optionListItem = s, selected: e, swirlAriaRole: "menuitemradio", value: this.value }, this.hasAvatar && i("slot", { name: "avatar", slot: "avatar" }));
+  }
+  render() {
+    var t;
+    const e = c("menu-item", {
+      "menu-item--expanded": this.expanded
+    });
+    return i(h, { key: "30200e6c6f07cbac5f6b1064d71ece543da48db3" }, i("div", { key: "2e904d1143d2ca17351e316794854ac3e36e89fd", class: e }, ((t = this.parentMenu) == null ? void 0 : t.variant) === "selection" ? this.renderOptionListItem() : this.renderActionListItem(), i("slot", { key: "b73de9c2ba24612424e8e0343ba6e05e8311f7bf", onSlotchange: this.onSlotChange })));
+  }
+  get el() {
+    return u(this);
+  }
+  static get watchers() {
+    return {
+      expanded: ["watchExpanded"]
+    };
+  }
+};
+f.style = m;
+export {
+  f as swirl_menu_item
+};

package/dist/swirl-menu.entry.55566aee.js

@@ -0,0 +1,179 @@
+import { r as d, c, h as o, H as b, g as v } from "./index.bb5b19f3.js";
+import { P as p, N as f, D as w, k as g, b as y } from "./floating-ui.dom.browser.min-BtsCuEVE.45e9e353.js";
+import { c as M } from "./index-orsBiyT_.fc4357c3.js";
+import { q as a, l, p as h, i as I, k as x } from "./utils-wi_3Z3FQ.29a3aebe.js";
+import "react";
+import "react-dom";
+const _ = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed)}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile):not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-1);padding:var(--s-space-4)}: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{background-color:var(--s-surface-overlay-default);}", k = class {
+  constructor(e) {
+    d(this, e), this.done = c(this, "done", 7), this.valueChange = c(this, "valueChange", 7), this.active = !0, this.level = 0, this.mobileBackButtonLabel = "Back", this.mobileCloseMenuButtonLabel = "Close menu", this.mobileDoneButtonLabel = "Done", this.variant = "action", this.activeLevel = 0, this.mobileMediaQuery = window.matchMedia("(min-width: 768px)"), this.mediaQueryHandler = () => {
+      this.updateMobileState();
+    }, this.resetMenu = () => {
+      this.items.forEach((t) => {
+        t.tabIndex = -1;
+      }), !(this.level > 0) && setTimeout(() => {
+        this.activeLevel = 0, a(this.el, "swirl-menu").forEach((i) => {
+          i.active = !1, i.parentElement.expanded = !1;
+        });
+      }, this.mobile ? 200 : 60);
+    }, this.closeMenu = () => {
+      this.disableAutoUpdate && this.disableAutoUpdate(), this.swirlPopover.close(), this.resetMenu();
+    }, this.reposition = async () => {
+      if (this.mobile || this.level === 0) {
+        this.position = void 0;
+        return;
+      }
+      const t = this.el.parentElement;
+      !Boolean(t) || !Boolean(this.menuContainer) || requestAnimationFrame(async () => {
+        this.position = await p(t, this.menuContainer, {
+          placement: "right-start",
+          strategy: "fixed",
+          middleware: [w({ mainAxis: -10, crossAxis: 0 }), g(), y()]
+        });
+      });
+    }, this.onKeyDown = (t) => {
+      if (t.code === "ArrowDown")
+        t.preventDefault(), t.stopPropagation(), this.focusNextItem();
+      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;
+        this.rootMenu.activateMenuItem(i);
+      }
+    }, this.onClose = () => {
+      this.closeMenu();
+    }, this.onDone = () => {
+      this.closeMenu(), this.done.emit();
+    }, this.onGoBack = () => {
+      this.rootMenu.goBack();
+    };
+  }
+  componentWillLoad() {
+    this.updateMobileState(), this.updateLevel(), this.observeSlotChanges();
+  }
+  componentDidLoad() {
+    this.mobileMediaQuery.addEventListener("change", this.mediaQueryHandler), this.parentMenu = l(this.el.parentElement, "swirl-menu"), this.swirlPopover = l(this.el, "swirl-popover"), this.rootMenu = h(this.el, "swirl-menu").pop(), Boolean(this.parentMenu) && queueMicrotask(() => {
+      this.active = !1;
+    }), this.swirlPopover.addEventListener("popoverClose", this.resetMenu), this.updateItems();
+  }
+  disconnectedCallback() {
+    var e, t, i, n;
+    (e = this.swirlPopover) == null || e.removeEventListener("popoverClose", this.resetMenu), (i = (t = this.mobileMediaQuery).removeEventListener) == null || i.call(t, "change", this.mediaQueryHandler), (n = this.observer) == null || n.disconnect();
+  }
+  watchActive() {
+    this.reposition(), this.disableAutoUpdate && this.disableAutoUpdate(), this.disableAutoUpdate = f(this.el.parentElement, this.menuContainer, this.reposition);
+  }
+  watchValue() {
+    this.updateActiveItem();
+  }
+  async activateMenuItem(e) {
+    if (Boolean(this.parentMenu))
+      return;
+    const t = await e.getParentMenu();
+    a(this.el, "swirl-menu").filter((s) => s.level >= t.level && s !== t).forEach((s) => {
+      s.active = !1, s.parentElement.expanded = !1;
+    });
+    const n = await e.getSubMenu();
+    !Boolean(n) || (e.expanded = !0, n.active = !0, this.activeLevel = n.level, setTimeout(() => {
+      n.focusFirstItem();
+    }, this.mobile ? 200 : 60));
+  }
+  async close() {
+    this.closeMenu();
+  }
+  async goBack() {
+    if (Boolean(this.parentMenu) || this.activeLevel === 0)
+      return;
+    const t = (a(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), a(this.el, "swirl-menu").filter((s) => s.level > this.activeLevel).forEach((s) => {
+      s.active = !1;
+    }), (a(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(e) {
+    this.focusItem(this.items[e]);
+  }
+  async updateSelection(e) {
+    this.valueChange.emit(e.value);
+  }
+  async updateActiveItem() {
+    a(this.el, "swirl-menu-item").filter((t) => l(t, "swirl-menu") === this.el).forEach((t) => {
+      t.updateValue();
+    }), this.parentMenu && this.parentMenu.variant === "action" && this.parentMenu.updateActiveItem();
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      requestAnimationFrame(() => {
+        this.updateItems();
+      });
+    }), this.observer.observe(this.el, { childList: !0 });
+  }
+  updateMobileState() {
+    const e = I();
+    e !== this.mobile && (this.mobile = e);
+  }
+  updateItems() {
+    this.items = [
+      ...a(this.el, '[role="menuitem"]'),
+      ...a(this.el, '[role="menuitemradio"]')
+    ].filter((e) => l(e, "swirl-menu") === this.el);
+  }
+  updateLevel() {
+    const e = h(this.el.parentNode, "swirl-menu");
+    this.level = e.length;
+  }
+  focusItem(e) {
+    [
+      ...a(this.rootMenu, '[role="menuitem"]'),
+      ...a(this.rootMenu, '[role="menuitemradio"]')
+    ].forEach((i) => {
+      i.tabIndex = -1;
+    }), Boolean(e) && (e.tabIndex = 0, e.focus());
+  }
+  focusNextItem() {
+    const t = (this.getActiveItemIndex() + 1) % this.items.length, i = this.items[t];
+    this.focusItem(i);
+  }
+  focusPreviousItem() {
+    const e = this.getActiveItemIndex(), t = e === 0 ? this.items.length - 1 : e - 1, i = this.items[t];
+    this.focusItem(i);
+  }
+  getActiveItemIndex() {
+    const e = x();
+    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, n = 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: "e82f0ed6771d2a4e0a57d4d86ccdc12dcd55a140" }, o("div", { key: "41a2a9a44e01be2abae3215db54380c1217c14a4", class: s }, this.mobile && e && o("div", { key: "b185a2e8fcd3bdcf927d944aa256fde86824e660", class: "menu__mobile-header" }, this.activeLevel === 0 && o("swirl-button", { key: "5343d6fba63e3a0c31f12a58ac95d7e3c9d5c224", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" }), this.activeLevel > 0 && o("swirl-button", { key: "24b268a706c41ccf67f42e286564a6d8978f37ea", hideLabel: !0, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" }), o("span", { key: "24a7266f29ff496e3976979d8df62bdbeb935057", class: "menu__title", id: "menu-title" }, o("swirl-heading", { key: "0e16bf442dd66fb50f40f28e168919d4f97d5e3c", align: "center", as: "span", level: 4, text: this.label, truncate: !0 })), o("swirl-button", { key: "c015629a25243719f85a32297774eef39febc19f", class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone })), o("div", { key: "39f5b638d7097c9d8418e2319555c8266a44473e", "aria-label": t, "aria-labelledby": i, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (m) => this.menuContainer = m, role: n, style: !this.mobile && this.level > 0 ? {
+      top: Boolean(this.position) ? `${(r = this.position) == null ? void 0 : r.y}px` : "",
+      left: Boolean(this.position) ? `${(u = this.position) == null ? void 0 : u.x}px` : ""
+    } : this.mobile ? {
+      left: e ? `calc(-100% * ${this.activeLevel})` : "100%"
+    } : void 0 }, o("slot", { key: "e9cd98c6be964be86a6b0e631e0d80514276a08e" }))));
+  }
+  get el() {
+    return v(this);
+  }
+  static get watchers() {
+    return {
+      active: ["watchActive"],
+      value: ["watchValue"]
+    };
+  }
+};
+k.style = _;
+export {
+  k as swirl_menu
+};

package/dist/swirl-modal-shell.entry.3ccbc0e6.js

@@ -0,0 +1,51 @@
+import { r as l, c as t, h as s, H as a } from "./index.bb5b19f3.js";
+import { d as i, e as c } from "./bodyScrollLock.esm-B0kNlhKL.c7a66a82.js";
+import { c as r } from "./index-orsBiyT_.fc4357c3.js";
+import { c as n } from "./focus-trap.esm-DIdMBZfn.c41dd5d8.js";
+import { k as d } from "./utils-wi_3Z3FQ.29a3aebe.js";
+import "react";
+import "react-dom";
+const b = `:host{display:block}:host *{box-sizing:border-box}.modal-shell{position:fixed;inset:0;z-index:var(--s-z-40)}.modal-shell__backdrop{position:fixed;inset:0;z-index:1;background-color:var(--s-translucent-medium-default);opacity:1;-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));transition:opacity 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out;transition:opacity 0.3s ease-out, backdrop-filter 0.3s ease-out;transition:opacity 0.3s ease-out, backdrop-filter 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out}.modal-shell__scroll-container{overflow-y:auto;position:fixed;inset:0;z-index:2;display:grid;padding:var(--s-space-24);justify-content:center;align-items:center}.modal-shell__scroll-container__content{opacity:1;transform:scale(1);transition:opacity 0.2s ease-out,
+    transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1)}.modal-shell__close-button{position:fixed;top:var(--s-space-16);right:var(--s-space-16);z-index:3;opacity:1;transform:scale(1);transition:opacity 0.2s ease-out,
+    transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1)}.modal-shell--closing .modal-shell__backdrop{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}.modal-shell--closing .modal-shell__scroll-container__content,.modal-shell--closing .modal-shell__close-button{opacity:0;transform:scale(1.1)}`, p = 300, h = class {
+  constructor(e) {
+    l(this, e), this.closeModal = t(this, "closeModal", 7), this.isClosing = !0, this.onKeyDown = (o) => {
+      o.code === "Escape" && this.close();
+    }, this.onContentClick = (o) => {
+      o.stopPropagation();
+    }, this.onClose = () => {
+      this.close();
+    };
+  }
+  componentDidLoad() {
+    requestAnimationFrame(() => {
+      this.setupFocusTrap(), i(this.modalEl), this.isClosing = !1;
+    });
+  }
+  disconnectedCallback() {
+    var e;
+    (e = this.focusTrap) == null || e.deactivate(), c(this.modalEl);
+  }
+  async close() {
+    this.isClosing = !0, setTimeout(() => {
+      this.closeModal.emit();
+    }, p);
+  }
+  setupFocusTrap() {
+    this.focusTrap = n(this.modalEl, {
+      allowOutsideClick: !0,
+      setReturnFocus: d(),
+      escapeDeactivates: !1
+    }), this.focusTrap.activate();
+  }
+  render() {
+    const e = r("modal-shell", {
+      "modal-shell--closing": this.isClosing
+    });
+    return s(a, { key: "4263f1789e659207c2071279441a5336ce94faf9" }, s("section", { key: "2f52c3f60ed75eb1db7e8c31661211d230f3fabc", "aria-label": this.label, role: "dialog", "aria-modal": "true", class: e, onKeyDown: this.onKeyDown, ref: (o) => this.modalEl = o }, s("div", { key: "738dcc1ac3807f53bc244d865904dcad16116e47", class: "modal-shell__backdrop" }), s("div", { key: "2eebb2a3da0395ee2977175a6fd0e38fb0a845a5", class: "modal-shell__scroll-container", onClick: this.onClose }, s("div", { key: "54b4994163c0342f5d2cabfe60b0e0ff6ae2d1cb", class: "modal-shell__scroll-container__content", onClick: this.onContentClick }, s("slot", { key: "7c6cdede66b241e5f32314f4f7fdd4413bd1850e" }))), s("swirl-button", { key: "11ade4650d270dc26735ce3344c28aa4213ecfdc", class: "modal-shell__close-button", icon: "<swirl-icon-close color='strong'></swirl-icon-close>", label: this.closeButtonLabel, hideLabel: !0, variant: "translucent", onClick: this.onClose })));
+  }
+};
+h.style = b;
+export {
+  h as swirl_modal_shell
+};