@getflip/swirl-components-react 0.430.0 → 0.432.0-beta-20260202154637

package/dist/index.esm-DBTxpXCn.fccbd562.js

@@ -0,0 +1,187 @@
+/*!
+* tabbable 6.4.0
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+var C = ["input:not([inert]):not([inert] *)", "select:not([inert]):not([inert] *)", "textarea:not([inert]):not([inert] *)", "a[href]:not([inert]):not([inert] *)", "button:not([inert]):not([inert] *)", "[tabindex]:not(slot):not([inert]):not([inert] *)", "audio[controls]:not([inert]):not([inert] *)", "video[controls]:not([inert]):not([inert] *)", '[contenteditable]:not([contenteditable="false"]):not([inert]):not([inert] *)', "details>summary:first-of-type:not([inert]):not([inert] *)", "details:not([inert]):not([inert] *)"], h = /* @__PURE__ */ C.join(","), I = typeof Element > "u", d = I ? function() {
+} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector, v = !I && Element.prototype.getRootNode ? function(i) {
+  var t;
+  return i == null || (t = i.getRootNode) === null || t === void 0 ? void 0 : t.call(i);
+} : function(i) {
+  return i == null ? void 0 : i.ownerDocument;
+}, b = function(t, e) {
+  var r;
+  e === void 0 && (e = !0);
+  var a = t == null || (r = t.getAttribute) === null || r === void 0 ? void 0 : r.call(t, "inert"), l = a === "" || a === "true", n = l || e && t && (typeof t.closest == "function" ? t.closest("[inert]") : b(t.parentNode));
+  return n;
+}, E = function(t) {
+  var e, r = t == null || (e = t.getAttribute) === null || e === void 0 ? void 0 : e.call(t, "contenteditable");
+  return r === "" || r === "true";
+}, R = function(t, e, r) {
+  if (b(t))
+    return [];
+  var a = Array.prototype.slice.apply(t.querySelectorAll(h));
+  return e && d.call(t, h) && a.unshift(t), a = a.filter(r), a;
+}, g = function(t, e, r) {
+  for (var a = [], l = Array.from(t); l.length; ) {
+    var n = l.shift();
+    if (!b(n, !1))
+      if (n.tagName === "SLOT") {
+        var c = n.assignedElements(), s = c.length ? c : n.children, u = g(s, !0, r);
+        r.flatten ? a.push.apply(a, u) : a.push({
+          scopeParent: n,
+          candidates: u
+        });
+      } else {
+        var o = d.call(n, h);
+        o && r.filter(n) && (e || !t.includes(n)) && a.push(n);
+        var f = n.shadowRoot || typeof r.getShadowRoot == "function" && r.getShadowRoot(n), N = !b(f, !1) && (!r.shadowRootFilter || r.shadowRootFilter(n));
+        if (f && N) {
+          var y = g(f === !0 ? n.children : f.children, !0, r);
+          r.flatten ? a.push.apply(a, y) : a.push({
+            scopeParent: n,
+            candidates: y
+          });
+        } else
+          l.unshift.apply(l, n.children);
+      }
+  }
+  return a;
+}, T = function(t) {
+  return !isNaN(parseInt(t.getAttribute("tabindex"), 10));
+}, m = function(t) {
+  if (!t)
+    throw new Error("No node provided");
+  return t.tabIndex < 0 && (/^(AUDIO|VIDEO|DETAILS)$/.test(t.tagName) || E(t)) && !T(t) ? 0 : t.tabIndex;
+}, x = function(t, e) {
+  var r = m(t);
+  return r < 0 && e && !T(t) ? 0 : r;
+}, O = function(t, e) {
+  return t.tabIndex === e.tabIndex ? t.documentOrder - e.documentOrder : t.tabIndex - e.tabIndex;
+}, w = function(t) {
+  return t.tagName === "INPUT";
+}, k = function(t) {
+  return w(t) && t.type === "hidden";
+}, D = function(t) {
+  var e = t.tagName === "DETAILS" && Array.prototype.slice.apply(t.children).some(function(r) {
+    return r.tagName === "SUMMARY";
+  });
+  return e;
+}, F = function(t, e) {
+  for (var r = 0; r < t.length; r++)
+    if (t[r].checked && t[r].form === e)
+      return t[r];
+}, M = function(t) {
+  if (!t.name)
+    return !0;
+  var e = t.form || v(t), r = function(c) {
+    return e.querySelectorAll('input[type="radio"][name="' + c + '"]');
+  }, a;
+  if (typeof window < "u" && typeof window.CSS < "u" && typeof window.CSS.escape == "function")
+    a = r(window.CSS.escape(t.name));
+  else
+    try {
+      a = r(t.name);
+    } catch (n) {
+      return console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s", n.message), !1;
+    }
+  var l = F(a, t.form);
+  return !l || l === t;
+}, P = function(t) {
+  return w(t) && t.type === "radio";
+}, L = function(t) {
+  return P(t) && !M(t);
+}, V = function(t) {
+  var e, r = t && v(t), a = (e = r) === null || e === void 0 ? void 0 : e.host, l = !1;
+  if (r && r !== t) {
+    var n, c, s;
+    for (l = !!((n = a) !== null && n !== void 0 && (c = n.ownerDocument) !== null && c !== void 0 && c.contains(a) || t != null && (s = t.ownerDocument) !== null && s !== void 0 && s.contains(t)); !l && a; ) {
+      var u, o, f;
+      r = v(a), a = (u = r) === null || u === void 0 ? void 0 : u.host, l = !!((o = a) !== null && o !== void 0 && (f = o.ownerDocument) !== null && f !== void 0 && f.contains(a));
+    }
+  }
+  return l;
+}, p = function(t) {
+  var e = t.getBoundingClientRect(), r = e.width, a = e.height;
+  return r === 0 && a === 0;
+}, B = function(t, e) {
+  var r = e.displayCheck, a = e.getShadowRoot;
+  if (r === "full-native" && "checkVisibility" in t) {
+    var l = t.checkVisibility({
+      checkOpacity: !1,
+      opacityProperty: !1,
+      contentVisibilityAuto: !0,
+      visibilityProperty: !0,
+      checkVisibilityCSS: !0
+    });
+    return !l;
+  }
+  if (getComputedStyle(t).visibility === "hidden")
+    return !0;
+  var n = d.call(t, "details>summary:first-of-type"), c = n ? t.parentElement : t;
+  if (d.call(c, "details:not([open]) *"))
+    return !0;
+  if (!r || r === "full" || r === "full-native" || r === "legacy-full") {
+    if (typeof a == "function") {
+      for (var s = t; t; ) {
+        var u = t.parentElement, o = v(t);
+        if (u && !u.shadowRoot && a(u) === !0)
+          return p(t);
+        t.assignedSlot ? t = t.assignedSlot : !u && o !== t.ownerDocument ? t = o.host : t = u;
+      }
+      t = s;
+    }
+    if (V(t))
+      return !t.getClientRects().length;
+    if (r !== "legacy-full")
+      return !0;
+  } else if (r === "non-zero-area")
+    return p(t);
+  return !1;
+}, q = function(t) {
+  if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(t.tagName))
+    for (var e = t.parentElement; e; ) {
+      if (e.tagName === "FIELDSET" && e.disabled) {
+        for (var r = 0; r < e.children.length; r++) {
+          var a = e.children.item(r);
+          if (a.tagName === "LEGEND")
+            return d.call(e, "fieldset[disabled] *") ? !0 : !a.contains(t);
+        }
+        return !0;
+      }
+      e = e.parentElement;
+    }
+  return !1;
+}, U = function(t, e) {
+  return !(e.disabled || k(e) || B(e, t) || D(e) || q(e));
+}, S = function(t, e) {
+  return !(L(e) || m(e) < 0 || !U(t, e));
+}, W = function(t) {
+  var e = parseInt(t.getAttribute("tabindex"), 10);
+  return !!(isNaN(e) || e >= 0);
+}, A = function(t) {
+  var e = [], r = [];
+  return t.forEach(function(a, l) {
+    var n = !!a.scopeParent, c = n ? a.scopeParent : a, s = x(c, n), u = n ? A(a.candidates) : c;
+    s === 0 ? n ? e.push.apply(e, u) : e.push(c) : r.push({
+      documentOrder: l,
+      tabIndex: s,
+      item: a,
+      isScope: n,
+      content: u
+    });
+  }), r.sort(O).reduce(function(a, l) {
+    return l.isScope ? a.push.apply(a, l.content) : a.push(l.content), a;
+  }, []).concat(e);
+}, Z = function(t, e) {
+  e = e || {};
+  var r;
+  return e.getShadowRoot ? r = g([t], e.includeContainer, {
+    filter: S.bind(null, e),
+    flatten: !1,
+    getShadowRoot: e.getShadowRoot,
+    shadowRootFilter: W
+  }) : r = R(t, e.includeContainer, S.bind(null, e)), A(r);
+};
+export {
+  Z as t
+};

package/dist/media-query.service-BSiuFyfW.201120cc.js

@@ -0,0 +1,17 @@
+import { g as t } from "./utils-Dn2SWlGn.dbe5b17a.js";
+class i {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Set(), this.onChange = (e) => {
+      this.listeners.forEach((s) => s(e.matches));
+    }, this.mediaQueryList = t(), this.mediaQueryList.addEventListener("change", this.onChange);
+  }
+  subscribe(e) {
+    return this.listeners.add(e), e(this.mediaQueryList.matches), () => {
+      this.listeners.delete(e);
+    };
+  }
+}
+const h = new i();
+export {
+  h as D
+};

package/dist/swirl-accordion-item.entry.1c26008e.js

@@ -0,0 +1,38 @@
+import { r as t, c as d, h as e, H as n, g as s } from "./index.3a2ee891.js";
+import { c as r } from "./index-orsBiyT_.fc4357c3.js";
+import { v as a } from "./v4-DD3477fe.2624487e.js";
+import "react";
+import "react-dom";
+const c = ":host{display:block}:host *{box-sizing:border-box}.accordion-item{display:grid;align-content:start;border-top:0.0625rem solid var(--s-border-default);transition:grid-template-rows 0.15s;grid-template-rows:auto 0fr;will-change:grid-template-rows}@media (prefers-reduced-motion){.accordion-item{transition:none}}.accordion-item--expanded{grid-template-rows:auto 1fr}.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);animation:accordion-overflow 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-8)}}.accordion-item__heading{margin:0;padding:0;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__heading{font-size:var(--s-font-size-sm)}}.accordion-item__toggle{display:flex;width:100%;padding:0;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);padding-left:var(--s-space-8);align-items:center;border:none;color:var(--s-text-default);background-color:var(--swirl-accordion-item-toggle-default);font:inherit;line-height:var(--s-line-height-lg);text-align:start;cursor:pointer;gap:var(--s-space-16)}.accordion-item__toggle:hover{background-color:var(--swirl-accordion-item-toggle-hovered)}.accordion-item__toggle:active{background-color:var(--swirl-accordion-item-toggle-pressed)}.accordion-item__toggle:disabled{color:var(--s-text-disabled);background-color:var(--swirl-accordion-item-toggle-default);cursor:default}.accordion-item__toggle:disabled .text{color:var(--s-text-disabled)}.accordion-item__toggle:focus:not(:focus-visible){outline:none}.accordion-item__toggle:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__toggle{line-height:var(--s-line-height-sm)}}.accordion-item__toggle-text{flex-grow:1}.accordion-item__icon{display:inline-flex;padding-right:var(--s-space-8);flex-shrink:0}.accordion-item__content{overflow:hidden;padding-top:0;padding-bottom:0;transition:padding-top 0.15s, padding-bottom 0.15s;animation:accordion-display 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.accordion-item__content{transition:none}}@keyframes accordion-overflow{from{overflow:hidden}to{overflow:visible}}@keyframes accordion-display{from{display:block}to{display:none}}", l = class {
+  constructor(i) {
+    t(this, i), this.expansionChange = d(this, "expansionChange", 7), this.headingLevel = 2, this.itemId = a(), this.expanded = !1, this.headingId = `${a()}-heading`, this.onHeadingClick = () => {
+      this.toggle();
+    };
+  }
+  componentWillLoad() {
+    if (this.accordion = this.el.closest("swirl-accordion"), this.expanded = this.initiallyOpen && !this.disabled || !1, !Boolean(this.accordion))
+      throw new Error("[Swirl] swirl-accordion-item must be a child of a swirl-accordion.");
+  }
+  async collapse() {
+    !this.expanded || this.disabled || (this.expanded = !1, this.expansionChange.emit(this.expanded));
+  }
+  async expand() {
+    this.expanded || this.disabled || (this.expanded = !0, this.expansionChange.emit(this.expanded));
+  }
+  async toggle() {
+    this.expanded ? this.collapse() : this.expand();
+  }
+  render() {
+    const i = `h${this.headingLevel}`, o = r("accordion-item", {
+      "accordion-item--expanded": this.expanded
+    });
+    return e(n, { key: "7fb2476757da16bbf414a83076b949e3aba424ff" }, e("div", { key: "c7985ae3a40608e8780c3cb13431cf7c6650166d", class: o }, e(i, { key: "2d0cc5fde2c5f540c883db32baf1825dff038f4d", class: "accordion-item__heading" }, e("button", { key: "021de3bf7a1fe0bff6083072428c9f2dd90b5348", "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, e("slot", { key: "23bcca153fc3b7d7151f9d8dd6da6868e28d2435", name: "media" }), e("span", { key: "769441d96eebe7a5b8dd190d7bf1ac8b83883ef4", class: "accordion-item__toggle-text" }, this.heading, this.description && e("swirl-text", { key: "b21f697c0ad12961018e09cb6e2905fb04797616", as: "span", color: "subdued", size: "sm" }, this.description)), e("slot", { key: "eff6e5944b09da64580c991b04c7b8101328a4da", name: "trailing" }), e("span", { key: "37f96e5becc09f3ba7b8daf6a22c90bcff696a22", class: "accordion-item__icon" }, !this.expanded && e("swirl-icon", { key: "781350c30aa1e2bb5a0de1b3499d61e47d29fa97", glyph: "chevron-right", size: 20 }), this.expanded && e("swirl-icon", { key: "6fcee51be694b05e43ee688530291f6431be5828", glyph: "expand-more", size: 20 })))), e("div", { key: "f0bceba7b2bce99d2a99e53f991c8b1666d24c8d", "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, e("slot", { key: "6cb90b28ed1fee55445cee6bcda203aad36db5a3" }))));
+  }
+  get el() {
+    return s(this);
+  }
+};
+l.style = c;
+export {
+  l as swirl_accordion_item
+};

package/dist/swirl-accordion.entry.f967f415.js

@@ -0,0 +1,36 @@
+import { r as i, c as s, h as o, H as a, g as l } from "./index.3a2ee891.js";
+import "react";
+import "react-dom";
+const n = ":host{display:block}:host *{box-sizing:border-box}::slotted(*:last-child){border-bottom:0.0625rem solid var(--s-border-default)}", c = class {
+  constructor(e) {
+    i(this, e), this.expandedItemChange = s(this, "expandedItemChange", 7), this.multiExpand = !1;
+  }
+  componentDidLoad() {
+    this.el.addEventListener("expansionChange", (e) => {
+      e.detail && (this.expandedItemChange.emit(e.target.itemId), this.collapseInactiveItems(e.target));
+    });
+  }
+  async collapseItem(e) {
+    const t = Array.from(this.el.querySelectorAll("swirl-accordion-item")).find((r) => r.itemId === e);
+    !Boolean(t) || t.collapse();
+  }
+  async expandItem(e) {
+    const t = Array.from(this.el.querySelectorAll("swirl-accordion-item")).find((r) => r.itemId === e);
+    !Boolean(t) || t.expand();
+  }
+  collapseInactiveItems(e) {
+    this.multiExpand || Array.from(this.el.querySelectorAll("swirl-accordion-item")).forEach((t) => {
+      t !== e && t.collapse();
+    });
+  }
+  render() {
+    return o(a, { key: "753860ffbf5bc9f2ff3748478f799338dd413df8" }, o("slot", { key: "ff08ab1c311696f174b84fea1a9a1973639c07a6" }));
+  }
+  get el() {
+    return l(this);
+  }
+};
+c.style = n;
+export {
+  c as swirl_accordion
+};

package/dist/swirl-action-list-section.entry.c1acd3cb.js

@@ -0,0 +1,15 @@
+import { r as e, h as a, H as i } from "./index.3a2ee891.js";
+import "react";
+import "react-dom";
+const t = ":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list-section{background-color:var(--s-surface-overlay-default)}.action-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-section__label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);padding:var(--s-space-8) var(--s-space-12)}}", o = class {
+  constructor(s) {
+    e(this, s), this.separatorSpacing = "4", this.spacing = "0", this.hasSeparator = !1;
+  }
+  render() {
+    return a(i, { key: "42a4f114a91fff103aae006620ec4a89895071d6" }, this.hasSeparator && a("swirl-separator", { key: "3a855304b20f4da6951405e92235159ba4f497a7", spacing: this.separatorSpacing }), a("div", { key: "41826164368186a525215e16869b83b072eb5c8b", "aria-labelledby": "label", class: "action-list-section", role: "group" }, a("span", { key: "e72276c11976467c93e70c41f757fa65b2224e00", class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), a("swirl-stack", { key: "f28988fee83dd9efb724e0da3cc42b260cebe161", spacing: this.spacing, align: "stretch" }, a("slot", { key: "a8888fc9fbcd793f4a2b9a9353aa7878a1209b22" }))));
+  }
+};
+o.style = t;
+export {
+  o as swirl_action_list_section
+};

package/dist/swirl-action-list_2.entry.4717c018.js

@@ -0,0 +1,94 @@
+import { r as c, h as o, H as l, g as d } from "./index.3a2ee891.js";
+import { q as h, k as f } from "./utils-Dn2SWlGn.dbe5b17a.js";
+import { c as m } from "./index-orsBiyT_.fc4357c3.js";
+import { D as u } from "./media-query.service-BSiuFyfW.201120cc.js";
+import "react";
+import "react-dom";
+const b = ":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list{background-color:var(--s-surface-overlay-default)}", p = class {
+  constructor(i) {
+    c(this, i), this.onKeyDown = (t) => {
+      t.code === "ArrowDown" || t.code === "ArrowRight" ? (t.preventDefault(), t.stopPropagation(), this.focusNextItem()) : (t.code === "ArrowUp" || t.code === "ArrowLeft") && (t.preventDefault(), t.stopPropagation(), this.focusPreviousItem());
+    }, this.onFocusOut = (t) => {
+      if (this.isInsidePopover)
+        return;
+      const e = t.relatedTarget, s = t.target, n = (s == null ? void 0 : s.tagName) === "SWIRL-ACTION-LIST-ITEM", a = e === null || !this.el.contains(e);
+      !this.isInsidePopover && a && n && this.container.setAttribute("tabindex", "0");
+    }, this.onFocus = () => {
+      var s, n;
+      if (this.isInsidePopover)
+        return;
+      this.container.removeAttribute("tabindex");
+      const t = this.getItems(), e = this.getActiveItemIndex();
+      e > -1 ? (s = t[e]) == null || s.focus() : (n = t[0]) == null || n.focus();
+    };
+  }
+  componentDidLoad() {
+    queueMicrotask(() => {
+      this.isInsidePopover = this.el.closest("swirl-popover") !== null, this.isInsidePopover || this.container.setAttribute("tabindex", "0");
+    }), this.setSectionSeparator();
+  }
+  getItems() {
+    return h(this.el, '[role="menuitem"]');
+  }
+  focusNextItem() {
+    const i = this.getItems(), e = (this.getActiveItemIndex() + 1) % i.length;
+    i[e].focus();
+  }
+  focusPreviousItem() {
+    var s;
+    const i = this.getItems(), t = this.getActiveItemIndex(), e = t === 0 ? i.length - 1 : t - 1;
+    (s = i[e]) == null || s.focus();
+  }
+  getActiveItemIndex() {
+    const i = this.getItems(), t = f();
+    return i.findIndex((e) => e === t || e === (t == null ? void 0 : t.querySelector('[role="menuitem"]')));
+  }
+  setSectionSeparator() {
+    if (!this.el)
+      return;
+    Array.from(this.el.querySelectorAll("swirl-action-list-section")).filter((t) => t.isConnected).forEach((t, e) => {
+      var s;
+      e === 0 && ((s = t.previousElementSibling) == null ? void 0 : s.tagName) !== "SWIRL-ACTION-LIST-ITEM" && (t.hasSeparator = !1);
+    });
+  }
+  render() {
+    return o(l, { key: "66aff3b846f78442de2998bbd86aee98a3da9b6d" }, o("div", { key: "ca22773ef8f1853509cc70de59d4129f11807057", "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? void 0 : this.onFocusOut, onFocus: this.isInsidePopover ? void 0 : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (i) => this.container = i, role: "menu" }, o("slot", { key: "c3e20e6cb457f8bdb5dbb7b7c3dfc27971db67ab", onSlotchange: this.setSectionSeparator })));
+  }
+  get el() {
+    return d(this);
+  }
+};
+p.style = b;
+const g = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{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-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__icon-badge{position:absolute;display:grid;bottom:0;right:0}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}", v = class {
+  constructor(i) {
+    c(this, i), this.intent = "default", this.size = "m", this.mediaQueryUnsubscribe = () => {
+    };
+  }
+  componentDidLoad() {
+    this.mediaQueryUnsubscribe = u.subscribe((i) => {
+      this.forceIconProps(i);
+    });
+  }
+  disconnectedCallback() {
+    this.mediaQueryUnsubscribe();
+  }
+  forceIconProps(i) {
+    var n, a, r;
+    const t = (n = this.iconEl) == null ? void 0 : n.children[0], e = (a = this.suffixEl) == null ? void 0 : a.children[0];
+    t == null || t.setAttribute("size", i ? "20" : "24");
+    const s = (r = this.iconBadgeEl) == null ? void 0 : r.children[0];
+    s == null || s.setAttribute("size", "xs"), s == null || s.setAttribute("variant", "dot"), (e == null ? void 0 : e.tagName) !== "SWIRL-TAG" && (e == null || e.setAttribute("size", i ? "20" : "24"));
+  }
+  render() {
+    const i = Boolean(this.badge), t = Boolean(this.iconBadge), e = Boolean(this.el.querySelector('[slot="suffix"]')), s = (Boolean(this.suffix) || e) && !this.disabled, n = m("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
+    return o(l, { key: "6e0ba3475bbabc4b456d23070aada4ad73a7bef7" }, o("button", { key: "568753980452f56f6305573cfacc1540728f8a64", "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: n, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, o("slot", { key: "90c23d6a829bdb2903ff76eda7852101b174b198", name: "avatar" }), this.icon && o("span", { key: "1855b294b64760c5399cfb9b371715399ed2e985", class: "action-list-item__icon", innerHTML: this.icon, ref: (a) => this.iconEl = a }, t && o("span", { key: "1db1f001b6a4e9d40d4e11dddb5f2a45c8c81106", class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (a) => this.iconBadgeEl = a })), o("span", { key: "a55df1b640cb5c5109dc632c39dca728fce290da", class: "action-list-item__label-container" }, o("span", { key: "ae479a05bbfd854b8472d3977d7489df73e611cb", class: "action-list-item__label" }, this.label), this.description && o("span", { key: "959761897cc5c8d4d2474795460b66bb5d22475b", class: "action-list-item__description" }, this.description)), i && o("span", { key: "cd679c3648c86d6d7f5c9c37f1d02e8b14cd2bfe", class: "action-list-item__badge", innerHTML: this.badge }), s && o("span", { key: "88754ec73e17680ebdc939f42df996dace73fdce", class: "action-list-item__suffix", innerHTML: e ? void 0 : this.suffix, ref: (a) => this.suffixEl = a }, o("slot", { key: "37b5c4659a5ff5c1e36e9dd47292180e9b9a5dac", name: "suffix" }))));
+  }
+  get el() {
+    return d(this);
+  }
+};
+v.style = g;
+export {
+  p as swirl_action_list,
+  v as swirl_action_list_item
+};

package/dist/swirl-app-bar.entry.7297be62.js

@@ -0,0 +1,49 @@
+import { r, c as s, h as t, H as c, g as l } from "./index.3a2ee891.js";
+import { c as p } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const d = ':host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-16)}.app-bar--has-cta .app-bar__cta{display:block}.app-bar:not(.app-bar--has-right-controls) .app-bar__right-controls{display:none}.app-bar__left-controls{display:flex;min-width:0;flex-shrink:0;align-items:center;gap:var(--s-space-16)}.app-bar__main-navigation-control{flex-shrink:0}.app-bar__cta{display:none}.app-bar__heading{display:flex;min-width:10rem;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{min-width:0;flex-grow:0}}.app-bar__stepper-controls{position:relative;display:flex;flex-shrink:0;gap:var(--s-space-4)}.app-bar__stepper-controls:not(:first-child){padding-left:var(--s-space-16)}.app-bar__stepper-controls:not(:first-child):after{position:absolute;top:50%;left:0;width:var(--s-border-width-default);height:1.25rem;background-color:var(--s-border-default);content:"";transform:translateY(-50%)}.app-bar__center-controls{display:none;flex-grow:1;justify-content:center;align-items:center}@media (min-width: 992px){.app-bar__center-controls{display:flex}}.app-bar:not(.app-bar--has-heading) .app-bar__center-controls{display:flex}.app-bar:not(.app-bar--has-heading) .app-bar__heading{display:none}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}', h = class {
+  constructor(e) {
+    r(this, e), this.backButtonClick = s(this, "backButtonClick", 7), this.closeButtonClick = s(this, "closeButtonClick", 7), this.stepUpButtonClick = s(this, "stepUpButtonClick", 7), this.stepDownButtonClick = s(this, "stepDownButtonClick", 7), this.backButtonLabel = "Go back", this.closeButtonIcon = "<swirl-icon-close></swirl-icon-close>", this.closeButtonLabel = "Close", this.paddingInlineEnd = "16", this.paddingInlineStart = "16", this.stepUpButtonLabel = "Previous item", this.stepDownButtonLabel = "Next item", this.showHeading = !0, this.onBackButtonClick = (a) => {
+      this.backButtonClick.emit(a);
+    }, this.onCloseButtonClick = (a) => {
+      this.closeButtonClick.emit(a);
+    }, this.onStepUpButtonClick = (a) => {
+      this.stepUpButtonClick.emit(a);
+    }, this.onStepDownButtonClick = (a) => {
+      this.stepDownButtonClick.emit(a);
+    };
+  }
+  componentWillLoad() {
+    this.mutationObserver = new MutationObserver(() => {
+      this.updateCtaStatus();
+    }), this.mutationObserver.observe(this.el, { childList: !0 }), queueMicrotask(() => {
+      this.updateCtaStatus();
+    });
+  }
+  disconnectedCallback() {
+    var e;
+    (e = this.mutationObserver) == null || e.disconnect();
+  }
+  updateCtaStatus() {
+    this.hasCta = Boolean(this.el.querySelector('[slot="cta"]'));
+  }
+  render() {
+    const e = this.showBackButton || this.showCloseButton || this.showStepperControls, a = Boolean(this.el.querySelector('[slot="right-controls"]')), i = Boolean(this.el.querySelector('[slot="heading"]')), o = p("app-bar", {
+      "app-bar--has-cta": this.hasCta,
+      "app-bar--has-right-controls": a,
+      "app-bar--has-heading": i && this.showHeading
+    }), n = {
+      paddingInlineEnd: `var(--s-space-${this.paddingInlineEnd})`,
+      paddingInlineStart: `var(--s-space-${this.paddingInlineStart})`
+    };
+    return t(c, { key: "2fc2dc7672ca8ab6c3ea4a2bea33d52730eaea3f" }, t("div", { key: "853eac25f0092f4e3c9159bcb928f953026c6e87", class: o, style: n }, e && t("div", { key: "272353acea74c10e90d43d894fb535d65fcb1af3", class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && t("div", { key: "04b34c7a362ca98d02e4692da4e11196122e4d2a", class: "app-bar__main-navigation-control" }, this.showBackButton && t("swirl-button", { key: "82188c1a465798ef652ee7a642bf038ccdd21d5a", hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick }), this.showCloseButton && t("swirl-button", { key: "9a31265626092d9079b4b4a27461b483e489fff9", hideLabel: !0, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showStepperControls && t("div", { key: "0b089aedecaf8f42a9d656174fc93dd5837dbe7c", class: "app-bar__stepper-controls" }, t("swirl-button", { key: "8a5a2de50ae5c53e2b9af7ab9597f9988d476863", hideLabel: !0, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), t("swirl-button", { key: "090451b7e112346d617018aae45782af57924276", hideLabel: !0, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))), t("div", { key: "caf1b7b3e2d6a9f3fd45080b47200ba23f06de2f", class: "app-bar__cta" }, t("slot", { key: "f8a5d105b77db1f107dac0364e56f8fc498d22b5", name: "cta" })), t("div", { key: "a3d5e082c9c2957791fc5aa1fd767d466acf70dc", class: "app-bar__heading" }, t("slot", { key: "a3188a9e1ab5b93d645293074ba6930e8a88df32", name: "heading" })), t("div", { key: "0466ef640baf9d738f48c221ceb99446f3dcb352", class: "app-bar__center-controls" }, t("slot", { key: "56cf69f32c293072015f45bfe017627bf61706c7", name: "center-controls" })), t("div", { key: "d24c3205c5c6f6b8cee93590694c71fb87a9307b", class: "app-bar__right-controls" }, t("slot", { key: "bc29b52f8e205b03e48449cfb05f57b5b348766d", name: "right-controls" }))));
+  }
+  get el() {
+    return l(this);
+  }
+};
+h.style = d;
+export {
+  h as swirl_app_bar
+};

package/dist/swirl-app-icon.entry.f3c30963.js

@@ -0,0 +1,30 @@
+import { r as n, h as s, H as o } from "./index.3a2ee891.js";
+import { c as l } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const r = ":host{display:inline-flex}:host *{box-sizing:border-box}.app-icon{position:relative;overflow:hidden;width:var(--swirl-app-icon-size);height:var(--swirl-app-icon-size);border-radius:var(--s-border-radius-sm)}.app-icon>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.app-icon__icon{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center}", c = class {
+  constructor(e) {
+    n(this, e), this.setImageAvailable = () => {
+      this.imageAvailable = !0;
+    }, this.setImageUnavailable = () => {
+      this.imageAvailable = !1;
+    }, this.onImageElementUpdate = (i) => {
+      var t, a;
+      (t = this.imgEl) == null || t.removeEventListener("load", this.setImageAvailable), (a = this.imgEl) == null || a.removeEventListener("error", this.setImageUnavailable), this.imgEl = i, this.imgEl && (this.imgEl.addEventListener("load", this.setImageAvailable), this.imgEl.addEventListener("error", this.setImageUnavailable));
+    };
+  }
+  disconnectedCallback() {
+    var e, i;
+    (e = this.imgEl) == null || e.removeEventListener("load", this.setImageAvailable), (i = this.imgEl) == null || i.removeEventListener("error", this.setImageUnavailable);
+  }
+  render() {
+    const e = Boolean(this.src) && (this.imageAvailable || this.imageAvailable === void 0), i = !e && Boolean(this.icon), a = l("app-icon", {
+      "app-icon--has-icon": i || !e && !i
+    });
+    return s(o, { key: "1cf53be5713be2afd9deb54f716aab331cc357c1" }, s("span", { key: "5c8eede8ebb50579c5fbb58835fefc5dea85b619", class: a }, e && s("img", { key: "648bac51e59d772ea780d692236905e7f5c7c607", alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" }), i && s("span", { key: "754d289ae8b2c3d6e12ed5527ed1f8406e669d19", class: "app-icon__icon", innerHTML: this.icon })));
+  }
+};
+c.style = r;
+export {
+  c as swirl_app_icon
+};