@getflip/swirl-components-react 0.458.0 → 0.459.0-beta-20260310180954

package/dist/swirl-image-grid-item.entry.07e4e488.js

@@ -0,0 +1,93 @@
+import { r as l, c as d, h as t, F as m, H as c, g as h } from "./index.87f660ce.js";
+import { c as b } from "./index-orsBiyT_.fc4357c3.js";
+import { d as u } from "./utils-CCck-DTo.e4e43b6a.js";
+import "react";
+import "react-dom";
+const f = () => ':host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:only-child) button.image-grid-item:focus-visible:before,:host(:only-child) button.image-grid-item:focus-visible:after{border-radius:var(--s-border-radius-sm)}:host([data-sibling-count="2"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="2"]:nth-child(1)) button.image-grid-item:focus-visible:after,:host([data-sibling-count="3"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="2"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="2"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm);border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="3"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="3"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(4)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(4)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus{outline:none}button.image-grid-item:focus-visible:before{position:absolute;z-index:3;border:0.125rem solid var(--s-focus-default);content:"";inset:0}button.image-grid-item:focus-visible:after{position:absolute;z-index:2;border:0.1875rem solid var(--s-background-default);content:"";inset:0}.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--has-watermark .image-grid-item__watermark{display:inline-flex}.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%;transition:opacity 0.3s ease-in;opacity:0;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__watermark{position:absolute;z-index:1;top:var(--s-space-8);right:var(--s-space-8);display:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;pointer-events:none}.image-grid-item__watermark ::slotted(img){width:3rem;height:auto;pointer-events:none}.image-grid-item--loaded .image-grid-item__image{opacity:1}.image-grid-item__loading-placeholder{display:inline-flex;width:100%;height:100%}.image-grid-item__icon{position:absolute;z-index:1;top:50%;left:50%;display:flex;width:3rem;height:3rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);transform:translate3d(-50%, -50%, 0)}.image-grid-item__icon ::part(icon){width:2rem;height:2rem}.image-grid-item__gif-control-button{position:absolute;z-index:2;top:50%;left:50%;transition:opacity 0.2s;transform:translate3d(-50%, -50%, 0);opacity:0}.image-grid-item:hover>.image-grid-item__gif-control-button,.image-grid-item:focus-within>.image-grid-item__gif-control-button,.image-grid-item--gif-paused>.image-grid-item__gif-control-button{opacity:1}.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__skeleton{position:absolute;z-index:3;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}', p = class {
+  constructor(i) {
+    l(this, i), this.gifStarted = d(this, "gifStarted", 7), this.gifStopped = d(this, "gifStopped", 7), this.imageError = d(this, "imageError", 7), this.imageLoad = d(this, "imageLoad", 7), this.gifPauseLabel = "Pause GIF playback", this.gifPlayLabel = "Continue GIF playback", this.error = !1, this.loaded = !1, this.inViewport = !1, this.gifPaused = !1, this.handleIntersectionEntries = u((e) => {
+      const r = [...e].sort((s, n) => s.time - n.time);
+      this.inViewport = r.at(-1).isIntersecting, this.inViewport || (this.loaded = !1);
+    }, 250), this.onLoad = () => {
+      this.error = !1, this.loaded = !0, this.imageLoad.emit();
+    }, this.onError = () => {
+      this.loaded = !0, this.error = !0, this.imageError.emit();
+    }, this.playGif = () => {
+      this.gifPaused = !1, this.computedSrc = this.src, this.gifStarted.emit();
+    }, this.handleControlClick = (e) => {
+      e.stopImmediatePropagation(), this.gifPaused ? this.playGif() : this.pauseGif();
+    }, this.onImageElementUpdate = (e) => {
+      var r, s;
+      (r = this.img) == null || r.removeEventListener("load", this.onLoad), (s = this.img) == null || s.removeEventListener("error", this.onError), this.img = e, this.img && (this.img.addEventListener("load", this.onLoad), this.img.addEventListener("error", this.onError));
+    };
+  }
+  async play() {
+    this.playGif();
+  }
+  async pause() {
+    this.pauseGif();
+  }
+  watchSrcProp() {
+    this.computedSrc = this.src, this.gifPaused = !1;
+  }
+  componentWillLoad() {
+    this.computedSrc = this.src;
+  }
+  componentDidLoad() {
+    var i;
+    this.setupIntersectionObserver(), (i = this.img) != null && i.complete && (this.loaded = !0);
+  }
+  componentDidRender() {
+    var i;
+    ((i = this.img) == null ? void 0 : i.complete) && !this.loaded && (this.loaded = !0);
+  }
+  disconnectedCallback() {
+    var i, e, r;
+    (i = this.intersectionObserver) == null || i.disconnect(), this.computedSrc = "", (e = this.img) == null || e.removeEventListener("load", this.onLoad), (r = this.img) == null || r.removeEventListener("error", this.onError);
+  }
+  setupIntersectionObserver() {
+    this.loading === "intersecting" && (this.intersectionObserver = new IntersectionObserver((i) => {
+      this.handleIntersectionEntries(i);
+    }), this.intersectionObserver.observe(this.el));
+  }
+  async pauseGif() {
+    const i = this.img, e = await this.readImageFromCanvas(i.src);
+    this.gifPaused = !0, this.computedSrc = e, this.gifStopped.emit();
+  }
+  readImageFromCanvas(i) {
+    return new Promise((e, r) => {
+      const s = new Image();
+      s.src = i, s.onload = (n) => {
+        const o = n.target, a = document.createElement("canvas"), g = a.getContext("2d");
+        a.width = o.width, a.height = o.height, g.drawImage(o, 0, 0, o.width, o.height), e(a.toDataURL("image/jpeg"));
+      }, s.onerror = () => r();
+    });
+  }
+  render() {
+    var o, a;
+    const i = this.interactive ? "button" : "div", e = this.gifPaused || this.loading !== "intersecting" || this.inViewport, r = (a = Math.min((o = this.el.parentElement) == null ? void 0 : o.children.length, 4)) != null ? a : 1, s = !!this.el.querySelector('[slot="watermark"]'), n = b("image-grid-item", {
+      "image-grid-item--has-error": this.error,
+      "image-grid-item--has-overlay": this.overlay,
+      "image-grid-item--has-watermark": s,
+      "image-grid-item--loaded": this.loaded,
+      "image-grid-item--gif-paused": this.gifPaused
+    });
+    return t(c, { key: "f348cf788af1081c90dc820e8e03662c1c8984b0", "data-sibling-count": r, role: "listitem" }, t(i, { key: "ef088dd7d18f025d91d4572a45c05f368c2d757a", class: n, type: this.interactive ? "button" : void 0 }, t("div", { key: "70bae8daed6879a3c9a69d2188024b8877df285e", class: "image-grid-item__background", style: {
+      backgroundImage: e ? `url(${this.computedSrc})` : void 0
+    } }), e ? t(m, null, t("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : void 0, ref: this.onImageElementUpdate, src: this.computedSrc }), t("span", { class: "image-grid-item__watermark" }, t("slot", { name: "watermark" }))) : t("div", { class: "image-grid-item__loading-placeholder" }, t("swirl-visually-hidden", null, this.alt)), this.showGifControls && t("swirl-button", { key: "4443d5a1c96135ae4d6363c28551ffa7e585ed73", class: "image-grid-item__gif-control-button", label: this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel, icon: "<swirl-icon-gif></swirl-icon-gif>", variant: "on-image", pill: !0, hideLabel: !0, swirlAriaLabel: this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel, onClick: this.handleControlClick }), this.loaded && !this.error && this.icon && !Boolean(this.overlay) && t("div", { key: "001eb15d1b240fe9b1aa006f0e20a028ad9d39d5", class: "image-grid-item__icon", innerHTML: this.icon }), this.overlay && t("div", { key: "c2803440a07484249e2ba97cea279083f182b8e9", class: "image-grid-item__overlay" }, this.overlay), !this.loaded && t("swirl-skeleton-box", { key: "e62faecf492ef3f0db1b1e18ce6c9c3779dd51f0", class: "image-grid-item__skeleton", height: "100%", width: "100%", borderRadius: "none" }), this.loaded && this.error && t("div", { key: "d945b32d319ba3c493262f81ca2c8f6d29f9c14a", class: "image-grid-item__error" }, t("swirl-icon-error", { key: "4e99958f018cfb0f3a172f9774a3809685889624", color: "critical" }))));
+  }
+  get el() {
+    return h(this);
+  }
+  static get watchers() {
+    return {
+      src: [{
+        watchSrcProp: 0
+      }]
+    };
+  }
+};
+p.style = f();
+export {
+  p as swirl_image_grid_item
+};

package/dist/swirl-image-grid.entry.9d484d65.js

@@ -0,0 +1,51 @@
+import { r, h as t, H as a, g as c } from "./index.87f660ce.js";
+import { c as o } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const d = () => ":host{display:block}:host *{box-sizing:border-box}.image-grid{display:grid;overflow:hidden;width:100%;min-height:0;border-radius:var(--s-border-radius-sm);gap:var(--s-space-2)}.image-grid--item-count-1{grid-template-columns:100%;grid-template-rows:100%}.image-grid--item-count-2{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2))}.image-grid--item-count-3{grid-template-columns:calc(100% / 3 * 2) calc(       100% / 3 - var(--s-space-2) / 2     );grid-template-rows:calc(50% - var(--s-space-2) / 2)}.image-grid--item-count-3 ::slotted(*:nth-child(1)){grid-column-start:1;grid-row-start:1;grid-row-end:3}.image-grid--item-count-3 ::slotted(*:nth-child(3)){grid-column-start:2}.image-grid--item-count-4{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2));grid-template-rows:repeat(2, calc(50% - var(--s-space-2) / 2))}", l = [
+  "xs",
+  "sm",
+  "base",
+  "l",
+  "xl"
+], m = class {
+  constructor(e) {
+    r(this, e), this.borderRadius = "sm", this.items = [], this.updateItems = () => {
+      this.items = Array.from(this.el.children), this.items.forEach((s) => {
+        s.overlay = void 0;
+      }), this.items.length > 4 && (this.items[3].overlay = `+${this.items.length - 3}`);
+    }, this.caculateAspectRatio = () => {
+      if (this.aspectRatio)
+        return this.aspectRatio;
+      switch (this.items.length) {
+        case 1:
+          return "1";
+        case 2:
+          return "2/1";
+        case 3:
+          return "3/2";
+        case 4:
+          return "1";
+        default:
+          return "1";
+      }
+    };
+  }
+  componentWillLoad() {
+    this.updateItems();
+  }
+  render() {
+    const e = o("image-grid", `image-grid--item-count-${Math.min(4, this.items.length)}`), i = {
+      aspectRatio: this.caculateAspectRatio(),
+      borderRadius: l.includes(this.borderRadius) ? `var(--s-border-radius-${this.borderRadius})` : this.borderRadius
+    };
+    return t(a, { key: "3b81e39cbd2a616ae6733f492ddcc5e43876b771" }, t("div", { key: "cb7281952cd17d128e78341828ff7041246544f7", "aria-label": this.label, class: e, role: "list", style: i }, t("slot", { key: "5a813f03f58e2da6ee52991fe9f371ce9ec1b650", onSlotchange: this.updateItems })));
+  }
+  get el() {
+    return c(this);
+  }
+};
+m.style = d();
+export {
+  m as swirl_image_grid
+};

package/dist/swirl-inline-notification.entry.1785ac82.js

@@ -0,0 +1,17 @@
+import { r as e, h as i, H as t } from "./index.87f660ce.js";
+import { c as a } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const o = () => ":host{display:block}:host *{box-sizing:border-box}.inline-notification{display:flex;max-width:100%;padding:var(--s-space-12);gap:var(--s-space-8)}@media (min-width: 768px){.inline-notification{padding:var(--s-space-16)}}.inline-notification--border-radius-xs{border-radius:var(--s-border-radius-xs)}.inline-notification--border-radius-sm{border-radius:var(--s-border-radius-sm)}.inline-notification--intent-info{background-color:var(--s-surface-info-subdued)}.inline-notification--intent-info .inline-notification__icon{color:var(--s-icon-info)}.inline-notification--intent-critical{background-color:var(--s-surface-critical-subdued)}.inline-notification--intent-critical .inline-notification__icon{color:var(--s-icon-critical)}.inline-notification--intent-warning{background-color:var(--s-surface-warning-subdued)}.inline-notification--intent-warning .inline-notification__icon{color:var(--s-icon-warning)}.inline-notification--intent-success{background-color:var(--s-surface-success-subdued)}.inline-notification--intent-success .inline-notification__icon{color:var(--s-icon-success)}.inline-notification__icon{display:inline-flex;flex-shrink:0}.inline-notification__content{position:relative;top:0.0625rem;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}", s = class {
+  constructor(n) {
+    e(this, n), this.importance = "status", this.intent = "info", this.borderRadius = "sm";
+  }
+  render() {
+    const n = a("inline-notification", `inline-notification--intent-${this.intent}`, `inline-notification--border-radius-${this.borderRadius}`);
+    return i(t, { key: "6c377949621dc304a11a14bb7f0e9db54e246902" }, i("div", { key: "78a4b795fc57a40e7eb9c519c439d487e0a78ae5", "aria-describedby": "content", class: n, role: this.importance, tabIndex: 0 }, i("span", { key: "6bbc6b03ac452be9240736cc30825f35a7c6778b", "aria-hidden": "true", class: "inline-notification__icon" }, this.intent === "critical" && i("swirl-icon-error", { key: "c097b433ad5e20f0f414090e2eaaf2323f4819e6", size: 20 }), this.intent === "success" && i("swirl-icon-check-circle", { key: "8d0a92ec575a1452e9260b0a90145a0892452ff5", size: 20 }), this.intent === "warning" && i("swirl-icon-warning", { key: "64e20557d8b75c5d46341a2d2982bbbbe2e2c0b2", size: 20 }), this.intent === "info" && i("swirl-icon-info", { key: "669588377f3f01a002ff74aa88d9cb520a18d98b", size: 20 })), i("span", { key: "e62dfc990cb0d826a6286caa85393538d8205585", class: "inline-notification__content", id: "content" }, this.hideHeading && i("swirl-visually-hidden", { key: "191a6ed184f9fcd8f93fee3f9e643f49f973cad0" }, this.heading) || i("swirl-text", { key: "276d3a855f24ca6e80953d71510b79a74ba6079f", class: "inline-notification__heading", size: "sm", weight: "semibold" }, this.heading), i("slot", { key: "a33eb16969bb74c7b9811581b0332e26e0581aa5" }))));
+  }
+};
+s.style = o();
+export {
+  s as swirl_inline_notification
+};

package/dist/swirl-inline-status.entry.c7ca829f.js

@@ -0,0 +1,37 @@
+import { r as e, h as s, H as a } from "./index.87f660ce.js";
+import { c as o } from "./index-orsBiyT_.fc4357c3.js";
+import { D as r } from "./media-query.service-CCYT6DU8.f0931fdc.js";
+import "react";
+import "react-dom";
+import "./utils-CCck-DTo.e4e43b6a.js";
+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-neutral{color:var(--s-text-subdued)}.inline-status--intent-neutral .inline-status__icon{color:var(--s-icon-default)}.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(i) {
+    e(this, i), this.size = "m", this.iconSize = 20, this.mediaQueryUnsubscribe = () => {
+    };
+  }
+  componentDidLoad() {
+    this.mediaQueryUnsubscribe = r.subscribe((i) => {
+      this.forceIconProps(i);
+    });
+  }
+  disconnectedCallback() {
+    this.mediaQueryUnsubscribe();
+  }
+  forceIconProps(i) {
+    if (!Boolean(this.iconEl))
+      return;
+    const t = this.iconEl.children[0];
+    if (!Boolean(t))
+      return;
+    let n = "24";
+    this.size === "s" ? n = "16" : i && (n = "20"), t.setAttribute("size", n);
+  }
+  render() {
+    const i = o("inline-status", `inline-status--intent-${this.intent}`, `inline-status--size-${this.size}`);
+    return s(a, { key: "b18d7de74d9dd5d223809565649d49c8de9e132c" }, s("span", { key: "4959ca5eedd286da17c05bd4ed553213543070c9", class: i, part: "inline-status" }, this.icon && s("span", { key: "77620374c0be91ee501d3913cc846355f7cd3242", class: "inline-status__icon", innerHTML: this.icon, ref: (t) => this.iconEl = t }), s("span", { key: "e7688ed698e410df00a8aa2bf9a40f3e0ede7f2f", class: "inline-status__message" }, this.message)));
+  }
+};
+c.style = l();
+export {
+  c as swirl_inline_status
+};

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

@@ -0,0 +1,152 @@
+import { r as b, c as r, h as o, H as u, g as f } from "./index.87f660ce.js";
+import { d as x, e as m } from "./bodyScrollLock.esm-B0kNlhKL.c7a66a82.js";
+import { c as p } from "./index-orsBiyT_.fc4357c3.js";
+import { t as h } from "./index.esm-DBTxpXCn.fccbd562.js";
+import { q as v } from "./utils-CCck-DTo.e4e43b6a.js";
+import "react";
+import "react-dom";
+const S = () => ":host{display:block}:host *{box-sizing:border-box}.lightbox{--swirl-lightbox-view-height:100vh;position:fixed;z-index:var(--s-z-40);display:block;overflow:visible;width:auto;max-width:none;height:var(--swirl-lightbox-view-height);max-height:none;margin:0;padding:0;border:none;background-color:rgba(0, 0, 0, 1);inset:0}.lightbox::backdrop{display:none}.lightbox:not([open]){display:none}@supports (height: 100dvh){.lightbox{--swirl-lightbox-view-height:100dvh}}@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__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);align-items:flex-start;pointer-events:none;gap:var(--s-space-12);justify-content:space-between}.lightbox__header .lightbox__close-button{order:-1}@media (min-width: 768px){.lightbox__header{justify-content:flex-end}.lightbox__header .lightbox__close-button{order:unset}}.lightbox__toolbar{display:flex;align-items:center;pointer-events:auto;gap:var(--s-space-12)}.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__download-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__download-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.lightbox__close-button,.lightbox__download-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{width:2.25rem;height:2.25rem}}.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}}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}", _ = class {
+  constructor(t) {
+    b(this, t), this.activeSlideChange = r(this, "activeSlideChange", 7), this.lightboxClose = r(this, "lightboxClose", 7), this.closeButtonLabel = "Close modal", this.downloadButtonEnabled = !0, this.downloadButtonLabel = "Download", this.nextSlideButtonLabel = "Next slide", this.previousSlideButtonLabel = "Previous slide", this.activeSlideIndex = 0, this.closing = !1, this.opening = !1, this.dragging = !1, this.onKeyDown = (e) => {
+      e.code === "Escape" ? (e.stopImmediatePropagation(), e.preventDefault(), this.close()) : e.code === "ArrowLeft" ? this.onPreviousSlideClick() : e.code === "ArrowRight" && this.onNextSlideClick();
+    }, this.preventDragStart = (e) => {
+      e.preventDefault();
+    }, this.onCloseButtonClick = () => {
+      this.close();
+    }, this.onDownloadButtonClick = () => {
+      var e;
+      (e = this.slides[this.activeSlideIndex]) == null || e.download();
+    }, this.onNextSlideClick = () => {
+      var e;
+      this.activateSlide(Math.min(this.slides.length - 1, this.activeSlideIndex + 1)), this.activeSlideIndex === this.slides.length - 1 && (this.slides.length > 1 ? this.previousSlideButton.focus() : (e = h(this.modalEl).at(0)) == null || e.focus());
+    }, this.onPreviousSlideClick = () => {
+      var e;
+      this.activateSlide(Math.max(0, this.activeSlideIndex - 1)), this.activeSlideIndex === 0 && (this.slides.length > 1 ? this.nextSlideButton.focus() : (e = h(this.modalEl).at(0)) == null || e.focus());
+    }, this.registerSlides = () => {
+      this.removeSlideListeners(), this.slides = Array.from(this.el.children).filter((e) => e.tagName === "SWIRL-FILE-VIEWER"), this.setSlideAttributes();
+    }, this.onPointerDown = (e) => {
+      this.slides.length <= 1 || (this.dragging = !0, this.dragStartPosition = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX, this.slides.forEach((i) => {
+        i.style.transition = "none";
+      }));
+    }, this.onPointerMove = async (e) => {
+      var a, n;
+      if (!this.dragging)
+        return;
+      const i = !(e instanceof MouseEvent) && e.touches.length > 1, s = (n = (a = this.slides[this.activeSlideIndex]) == null ? void 0 : a.shadowRoot) == null ? void 0 : n.querySelector("swirl-file-viewer-image"), l = Boolean(s) ? await s.getZoom() > 1 : !1;
+      if (i || l)
+        return;
+      e.preventDefault();
+      const c = e instanceof MouseEvent ? e.clientX - this.dragStartPosition : e.touches[0].clientX - this.dragStartPosition;
+      this.slides.forEach((d) => {
+        const g = this.activeSlideIndex * d.getBoundingClientRect().width;
+        this.dragDelta = c, d.style.transform = `translate3d(${(-g + this.dragDelta) / 16}rem, 0, 0)`;
+      });
+    }, this.onPointerUp = () => {
+      if (!this.dragging)
+        return;
+      this.dragging = !1, this.dragStartPosition = void 0;
+      const e = this.dragDelta / this.slides[this.activeSlideIndex].getBoundingClientRect().width;
+      this.dragDelta = 0;
+      const i = e > 0.2, s = e < -0.2;
+      this.slides.forEach((l) => {
+        l.style.transition = "";
+      }), i ? this.onPreviousSlideClick() : s ? this.onNextSlideClick() : this.resetSlidePositions();
+    }, this.onBackdropClick = (e) => {
+      e.target === this.slidesContainer && this.close();
+    }, this.onContextMenu = (e) => {
+      this.downloadButtonEnabled || e.preventDefault();
+    };
+  }
+  componentWillLoad() {
+    this.registerSlides();
+  }
+  componentDidLoad() {
+    this.ensureOpening(), this.setDialogCustomProps(), this.activateSlide(0);
+  }
+  disconnectedCallback() {
+    var t;
+    this.unlockBodyScroll(), this.removeSlideListeners(), this.activateSlideTimeout && clearTimeout(this.activateSlideTimeout), this.closingTimeout && clearTimeout(this.closingTimeout), (t = this.modalEl) != null && t.open && this.modalEl.close();
+  }
+  watchActiveSlideIndex() {
+    this.activeSlideChange.emit(this.activeSlideIndex);
+  }
+  async open() {
+    this.opening = !0, this.modalEl && (this.modalEl.showModal(), this.lockBodyScroll(), this.activateSlide(this.activeSlideIndex || 0));
+  }
+  async close() {
+    this.closing || (this.closing = !0, this.unlockBodyScroll(), this.closingTimeout && (clearTimeout(this.closingTimeout), this.closingTimeout = void 0), this.closingTimeout = setTimeout(() => {
+      this.resetImageZoom(), this.stopAllMediaPlayers(), this.modalEl.close(), this.closing = !1, this.lightboxClose.emit();
+    }, 150));
+  }
+  async activateSlide(t) {
+    this.dragging = !1, this.activeSlideIndex = t, this.slides.forEach((e, i) => {
+      i === this.activeSlideIndex ? (e.removeAttribute("aria-hidden"), e.setAttribute("active", "true")) : i === this.activeSlideIndex - 1 || i === this.activeSlideIndex + 1 ? (e.setAttribute("aria-hidden", "true"), e.setAttribute("active", "true")) : e.setAttribute("aria-hidden", "true"), e.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
+    }), this.activateSlideTimeout && (clearTimeout(this.activateSlideTimeout), this.activateSlideTimeout = void 0), this.activateSlideTimeout = setTimeout(() => {
+      this.slides.forEach((e, i) => {
+        i !== this.activeSlideIndex && i !== this.activeSlideIndex - 1 && i !== this.activeSlideIndex + 1 && e.setAttribute("active", "false");
+      });
+    }, 300), this.stopAllMediaPlayers(), this.resetImageZoom();
+  }
+  ensureOpening() {
+    var t;
+    this.opening && !((t = this.modalEl) != null && t.open) && this.open();
+  }
+  setDialogCustomProps() {
+    this.modalEl.setAttribute("closedby", "none");
+  }
+  setSlideAttributes() {
+    this.slides.forEach((t) => {
+      t.setAttribute("active", "false"), t.setAttribute("aria-label", t.file), t.setAttribute("aria-roledescription", "slide"), t.setAttribute("role", "group"), t.addEventListener("dragstart", this.preventDragStart);
+    });
+  }
+  removeSlideListeners() {
+    var t;
+    (t = this.slides) == null || t.forEach((e) => {
+      e.removeEventListener("dragstart", this.preventDragStart);
+    });
+  }
+  resetSlidePositions() {
+    this.slides.forEach((t) => {
+      t.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
+    });
+  }
+  lockBodyScroll() {
+    x(this.el);
+  }
+  unlockBodyScroll() {
+    m(this.el);
+  }
+  getMediaPlayers() {
+    return v(this.el, "video");
+  }
+  stopAllMediaPlayers() {
+    this.getMediaPlayers().forEach((t) => t.pause());
+  }
+  resetImageZoom() {
+    this.slides.forEach((t) => {
+      var i;
+      const e = (i = t == null ? void 0 : t.shadowRoot) == null ? void 0 : i.querySelector("swirl-file-viewer-image");
+      Boolean(e) && e.resetZoom();
+    });
+  }
+  render() {
+    const t = this.slides.length > 1, e = p("lightbox", {
+      "lightbox--closing": this.closing
+    });
+    return o(u, { key: "62c8db99ebe82c31e7cab670b992f20c74e1a18e" }, o("dialog", { key: "2676b054a26e0c5235144986c128e5c624903d97", "aria-label": this.label, class: e, id: "lightbox", onKeyDown: this.onKeyDown, onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (i) => this.modalEl = i }, o("div", { key: "3d64899fecd95d03a2685f11c8fa45acf22daa17", class: "lightbox__body", role: "document" }, o("header", { key: "1a824d13f93bd1edfe698178ea9f314ff1362abb", class: "lightbox__header" }, o("div", { key: "98413a7d23d256f3e1d9193c647ae2f59f3d22c3", class: "lightbox__toolbar" }, o("slot", { key: "f55c04028ac9aa2d7e7ef4946b9036bf7cac728b", name: "toolbar" }), this.downloadButtonEnabled && o("button", { key: "daf803e370c689e345b3e8ae6d7c70a67f385ebd", "aria-label": this.downloadButtonLabel, class: "lightbox__download-button", onClick: this.onDownloadButtonClick, type: "button" }, o("swirl-icon-download", { key: "7b8a561f787128fa61552293f8dd1c608f9aa642" }))), o("button", { key: "7958f1712ae562b49c4d4068cfa2859482d6b444", "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick, type: "button" }, o("swirl-icon-close", { key: "1585c10ef1b6aaae671fdec07d8303e0b5e5ef7f" }))), o("div", { key: "bff2cb500f41e79712a3e9ace4d961d40ebe12d9", "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, o("div", { key: "2f37a4308b4530c9e93f1eb6631cf15fce915b04", "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (i) => this.slidesContainer = i }, o("slot", { key: "061fc89252bf0452bdfd39869ce5e083de219767", onSlotchange: this.registerSlides }))), o("div", { key: "e270b237033d14621f514150ee1d6034e5c2fa04", class: "lightbox__controls" }, o("button", { key: "4a6207645208fb5fe8ae269dd5d64768de873830", "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick, ref: (i) => this.previousSlideButton = i }, o("swirl-icon-arrow-left", { key: "8eef87185fd36602985568d42f24203a61a91dd7" })), o("button", { key: "c9bbac8b913fb23d68124e2e7430c736093ce919", "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick, ref: (i) => this.nextSlideButton = i }, o("swirl-icon-arrow-right", { key: "7216e75fedecea8737efec7bf044e14a01d9cebf" }))), t && o("span", { key: "dacc96c3cd3d7357d4e33947b3a7273d85e246c9", class: "lightbox__pagination" }, o("span", { key: "1ef6ab612b1b360d5f960188ee26382f64835e43", "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))));
+  }
+  get el() {
+    return f(this);
+  }
+  static get watchers() {
+    return {
+      activeSlideIndex: [{
+        watchActiveSlideIndex: 0
+      }]
+    };
+  }
+};
+_.style = S();
+export {
+  _ as swirl_lightbox
+};

package/dist/swirl-link.entry.1b941db4.js

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

package/dist/swirl-list.entry.4beab63c.js

@@ -0,0 +1,18 @@
+import { r as l, h as i, H as r } from "./index.87f660ce.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: "c58ed0c48b7ede29247f4c5d1bf3e6ec7ef7241c" }, i("div", { key: "9f8a9eca41196e9db07442c126749c77f656a710", class: "swirl-list", ref: (e) => this.containerEl = e }, i("slot", { key: "e905936098c8d5b4a4b53d2df64c87c304e77cfe" })));
+  }
+};
+n.style = s();
+export {
+  n as swirl_list
+};

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

@@ -0,0 +1,86 @@
+import { r, f as l, h as i, H as h, g as u } from "./index.87f660ce.js";
+import { c } from "./index-orsBiyT_.fc4357c3.js";
+import { l as d, m as p } from "./utils-CCck-DTo.e4e43b6a.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-state-hovered)}", b = class {
+  constructor(e) {
+    r(this, e), this.intent = "default", this.truncateLabel = !0, 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, truncateLabel: this.truncateLabel, 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, truncateLabel: this.truncateLabel, 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: "306bb34aa985405e1df06e7da8299b878471ee23" }, i("div", { key: "a0c757be1c147549db3b150882ae759e050291f8", class: e }, ((t = this.parentMenu) == null ? void 0 : t.variant) === "selection" ? this.renderOptionListItem() : this.renderActionListItem(), i("slot", { key: "f57badb48777802fec5122b92b6a5e0456d59abf", onSlotchange: this.onSlotChange })));
+  }
+  get el() {
+    return u(this);
+  }
+  static get watchers() {
+    return {
+      expanded: [{
+        watchExpanded: 0
+      }]
+    };
+  }
+};
+b.style = m();
+export {
+  b as swirl_menu_item
+};