@getflip/swirl-components 0.0.0-beta-20260114160010

package/dist/components/swirl-app-icon.js

@@ -0,0 +1,64 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classNames } from './index2.js';
+
+const swirlAppIconCss = ":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}";
+
+const SwirlAppIcon$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppIcon extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.setImageAvailable = () => {
+            this.imageAvailable = true;
+        };
+        this.setImageUnavailable = () => {
+            this.imageAvailable = false;
+        };
+        this.onImageElementUpdate = (el) => {
+            this.imgEl?.removeEventListener("load", this.setImageAvailable);
+            this.imgEl?.removeEventListener("error", this.setImageUnavailable);
+            this.imgEl = el;
+            if (this.imgEl) {
+                this.imgEl.addEventListener("load", this.setImageAvailable);
+                this.imgEl.addEventListener("error", this.setImageUnavailable);
+            }
+        };
+    }
+    disconnectedCallback() {
+        this.imgEl?.removeEventListener("load", this.setImageAvailable);
+        this.imgEl?.removeEventListener("error", this.setImageUnavailable);
+    }
+    render() {
+        const showImage = Boolean(this.src) &&
+            (this.imageAvailable || this.imageAvailable === undefined);
+        const showIcon = !showImage && Boolean(this.icon);
+        const showFallbackIcon = !showImage && !showIcon;
+        const className = classNames("app-icon", {
+            "app-icon--has-icon": showIcon || showFallbackIcon,
+        });
+        return (h(Host, { key: '9c26acdf5286cb87a8e3645a0d723fa7822ea8bb' }, h("span", { key: '72b57e72a81b7e7234a96fcee39aba7f77922930', class: className }, showImage && (h("img", { key: '45c57c6182edd69d1ffd2bd8de7fc35dfff9bb03', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: '3ac1c0820d113ffbf1cf1b7798a5cb133cb58dfc', class: "app-icon__icon", innerHTML: this.icon })))));
+    }
+    static get style() { return swirlAppIconCss; }
+}, [1, "swirl-app-icon", {
+        "icon": [1],
+        "src": [1],
+        "imageAvailable": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["swirl-app-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "swirl-app-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SwirlAppIcon$1);
+            }
+            break;
+    } });
+}
+
+const SwirlAppIcon = SwirlAppIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlAppIcon, defineCustomElement };

package/dist/components/swirl-app-layout.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlAppLayout extends Components.SwirlAppLayout, HTMLElement {}
+export const SwirlAppLayout: {
+    prototype: SwirlAppLayout;
+    new (): SwirlAppLayout;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-app-layout.js

@@ -0,0 +1,6 @@
+import { S as SwirlAppLayout$1, d as defineCustomElement$1 } from './swirl-app-layout2.js';
+
+const SwirlAppLayout = SwirlAppLayout$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlAppLayout, defineCustomElement };

package/dist/components/swirl-app-layout2.js

@@ -0,0 +1,410 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classNames } from './index2.js';
+import { D as DesktopMediaQuery } from './media-query.service.js';
+import { d as debounce, i as isMobileViewport, p as prefersReducedMotion } from './utils.js';
+import { d as defineCustomElement$2 } from './swirl-button2.js';
+import { d as defineCustomElement$1 } from './swirl-heading2.js';
+
+const swirlAppLayoutCss = ":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\"\n    \"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\"\n      \"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\"\n        \"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(\n              to right,\n              rgba(0, 0, 0, 0.05) 0,\n              rgba(0, 0, 0, 0) 80%,\n              rgba(0, 0, 0, 0) 100%\n            );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).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).app-layout--sidebar-opening .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).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).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\"\n          \"body sidebar\"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n      \"body\"}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:25rem 1fr 25rem;grid-template-areas:\"header body sidebar\"\n          \"navigation body sidebar\"}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.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.app-layout--sidebar-opening .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar.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.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.app-layout--sidebar-closing .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar.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\"\n        \"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) and (max-width: 1799px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);z-index:3;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\"\n        \"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\"\n        \"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\"\n        \"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 .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\"\n      \"banner\"\n      \"content\"\n      \"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}.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\"\n      \"content\"\n      \"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) .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__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)}@media (min-width: 768px){.app-layout__app-bar-mobile-menu-button{padding-left:0}}.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%;grid-area:body;grid-template-rows:minmax(var(--header-height), auto) auto 1fr;grid-template-areas:\"app-bar\"\n    \"banner\"\n    \"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;background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}.app-layout__bottom-bar{display:none;min-width:0;align-items:center;background-color:var(--s-background-default);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;background-color:var(--s-background-default);grid-area:content}.app-layout__sidebar{display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);grid-area:sidebar;grid-template-rows:var(--header-height) 1fr;grid-template-areas:\"sidebar-header\"\n    \"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}}}@media (min-width: 1800px){.app-layout__sidebar{width:25rem;animation:none}}.app-layout__custom-sidebar-header{display:none;min-width:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);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;background-color:var(--s-background-default);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;background-color:var(--s-background-default);grid-area:sidebar-content}@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 (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\"\n          \"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\"\n          \"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}}";
+
+const SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY = "SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE";
+const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.ctaClick = createEvent(this, "ctaClick", 7);
+        this.mobileViewChange = createEvent(this, "mobileViewChange", 7);
+        this.navigationBackButtonClick = createEvent(this, "navigationBackButtonClick", 7);
+        this.navigationExpansionStateChange = createEvent(this, "navigationExpansionStateChange", 7);
+        this.sidebarToggle = createEvent(this, "sidebarToggle", 7);
+        this.backToNavigationViewButtonLabel = "Back to navigation";
+        this.navigationBackButtonLabel = "Go back";
+        this.navigationExpansionStateStorageKey = SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY;
+        this.navigationToggleLabel = "Toggle navigation";
+        this.navigationOverlayLabel = "Show navigation";
+        this.sidebarCloseButtonLabel = "Close sidebar";
+        this.transitionStyle = "slides";
+        this.contentScrollState = {
+            scrollable: false,
+            scrolledToTop: false,
+            scrolledToBottom: false,
+        };
+        this.mobileView = "navigation";
+        this.navScrollState = {
+            scrollable: false,
+            scrolledToTop: false,
+        };
+        this.navExpansionState = "expanded";
+        this.sidebarScrollState = {
+            scrollable: false,
+            scrolledToTop: false,
+        };
+        this.mediaQueryUnsubscribe = () => { };
+        this.onBackToNavigationViewButtonClick = () => {
+            this.changeMobileView("navigation");
+        };
+        this.onCtaClick = (event) => {
+            this.ctaClick.emit(event);
+        };
+        this.onNavigationBackButtonClick = (event) => {
+            this.navigationBackButtonClick.emit(event);
+        };
+        this.onSidebarCloseButtonClick = () => {
+            this.hideSidebar();
+        };
+        this.onContentScroll = debounce(() => {
+            this.updateContentScrollState();
+        }, 16);
+        this.onNavScroll = debounce(() => {
+            this.updateNavScrollState();
+        }, 16);
+        this.onSidebarScroll = debounce(() => {
+            this.updateSidebarScrollState();
+        }, 16);
+        this.toggleNavigation = () => {
+            if (!this.collapsibleNavigation) {
+                return;
+            }
+            const newNavExpansionState = this.navExpansionState === "expanded" ? "collapsed" : "expanded";
+            this.setCollapsibleNavigationState(newNavExpansionState);
+        };
+        this.overlayNavigation = (event) => {
+            event.stopPropagation();
+            this.setCollapsibleNavigationState("overlayed");
+        };
+    }
+    componentWillLoad() {
+        if (this.initialMobileView) {
+            this.mobileView = this.initialMobileView;
+        }
+        this.mutationObserver = new MutationObserver(() => {
+            this.updateCustomAppBarBackButtonStatus();
+            this.updateNavigationStatus();
+            this.updateSidebarStatus();
+        });
+        this.mutationObserver.observe(this.el, { childList: true });
+        queueMicrotask(() => {
+            this.updateCustomAppBarBackButtonStatus();
+            this.updateSidebarStatus();
+            this.updateNavigationStatus();
+            this.checkMobileView();
+        });
+    }
+    componentDidLoad() {
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.isDesktop = isDesktop;
+        });
+        queueMicrotask(() => {
+            this.restoreNavExpansionState();
+            this.updateContentScrollState();
+            this.updateSidebarScrollState();
+            this.updateNavScrollState();
+        });
+    }
+    disconnectedCallback() {
+        this.mediaQueryUnsubscribe();
+        this.mutationObserver?.disconnect();
+    }
+    onDocumentClick(event) {
+        if (!this.collapsibleNavigation || this.navExpansionState !== "overlayed") {
+            return;
+        }
+        const clickedInsideOfOverlayedNav = event.composedPath().includes(this.navEl) ||
+            event.composedPath().includes(this.headerEl);
+        if (!clickedInsideOfOverlayedNav) {
+            this.setCollapsibleNavigationState("collapsed");
+        }
+    }
+    onKeyDown(event) {
+        if (event.key === "Escape" && this.navExpansionState === "overlayed") {
+            this.setCollapsibleNavigationState("collapsed");
+        }
+    }
+    watchMobileView() {
+        this.checkMobileView();
+    }
+    /**
+     * Show the sidebar
+     */
+    async showSidebar() {
+        if (this.sidebarActive || !this.hasSidebar) {
+            return;
+        }
+        if (Boolean(this.sidebarOpeningTimeout)) {
+            clearTimeout(this.sidebarOpeningTimeout);
+        }
+        this.sidebarOpening = true;
+        const delay = isMobileViewport() || prefersReducedMotion() ? 0 : 300;
+        this.sidebarOpeningTimeout = setTimeout(() => {
+            this.sidebarActive = true;
+            this.sidebarOpening = false;
+            this.changeMobileView("sidebar");
+            this.sidebarToggle.emit(true);
+        }, delay);
+    }
+    /**
+     * Hide the sidebar
+     */
+    async hideSidebar() {
+        if (!this.sidebarActive || !this.hasSidebar) {
+            return;
+        }
+        if (Boolean(this.sidebarClosingTimeout)) {
+            clearTimeout(this.sidebarClosingTimeout);
+        }
+        this.sidebarClosing = true;
+        const delay = isMobileViewport() || prefersReducedMotion() ? 0 : 300;
+        this.sidebarClosingTimeout = setTimeout(() => {
+            this.sidebarActive = false;
+            this.sidebarClosing = false;
+            this.changeMobileView("body");
+            this.sidebarToggle.emit(false);
+        }, delay);
+    }
+    /**
+     * Toggle the sidebar
+     */
+    async toggleSidebar() {
+        if (!this.hasSidebar) {
+            return;
+        }
+        if (this.sidebarActive) {
+            this.hideSidebar();
+        }
+        else {
+            this.showSidebar();
+        }
+    }
+    /**
+     * Get state of the collapsible navigation
+     */
+    async getCollapsibleNavigationState() {
+        return this.navExpansionState;
+    }
+    /**
+     * Set state of the collapsible navigation
+     */
+    async setCollapsibleNavigationState(state) {
+        if (!this.collapsibleNavigation) {
+            return;
+        }
+        this.navExpansionState = state;
+        this.navigationExpansionStateChange.emit(this.navExpansionState);
+        localStorage.setItem(this.navigationExpansionStateStorageKey, this.navExpansionState);
+    }
+    /**
+     * Change the currently displayed view on mobile viewports
+     * @param mobileView
+     */
+    async changeMobileView(mobileView, transition = true) {
+        if (this.mobileView === mobileView ||
+            (mobileView === "navigation" && !this.hasNavigation) ||
+            (mobileView === "sidebar" && !this.hasSidebar)) {
+            return;
+        }
+        const mobile = isMobileViewport();
+        if (!mobile || !transition) {
+            this.mobileView = mobileView;
+            this.mobileViewChange.emit(this.mobileView);
+            return;
+        }
+        if (Boolean(this.transitionTimeout)) {
+            clearTimeout(this.transitionTimeout);
+        }
+        this.transitioningFrom = this.mobileView;
+        this.transitioningTo = mobileView;
+        const userPrefersReducedMotion = prefersReducedMotion();
+        const delay = userPrefersReducedMotion
+            ? 0
+            : this.transitionStyle === "slides"
+                ? 400
+                : this.transitionStyle === "dialog"
+                    ? 300
+                    : 0;
+        this.transitionTimeout = setTimeout(() => {
+            this.mobileView = mobileView;
+            this.transitioningFrom = undefined;
+            this.transitioningTo = undefined;
+            this.mobileViewChange.emit(this.mobileView);
+        }, delay);
+    }
+    checkMobileView() {
+        if ((this.mobileView === "navigation" && !this.hasNavigation) ||
+            (this.mobileView === "sidebar" && !this.hasSidebar)) {
+            this.mobileView = "body";
+            return;
+        }
+        const sidebarActive = this.mobileView === "sidebar" || this.sidebarActive;
+        if (sidebarActive === this.sidebarActive) {
+            return;
+        }
+        if (sidebarActive) {
+            this.showSidebar();
+        }
+        else {
+            this.hideSidebar();
+        }
+    }
+    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 newContentScrollState = {
+            scrollable: this.contentEl.scrollHeight > this.contentEl.clientHeight,
+            scrolledToTop: this.contentEl.scrollTop === 0,
+            scrolledToBottom: Math.round(this.contentEl.scrollTop + this.contentEl.clientHeight) >=
+                this.contentEl.scrollHeight,
+        };
+        if (Object.keys(newContentScrollState).some((key) => newContentScrollState[key] !== this.contentScrollState[key])) {
+            this.contentScrollState = newContentScrollState;
+        }
+    }
+    updateNavScrollState() {
+        const newNavScrollState = {
+            scrollable: this.navEl.scrollHeight > this.navEl.clientHeight,
+            scrolledToTop: this.navEl.scrollTop === 0,
+        };
+        if (Object.keys(newNavScrollState).some((key) => newNavScrollState[key] !== this.navScrollState[key])) {
+            this.navScrollState = newNavScrollState;
+        }
+    }
+    updateSidebarScrollState() {
+        const newSidebarScrollState = {
+            scrollable: this.sidebarEl.scrollHeight > this.sidebarEl.clientHeight,
+            scrolledToTop: this.sidebarEl.scrollTop === 0,
+        };
+        if (Object.keys(newSidebarScrollState).some((key) => newSidebarScrollState[key] !== this.sidebarScrollState[key])) {
+            this.sidebarScrollState = newSidebarScrollState;
+        }
+    }
+    restoreNavExpansionState() {
+        if (!this.collapsibleNavigation) {
+            return;
+        }
+        const restoredNavExpansionState = localStorage.getItem(this.navigationExpansionStateStorageKey);
+        if (Boolean(restoredNavExpansionState)) {
+            this.setCollapsibleNavigationState(restoredNavExpansionState);
+        }
+    }
+    render() {
+        const showBackToNavigationButton = (this.mobileView === "body" || this.transitioningTo) &&
+            this.hasNavigation &&
+            !this.hasCustomAppBarBackButton;
+        const hasAppBarControls = Boolean(this.el.querySelector('[slot="app-bar-controls"]'));
+        const hasBottomBar = Boolean(this.el.querySelector('[slot="bottom-bar"]'));
+        const hasAppBarMobileMenuButton = Boolean(this.el.querySelector('[slot="app-bar-mobile-menu-button"]'));
+        const hasCustomSidebarHeader = Boolean(this.el.querySelector('[slot="custom-sidebar-header"]'));
+        const hasFloatingActionButton = Boolean(this.el.querySelector('[slot="floating-action-button"]')) ||
+            Boolean(this.ctaLabel);
+        const navigationActive = this.hasNavigation &&
+            (!this.collapsibleNavigation ||
+                this.navExpansionState !== "collapsed" ||
+                !this.isDesktop);
+        const className = classNames("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--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": hasAppBarMobileMenuButton,
+            "app-layout--has-app-bar-controls": hasAppBarControls,
+            "app-layout--has-bottom-bar": hasBottomBar,
+            "app-layout--has-custom-app-bar-back-button": this.hasCustomAppBarBackButton,
+            "app-layout--has-custom-sidebar-header": hasCustomSidebarHeader,
+            "app-layout--has-floating-action-button": hasFloatingActionButton,
+            "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--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 (h(Host, { key: '0970730a8b11319c50969d6d6e7f217dcf56e2f0' }, h("section", { key: '06d420b7d6bfe12422b52e2cdcb8fa8a2ed0fbac', "aria-labelledby": "app-name", class: className }, h("div", { key: 'b50a9beffae3145861ed4b71705fe673f5d10043', class: "app-layout__grid" }, h("header", { key: '04c3f7e4b7cb227cca2e9a15e262ddc9874032e1', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, h("span", { key: '67ba8ba5394d42ba1f96ccb3258aefb8acce87c9', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '8795a4b7ac5a63bdd1f838c6ba1d0314cfa33dc9', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (h("span", { key: '0a11ae6739ed9863837da26a60a5f524ca2215ea', class: "app-layout__nav-overlay-toggle" }, h("swirl-button", { key: 'e0670ebab68aaefd7342a31b0a2c139f181c4cf1', hideLabel: true, 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 && (h("span", { key: 'df74e59b27c2e15ffc532826ac69794df187ece9', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: 'ca4e1610d7566b66ebe6958f8ec6f89d4a84554c', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: '7ca7f6ca8a69fead26966a6b224966f4404351da', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (h("span", { key: '3d1205492f28588558a5e1d1c1948c4da7870c46', class: "app-layout__navigation-controls" }, h("slot", { key: 'f97090b47f524589e4d86e293e92ce2e001503dd', name: "navigation-controls" })))), h("nav", { key: '9b2f944843bcee7c5322b728ea26fcc7d8ed990f', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el), inert: this.isDesktop &&
+                this.collapsibleNavigation &&
+                this.navExpansionState === "collapsed" }, h("slot", { key: 'a3fa785458acf70951cf209062e9f91bfec49db4', name: "navigation" })), h("section", { key: '3649f14cce3bdf275bc7325680b4c193085272f7', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '401b6adeda9ed569d8a6c37f381fed0623a34701', class: "app-layout__app-bar" }, h("span", { key: '7b60e9abca35a3c6ab900e8d882116e8b22ce730', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: '44c01881cb2c4799942609ca43f2ead4de855859', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: '63a89ec584fa6a21a5cf4be3fdf15e84df01b03a', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: '5d05136bb74adcc5a404bdb74533636777f3b598', hideLabel: true, 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" && (h("span", { key: '0426043d85f25bd9581b2046215dba5cc50ee24c', class: "app-layout__nav-expansion-toggle" }, h("swirl-button", { key: '5b64b49937d180b23de6435351a0b7498562b2f7', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), h("span", { key: 'eaa0172b442211086532a15fae6bb99b70dafab6', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: '86177f0040e21c020b2d88a2e11cc1f2045d9bcf', name: "custom-app-bar-back-button" })), h("div", { key: 'ff317fc8d6a4f75b81db2f4c6867d1259a9e2cc6', class: "app-layout__app-bar-content" }, h("slot", { key: '59a8e892b40e1b56acc3f33cb956d1a588670a5e', name: "app-bar" })), h("div", { key: '2244b236929f9de30d18f886b2992187b1f9baf8', class: "app-layout__app-bar-controls" }, h("slot", { key: 'c5fae8b152e14275cb09b7db637ea8ca64932648', name: "app-bar-controls" })))), h("div", { key: '85a6875e28ec691f659cbee27e299bca2048ff67', class: "app-layout__banner" }, h("slot", { key: '9790312e956f47faca3c1c4b04a6b1422a889498', name: "banner" })), h("div", { key: 'd33ae32d0644d24027423eb9dc9ba94c54b0070b', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, h("slot", { key: '9e615a708ac9ae2817a680e868c70d4a9ec3d075', name: "content" })), h("div", { key: 'd173a40d98a1d8cd6b93135d9a6984afc6487813', class: "app-layout__bottom-bar" }, h("slot", { key: '10a8422834710d9b15dea188d0f8b24dab14887e', name: "bottom-bar" }))), h("aside", { key: '0da3e8a8bf7be2c6ae12ebf89b6fc91f4d9a27a2', class: "app-layout__sidebar" }, h("header", { key: 'da7303d27a7c9d65a3d3dd7ec9799f7ea8b63dd8', class: "app-layout__custom-sidebar-header" }, h("slot", { key: 'fd8fc8403066c85dd26ed414afded579928da657', name: "custom-sidebar-header" })), h("header", { key: 'addfa87cef788f272e586e3a02b0f47be414cc58', class: "app-layout__sidebar-header" }, h("swirl-button", { key: '7daf54726d77b5a9656dd888d32d4c111746e59e', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { key: 'c743c2b1049f87a5c81b99ddc836f4a2b9b08561', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: '9443e3843d55af79d62c949b8df53a6a1f27a4e9', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, h("slot", { key: '0b5eff0be0d4e98ed2755b412d8783fe25d8d809', name: "sidebar" }))), h("span", { key: 'a1487ea686f593c4b117a9eb74fe61fe8b516336', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: '02d61ee5b96263295218ed0b99cb8b93d1e06df0', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '7f1e9ae5a5cbf12e28b12d8e7227fee017f6f532', name: "floating-action-button" }))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "mobileView": ["watchMobileView"]
+    }; }
+    static get style() { return swirlAppLayoutCss; }
+}, [1, "swirl-app-layout", {
+        "appName": [1, "app-name"],
+        "backToNavigationViewButtonLabel": [1, "back-to-navigation-view-button-label"],
+        "collapsibleNavigation": [4, "collapsible-navigation"],
+        "ctaIcon": [1, "cta-icon"],
+        "ctaLabel": [1, "cta-label"],
+        "hasNavigation": [1028, "has-navigation"],
+        "hideAppBar": [4, "hide-app-bar"],
+        "initialMobileView": [1, "initial-mobile-view"],
+        "navigationBackButtonLabel": [1, "navigation-back-button-label"],
+        "navigationExpansionStateStorageKey": [1, "navigation-expansion-state-storage-key"],
+        "navigationToggleLabel": [1, "navigation-toggle-label"],
+        "navigationOverlayLabel": [1, "navigation-overlay-label"],
+        "navigationLabel": [1, "navigation-label"],
+        "showNavigationBackButton": [4, "show-navigation-back-button"],
+        "sidebarCloseButtonLabel": [1, "sidebar-close-button-label"],
+        "sidebarHeading": [1, "sidebar-heading"],
+        "transitionStyle": [1, "transition-style"],
+        "contentScrollState": [32],
+        "hasCustomAppBarBackButton": [32],
+        "hasSidebar": [32],
+        "isDesktop": [32],
+        "mobileView": [32],
+        "navScrollState": [32],
+        "navExpansionState": [32],
+        "sidebarActive": [32],
+        "sidebarClosing": [32],
+        "sidebarOpening": [32],
+        "sidebarScrollState": [32],
+        "transitioningFrom": [32],
+        "transitioningTo": [32],
+        "showSidebar": [64],
+        "hideSidebar": [64],
+        "toggleSidebar": [64],
+        "getCollapsibleNavigationState": [64],
+        "setCollapsibleNavigationState": [64],
+        "changeMobileView": [64]
+    }, [[4, "click", "onDocumentClick"], [0, "keydown", "onKeyDown"]], {
+        "mobileView": ["watchMobileView"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["swirl-app-layout", "swirl-button", "swirl-heading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "swirl-app-layout":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SwirlAppLayout);
+            }
+            break;
+        case "swirl-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "swirl-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SwirlAppLayout as S, defineCustomElement as d };

package/dist/components/swirl-autocomplete.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlAutocomplete extends Components.SwirlAutocomplete, HTMLElement {}
+export const SwirlAutocomplete: {
+    prototype: SwirlAutocomplete;
+    new (): SwirlAutocomplete;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;