@getflip/swirl-components-react 0.468.1 → 0.470.0

package/dist/swirl-app-bar.entry.6ff033ed.js

@@ -0,0 +1,49 @@
+import { r, c as s, h as t, H as l, g as c } from "./index.2e681538.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(l, { key: "3780ddd0d31da42b5debfb9a4a239db65d2b9f6a" }, t("div", { key: "6a64894f59b6e56a3ea43a2fd2186bcc00f4d1a5", class: o, style: n }, e && t("div", { key: "ca74718a2032cac792a1fbc43745eac49a71d5fe", class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && t("div", { key: "2066d1cab1565885df8a31a6a983980205e1ea82", class: "app-bar__main-navigation-control" }, this.showBackButton && t("swirl-button", { key: "67f59277ee4523b25ee497ca9a1d2d0f6690088b", hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick }), this.showCloseButton && t("swirl-button", { key: "da058aef20dedd56df6ebd911f6e5822a8b1af37", hideLabel: !0, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showStepperControls && t("div", { key: "c9da007e15d4f351535c44a8766d285cd7fdf758", class: "app-bar__stepper-controls" }, t("swirl-button", { key: "b75f27203ca254564147a45180240f4a050607c0", hideLabel: !0, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), t("swirl-button", { key: "4a6aebc86c7e3e73cc80579ce79c22fa17c2f2bd", hideLabel: !0, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))), t("div", { key: "05efc306d01e5a8f29436001e583496fdbc4d474", class: "app-bar__cta" }, t("slot", { key: "794013782abe08494ef50da060da52c95e5f8e50", name: "cta" })), t("div", { key: "d3ee2f096ada2ccb1a0cefa7e3f4b52a5180e3fe", class: "app-bar__heading" }, t("slot", { key: "a3f2f4adf696a08752874556b2cad106dbbe8cef", name: "heading" })), t("div", { key: "971230dd573cb3a35650534365b5a16506ad117a", class: "app-bar__center-controls" }, t("slot", { key: "d26903808a059b4645efd868dc1847e87e4daf96", name: "center-controls" })), t("div", { key: "466c2ec56b707d9d4d33022fb83ad87648e3f177", class: "app-bar__right-controls" }, t("slot", { key: "786e1a1b3a962d82989a23f6ed6304e4bce1bbf0", name: "right-controls" }))));
+  }
+  get el() {
+    return c(this);
+  }
+};
+h.style = d();
+export {
+  h as swirl_app_bar
+};

package/dist/swirl-app-icon.entry.485a14f1.js

@@ -0,0 +1,30 @@
+import { r as n, h as s, H as o } from "./index.2e681538.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: "fe8d516e1120d072e2f4600ca610bc4c13fd21f5" }, s("span", { key: "221e8a7f2eb9c1486b3958d81e124cf2bbe12247", class: a }, e && s("img", { key: "50a6602a09d6e1f41e218137c3bbeca0afe7954f", alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" }), i && s("span", { key: "06d45bf19f89194eed5db2398fb572d6cb3125bf", class: "app-icon__icon", innerHTML: this.icon })));
+  }
+};
+c.style = r();
+export {
+  c as swirl_app_icon
+};

package/dist/swirl-app-layout.entry.f17c2b24.js

@@ -0,0 +1,205 @@
+import { r as b, c as e, h as a, H as c, g } from "./index.2e681538.js";
+import { c as m } from "./index-orsBiyT_.fc4357c3.js";
+import { D as h } from "./media-query.service-CCYT6DU8.f0931fdc.js";
+import { d as p, i as l, p as s } from "./utils-CCck-DTo.e4e43b6a.js";
+import "react";
+import "react-dom";
+const v = () => ':host{--header-height:3.5625rem;position:relative;z-index:1;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;height:100%;margin-right:auto;margin-left:auto}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;grid-template-columns:100%;grid-template-rows:var(--header-height) 1fr;grid-template-areas:"body"     "body"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout:not(.app-layout--has-app-bar-mobile-menu-button) .app-layout__app-bar-mobile-menu-button{display:none}.app-layout--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"       "navigation"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:"header body"         "navigation body"}}@media (min-width: 1440px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{position:absolute;z-index:4;top:0;left:0;width:22.5rem;animation:app-layout-nav-overlay-slide-in-desktop 0.1s;animation-fill-mode:forwards}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header:after{position:absolute;z-index:1;top:0;left:calc(100% + var(--s-border-width-default));display:block;width:2rem;height:100vh;background-image:linear-gradient(               to right,               rgba(0, 0, 0, 0.05) 0,               rgba(0, 0, 0, 0) 80%,               rgba(0, 0, 0, 0) 100%             );content:""}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{z-index:3;bottom:0}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{width:25rem;animation:app-layout-nav-overlay-slide-in-large-desktop 0.1s}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid,.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:"body sidebar"           "body sidebar"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"       "body"}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay) .app-layout__sidebar{position:static;z-index:auto;width:25rem;animation:none;box-shadow:none;background-color:var(--s-background-default)}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-active .app-layout__grid{grid-template-columns:25rem 1fr 25rem;grid-template-areas:"header body sidebar"           "navigation body sidebar"}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:app-layout-sidebar-slide-in 0.3s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening.app-layout--nav-overlayed .app-layout__grid{animation:app-layout-sidebar-slide-in-with-collapsed-nav 0.3s}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:app-layout-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing.app-layout--nav-overlayed .app-layout__grid{animation:app-layout-sidebar-slide-out-with-collapsed-nav 0.3s}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:"header body"         "navigation body"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:22.5rem 1fr}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;z-index:3;top:0;right:0;bottom:0;width:min(40%, 25rem)}.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--rounded-corners){border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:"header"         "navigation"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:"body"         "body"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:"sidebar"         "sidebar"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active):not(.app-layout--sidebar-opening) .app-layout__sidebar{display:none}@media (min-width: 768px){.app-layout--sidebar-closing .app-layout__sidebar{animation:app-layout-sidebar-overlay-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}}@media (min-width: 1800px){.app-layout--sidebar-closing:not(.app-layout--sidebar-positioning-overlay) .app-layout__sidebar{animation:none}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout--has-bottom-bar .app-layout__body{grid-template-rows:minmax(var(--header-height), auto) auto 1fr auto;grid-template-areas:"app-bar"       "banner"       "content"       "bottom-bar"}.app-layout--has-bottom-bar .app-layout__content{border-bottom:var(--s-border-width-default) solid transparent}.app-layout--has-bottom-bar .app-layout__bottom-bar{display:block;padding-bottom:env(safe-area-inset-bottom, 0)}.app-layout--has-bottom-banner .app-layout__bottom-banner{display:block}.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button{display:block}.app-layout--has-custom-sidebar-header .app-layout__sidebar-header{display:none}.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header{display:block}.app-layout--has-floating-action-button .app-layout__floating-action-button{display:block}.app-layout--hide-app-bar .app-layout__body{grid-template-rows:auto 1fr;grid-template-areas:"banner"       "content"       "bottom-bar"}.app-layout--content-scrollable:not(.app-layout--content-scrolled-to-top) .app-layout__app-bar{border-bottom-color:var(--s-border-default)}.app-layout--content-scrollable.app-layout--has-bottom-bar:not(.app-layout--content-scrolled-to-bottom):not(.app-layout--has-bottom-banner) .app-layout__content{border-bottom-color:var(--s-border-default)}.app-layout--nav-scrollable:not(.app-layout--nav-scrolled-to-top) .app-layout__header{border-bottom-color:var(--s-border-default)}.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__sidebar-header,.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__custom-sidebar-header{border-bottom-color:var(--s-border-default)}.app-layout--prevent-content-overflow .app-layout__content{overflow:hidden}.app-layout--prevent-content-overflow .app-layout__content-inner{max-height:100%}.app-layout__header{z-index:1;display:flex;min-width:0;height:var(--header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__header{border-right:var(--s-border-width-default) solid var(--s-border-default)}}@media (min-width: 992px){.app-layout__header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__app-name{min-width:0}.app-layout__app-name .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{flex-shrink:0}@media (min-width: 992px){.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{display:none}}.app-layout__app-bar-mobile-menu-button{padding-left:var(--s-space-8)}.app-layout__navigation-back-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__floating-action-button{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16);display:none}.app-layout__navigation-controls{flex-shrink:0}.app-layout__navigation{overflow-y:auto;border-right:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:navigation}.app-layout__nav-overlay-toggle,.app-layout__nav-expansion-toggle{display:none}@media (min-width: 992px){.app-layout__nav-overlay-toggle,.app-layout__nav-expansion-toggle{display:block}}.app-layout__nav-expansion-toggle{padding-left:var(--s-space-16)}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;background-color:var(--s-background-default);grid-area:body;grid-template-rows:minmax(var(--header-height), auto) auto 1fr;grid-template-areas:"app-bar"     "banner"     "content"}.app-layout__app-bar{--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem;display:flex;min-width:0;align-items:center;border-bottom:var(--s-border-width-default) solid transparent;grid-area:app-bar;gap:var(--s-space-8)}.app-layout__bottom-bar{display:none;min-width:0;align-items:center;grid-area:bottom-bar}.app-layout__back-to-navigation-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__banner{grid-area:banner}.app-layout__app-bar-content{min-width:0;flex-grow:1}.app-layout__custom-app-bar-back-button{display:none;padding-left:var(--s-space-8)}.app-layout__app-bar-controls{display:none;padding-right:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-controls{padding-right:var(--s-space-16)}}.app-layout__content{overflow:auto;grid-area:content;display:flex;flex-direction:column}.app-layout__content-inner{flex-grow:1}.app-layout__sidebar{display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:sidebar;grid-template-rows:var(--header-height) 1fr;grid-template-areas:"sidebar-header"     "sidebar-content"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout__sidebar{animation:none}}}.app-layout__custom-sidebar-header{display:none;min-width:0;border-bottom:var(--s-border-width-default) solid transparent;grid-area:sidebar-header}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__sidebar-header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;grid-area:sidebar-content}.app-layout__bottom-banner{display:none;position:sticky;right:0;bottom:0;left:0;z-index:5}@media (min-width: 768px){.app-layout--rounded-corners .app-layout__grid{-moz-column-gap:var(--s-space-8);column-gap:var(--s-space-8)}.app-layout--rounded-corners .app-layout__header{border-right:none;border-radius:var(--s-border-radius-l) var(--s-border-radius-l) 0 0}.app-layout--rounded-corners .app-layout__navigation{border-right:none;border-radius:0 0 var(--s-border-radius-l) var(--s-border-radius-l)}.app-layout--rounded-corners .app-layout__body,.app-layout--rounded-corners .app-layout__sidebar{overflow:hidden;border-radius:var(--s-border-radius-l)}.app-layout--rounded-corners .app-layout__sidebar{border-left:none;box-shadow:-12px 0 32px -10px rgba(23, 23, 23, 0.12),         -8px 4px 12px -8px rgba(23, 23, 23, 0.08);background-color:var(--s-surface-overlay-default)}}@media (min-width: 768px){.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid,.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"           "body"}}@media (min-width: 768px){.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar .app-layout__sidebar{position:absolute;z-index:3;top:0;right:0;bottom:0;width:min(50%, 25rem);border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@keyframes app-layout-nav-overlay-slide-in-desktop{from{width:0}to{width:22.5rem}}@keyframes app-layout-nav-overlay-slide-in-large-desktop{from{width:0}to{width:25rem}}@media print{.app-layout__content{overflow:visible}:host,.app-layout,.app-layout__grid,.app-layout__body{height:auto;overflow:visible}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"           "navigation"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{display:flex}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{display:block}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"           "body"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{display:grid}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{display:grid}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:"";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:"";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation-direction:reverse}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-in-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 0}to{overflow:hidden;grid-template-columns:0 1fr 25rem}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@keyframes app-layout-sidebar-slide-out-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 25rem}to{overflow:hidden;grid-template-columns:0 1fr 0}}@keyframes app-layout-no-nav-sidebar-slide-in{from{overflow:hidden;grid-template-columns:1fr 0}to{overflow:hidden;grid-template-columns:1fr 25rem}}@keyframes app-layout-no-nav-sidebar-slide-out{from{overflow:hidden;grid-template-columns:1fr 25rem}to{overflow:hidden;grid-template-columns:1fr 0}}', _ = "SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE", f = class {
+  constructor(t) {
+    b(this, t), this.ctaClick = e(this, "ctaClick", 7), this.mobileViewChange = e(this, "mobileViewChange", 7), this.navigationBackButtonClick = e(this, "navigationBackButtonClick", 7), this.navigationExpansionStateChange = e(this, "navigationExpansionStateChange", 7), this.sidebarToggle = e(this, "sidebarToggle", 7), this.backToNavigationViewButtonLabel = "Back to navigation", this.navigationBackButtonLabel = "Go back", this.navigationExpansionStateStorageKey = _, this.navigationToggleLabel = "Toggle navigation", this.navigationOverlayLabel = "Show navigation", this.sidebarPositioning = "auto", this.sidebarCloseButtonLabel = "Close sidebar", this.transitionStyle = "slides", this.contentScrollState = {
+      scrollable: !1,
+      scrolledToTop: !1,
+      scrolledToBottom: !1
+    }, this.mobileView = "navigation", this.navScrollState = {
+      scrollable: !1,
+      scrolledToTop: !1
+    }, this.navExpansionState = "expanded", this.sidebarScrollState = {
+      scrollable: !1,
+      scrolledToTop: !1
+    }, this.mediaQueryUnsubscribe = () => {
+    }, this.onBackToNavigationViewButtonClick = () => {
+      this.changeMobileView("navigation");
+    }, this.onCtaClick = (o) => {
+      this.ctaClick.emit(o);
+    }, this.onNavigationBackButtonClick = (o) => {
+      this.navigationBackButtonClick.emit(o);
+    }, this.onSidebarCloseButtonClick = () => {
+      this.hideSidebar();
+    }, this.onContentScroll = p(() => {
+      this.updateContentScrollState();
+    }, 16), this.onNavScroll = p(() => {
+      this.updateNavScrollState();
+    }, 16), this.onSidebarScroll = p(() => {
+      this.updateSidebarScrollState();
+    }, 16), this.toggleNavigation = () => {
+      if (!this.collapsibleNavigation)
+        return;
+      const o = this.navExpansionState === "expanded" ? "collapsed" : "expanded";
+      this.setCollapsibleNavigationState(o);
+    }, this.overlayNavigation = (o) => {
+      o.stopPropagation(), this.setCollapsibleNavigationState("overlayed");
+    };
+  }
+  componentWillLoad() {
+    this.initialMobileView && (this.mobileView = this.initialMobileView), this.mutationObserver = new MutationObserver(() => {
+      this.updateBottomBarStatus(), this.updateBottomBannerStatus(), this.updateCustomAppBarBackButtonStatus(), this.updateNavigationStatus(), this.updateSidebarStatus();
+    }), this.mutationObserver.observe(this.el, { childList: !0 }), queueMicrotask(() => {
+      this.updateBottomBarStatus(), this.updateBottomBannerStatus(), this.updateCustomAppBarBackButtonStatus(), this.updateSidebarStatus(), this.updateNavigationStatus(), this.checkMobileView();
+    });
+  }
+  componentDidLoad() {
+    this.mediaQueryUnsubscribe = h.subscribe((t) => {
+      this.isDesktop = t;
+    }), queueMicrotask(() => {
+      this.restoreNavExpansionState(), this.updateContentScrollState(), this.updateSidebarScrollState(), this.updateNavScrollState();
+    });
+  }
+  disconnectedCallback() {
+    var t;
+    this.mediaQueryUnsubscribe(), (t = this.mutationObserver) == null || t.disconnect();
+  }
+  onDocumentClick(t) {
+    if (!this.collapsibleNavigation || this.navExpansionState !== "overlayed")
+      return;
+    t.composedPath().includes(this.navEl) || t.composedPath().includes(this.headerEl) || this.setCollapsibleNavigationState("collapsed");
+  }
+  onKeyDown(t) {
+    t.key === "Escape" && this.navExpansionState === "overlayed" && this.setCollapsibleNavigationState("collapsed");
+  }
+  watchMobileView() {
+    this.checkMobileView();
+  }
+  async showSidebar() {
+    if (this.sidebarActive || !this.hasSidebar)
+      return;
+    Boolean(this.sidebarOpeningTimeout) && clearTimeout(this.sidebarOpeningTimeout), this.sidebarOpening = !0;
+    const t = l() || s() ? 0 : 300;
+    this.sidebarOpeningTimeout = setTimeout(() => {
+      this.sidebarActive = !0, this.sidebarOpening = !1, this.changeMobileView("sidebar"), this.sidebarToggle.emit(!0);
+    }, t);
+  }
+  async hideSidebar() {
+    if (!this.sidebarActive || !this.hasSidebar)
+      return;
+    Boolean(this.sidebarClosingTimeout) && clearTimeout(this.sidebarClosingTimeout), this.sidebarClosing = !0;
+    const t = l() || s() ? 0 : 300 - 10;
+    this.sidebarClosingTimeout = setTimeout(() => {
+      this.sidebarActive = !1, this.sidebarClosing = !1, this.changeMobileView("body"), this.sidebarToggle.emit(!1);
+    }, t);
+  }
+  async toggleSidebar() {
+    !this.hasSidebar || (this.sidebarActive ? this.hideSidebar() : this.showSidebar());
+  }
+  async getCollapsibleNavigationState() {
+    return this.navExpansionState;
+  }
+  async setCollapsibleNavigationState(t) {
+    !this.collapsibleNavigation || (this.navExpansionState = t, this.navigationExpansionStateChange.emit(this.navExpansionState), localStorage.setItem(this.navigationExpansionStateStorageKey, this.navExpansionState));
+  }
+  async changeMobileView(t, o = !0) {
+    if (this.mobileView === t || t === "navigation" && !this.hasNavigation || t === "sidebar" && !this.hasSidebar)
+      return;
+    if (!l() || !o) {
+      this.mobileView = t, this.mobileViewChange.emit(this.mobileView);
+      return;
+    }
+    Boolean(this.transitionTimeout) && clearTimeout(this.transitionTimeout), this.transitioningFrom = this.mobileView, this.transitioningTo = t;
+    const n = s() ? 0 : this.transitionStyle === "slides" ? 400 : this.transitionStyle === "dialog" ? 300 : 0;
+    this.transitionTimeout = setTimeout(() => {
+      this.mobileView = t, this.transitioningFrom = void 0, this.transitioningTo = void 0, this.mobileViewChange.emit(this.mobileView);
+    }, n);
+  }
+  checkMobileView() {
+    if (this.mobileView === "navigation" && !this.hasNavigation || this.mobileView === "sidebar" && !this.hasSidebar) {
+      this.mobileView = "body";
+      return;
+    }
+    const t = this.mobileView === "sidebar" || this.sidebarActive;
+    t !== this.sidebarActive && (t ? this.showSidebar() : this.hideSidebar());
+  }
+  updateBottomBannerStatus() {
+    this.hasBottomBanner = Boolean(this.el.querySelector('[slot="bottom-banner"]'));
+  }
+  updateBottomBarStatus() {
+    this.hasBottomBar = Boolean(this.el.querySelector('[slot="bottom-bar"]'));
+  }
+  updateNavigationStatus() {
+    this.hasNavigation = Boolean(this.el.querySelector('[slot="navigation"]'));
+  }
+  updateCustomAppBarBackButtonStatus() {
+    this.hasCustomAppBarBackButton = Boolean(this.el.querySelector('[slot="custom-app-bar-back-button"]'));
+  }
+  updateSidebarStatus() {
+    this.hasSidebar = Boolean(this.el.querySelector('[slot="sidebar"]'));
+  }
+  updateContentScrollState() {
+    const t = {
+      scrollable: this.contentEl.scrollHeight > this.contentEl.clientHeight,
+      scrolledToTop: this.contentEl.scrollTop === 0,
+      scrolledToBottom: Math.round(this.contentEl.scrollTop + this.contentEl.clientHeight) >= this.contentEl.scrollHeight
+    };
+    Object.keys(t).some((o) => t[o] !== this.contentScrollState[o]) && (this.contentScrollState = t);
+  }
+  updateNavScrollState() {
+    const t = {
+      scrollable: this.navEl.scrollHeight > this.navEl.clientHeight,
+      scrolledToTop: this.navEl.scrollTop === 0
+    };
+    Object.keys(t).some((o) => t[o] !== this.navScrollState[o]) && (this.navScrollState = t);
+  }
+  updateSidebarScrollState() {
+    const t = {
+      scrollable: this.sidebarEl.scrollHeight > this.sidebarEl.clientHeight,
+      scrolledToTop: this.sidebarEl.scrollTop === 0
+    };
+    Object.keys(t).some((o) => t[o] !== this.sidebarScrollState[o]) && (this.sidebarScrollState = t);
+  }
+  restoreNavExpansionState() {
+    if (!this.collapsibleNavigation)
+      return;
+    const t = localStorage.getItem(this.navigationExpansionStateStorageKey);
+    Boolean(t) && this.setCollapsibleNavigationState(t);
+  }
+  render() {
+    const t = (this.mobileView === "body" || this.transitioningTo) && this.hasNavigation && !this.hasCustomAppBarBackButton, o = Boolean(this.el.querySelector('[slot="app-bar-controls"]')), r = Boolean(this.el.querySelector('[slot="app-bar-mobile-menu-button"]')), d = Boolean(this.el.querySelector('[slot="custom-sidebar-header"]')), n = Boolean(this.el.querySelector('[slot="floating-action-button"]')) || Boolean(this.ctaLabel), y = this.hasNavigation && (!this.collapsibleNavigation || this.navExpansionState !== "collapsed" || !this.isDesktop), u = m("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--nav-${this.isDesktop ? this.navExpansionState : "expanded"}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, `app-layout--sidebar-positioning-${this.sidebarPositioning}`, {
+      "app-layout--content-scrollable": this.contentScrollState.scrollable,
+      "app-layout--content-scrolled-to-top": this.contentScrollState.scrolledToTop,
+      "app-layout--content-scrolled-to-bottom": this.contentScrollState.scrolledToBottom,
+      "app-layout--has-app-bar-mobile-menu-button": r,
+      "app-layout--has-app-bar-controls": o,
+      "app-layout--has-bottom-banner": this.hasBottomBanner,
+      "app-layout--has-bottom-bar": this.hasBottomBar,
+      "app-layout--has-custom-app-bar-back-button": this.hasCustomAppBarBackButton,
+      "app-layout--has-custom-sidebar-header": d,
+      "app-layout--has-floating-action-button": n,
+      "app-layout--has-navigation": this.hasNavigation,
+      "app-layout--has-sidebar": this.hasSidebar,
+      "app-layout--hide-app-bar": this.hideAppBar,
+      "app-layout--nav-collapsible": this.collapsibleNavigation && this.isDesktop,
+      "app-layout--nav-scrollable": this.navScrollState.scrollable,
+      "app-layout--nav-scrolled-to-top": this.navScrollState.scrolledToTop,
+      "app-layout--prevent-content-overflow": this.preventContentOverflow,
+      "app-layout--rounded-corners": this.roundedCorners,
+      "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
+      "app-layout--sidebar-closing": this.sidebarClosing,
+      "app-layout--sidebar-opening": this.sidebarOpening,
+      "app-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
+      "app-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop
+    });
+    return a(c, { key: "ead881277a155e115ebe4f6be56cbeee85dd8408" }, a("section", { key: "5bc17130e3847963fcbbf98450c9eb2cc934db5b", "aria-labelledby": "app-name", class: u }, a("div", { key: "9d6ffbe9e8ca62cc8d1be901d41da95d05653936", class: "app-layout__grid" }, a("header", { key: "b8da1969a2b9ad39886762cf1dc4afe3b0027e7c", class: "app-layout__header", ref: (i) => this.headerEl = i }, a("span", { key: "84d904bfc1411a91f3095fad617dfb17c1307b34", class: "app-layout__navigation-mobile-menu-button" }, a("slot", { key: "a1b82a828e4ec51a9e6015426cf9ea3fc86b7fd1", name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && a("span", { key: "e3c359650ce2f138a51b979868aa60a18d5e0bf2", class: "app-layout__nav-overlay-toggle" }, a("swirl-button", { key: "1aa91b092058f60b05055d787f61cd35cb04e32b", hideLabel: !0, icon: this.navExpansionState !== "expanded" ? "<swirl-icon-dock-left-expand></swirl-icon-dock-left-expand>" : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation })), this.showNavigationBackButton && a("span", { key: "ef0d16e6afbcdb638f1d2e3800e2793c743af1c6", class: "app-layout__navigation-back-button" }, a("swirl-button", { key: "9429c72b5d34efeb86239416590c0fadd389724a", hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick })), a("swirl-heading", { key: "605fe675f9a4eced75c4f33f272793482086ad4b", as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), y && a("span", { key: "165a463783bd82331c99bb30eb9564d032ed4f52", class: "app-layout__navigation-controls" }, a("slot", { key: "eb839a19964f70465570139fe56eb6450fcdbaa3", name: "navigation-controls" }))), a("nav", { key: "7183608b9b4ac5e13366da237f4439b0a0bdd2c1", "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (i) => this.navEl = i, inert: this.isDesktop && this.collapsibleNavigation && this.navExpansionState === "collapsed" }, a("slot", { key: "de316daf0bdedd249f05249fca3a68146ad293fb", name: "navigation" })), a("section", { key: "876c052fefc7c238022519e4299f2d0e2655d939", "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && a("header", { key: "6974d3eb909ea07eadee96744b7bbd17b3af4923", class: "app-layout__app-bar" }, a("span", { key: "e03a998a4a7f402e5745d5ff62594287b94cbe7d", class: "app-layout__app-bar-mobile-menu-button" }, a("slot", { key: "e79dd9bc40bfb32c598c3056bfad9b65db8e566f", name: "app-bar-mobile-menu-button" })), t && a("span", { key: "c29d0feecef2eceb40eee6a1bb4b2cd00a4d88df", class: "app-layout__back-to-navigation-button" }, a("swirl-button", { key: "bbd34db4e17a6fc4e617a10ca82a7748d0ff9873", hideLabel: !0, icon: this.transitionStyle === "dialog" ? "<swirl-icon-close></swirl-icon-close>" : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick })), this.collapsibleNavigation && this.navExpansionState !== "expanded" && a("span", { key: "3bfa9373facbcfad561bd4a13c102551ff9eea2d", class: "app-layout__nav-expansion-toggle" }, a("swirl-button", { key: "f356a0915fe51b90dbbbc7e571f3a053d273c839", hideLabel: !0, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation })), a("span", { key: "ec4a483ca7f2b1cbe1bb1baec59d825bb5bf34de", class: "app-layout__custom-app-bar-back-button" }, a("slot", { key: "7a75144dca7d3f2947f3304059b213ed34c9fccb", name: "custom-app-bar-back-button" })), a("div", { key: "91a9316dff16169830a236fe564f4bb672a8f8dc", class: "app-layout__app-bar-content" }, a("slot", { key: "9e716914f665e06f766be7ffc4d36a2aa8dc16d8", name: "app-bar" })), a("div", { key: "13fee72ac6a60b0dea5b17f8c2191c01e61ac9aa", class: "app-layout__app-bar-controls" }, a("slot", { key: "aa87260f11d2fd9a7bec4ef8bbbc856a80205e67", name: "app-bar-controls" }))), a("div", { key: "93b5ee42206a0209873fa425f8ad2d9abff9329e", class: "app-layout__banner" }, a("slot", { key: "744d17552abf2a8fe3daec33c20c3c7e35b79b37", name: "banner" })), a("div", { key: "4cefbb00696675a650c3db78764b682ad02a4a46", class: "app-layout__content", onScroll: this.onContentScroll, ref: (i) => this.contentEl = i }, a("div", { key: "1be8cd073fe029f66ab5a05ac4c6e067e76bc4cc", class: "app-layout__content-inner" }, a("slot", { key: "c9e1168dd0fb6d163a9075ef1608d952604d243a", name: "content" })), a("div", { key: "6968e87b6dbe665e866b3f478a057baf8754ebcd", class: "app-layout__bottom-banner" }, a("slot", { key: "eb08f966b57af9c58e58ca9a3f7f7b5d7ef4caff", name: "bottom-banner" }))), a("div", { key: "88615eee9cb9f9b9a83cbcc84e09c31da30a34c6", class: "app-layout__bottom-bar" }, a("slot", { key: "1ab96ca6bd2fad1dce641afa04be1989aa768aba", name: "bottom-bar" }))), a("aside", { key: "8027698ffd40319ceb4d9226cb5d17eedcb07f99", class: "app-layout__sidebar" }, a("header", { key: "173cdf1294ca01a5904b36a2915bcef4355a5e10", class: "app-layout__custom-sidebar-header" }, a("slot", { key: "1d95e3adb89e58c8deecff7b3117fccec0da82f2", name: "custom-sidebar-header" })), a("header", { key: "14b1db7a1fd69e3c2d2ee0121ed192d9fa838049", class: "app-layout__sidebar-header" }, a("swirl-button", { key: "a3a5af8b61e3aa2a8ca6e3bcd2531f7f6cfb5c2c", class: "app-layout__sidebar-close-button", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), a("swirl-heading", { key: "703bcae42650587c7c0cf2593a28f48c3ee85fde", as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), a("div", { key: "c9f44a945bdf0dd8fee0b04100c27751daee72c6", class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (i) => this.sidebarEl = i }, a("slot", { key: "23d926e596db8d4f6d6c6757b22f0be25549f875", name: "sidebar" }))), a("span", { key: "4d2613d254b5495e6bc43264deede91b5b5b9dea", class: "app-layout__floating-action-button" }, this.ctaLabel && a("swirl-button", { key: "a0a4fc0f24a20358f80a30b032fd297decbf1e22", hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" }), a("slot", { key: "df28233ad76b912653430f85f0be9b85f14d27b5", name: "floating-action-button" })))));
+  }
+  get el() {
+    return g(this);
+  }
+  static get watchers() {
+    return {
+      mobileView: [{
+        watchMobileView: 0
+      }]
+    };
+  }
+};
+f.style = v();
+export {
+  f as swirl_app_layout
+};

package/dist/swirl-autocomplete.entry.6df8b767.js

@@ -0,0 +1,117 @@
+import { r as p, c as m, h as o, H as b, g as f } from "./index.2e681538.js";
+import { a as g, c as v, o as y } from "./floating-ui.dom-CLsTbQHn.fe95e3a6.js";
+import { c as w } from "./index-orsBiyT_.fc4357c3.js";
+import { d as S } from "./utils-CCck-DTo.e4e43b6a.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:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));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.clearable = !0, this.clearButtonLabel = "Clear input", this.generateSuggestions = async () => [], this.menuLabel = "Suggestions", this.active = !1, this.loading = !1, this.suggestions = [], 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((l) => !s.includes(l.id)).map((l) => l.id);
+        this.value = [
+          ...this.value.filter((l) => !n.includes(l.id)),
+          ...this.suggestions.filter((l) => s.includes(l.id) && !this.value.some((r) => r.id === l.id))
+        ], this.valueChange.emit(this.value), this.inputEl.value = "";
+        const a = this.inputEl.querySelector("input");
+        Boolean(a) && (a.value = "", queueMicrotask(() => {
+          a.focus(), this.close();
+        }), this.updateSuggestions(a.value));
+      } else if (Boolean(t.detail[0])) {
+        const s = t.detail[0], n = this.suggestions.find((a) => a.id === s);
+        if (!Boolean(n))
+          return;
+        this.value = n, this.valueChange.emit(this.value), queueMicrotask(() => {
+          var a;
+          (a = this.inputEl.querySelector("input")) == null || a.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());
+    };
+  }
+  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 = g(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 v(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 l, r, u, c;
+    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 : ((l = this.value) == null ? void 0 : l.label) || "", a = w("autocomplete", {
+      "autocomplete--inactive": !this.active
+    });
+    return o(b, { key: "bf076ad2e3840ef8bd57153c90107d3df1a806ad" }, o("div", { key: "d5a5988e04aab0d702c0dee903d784dc69101933", class: a, onKeyDown: this.onKeyDown }, this.multiSelect && Array.isArray(this.value) && this.value.length > 0 && o("div", { key: "c0032b03256dc5c88fc38236599fbbd8cdae96df", class: "autocomplete__multi-select-tags" }, o("swirl-stack", { key: "1d4b148a2273271571b6e05455cd113ef7c1656e", 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", { key: "f40bd864adb81e66ae73ce79f54bd6f4b0d1312e", 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", { key: "1f1ee304b4fdfacc9f582f1b7c85bd7359841895", class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (e) => this.listboxContainerEl = e, style: {
+      top: Boolean(this.position) ? `${(r = this.position) == null ? void 0 : r.y}px` : "",
+      left: Boolean(this.position) ? `${(u = this.position) == null ? void 0 : u.x}px` : "",
+      width: `${((c = this.inputEl) == null ? void 0 : c.getBoundingClientRect().width) + 32}px`
+    } }, this.loading && o("div", { key: "e163af35f06c0d4c8be7ffbccfad83138a6677bd", class: "autocomplete__spinner" }, o("swirl-spinner", { key: "252d6a9ba7c4f035e06d79d400d5d63db342a4ec" })), this.suggestions.length > 0 && o("swirl-option-list", { key: "4e2360c358a4c639812821f753dbcdf5d723bb60", 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 h;
+      return o("swirl-option-list-item", { selected: Array.isArray(this.value) ? this.value.some((d) => d.id === e.id) : ((h = this.value) == null ? void 0 : h.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: 0
+      }]
+    };
+  }
+};
+A.style = x();
+export {
+  A as swirl_autocomplete
+};

package/dist/swirl-avatar-group.entry.c25b2088.js

@@ -0,0 +1,37 @@
+import { r as e, h as t, H as i } from "./index.2e681538.js";
+import { c as o } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const l = () => ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative}.avatar-group--diagonal-stack{display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group--diagonal-stack ::slotted(*:first-child){z-index:1;display:inline-flex;border-radius:50%;box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color);grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group--diagonal-stack ::slotted(*:nth-child(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--diagonal-stack ::slotted(*:nth-child(n+3)){display:none}.avatar-group--diagonal-stack .avatar-group__badge{position:absolute;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4))}.avatar-group--horizontal-stack{display:inline-flex}.avatar-group--horizontal-stack .avatar-group__badge{display:none}.avatar-group--horizontal-stack ::slotted(*){z-index:1;display:inline-flex;border-radius:50%;box-shadow:0 0 0 0.125rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color)}.avatar-group--horizontal-stack ::slotted(*:not(:first-child)){margin-left:calc(-1 * var(--s-space-4))}.avatar-group__badge{z-index:3;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)}", d = class {
+  constructor(a) {
+    e(this, a), this.layout = "diagonal", this.semantics = "group", this.avatars = [], this.onSlotChange = (r) => {
+      this.avatars = r.target.assignedElements(), this.layOutAvatars();
+    };
+  }
+  componentDidLoad() {
+    this.forceBadgeProps();
+  }
+  forceBadgeProps() {
+    if (!Boolean(this.badge))
+      return;
+    const a = this.badgeEl.querySelector("swirl-badge"), r = a == null ? void 0 : a.getAttribute("size");
+    Boolean(r) || a == null || a.setAttribute("size", "s");
+  }
+  layOutAvatars() {
+    this.layout === "diagonal" ? this.avatars.forEach((a) => {
+      a.style.position = "", a.style.zIndex = "";
+    }) : this.avatars.forEach((a, r) => {
+      a.style.position = "relative", a.style.zIndex = String(this.avatars.length - r);
+    });
+  }
+  render() {
+    const a = o("avatar-group", `avatar-group--${this.layout}-stack`, {
+      "avatar-group--has-badge": Boolean(this.badge)
+    }), r = o("avatar-group__badge");
+    return t(i, { key: "db0fba81fc616434e7efa68534fdb940cedad7d6" }, t("div", { key: "d8c744147498c6d6980980abfef224480037010e", "aria-label": this.label, class: a, role: this.semantics }, t("slot", { key: "44c853fedcf3db8d6869b9dd5ba0a8cc06fcbce5", onSlotchange: this.onSlotChange }), this.badge && t("span", { key: "4c47557ac791b9d62312fac213a053263a56ae40", class: r, innerHTML: this.badge, ref: (s) => this.badgeEl = s })));
+  }
+};
+d.style = l();
+export {
+  d as swirl_avatar_group
+};

package/dist/swirl-avatar.entry.ff9c2a28.js

@@ -0,0 +1,72 @@
+import { r as m, c as o, h as t, H as g, g as b } from "./index.2e681538.js";
+import { c as s } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const u = () => ":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%;border:var(--swirl-avatar-border-width, 0) solid     var(--swirl-avatar-border-color, transparent)}.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}.avatar--size-3xs .avatar__initials{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}.avatar--size-2xs .avatar__initials{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}.avatar--size-xs .avatar__initials{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}.avatar--size-s .avatar__initials{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}.avatar--size-m .avatar__initials{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}.avatar--size-l .avatar__initials{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}.avatar--size-xl .avatar__initials{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}.avatar--size-2xl .avatar__initials{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:1.25rem}.avatar--size-2xl .avatar__tool{transform:translate3d(-25%, -25%, 0px)}.avatar--size-2xl .avatar__tool--position-top{transform:translate3d(-25%, 25%, 0px)}.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--color-neutral .avatar__initials{color:var(--s-text-subdued);background-color:var(--s-surface-neutral-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)}", n = {
+  "3xs": 20,
+  "2xs": 24,
+  xs: 28,
+  s: 32,
+  m: 40,
+  l: 48,
+  xl: 64,
+  "2xl": 144
+}, f = class {
+  constructor(e) {
+    m(this, e), this.imageError = o(this, "imageError", 7), this.imageLoad = o(this, "imageLoad", 7), this.badgePosition = "bottom", this.color = "kiwi", this.interactive = !1, this.showLabel = !1, this.size = "m", this.toolPosition = "bottom", this.variant = "round", this.loadingError = !1, this.loaded = !1, this.inViewport = !1, this.componentLoaded = !1, this.onImageElementUpdate = (a) => {
+      var i, r;
+      (i = this.imgEl) == null || i.removeEventListener("load", this.setImageAvailable), (r = this.imgEl) == null || r.removeEventListener("error", this.setImageUnavailable), this.imgEl = a, this.imgEl && (this.imgEl.addEventListener("load", this.setImageAvailable), this.imgEl.addEventListener("error", this.setImageUnavailable));
+    }, this.setImageAvailable = () => {
+      this.imageAvailable = !0, this.loadingError = !1, this.loaded = !0, this.imageLoad.emit();
+    }, this.setImageUnavailable = () => {
+      this.imageAvailable = !1, this.loaded = !0, this.loadingError = !0, this.imageError.emit();
+    }, this.onKeydown = (a) => {
+      a.code === "Space" ? a.preventDefault() : a.code === "Enter" && (a.preventDefault(), this.element.click());
+    }, this.onKeyup = (a) => {
+      a.code === "Space" && (a.preventDefault(), this.element.click());
+    };
+  }
+  componentDidLoad() {
+    this.setupIntersectionObserver(), this.componentLoaded = !0;
+  }
+  connectedCallback() {
+    this.componentLoaded && this.setupIntersectionObserver();
+  }
+  disconnectedCallback() {
+    var e, a, i;
+    (e = this.intersectionObserver) == null || e.disconnect(), (a = this.imgEl) == null || a.removeEventListener("load", this.setImageAvailable), (i = this.imgEl) == null || i.removeEventListener("error", this.setImageUnavailable);
+  }
+  watchSrcProp() {
+    this.imageAvailable = void 0;
+  }
+  setupIntersectionObserver() {
+    this.loading === "intersecting" && (this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
+      threshold: 0
+    }), this.intersectionObserver.observe(this.element));
+  }
+  onVisibilityChange(e) {
+    this.inViewport = e.some((a) => a.isIntersecting);
+  }
+  render() {
+    const e = Boolean(this.src) && (this.imageAvailable || this.imageAvailable === void 0) && (this.loading !== "intersecting" || this.inViewport), a = (!e || !this.loaded && !this.loadingError) && Boolean(this.initials), i = !e && !a && Boolean(this.icon), r = !e && !a && !i, l = Boolean(this.badge) && this.size === "m", v = this.interactive ? "button" : void 0, d = s("avatar", `avatar--color-${this.color}`, `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
+      "avatar--has-icon": i || r,
+      "avatar--has-initials": a,
+      "avatar--interactive": this.interactive
+    }), c = s("avatar__badge", `avatar__badge--position-${this.badgePosition}`), h = s("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
+    return t(g, { key: "b3d8e85dff3421e87ab9dca84ec15fdaf039afce", "aria-label": this.interactive ? this.label : void 0, onKeydown: this.interactive ? this.onKeydown : void 0, onKeyup: this.interactive ? this.onKeyup : void 0, role: v, tabIndex: this.interactive ? 0 : void 0 }, t("span", { key: "4335f190575f73cdf79861888dc5f8647a402b32", class: d, part: "avatar" }, e && t("span", { key: "022ae94eb5a02e8fc41c1616294d4e6d5a647358", class: "avatar__image" }, t("img", { key: "282f880e1448ce6db97baa5127d7b83b642e15cc", alt: "", height: n[this.size], loading: this.loading !== "intersecting" ? this.loading : void 0, ref: this.onImageElementUpdate, src: this.src, width: n[this.size] })), a && t("span", { key: "aeffe97abbe40c527dba455267ea2840d6c02f78", class: "avatar__initials" }, t("span", { key: "8d902047feecfd8447e8cf0bcfaccff4cc2bd56d" }, this.initials)), i && t("span", { key: "6dab8a144035877ea3e2ed9c223343bd6542d802", class: "avatar__icon", innerHTML: this.icon }), r && t("span", { key: "37a926ce3051ea237dd2eb434b323982c6d88b73", class: "avatar__icon" }, t("swirl-icon-person", { key: "21f5c0a3679ce465c5fb9ac3baac62d912a6427a" })), l && t("span", { key: "6cb5c012f4ad1b149804148c3403022daa034d44", class: c, innerHTML: this.badge }), t("span", { key: "a954b65d8bf20390ccfe7444b00a6bba94d76965", class: h }, t("slot", { key: "06f2fa1ef610567be0072c1b4937af2164e794de", name: "tool" }))), this.showLabel && t("span", { key: "2c6772b4e302dde8c58507bd89ab221e91e0b810", "aria-hidden": !0, class: "avatar__label" }, this.label));
+  }
+  get element() {
+    return b(this);
+  }
+  static get watchers() {
+    return {
+      src: [{
+        watchSrcProp: 0
+      }]
+    };
+  }
+};
+f.style = u();
+export {
+  f as swirl_avatar
+};