@getflip/swirl-components 0.0.0-new-shell-20231128124118

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

@@ -0,0 +1,250 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { i as isMobileViewport } from './utils.js';
+import { d as defineCustomElement$2 } from './swirl-button2.js';
+import { d as defineCustomElement$1 } from './swirl-heading2.js';
+
+const swirlAppLayoutCss = ":host{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:3.5625rem 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%, 25rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n      \"body\"}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 25rem) 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:25rem 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);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) .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}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button{display:block}.app-layout--hide-app-bar .app-layout__body{grid-template-rows:auto 1fr;grid-template-areas:\"banner\"\n      \"content\"}.app-layout__header{z-index:1;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 var(--s-border-default);background-color:var(--s-background-default);grid-area:header;will-change:transform;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-cta{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16)}.app-layout__navigation-controls{flex-shrink:0}.app-layout__navigation{z-index:1;overflow-y:auto;border-right:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:navigation;will-change:transform}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;grid-area:body;grid-template-rows:minmax(3.5rem, auto) auto 1fr;grid-template-areas:\"app-bar\"\n    \"banner\"\n    \"content\";will-change:transform}.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 var(--s-border-default);background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}.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{z-index:3;display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);will-change:transform;grid-area:sidebar;grid-template-rows:3.5625rem 1fr;grid-template-areas:\"sidebar-header\"\n    \"sidebar-content\"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}}.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 var(--s-border-default);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}@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}.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}.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 (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}.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}.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 (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 (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 (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-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}";
+
+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.sidebarToggle = createEvent(this, "sidebarToggle", 7);
+    this.onBackToNavigationViewButtonClick = () => {
+      this.changeMobileView("navigation");
+    };
+    this.onCtaClick = (event) => {
+      this.ctaClick.emit(event);
+    };
+    this.onNavigationBackButtonClick = (event) => {
+      this.navigationBackButtonClick.emit(event);
+    };
+    this.onSidebarCloseButtonClick = () => {
+      this.hideSidebar();
+    };
+    this.appName = undefined;
+    this.backToNavigationViewButtonLabel = "Back to navigation";
+    this.ctaIcon = undefined;
+    this.ctaLabel = undefined;
+    this.hideAppBar = undefined;
+    this.navigationBackButtonLabel = "Go back";
+    this.navigationLabel = undefined;
+    this.showNavigationBackButton = undefined;
+    this.sidebarCloseButtonLabel = "Close sidebar";
+    this.sidebarHeading = undefined;
+    this.transitionStyle = "slides";
+    this.hasCustomAppBarBackButton = undefined;
+    this.hasNavigation = undefined;
+    this.hasSidebar = undefined;
+    this.mobileView = "navigation";
+    this.sidebarActive = undefined;
+    this.sidebarClosing = undefined;
+    this.transitioningFrom = undefined;
+    this.transitioningTo = undefined;
+  }
+  componentWillLoad() {
+    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();
+    });
+  }
+  disconnectedCallback() {
+    this.mutationObserver?.disconnect();
+  }
+  watchMobileView() {
+    this.checkMobileView();
+  }
+  /**
+   * Show the sidebar
+   */
+  async showSidebar() {
+    if (this.sidebarActive || !this.hasSidebar) {
+      return;
+    }
+    this.sidebarActive = true;
+    this.changeMobileView("sidebar");
+    this.sidebarToggle.emit(true);
+  }
+  /**
+   * Hide the sidebar
+   */
+  async hideSidebar() {
+    if (!this.sidebarActive || !this.hasSidebar) {
+      return;
+    }
+    if (Boolean(this.sidebarClosingTimeout)) {
+      clearTimeout(this.sidebarClosingTimeout);
+    }
+    this.sidebarClosing = true;
+    const delay = isMobileViewport() ? 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();
+    }
+  }
+  /**
+   * 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;
+    let delay = 0;
+    if (this.transitionStyle === "slides") {
+      delay = 400;
+    }
+    else if (this.transitionStyle === "dialog") {
+      delay = 300;
+    }
+    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"]'));
+  }
+  render() {
+    const showBackToNavigationButton = (this.mobileView === "body" || this.transitioningTo) &&
+      this.hasNavigation &&
+      !this.hasCustomAppBarBackButton;
+    const hasAppBarControls = Boolean(this.el.querySelector('[slot="app-bar-controls"]'));
+    const hasAppBarMobileMenuButton = Boolean(this.el.querySelector('[slot="app-bar-mobile-menu-button"]'));
+    const className = classnames("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, {
+      "app-layout--has-app-bar-mobile-menu-button": hasAppBarMobileMenuButton,
+      "app-layout--has-app-bar-controls": hasAppBarControls,
+      "app-layout--has-custom-app-bar-back-button": this.hasCustomAppBarBackButton,
+      "app-layout--has-navigation": this.hasNavigation,
+      "app-layout--has-sidebar": this.hasSidebar,
+      "app-layout--hide-app-bar": this.hideAppBar,
+      "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
+      "app-layout--sidebar-closing": this.sidebarClosing,
+    });
+    return (h(Host, null, h("section", { "aria-labelledby": "app-name", class: className, role: "document", tabIndex: 0 }, h("div", { class: "app-layout__grid" }, h("header", { class: "app-layout__header" }, h("span", { class: "app-layout__navigation-mobile-menu-button" }, h("slot", { name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (h("span", { class: "app-layout__navigation-back-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (h("span", { class: "app-layout__navigation-controls" }, h("slot", { name: "navigation-controls" })))), h("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, h("slot", { name: "navigation" })), h("section", { "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { class: "app-layout__app-bar" }, h("span", { class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { class: "app-layout__back-to-navigation-button" }, h("swirl-button", { 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 }))), h("span", { class: "app-layout__custom-app-bar-back-button" }, h("slot", { name: "custom-app-bar-back-button" })), h("div", { class: "app-layout__app-bar-content" }, h("slot", { name: "app-bar" })), h("div", { class: "app-layout__app-bar-controls" }, h("slot", { name: "app-bar-controls" })))), h("div", { class: "app-layout__banner" }, h("slot", { name: "banner" })), h("div", { class: "app-layout__content" }, h("slot", { name: "content" }))), h("aside", { class: "app-layout__sidebar" }, h("header", { class: "app-layout__sidebar-header" }, h("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { class: "app-layout__sidebar-content" }, h("slot", { name: "sidebar" }))), this.ctaLabel && (h("span", { class: "app-layout__floating-cta" }, h("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))))));
+  }
+  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"],
+    "ctaIcon": [1, "cta-icon"],
+    "ctaLabel": [1, "cta-label"],
+    "hideAppBar": [4, "hide-app-bar"],
+    "navigationBackButtonLabel": [1, "navigation-back-button-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"],
+    "hasCustomAppBarBackButton": [32],
+    "hasNavigation": [32],
+    "hasSidebar": [32],
+    "mobileView": [32],
+    "sidebarActive": [32],
+    "sidebarClosing": [32],
+    "transitioningFrom": [32],
+    "transitioningTo": [32],
+    "showSidebar": [64],
+    "hideSidebar": [64],
+    "toggleSidebar": [64],
+    "changeMobileView": [64]
+  }]);
+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;
+  } });
+}
+defineCustomElement();
+
+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;

package/dist/components/swirl-autocomplete.js

@@ -0,0 +1,364 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as autoUpdate, c as computePosition, o as offset } from './floating-ui.dom.esm.js';
+import { c as classnames } from './index2.js';
+import { d as debounce } from './utils.js';
+import { d as defineCustomElement$h } from './swirl-icon-cancel2.js';
+import { d as defineCustomElement$g } from './swirl-icon-check-small2.js';
+import { d as defineCustomElement$f } from './swirl-icon-check-strong2.js';
+import { d as defineCustomElement$e } from './swirl-icon-close2.js';
+import { d as defineCustomElement$d } from './swirl-icon-drag-handle2.js';
+import { d as defineCustomElement$c } from './swirl-icon-expand-less2.js';
+import { d as defineCustomElement$b } from './swirl-icon-expand-more2.js';
+import { d as defineCustomElement$a } from './swirl-icon-visibility2.js';
+import { d as defineCustomElement$9 } from './swirl-icon-visibility-off2.js';
+import { d as defineCustomElement$8 } from './swirl-option-list2.js';
+import { d as defineCustomElement$7 } from './swirl-option-list-item2.js';
+import { d as defineCustomElement$6 } from './swirl-spinner2.js';
+import { d as defineCustomElement$5 } from './swirl-stack2.js';
+import { d as defineCustomElement$4 } from './swirl-tag2.js';
+import { d as defineCustomElement$3 } from './swirl-text-input2.js';
+import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
+
+const swirlAutocompleteCss = ".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;max-height:18rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);animation:autocomplete-enter 0.1s;box-shadow:var(--s-shadow-level-1)}.autocomplete__listbox-container.sc-swirl-autocomplete:empty{display:none}.autocomplete__spinner.sc-swirl-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}.autocomplete__multi-select-tags.sc-swirl-autocomplete{margin-top:var(--swirl-autocomplete-tags-margin-top);margin-bottom:var(--s-space-4)}@keyframes autocomplete-enter{from{opacity:0}to{opacity:1}}";
+
+const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomplete extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.onChange = (event) => {
+      event.stopPropagation();
+      this.updateTerm(event);
+    };
+    this.updateTerm = debounce(async (event) => {
+      this.updateSuggestions(event.detail);
+      this.open();
+      if (this.multiSelect) {
+        return;
+      }
+      if (!Boolean(event.detail) || event.detail === "") {
+        this.value = undefined;
+        this.valueChange.emit(this.value);
+      }
+    }, 250, false);
+    this.onSelect = async (event) => {
+      event.stopPropagation();
+      if (this.multiSelect) {
+        const selectedItemIds = event.detail;
+        const unselectedItemIds = this.suggestions
+          .filter((suggestion) => !selectedItemIds.includes(suggestion.id))
+          .map((suggestion) => suggestion.id);
+        this.value = [
+          ...this.value.filter((item) => !unselectedItemIds.includes(item.id)),
+          ...this.suggestions.filter((suggestion) => selectedItemIds.includes(suggestion.id) &&
+            !this.value.some((item) => item.id === suggestion.id)),
+        ];
+        this.valueChange.emit(this.value);
+        this.inputEl.value = "";
+        const input = this.inputEl.querySelector("input");
+        if (Boolean(input)) {
+          input.value = "";
+          queueMicrotask(() => {
+            input.focus();
+            this.close();
+          });
+          this.updateSuggestions(input.value);
+        }
+      }
+      else {
+        if (Boolean(event.detail[0])) {
+          const itemId = event.detail[0];
+          const suggestion = this.suggestions.find((suggestion) => suggestion.id === itemId);
+          if (!Boolean(suggestion)) {
+            return;
+          }
+          this.value = suggestion;
+          this.valueChange.emit(this.value);
+          queueMicrotask(() => {
+            this.inputEl.querySelector("input")?.focus();
+            this.close();
+          });
+        }
+      }
+    };
+    this.onRemoveValue = (value) => {
+      if (!Array.isArray(this.value)) {
+        return;
+      }
+      this.value = this.value.filter((item) => item.id !== value);
+      this.valueChange.emit(this.value);
+    };
+    this.onFocusOut = (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (Boolean(relatedTarget) && !this.el.contains(relatedTarget)) {
+        this.close();
+      }
+    };
+    this.onFocus = () => {
+      this.updateSuggestions();
+      this.open();
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.inputEl.querySelector("input").focus();
+        this.close();
+      }
+    };
+    this.onInputKeyDown = (event) => {
+      if (event.code === "ArrowDown") {
+        event.preventDefault();
+        this.listboxEl
+          .querySelector('[role="listbox"]')
+          ?.querySelector('[tabIndex="0"]')
+          ?.focus();
+      }
+    };
+    this.autoSelect = undefined;
+    this.clearable = true;
+    this.clearButtonLabel = "Clear input";
+    this.disabled = undefined;
+    this.generateSuggestions = async () => [];
+    this.inline = undefined;
+    this.invalid = undefined;
+    this.maxLength = undefined;
+    this.menuLabel = "Suggestions";
+    this.mode = undefined;
+    this.multiSelect = undefined;
+    this.placeholder = undefined;
+    this.required = undefined;
+    this.spellCheck = undefined;
+    this.swirlAriaDescribedby = undefined;
+    this.value = undefined;
+    this.active = false;
+    this.loading = false;
+    this.position = undefined;
+    this.suggestions = [];
+  }
+  componentWillLoad() {
+    const index = document.querySelectorAll("swirl-datepicker").length;
+    this.id = `autocomplete-${index}`;
+    this.handleInitialValue();
+  }
+  onWindowClick(event) {
+    const target = event.target;
+    if (!this.el.contains(target)) {
+      this.close();
+    }
+  }
+  watchMultiSelect() {
+    this.handleInitialValue();
+  }
+  async close() {
+    if (!this.active) {
+      return;
+    }
+    if (this.disableAutoUpdate) {
+      this.disableAutoUpdate();
+    }
+    const inputEl = this.inputEl.querySelector("input");
+    if (Boolean(inputEl)) {
+      if (this.multiSelect) {
+        inputEl.value = "";
+      }
+      else {
+        inputEl.value =
+          this.value?.label || "";
+      }
+    }
+    this.active = false;
+  }
+  async open() {
+    if (this.active) {
+      return;
+    }
+    this.active = true;
+    requestAnimationFrame(async () => {
+      await this.reposition();
+      if (this.disableAutoUpdate) {
+        this.disableAutoUpdate();
+      }
+      this.disableAutoUpdate = autoUpdate(this.inputEl, this.listboxContainerEl, this.reposition.bind(this), { animationFrame: true });
+      this.listboxContainerEl.scrollTop = 0;
+      this.updateSuggestions(this.inputEl.querySelector("input").value);
+    });
+  }
+  async reposition() {
+    if (!Boolean(this.listboxContainerEl)) {
+      return;
+    }
+    this.position = await computePosition(this.inputEl, this.listboxContainerEl, {
+      middleware: [offset({ crossAxis: -16, mainAxis: 16 })],
+      placement: "bottom-start",
+      strategy: "fixed",
+    });
+  }
+  async updateSuggestions(term) {
+    this.loading = true;
+    this.suggestions = [];
+    this.suggestions = await this.generateSuggestions(term);
+    this.loading = false;
+  }
+  handleInitialValue() {
+    if (this.multiSelect && !Array.isArray(this.value)) {
+      this.value = [];
+    }
+    if (!this.multiSelect && Array.isArray(this.value)) {
+      this.value = undefined;
+    }
+  }
+  render() {
+    const suggestionsMenuId = `${this.id}-suggestions`;
+    const clearable = this.clearable && !this.multiSelect;
+    const optionListValue = this.multiSelect
+      ? this.value.map((item) => item.id)
+      : Boolean(this.value)
+        ? [this.value.id]
+        : [];
+    const valueLabel = this.multiSelect
+      ? undefined
+      : this.value?.label || "";
+    const className = classnames("autocomplete", {
+      "autocomplete--inactive": !this.active,
+    });
+    return (h(Host, null, h("div", { class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
+      Array.isArray(this.value) &&
+      this.value.length > 0 && (h("div", { class: "autocomplete__multi-select-tags" }, h("swirl-stack", { orientation: "horizontal", spacing: "8", wrap: true }, this.value.map((item) => {
+      return (h("swirl-tag", { key: item.id, label: item.label,
+        // eslint-disable-next-line react/jsx-no-bind
+        onRemove: () => this.onRemoveValue(item.id), removable: !this.disabled }));
+    })))), h("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: valueLabel }), h("div", { class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (el) => (this.listboxContainerEl = el), style: {
+        top: Boolean(this.position) ? `${this.position?.y}px` : "",
+        left: Boolean(this.position) ? `${this.position?.x}px` : "",
+        width: `${this.inputEl?.getBoundingClientRect().width + 32}px`,
+      } }, this.loading && (h("div", { class: "autocomplete__spinner" }, h("swirl-spinner", null))), this.suggestions.length > 0 && (h("swirl-option-list", { allowDeselect: this.multiSelect === true, label: this.menuLabel, multiSelect: this.multiSelect, onValueChange: this.onSelect, optionListId: suggestionsMenuId, ref: (el) => (this.listboxEl = el), value: optionListValue }, this.suggestions.map((suggestion) => (h("swirl-option-list-item", { selected: Array.isArray(this.value)
+        ? this.value.some((item) => item.id === suggestion.id)
+        : this.value?.id === suggestion.id, key: suggestion.id, disabled: suggestion.disabled, label: suggestion.label, value: suggestion.id })))))))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "multiSelect": ["watchMultiSelect"]
+  }; }
+  static get style() { return swirlAutocompleteCss; }
+}, [2, "swirl-autocomplete", {
+    "autoSelect": [4, "auto-select"],
+    "clearable": [4],
+    "clearButtonLabel": [1, "clear-button-label"],
+    "disabled": [4],
+    "generateSuggestions": [1040],
+    "inline": [4],
+    "invalid": [4],
+    "maxLength": [2, "max-length"],
+    "menuLabel": [1, "menu-label"],
+    "mode": [1],
+    "multiSelect": [4, "multi-select"],
+    "placeholder": [1],
+    "required": [4],
+    "spellCheck": [4, "spell-check"],
+    "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
+    "value": [1040],
+    "active": [32],
+    "loading": [32],
+    "position": [32],
+    "suggestions": [32]
+  }, [[8, "click", "onWindowClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-autocomplete", "swirl-icon-cancel", "swirl-icon-check-small", "swirl-icon-check-strong", "swirl-icon-close", "swirl-icon-drag-handle", "swirl-icon-expand-less", "swirl-icon-expand-more", "swirl-icon-visibility", "swirl-icon-visibility-off", "swirl-option-list", "swirl-option-list-item", "swirl-spinner", "swirl-stack", "swirl-tag", "swirl-text-input", "swirl-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-autocomplete":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlAutocomplete$1);
+      }
+      break;
+    case "swirl-icon-cancel":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "swirl-icon-check-small":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "swirl-icon-check-strong":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "swirl-icon-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "swirl-icon-drag-handle":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "swirl-icon-expand-less":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "swirl-icon-expand-more":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "swirl-icon-visibility":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "swirl-icon-visibility-off":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "swirl-option-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "swirl-option-list-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "swirl-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "swirl-stack":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "swirl-tag":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "swirl-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlAutocomplete = SwirlAutocomplete$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlAutocomplete, defineCustomElement };

package/dist/components/swirl-avatar-group.d.ts

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