@getflip/swirl-components-react 0.190.0 → 0.192.0

package/dist/swirl-autocomplete.entry.72c983da.js

@@ -0,0 +1,115 @@
+import { r as p, c as m, h as o, H as g, g as f } from "./index.646f8b70.js";
+import { a as v, c as b, o as y } from "./floating-ui.dom.esm-b73e243b.647a7c7e.js";
+import { c as w } from "./index-d280dafb.186cdb0e.js";
+import { d as S } from "./utils-c5f2f98f.af14538a.js";
+import "react";
+import "react-dom";
+const x = ".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;max-height:18rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);animation:autocomplete-enter 0.1s;box-shadow:var(--s-shadow-level-1)}.autocomplete__listbox-container.sc-swirl-autocomplete:empty{display:none}.autocomplete__spinner.sc-swirl-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}.autocomplete__multi-select-tags.sc-swirl-autocomplete{margin-top:var(--swirl-autocomplete-tags-margin-top);margin-bottom:var(--s-space-4)}@keyframes autocomplete-enter{from{opacity:0}to{opacity:1}}", A = class {
+  constructor(i) {
+    p(this, i), this.valueChange = m(this, "valueChange", 7), this.onChange = (t) => {
+      t.stopPropagation(), this.updateTerm(t);
+    }, this.updateTerm = S(async (t) => {
+      this.updateSuggestions(t.detail), this.open(), !this.multiSelect && (!Boolean(t.detail) || t.detail === "") && (this.value = void 0, this.valueChange.emit(this.value));
+    }, 250, !1), this.onSelect = async (t) => {
+      if (t.stopPropagation(), this.multiSelect) {
+        const s = t.detail, n = this.suggestions.filter((a) => !s.includes(a.id)).map((a) => a.id);
+        this.value = [
+          ...this.value.filter((a) => !n.includes(a.id)),
+          ...this.suggestions.filter((a) => s.includes(a.id) && !this.value.some((u) => u.id === a.id))
+        ], this.valueChange.emit(this.value), this.inputEl.value = "";
+        const l = this.inputEl.querySelector("input");
+        Boolean(l) && (l.value = "", queueMicrotask(() => {
+          l.focus(), this.close();
+        }), this.updateSuggestions(l.value));
+      } else if (Boolean(t.detail[0])) {
+        const s = t.detail[0], n = this.suggestions.find((l) => l.id === s);
+        if (!Boolean(n))
+          return;
+        this.value = n, this.valueChange.emit(this.value), queueMicrotask(() => {
+          var l;
+          (l = this.inputEl.querySelector("input")) == null || l.focus(), this.close();
+        });
+      }
+    }, this.onRemoveValue = (t) => {
+      !Array.isArray(this.value) || (this.value = this.value.filter((s) => s.id !== t), this.valueChange.emit(this.value));
+    }, this.onFocusOut = (t) => {
+      const s = t.relatedTarget;
+      Boolean(s) && !this.el.contains(s) && this.close();
+    }, this.onFocus = () => {
+      this.updateSuggestions(), this.open();
+    }, this.onKeyDown = (t) => {
+      t.code === "Escape" && (t.preventDefault(), t.stopPropagation(), this.inputEl.querySelector("input").focus(), this.close());
+    }, this.onInputKeyDown = (t) => {
+      var s, n;
+      t.code === "ArrowDown" && (t.preventDefault(), (n = (s = this.listboxEl.querySelector('[role="listbox"]')) == null ? void 0 : s.querySelector('[tabIndex="0"]')) == null || n.focus());
+    }, this.autoSelect = void 0, this.clearable = !0, this.clearButtonLabel = "Clear input", this.disabled = void 0, this.generateSuggestions = async () => [], this.inline = void 0, this.invalid = void 0, this.maxLength = void 0, this.menuLabel = "Suggestions", this.mode = void 0, this.multiSelect = void 0, this.placeholder = void 0, this.required = void 0, this.spellCheck = void 0, this.swirlAriaDescribedby = void 0, this.value = void 0, this.active = !1, this.loading = !1, this.position = void 0, this.suggestions = [];
+  }
+  componentWillLoad() {
+    const i = document.querySelectorAll("swirl-datepicker").length;
+    this.id = `autocomplete-${i}`, this.handleInitialValue();
+  }
+  onWindowClick(i) {
+    const t = i.target;
+    this.el.contains(t) || this.close();
+  }
+  watchMultiSelect() {
+    this.handleInitialValue();
+  }
+  async close() {
+    var t;
+    if (!this.active)
+      return;
+    this.disableAutoUpdate && this.disableAutoUpdate();
+    const i = this.inputEl.querySelector("input");
+    Boolean(i) && (this.multiSelect ? i.value = "" : i.value = ((t = this.value) == null ? void 0 : t.label) || ""), this.active = !1;
+  }
+  async open() {
+    this.active || (this.active = !0, requestAnimationFrame(async () => {
+      await this.reposition(), this.disableAutoUpdate && this.disableAutoUpdate(), this.disableAutoUpdate = v(this.inputEl, this.listboxContainerEl, this.reposition.bind(this), { animationFrame: !0 }), this.listboxContainerEl.scrollTop = 0, this.updateSuggestions(this.inputEl.querySelector("input").value);
+    }));
+  }
+  async reposition() {
+    !Boolean(this.listboxContainerEl) || (this.position = await b(this.inputEl, this.listboxContainerEl, {
+      middleware: [y({ crossAxis: -16, mainAxis: 16 })],
+      placement: "bottom-start",
+      strategy: "fixed"
+    }));
+  }
+  async updateSuggestions(i) {
+    this.loading = !0, this.suggestions = [], this.suggestions = await this.generateSuggestions(i), this.loading = !1;
+  }
+  handleInitialValue() {
+    this.multiSelect && !Array.isArray(this.value) && (this.value = []), !this.multiSelect && Array.isArray(this.value) && (this.value = void 0);
+  }
+  render() {
+    var a, u, r, h;
+    const i = `${this.id}-suggestions`, t = this.clearable && !this.multiSelect, s = this.multiSelect ? this.value.map((e) => e.id) : Boolean(this.value) ? [this.value.id] : [], n = this.multiSelect ? void 0 : ((a = this.value) == null ? void 0 : a.label) || "", l = w("autocomplete", {
+      "autocomplete--inactive": !this.active
+    });
+    return o(g, null, o("div", { class: l, onKeyDown: this.onKeyDown }, this.multiSelect && Array.isArray(this.value) && this.value.length > 0 && o("div", { class: "autocomplete__multi-select-tags" }, o("swirl-stack", { orientation: "horizontal", spacing: "8", wrap: !0 }, this.value.map((e) => o("swirl-tag", {
+      key: e.id,
+      label: e.label,
+      onRemove: () => this.onRemoveValue(e.id),
+      removable: !this.disabled
+    })))), o("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: t, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: !0, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (e) => this.inputEl = e, required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: i, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: n }), o("div", { class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (e) => this.listboxContainerEl = e, style: {
+      top: Boolean(this.position) ? `${(u = this.position) == null ? void 0 : u.y}px` : "",
+      left: Boolean(this.position) ? `${(r = this.position) == null ? void 0 : r.x}px` : "",
+      width: `${((h = this.inputEl) == null ? void 0 : h.getBoundingClientRect().width) + 32}px`
+    } }, this.loading && o("div", { class: "autocomplete__spinner" }, o("swirl-spinner", null)), this.suggestions.length > 0 && o("swirl-option-list", { allowDeselect: this.multiSelect === !0, label: this.menuLabel, multiSelect: this.multiSelect, onValueChange: this.onSelect, optionListId: i, ref: (e) => this.listboxEl = e, value: s }, this.suggestions.map((e) => {
+      var c;
+      return o("swirl-option-list-item", { selected: Array.isArray(this.value) ? this.value.some((d) => d.id === e.id) : ((c = this.value) == null ? void 0 : c.id) === e.id, key: e.id, disabled: e.disabled, label: e.label, value: e.id });
+    })))));
+  }
+  get el() {
+    return f(this);
+  }
+  static get watchers() {
+    return {
+      multiSelect: ["watchMultiSelect"]
+    };
+  }
+};
+A.style = x;
+export {
+  A as swirl_autocomplete
+};

package/dist/{swirl-avatar-group.entry.b0b1dd62.js → swirl-avatar-group.entry.4047e3bd.js}

@@ -1,8 +1,8 @@
-import { r as s, h as a, H as d } from "./index.d90adc50.js";
-import { c as e } from "./index-267776a4.6beb4f4b.js";
+import { r as s, h as a, H as i } from "./index.646f8b70.js";
+import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";
-const i = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group ::slotted(*:first-of-type){z-index:1;display:inline-flex;box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);border-radius:50%;grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border-radius:50%;grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group__badge{position:absolute;z-index:2;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4));display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}", l = i, n = class {
+const d = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group ::slotted(*:first-of-type){z-index:1;display:inline-flex;box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);border-radius:50%;grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border-radius:50%;grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group__badge{position:absolute;z-index:2;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4));display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}", l = class {
   constructor(r) {
     s(this, r), this.badge = void 0;
   }
@@ -18,11 +18,11 @@ const i = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group
   render() {
     const r = e("avatar-group", {
       "avatar-group--has-badge": Boolean(this.badge)
-    }), t = e("avatar-group__badge");
-    return a(d, { key: "e02f0e18d9cd865c9c3c838b9472791a1a096b3b" }, a("div", { key: "2988b12f490489eb227b1ec34b84f162727f5de3", class: r, role: "group" }, a("slot", { key: "5bfbfcf2d903a5c6f08d8b33b8fe4ad042d1fc53" }), this.badge && a("span", { key: "eb32a56753f85b85521ddc1089ed8692d550d3fd", class: t, innerHTML: this.badge, ref: (o) => this.badgeEl = o })));
+    }), o = e("avatar-group__badge");
+    return a(i, null, a("div", { class: r, role: "group" }, a("slot", null), this.badge && a("span", { class: o, innerHTML: this.badge, ref: (t) => this.badgeEl = t })));
   }
 };
-n.style = l;
+l.style = d;
 export {
-  n as swirl_avatar_group
+  l as swirl_avatar_group
 };

package/dist/{swirl-avatar.entry.d594715d.js → swirl-avatar.entry.ffcd08e3.js}

@@ -1,8 +1,8 @@
-import { r as g, c as n, h as i, H as f, g as b } from "./index.d90adc50.js";
-import { c as r } from "./index-267776a4.6beb4f4b.js";
+import { r as g, c as n, h as i, H as m, g as u } from "./index.646f8b70.js";
+import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";
-const m = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-3xs{width:1.25rem;height:1.25rem;font-size:0.625rem}.avatar--size-3xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-3xs.avatar--variant-square,.avatar--size-3xs.avatar--variant-square .avatar__image,.avatar--size-3xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-2xs{width:1.5rem;height:1.5rem;font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs.avatar--variant-square,.avatar--size-2xs.avatar--variant-square .avatar__image,.avatar--size-2xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-xs{width:1.75rem;height:1.75rem;font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem;font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem;font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem;font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem;font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem;font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:2.25rem}.avatar--size-2xl .avatar__tool{transform:none}.avatar--size-2xl .avatar__tool--position-top{transform:none}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{position:absolute;display:inline-flex;min-width:0;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;font-weight:var(--s-font-weight-medium);inset:0}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}.avatar__tool{position:absolute;right:0;bottom:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}", u = m, o = {
+const p = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-3xs{width:1.25rem;height:1.25rem;font-size:0.625rem}.avatar--size-3xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-3xs.avatar--variant-square,.avatar--size-3xs.avatar--variant-square .avatar__image,.avatar--size-3xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-2xs{width:1.5rem;height:1.5rem;font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs.avatar--variant-square,.avatar--size-2xs.avatar--variant-square .avatar__image,.avatar--size-2xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-xs{width:1.75rem;height:1.75rem;font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem;font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem;font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem;font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem;font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem;font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:2.25rem}.avatar--size-2xl .avatar__tool{transform:none}.avatar--size-2xl .avatar__tool--position-top{transform:none}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{position:absolute;display:inline-flex;min-width:0;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;font-weight:var(--s-font-weight-medium);inset:0}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}.avatar__tool{position:absolute;right:0;bottom:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}", o = {
   "3xs": 20,
   "2xs": 24,
   xs: 28,
@@ -11,7 +11,7 @@ const m = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direc
   l: 48,
   xl: 64,
   "2xl": 144
-}, p = class {
+}, b = class {
   constructor(t) {
     g(this, t), this.imageError = n(this, "imageError", 7), this.imageLoad = n(this, "imageLoad", 7), this.setImageAvailable = () => {
       this.imageAvailable = !0, this.loadingError = !1, this.loaded = !0, this.imageLoad.emit();
@@ -42,15 +42,15 @@ const m = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direc
     this.inViewport = t.some((a) => a.isIntersecting);
   }
   render() {
-    const t = Boolean(this.src) && (this.imageAvailable || this.imageAvailable === void 0) && (this.loading !== "intersecting" || this.inViewport), a = (!t || !this.loaded && !this.loadingError) && Boolean(this.initials), e = !t && !a && Boolean(this.icon), s = !t && !a && !e, d = Boolean(this.badge) && this.size === "m", v = this.interactive ? "button" : void 0, l = r("avatar", `avatar--color-${this.color}`, `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
+    const t = Boolean(this.src) && (this.imageAvailable || this.imageAvailable === void 0) && (this.loading !== "intersecting" || this.inViewport), a = (!t || !this.loaded && !this.loadingError) && Boolean(this.initials), e = !t && !a && Boolean(this.icon), s = !t && !a && !e, l = Boolean(this.badge) && this.size === "m", v = this.interactive ? "button" : void 0, d = r("avatar", `avatar--color-${this.color}`, `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
       "avatar--has-icon": e || s,
       "avatar--has-initials": a,
       "avatar--interactive": this.interactive
     }), c = r("avatar__badge", `avatar__badge--position-${this.badgePosition}`), h = r("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
-    return i(f, { key: "38e7fdc01d2cecd4d17a2fa040c61ffe1c8a8592", "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : void 0, onKeyup: this.interactive ? this.onKeyup : void 0, role: v, tabIndex: this.interactive ? 0 : void 0 }, i("span", { key: "d3b5aff230c79d4b77fb68d7ba8627c9f1f457db", class: l, part: "avatar" }, t && i("span", { key: "f849bd9c9fb03744706fd2359d32e97f96331bbd", class: "avatar__image" }, i("img", { key: "af33045f4385a047dbba8eb5336f1608552bb947", alt: "", height: o[this.size], loading: this.loading !== "intersecting" ? this.loading : void 0, onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: o[this.size] })), a && i("span", { key: "6d1bad70e7a6afa0d74780fc730d18b196193924", class: "avatar__initials" }, i("span", { key: "b65c566aa22a4a208511967969aad5b8d9665f79" }, this.initials)), e && i("span", { key: "bc0f43846240cb026d6762814e1d8d0719e10577", class: "avatar__icon", innerHTML: this.icon }), s && i("span", { key: "046588d4ddc12fca345e48c691691f6404d0fd29", class: "avatar__icon" }, i("swirl-icon-person", { key: "67d6eedba866483ed582a06a6e6e3292cf3970c0" })), d && i("span", { key: "682c1ab0a83634fedf76a5188992a5a7a55d68d8", class: c, innerHTML: this.badge }), i("span", { key: "815f38e18f11e8938f1483fee33a7cd51dba23a4", class: h }, i("slot", { key: "c83f80bd8a67386bf75c7d7182e22f87352be94d", name: "tool" }))), this.showLabel && i("span", { key: "e71fb04bfb8f8a9dca53a13eb510d2c037bd07ca", "aria-hidden": !0, class: "avatar__label" }, this.label));
+    return i(m, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : void 0, onKeyup: this.interactive ? this.onKeyup : void 0, role: v, tabIndex: this.interactive ? 0 : void 0 }, i("span", { class: d, part: "avatar" }, t && i("span", { class: "avatar__image" }, i("img", { alt: "", height: o[this.size], loading: this.loading !== "intersecting" ? this.loading : void 0, onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: o[this.size] })), a && i("span", { class: "avatar__initials" }, i("span", null, this.initials)), e && i("span", { class: "avatar__icon", innerHTML: this.icon }), s && i("span", { class: "avatar__icon" }, i("swirl-icon-person", null)), l && i("span", { class: c, innerHTML: this.badge }), i("span", { class: h }, i("slot", { name: "tool" }))), this.showLabel && i("span", { "aria-hidden": !0, class: "avatar__label" }, this.label));
   }
   get element() {
-    return b(this);
+    return u(this);
   }
   static get watchers() {
     return {
@@ -58,7 +58,7 @@ const m = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direc
     };
   }
 };
-p.style = u;
+b.style = p;
 export {
-  p as swirl_avatar
+  b as swirl_avatar
 };

package/dist/{swirl-badge.entry.b522f992.js → swirl-badge.entry.fa985e6c.js}

@@ -1,8 +1,8 @@
-import { r as i, h as e, F as t, H as r } from "./index.d90adc50.js";
-import { c as s } from "./index-267776a4.6beb4f4b.js";
+import { r as i, h as e, F as t, H as r } from "./index.646f8b70.js";
+import { c as s } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";
-const d = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);box-shadow:0 0 0 0.125rem var(--swirl-badge-border-color)}.badge--size-xs{min-width:1rem;height:1rem;font-size:0.6875rem}.badge--size-xs .badge__label{padding-right:0.25rem;padding-left:0.25rem}.badge--size-xs .badge__icon>swirl-icon,.badge--size-xs .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-s{min-width:1.25rem;height:1.25rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--size-s .badge__icon>swirl-icon,.badge--size-s .badge__icon>*::part(icon){width:1rem;height:1rem}.badge--size-m{min-width:1.5rem;height:1.5rem}.badge--size-m .badge__label{padding-right:0.4375rem;padding-left:0.4375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.badge--intent-banana{color:var(--s-text-dark);background-color:var(--s-decorative-banana-surface)}.badge--intent-blueberry{color:var(--s-text-on-status);background-color:var(--s-decorative-blueberry-surface)}.badge--intent-chilli{color:var(--s-text-on-status);background-color:var(--s-decorative-chilli-surface)}.badge--intent-grape{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.badge--intent-kiwi{color:var(--s-text-on-status);background-color:var(--s-decorative-kiwi-surface)}.badge--intent-neutral{color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued)}.badge--intent-pumpkin{color:var(--s-text-dark);background-color:var(--s-decorative-pumpkin-surface)}.badge--intent-radish{color:var(--s-text-on-status);background-color:var(--s-decorative-radish-surface)}.badge--variant-dot{width:1.5rem;min-width:0;height:1.5rem}.badge--variant-dot.badge--size-xs{width:0.5rem;height:0.5rem}.badge--variant-dot.badge--size-s{width:0.75rem;height:0.75rem}.badge--variant-dot.badge--size-m{width:1rem;height:1rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>swirl-icon,.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}", n = d, o = class {
+const n = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);box-shadow:0 0 0 0.125rem var(--swirl-badge-border-color)}.badge--size-xs{min-width:1rem;height:1rem;font-size:0.6875rem}.badge--size-xs .badge__label{padding-right:0.25rem;padding-left:0.25rem}.badge--size-xs .badge__icon>swirl-icon,.badge--size-xs .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-s{min-width:1.25rem;height:1.25rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--size-s .badge__icon>swirl-icon,.badge--size-s .badge__icon>*::part(icon){width:1rem;height:1rem}.badge--size-m{min-width:1.5rem;height:1.5rem}.badge--size-m .badge__label{padding-right:0.4375rem;padding-left:0.4375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.badge--intent-banana{color:var(--s-text-dark);background-color:var(--s-decorative-banana-surface)}.badge--intent-blueberry{color:var(--s-text-on-status);background-color:var(--s-decorative-blueberry-surface)}.badge--intent-chilli{color:var(--s-text-on-status);background-color:var(--s-decorative-chilli-surface)}.badge--intent-grape{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.badge--intent-kiwi{color:var(--s-text-on-status);background-color:var(--s-decorative-kiwi-surface)}.badge--intent-neutral{color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued)}.badge--intent-pumpkin{color:var(--s-text-dark);background-color:var(--s-decorative-pumpkin-surface)}.badge--intent-radish{color:var(--s-text-on-status);background-color:var(--s-decorative-radish-surface)}.badge--variant-dot{width:1.5rem;min-width:0;height:1.5rem}.badge--variant-dot.badge--size-xs{width:0.5rem;height:0.5rem}.badge--variant-dot.badge--size-s{width:0.75rem;height:0.75rem}.badge--variant-dot.badge--size-m{width:1rem;height:1rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>swirl-icon,.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}", d = class {
   constructor(a) {
     i(this, a), this.icon = void 0, this.intent = "critical", this.label = void 0, this.size = "m", this.variant = "default";
   }
@@ -10,10 +10,10 @@ const d = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:
     const a = s("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
       "badge--has-icon": this.icon
     });
-    return e(r, { key: "2a45ce5f53ccce7f5f9adfbb89b0ccb2eeb8f32b", role: "status" }, e("span", { key: "0867e1cb3bcb784ac62b398b507b0fdde199980a", class: a, part: "badge" }, this.icon && e("span", { key: "4925c5a12325a6b138efc8111bf4a84291ad808d", class: "badge__icon", innerHTML: this.icon }), this.icon === void 0 && this.variant !== "dot" ? e("span", { class: "badge__label" }, this.label) : e(t, null, this.icon === void 0 && e("span", { class: "badge__label" }, "\xA0"), e("swirl-visually-hidden", null, this.label))));
+    return e(r, { role: "status" }, e("span", { class: a, part: "badge" }, this.icon && e("span", { class: "badge__icon", innerHTML: this.icon }), this.icon === void 0 && this.variant !== "dot" ? e("span", { class: "badge__label" }, this.label) : e(t, null, this.icon === void 0 && e("span", { class: "badge__label" }, "\xA0"), e("swirl-visually-hidden", null, this.label))));
   }
 };
-o.style = n;
+d.style = n;
 export {
-  o as swirl_badge
+  d as swirl_badge
 };

package/dist/{swirl-banner.entry.21eae081.js → swirl-banner.entry.f3c1eb8d.js}

@@ -1,17 +1,17 @@
-import { r as o, c as r, h as t, H as c, g as b } from "./index.d90adc50.js";
-import { c as d } from "./index-267776a4.6beb4f4b.js";
-import { g as l } from "./utils-aab10c80.240adddc.js";
+import { r as o, c as r, h as t, H as c, g as l } from "./index.646f8b70.js";
+import { c as b } from "./index-d280dafb.186cdb0e.js";
+import { g as d } from "./utils-c5f2f98f.af14538a.js";
 import "react";
 import "react-dom";
-const h = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;max-width:100%;padding:var(--s-space-12);align-items:baseline}.banner:focus:not(:focus-visible){outline:none}.banner:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}@media (min-width: 768px){.banner{padding:var(--s-space-16)}}.banner--size-s{padding:var(--s-space-8);justify-content:center}.banner--size-s .banner__content{margin-right:var(--s-space-8);flex-grow:0;text-align:center}.banner--size-s .banner__controls{margin-right:var(--s-space-4);margin-left:0}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}@media (min-width: 375px){.banner--has-icon .banner__content{padding-top:var(--s-space-2)}}.banner__icon{position:relative;top:var(--s-space-4);display:none;width:1.5rem;height:1.5rem;margin-right:var(--s-space-8);flex-shrink:0;color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__icon{width:1.25rem;height:1.25rem}}.banner__content{min-height:1.5rem;margin-right:var(--s-space-12);flex-grow:1;line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.banner__controls{display:inline-flex;margin-left:var(--s-space-16);flex-shrink:0;align-items:center;line-height:var(--s-line-height-base);gap:var(--s-space-16)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__action-button,.banner__dismiss-button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}", u = h, _ = {
+const h = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;max-width:100%;padding:var(--s-space-12);align-items:baseline}.banner:focus:not(:focus-visible){outline:none}.banner:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}@media (min-width: 768px){.banner{padding:var(--s-space-16)}}.banner--size-s{padding:var(--s-space-8);justify-content:center}.banner--size-s .banner__content{margin-right:var(--s-space-8);flex-grow:0;text-align:center}.banner--size-s .banner__controls{margin-right:var(--s-space-4);margin-left:0}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}@media (min-width: 375px){.banner--has-icon .banner__content{padding-top:var(--s-space-2)}}.banner__icon{position:relative;top:var(--s-space-4);display:none;width:1.5rem;height:1.5rem;margin-right:var(--s-space-8);flex-shrink:0;color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__icon{width:1.25rem;height:1.25rem}}.banner__content{min-height:1.5rem;margin-right:var(--s-space-12);flex-grow:1;line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.banner__controls{display:inline-flex;margin-left:var(--s-space-16);flex-shrink:0;align-items:center;line-height:var(--s-line-height-base);gap:var(--s-space-16)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__action-button,.banner__dismiss-button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}", u = {
   default: void 0,
   critical: "<swirl-icon-error></swirl-icon-error>",
   success: "<swirl-icon-check-circle></swirl-icon-check-circle>",
   warning: "<swirl-icon-warning></swirl-icon-warning>",
   info: "<swirl-icon-info></swirl-icon-info>"
-}, m = class {
+}, _ = class {
   constructor(e) {
-    o(this, e), this.action = r(this, "action", 7), this.dismiss = r(this, "dismiss", 7), this.desktopMediaQuery = l(), this.desktopMediaQueryHandler = (n) => {
+    o(this, e), this.action = r(this, "action", 7), this.dismiss = r(this, "dismiss", 7), this.desktopMediaQuery = d(), this.desktopMediaQueryHandler = (n) => {
       this.forceIconProps(n.matches);
     }, this.onAction = (n) => {
       this.action.emit(n);
@@ -27,21 +27,21 @@ const h = ":host{display:block}:host *{box-sizing:border-box}.banner{display:fle
     (n = (e = this.desktopMediaQuery).removeEventListener) == null || n.call(e, "change", this.desktopMediaQueryHandler);
   }
   forceIconProps(e) {
-    var s, a;
-    const n = (s = this.iconEl) == null ? void 0 : s.children[0], i = (a = this.dismissButtonEl) == null ? void 0 : a.children[0];
+    var a, s;
+    const n = (a = this.iconEl) == null ? void 0 : a.children[0], i = (s = this.dismissButtonEl) == null ? void 0 : s.children[0];
     n == null || n.setAttribute("size", e ? "20" : "24"), i == null || i.setAttribute("size", e ? "20" : "24");
   }
   render() {
-    const e = _[this.intent], n = Boolean(this.actionLabel) || this.dismissable, i = this.showIcon && Boolean(e), s = d("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
+    const e = u[this.intent], n = Boolean(this.actionLabel) || this.dismissable, i = this.showIcon && Boolean(e), a = b("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
       "banner--has-icon": i
     });
-    return t(c, { key: "07d33fc4becf28c6cc8a1f8ee55dafd8901517bd" }, t("div", { key: "9c9777af65ac7cbf5cbe96e9e0e8a4a11de51b51", "aria-describedby": "content", class: s, role: this.importance, tabIndex: 0 }, i && t("span", { key: "8fd19b6c76c6099a4c6bed60a60e1620f70d3231", "aria-hidden": "true", class: "banner__icon", innerHTML: e, ref: (a) => this.iconEl = a }), t("span", { key: "3c2b010a0aea6b5f6209377c7d7958376727a52d", class: "banner__content", id: "content", part: "banner__content" }, this.content), n && t("span", { key: "1ad76a5b68311dac146d445e1bef67afb8b5717c", class: "banner__controls" }, this.actionLabel && t("button", { key: "9618952a10c602393b60c78c4c099a8795546e46", class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel), this.dismissable && t("button", { key: "679aa8fa019ba3b66cc89186b7b82b3db1d37d25", "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (a) => this.dismissButtonEl = a, type: "button" }, t("swirl-icon-close", { key: "2a20acc3fba4ed3ad379a8839e88a040d4c4d304" })))));
+    return t(c, null, t("div", { "aria-describedby": "content", class: a, role: this.importance, tabIndex: 0 }, i && t("span", { "aria-hidden": "true", class: "banner__icon", innerHTML: e, ref: (s) => this.iconEl = s }), t("span", { class: "banner__content", id: "content", part: "banner__content" }, this.content), n && t("span", { class: "banner__controls" }, this.actionLabel && t("button", { class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel), this.dismissable && t("button", { "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (s) => this.dismissButtonEl = s, type: "button" }, t("swirl-icon-close", null)))));
   }
   get element() {
-    return b(this);
+    return l(this);
   }
 };
-m.style = u;
+_.style = h;
 export {
-  m as swirl_banner
+  _ as swirl_banner
 };

package/dist/{swirl-box.entry.316b757d.js → swirl-box.entry.be54a348.js}

@@ -1,12 +1,12 @@
-import { r as t, h as i, H as n } from "./index.d90adc50.js";
-import { c as s } from "./index-267776a4.6beb4f4b.js";
+import { r as t, h as i, H as n } from "./index.646f8b70.js";
+import { c as s } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";
 const r = `:host{display:block;width:100%}:host(.box--bordered){border:var(--s-border-width-default) solid var(--s-border-default)}:host(.box--bordered-block-end){border-block-end:var(--s-border-width-default) solid
       var(--s-border-default)}:host(.box--bordered-block-start){border-block-start:var(--s-border-width-default) solid
       var(--s-border-default)}:host(.box--bordered-inline-end){border-inline-end:var(--s-border-width-default) solid
       var(--s-border-default)}:host(.box--bordered-inline-start){border-inline-start:var(--s-border-width-default) solid
-      var(--s-border-default)}:host(.box--cover){width:100%;height:100%}:host *{box-sizing:border-box}`, o = r, h = class {
+      var(--s-border-default)}:host(.box--cover){width:100%;height:100%}:host *{box-sizing:border-box}`, o = class {
   constructor(e) {
     t(this, e), this.bordered = void 0, this.borderedBlockEnd = void 0, this.borderedBlockStart = void 0, this.borderedInlineEnd = void 0, this.borderedInlineStart = void 0, this.bottom = void 0, this.centerBlock = void 0, this.centerInline = void 0, this.cover = void 0, this.height = void 0, this.left = void 0, this.maxHeight = void 0, this.minHeight = void 0, this.maxWidth = void 0, this.minWidth = void 0, this.overflow = "visible", this.padding = "0", this.paddingBlockEnd = void 0, this.paddingBlockStart = void 0, this.paddingInlineEnd = void 0, this.paddingInlineStart = void 0, this.position = void 0, this.right = void 0, this.basis = void 0, this.shrink = void 0, this.grow = void 0, this.top = void 0, this.width = void 0, this.zIndex = void 0;
   }
@@ -44,10 +44,10 @@ const r = `:host{display:block;width:100%}:host(.box--bordered){border:var(--s-b
       "box--bordered-inline-start": this.borderedInlineStart,
       "box--cover": this.cover
     });
-    return i(n, { key: "5b28d6319c3bbf3b67dfa4f7aa655f2653e4f956", class: d, style: e }, i("slot", { key: "4eea4e40c5678cf0f8682b6c9b22094ae9017bdf" }));
+    return i(n, { class: d, style: e }, i("slot", null));
   }
 };
-h.style = o;
+o.style = r;
 export {
-  h as swirl_box
+  o as swirl_box
 };

package/dist/{swirl-button-group.entry.e4cbd09f.js → swirl-button-group.entry.a161ed66.js}

@@ -1,19 +1,19 @@
-import { r as s, h as r, H as e } from "./index.d90adc50.js";
-import { c as i } from "./index-267776a4.6beb4f4b.js";
+import { r as s, h as r, H as i } from "./index.646f8b70.js";
+import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";
-const n = ':host{display:block}:host *{box-sizing:border-box}.button-group--segmented ::slotted(*:not(:last-child)){position:relative}.button-group--segmented ::slotted(*:not(:last-child)):after{position:absolute;z-index:1;top:50%;left:100%;width:var(--s-border-width-default);height:calc(100% - var(--s-space-16));background-color:var(--s-border-strong);content:"";transform:translate3d(-50%, -50%, 0);pointer-events:none}.button-group--segmented ::slotted(*:not(:last-child):not([disabled])[intent="primary"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:last-child)[disabled="false"][intent="primary"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:first-child):not(:last-child)){--swirl-button-border-top-right-radius:0;--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-bottom-left-radius:0}.button-group--segmented ::slotted(*:first-child){--swirl-button-border-top-right-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-left-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-left-radius:var(--s-border-radius-base)}.button-group--segmented ::slotted(*:last-child){--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-left-radius:0}', a = n, d = class {
+const n = ':host{display:block}:host *{box-sizing:border-box}.button-group--segmented ::slotted(*:not(:last-child)){position:relative}.button-group--segmented ::slotted(*:not(:last-child)):after{position:absolute;z-index:1;top:50%;left:100%;width:var(--s-border-width-default);height:calc(100% - var(--s-space-16));background-color:var(--s-border-strong);content:"";transform:translate3d(-50%, -50%, 0);pointer-events:none}.button-group--segmented ::slotted(*:not(:last-child):not([disabled])[intent="primary"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:last-child)[disabled="false"][intent="primary"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:first-child):not(:last-child)){--swirl-button-border-top-right-radius:0;--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-bottom-left-radius:0}.button-group--segmented ::slotted(*:first-child){--swirl-button-border-top-right-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-left-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-left-radius:var(--s-border-radius-base)}.button-group--segmented ::slotted(*:last-child){--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-left-radius:0}', d = class {
   constructor(t) {
     s(this, t), this.orientation = "horizontal", this.segmented = void 0, this.stretch = void 0, this.wrap = void 0;
   }
   render() {
-    const t = this.segmented ? "0" : "8", o = i("button-group", {
+    const t = this.segmented ? "0" : "8", o = e("button-group", {
       "button-group--segmented": this.segmented
     });
-    return r(e, { key: "89c99c8d5ffffea1a5a095c0c23f39765638088a" }, r("swirl-stack", { key: "29e4f5727e064a63793fd5e3508edc53a82eaa33", align: this.orientation === "vertical" && this.stretch ? "stretch" : "start", class: o, justify: this.orientation === "horizontal" && this.stretch ? "stretch" : "start", orientation: this.orientation, role: "group", spacing: t, wrap: this.wrap }, r("slot", { key: "6697dc0fa396646ffed0ae32bd9408c1f86278b1" })));
+    return r(i, null, r("swirl-stack", { align: this.orientation === "vertical" && this.stretch ? "stretch" : "start", class: o, justify: this.orientation === "horizontal" && this.stretch ? "stretch" : "start", orientation: this.orientation, role: "group", spacing: t, wrap: this.wrap }, r("slot", null)));
   }
 };
-d.style = a;
+d.style = n;
 export {
   d as swirl_button_group
 };

package/dist/{swirl-button.entry.912843e7.js → swirl-button.entry.6b2c06ea.js}

@@ -1,6 +1,6 @@
-import { r as l, h as n, H as u, g as b } from "./index.d90adc50.js";
-import { c } from "./index-267776a4.6beb4f4b.js";
-import { g as d } from "./utils-aab10c80.240adddc.js";
+import { r as l, h as n, H as u, g as b } from "./index.646f8b70.js";
+import { c } from "./index-d280dafb.186cdb0e.js";
+import { g as d } from "./utils-c5f2f98f.af14538a.js";
 import "react";
 import "react-dom";
 const v = `.sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h *.sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8)}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button.sc-swirl-button:disabled{color:var(--s-text-disabled);background-color:var(--swirl-ghost-button-background-disabled);cursor:default}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus:not(:focus-visible){outline:none}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:not(:disabled){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:not(:disabled){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:not(:disabled){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--swirl-flat-button-background-default)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.button--intent-critical.sc-swirl-button:not(:disabled){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:not(:disabled):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:not(:disabled):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-on-status)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-outline.sc-swirl-button{color:var(--s-text-default);box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.button--variant-outline.sc-swirl-button:disabled{box-shadow:inset 0 0 0 var(--s-border-width-default)
@@ -10,7 +10,7 @@ const v = `.sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}
       --swirl-icon-button-border-bottom-right-radius
     );border-bottom-left-radius:var(
       --swirl-icon-button-border-bottom-left-radius
-    )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__icon.sc-swirl-button{display:none;width:1.5rem;height:1.5rem;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}`, h = v, p = class {
+    )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__icon.sc-swirl-button{display:none;width:1.5rem;height:1.5rem;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}`, h = class {
   constructor(o) {
     l(this, o), this.desktopMediaQuery = d(), this.desktopMediaQueryHandler = (t) => {
       this.forceIconProps(t.matches);
@@ -49,13 +49,13 @@ const v = `.sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}
       "button--pill": this.pill,
       "button--pressed": this.pressed
     }), e = t ? "a" : "button";
-    return n(u, { key: "7d719f3ef4afaae11d9aa0b2c33688580235dd4e", style: { pointerEvents: this.disabled ? "none" : "" } }, n(e, { key: "a941a9e733e8cfaf16df4bb300d53b0dd8c3f780", "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !t ? "true" : void 0, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": r, "aria-pressed": this.pressed ? "true" : void 0, class: s, disabled: t ? void 0 : this.disabled, download: t ? void 0 : this.download, form: t ? void 0 : this.form, href: this.href, name: t ? void 0 : this.name, ref: (i) => this.buttonEl = i, target: t ? this.target : void 0, type: t ? void 0 : this.type, value: t ? void 0 : this.value }, Boolean(this.icon) && n("span", { key: "ff7e73cd6ee3b3998df2bbe4e005cfb8c49be4ae", class: "button__icon", innerHTML: this.icon, ref: (i) => this.iconEl = i }), !Boolean(this.icon) && n("span", { key: "745e363039c10c2e6e87dbf856dc2c95ca875bd3", class: "button__icon", ref: (i) => this.iconEl = i }, n("slot", { key: "2a9290d1c541a7c722df8091e276882529d153fb", name: "icon" })), !o && n("span", { key: "bc4a31bf5fc32cf0b60052c79ee19416309e0a42", class: "button__label" }, this.label)));
+    return n(u, { style: { pointerEvents: this.disabled ? "none" : "" } }, n(e, { "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !t ? "true" : void 0, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": r, "aria-pressed": this.pressed ? "true" : void 0, class: s, disabled: t ? void 0 : this.disabled, download: t ? void 0 : this.download, form: t ? void 0 : this.form, href: this.href, name: t ? void 0 : this.name, ref: (i) => this.buttonEl = i, target: t ? this.target : void 0, type: t ? void 0 : this.type, value: t ? void 0 : this.value }, Boolean(this.icon) && n("span", { class: "button__icon", innerHTML: this.icon, ref: (i) => this.iconEl = i }), !Boolean(this.icon) && n("span", { class: "button__icon", ref: (i) => this.iconEl = i }, n("slot", { name: "icon" })), !o && n("span", { class: "button__label" }, this.label)));
   }
   get el() {
     return b(this);
   }
 };
-p.style = h;
+h.style = v;
 export {
-  p as swirl_button
+  h as swirl_button
 };

package/dist/{swirl-card.entry.34ed81bd.js → swirl-card.entry.e9d2c0c4.js}

@@ -1,5 +1,5 @@
-import { r as t, h as e, H as n, g as o } from "./index.d90adc50.js";
-import { c } from "./index-267776a4.6beb4f4b.js";
+import { r as t, h as e, H as n, g as o } from "./index.646f8b70.js";
+import { c } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";
 const l = `:host{display:contents}:host *{box-sizing:border-box}.card{--swirl-ghost-button-background-default:var(--s-surface-default);--swirl-ghost-button-background-hovered:var(--s-surface-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-pressed);--swirl-resource-list-item-background-default:var(--s-surface-default);--swirl-resource-list-item-background-hovered:var(--s-surface-hovered);--swirl-resource-list-item-background-pressed:var(--s-surface-pressed);display:flex;overflow:hidden;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--swirl-card-background-default);font:inherit;text-decoration:none;flex-direction:column;transition:background-color 0.2s}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{background-color:var(--swirl-card-background-hovered)}a.card:active,button.card:active,.card--interactive:active{background-color:var(--swirl-card-background-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.card--is--borderless{border:0}.card--elevated.card--elevation-level-1{box-shadow:var(--s-shadow-level-1)}.card--elevated.card--elevation-level-2{box-shadow:var(--s-shadow-level-2)}.card--elevated.card--elevation-level-3{box-shadow:var(--s-shadow-level-3)}.card--flashing{background-color:var(--swirl-card-background-pressed)}.card--flashing.card--intent-default-subdued{background-color:var(--s-surface-raised-pressed)}.card--flashing.card--intent-highlight{background-color:var(--s-surface-highlight-pressed)}.card--highlighted{border-width:0.1875rem;border-color:var(--s-border-highlight)}.card--justify-content-start .card__body{justify-content:flex-start}.card--justify-content-center .card__body{justify-content:center}.card--justify-content-end .card__body{justify-content:flex-end}:not(.card--has-image) .card__image{overflow:hidden;height:0}.card--intent-critical-subdued{background-color:var(--s-surface-critical-subdued)}.card--intent-default-subdued{--swirl-resource-list-item-background-default:var(
@@ -8,41 +8,42 @@ const l = `:host{display:contents}:host *{box-sizing:border-box}.card{--swirl-gh
     --s-surface-raised-hovered
   );--swirl-resource-list-item-background-pressed:var(
     --s-surface-raised-pressed
-  );--swirl-ghost-button-background-default:var(--s-surface-raised-default);--swirl-ghost-button-background-hovered:var(--s-surface-raised-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-raised-pressed);background-color:var(--s-surface-raised-default)}.card--intent-info-subdued{background-color:var(--s-surface-info-subdued)}.card--intent-success-subdued{background-color:var(--s-surface-success-subdued)}.card--intent-warning-subdued{background-color:var(--s-surface-warning-subdued)}.card--intent-highlight{color:var(--s-text-on-surface-highlight);background-color:var(--s-surface-highlight-default)}.content-section{padding:0 var(--s-space-16)}.card__image{overflow:hidden;min-height:0}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__body{display:flex;min-height:0;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-grow:1;flex-direction:column;gap:var(--s-space-16)}`, u = l, h = ["xs", "sm", "base", "l", "xl"], f = class {
-  constructor(a) {
-    t(this, a), this.as = "div", this.borderRadius = "base", this.elevated = void 0, this.elevationLevel = 3, this.height = void 0, this.highlighted = void 0, this.href = void 0, this.imageAspectRatio = void 0, this.intent = "default", this.isBorderless = void 0, this.interactive = void 0, this.justifyContent = "start", this.linkTarget = void 0, this.overflow = void 0, this.padding = void 0, this.paddingBlockEnd = void 0, this.paddingBlockStart = void 0, this.paddingInlineEnd = void 0, this.paddingInlineStart = void 0, this.swirlAriaLabel = void 0, this.swirlAriaLabelledby = void 0, this.flashing = !1;
+  );--swirl-ghost-button-background-default:var(--s-surface-raised-default);--swirl-ghost-button-background-hovered:var(--s-surface-raised-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-raised-pressed);background-color:var(--s-surface-raised-default)}.card--intent-info-subdued{background-color:var(--s-surface-info-subdued)}.card--intent-success-subdued{background-color:var(--s-surface-success-subdued)}.card--intent-warning-subdued{background-color:var(--s-surface-warning-subdued)}.card--intent-highlight{color:var(--s-text-on-surface-highlight);background-color:var(--s-surface-highlight-default)}.content-section{padding:0 var(--s-space-16)}.card__image{overflow:hidden;min-height:0}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__body{display:flex;min-height:0;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-grow:1;flex-direction:column;gap:var(--s-space-16)}`, u = ["xs", "sm", "base", "l", "xl"], h = class {
+  constructor(r) {
+    t(this, r), this.as = "div", this.borderRadius = "base", this.customBackgroundColor = void 0, this.elevated = void 0, this.elevationLevel = 3, this.height = void 0, this.highlighted = void 0, this.href = void 0, this.imageAspectRatio = void 0, this.intent = "default", this.isBorderless = void 0, this.interactive = void 0, this.justifyContent = "start", this.linkTarget = void 0, this.overflow = void 0, this.padding = void 0, this.paddingBlockEnd = void 0, this.paddingBlockStart = void 0, this.paddingInlineEnd = void 0, this.paddingInlineStart = void 0, this.swirlAriaLabel = void 0, this.swirlAriaLabelledby = void 0, this.flashing = !1;
   }
-  async flash(a = 5e3) {
+  async flash(r = 5e3) {
     Boolean(this.flashingTimeout) && (clearTimeout(this.flashingTimeout), this.flashingTimeout = void 0), this.flashing = !0, this.flashingTimeout = setTimeout(() => {
       this.flashing = !1;
-    }, a);
+    }, r);
   }
   render() {
-    const a = Boolean(this.href) ? "a" : this.as, r = Boolean(this.el.querySelector('[slot="image"]')), s = {
-      borderRadius: h.includes(this.borderRadius) ? `var(--s-border-radius-${this.borderRadius})` : this.borderRadius,
+    const r = Boolean(this.href) ? "a" : this.as, a = Boolean(this.el.querySelector('[slot="image"]')), s = {
+      borderRadius: u.includes(this.borderRadius) ? `var(--s-border-radius-${this.borderRadius})` : this.borderRadius,
       height: this.height,
       overflow: this.overflow
-    }, d = {
+    }, i = {
+      backgroundColor: this.customBackgroundColor,
       padding: Boolean(this.padding) ? `var(--s-space-${this.padding})` : void 0,
       paddingBlockEnd: Boolean(this.paddingBlockEnd) ? `var(--s-space-${this.paddingBlockEnd})` : void 0,
       paddingBlockStart: Boolean(this.paddingBlockStart) ? `var(--s-space-${this.paddingBlockStart})` : void 0,
       paddingInlineEnd: Boolean(this.paddingInlineEnd) ? `var(--s-space-${this.paddingInlineEnd})` : void 0,
       paddingInlineStart: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` : void 0
-    }, i = c("card", `card--elevation-level-${this.elevationLevel}`, `card--intent-${this.intent}`, `card--justify-content-${this.justifyContent}`, {
+    }, d = c("card", `card--elevation-level-${this.elevationLevel}`, `card--intent-${this.intent}`, `card--justify-content-${this.justifyContent}`, {
       "card--elevated": this.elevated,
       "card--flashing": this.flashing,
-      "card--has-image": r,
+      "card--has-image": a,
       "card--highlighted": this.highlighted,
       "card--interactive": this.interactive || this.href,
       "card--is--borderless": this.isBorderless
     });
-    return e(n, { key: "6e031871532fbeac97cb8bcf1b849dec5e8d779f", styles: { height: this.height } }, e(a, { key: "efb6ac72aa9f6a66ec030a1179a73ca3e0d537af", "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: i, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank" ? "noreferrer" : void 0, style: s, target: this.linkTarget }, e("div", { key: "9bd88c56e2ac6e1cc8f662e68d771c733d842479", class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, e("slot", { key: "777d13e5739ee0dc49f6a1e529fb604689ace4cb", name: "image" })), e("div", { key: "ed7a435c27cfcd1bf5e19e6416c858ecd0770ccd", class: "card__body", style: d }, e("div", { key: "5ff8fb796d4ad4f1f27fcf30a9e9bbb2b167b802", class: "card__content" }, e("slot", { key: "afea783ef86461afa98a81536fb94f716fae8379", name: "content" })))));
+    return e(n, { styles: { height: this.height } }, e(r, { "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: d, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank" ? "noreferrer" : void 0, style: s, target: this.linkTarget }, e("div", { class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, e("slot", { name: "image" })), e("div", { class: "card__body", style: i }, e("div", { class: "card__content" }, e("slot", { name: "content" })))));
   }
   get el() {
     return o(this);
   }
 };
-f.style = u;
+h.style = l;
 export {
-  f as swirl_card
+  h as swirl_card
 };

package/dist/swirl-carousel-slide.entry.7735b59c.js

@@ -0,0 +1,19 @@
+import { r as e, h as i, H as t } from "./index.646f8b70.js";
+import { c as l } from "./index-d280dafb.186cdb0e.js";
+import "react";
+import "react-dom";
+const o = ":host{display:block;min-width:0}:host(.carousel-slide--has-min-height) ::slotted(*){height:100%}:host *{box-sizing:border-box}:host ::slotted(*){width:100%;min-height:100%}", r = class {
+  constructor(s) {
+    e(this, s), this.label = void 0, this.minHeight = void 0, this.width = "15.5rem";
+  }
+  render() {
+    const s = l("carousel-slide", {
+      "carousel-slide--has-min-height": Boolean(this.minHeight)
+    });
+    return i(t, { "aria-roledescription": "slide", "aria-label": this.label, class: s, role: "group", style: { flexBasis: this.width, minHeight: this.minHeight }, tabIndex: 0 }, i("slot", null));
+  }
+};
+r.style = o;
+export {
+  r as swirl_carousel_slide
+};