@getflip/swirl-components-react 0.466.2 → 0.467.0

package/dist/swirl-popover_2.entry.bc88ac57.js

@@ -0,0 +1,274 @@
+import { r as v, c, h as n, H as g, g as u } from "./index.e6e0951d.js";
+import { o as d, f as w, c as y, a as E, s as x } from "./floating-ui.dom-CLsTbQHn.fe95e3a6.js";
+import { d as k, e as A } from "./bodyScrollLock.esm-B0kNlhKL.c7a66a82.js";
+import { c as C } from "./index-orsBiyT_.fc4357c3.js";
+import { t as T } from "./index.esm-DBTxpXCn.fccbd562.js";
+import { i as p, o as L, k as P, q as h } from "./utils-CCck-DTo.e4e43b6a.js";
+import "react";
+import "react-dom";
+const B = () => ':host{position:relative;z-index:var(--s-z-40);display:contents}:host *{box-sizing:border-box}.popover{border:none;padding:0;margin:0}.popover::backdrop{display:none}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--placement-bottom .popover__content,.popover--placement-bottom-start .popover__content,.popover--placement-right .popover__content,.popover--placement-right-start .popover__content{transform-origin:top left}}@media (min-width: 768px){.popover--placement-bottom-end .popover__content,.popover--placement-left .popover__content,.popover--placement-left-start .popover__content{transform-origin:top right}}@media (min-width: 768px){.popover--placement-top .popover__content,.popover--placement-top-start .popover__content,.popover--placement-right-end .popover__content{transform-origin:bottom left}}@media (min-width: 768px){.popover--placement-top-end .popover__content,.popover--placement-left-end .popover__content{transform-origin:bottom right}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover--translucent .popover__content{background-color:transparent;outline:var(--s-border-width-default) solid       var(--s-border-translucent-outline)}.popover--translucent .popover__content:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));border-radius:inherit}.popover--translucent .popover__handle{background-color:var(--s-border-on-translucent)}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;border-radius:var(       --swirl-popover-border-radius,       var(--s-border-radius-base)     );max-width:22.5rem;animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}', O = ["xs", "sm", "base", "l", "xl"], H = class {
+  constructor(t) {
+    v(this, t), this.popoverClose = c(this, "popoverClose", 7), this.popoverOpen = c(this, "popoverOpen", 7), this.animation = "scale-in-xy", this.enableFlip = !0, this.maxHeight = "22rem", this.offset = 8, this.padded = !0, this.placement = "bottom-start", this.returnFocusToTrigger = !0, this.translucent = !0, this.borderRadius = "base", this.active = !1, this.closing = !1, this.componentLoaded = !1, this.togglePopover = (e) => {
+      e.stopPropagation(), this.active ? this.close() : this.open();
+    }, this.onKeydown = (e) => {
+      e.code === "Escape" && this.active && (e.stopImmediatePropagation(), e.stopPropagation(), this.close());
+    }, this.reposition = async () => {
+      const e = p();
+      if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer))
+        return;
+      if (e) {
+        this.position = void 0;
+        return;
+      }
+      const o = typeof this.offset == "number" ? { mainAxis: this.offset, crossAxis: 0 } : { mainAxis: this.offset[0], crossAxis: this.offset[1] }, r = L("--s-space-16"), i = x({
+        padding: {
+          left: r,
+          right: r
+        }
+      }), s = this.enableFlip ? [d(o), i, w()] : [d(o), i];
+      this.position = await y(this.triggerEl, this.contentContainer, {
+        middleware: s,
+        placement: this.placement,
+        strategy: "fixed"
+      });
+    }, this.onCloseButtonClick = () => {
+      this.close();
+    };
+  }
+  connectedCallback() {
+    this.componentLoaded && this.connectTrigger();
+  }
+  componentDidLoad() {
+    this.connectTrigger(), this.updateTriggerAttributes(), Boolean(this.trigger) && console.warn('[Swirl] The "trigger" prop of swirl-popover is deprecated and will be removed with the next major release. Please use the swirl-popover-trigger component instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlpopovertrigger--docs'), this.componentLoaded = !0;
+  }
+  disconnectedCallback() {
+    var t, e;
+    this.unlockBodyScroll(), (t = this.disableAutoUpdate) == null || t.call(this), this.disableAutoUpdate = void 0, (e = this.triggerEl) == null || e.removeEventListener("click", this.togglePopover);
+  }
+  onWindowFocusIn(t) {
+    var l;
+    if (!this.active)
+      return;
+    const e = /^((?!chrome|android).)*safari/i.test(navigator.userAgent), o = "webkit" in window, r = e || o, i = t.target, s = t.relatedTarget, a = P(), m = ["SWIRL-TAB"], f = !this.el.contains(i) && !this.el.contains(a), b = i !== this.triggerEl && !((l = this.triggerEl) != null && l.contains(i)), _ = r && !this.el.contains(s || i) && s !== this.el;
+    !m.includes(i.tagName) && f && b && (!r || _) && this.close();
+  }
+  onWindowBlur() {
+    if (!this.active || this.closing)
+      return;
+    const t = document.activeElement;
+    t && ["IFRAME"].includes(t.tagName) && this.close();
+  }
+  onWindowClick(t) {
+    if (!this.active || this.closing)
+      return;
+    const e = t.target, o = this.el.contains(e), r = t.composedPath().some((s) => Boolean(s) && s instanceof Node ? this.el.contains(s) : !1), i = e === this.triggerEl || this.triggerEl.contains(e) || t.composedPath().includes(this.triggerEl);
+    !o && !r && !i && this.close();
+  }
+  async close(t) {
+    var e;
+    this.closing || !this.active || (this.popoverClose.emit(), this.disableAutoUpdate && this.disableAutoUpdate(), this.closing = !0, setTimeout(() => {
+      var o;
+      (o = this.popoverEl) == null || o.hidePopover(), this.active = !1, this.closing = !1, this.position = void 0, this.updateTriggerAttributes(this.openedVia), this.openedVia = void 0;
+    }, 150), this.unlockBodyScroll(), this.returnFocusToTrigger && !t && ((e = this.getNativeTriggerElement()) == null || e.focus()));
+  }
+  async open(t, e, o) {
+    if (this.triggerEl = t || this.triggerEl, this.active || !Boolean(this.triggerEl))
+      return;
+    this.adjustWidth(), this.position = void 0, this.active = !0, this.openedVia = o, this.updateTriggerAttributes(o);
+    const r = this.getFocusableChildren();
+    requestAnimationFrame(async () => {
+      var i;
+      (i = this.popoverEl) == null || i.showPopover(), await this.reposition(), this.popoverOpen.emit({ position: this.position }), r.length > 0 && !e ? r[0].focus() : e || this.contentContainer.focus(), this.disableAutoUpdate && this.disableAutoUpdate(), this.disableAutoUpdate = E(this.triggerEl, this.contentContainer, () => this.reposition()), this.scrollContainer.scrollTop = 0, this.lockBodyScroll();
+    });
+  }
+  async isOpen() {
+    return this.active && !this.closing;
+  }
+  async toggle(t, e) {
+    this.active ? this.close() : this.open(t, void 0, e);
+  }
+  connectTrigger() {
+    if (!Boolean(this.trigger)) {
+      this.triggerEl = void 0;
+      return;
+    }
+    this.triggerEl = typeof this.trigger == "string" ? h(this.triggerContainer || document.body, `#${this.trigger}`)[0] : this.trigger, Boolean(this.triggerEl) && this.triggerEl.addEventListener("click", this.togglePopover);
+  }
+  getNativeTriggerElement() {
+    return T(this.triggerEl, {
+      includeContainer: !0,
+      getShadowRoot: !0
+    }).at(0);
+  }
+  updateTriggerAttributes(t) {
+    if (!Boolean(this.triggerEl))
+      return;
+    const e = this.getNativeTriggerElement();
+    !Boolean(e) || (t !== "hover" ? (e.setAttribute("aria-controls", this.el.id), e.setAttribute("aria-expanded", String(this.active))) : (e.removeAttribute("aria-controls"), e.removeAttribute("aria-expanded")), e.setAttribute("aria-haspopup", "dialog"));
+  }
+  getFocusableChildren() {
+    return h(this.el, '[role="menuitem"], [role="menuitemradio"], [role="option"]');
+  }
+  adjustWidth() {
+    let t = this.useContainerWidth;
+    [!0, "true"].includes(this.useContainerWidth) ? t = !0 : [!1, "false"].includes(this.useContainerWidth) && (t = !1);
+    const e = !window.matchMedia("(min-width: 768px)").matches;
+    if (Boolean(t) && !e) {
+      const o = typeof t == "string" ? this.el.closest(t) || this.el.parentElement : this.el.parentElement;
+      this.contentContainer.style.maxWidth = "none", this.contentContainer.style.width = o.getBoundingClientRect().width + "px";
+    } else
+      this.contentContainer.style.maxWidth = "", this.contentContainer.style.width = "";
+  }
+  lockBodyScroll() {
+    !p() || this.disableScrollLock || !Boolean(this.scrollContainer) || k(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    !p() || this.disableScrollLock || !Boolean(this.scrollContainer) || A(this.scrollContainer);
+  }
+  render() {
+    var r, i, s;
+    const t = !window.matchMedia("(min-width: 768px)").matches, e = O.includes(this.borderRadius) ? `var(--s-border-radius-${this.borderRadius})` : this.borderRadius, o = C("popover", `popover--animation-${this.animation}`, `popover--placement-${(r = this.position) == null ? void 0 : r.placement}`, {
+      "popover--active": this.active,
+      "popover--closing": this.closing,
+      "popover--fullscreen-bottom-sheet": this.fullscreenBottomSheet,
+      "popover--inactive": !this.active,
+      "popover--translucent": this.translucent && !this.transparent,
+      "popover--transparent": this.transparent,
+      "popover--padded": this.padded
+    });
+    return n(g, { key: "a80c6ab14e2e70ba4d29ea82bc1bca3291251089" }, n("div", { key: "689569619b91fb51fb9166a91cb9ee55619c0822", popover: "manual", class: o, onKeyDown: this.onKeydown, ref: (a) => this.popoverEl = a }, n("div", { key: "fbe6667ca314478a062de5b8a82850a4dc50df86", "aria-hidden": this.active ? "false" : "true", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (a) => this.contentContainer = a, style: {
+      top: Boolean(this.position) ? `${(i = this.position) == null ? void 0 : i.y}px` : "",
+      left: Boolean(this.position) ? `${(s = this.position) == null ? void 0 : s.x}px` : "",
+      opacity: this.active && !this.position && !t ? "0" : void 0,
+      "--swirl-popover-border-radius": e
+    }, tabindex: "-1" }, n("span", { key: "5cd291a04435a1cdd4917b32b4576b0e22bcc640", class: "popover__handle" }), n("div", { key: "7c9b2cfbe1c4e2c3413b2f91cf64092f622ab4d5", class: "popover__scroll-container", part: "popover__scroll-container", ref: (a) => this.scrollContainer = a, style: {
+      maxHeight: !t && Boolean(this.maxHeight) ? this.maxHeight : void 0
+    } }, n("slot", { key: "6f1229f263f0599cfbdaed29b28971765cd55256" }))), this.active && n("div", { key: "75970a4d4940eb63b7c5af033f920c4faad0f566", class: "popover__backdrop", onClick: this.onCloseButtonClick })));
+  }
+  get el() {
+    return u(this);
+  }
+};
+H.style = B();
+const R = () => ".sc-swirl-popover-trigger-h{display:contents}", S = class {
+  constructor(t) {
+    v(this, t), this.hidePopoverWhenInvisible = !0, this.setAriaAttributes = !0, this.triggerOnClick = !0, this.triggerOnHover = !1, this.componentLoaded = !1, this.triggerIsActive = !1, this.popoverMouseEnter = () => {
+      this.stopHoverLingerTimer();
+    }, this.popoverMouseLeave = () => {
+      this.triggerIsActive && this.mouseleaveHandler();
+    }, this.onMouseenter = () => {
+      !this.triggerOnHover || (this.stopHoverLingerTimer(), this.triggerIsActive = !0, this.hoverDelayReference = setTimeout(() => {
+        this.hoverDelayReference = void 0, this.triggerOnHover && this.mouseenterHandler();
+      }, this.hoverDelay));
+    }, this.mouseenterHandler = () => {
+      const e = this.getPopoverEl(), o = this.getTriggerEl();
+      e.open(o, !0, "hover"), e.addEventListener("popoverOpen", () => {
+        this.updateTriggerElAriaAttributes(!0);
+      }, { once: !0 }), e.addEventListener("popoverClose", () => {
+        this.updateTriggerElAriaAttributes(!1);
+      }, { once: !0 });
+    }, this.onMouseleave = () => {
+      clearTimeout(this.hoverDelayReference), this.mouseleaveHandler();
+    }, this.mouseleaveHandler = () => {
+      !this.triggerOnHover || this.startHoverLingerTimer();
+    }, this.onClick = () => {
+      if (!this.triggerOnClick)
+        return;
+      const e = this.getPopoverEl(), o = this.getTriggerEl();
+      e.toggle(o, "click"), e.addEventListener("popoverOpen", () => {
+        this.updateTriggerElAriaAttributes(!0);
+      }, { once: !0 }), e.addEventListener("popoverClose", () => {
+        this.updateTriggerElAriaAttributes(!1);
+      }, { once: !0 });
+    }, this.updateTriggerElAriaAttributes = (e) => {
+      var i;
+      if (!this.setAriaAttributes)
+        return;
+      const o = this.getTriggerEl();
+      if (!Boolean(o))
+        return;
+      const r = (i = this.getPopoverEl()) == null ? void 0 : i.id;
+      o.tagName.startsWith("SWIRL-") ? (this.triggerOnHover ? (o.removeAttribute("swirl-aria-controls"), o.removeAttribute("swirl-aria-expanded")) : (o.setAttribute("swirl-aria-controls", r), o.setAttribute("swirl-aria-expanded", String(e || "false"))), o.setAttribute("swirl-aria-haspopup", "dialog")) : (this.triggerOnHover ? (o.removeAttribute("aria-controls"), o.removeAttribute("aria-expanded")) : (o.setAttribute("aria-controls", r), o.setAttribute("aria-expanded", String(e || "false"))), o.setAttribute("aria-haspopup", "dialog"));
+    };
+  }
+  connectedCallback() {
+    this.componentLoaded && (this.setupHoverListeners(), this.setupIntersectionObserver());
+  }
+  componentDidLoad() {
+    this.updateTriggerElAriaAttributes(), this.setupHoverListeners(), this.setupIntersectionObserver(), this.componentLoaded = !0;
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this.intersectionObserver) == null || t.disconnect(), this.removeHoverListeners(), clearTimeout(this.hoverDelayReference), clearTimeout(this.hoverLingerReference);
+  }
+  watchPopover() {
+    this.updateTriggerElAriaAttributes();
+  }
+  watchHover() {
+    this.updateTriggerElAriaAttributes(), clearTimeout(this.hoverDelayReference), clearTimeout(this.hoverLingerReference);
+  }
+  getPopoverEl() {
+    var t, e;
+    return typeof this.swirlPopover == "string" ? document.querySelector(`#${this.swirlPopover}`) : (e = (t = this.swirlPopover) == null ? void 0 : t.el) != null ? e : this.swirlPopover;
+  }
+  getTriggerEl() {
+    return this.el.children.length !== 1 && console.warn('[Swirl] The "swirl-popover-trigger" component expects exactly one child element.'), this.el.children[0];
+  }
+  setupIntersectionObserver() {
+    var t;
+    if ((t = this.intersectionObserver) == null || t.disconnect(), this.hidePopoverWhenInvisible) {
+      this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
+        root: this.parentScrollContainer,
+        threshold: 1
+      });
+      const e = this.el.querySelector("*");
+      if (!Boolean(e))
+        return;
+      this.intersectionObserver.observe(e);
+    }
+  }
+  onVisibilityChange(t) {
+    var o;
+    !t[0].isIntersecting && this.isPopoverOpen() && ((o = this.getPopoverEl()) == null || o.close());
+  }
+  setupHoverListeners() {
+    this.popoverElRef = this.getPopoverEl(), Boolean(this.popoverElRef) && (this.popoverElRef.addEventListener("mouseenter", this.popoverMouseEnter), this.popoverElRef.addEventListener("mouseleave", this.popoverMouseLeave));
+  }
+  removeHoverListeners() {
+    Boolean(this.popoverElRef) && (this.popoverElRef.removeEventListener("mouseenter", this.popoverMouseEnter), this.popoverElRef.removeEventListener("mouseleave", this.popoverMouseLeave));
+  }
+  startHoverLingerTimer() {
+    clearTimeout(this.hoverLingerReference), this.hoverLingerReference = setTimeout(() => {
+      this.triggerIsActive && this.isPopoverOpen() && this.getPopoverEl().close(!0), this.triggerIsActive = !1;
+    }, this.hoverLingerDuration);
+  }
+  stopHoverLingerTimer() {
+    clearTimeout(this.hoverLingerReference);
+  }
+  isPopoverOpen() {
+    var o;
+    const t = this.getPopoverEl();
+    return (o = t == null ? void 0 : t.shadowRoot.firstChild) == null ? void 0 : o.classList.contains("popover--active");
+  }
+  render() {
+    return n(g, { key: "50be820c88ab32b47982b007146993ab7508e7b1", onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, n("slot", { key: "d27ac0c178ff917a52d9d042f6cf8692f7e61f96" }));
+  }
+  get el() {
+    return u(this);
+  }
+  static get watchers() {
+    return {
+      swirlPopover: [{
+        watchPopover: 0
+      }],
+      triggerOnHover: [{
+        watchHover: 0
+      }]
+    };
+  }
+};
+S.style = R();
+export {
+  H as swirl_popover,
+  S as swirl_popover_trigger
+};

package/dist/swirl-progress-indicator.entry.a077eb7c.js

@@ -0,0 +1,17 @@
+import { r as t, h as i, H as n } from "./index.e6e0951d.js";
+import { c } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const d = () => ":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-raised-default)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-border-default);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}", l = class {
+  constructor(e) {
+    t(this, e), this.size = "m", this.value = 0, this.variant = "bar";
+  }
+  render() {
+    const e = c("progress-indicator", `progress-indicator--size-${this.size}`, `progress-indicator--variant-${this.variant}`), a = this.size === "m" ? 4 : 2, r = this.size === "m" ? 20 : 10, s = Math.round(r * 2 * Math.PI), o = Math.round(s * ((100 - this.value) / 100));
+    return i(n, { key: "145af7f98c9a802df6b2d200259698038a21b8f0", class: this.variant }, this.variant === "bar" && i("progress", { key: "87d9ff0d045c00243130990a2f4c4bb9acf148ea", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: e, max: 100, value: this.value }), this.variant === "circle" && i("span", { key: "b7d41758466e3ce6ff106097fe3f906a1ceb299a", role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: e }, i("svg", { key: "cfae59747e8009dff51208ca319e882ca6b8ba38", class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(r + a) * 2} ${(r + a) * 2}` }, i("circle", { key: "3ea99ecc73cd6031d17303dac25cc1d8e51891a5", class: "progress-indicator__circle-background", cx: r + a, cy: r + a, r, fill: "none", "stroke-width": a }), i("circle", { key: "25b24dfc50827137fb7f8250bb4cdb30743b3d4d", class: "progress-indicator__circle-value", cx: r + a, cy: r + a, r, fill: "none", "stroke-width": a, "stroke-dasharray": s, "stroke-dashoffset": o }))));
+  }
+};
+l.style = d();
+export {
+  l as swirl_progress_indicator
+};

package/dist/swirl-radio-group.entry.57bc27b3.js

@@ -0,0 +1,50 @@
+import { r as o, c as s, h as r, H as d, g as n } from "./index.e6e0951d.js";
+import "react";
+import "react-dom";
+const l = () => ".sc-swirl-radio-group-h{display:block}.sc-swirl-radio-group-h *.sc-swirl-radio-group{box-sizing:border-box}.radio-group.sc-swirl-radio-group{display:flex;flex-direction:column;gap:var(--s-space-12)}", c = class {
+  constructor(e) {
+    o(this, e), this.valueChange = s(this, "valueChange", 7), this.componentLoaded = !1, this.onRadioValueChange = (a) => {
+      a.stopPropagation();
+      const i = a.target;
+      (i.checked === !0 || i.checked === "true") && (this.value = i.value, this.valueChange.emit(i.value), this.radioButtons.forEach((t) => {
+        t !== i && (t.checked = !1);
+      }));
+    };
+  }
+  connectedCallback() {
+    this.componentLoaded && this.addValueChangeListeners();
+  }
+  componentDidLoad() {
+    this.radioButtons = Array.from(this.el.querySelectorAll("swirl-radio")), this.initValue(), this.addValueChangeListeners(), this.componentLoaded = !0;
+  }
+  disconnectedCallback() {
+    this.removeValueChangeListeners();
+  }
+  initValue() {
+    if (this.value === void 0)
+      return;
+    const e = this.radioButtons.find((a) => a.value === this.value);
+    !Boolean(e) || (e.checked = !0);
+  }
+  addValueChangeListeners() {
+    this.radioButtons.forEach((e) => {
+      e.addEventListener("valueChange", this.onRadioValueChange);
+    });
+  }
+  removeValueChangeListeners() {
+    var e;
+    (e = this.radioButtons) == null || e.forEach((a) => {
+      a.removeEventListener("valueChange", this.onRadioValueChange);
+    });
+  }
+  render() {
+    return r(d, { key: "7004ea866ef7bb6d89d94f303189cfc2a91bd858", "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, r("div", { key: "adb4ee3d7f60627ab5e9afdf5cce1ca0967ca811", class: "radio-group" }, r("slot", { key: "bde0e53f36ef4d92cfb1419883c90a9f758ede08" })));
+  }
+  get el() {
+    return n(this);
+  }
+};
+c.style = l();
+export {
+  c as swirl_radio_group
+};

package/dist/swirl-radio.entry.82497eb7.js

@@ -0,0 +1,27 @@
+import { r as s, c, h as i, H as l } from "./index.e6e0951d.js";
+import { c as t } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const n = () => '.sc-swirl-radio-h{display:inline-flex}.sc-swirl-radio-h *.sc-swirl-radio{box-sizing:border-box}.radio.sc-swirl-radio{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer;align-items:center}.radio.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),       0 0 0 0.1875rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio{width:100%;padding:var(--s-space-16);border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface)}.radio--variant-card.sc-swirl-radio:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default),       0 0 0 0.25rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:none}.radio--variant-card.sc-swirl-radio:hover:not(.radio--disabled){background-color:var(--s-state-hovered)}.radio--variant-card.sc-swirl-radio:active:not(.radio--disabled){background-color:var(--s-state-pressed)}.radio--variant-card.radio--checked.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-highlight)}.radio--variant-card.radio--invalid.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-critical)}.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:"";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio,.radio--invalid.radio--indeterminate.sc-swirl-radio .radio__box.sc-swirl-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-swirl-radio{cursor:default}.radio--disabled.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:transparent}.radio--disabled.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__description.sc-swirl-radio,.radio--disabled.sc-swirl-radio .radio__label.sc-swirl-radio{color:var(--s-text-disabled)}.radio__control.sc-swirl-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__control.sc-swirl-radio{width:1.375rem;height:1.375rem}}.radio__box.sc-swirl-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-swirl-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-swirl-radio{display:flex;align-items:center;font-weight:var(--s-font-weight-medium);gap:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__label.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.radio__description.sc-swirl-radio{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__description.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}', h = class {
+  constructor(r) {
+    s(this, r), this.valueChange = c(this, "valueChange", 7), this.checked = !1, this.disabled = !1, this.variant = "default", this.onChange = () => {
+      this.checked = !0, this.valueChange.emit(this.value);
+    };
+  }
+  getAriaCheckedLabel(r, a) {
+    return r ? "true" : a ? "false" : "mixed";
+  }
+  render() {
+    const r = this.checked === !1 || this.checked === "false", a = this.checked === !0 || this.checked === "true", d = this.getAriaCheckedLabel(a, r), o = this.invalid, e = t("radio", `radio--variant-${this.variant}`, {
+      "radio--checked": a,
+      "radio--disabled": this.disabled,
+      "radio--invalid": this.invalid,
+      "radio--unchecked": r
+    });
+    return i(l, { key: "6ae2ed2df56b3c1d7cb34e86e4fa2a62563ab95d", style: { width: this.variant === "card" ? "100%" : void 0 } }, i("label", { key: "4e27fba290d056a9654c0c14e4e3b3506324756f", class: e, htmlFor: this.inputId }, i("span", { key: "2deafc430b2b40dfafb863a017d01acd6d6b77ab", class: "radio__control" }, i("swirl-visually-hidden", { key: "32e6d78b1723fb17b98e882e1d49c8994e0b63d0" }, i("input", { key: "21b7fff70e84dbd228f88305924b8b29b5e58089", "aria-checked": d, "aria-invalid": o, checked: a, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })), i("span", { key: "e1f9252ef9c7460bf9d0689b7db2b6eb3359583a", "aria-hidden": "true", class: "radio__box" })), i("span", { key: "7323db066e679a7cb6d1c0e3518fbf94afff5170", class: "radio__label-container" }, this.label && i("span", { key: "c7539cbc3ffcd027a3481c0fd4679774b78f79c7", class: "radio__label" }, this.label, this.tooltip && i("swirl-tooltip", { key: "c3621889d24d7b37edfe41493be5d4b84f2790e6", content: this.tooltip, position: "top" }, i("swirl-icon-help", { key: "3528944b98e966a4b2fb0053605d7bafcc49c697", color: "default", size: 20, tabIndex: 0 }))), this.description && i("span", { key: "9557a2966076d4bb33235a1ff6080d8ecf37b51d", class: "radio__description", innerHTML: this.description }))));
+  }
+};
+h.style = n();
+export {
+  h as swirl_radio
+};

package/dist/swirl-resource-list-file-item.entry.35e787b4.js

@@ -0,0 +1,39 @@
+import { r as n, c as f, h as e, H as m, g as d } from "./index.e6e0951d.js";
+import { c as h } from "./index-orsBiyT_.fc4357c3.js";
+import { D as u } from "./media-query.service-CCYT6DU8.f0931fdc.js";
+import "react";
+import "react-dom";
+import "./utils-CCck-DTo.e4e43b6a.js";
+const b = () => '.sc-swirl-resource-list-file-item-h{display:block;width:100%}.sc-swirl-resource-list-file-item-h *.sc-swirl-resource-list-file-item{box-sizing:border-box}.resource-list-file-item.sc-swirl-resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item.sc-swirl-resource-list-file-item:focus{outline:none}.resource-list-file-item.sc-swirl-resource-list-file-item:focus-visible{background-color:var(--s-background-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item.sc-swirl-resource-list-file-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-file-item--has-control.sc-swirl-resource-list-file-item .resource-list-file-item__label-container.sc-swirl-resource-list-file-item{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon.sc-swirl-resource-list-file-item{width:1.5rem;height:1.5rem;color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item__icon.sc-swirl-resource-list-file-item{width:1.25rem;height:1.25rem}}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-file-item__label.sc-swirl-resource-list-file-item{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description.sc-swirl-resource-list-file-item{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message.sc-swirl-resource-list-file-item{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}', p = class {
+  constructor(i) {
+    n(this, i), this.remove = f(this, "remove", 7), this.icon = "<swirl-icon-file></swirl-icon-file>", this.removeButtonLabel = "Remove file", this.mediaQueryUnsubscribe = () => {
+    };
+  }
+  componentDidLoad() {
+    this.mediaQueryUnsubscribe = u.subscribe((i) => {
+      this.forceIconProps(i);
+    });
+  }
+  disconnectedCallback() {
+    this.mediaQueryUnsubscribe();
+  }
+  forceIconProps(i) {
+    if (!Boolean(this.iconEl))
+      return;
+    const s = this.iconEl.children[0];
+    s == null || s.setAttribute("size", i ? "20" : "24");
+  }
+  render() {
+    const i = Boolean(this.errorMessage), s = !i && Boolean(this.description), r = !i && this.loading, t = this.removable && !r, l = this.el.closest('[role="grid"]') ? "row" : "listitem", o = l === "row" ? "gridcell" : void 0, c = h("resource-list-file-item", {
+      "resource-list-file-item--has-control": r || t
+    });
+    return e(m, { key: "3826ef1e74ab990a584abbf2f021b6666c0b62af", role: l }, e("div", { key: "0ee127c0ea2eb388c93607b54e6d2057f6fccf82", class: c, part: "resource-list-file-item", role: o }, e("span", { key: "0908643a3a721461e722cb9f12f9572c489bf0e3", class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (a) => this.iconEl = a }), e("span", { key: "3bbe6041118347f8368b9f6bfffa6773c17480d0", class: "resource-list-file-item__label-container" }, e("span", { key: "b9c61fa069de57b47b0925118fcd64330d0c4d2a", class: "resource-list-file-item__label", id: "label" }, this.label), s && e("span", { key: "1d5b463ecca7e93c332af863f2d055c0ee46aee4", class: "resource-list-file-item__description" }, this.description), i && e("span", { key: "1eba848c7fefd28712e483187cdc86f3ea5e1668", "aria-live": "polite", class: "resource-list-file-item__error-message" }, e("swirl-inline-error", { key: "434560349dc3fe9cc4df49daf426c08b06db2a22", message: this.errorMessage, size: "s" }))), r && e("span", { key: "eea51465daf2267a0cf3e04c355883b318a61fce", class: "resource-list-file-item__spinner" }, e("swirl-spinner", { key: "6743181704297c2c327e692937394ff4e6678d73", size: "s" })), t && e("span", { key: "ae09bfeaeb606840c3499fd03d4198dec5518fa9", class: "resource-list-file-item__remove-button" }, e("swirl-button", { key: "e7e88de842b076ef0b2c8ef059435c67801cb50a", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))));
+  }
+  get el() {
+    return d(this);
+  }
+};
+p.style = b();
+export {
+  p as swirl_resource_list_file_item
+};

package/dist/swirl-resource-list-item.entry.413fa596.js

@@ -0,0 +1,103 @@
+import { r as _, c as n, h as s, H as k, g as x } from "./index.e6e0951d.js";
+import { c as y } from "./index-orsBiyT_.fc4357c3.js";
+import { D as C } from "./media-query.service-CCYT6DU8.f0931fdc.js";
+import { v as B } from "./v4-DD3477fe.2624487e.js";
+import "react";
+import "react-dom";
+import "./utils-CCck-DTo.e4e43b6a.js";
+const z = () => '.sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.swirl-resource-list-item--drag.sc-swirl-resource-list-item-h{border-radius:var(--s-border-radius-sm);background-color:var(--s-translucent-medium-pressed)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;padding:var(--s-space-12) var(--s-space-8);gap:var(--s-space-12);border-radius:var(--s-border-radius-sm);background-color:var(--swirl-resource-list-item-background-default);--swirl-badge-border-color:transparent}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--swirl-resource-list-item-background-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.resource-list-item.sc-swirl-resource-list-item:not(.resource-list-item--has-control) .resource-list-item__control.sc-swirl-resource-list-item{display:none}.resource-list-item--interactive.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.resource-list-item--disabled.sc-swirl-resource-list-item{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled),.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item{--swirl-badge-border-color:var(     --swirl-resource-list-item-background-hovered   );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2rem}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--label-weight-semibold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item--label-weight-bold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-bold)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1;position:static;transform:none;margin:calc(-1 * var(--s-space-4)) 0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:0;padding-right:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:calc(-1 * var(--s-space-16));padding-right:var(--s-space-16);transition:margin 0.1s}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0;position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%);transition:opacity 0.1s}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-state-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),     0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-state-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label-max-lines.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:transparent;display:flex;width:100%;min-width:0;margin:0;padding:0;align-items:flex-start;border:none;color:var(--s-text-default);background:none;font:inherit;line-height:var(--s-line-height-sm);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus,.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;height:100%;min-width:0;min-height:3rem;padding-right:var(--s-space-16);justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{align-self:center}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox.sc-swirl-resource-list-item{right:auto;left:calc(var(--s-space-16) - var(--s-space-2))}}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item::part(icon),.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item [part~="icon"]{width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start;gap:var(--s-space-2)}.resource-list-item__meta.sc-swirl-resource-list-item:not(:has(.resource-list-item__meta-text)){align-self:center}.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);white-space:nowrap}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-sm);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}', M = class {
+  constructor(i) {
+    _(this, i), this.toggleDrag = n(this, "toggleDrag", 7), this.valueChange = n(this, "valueChange", 7), this.checked = !1, this.dragHandleDescription = "Press spacebar to toggle grab", this.dragHandleLabel = "Move item", this.interactive = !0, this.labelWeight = "medium", this.labelTooltipPosition = "top", this.menuTriggerLabel = "Options", this.hasMedia = !1, this.iconSize = 24, this.elementId = B(), this.mediaQueryUnsubscribe = () => {
+    }, this.onClick = () => {
+      !this.selectable || (this.checked = !this.checked, this.valueChange.emit(this.checked));
+    }, this.onBlur = () => {
+      this.makeControlUnfocusable();
+    }, this.onFocus = () => {
+      this.makeControlFocusable();
+    }, this.onMenuTriggerClick = (e) => {
+      this.disabled && !Boolean(this.href) && e.stopPropagation();
+    }, this.onDragHandleKeyDown = (e) => {
+      (e.code === "Space" || e.code === "Enter") && (e.preventDefault(), this.toggleDrag.emit(this.el));
+    }, this.onControlClick = (e) => {
+      e.preventDefault(), e.stopPropagation();
+    };
+  }
+  componentWillLoad() {
+    this.updateMediaState();
+  }
+  componentDidLoad() {
+    var i;
+    this.parentSemantics = (i = this.el.closest("swirl-resource-list")) == null ? void 0 : i.semantics, this.mediaQueryUnsubscribe = C.subscribe((e) => {
+      this.forceIconProps(e), this.updateIconSize(e);
+    }), this.makeControlUnfocusable(), Boolean(this.menuTriggerId) && console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs');
+  }
+  disconnectedCallback() {
+    this.mediaQueryUnsubscribe();
+  }
+  get hasBadges() {
+    return Boolean(this.el.querySelector("[slot='badges']"));
+  }
+  get showMeta() {
+    return (Boolean(this.meta) || this.hasBadges) && !this.selectable;
+  }
+  forceIconProps(i) {
+    var t;
+    const e = (t = this.iconEl) == null ? void 0 : t.children[0];
+    e == null || e.setAttribute("size", i ? "20" : "24");
+  }
+  updateIconSize(i) {
+    this.iconSize = i ? 20 : 24;
+  }
+  updateMediaState() {
+    const i = this.el.querySelector('[slot="media"]'), e = Boolean(i);
+    e !== this.hasMedia && (this.hasMedia = e);
+  }
+  getControl() {
+    return this.el.querySelector('[slot="control"] button');
+  }
+  makeControlFocusable() {
+    if (this.parentSemantics !== "grid")
+      return;
+    const i = this.getControl();
+    !Boolean(i) || (i.tabIndex = 0);
+  }
+  makeControlUnfocusable() {
+    if (this.parentSemantics !== "grid")
+      return;
+    const i = this.getControl();
+    !Boolean(i) || (i.tabIndex = -1);
+  }
+  render() {
+    var a;
+    const i = !this.interactive && !this.selectable ? "div" : Boolean(this.href) && !this.selectable ? "a" : "button", e = this.disabled && !Boolean(this.href), t = this.hasBadges, r = this.el.querySelector("[slot='control']"), u = Boolean(this.menuTriggerId) || r, m = this.interactive && Boolean(this.href) ? this.href : void 0, d = r && (Boolean(this.meta) || t), h = Boolean(this.menuTriggerId) && !Boolean(this.meta) && !this.selectable, o = this.showMeta, b = Boolean(this.swirlAriaLabel) ? this.swirlAriaLabel : this.label, w = this.selectable ? String(this.checked) : void 0, g = this.interactive && this.selectable ? "checkbox" : void 0, l = this.el.closest('[role="grid"]') ? "row" : "listitem", p = l === "row" ? "gridcell" : void 0, f = {
+      minHeight: (a = this.labelMinHeight) != null ? a : void 0
+    }, c = () => s("span", { key: "c396afdaa49551b5e5023ea3dc1e638b5aba7873", class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : void 0, style: {
+      "-webkit-line-clamp": this.labelWrapMaxLines ? String(this.labelWrapMaxLines) : void 0
+    } }, !this.allowHtml && this.label), v = y("resource-list-item", `resource-list-item--label-weight-${this.labelWeight}`, {
+      "resource-list-item--active": this.active,
+      "resource-list-item--checked": this.checked,
+      "resource-list-item--compact": this.compact,
+      "resource-list-item--disabled": this.disabled,
+      "resource-list-item--draggable": this.allowDrag,
+      "resource-list-item--dragging": this.dragging,
+      "resource-list-item--has-control": r,
+      "resource-list-item--has-menu": u,
+      "resource-list-item--hide-divider": this.hideDivider,
+      "resource-list-item--interactive": this.interactive || this.selectable,
+      "resource-list-item--selectable": this.selectable,
+      "resource-list-item--show-control-on-focus": d,
+      "resource-list-item--show-meta": o,
+      "resource-list-item--wrap-description": this.descriptionWrap,
+      "resource-list-item--wrap-label": this.labelWrap,
+      "resource-list-item--wrap-label-max-lines": this.labelWrapMaxLines
+    });
+    return s(k, { key: "ec264aca3043fe1569a50a8ecfcf7a7739acef30", role: l }, s("div", { key: "3751bb7e69507e219d8543ca180153d2d21b2941", class: v, role: p, onClick: this.onClick }, s(i, { key: "41f7ddb0de62ed56897f1a43387bf3a6f65d497c", "aria-checked": w, "aria-current": this.swirlAriaCurrent, "aria-disabled": e ? "true" : void 0, "aria-label": b, "aria-labelledby": Boolean(this.swirlAriaLabel) ? void 0 : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: m, disabled: e, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: g, tabIndex: 0, type: i === "button" ? "button" : void 0 }, this.hasMedia && s("span", { key: "e33312af2a4977c7e222daba839bb20a00c60343", class: "resource-list-item__media" }, s("slot", { key: "a060f2fe141337a4c9bdd032a006556fad0bbfbc", name: "media" })), s("span", { key: "ba50de62fc050b9389fe366fa98cc5e38b84e72c", class: "resource-list-item__label-container", style: f }, this.labelTooltip ? s("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition }, c()) : c(), this.description && s("span", { key: "24f0943d7e15e528e9b882c2bc5c2bd302fc2193", class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : void 0 }, !this.allowHtml && this.description))), this.selectable && s("span", { key: "cfad1f6a4ca7765dae692f2875fc5c54558c4d02", "aria-hidden": "true", class: "resource-list-item__checkbox" }, s("span", { key: "9a0680f6c03b61245a8787baecd2a24e4320cc32", class: "resource-list-item__checkbox-icon" }, this.checked && s("swirl-icon-check-strong", { key: "dabd22f0885cc94139f6657a6f70f28089f70353" }))), o && s("span", { key: "19d4338f565d950b2a9abb94c45e8c0dff2b64dc", class: "resource-list-item__meta" }, this.meta && s("span", { key: "b355e780629fbb4736b3b26226569630d8437162", class: "resource-list-item__meta-text" }, this.meta), s("span", { key: "598a330e15f538376960c18b1ddad5577d693d04", class: "resource-list-item__badges" }, s("slot", { key: "da5cd4f025c25e364afbf01fcc9b604abea25a71", name: "badges" }))), s("span", { key: "edec2245d3cb0a92b3095addd5b6648d78a74238", class: "resource-list-item__control", onClick: this.onControlClick }, s("slot", { key: "7786f1c6b3ba5dc221879e634a880a93521ee70e", name: "control" })), h && s("swirl-popover-trigger", { key: "9e3eb66dd185f0fa189652dd9768efec3893b360", swirlPopover: this.menuTriggerId }, s("swirl-button", { key: "39ed08f301e291147ac2a3d3567a90ef10c9d97c", "aria-disabled": e ? "true" : void 0, class: "resource-list-item__menu-trigger", disabled: e, hideLabel: !0, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick }))), this.allowDrag && s("button", { key: "370aacd197f9e0f2b79844cae49aca28ca115ea4", "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, s("swirl-icon-drag-handle", { key: "96b04c74a41e95c59f5ebbc7acede90b46788a82", size: this.iconSize })));
+  }
+  get el() {
+    return x(this);
+  }
+};
+M.style = z();
+export {
+  M as swirl_resource_list_item
+};

package/dist/swirl-resource-list-section.entry.b2d3ed91.js

@@ -0,0 +1,19 @@
+import { r as t, h as e, H as a, g as r } from "./index.e6e0951d.js";
+import "react";
+import "react-dom";
+const o = () => ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-section-label{display:flex;padding:var(--s-space-8);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);font-size:var(--s-font-size-base);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-section-label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}", l = class {
+  constructor(s) {
+    t(this, s), this.separatorSpacing = "4", this.spacing = "0", this.hasSeparator = !1;
+  }
+  render() {
+    const s = this.el.closest('[role="grid"]') ? "rowgroup" : "listitem", i = s === "listitem" ? "list" : void 0;
+    return e(a, { key: "7dbdb537a6f9c72d7f952b0a939c91a60b9fabd0" }, this.hasSeparator && e("swirl-separator", { key: "6a284adff8beee7b1ccd81e345bc44ab882c8aab", spacing: this.separatorSpacing, semantics: "none" }), e("div", { key: "34d23ecfd3709f5d4fa425389778bf6378e80a8b", "aria-labelledby": "label", role: s }, e("span", { key: "8f275f61d94a8120d4f2fcb4afedbe87e49f9d45", id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), e("swirl-stack", { key: "9ca25e206aed7140c6b325211fc28a293392ff05", spacing: this.spacing, swirlAriaRole: i }, e("slot", { key: "18418cae3005c03aa50ac5bfbf093cd6e1d17f3d" }))));
+  }
+  get el() {
+    return r(this);
+  }
+};
+l.style = o();
+export {
+  l as swirl_resource_list_section
+};