@getflip/swirl-components-react 0.77.1 → 0.78.0

package/dist/swirl-popover_2.entry.56e3a82e.js

@@ -0,0 +1,177 @@
+import { r as h, c as p, h as n, H as v, g } from "./index.d4f681a9.js";
+import { o as l, s as c, f as m, c as u, a as f } from "./floating-ui.dom.esm-ac7cc24e.79b318e4.js";
+import { d as b, e as _ } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
+import { c as y } from "./index-d280dafb.186cdb0e.js";
+import { i as a, a as w, q as d } from "./utils-bc84f36e.1fee9865.js";
+import "react";
+import "react-dom";
+const x = ":host{position:relative;z-index:var(--s-z-40);display:inline-flex}:host *{box-sizing:border-box}.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{transform-origin:top left;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;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out}}@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;animation-fill-mode: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}}.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;max-width:22.5rem;border-radius:var(--s-border-radius-sm);animation:none;box-shadow:var(--s-shadow-level-1)}}.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:var(--s-space-8);padding-bottom:var(--s-space-8)}}.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}}", E = class {
+  constructor(e) {
+    h(this, e), this.popoverClose = p(this, "popoverClose", 7), this.popoverOpen = p(this, "popoverOpen", 7), this.toggle = (t) => {
+      t.stopPropagation(), this.active ? this.close() : this.open();
+    }, this.onKeydown = (t) => {
+      t.code === "Escape" && this.active && (t.stopPropagation(), this.close());
+    }, this.reposition = async () => {
+      const t = a();
+      if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer))
+        return;
+      if (t) {
+        this.position = void 0;
+        return;
+      }
+      const o = typeof this.offset == "number" ? { mainAxis: this.offset, crossAxis: 0 } : { mainAxis: this.offset[0], crossAxis: this.offset[1] }, i = this.enableFlip ? [l(o), c(), m()] : [l(o), c()];
+      this.position = await u(this.triggerEl, this.contentContainer, {
+        middleware: i,
+        placement: this.placement,
+        strategy: "fixed"
+      });
+    }, this.onCloseButtonClick = () => {
+      this.close();
+    }, this.animation = "scale-in-xy", this.disableScrollLock = void 0, this.enableFlip = !0, this.fullscreenBottomSheet = void 0, this.label = void 0, this.maxHeight = "22rem", this.offset = 8, this.placement = "bottom-start", this.trigger = void 0, this.triggerContainer = void 0, this.useContainerWidth = void 0, this.active = !1, this.closing = !1, this.position = void 0;
+  }
+  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');
+  }
+  disconnectedCallback() {
+    this.unlockBodyScroll();
+  }
+  onWindowFocusIn(e) {
+    var t;
+    if (!this.active)
+      return;
+    const o = /^((?!chrome|android).)*safari/i.test(navigator.userAgent), i = e.target, r = e.relatedTarget, s = w();
+    !this.el.contains(i) && !this.el.contains(s) && i !== this.triggerEl && !(!((t = this.triggerEl) === null || t === void 0) && t.contains(i)) && (!o || o && !this.el.contains(r || i) && r !== this.el) && this.close();
+  }
+  onWindowClick(e) {
+    if (!this.active)
+      return;
+    const t = e.target, o = this.el.contains(t), i = e.composedPath().some((s) => Boolean(s) && s instanceof Node ? this.el.contains(s) : !1), r = t === this.triggerEl;
+    !o && !i && !r && this.close();
+  }
+  async close() {
+    var e;
+    this.closing || !this.active || (this.popoverClose.emit(), this.disableAutoUpdate && this.disableAutoUpdate(), this.closing = !0, setTimeout(() => {
+      this.active = !1, this.closing = !1, this.updateTriggerAttributes();
+    }, 150), this.unlockBodyScroll(), (e = this.getNativeTriggerElement()) === null || e === void 0 || e.focus());
+  }
+  async open(e) {
+    if (this.triggerEl = e || this.triggerEl, this.active || !Boolean(this.triggerEl))
+      return;
+    this.adjustWidth(), this.active = !0, this.updateTriggerAttributes();
+    const t = this.getFocusableChildren();
+    requestAnimationFrame(async () => {
+      await this.reposition(), this.popoverOpen.emit({ position: this.position }), t.length > 0 ? t[0].focus() : this.contentContainer.focus(), this.disableAutoUpdate && this.disableAutoUpdate(), this.disableAutoUpdate = f(this.triggerEl, this.contentContainer, () => this.reposition()), this.scrollContainer.scrollTop = 0, this.lockBodyScroll();
+    });
+  }
+  connectTrigger() {
+    if (!Boolean(this.trigger)) {
+      this.triggerEl = void 0;
+      return;
+    }
+    this.triggerEl = typeof this.trigger == "string" ? d(this.triggerContainer || document.body, `#${this.trigger}`)[0] : this.trigger, Boolean(this.triggerEl) && this.triggerEl.addEventListener("click", (e) => {
+      this.toggle(e);
+    });
+  }
+  getNativeTriggerElement() {
+    var e, t, o, i;
+    return !((e = this.triggerEl) === null || e === void 0) && e.tagName.startsWith("SWIRL-") ? ((t = this.triggerEl) === null || t === void 0 ? void 0 : t.children[0]) || ((i = (o = this.triggerEl) === null || o === void 0 ? void 0 : o.shadowRoot) === null || i === void 0 ? void 0 : i.children[0]) || this.triggerEl : this.triggerEl;
+  }
+  updateTriggerAttributes() {
+    if (!Boolean(this.triggerEl))
+      return;
+    const e = this.getNativeTriggerElement();
+    e.setAttribute("aria-controls", this.el.id), e.setAttribute("aria-expanded", String(this.active)), e.setAttribute("aria-haspopup", "dialog");
+  }
+  getFocusableChildren() {
+    return d(this.el, '[role="menuitem"], [role="listbox"]');
+  }
+  adjustWidth() {
+    let e = this.useContainerWidth;
+    [!0, "true"].includes(this.useContainerWidth) ? e = !0 : [!1, "false"].includes(this.useContainerWidth) && (e = !1);
+    const t = !window.matchMedia("(min-width: 768px)").matches;
+    if (Boolean(e) && !t) {
+      const o = typeof e == "string" ? this.el.closest(e) || 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() {
+    !a() || this.disableScrollLock || b(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    !a() || this.disableScrollLock || _(this.scrollContainer);
+  }
+  render() {
+    var e, t, o;
+    const i = !window.matchMedia("(min-width: 768px)").matches, r = y("popover", `popover--animation-${this.animation}`, `popover--placement-${(e = this.position) === null || e === void 0 ? void 0 : e.placement}`, {
+      "popover--closing": this.closing,
+      "popover--active": this.active,
+      "popover--fullscreen-bottom-sheet": this.fullscreenBottomSheet,
+      "popover--inactive": !this.active
+    });
+    return n(v, null, n("div", { class: r, onKeyDown: this.onKeydown }, n("div", { "aria-hidden": this.active ? "false" : "true", "aria-label": this.label, class: "popover__content", part: "popover__content", role: "dialog", ref: (s) => this.contentContainer = s, style: {
+      top: Boolean(this.position) ? `${(t = this.position) === null || t === void 0 ? void 0 : t.y}px` : "",
+      left: Boolean(this.position) ? `${(o = this.position) === null || o === void 0 ? void 0 : o.x}px` : ""
+    }, tabindex: "-1" }, n("span", { class: "popover__handle" }), n("div", { class: "popover__scroll-container", ref: (s) => this.scrollContainer = s, style: {
+      maxHeight: !i && Boolean(this.maxHeight) ? this.maxHeight : void 0
+    } }, n("slot", null))), this.active && n("div", { class: "popover__backdrop", onClick: this.onCloseButtonClick })));
+  }
+  get el() {
+    return g(this);
+  }
+};
+E.style = x;
+const C = ".sc-swirl-popover-trigger-h{display:contents}", k = class {
+  constructor(e) {
+    h(this, e), this.popoverOpen = !1, this.onClick = (t) => {
+      t.stopPropagation();
+      const o = this.getPopoverEl();
+      if (!Boolean(o))
+        return;
+      if (this.popoverOpen) {
+        o.close();
+        return;
+      }
+      const i = this.getTriggerEl();
+      !Boolean(i) || (o.open(i), o.addEventListener("popoverOpen", () => {
+        this.popoverOpen = !0, this.updateTriggerElAriaAttributes(!0);
+      }, { once: !0 }), o.addEventListener("popoverClose", () => {
+        this.popoverOpen = !1, this.updateTriggerElAriaAttributes(!1);
+      }, { once: !0 }));
+    }, this.updateTriggerElAriaAttributes = (t) => {
+      var o;
+      if (!this.setAriaAttributes)
+        return;
+      const i = this.getTriggerEl(), r = typeof this.popover == "string" ? this.popover : (o = this.popover) === null || o === void 0 ? void 0 : o.id;
+      i.tagName.startsWith("SWIRL-") ? (i.setAttribute("swirl-aria-controls", r), i.setAttribute("swirl-aria-expanded", String(t || "false")), i.setAttribute("swirl-aria-haspopup", "dialog")) : (i.setAttribute("aria-controls", r), i.setAttribute("aria-expanded", String(t || "false")), i.setAttribute("aria-haspopup", "dialog"));
+    }, this.popover = void 0, this.setAriaAttributes = !0;
+  }
+  componentDidLoad() {
+    this.updateTriggerElAriaAttributes();
+  }
+  watchPopover() {
+    this.updateTriggerElAriaAttributes();
+  }
+  getPopoverEl() {
+    return typeof this.popover == "string" ? document.querySelector(`#${this.popover}`) : this.popover;
+  }
+  getTriggerEl() {
+    return this.el.children.length !== 1 && console.warn('[Swirl] The "swirl-popover-trigger" component expects exactly one child element.'), this.el.children[0];
+  }
+  render() {
+    return n(v, { onClick: this.onClick }, n("slot", null));
+  }
+  get el() {
+    return g(this);
+  }
+  static get watchers() {
+    return {
+      popover: ["watchPopover"]
+    };
+  }
+};
+k.style = C;
+export {
+  E as swirl_popover,
+  k as swirl_popover_trigger
+};

package/dist/{swirl-progress-indicator.entry.3ab28fc3.js → swirl-progress-indicator.entry.605c5764.js}

@@ -1,4 +1,4 @@
-import { r as t, h as s, H as n } from "./index.51adadce.js";
+import { r as t, h as s, H as n } from "./index.d4f681a9.js";
 import { c } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-radio-group.entry.50683f8e.js → swirl-radio-group.entry.3aaf070b.js}

@@ -1,4 +1,4 @@
-import { r as o, c as l, h as i, H as n, g as u } from "./index.51adadce.js";
+import { r as o, c as l, h as i, H as n, g as u } from "./index.d4f681a9.js";
 import "react";
 import "react-dom";
 const d = ".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)}", h = class {

package/dist/{swirl-radio.entry.08007e2f.js → swirl-radio.entry.8bb391e4.js}

@@ -1,4 +1,4 @@
-import { r as e, c as l, h as i, H as c } from "./index.51adadce.js";
+import { r as e, c as l, h as i, H as c } from "./index.d4f681a9.js";
 import { c as t } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-resource-list-file-item.entry.c2ea3edc.js → swirl-resource-list-file-item.entry.b10125b9.js}

@@ -1,4 +1,4 @@
-import { r as c, c as n, h as e, H as a } from "./index.51adadce.js";
+import { r as c, c as n, h as e, H as a } from "./index.d4f681a9.js";
 import { c as m } from "./index-d280dafb.186cdb0e.js";
 import { g as u } from "./utils-bc84f36e.1fee9865.js";
 import "react";

package/dist/{swirl-search.entry.02cdd220.js → swirl-search.entry.1373a594.js}

@@ -1,4 +1,4 @@
-import { r as i, c as r, h as a, H as t } from "./index.51adadce.js";
+import { r as i, c as r, h as a, H as t } from "./index.d4f681a9.js";
 import { c } from "./index-d280dafb.186cdb0e.js";
 import { g as n } from "./utils-bc84f36e.1fee9865.js";
 import "react";

package/dist/{swirl-select.entry.86002ee4.js → swirl-select.entry.6531e660.js}

@@ -1,9 +1,9 @@
-import { r as p, c as u, h as i, H as v, g as m } from "./index.51adadce.js";
+import { r as p, c as u, h as i, H as v, g as m } from "./index.d4f681a9.js";
 import { c as w } from "./index-d280dafb.186cdb0e.js";
 import { q as f } from "./utils-bc84f36e.1fee9865.js";
 import "react";
 import "react-dom";
-const g = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;visibility:hidden;width:100%;height:100%}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.375rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.375rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;gap:var(--s-space-8)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}", b = class {
+const b = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;visibility:hidden;width:100%;height:100%}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.375rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.375rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;gap:var(--s-space-8)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}", g = class {
   constructor(l) {
     p(this, l), this.valueChange = u(this, "valueChange", 7), this.select = (e) => {
       this.value = e.detail, this.valueChange.emit(this.value), this.multiSelect || this.popover.close();
@@ -33,26 +33,26 @@ const g = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-s
   }
   render() {
     var l, e, t;
-    const o = Boolean(this.value) ? (l = this.value) === null || l === void 0 ? void 0 : l.map((s) => {
-      var a;
-      return (a = this.options.find((h) => h.value === s)) === null || a === void 0 ? void 0 : a.label;
+    const a = Boolean(this.value) ? (l = this.value) === null || l === void 0 ? void 0 : l.map((s) => {
+      var o;
+      return (o = this.options.find((h) => h.value === s)) === null || o === void 0 ? void 0 : o.label;
     }).join(", ") : "", r = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, n = this.el.closest("swirl-form-control"), c = (n == null ? void 0 : n.inline) || (n == null ? void 0 : n.labelPosition) === "outside" ? -12 : -16, d = w("select", `select--placement-${this.placement}`, {
       "select--disabled": this.disabled,
       "select--inline": this.inline,
       "select--multi": this.multiSelect
     });
-    return i(v, { onKeyDown: this.onKeyDown }, i("div", { class: d }, i("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": r, class: "select__input", disabled: this.disabled, id: `trigger-${this.selectId}`, readOnly: !0, type: "text", value: o }), i("span", { class: "select__multi-select-values" }, (t = (e = this.value) === null || e === void 0 ? void 0 : e.map((s) => this.options.find((a) => a.value === s))) === null || t === void 0 ? void 0 : t.map((s) => i("swirl-tag", {
+    return i(v, { onKeyDown: this.onKeyDown }, i("div", { class: d }, i("swirl-popover-trigger", { popover: this.popover, setAriaAttributes: !1 }, i("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": r, class: "select__input", disabled: this.disabled, readOnly: !0, type: "text", value: a })), i("span", { class: "select__multi-select-values" }, (t = (e = this.value) === null || e === void 0 ? void 0 : e.map((s) => this.options.find((o) => o.value === s))) === null || t === void 0 ? void 0 : t.map((s) => i("swirl-tag", {
       "aria-hidden": "true",
       label: s == null ? void 0 : s.label,
       onRemove: () => this.unselectOption(s == null ? void 0 : s.value),
       removable: !this.disabled && this.allowDeselect
-    }))), i("span", { class: "select__indicator" }, this.open ? i("swirl-icon-expand-less", null) : i("swirl-icon-expand-more", null)), i("swirl-popover", { animation: "scale-in-y", class: "select__popover", label: this.label, offset: [0, c], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, popoverId: `select-options-${this.selectId}`, ref: (s) => this.popover = s, trigger: `trigger-${this.selectId}`, useContainerWidth: "swirl-form-control" }, i("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, i("slot", { onSlotchange: this.onSlotChange })))));
+    }))), i("span", { class: "select__indicator" }, this.open ? i("swirl-icon-expand-less", null) : i("swirl-icon-expand-more", null)), i("swirl-popover", { animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, c], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (s) => this.popover = s, useContainerWidth: "swirl-form-control" }, i("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, i("slot", { onSlotchange: this.onSlotChange })))));
   }
   get el() {
     return m(this);
   }
 };
-b.style = g;
+g.style = b;
 export {
-  b as swirl_select
+  g as swirl_select
 };

package/dist/{swirl-shell-layout.entry.d02bb615.js → swirl-shell-layout.entry.bc39689c.js}

@@ -1,4 +1,4 @@
-import { r as o, h as e, H as t } from "./index.51adadce.js";
+import { r as o, h as e, H as t } from "./index.d4f681a9.js";
 import { c as i } from "./index-d280dafb.186cdb0e.js";
 import { g as r, a as d } from "./utils-bc84f36e.1fee9865.js";
 import "react";

package/dist/{swirl-shell-navigation-item.entry.f5c3894c.js → swirl-shell-navigation-item.entry.9c599fcf.js}

@@ -1,4 +1,4 @@
-import { r as t, h as n, H as a, g as s } from "./index.51adadce.js";
+import { r as t, h as n, H as a, g as s } from "./index.d4f681a9.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-skeleton-box.entry.532731af.js → swirl-skeleton-box.entry.5622d795.js}

@@ -1,4 +1,4 @@
-import { r as t, h as s, H as i } from "./index.51adadce.js";
+import { r as t, h as s, H as i } from "./index.d4f681a9.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-skeleton-text.entry.3d691b6e.js → swirl-skeleton-text.entry.55d4b5f2.js}

@@ -1,4 +1,4 @@
-import { r as l, h as t, H as a } from "./index.51adadce.js";
+import { r as l, h as t, H as a } from "./index.d4f681a9.js";
 import { c as s } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-stack.entry.ca550e3b.js → swirl-stack.entry.1abd547e.js}

@@ -1,4 +1,4 @@
-import { r as i, h as s, H as e } from "./index.51adadce.js";
+import { r as i, h as s, H as e } from "./index.d4f681a9.js";
 import { c as n } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-status-indicator.entry.204296ad.js → swirl-status-indicator.entry.4dcfcf48.js}

@@ -1,4 +1,4 @@
-import { r as i, h as t, H as n } from "./index.51adadce.js";
+import { r as i, h as t, H as n } from "./index.d4f681a9.js";
 import { c as a } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-switch.entry.0dcc4142.js → swirl-switch.entry.2f97be69.js}

@@ -1,4 +1,4 @@
-import { r as h, c as n, h as e, H as a, g as l } from "./index.51adadce.js";
+import { r as h, c as n, h as e, H as a, g as l } from "./index.d4f681a9.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-account-circle.entry.3ce37c28.js → swirl-symbol-account-circle.entry.570df05c.js}

@@ -1,4 +1,4 @@
-import { r as C, h as i, F as l } from "./index.51adadce.js";
+import { r as C, h as i, F as l } from "./index.d4f681a9.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-alternate-email.entry.8556d1dc.js → swirl-symbol-alternate-email.entry.ae1c2c0e.js}

@@ -1,4 +1,4 @@
-import { r as t, h as C, F as e } from "./index.51adadce.js";
+import { r as t, h as C, F as e } from "./index.d4f681a9.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-android.entry.80aab0f1.js → swirl-symbol-android.entry.fde794bf.js}

@@ -1,4 +1,4 @@
-import { r as t, h as C, F as r } from "./index.51adadce.js";
+import { r as t, h as C, F as r } from "./index.d4f681a9.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-announcement.entry.96981499.js → swirl-symbol-announcement.entry.727e8425.js}

@@ -1,4 +1,4 @@
-import { r as e, h as i, F as o } from "./index.51adadce.js";
+import { r as e, h as i, F as o } from "./index.d4f681a9.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-backup.entry.167e360d.js → swirl-symbol-backup.entry.0246ca44.js}

@@ -1,4 +1,4 @@
-import { r as C, h as i, F as l } from "./index.51adadce.js";
+import { r as C, h as i, F as l } from "./index.d4f681a9.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-beach-access.entry.3ac748cb.js → swirl-symbol-beach-access.entry.66387584.js}

@@ -1,4 +1,4 @@
-import { r as e, h as i, F as C } from "./index.51adadce.js";
+import { r as e, h as i, F as C } from "./index.d4f681a9.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-bookmark.entry.547e1a90.js → swirl-symbol-bookmark.entry.27310c1e.js}

@@ -1,4 +1,4 @@
-import { r as o, h as i, F as r } from "./index.51adadce.js";
+import { r as o, h as i, F as r } from "./index.d4f681a9.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-cloud.entry.06e70805.js → swirl-symbol-cloud.entry.f0b47e78.js}

@@ -1,4 +1,4 @@
-import { r as l, h as i, F as o } from "./index.51adadce.js";
+import { r as l, h as i, F as o } from "./index.d4f681a9.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-coronavirus.entry.59523ea1.js → swirl-symbol-coronavirus.entry.d57f6692.js}

@@ -1,4 +1,4 @@
-import { r, h as s, F as t } from "./index.51adadce.js";
+import { r, h as s, F as t } from "./index.d4f681a9.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-desktop-windows.entry.e4ae8095.js → swirl-symbol-desktop-windows.entry.ccc71ad5.js}

@@ -1,4 +1,4 @@
-import { r as o, h as i, F as e } from "./index.51adadce.js";
+import { r as o, h as i, F as e } from "./index.d4f681a9.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-directions-car-filled.entry.82858d08.js → swirl-symbol-directions-car-filled.entry.993fe9f4.js}

@@ -1,4 +1,4 @@
-import { r as t, h as i, F as l } from "./index.51adadce.js";
+import { r as t, h as i, F as l } from "./index.d4f681a9.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-edit-calendar.entry.f33544c2.js → swirl-symbol-edit-calendar.entry.065d85a8.js}

@@ -1,4 +1,4 @@
-import { r as e, h as i, F as l } from "./index.51adadce.js";
+import { r as e, h as i, F as l } from "./index.d4f681a9.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-email.entry.5969ecdf.js → swirl-symbol-email.entry.3536229a.js}

@@ -1,4 +1,4 @@
-import { r as l, h as i, F as C } from "./index.51adadce.js";
+import { r as l, h as i, F as C } from "./index.d4f681a9.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-emoji-food-beverage.entry.eb9aa1ab.js → swirl-symbol-emoji-food-beverage.entry.409f7621.js}

@@ -1,4 +1,4 @@
-import { r as o, h as i, F as t } from "./index.51adadce.js";
+import { r as o, h as i, F as t } from "./index.d4f681a9.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-event-menu.entry.3e227223.js → swirl-symbol-event-menu.entry.75f48fab.js}

@@ -1,4 +1,4 @@
-import { r as C, h as i, F as e } from "./index.51adadce.js";
+import { r as C, h as i, F as e } from "./index.d4f681a9.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-facebook.entry.fadda2cf.js → swirl-symbol-facebook.entry.2c9cbce1.js}

@@ -1,4 +1,4 @@
-import { r as o, h as i, F as e } from "./index.51adadce.js";
+import { r as o, h as i, F as e } from "./index.d4f681a9.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-favorite.entry.606972ed.js → swirl-symbol-favorite.entry.c53b1dd5.js}

@@ -1,4 +1,4 @@
-import { r, h as i, F as e } from "./index.51adadce.js";
+import { r, h as i, F as e } from "./index.d4f681a9.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-fitness-center.entry.b39ac8b4.js → swirl-symbol-fitness-center.entry.e0ce3dda.js}

@@ -1,4 +1,4 @@
-import { r as C, h as i, F as e } from "./index.51adadce.js";
+import { r as C, h as i, F as e } from "./index.d4f681a9.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-flag.entry.17fc5779.js → swirl-symbol-flag.entry.3c402944.js}

@@ -1,4 +1,4 @@
-import { r as l, h as i, F as r } from "./index.51adadce.js";
+import { r as l, h as i, F as r } from "./index.d4f681a9.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-folder.entry.89cff6d7.js → swirl-symbol-folder.entry.b3117c21.js}

@@ -1,4 +1,4 @@
-import { r as l, h as i, F as r } from "./index.51adadce.js";
+import { r as l, h as i, F as r } from "./index.d4f681a9.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-globe.entry.dff9718c.js → swirl-symbol-globe.entry.53991e09.js}

@@ -1,4 +1,4 @@
-import { r as C, h as i, F as l } from "./index.51adadce.js";
+import { r as C, h as i, F as l } from "./index.d4f681a9.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-groups.entry.e6a185b7.js → swirl-symbol-groups.entry.e9d4e78e.js}

@@ -1,4 +1,4 @@
-import { r as l, h as C, F as t } from "./index.51adadce.js";
+import { r as l, h as C, F as t } from "./index.d4f681a9.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-help.entry.ec9e313d.js → swirl-symbol-help.entry.96a60397.js}

@@ -1,4 +1,4 @@
-import { r as t, h as C, F as l } from "./index.51adadce.js";
+import { r as t, h as C, F as l } from "./index.d4f681a9.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-image.entry.6998ff30.js → swirl-symbol-image.entry.3ad31642.js}

@@ -1,4 +1,4 @@
-import { r as e, h as i, F as l } from "./index.51adadce.js";
+import { r as e, h as i, F as l } from "./index.d4f681a9.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-info-menu.entry.3ee3e7ad.js → swirl-symbol-info-menu.entry.4e12cfcd.js}

@@ -1,4 +1,4 @@
-import { r as e, h as i, F as o } from "./index.51adadce.js";
+import { r as e, h as i, F as o } from "./index.d4f681a9.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-instagram.entry.c0c82bd3.js → swirl-symbol-instagram.entry.53b29e77.js}

@@ -1,4 +1,4 @@
-import { r as t, h as s, F as r } from "./index.51adadce.js";
+import { r as t, h as s, F as r } from "./index.d4f681a9.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-ios.entry.6d3b39e8.js → swirl-symbol-ios.entry.9861f756.js}

@@ -1,4 +1,4 @@
-import { r as t, h as i, F as o } from "./index.51adadce.js";
+import { r as t, h as i, F as o } from "./index.d4f681a9.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-language.entry.ffc39b62.js → swirl-symbol-language.entry.8db9d850.js}

@@ -1,4 +1,4 @@
-import { r as t, h as C, F as e } from "./index.51adadce.js";
+import { r as t, h as C, F as e } from "./index.d4f681a9.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-leaderboard.entry.724bd276.js → swirl-symbol-leaderboard.entry.51bd3705.js}

@@ -1,4 +1,4 @@
-import { r as t, h as i, F as e } from "./index.51adadce.js";
+import { r as t, h as i, F as e } from "./index.d4f681a9.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-lightbulb.entry.9e1d0775.js → swirl-symbol-lightbulb.entry.184aa43c.js}

@@ -1,4 +1,4 @@
-import { r as l, h as s, F as r } from "./index.51adadce.js";
+import { r as l, h as s, F as r } from "./index.d4f681a9.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-linkedin.entry.75cba43b.js → swirl-symbol-linkedin.entry.b018ed4d.js}

@@ -1,4 +1,4 @@
-import { r as e, h as i, F as l } from "./index.51adadce.js";
+import { r as e, h as i, F as l } from "./index.d4f681a9.js";
 import { c as C } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-location-on.entry.dcead164.js → swirl-symbol-location-on.entry.6aa82671.js}

@@ -1,4 +1,4 @@
-import { r as o, h as i, F as l } from "./index.51adadce.js";
+import { r as o, h as i, F as l } from "./index.d4f681a9.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-loyalty.entry.da03fc32.js → swirl-symbol-loyalty.entry.db8b34fe.js}

@@ -1,4 +1,4 @@
-import { r as t, h as C, F as l } from "./index.51adadce.js";
+import { r as t, h as C, F as l } from "./index.d4f681a9.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-maps-home-work.entry.801eb2e7.js → swirl-symbol-maps-home-work.entry.7a7e9288.js}

@@ -1,4 +1,4 @@
-import { r as o, h as i, F as r } from "./index.51adadce.js";
+import { r as o, h as i, F as r } from "./index.d4f681a9.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-notifications.entry.63e10c2c.js → swirl-symbol-notifications.entry.6d897742.js}

@@ -1,4 +1,4 @@
-import { r as o, h as i, F as l } from "./index.51adadce.js";
+import { r as o, h as i, F as l } from "./index.d4f681a9.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-open-in-new.entry.09790b52.js → swirl-symbol-open-in-new.entry.77e81768.js}

@@ -1,4 +1,4 @@
-import { r as t, h as C, F as e } from "./index.51adadce.js";
+import { r as t, h as C, F as e } from "./index.d4f681a9.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-pedal-bike.entry.6f579205.js → swirl-symbol-pedal-bike.entry.ae91b3e4.js}

@@ -1,4 +1,4 @@
-import { r as l, h as C, F as t } from "./index.51adadce.js";
+import { r as l, h as C, F as t } from "./index.d4f681a9.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-pinterest.entry.2aa8c8a3.js → swirl-symbol-pinterest.entry.427fd48b.js}

@@ -1,4 +1,4 @@
-import { r as t, h as C, F as e } from "./index.51adadce.js";
+import { r as t, h as C, F as e } from "./index.d4f681a9.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";