@getflip/swirl-components-react 0.197.1 → 0.199.0

package/dist/stencil-generated/react-component-lib/utils/attachProps.d.ts

@@ -1,5 +1,9 @@
 export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
 export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export declare const transformReactEventName: (eventNameSuffix: string) => string;
 /**
  * Checks if an event is supported in the current execution environment.
  * @license Modernizr 3.0.0pre (Custom Build) | MIT

package/dist/{swirl-accordion-item.entry.0b17e302.js → swirl-accordion-item.entry.c8f141b1.js}

@@ -1,13 +1,13 @@
-import { r as a, c as n, h as i, H as d, g as s } from "./index.a5290183.js";
-import { c as r } from "./index-d280dafb.186cdb0e.js";
-import { v as o } from "./v4-23648a96.77c7c20f.js";
+import { r as d, c as t, h as e, H as n, g as s } from "./index.9d32bf5e.js";
+import { c as r } from "./index-267776a4.6beb4f4b.js";
+import { v as a } from "./v4-23648a96.77c7c20f.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);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(e) {
-    a(this, e), this.expansionChange = n(this, "expansionChange", 7), this.headingId = `${o()}-heading`, this.onHeadingClick = () => {
+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);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 = c, h = class {
+  constructor(i) {
+    d(this, i), this.expansionChange = t(this, "expansionChange", 7), this.headingId = `${a()}-heading`, this.onHeadingClick = () => {
       this.toggle();
-    }, this.description = void 0, this.disabled = void 0, this.heading = void 0, this.headingLevel = 2, this.initiallyOpen = void 0, this.itemId = o(), this.expanded = !1;
+    }, this.description = void 0, this.disabled = void 0, this.heading = void 0, this.headingLevel = 2, this.initiallyOpen = void 0, this.itemId = a(), this.expanded = !1;
   }
   componentWillLoad() {
     if (this.accordion = this.el.closest("swirl-accordion"), this.expanded = this.initiallyOpen && !this.disabled || !1, !Boolean(this.accordion))
@@ -23,16 +23,16 @@ const c = ":host{display:block}:host *{box-sizing:border-box}.accordion-item{dis
     this.expanded ? this.collapse() : this.expand();
   }
   render() {
-    const e = `h${this.headingLevel}`, t = r("accordion-item", {
+    const i = `h${this.headingLevel}`, o = r("accordion-item", {
       "accordion-item--expanded": this.expanded
     });
-    return i(d, null, i("div", { class: t }, i(e, { class: "accordion-item__heading" }, i("button", { "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, i("span", { class: "accordion-item__toggle-text" }, this.heading, this.description && i("swirl-text", { as: "span", color: "subdued", size: "sm" }, this.description)), i("span", { class: "accordion-item__icon" }, !this.expanded && i("swirl-icon", { glyph: "chevron-right", size: 20 }), this.expanded && i("swirl-icon", { glyph: "expand-more", size: 20 })))), i("div", { "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, i("slot", null))));
+    return e(n, { key: "4d16bbdd80e7e7de2c9233fd0990d2056f1918e2" }, e("div", { key: "663b2d9fcbdfd816e42f20a27fdf21b15f5c8eaa", class: o }, e(i, { key: "b588fac98fc927b31088f55d1a4a42077c7c93d7", class: "accordion-item__heading" }, e("button", { key: "93a756f44cbab598814774adcfedaefd6bddf37c", "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("span", { key: "88aa6b5112d6cece27b33b053b31a76fb48e1e3a", class: "accordion-item__toggle-text" }, this.heading, this.description && e("swirl-text", { key: "dfb03ef35815cb5de6a7982fb8faa2176d422158", as: "span", color: "subdued", size: "sm" }, this.description)), e("span", { key: "b9b1ea22c4b43f531b5b1819220f0089797ad8a5", class: "accordion-item__icon" }, !this.expanded && e("swirl-icon", { key: "11d5a1e2bfaaf84d8c0ec7c4eb37a2ed69475acd", glyph: "chevron-right", size: 20 }), this.expanded && e("swirl-icon", { key: "b6209a67579e3800e250dbb6cc85ae38edf97537", glyph: "expand-more", size: 20 })))), e("div", { key: "dedd47f75b8aa3eabe5170bcb10c1815bae0489b", "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, e("slot", { key: "af9c88e96816a003f3126bf76aead45c0d4dc9df" }))));
   }
   get el() {
     return s(this);
   }
 };
-l.style = c;
+h.style = l;
 export {
-  l as swirl_accordion_item
+  h as swirl_accordion_item
 };

package/dist/{swirl-accordion.entry.e8a4eeac.js → swirl-accordion.entry.2399c4e3.js}

@@ -1,7 +1,7 @@
-import { r as s, c as i, h as o, H as l, g as a } from "./index.a5290183.js";
+import { r as s, c as i, h as o, H as a, g as l } from "./index.9d32bf5e.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 {
+const c = ":host{display:block}:host *{box-sizing:border-box}::slotted(*:last-child){border-bottom:0.0625rem solid var(--s-border-default)}", n = c, d = class {
   constructor(e) {
     s(this, e), this.expandedItemChange = i(this, "expandedItemChange", 7);
   }
@@ -24,13 +24,13 @@ const n = ":host{display:block}:host *{box-sizing:border-box}::slotted(*:last-ch
     });
   }
   render() {
-    return o(l, null, o("slot", null));
+    return o(a, { key: "8164310633ef979061ffa19a7b7559a93951b664" }, o("slot", { key: "eac2e80e25b9300dfb9b5efacf53e97c11cd9779" }));
   }
   get el() {
-    return a(this);
+    return l(this);
   }
 };
-c.style = n;
+d.style = n;
 export {
-  c as swirl_accordion
+  d as swirl_accordion
 };

package/dist/{swirl-action-list-section.entry.ce233fc7.js → swirl-action-list-section.entry.dc550e33.js}

@@ -1,15 +1,15 @@
-import { r as s, h as t, H as e } from "./index.a5290183.js";
+import { r as i, h as e, H as s } from "./index.9d32bf5e.js";
 import "react";
 import "react-dom";
-const a = ":host{display:block}: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);border-bottom:var(--s-border-width-default) solid var(--s-border-default);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)}}", l = class {
-  constructor(i) {
-    s(this, i), this.label = void 0;
+const a = ":host{display:block}: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);border-bottom:var(--s-border-width-default) solid var(--s-border-default);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 = a, l = class {
+  constructor(t) {
+    i(this, t), this.label = void 0;
   }
   render() {
-    return t(e, null, t("div", { "aria-labelledby": "label", class: "action-list-section", role: "group" }, t("span", { class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), t("div", { class: "action-list-section__items" }, t("slot", null))));
+    return e(s, { key: "11b03762c4dd5f0231ba8448a2b59d7cb40e492f" }, e("div", { key: "25bb16b68f4e6c499d1969dc436b122b8e604b87", "aria-labelledby": "label", class: "action-list-section", role: "group" }, e("span", { key: "e8d33697e0528c1b9fa24841d984285e3d9573aa", class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), e("div", { key: "bb5e0c93bcdb79495eab8545ca1213b704cc2704", class: "action-list-section__items" }, e("slot", { key: "279562f8571a3e4579a8a455857c0b6749d027b7" }))));
   }
 };
-l.style = a;
+l.style = o;
 export {
   l as swirl_action_list_section
 };

package/dist/swirl-action-list_3.entry.f3f22abb.js

@@ -0,0 +1,103 @@
+import { r as n, h as o, H as r, g as c } from "./index.9d32bf5e.js";
+import { q as h, b as f, g as p } from "./utils-aab10c80.240adddc.js";
+import { c as l } from "./index-267776a4.6beb4f4b.js";
+import "react";
+import "react-dom";
+const u = ":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list{background-color:var(--s-surface-overlay-default)}", m = u, b = class {
+  constructor(t) {
+    n(this, t), this.onKeyDown = (e) => {
+      e.code === "ArrowDown" || e.code === "ArrowRight" ? (e.preventDefault(), this.focusNextItem()) : (e.code === "ArrowUp" || e.code === "ArrowLeft") && (e.preventDefault(), this.focusPreviousItem());
+    }, this.onFocusOut = (e) => {
+      if (this.isInsidePopover)
+        return;
+      const i = e.relatedTarget, s = e.target, a = (s == null ? void 0 : s.tagName) === "SWIRL-ACTION-LIST-ITEM", d = i === null || !this.el.contains(i);
+      !this.isInsidePopover && d && a && this.container.setAttribute("tabindex", "0");
+    }, this.onFocus = () => {
+      var s, a;
+      if (this.isInsidePopover)
+        return;
+      this.container.removeAttribute("tabindex");
+      const e = this.getItems(), i = this.getActiveItemIndex();
+      i > -1 ? (s = e[i]) == null || s.focus() : (a = e[0]) == null || a.focus();
+    }, this.isInsidePopover = void 0;
+  }
+  componentDidLoad() {
+    queueMicrotask(() => {
+      this.isInsidePopover = this.el.closest("swirl-popover") !== null, this.isInsidePopover || this.container.setAttribute("tabindex", "0");
+    });
+  }
+  getItems() {
+    return h(this.el, '[role="menuitem"]');
+  }
+  focusNextItem() {
+    const t = this.getItems(), i = (this.getActiveItemIndex() + 1) % t.length;
+    t[i].focus();
+  }
+  focusPreviousItem() {
+    var s;
+    const t = this.getItems(), e = this.getActiveItemIndex(), i = e === 0 ? t.length - 1 : e - 1;
+    (s = t[i]) == null || s.focus();
+  }
+  getActiveItemIndex() {
+    const t = this.getItems(), e = f();
+    return t.findIndex((i) => i === e || i === (e == null ? void 0 : e.querySelector('[role="menuitem"]')));
+  }
+  render() {
+    return o(r, { key: "43e99f67cf6932db44df3821525f66e847ea7560" }, o("div", { key: "936f925f573d52544a1728ffc7be61af50d55ea9", "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: (t) => this.container = t, role: "menu" }, o("slot", { key: "a5f9f50b6f3947a8a868a02527759ccfed9bf91f" })));
+  }
+  get el() {
+    return c(this);
+  }
+};
+b.style = m;
+const g = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;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;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)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}.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;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__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-highlight)}", v = g, x = class {
+  constructor(t) {
+    n(this, t), this.desktopMediaQuery = p(), this.desktopMediaQueryHandler = (e) => {
+      this.forceIconProps(e.matches);
+    }, this.badge = void 0, this.disabled = void 0, this.description = void 0, this.icon = void 0, this.intent = "default", this.label = void 0, this.size = "m", this.swirlAriaExpanded = void 0, this.swirlAriaHaspopup = void 0, this.suffix = void 0;
+  }
+  componentDidLoad() {
+    this.forceIconProps(this.desktopMediaQuery.matches), this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+  }
+  componentDidRender() {
+    this.forceIconProps(this.desktopMediaQuery.matches);
+  }
+  disconnectedCallback() {
+    var t, e;
+    (e = (t = this.desktopMediaQuery).removeEventListener) == null || e.call(t, "change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(t) {
+    var s, a;
+    const e = (s = this.iconEl) == null ? void 0 : s.children[0], i = (a = this.suffixEl) == null ? void 0 : a.children[0];
+    e == null || e.setAttribute("size", t ? "20" : "24"), i == null || i.setAttribute("size", t ? "20" : "24");
+  }
+  render() {
+    const t = Boolean(this.badge), e = Boolean(this.el.querySelector('[slot="suffix"]')), i = (Boolean(this.suffix) || e) && !this.disabled, s = l("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
+    return o(r, { key: "c27b5f1bf7f0ba445047c9b6971301dcef1d9e12" }, o("button", { key: "1ecb6c1fe6bd6547797b6ae9d8f6ccd728f7053b", "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: s, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, this.icon && o("span", { key: "1832714c29f2c34a365350542838318b6963ae83", class: "action-list-item__icon", innerHTML: this.icon, ref: (a) => this.iconEl = a }), o("span", { key: "b01f38be411e9a4b719ba61b0e18ff64e98a188a", class: "action-list-item__label-container" }, o("span", { key: "93351582c31efc909231cd127472984b2bd211d6", class: "action-list-item__label" }, this.label), this.description && o("span", { key: "f84789e1bc8e39f87ee7d0d608b6482930d55ab0", class: "action-list-item__description" }, this.description)), t && o("span", { key: "9c3d72b0dbb8c8b6cd72f850b7e03aeef54b4abe", class: "action-list-item__badge", innerHTML: this.badge }), i && o("span", { key: "0ef67d7702bcd9637f0e17405ca6b89af2cb697f", class: "action-list-item__suffix", innerHTML: e ? void 0 : this.suffix, ref: (a) => this.suffixEl = a }, o("slot", { key: "f0fda290c8394d13ae778ede1f66b578a8c5475f", name: "suffix" }))));
+  }
+  get el() {
+    return c(this);
+  }
+};
+x.style = v;
+const w = ":host{display:flex;width:100%;align-items:center}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto}:host(.separator--orientation-vertical) .separator__line{width:var(--s-border-width-default);height:100%;min-height:1.125rem}:host(.separator--border-color-strong) .separator__line{background-color:var(--s-border-strong)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default)}", y = w, I = class {
+  constructor(t) {
+    n(this, t), this.borderColor = "default", this.orientation = "horizontal", this.spacing = "8";
+  }
+  render() {
+    const t = this.orientation === "horizontal" ? {
+      paddingTop: `var(--s-space-${this.spacing})`,
+      paddingBottom: `var(--s-space-${this.spacing})`
+    } : {
+      paddingRight: `var(--s-space-${this.spacing})`,
+      paddingLeft: `var(--s-space-${this.spacing})`
+    }, e = l("separator", `separator--border-color-${this.borderColor}`, `separator--orientation-${this.orientation}`);
+    return o(r, { key: "87c81cdcca6438842cda0271160c6199dc11a948", "aria-orientation": this.orientation, class: e, role: "separator", style: t }, o("span", { key: "fad69172988a25a3b1156065b845f524eafb3257", class: "separator__line" }));
+  }
+};
+I.style = y;
+export {
+  b as swirl_action_list,
+  x as swirl_action_list_item,
+  I as swirl_separator
+};

package/dist/swirl-app-bar.entry.42f8e516.js

@@ -0,0 +1,45 @@
+import { r as i, c as s, h as t, H as n, g as c } from "./index.9d32bf5e.js";
+import { c as r } from "./index-267776a4.6beb4f4b.js";
+import "react";
+import "react-dom";
+const l = ':host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;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:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{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__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}', p = l, d = class {
+  constructor(a) {
+    i(this, a), 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.onBackButtonClick = (e) => {
+      this.backButtonClick.emit(e);
+    }, this.onCloseButtonClick = (e) => {
+      this.closeButtonClick.emit(e);
+    }, this.onStepUpButtonClick = (e) => {
+      this.stepUpButtonClick.emit(e);
+    }, this.onStepDownButtonClick = (e) => {
+      this.stepDownButtonClick.emit(e);
+    }, this.backButtonLabel = "Go back", this.closeButtonIcon = "<swirl-icon-close></swirl-icon-close>", this.closeButtonLabel = "Close", this.stepUpButtonLabel = "Previous item", this.stepDownButtonLabel = "Next item", this.showBackButton = void 0, this.showCloseButton = void 0, this.showStepperControls = void 0, this.hasCta = void 0;
+  }
+  componentWillLoad() {
+    this.mutationObserver = new MutationObserver(() => {
+      this.updateCtaStatus();
+    }), this.mutationObserver.observe(this.el, { childList: !0 }), queueMicrotask(() => {
+      this.updateCtaStatus();
+    });
+  }
+  disconnectedCallback() {
+    var a;
+    (a = this.mutationObserver) == null || a.disconnect();
+  }
+  updateCtaStatus() {
+    this.hasCta = Boolean(this.el.querySelector('[slot="cta"]'));
+  }
+  render() {
+    const a = this.showBackButton || this.showCloseButton || this.showStepperControls, e = Boolean(this.el.querySelector('[slot="right-controls"]')), o = r("app-bar", {
+      "app-bar--has-cta": this.hasCta,
+      "app-bar--has-right-controls": e
+    });
+    return t(n, { key: "6e388dda9ffef64afa31b8c8459eb57bf96f4fed" }, t("div", { key: "1df5d686a248760beb5c7def4e631f73857fdced", class: o }, a && t("div", { key: "1ffff6f9233a3667412a41c406ff64d635163e1c", class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && t("div", { key: "46bfd07993a16398388cb6a90229e1d3ef74de5c", class: "app-bar__main-navigation-control" }, this.showBackButton && t("swirl-button", { key: "825955e782cf0d5335070339a4dce4a3d828ef19", hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick }), this.showCloseButton && t("swirl-button", { key: "e6fa7c44810105ca709f37f3c2852708d2680264", hideLabel: !0, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showStepperControls && t("div", { key: "b1d8dfcd982b8aa8b9ca5de0f48d39db34ff2cfe", class: "app-bar__stepper-controls" }, t("swirl-button", { key: "4c28d257da981b5e9f3957428b9015eb954bef7c", hideLabel: !0, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), t("swirl-button", { key: "da3ce3294de7848b1283bd578c1cc44125774289", hideLabel: !0, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))), t("div", { key: "edb99f5558d6bb0424a2f25aedda9eea6218f66b", class: "app-bar__cta" }, t("slot", { key: "b32c4cdc062cb44aa0492770344bb11565795b38", name: "cta" })), t("div", { key: "69b1c2d31a364938e64501037bbc97f7ca69c22e", class: "app-bar__heading" }, t("slot", { key: "022ddeaecfde7a4352e1a123098736a92cd34f3d", name: "heading" })), t("div", { key: "ce88acc0923db756f6197e87b12561690d2f4919", class: "app-bar__center-controls" }, t("slot", { key: "885ff0edacef21993abb094a7b0920a1d77129ef", name: "center-controls" })), t("div", { key: "e823a044960e274b15fab2a1c495bad4ec46c929", class: "app-bar__right-controls" }, t("slot", { key: "3fd346d6300e188983476ed930fff62ec5529093", name: "right-controls" }))));
+  }
+  get el() {
+    return c(this);
+  }
+};
+d.style = p;
+export {
+  d as swirl_app_bar
+};

package/dist/swirl-app-icon.entry.86b42a2e.js

@@ -0,0 +1,23 @@
+import { r as n, h as e, H as o } from "./index.9d32bf5e.js";
+import { c as t } from "./index-267776a4.6beb4f4b.js";
+import "react";
+import "react-dom";
+const c = ":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%}.app-icon__icon{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center}", l = c, r = class {
+  constructor(i) {
+    n(this, i), this.setImageAvailable = () => {
+      this.imageAvailable = !0;
+    }, this.setImageUnavailable = () => {
+      this.imageAvailable = !1;
+    }, this.icon = void 0, this.src = void 0, this.imageAvailable = void 0;
+  }
+  render() {
+    const i = Boolean(this.src) && (this.imageAvailable || this.imageAvailable === void 0), a = !i && Boolean(this.icon), s = t("app-icon", {
+      "app-icon--has-icon": a || !i && !a
+    });
+    return e(o, { key: "84c7b17677256b7493a3a157bbb5a13183e77f39" }, e("span", { key: "ddb703079515ee24bfa6fb8896bb4680f5635142", class: s }, i && e("img", { key: "58be5786d79d7c0fcc61fb2d93891fe06dcb86f0", alt: "", height: "40", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "40" }), a && e("span", { key: "6d0e5ed695a8c08e64ff06a0dc09995dab9217c1", class: "app-icon__icon", innerHTML: this.icon })));
+  }
+};
+r.style = l;
+export {
+  r as swirl_app_icon
+};