@getflip/swirl-components-react 0.529.0 → 0.530.0

package/dist/swirl-accordion-item.entry.471764d3.js

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

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

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

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

@@ -0,0 +1,15 @@
+import { r as i, h as a, H as t } from "./index.d98e0d86.js";
+import "react";
+import "react-dom";
+const e = () => ":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-section__label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);padding:var(--s-space-8) var(--s-space-12)}}", c = class {
+  constructor(s) {
+    i(this, s), this.separatorSpacing = "4", this.spacing = "0", this.hasSeparator = !1;
+  }
+  render() {
+    return a(t, { key: "783ead35780725c3448e67b29d8514c1878ac776" }, this.hasSeparator && a("swirl-separator", { key: "56569148428e9c2c84d8b6b98f84303cb4bcb6a7", spacing: this.separatorSpacing }), a("div", { key: "6b5bc91e392e50ca605bf4dc2aa0731cc016cd9b", "aria-labelledby": "label", class: "action-list-section", role: "group" }, a("span", { key: "f259d0ffea93d5e663d96af7a404edb861c891ab", class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), a("swirl-stack", { key: "1b64ecbc112ef03a63df681ad9f12a2cd392808f", spacing: this.spacing, align: "stretch" }, a("slot", { key: "ea6b73395b035990f4806926a61699d55dcacabb" }))));
+  }
+};
+c.style = e();
+export {
+  c as swirl_action_list_section
+};

package/dist/swirl-action-list_2.entry.7f89b60c.js

@@ -0,0 +1,113 @@
+import { r as c, h as a, H as l, g as d } from "./index.d98e0d86.js";
+import { q as h, k as m } from "./utils-CCck-DTo.e4e43b6a.js";
+import { c as b } from "./index-orsBiyT_.fc4357c3.js";
+import { D as f } from "./media-query.service-CCYT6DU8.f0931fdc.js";
+import "react";
+import "react-dom";
+const u = () => ":host{display:block;width:100%}:host *{box-sizing:border-box}", p = class {
+  constructor(e) {
+    c(this, e), this.onKeyDown = (t) => {
+      t.code === "ArrowDown" || t.code === "ArrowRight" ? (t.preventDefault(), t.stopPropagation(), this.focusNextItem()) : (t.code === "ArrowUp" || t.code === "ArrowLeft") && (t.preventDefault(), t.stopPropagation(), this.focusPreviousItem());
+    }, this.onFocusOut = (t) => {
+      if (this.isInsidePopover)
+        return;
+      const i = t.relatedTarget, s = t.target, o = (s == null ? void 0 : s.tagName) === "SWIRL-ACTION-LIST-ITEM", n = i === null || !this.el.contains(i);
+      !this.isInsidePopover && n && o && this.container.setAttribute("tabindex", "0");
+    }, this.onFocus = () => {
+      var s, o;
+      if (this.isInsidePopover)
+        return;
+      this.container.removeAttribute("tabindex");
+      const t = this.getItems(), i = this.getActiveItemIndex();
+      i > -1 ? (s = t[i]) == null || s.focus() : (o = t[0]) == null || o.focus();
+    };
+  }
+  componentDidLoad() {
+    queueMicrotask(() => {
+      this.isInsidePopover = this.el.closest("swirl-popover") !== null, this.isInsidePopover || this.container.setAttribute("tabindex", "0");
+    }), this.setSectionSeparator();
+  }
+  getItems() {
+    return h(this.el, '[role="menuitem"]');
+  }
+  focusNextItem() {
+    const e = this.getItems(), i = (this.getActiveItemIndex() + 1) % e.length;
+    e[i].focus();
+  }
+  focusPreviousItem() {
+    var s;
+    const e = this.getItems(), t = this.getActiveItemIndex(), i = t === 0 ? e.length - 1 : t - 1;
+    (s = e[i]) == null || s.focus();
+  }
+  getActiveItemIndex() {
+    const e = this.getItems(), t = m();
+    return e.findIndex((i) => i === t || i === (t == null ? void 0 : t.querySelector('[role="menuitem"]')));
+  }
+  setSectionSeparator() {
+    if (!this.el)
+      return;
+    Array.from(this.el.querySelectorAll("swirl-action-list-section")).filter((t) => t.isConnected).forEach((t, i) => {
+      var s;
+      i === 0 && ((s = t.previousElementSibling) == null ? void 0 : s.tagName) !== "SWIRL-ACTION-LIST-ITEM" && (t.hasSeparator = !1);
+    });
+  }
+  render() {
+    return a(l, { key: "b69904ae0892ff3583235cbf1256d7599cd8c3bb" }, a("div", { key: "ef00e5cac280ebdd0e586ba0789df7c834a5175e", "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: (e) => this.container = e, role: "menu" }, a("slot", { key: "4771ca68fcb87dc96d44b78d9f3715440e073bf8", onSlotchange: this.setSectionSeparator })));
+  }
+  get el() {
+    return d(this);
+  }
+};
+p.style = u();
+const g = () => ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover:not(.action-list-item--aria-disabled){background-color:var(--s-state-hovered);--swirl-tag-background-default:var(--s-state-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-state-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.action-list-item:active:not(.action-list-item--aria-disabled){background-color:var(--s-translucent-low-pressed)}.action-list-item:disabled,.action-list-item.action-list-item--aria-disabled{cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description,.action-list-item.action-list-item--aria-disabled .action-list-item__label,.action-list-item.action-list-item--aria-disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon,.action-list-item.action-list-item--aria-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):not(.action-list-item--aria-disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled):not(.action-list-item--aria-disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__icon-badge{position:absolute;display:grid;bottom:0;right:0}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}", v = class {
+  constructor(e) {
+    c(this, e), this.intent = "default", this.size = "m", this.truncateLabel = !0, this.mediaQueryUnsubscribe = () => {
+    }, this.onClick = (t) => {
+      this.swirlAriaDisabled && (t.preventDefault(), t.stopPropagation());
+    };
+  }
+  componentDidLoad() {
+    this.mediaQueryUnsubscribe = f.subscribe((e) => {
+      this.forceIconProps(e);
+    }), this.updateAriaDescribedByElements();
+  }
+  disconnectedCallback() {
+    this.mediaQueryUnsubscribe();
+  }
+  updateAriaDescribedByElements() {
+    var i;
+    if (!this.buttonEl)
+      return;
+    const e = this.el.getRootNode(), t = ((i = this.swirlAriaDescribedby) != null ? i : "").split(/\s+/).filter(Boolean).map((s) => {
+      var o;
+      return (o = e.getElementById) == null ? void 0 : o.call(e, s);
+    }).filter((s) => Boolean(s));
+    this.buttonEl.ariaDescribedByElements = t.length > 0 ? t : null;
+  }
+  forceIconProps(e) {
+    var o, n, r;
+    const t = (o = this.iconEl) == null ? void 0 : o.children[0], i = (n = this.suffixEl) == null ? void 0 : n.children[0];
+    t == null || t.setAttribute("size", e ? "20" : "24");
+    const s = (r = this.iconBadgeEl) == null ? void 0 : r.children[0];
+    s == null || s.setAttribute("size", "xs"), s == null || s.setAttribute("variant", "dot"), (i == null ? void 0 : i.tagName) !== "SWIRL-TAG" && (i == null || i.setAttribute("size", e ? "20" : "24"));
+  }
+  render() {
+    const e = Boolean(this.badge), t = Boolean(this.iconBadge), i = Boolean(this.el.querySelector('[slot="suffix"]')), s = (Boolean(this.suffix) || i) && !this.disabled && !this.swirlAriaDisabled, o = b("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`, { "action-list-item--aria-disabled": this.swirlAriaDisabled });
+    return a(l, { key: "2125fa1f925e009717dce2d081073ef1c0daf3af" }, a("button", { key: "70431b881121839eda2ee3b1c1e1735bad5c2dba", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.swirlAriaDisabled ? "true" : void 0, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: o, disabled: this.disabled, onClick: this.onClick, part: "action-list-item", ref: (n) => this.buttonEl = n, role: "menuitem", tabIndex: -1, type: "button" }, a("slot", { key: "82b824c5a3eba3eca06624e0f39b99dc8b4e817b", name: "avatar" }), this.icon && a("span", { key: "c39848c4fc802d7fa58283728f825312aca4fcdf", class: "action-list-item__icon", innerHTML: this.icon, ref: (n) => this.iconEl = n }, t && a("span", { key: "484b34bbc3f458c19888ac1c87225a7b60f263a9", class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (n) => this.iconBadgeEl = n })), a("span", { key: "2551812393270a09212a9a362bf2cc8c09464118", class: "action-list-item__label-container" }, a("span", { key: "a4f58fdbec37c14f75ebb011293a9a25ec0ef583", class: "action-list-item__label", style: { whiteSpace: this.truncateLabel ? "nowrap" : "normal" } }, this.label), this.description && a("span", { key: "5e43fa6ad0690a941ace39c669d1caa2aaf56867", class: "action-list-item__description" }, this.description)), e && a("span", { key: "fc326052681d3a2f916c2766944d142d9250f7a3", class: "action-list-item__badge", innerHTML: this.badge }), s && a("span", { key: "5b8d18b728798d044fb109dc1701439f0c5d1387", class: "action-list-item__suffix", innerHTML: i ? void 0 : this.suffix, ref: (n) => this.suffixEl = n }, a("slot", { key: "360bb09dc29294c10754030304ec80dea385990d", name: "suffix" }))));
+  }
+  get el() {
+    return d(this);
+  }
+  static get watchers() {
+    return {
+      swirlAriaDescribedby: [{
+        updateAriaDescribedByElements: 0
+      }]
+    };
+  }
+};
+v.style = g();
+export {
+  p as swirl_action_list,
+  v as swirl_action_list_item
+};

package/dist/swirl-app-bar.entry.30f3addd.js

@@ -0,0 +1,49 @@
+import { r, c as s, h as t, H as l, g as c } from "./index.d98e0d86.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.6b59157c.js

@@ -0,0 +1,30 @@
+import { r as n, h as s, H as o } from "./index.d98e0d86.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: "ca9bee5af805a836fe3f8c6d07951df0a1e388ff" }, s("span", { key: "4588dc055e98aaf1e3bb3689272d118486975c96", class: a }, e && s("img", { key: "9858e8d8a4f28fbe026e11a353f1dac6b8b69ccf", alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" }), i && s("span", { key: "6331381bf41c6651edcb884805d09cdbc57db552", class: "app-icon__icon", innerHTML: this.icon })));
+  }
+};
+c.style = r();
+export {
+  c as swirl_app_icon
+};

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

@@ -0,0 +1,212 @@
+import { r as b, c as e, h as a, H as c, g } from "./index.d98e0d86.js";
+import { c as h } from "./index-orsBiyT_.fc4357c3.js";
+import { D as m } 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:calc(3.5625rem + env(safe-area-inset-top, 0));--swirl-app-layout-sidebar-width:25rem;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%,             var(--swirl-app-layout-sidebar-width)           );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: 768px){.app-layout--sidebar-inline.app-layout--sidebar-custom-width.app-layout--sidebar-active .app-layout__grid,.app-layout--sidebar-inline.app-layout--sidebar-custom-width.app-layout--sidebar-opening .app-layout__grid{grid-template-columns:1fr var(--swirl-app-layout-sidebar-width)}}@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:var(--swirl-app-layout-sidebar-width);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 var(--swirl-app-layout-sidebar-width);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%, var(--swirl-app-layout-sidebar-width))}.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 (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-custom-width .app-layout__sidebar{width:var(--swirl-app-layout-sidebar-width)}}@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:calc(var(--s-space-12) + env(safe-area-inset-top, 0));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;padding-top:env(safe-area-inset-top, 0px);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;padding-top:env(safe-area-inset-top, 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:calc(var(--s-space-12) + env(safe-area-inset-top, 0));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%, var(--swirl-app-layout-sidebar-width));border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 768px){.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar.app-layout--sidebar-custom-width .app-layout__sidebar{width:var(--swirl-app-layout-sidebar-width)}}@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 var(--swirl-app-layout-sidebar-width)}}@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 var(--swirl-app-layout-sidebar-width)}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr var(--swirl-app-layout-sidebar-width)}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 var(--swirl-app-layout-sidebar-width)}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 var(--swirl-app-layout-sidebar-width)}}@keyframes app-layout-no-nav-sidebar-slide-out{from{overflow:hidden;grid-template-columns:1fr var(--swirl-app-layout-sidebar-width)}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 = m.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 getScrollContainer() {
+    return this.contentEl;
+  }
+  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 = h("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-custom-width": Boolean(this.sidebarWidth),
+      "app-layout--sidebar-inline": this.hasSidebar && !this.hasNavigation && this.sidebarPositioning !== "overlay",
+      "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: "ea5e9984dfa86c576366d2ec73e8649152c14928", style: {
+      "--swirl-app-layout-sidebar-width": this.sidebarWidth
+    } }, a("section", { key: "8480c594adca8240e1f54b80e38b1fbb7e987276", "aria-labelledby": "app-name", class: u }, a("div", { key: "85ad1344215084054ffa8703d68bb1de1a4cabef", class: "app-layout__grid" }, a("header", { key: "d47c99f2762bcd6be5a327dbeb10a43fb4568557", class: "app-layout__header", ref: (i) => this.headerEl = i }, a("span", { key: "3561308f08c40d1450fba3d76d8a4ca9801b42ef", class: "app-layout__navigation-mobile-menu-button" }, a("slot", { key: "7161e03c5a97a5610b71c1a84396a582c5372d3e", name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && a("span", { key: "815e76032a56f68a3a29c7209c2f00b84c4266f0", class: "app-layout__nav-overlay-toggle" }, a("swirl-button", { key: "c84849add9c4f76a2f226a5c050bb0540f7df07b", 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: "4f1931413fb83b0667d07e75f700abf06335230e", class: "app-layout__navigation-back-button" }, a("swirl-button", { key: "8188874ac49378f4de9c49ee84f70a9b6e111e37", hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick })), a("swirl-heading", { key: "889b1fcacbf88a72710cd36af7c54a7728df089f", as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), y && a("span", { key: "d0d371a1e080e10dcda1d29204a117798730eee8", class: "app-layout__navigation-controls" }, a("slot", { key: "3bca7780bb2bfe59471467de001f849b9b232662", name: "navigation-controls" }))), a("nav", { key: "e612f7874dc250d88f4c554c1200eb07c7f97f41", "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: "913cb8b7bc4cbc05d7fe30e5651937a5d8ac7258", name: "navigation" })), a("section", { key: "ae73f4764e10c73b404601a765f735fb0c2b3c51", "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && a("header", { key: "0179719859439f3d433486d36ad5eb87cff76e93", class: "app-layout__app-bar" }, a("span", { key: "c3f902620abf9db0369184ee9dba7e61bbde8ecb", class: "app-layout__app-bar-mobile-menu-button" }, a("slot", { key: "520cbff25beeacac88c63ef52f1169fc1cd82bac", name: "app-bar-mobile-menu-button" })), t && a("span", { key: "2c237ec3f04ce5da7d571ed4aa3e69c42eeb19b2", class: "app-layout__back-to-navigation-button" }, a("swirl-button", { key: "ab1cc889450248c3a2555a46558d8a8d1d3e6e69", 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: "39640ad1337b38b65cb04e209298964217dc5b97", class: "app-layout__nav-expansion-toggle" }, a("swirl-button", { key: "63be47f8bdefdc5335e975b8288f4252e388676a", hideLabel: !0, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation })), a("span", { key: "a73ca0324d442a9fd2f76f28fe422070ebfd3392", class: "app-layout__custom-app-bar-back-button" }, a("slot", { key: "6b168560d179661b6ccbbaf84fde150f9445c33a", name: "custom-app-bar-back-button" })), a("div", { key: "ff9df5292be7e45fa73a6aa3fad3d160946c16e8", class: "app-layout__app-bar-content" }, a("slot", { key: "f0d622141406b628d83722090b0b2a30e1210ac5", name: "app-bar" })), a("div", { key: "ae0d9fa3eeb8acad36e2fa2890a39debaf7858c1", class: "app-layout__app-bar-controls" }, a("slot", { key: "7a645cda89b0e3224bed75a33b4a11949e2ccdf7", name: "app-bar-controls" }))), a("div", { key: "2ec277c97e569e907f95c5719fed9103fa2f69f2", class: "app-layout__banner" }, a("slot", { key: "7c3fa21988e8c6aa5a5ce19461a9c493e22520a0", name: "banner" })), a("div", { key: "2d818bf92b9f02f6339bf04e9305b543a724fc6a", class: "app-layout__content", onScroll: this.onContentScroll, ref: (i) => this.contentEl = i }, a("div", { key: "42fa90a807337bdffeaea454f1d1abc0e8f26c01", class: "app-layout__content-inner" }, a("slot", { key: "a4561df256b12e7893e3ee3832b75dfa15b06d5b", name: "content" })), a("div", { key: "d20801097b89fa70739fed10c35b8960fc93ff95", class: "app-layout__bottom-banner" }, a("slot", { key: "99b0849ace8d3d1c128b744f96bbd4587d77fd52", name: "bottom-banner" }))), a("div", { key: "dfca52dba0807f59010d6820a18b45ad4ed43359", class: "app-layout__bottom-bar" }, a("slot", { key: "1cbf5067eba3dd9cedd53debbf0c9613f2d95af1", name: "bottom-bar" }))), a("aside", { key: "b9a3cb541c078c17f55935ac703f2bd5a63d26f1", class: "app-layout__sidebar" }, a("header", { key: "658023fbfd242bcfb41ca7fb1b1702f91eecc273", class: "app-layout__custom-sidebar-header" }, a("slot", { key: "d1b4f31b3a65f6906737c4e5cb8d623967ff3756", name: "custom-sidebar-header" })), a("header", { key: "a0613856d435c7ab946838da48bea242f54b9076", class: "app-layout__sidebar-header" }, a("swirl-button", { key: "f097dddd068842235cf9d59f6f367419b5d1fb90", 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: "582ddba3782037f96a6b76b661348e5357a5579f", as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), a("div", { key: "fd66588b9c671f934e7a49e16c60e5c707fd38eb", class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (i) => this.sidebarEl = i }, a("slot", { key: "9b6f8493ce6d38cf25ff0446b90c4feba5de166c", name: "sidebar" }))), a("span", { key: "19c8eb89279ef4932cc44c60228301f20d0e1457", class: "app-layout__floating-action-button" }, this.ctaLabel && a("swirl-button", { key: "44ff78e3f1de73f50e64565e78edec285c75aab7", hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" }), a("slot", { key: "03c26b21b33b29619055763717d6c7fb3d4ac288", 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
+};